@nanoporetech-digital/components 7.9.1 → 8.0.0-alpha.0

package/dist/cjs/nano-icon.cjs.entry.js

@@ -1,320 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-615cdb64.js');
-const renderer = require('./renderer-cd8b6098.js');
-const theme = require('./theme-a2f7ddf8.js');
-
-let CACHED_MAP;
-const getIconMap = () => {
-    if (!CACHED_MAP) {
-        const win = window;
-        win.Nanoicons = win.Nanoicons || {};
-        CACHED_MAP = win.Nanoicons.map = win.Nanoicons.map || new Map();
-    }
-    return CACHED_MAP;
-};
-const getUrl = (i) => {
-    let url = getSrc(i.src);
-    if (url) {
-        return url;
-    }
-    url = getName(i.name, i.icon);
-    if (url) {
-        return getNamedUrl(url);
-    }
-    if (i.icon) {
-        url = getSrc(i.icon);
-        if (url) {
-            return url;
-        }
-    }
-    return null;
-};
-const getNamedUrl = (iconName) => {
-    const url = getIconMap().get(iconName);
-    if (url) {
-        return url;
-    }
-    return index.getAssetPath(`../nano-assets/fontawesome-pro/svgs/${iconName}.svg`);
-};
-const getName = (iconName, icon) => {
-    if (!iconName && icon && !isSrc(icon)) {
-        iconName = icon;
-    }
-    if (isStr(iconName)) {
-        iconName = toLower(iconName);
-    }
-    if (!isStr(iconName) || iconName.trim() === '') {
-        return null;
-    }
-    // only allow alpha characters and dash
-    const invalidChars = iconName.replace(/[a-z]|-|\/|\d/gi, '');
-    if (invalidChars !== '') {
-        console.warn('invalid characters in icon name ' + iconName);
-        return null;
-    }
-    return iconName;
-};
-const getSrc = (src) => {
-    if (isStr(src)) {
-        src = src.trim();
-        if (isSrc(src)) {
-            return src;
-        }
-    }
-    return null;
-};
-const isSrc = (str) => str.length > 0 && /(\/|\.)/.test(str);
-const isStr = (val) => typeof val === 'string';
-const toLower = (val) => val.toLowerCase();
-
-const validateContent = (svgContent) => {
-    if (svgContent) {
-        const div = document.createElement('div');
-        div.innerHTML = svgContent;
-        // setup this way to ensure it works on our buddy IE
-        for (let i = div.childNodes.length - 1; i >= 0; i--) {
-            if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {
-                div.removeChild(div.childNodes[i]);
-            }
-        }
-        // must only have 1 root element
-        const svgElm = div.firstElementChild;
-        if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {
-            const svgClass = svgElm.getAttribute('class') || '';
-            svgElm.setAttribute('class', (svgClass + ' sc-nano-icon s-nano-icon svg').trim());
-            // root element must be an svg
-            // lets double check we've got valid elements
-            // do not allow scripts
-            if (isValid(svgElm)) {
-                return div.innerHTML;
-            }
-        }
-    }
-    return '';
-};
-const isValid = (elm) => {
-    if (elm.nodeType === 1) {
-        if (elm.nodeName.toLowerCase() === 'script') {
-            return false;
-        }
-        for (let i = 0; i < elm.attributes.length; i++) {
-            const val = elm.attributes[i].value;
-            if (isStr(val) && val.toLowerCase().indexOf('on') === 0) {
-                return false;
-            }
-        }
-        for (let i = 0; i < elm.childNodes.length; i++) {
-            if (!isValid(elm.childNodes[i])) {
-                return false;
-            }
-        }
-    }
-    return true;
-};
-
-const iconContent = new Map();
-const requests = new Map();
-const getSvgContent = (url) => {
-    // see if we already have a request for this url
-    let req = requests.get(url);
-    if (!req) {
-        // we don't already have a request
-        req = fetch(url).then((rsp) => {
-            if (rsp.ok) {
-                return rsp.text().then((svgContent) => {
-                    iconContent.set(url, validateContent(svgContent));
-                });
-            }
-            iconContent.set(url, '');
-        });
-        // cache for the same requests
-        requests.set(url, req);
-    }
-    return req;
-};
-
-const iconCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--color:var(--nano-color-base, currentcolor);--primary-color:var(--nano-color-tint, currentcolor);--secondary-color:var(--nano-color-shade, currentcolor);--stroke-width:32px;--primary-opacity:0.8;--secondary-opacity:1;--icon-size:var(--nano-icon-size, 1em);--icon-margin-top:var(--nano-icon-margin-top, 0);--icon-margin-end:var(--nano-icon-margin-end, 0);--icon-margin-bottom:var(--nano-icon-margin-bottom, 0);--icon-margin-start:var(--nano-icon-margin-start, 0);display:inline-block;inline-size:var(--icon-size);block-size:var(--icon-size);min-inline-size:var(--icon-size);min-block-size:var(--icon-size);contain:strict;fill:currentcolor;box-sizing:content-box !important;transition:opacity 0.3s ease;color:var(--color);margin-inline:var(--icon-margin-start) var(--icon-margin-end);margin-block:var(--icon-margin-top) var(--icon-margin-bottom)}:host .nanoicon{stroke:currentcolor}.nanoicon-fill-none{fill:none}.nanoicon-stroke-width{stroke-width:32px;stroke-width:var(--stroke-width)}.icon-inner,.nanoicon,svg,.svg{display:block;block-size:100%;inline-size:100%;overflow:visible}:host(.loading){opacity:0}.fa-primary{color:var(--primary-color);opacity:var(--primary-opacity, 1)}.fa-secondary{color:var(--secondary-color);opacity:var(--secondary-opacity) !important}:host(.flip-rtl) .icon-inner{transform:scaleX(-1)}:host(.icon-small){font-size:18px !important}:host(.icon-large){font-size:32px !important}";
-const NanoIconStyle0 = iconCss;
-
-const Icon = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    io;
-    get el() { return index.getElement(this); }
-    svgContent;
-    isVisible = false;
-    isLoading = true;
-    /**
-     * Color to use from your application's color palette.
-     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-     */
-    color;
-    /**
-     * Specifies the role to use for accessibility. Defaults to 'presentation' (invisible to screen-readers)
-     */
-    role;
-    /**
-     * Specifies the label to use for accessibility. Defaults to the icon name.
-     */
-    ariaLabel;
-    /**
-     * Specifies whether the icon should horizontally flip when `dir` is `"rtl"`.
-     */
-    flipRtl;
-    /**
-     * Specifies which icon to use from the built-in set of icons.
-     */
-    name;
-    /**
-     * Specifies the exact `src` of an SVG file to use.
-     */
-    src;
-    /**
-     * A combination of both `name` and `src`. If a `src` url is detected
-     * it will set the `src` property. Otherwise it assumes it's a built-in named
-     * SVG and set the `name` property.
-     */
-    icon;
-    /**
-     * The size of the icon.
-     * Available options are: `"small"` and `"large"`.
-     */
-    size;
-    /**
-     * If enabled, nano-icon will be loaded lazily when it's visible in the viewport.
-     * Default, `true`.
-     */
-    lazy = true;
-    udpateRole() {
-        // force the role to be 'img' if the aria-label is explicitly set
-        if (this.ariaLabel)
-            this.role = 'img';
-        else if (!this.ariaLabel)
-            this.role = 'presentation';
-    }
-    setAriaLabel() {
-        if (!this.ariaLabel && !this.el.ariaLabel) {
-            if (!this.role || this.role !== 'presentation') {
-                // if the role is not 'presentation' and the user did not explicitly set a role,
-                // let's try and derive one from the icon name
-                const label = getName(this.name, this.icon);
-                // user did not provide a label
-                // come up with the label based on the icon name
-                if (label) {
-                    this.ariaLabel = label.split('/').slice(-1)[0].replace(/-/g, ' ');
-                }
-            }
-        }
-        else if (this.role === 'presentation') {
-            this.ariaLabel = undefined;
-        }
-    }
-    connectedCallback() {
-        // purposely do not return the promise here because loading
-        // the svg file should not hold up loading the app
-        // only load the svg if it's visible
-        this.waitUntilVisible(this.el, '50px', () => {
-            this.isVisible = true;
-            this.loadIcon();
-        });
-    }
-    disconnectedCallback() {
-        if (this.io) {
-            this.io.disconnect();
-            this.io = undefined;
-        }
-    }
-    componentWillLoad() {
-        this.udpateRole();
-        this.setAriaLabel();
-    }
-    waitUntilVisible(el, rootMargin, cb) {
-        if (this.lazy &&
-            typeof window !== 'undefined' &&
-            window.IntersectionObserver) {
-            const io = (this.io = new window.IntersectionObserver((data) => {
-                if (data[0].isIntersecting || (data[1] && data[1].isIntersecting)) {
-                    io.disconnect();
-                    this.io = undefined;
-                    cb();
-                }
-            }, { rootMargin }));
-            io.observe(el);
-        }
-        else {
-            // not a browser env (e.g. node)
-            // or we're not loading lazily
-            // or env doesn't support IntersectionObserver (testing?)
-            // - immediately fetch icon
-            cb();
-        }
-    }
-    loadIcon() {
-        if (this.isVisible) {
-            const url = getUrl(this);
-            if (url) {
-                if (iconContent.has(url)) {
-                    // sync if it's already loaded
-                    this.svgContent = iconContent.get(url);
-                    requestAnimationFrame(() => (this.isLoading = false));
-                }
-                else {
-                    // async if it hasn't been loaded
-                    getSvgContent(url).then(() => {
-                        this.svgContent = iconContent.get(url);
-                        requestAnimationFrame(() => (this.isLoading = false));
-                        this.setAriaLabel();
-                    });
-                }
-            }
-        }
-    }
-    isRtl() {
-        // doc is in rtl
-        if (this.el.ownerDocument?.dir === 'rtl')
-            return true;
-        // html element is in rtl element
-        if (this.el.closest('[dir="rtl"]'))
-            return true;
-        // nested in a shadow dom - see if that host element is contained in an rtl element
-        const rootNode = this.el.getRootNode();
-        const ownerHost = rootNode.host;
-        if (ownerHost && ownerHost.closest('[dir="rtl"]'))
-            return true;
-        return false;
-    }
-    render() {
-        const flipRtl = this.flipRtl ||
-            (this.name &&
-                (this.name.indexOf('arrow') > -1 ||
-                    this.name.indexOf('chevron') > -1) &&
-                this.isRtl() &&
-                this.flipRtl !== false);
-        return (renderer.h(index.Host, { key: 'bcb65502c19151978a0035c5493e1cfe37019c4a', class: {
-                ...theme.createColorClasses(this.color),
-                loading: this.isLoading,
-                [`icon-${this.size}`]: !!this.size,
-                'flip-rtl': !!flipRtl,
-                'nano-icon': true,
-            } }, this.svgContent ? (renderer.h("div", { class: "icon-inner", innerHTML: this.svgContent })) : (renderer.h("div", { class: "icon-inner" }))));
-    }
-    static get watchers() { return {
-        "ariaLabel": ["udpateRole"],
-        "role": ["setAriaLabel"],
-        "name": ["loadIcon"],
-        "src": ["loadIcon"],
-        "icon": ["loadIcon"]
-    }; }
-};
-Icon.style = NanoIconStyle0;
-
-exports.nano_icon = Icon;
-
-//# sourceMappingURL=nano-icon.cjs.entry.js.map

