text: import { h } from '../ionic.core.js';
  
  import { b as openURL, c as createColorClasses } from './chunk-2f96b3d2.js';
  import { c as hasShadowDom } from './chunk-6d7d2f8c.js';
  
  class Button {
      constructor() {
          this.inToolbar = false;
          this.inItem = false;
          this.buttonType = 'button';
          this.disabled = false;
          this.routerDirection = 'forward';
          this.strong = false;
          this.type = 'button';
          this.onFocus = () => {
              this.ionFocus.emit();
          };
          this.onBlur = () => {
              this.ionBlur.emit();
          };
      }
      componentWillLoad() {
          this.inToolbar = !!this.el.closest('ion-buttons');
          this.inItem = !!this.el.closest('ion-item') || !!this.el.closest('ion-item-divider');
      }
      onClick(ev) {
          if (this.type === 'button') {
              openURL(this.win, this.href, ev, this.routerDirection);
          }
          else if (hasShadowDom(this.el)) {
              const form = this.el.closest('form');
              if (form) {
                  ev.preventDefault();
                  const fakeButton = this.win.document.createElement('button');
                  fakeButton.type = this.type;
                  fakeButton.style.display = 'none';
                  form.appendChild(fakeButton);
                  fakeButton.click();
                  fakeButton.remove();
              }
          }
      }
      get hasIconOnly() {
          return !!this.el.querySelector('ion-icon[slot="icon-only"]');
      }
      get rippleType() {
          const hasClearFill = this.fill === undefined || this.fill === 'clear';
          if (hasClearFill && this.hasIconOnly && this.inToolbar) {
              return 'unbounded';
          }
          return 'bounded';
      }
      hostData() {
          const { buttonType, disabled, color, expand, hasIconOnly, shape, strong } = this;
          let fill = this.fill;
          if (fill === undefined) {
              fill = this.inToolbar ? 'clear' : 'solid';
          }
          const size = this.size === undefined && this.inItem ? 'small' : this.size;
          return {
              'aria-disabled': disabled ? 'true' : null,
              class: Object.assign({}, createColorClasses(color), { [`${this.mode}`]: true, [buttonType]: true, [`${buttonType}-${expand}`]: expand !== undefined, [`${buttonType}-${size}`]: size !== undefined, [`${buttonType}-${shape}`]: shape !== undefined, [`${buttonType}-${fill}`]: true, [`${buttonType}-strong`]: strong, 'button-has-icon-only': hasIconOnly, 'button-disabled': disabled, 'ion-activatable': true, 'ion-focusable': true })
          };
      }
      render() {
          const TagType = this.href === undefined ? 'button' : 'a';
          const attrs = (TagType === 'button')
              ? { type: this.type }
              : { href: this.href };
          return (h(TagType, Object.assign({}, attrs, { class: "button-native", disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur }),
              h("span", { class: "button-inner" },
                  h("slot", { name: "icon-only" }),
                  h("slot", { name: "start" }),
                  h("slot", null),
                  h("slot", { name: "end" })),
              this.mode === 'md' && h("ion-ripple-effect", { type: this.rippleType })));
      }
      static get is() { return "ion-button"; }
      static get encapsulation() { return "shadow"; }
      static get properties() { return {
          "buttonType": {
              "type": String,
              "attr": "button-type",
              "mutable": true
          },
          "color": {
              "type": String,
              "attr": "color"
          },
          "disabled": {
              "type": Boolean,
              "attr": "disabled",
              "reflectToAttr": true
          },
          "el": {
              "elementRef": true
          },
          "expand": {
              "type": String,
              "attr": "expand",
              "reflectToAttr": true
          },
          "fill": {
              "type": String,
              "attr": "fill",
              "reflectToAttr": true,
              "mutable": true
          },
          "href": {
              "type": String,
              "attr": "href"
          },
          "mode": {
              "type": String,
              "attr": "mode"
          },
          "routerDirection": {
              "type": String,
              "attr": "router-direction"
          },
          "shape": {
              "type": String,
              "attr": "shape",
              "reflectToAttr": true
          },
          "size": {
              "type": String,
              "attr": "size",
              "reflectToAttr": true
          },
          "strong": {
              "type": Boolean,
              "attr": "strong"
          },
          "type": {
              "type": String,
              "attr": "type"
          },
          "win": {
              "context": "window"
          }
      }; }
      static get events() { return [{
              "name": "ionFocus",
              "method": "ionFocus",
              "bubbles": true,
              "cancelable": true,
              "composed": true
          }, {
              "name": "ionBlur",
              "method": "ionBlur",
              "bubbles": true,
              "cancelable": true,
              "composed": true
          }]; }
      static get listeners() { return [{
              "name": "click",
              "method": "onClick"
          }]; }
      static get style() { return ":host{--overflow:hidden;--ripple-color:currentColor;--border-width:initial;--border-color:initial;--border-style:initial;--color-hover:initial;--box-shadow:none;display:inline-block;width:auto;color:var(--color);font-family:var(--ion-font-family,inherit);text-align:center;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;vertical-align:-webkit-baseline-middle;pointer-events:auto;-webkit-font-kerning:none;font-kerning:none}:host(.button-disabled){--opacity:.5;pointer-events:none}:host(.button-disabled) .button-native{cursor:default;pointer-events:none}:host(.button-solid){--background:var(--ion-color-primary,#3880ff);--background-focused:var(--ion-color-primary-shade,#3171e0);--background-hover:rgba(var(--ion-color-primary-rgb,56,128,255),0.92);--color:var(--ion-color-primary-contrast,#fff);--color-activated:var(--ion-color-primary-contrast,#fff);--color-focused:var(--ion-color-primary-contrast,#fff)}:host(.button-solid.ion-color) .button-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.button-solid.ion-color.ion-focused) .button-native{background:var(--ion-color-shade)}:host(.button-outline){--border-color:var(--ion-color-primary,#3880ff);--background:transparent;--color:var(--ion-color-primary,#3880ff);--color-focused:var(--ion-color-primary,#3880ff)}:host(.button-outline.ion-color) .button-native{border-color:var(--ion-color-base);background:transparent;color:var(--ion-color-base)}:host(.button-outline.ion-focused.ion-color) .button-native{background:rgba(var(--ion-color-base-rgb),.1);color:var(--ion-color-base)}:host(.button-clear){--border-width:0;--background:transparent;--color:var(--ion-color-primary,#3880ff)}:host(.button-clear.ion-color) .button-native{background:transparent;color:var(--ion-color-base)}:host(.button-clear.ion-focused.ion-color) .button-native{background:rgba(var(--ion-color-base-rgb),.1);color:var(--ion-color-base)}:host(.button-clear.activated.ion-color) .button-native{background:transparent}:host(.button-block){display:block}:host(.button-block) .button-native{margin-left:0;margin-right:0;display:block;width:100%;clear:both;contain:content}:host(.button-block) .button-native:after{clear:both}:host(.button-full){display:block}:host(.button-full) .button-native{margin-left:0;margin-right:0;display:block;width:100%;contain:content}:host(.button-full:not(.button-round)) .button-native{border-radius:0;border-right-width:0;border-left-width:0}.button-native{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:block;position:relative;width:100%;height:100%;-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);line-height:1;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);contain:layout style;cursor:pointer;opacity:var(--opacity);overflow:var(--overflow);z-index:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.button-native{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.button-native::-moz-focus-inner{border:0}.button-inner{display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}::slotted(ion-icon){font-size:1.4em;pointer-events:none}::slotted(ion-icon[slot=start]){margin-left:-.3em;margin-right:.3em;margin-top:0;margin-bottom:0}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){::slotted(ion-icon[slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:-.3em;margin-inline-start:-.3em;-webkit-margin-end:.3em;margin-inline-end:.3em}}::slotted(ion-icon[slot=end]){margin-left:.3em;margin-right:-.2em;margin-top:0;margin-bottom:0}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){::slotted(ion-icon[slot=end]){margin-left:unset;margin-right:unset;-webkit-margin-start:.3em;margin-inline-start:.3em;-webkit-margin-end:-.2em;margin-inline-end:-.2em}}::slotted(ion-icon[slot=icon-only]){font-size:1.8em}ion-ripple-effect{color:var(--ripple-color)}:host(.ion-focused) .button-native{background:var(--background-focused);color:var(--color-focused)}:host(.activated) .button-native{background:var(--background-activated);color:var(--color-activated)}\@media (any-hover:hover){:host(:hover) .button-native{background:var(--background-hover);color:var(--color-hover)}}:host{--border-radius:4px;--padding-top:0;--padding-bottom:0;--padding-start:1.1em;--padding-end:1.1em;--transition:box-shadow 280ms cubic-bezier(.4,0,.2,1),background-color 15ms linear,color 15ms linear;margin-left:2px;margin-right:2px;margin-top:4px;margin-bottom:4px;height:36px;font-size:14px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){:host{margin-left:unset;margin-right:unset;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px}}:host(.button-solid){--background-activated:var(--background);--box-shadow:0 3px 1px -2px rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12)}:host(.button-solid.activated){--box-shadow:0 5px 5px -3px rgba(0,0,0,0.2),0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12)}:host(.button-outline){--border-width:2px;--border-style:solid;--box-shadow:none;--background-activated:transparent;--background-focused:rgba(var(--ion-color-primary-rgb,56,128,255),0.1);--background-hover:rgba(var(--ion-color-primary-rgb,56,128,255),0.04);--color-activated:var(--ion-color-primary,#3880ff)}:host(.button-outline.activated.ion-color) .button-native{background:transparent}:host(.button-clear){--opacity:1;--background-activated:transparent;--background-focused:rgba(var(--ion-color-primary-rgb,56,128,255),0.1);--background-hover:rgba(var(--ion-color-primary-rgb,56,128,255),0.04);--color-activated:var(--ion-color-primary,#3880ff);--color-focused:var(--ion-color-primary,#3880ff)}:host(.button-round){--border-radius:64px;--padding-top:0;--padding-start:26px;--padding-end:26px;--padding-bottom:0}:host(.button-large){--padding-top:0;--padding-start:1em;--padding-end:1em;--padding-bottom:0;height:2.8em;font-size:20px}:host(.button-small){--padding-top:0;--padding-start:0.9em;--padding-end:0.9em;--padding-bottom:0;height:2.1em;font-size:13px}:host(.button-strong){font-weight:700}::slotted(ion-icon[slot=icon-only]){padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}\@media (any-hover:hover){:host(.button-solid.ion-color:hover) .button-native{background:rgba(var(--ion-color-base-rgb),.92)}:host(.button-clear.ion-color:hover) .button-native,:host(.button-outline.ion-color:hover) .button-native{background:rgba(var(--ion-color-base-rgb),.04)}}"; }
      static get styleMode() { return "md"; }
  }
  
  let CACHED_MAP;
  function getIconMap() {
      if (!CACHED_MAP) {
          const win = window;
          win.Ionicons = win.Ionicons || {};
          CACHED_MAP = win.Ionicons.map = win.Ionicons.map || new Map();
      }
      return CACHED_MAP;
  }
  function getName(name, mode, ios, md) {
      mode = (mode || 'md').toLowerCase();
      mode = mode === 'ios' ? 'ios' : 'md';
      if (ios && mode === 'ios') {
          name = ios.toLowerCase();
      }
      else if (md && mode === 'md') {
          name = md.toLowerCase();
      }
      else if (name) {
          name = name.toLowerCase();
          if (!/^md-|^ios-|^logo-/.test(name)) {
              name = `${mode}-${name}`;
          }
      }
      if (typeof name !== 'string' || name.trim() === '') {
          return null;
      }
      const invalidChars = name.replace(/[a-z]|-|\d/gi, '');
      if (invalidChars !== '') {
          return null;
      }
      return name;
  }
  function getSrc(src) {
      if (typeof src === 'string') {
          src = src.trim();
          if (isSrc(src)) {
              return src;
          }
      }
      return null;
  }
  function isSrc(str) {
      return str.length > 0 && /(\/|\.)/.test(str);
  }
  function 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 (typeof val === 'string' && 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;
  }
  
  class Icon {
      constructor() {
          this.isVisible = false;
          this.lazy = false;
      }
      componentWillLoad() {
          this.waitUntilVisible(this.el, "50px", () => {
              this.isVisible = true;
              this.loadIcon();
          });
      }
      componentDidUnload() {
          if (this.io) {
              this.io.disconnect();
              this.io = undefined;
          }
      }
      waitUntilVisible(el, rootMargin, cb) {
          if (this.lazy && this.win && this.win.IntersectionObserver) {
              const io = this.io = new this.win.IntersectionObserver((data) => {
                  if (data[0].isIntersecting) {
                      io.disconnect();
                      this.io = undefined;
                      cb();
                  }
              }, { rootMargin });
              io.observe(el);
          }
          else {
              cb();
          }
      }
      loadIcon() {
          if (!this.isServer && this.isVisible) {
              const url = this.getUrl();
              if (url) {
                  getSvgContent(this.doc, url, "s-ion-icon")
                      .then(svgContent => this.svgContent = svgContent);
              }
              else {
                  console.error("icon was not resolved");
              }
          }
          if (!this.ariaLabel) {
              const name = getName(this.getName(), this.mode, this.ios, this.md);
              if (name) {
                  this.ariaLabel = name
                      .replace("ios-", "")
                      .replace("md-", "")
                      .replace(/\-/g, " ");
              }
          }
      }
      getName() {
          if (this.name !== undefined) {
              return this.name;
          }
          if (this.icon && !isSrc(this.icon)) {
              return this.icon;
          }
          return undefined;
      }
      getUrl() {
          let url = getSrc(this.src);
          if (url) {
              return url;
          }
          url = getName(this.getName(), this.mode, this.ios, this.md);
          if (url) {
              return this.getNamedUrl(url);
          }
          url = getSrc(this.icon);
          if (url) {
              return url;
          }
          return null;
      }
      getNamedUrl(name) {
          const url = getIconMap().get(name);
          if (url) {
              return url;
          }
          return `${this.resourcesUrl}svg/${name}.svg`;
      }
      hostData() {
          const mode = this.mode || "md";
          const flipRtl = this.flipRtl || (this.ariaLabel && this.ariaLabel.indexOf("arrow") > -1 && this.flipRtl !== false);
          return {
              "role": "img",
              class: Object.assign({ [`${mode}`]: true }, createColorClasses$1(this.color), { [`icon-${this.size}`]: !!this.size, "flip-rtl": flipRtl && this.doc.dir === "rtl" })
          };
      }
      render() {
          if (!this.isServer && this.svgContent) {
              return h("div", { class: "icon-inner", innerHTML: this.svgContent });
          }
          return h("div", { class: "icon-inner" });
      }
      static get is() { return "ion-icon"; }
      static get encapsulation() { return "shadow"; }
      static get properties() {
          return {
              "ariaLabel": {
                  "type": String,
                  "attr": "aria-label",
                  "reflectToAttr": true,
                  "mutable": true
              },
              "color": {
                  "type": String,
                  "attr": "color"
              },
              "doc": {
                  "context": "document"
              },
              "el": {
                  "elementRef": true
              },
              "flipRtl": {
                  "type": Boolean,
                  "attr": "flip-rtl"
              },
              "icon": {
                  "type": String,
                  "attr": "icon",
                  "watchCallbacks": ["loadIcon"]
              },
              "ios": {
                  "type": String,
                  "attr": "ios"
              },
              "isServer": {
                  "context": "isServer"
              },
              "isVisible": {
                  "state": true
              },
              "lazy": {
                  "type": Boolean,
                  "attr": "lazy"
              },
              "md": {
                  "type": String,
                  "attr": "md"
              },
              "mode": {
                  "type": String,
                  "attr": "mode"
              },
              "name": {
                  "type": String,
                  "attr": "name",
                  "watchCallbacks": ["loadIcon"]
              },
              "resourcesUrl": {
                  "context": "resourcesUrl"
              },
              "size": {
                  "type": String,
                  "attr": "size"
              },
              "src": {
                  "type": String,
                  "attr": "src",
                  "watchCallbacks": ["loadIcon"]
              },
              "svgContent": {
                  "state": true
              },
              "win": {
                  "context": "window"
              }
          };
      }
      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 requests = new Map();
  function getSvgContent(doc, url, scopedId) {
      let req = requests.get(url);
      if (!req) {
          req = fetch(url, { cache: "force-cache" }).then(rsp => {
              if (isStatusValid(rsp.status)) {
                  return rsp.text();
              }
              return Promise.resolve(null);
          }).then(svgContent => validateContent(doc, svgContent, scopedId));
          requests.set(url, req);
      }
      return req;
  }
  function isStatusValid(status) {
      return status <= 299;
  }
  function validateContent(document, svgContent, scopeId) {
      if (svgContent) {
          const frag = document.createDocumentFragment();
          const div = document.createElement("div");
          div.innerHTML = svgContent;
          frag.appendChild(div);
          for (let i = div.childNodes.length - 1; i >= 0; i--) {
              if (div.childNodes[i].nodeName.toLowerCase() !== "svg") {
                  div.removeChild(div.childNodes[i]);
              }
          }
          const svgElm = div.firstElementChild;
          if (svgElm && svgElm.nodeName.toLowerCase() === "svg") {
              if (scopeId) {
                  svgElm.setAttribute("class", scopeId);
              }
              if (isValid(svgElm)) {
                  return div.innerHTML;
              }
          }
      }
      return "";
  }
  function createColorClasses$1(color) {
      return (color) ? {
          "ion-color": true,
          [`ion-color-${color}`]: true
      } : null;
  }
  
  export { Button as IonButton, Icon as IonIcon };
  