text: 'use strict';
  
  Object.defineProperty(exports, '__esModule', { value: true });
  
  const __chunk_1 = require('./chunk-01d5c78f.js');
  const __chunk_2 = require('./chunk-3e191a50.js');
  
  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') {
              svgElm.setAttribute('class', 's-ion-icon');
              // 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 (__chunk_2.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 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.status <= 299) {
                  return rsp.text();
              }
              return Promise.resolve(null);
          }).then(svgContent => validateContent(svgContent));
          // cache for the same requests
          requests.set(url, req);
      }
      return req;
  };
  
  /**
   * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
   */
  class Icon {
      constructor(hostRef) {
          __chunk_1.registerInstance(this, hostRef);
          this.mode = getIonMode(this);
          this.isVisible = false;
          /**
           * If enabled, ion-icon will be loaded lazily when it's visible in the viewport.
           * Default, `false`.
           */
          this.lazy = false;
      }
      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;
          }
      }
      waitUntilVisible(el, rootMargin, cb) {
          if ( this.lazy && typeof window !== 'undefined' && window.IntersectionObserver) {
              const io = this.io = new window.IntersectionObserver((data) => {
                  if (data[0].isIntersecting) {
                      io.disconnect();
                      this.io = undefined;
                      cb();
                  }
              }, { rootMargin });
              io.observe(el);
          }
          else {
              // browser doesn't support IntersectionObserver
              // so just fallback to always show it
              cb();
          }
      }
      loadIcon() {
          if ( this.isVisible) {
              const url = __chunk_2.getUrl(this);
              if (url) {
                  getSvgContent(url)
                      .then(svgContent => this.svgContent = svgContent);
              }
          }
          if (!this.ariaLabel) {
              const label = __chunk_2.getName(this.name, this.icon, this.mode, this.ios, this.md);
              // user did not provide a label
              // come up with the label based on the icon name
              if (label) {
                  this.ariaLabel = label
                      .replace('ios-', '')
                      .replace('md-', '')
                      .replace(/\-/g, ' ');
              }
          }
      }
      render() {
          const mode = this.mode || 'md';
          const flipRtl = this.flipRtl || (this.ariaLabel && this.ariaLabel.indexOf('arrow') > -1 && this.flipRtl !== false);
          return (__chunk_1.h(__chunk_1.Host, { role: "img", class: Object.assign({ [mode]: true }, createColorClasses(this.color), { [`icon-${this.size}`]: !!this.size, 'flip-rtl': !!flipRtl && this.el.ownerDocument.dir === 'rtl' }) }, (( this.svgContent)
              ? __chunk_1.h("div", { class: "icon-inner", innerHTML: this.svgContent })
              : __chunk_1.h("div", { class: "icon-inner" }))));
      }
      static get assetsDirs() { return ["svg"]; }
      get el() { return __chunk_1.getElement(this); }
      static get watchers() { return {
          "name": ["loadIcon"],
          "src": ["loadIcon"],
          "icon": ["loadIcon"]
      }; }
      static get style() { return ":host{display:inline-block;width:1em;height:1em;contain:strict;fill:currentColor;-webkit-box-sizing:content-box!important;box-sizing:content-box!important}.icon-inner,svg{display:block;height:100%;width:100%}:host(.flip-rtl) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}:host(.icon-small){font-size:18px!important}:host(.icon-large){font-size:32px!important}:host(.ion-color){color:var(--ion-color-base)!important}:host(.ion-color-primary){--ion-color-base:var(--ion-color-primary,#3880ff)}:host(.ion-color-secondary){--ion-color-base:var(--ion-color-secondary,#0cd1e8)}:host(.ion-color-tertiary){--ion-color-base:var(--ion-color-tertiary,#f4a942)}:host(.ion-color-success){--ion-color-base:var(--ion-color-success,#10dc60)}:host(.ion-color-warning){--ion-color-base:var(--ion-color-warning,#ffce00)}:host(.ion-color-danger){--ion-color-base:var(--ion-color-danger,#f14141)}:host(.ion-color-light){--ion-color-base:var(--ion-color-light,#f4f5f8)}:host(.ion-color-medium){--ion-color-base:var(--ion-color-medium,#989aa2)}:host(.ion-color-dark){--ion-color-base:var(--ion-color-dark,#222428)}"; }
  }
  const getIonMode = (ref) => {
      return __chunk_1.getMode(ref) || document.documentElement.getAttribute('mode') || 'md';
  };
  const createColorClasses = (color) => {
      return (color) ? {
          'ion-color': true,
          [`ion-color-${color}`]: true
      } : null;
  };
  
  exports.ion_icon = Icon;
  