package/dist/cjs/nano-icon.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"nano-icon.entry.cjs.js","mappings":"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","names":["getAssetPath","h","Host","createColorClasses"],"sources":["src/components/icon/utils.ts","src/components/icon/validate.ts","src/components/icon/request.ts","src/components/icon/icon.scss?tag=nano-icon&encapsulation=shadow","src/components/icon/icon.tsx"],"sourcesContent":["import { getAssetPath } from '@stencil/core';\nimport { Icon } from './icon';\n\nlet CACHED_MAP: Map<string, string>;\n\nexport const getIconMap = (): Map<string, string> => {\n  if (!CACHED_MAP) {\n    const win = window as any;\n    win.Nanoicons = win.Nanoicons || {};\n    CACHED_MAP = win.Nanoicons.map = win.Nanoicons.map || new Map();\n  }\n  return CACHED_MAP;\n};\n\nexport const addIcons = (icons: { [name: string]: string }) => {\n  const map = getIconMap();\n  Object.keys(icons).forEach((name) => map.set(name, icons[name]));\n};\n\nexport const getUrl = (i: Icon) => {\n  let url = getSrc(i.src);\n  if (url) {\n    return url;\n  }\n\n  url = getName(i.name, i.icon);\n  if (url) {\n    return getNamedUrl(url);\n  }\n\n  if (i.icon) {\n    url = getSrc(i.icon);\n    if (url) {\n      return url;\n    }\n  }\n  return null;\n};\n\nconst getNamedUrl = (iconName: string) => {\n  const url = getIconMap().get(iconName);\n  if (url) {\n    return url;\n  }\n  return getAssetPath(`../nano-assets/fontawesome-pro/svgs/${iconName}.svg`);\n};\n\nexport const getName = (\n  iconName: string | undefined,\n  icon: string | undefined\n) => {\n  if (!iconName && icon && !isSrc(icon)) {\n    iconName = icon;\n  }\n  if (isStr(iconName)) {\n    iconName = toLower(iconName);\n  }\n\n  if (!isStr(iconName) || iconName.trim() === '') {\n    return null;\n  }\n\n  // only allow alpha characters and dash\n  const invalidChars = iconName.replace(/[a-z]|-|\\/|\\d/gi, '');\n  if (invalidChars !== '') {\n    console.warn('invalid characters in icon name ' + iconName);\n    return null;\n  }\n  return iconName;\n};\n\nexport const getSrc = (src: string | undefined) => {\n  if (isStr(src)) {\n    src = src.trim();\n    if (isSrc(src)) {\n      return src;\n    }\n  }\n  return null;\n};\n\nexport const isSrc = (str: string) => str.length > 0 && /(\\/|\\.)/.test(str);\nexport const isStr = (val: any): val is string => typeof val === 'string';\nexport const toLower = (val: string) => val.toLowerCase();\n","import { isStr } from './utils';\n\nexport const validateContent = (svgContent: string | null) => {\n  if (svgContent) {\n    const div = document.createElement('div');\n    div.innerHTML = svgContent;\n\n    // setup this way to ensure it works on our buddy IE\n    for (let i = div.childNodes.length - 1; i >= 0; i--) {\n      if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {\n        div.removeChild(div.childNodes[i]);\n      }\n    }\n\n    // must only have 1 root element\n    const svgElm = div.firstElementChild;\n    if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {\n      const svgClass = svgElm.getAttribute('class') || '';\n      svgElm.setAttribute(\n        'class',\n        (svgClass + ' sc-nano-icon s-nano-icon svg').trim()\n      );\n\n      // root element must be an svg\n      // lets double check we've got valid elements\n      // do not allow scripts\n      if (isValid(svgElm as any)) {\n        return div.innerHTML;\n      }\n    }\n  }\n  return '';\n};\n\nexport const isValid = (elm: HTMLElement) => {\n  if (elm.nodeType === 1) {\n    if (elm.nodeName.toLowerCase() === 'script') {\n      return false;\n    }\n\n    for (let i = 0; i < elm.attributes.length; i++) {\n      const val = elm.attributes[i].value;\n      if (isStr(val) && val.toLowerCase().indexOf('on') === 0) {\n        return false;\n      }\n    }\n\n    for (let i = 0; i < elm.childNodes.length; i++) {\n      if (!isValid(elm.childNodes[i] as any)) {\n        return false;\n      }\n    }\n  }\n  return true;\n};\n","import { validateContent } from './validate';\nexport const iconContent = new Map<string, string>();\nconst requests = new Map<string, Promise<any>>();\n\nexport const getSvgContent = (url: string) => {\n  // see if we already have a request for this url\n  let req = requests.get(url);\n  if (!req) {\n    // we don't already have a request\n    req = fetch(url).then((rsp) => {\n      if (rsp.ok) {\n        return rsp.text().then((svgContent) => {\n          iconContent.set(url, validateContent(svgContent));\n        });\n      }\n      iconContent.set(url, '');\n    });\n\n    // cache for the same requests\n    requests.set(url, req);\n  }\n  return req;\n};\n","@import '../../global/style/utilities/globals';\n\n:host {\n  /**\n  * @prop --color: defaults to current context color\n  * @prop --primary-color: used for duotone icons to set the primary color\n  * @prop --secondary-color: used for duotone icons to set the secondary color\n  * @prop --primary-opacity: used for duotone icons to set the primary opacity\n  * @prop --secondary-opacity: used for duotone icons to set the secondary opacity\n  * @prop --stroke-width: 32px default stroke width\n  */\n\n  --color: var(--nano-color-base, currentcolor);\n  --primary-color: var(--nano-color-tint, currentcolor);\n  --secondary-color: var(--nano-color-shade, currentcolor);\n  --stroke-width: 32px;\n  --primary-opacity: 0.8;\n  --secondary-opacity: 1;\n  --icon-size: var(--nano-icon-size, 1em);\n  --icon-margin-top: var(--nano-icon-margin-top, 0);\n  --icon-margin-end: var(--nano-icon-margin-end, 0);\n  --icon-margin-bottom: var(--nano-icon-margin-bottom, 0);\n  --icon-margin-start: var(--nano-icon-margin-start, 0);\n\n  display: inline-block;\n  inline-size: var(--icon-size);\n  block-size: var(--icon-size);\n  min-inline-size: var(--icon-size);\n  min-block-size: var(--icon-size);\n  contain: strict;\n  fill: currentcolor;\n  box-sizing: content-box !important;\n  transition: opacity 0.3s ease;\n  color: var(--color);\n  margin-inline: var(--icon-margin-start) var(--icon-margin-end);\n  margin-block: var(--icon-margin-top) var(--icon-margin-bottom);\n}\n\n:host .nanoicon {\n  stroke: currentcolor;\n}\n\n.nanoicon-fill-none {\n  fill: none;\n}\n\n.nanoicon-stroke-width {\n  stroke-width: 32px;\n  stroke-width: var(--stroke-width);\n}\n\n.icon-inner,\n.nanoicon,\nsvg,\n.svg {\n  display: block;\n  block-size: 100%;\n  inline-size: 100%;\n  overflow: visible;\n}\n\n:host(.loading) {\n  opacity: 0;\n}\n\n.fa-primary {\n  color: var(--primary-color);\n  opacity: var(--primary-opacity, 1);\n}\n\n.fa-secondary {\n  color: var(--secondary-color);\n  opacity: var(--secondary-opacity) !important;\n}\n\n/* Icon RTL\n * -----------------------------------------------------------\n */\n:host(.flip-rtl) .icon-inner {\n  transform: scaleX(-1);\n}\n\n/* Icon Sizes\n * -----------------------------------------------------------\n */\n:host(.icon-small) {\n  font-size: 18px !important;\n}\n\n:host(.icon-large) {\n  font-size: 32px !important;\n}\n","import {\n  Build,\n  Component,\n  Element,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { createColorClasses } from '../../utils/theme';\nimport { getSvgContent, iconContent } from './request';\nimport { getName, getUrl } from './utils';\nimport type { Color } from '../../types/shared';\n\n/**\n * An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path).\n * Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.\n */\n@Component({\n  tag: 'nano-icon',\n  styleUrl: 'icon.scss',\n  shadow: true,\n})\nexport class Icon {\n  private io?: IntersectionObserver;\n\n  @Element() el!: HTMLNanoIconElement;\n\n  @State() svgContent?: string;\n  @State() isVisible = false;\n  @State() isLoading = true;\n\n  /**\n   * Color to use from your application's color palette.\n   * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * Specifies the role to use for accessibility. Defaults to 'presentation' (invisible to screen-readers)\n   */\n  @Prop({ mutable: true, reflect: true }) role: string;\n\n  /**\n   * Specifies the label to use for accessibility. Defaults to the icon name.\n   */\n  @Prop({ mutable: true, reflect: true }) ariaLabel: string;\n\n  /**\n   * Specifies whether the icon should horizontally flip when `dir` is `\"rtl\"`.\n   */\n  @Prop() flipRtl?: boolean;\n\n  /**\n   * Specifies which icon to use from the built-in set of icons.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Specifies the exact `src` of an SVG file to use.\n   */\n  @Prop() src?: string;\n\n  /**\n   * A combination of both `name` and `src`. If a `src` url is detected\n   * it will set the `src` property. Otherwise it assumes it's a built-in named\n   * SVG and set the `name` property.\n   */\n  @Prop() icon?: any;\n\n  /**\n   * The size of the icon.\n   * Available options are: `\"small\"` and `\"large\"`.\n   */\n  @Prop() size?: 'small' | 'large';\n\n  /**\n   * If enabled, nano-icon will be loaded lazily when it's visible in the viewport.\n   * Default, `true`.\n   */\n  @Prop() lazy = true;\n\n  @Watch('ariaLabel')\n  udpateRole() {\n    // force the role to be 'img' if the aria-label is explicitly set\n    if (this.ariaLabel) this.role = 'img';\n    else if (!this.ariaLabel) this.role = 'presentation';\n  }\n\n  @Watch('role')\n  setAriaLabel() {\n    if (!this.ariaLabel && !this.el.ariaLabel) {\n      if (!this.role || this.role !== 'presentation') {\n        // if the role is not 'presentation' and the user did not explicitly set a role,\n        // let's try and derive one from the icon name\n\n        const label = getName(this.name, this.icon);\n        // user did not provide a label\n        // come up with the label based on the icon name\n        if (label) {\n          this.ariaLabel = label.split('/').slice(-1)[0].replace(/-/g, ' ');\n        }\n      }\n    } else if (this.role === 'presentation') {\n      this.ariaLabel = undefined;\n    }\n  }\n\n  connectedCallback() {\n    // purposely do not return the promise here because loading\n    // the svg file should not hold up loading the app\n    // only load the svg if it's visible\n    this.waitUntilVisible(this.el, '50px', () => {\n      this.isVisible = true;\n      this.loadIcon();\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  componentWillLoad() {\n    this.udpateRole();\n    this.setAriaLabel();\n  }\n\n  private waitUntilVisible(\n    el: HTMLElement,\n    rootMargin: string,\n    cb: () => void\n  ) {\n    if (\n      Build.isBrowser &&\n      this.lazy &&\n      typeof window !== 'undefined' &&\n      (window as any).IntersectionObserver\n    ) {\n      const io = (this.io = new (window as any).IntersectionObserver(\n        (data: IntersectionObserverEntry[]) => {\n          if (data[0].isIntersecting || (data[1] && data[1].isIntersecting)) {\n            io.disconnect();\n            this.io = undefined;\n            cb();\n          }\n        },\n        { rootMargin }\n      ));\n\n      io.observe(el);\n    } else {\n      // not a browser env (e.g. node)\n      // or we're not loading lazily\n      // or env doesn't support IntersectionObserver (testing?)\n      // - immediately fetch icon\n      cb();\n    }\n  }\n\n  @Watch('name')\n  @Watch('src')\n  @Watch('icon')\n  loadIcon() {\n    if (Build.isBrowser && this.isVisible) {\n      const url = getUrl(this);\n      if (url) {\n        if (iconContent.has(url)) {\n          // sync if it's already loaded\n          this.svgContent = iconContent.get(url);\n          requestAnimationFrame(() => (this.isLoading = false));\n        } else {\n          // async if it hasn't been loaded\n          getSvgContent(url).then(() => {\n            this.svgContent = iconContent.get(url);\n            requestAnimationFrame(() => (this.isLoading = false));\n            this.setAriaLabel();\n          });\n        }\n      }\n    }\n  }\n\n  private isRtl() {\n    // doc is in rtl\n    if (this.el.ownerDocument?.dir === 'rtl') return true;\n    // html element is in rtl element\n    if (this.el.closest('[dir=\"rtl\"]')) return true;\n\n    // nested in a shadow dom - see if that host element is contained in an rtl element\n    const rootNode = this.el.getRootNode() as ShadowRoot;\n    const ownerHost = rootNode.host;\n    if (ownerHost && ownerHost.closest('[dir=\"rtl\"]')) return true;\n\n    return false;\n  }\n\n  render() {\n    const flipRtl =\n      this.flipRtl ||\n      (this.name &&\n        (this.name.indexOf('arrow') > -1 ||\n          this.name.indexOf('chevron') > -1) &&\n        this.isRtl() &&\n        this.flipRtl !== false);\n\n    return (\n      <Host\n        class={{\n          ...createColorClasses(this.color),\n          loading: this.isLoading,\n          [`icon-${this.size}`]: !!this.size,\n          'flip-rtl': !!flipRtl,\n          'nano-icon': true,\n        }}\n      >\n        {Build.isBrowser && this.svgContent ? (\n          <div class=\"icon-inner\" innerHTML={this.svgContent}></div>\n        ) : (\n          <div class=\"icon-inner\"></div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}