import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { d as defineCustomElement$3 } from './rux-icon2.js';
import { d as defineCustomElement$2 } from './rux-toast2.js';

const ruxToastStackCss = ":host{position:fixed;z-index:100;max-width:100%;max-height:100%;margin:var(--spacing-3, 0.75rem);margin-block-start:var(--spacing-0, 0rem);overflow:hidden}:host([position=top-right]){top:0;right:0}:host([position=top-left]){top:0;left:0}:host([position=bottom-right]){bottom:0;right:0}:host([position=bottom-left]){bottom:0;left:0}";

const RuxToastStack$1 = /*@__PURE__*/ proxyCustomElement(class RuxToastStack extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.position = 'top-right';
  }
  /**
   * adds an individual toast to the stack with the set props passed in as an object
   */
  async addToast(props) {
    var _a;
    const toast = document.createElement('rux-toast');
    toast.style.transition = 'opacity 800ms ease-in 1s';
    for (const key in props) {
      if (props.hasOwnProperty(key)) {
        switch (key) {
          case 'message':
            toast.message = props[key];
            break;
          case 'hideClose':
            toast.hideClose = props[key];
            break;
          case 'closeAfter':
            toast.closeAfter = props[key];
            break;
        }
      }
    }
    (_a = this.el) === null || _a === void 0 ? void 0 : _a.insertBefore(toast, this.el.firstChild); // add as first child
  }
  get _toastsArray() {
    const toasts = Array.from(this.el.querySelectorAll('rux-toast'));
    return toasts;
  }
  render() {
    return (h(Host, null, h("div", { class: "rux-toast-stack" }, h("slot", null))));
  }
  get el() { return this; }
  static get style() { return ruxToastStackCss; }
}, [1, "rux-toast-stack", {
    "position": [513],
    "addToast": [64]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["rux-toast-stack", "rux-icon", "rux-toast"];
  components.forEach(tagName => { switch (tagName) {
    case "rux-toast-stack":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, RuxToastStack$1);
      }
      break;
    case "rux-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "rux-toast":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}

const RuxToastStack = RuxToastStack$1;
const defineCustomElement = defineCustomElement$1;

export { RuxToastStack, defineCustomElement };
