import { r as registerInstance, h } from './index-6afcee86.js';
import { p as popoverController } from './overlays-a5bb6b85.js';
import './ionic-global-441e7135.js';
import './hardware-back-button-508e48cf.js';
import './helpers-c13e5d7e.js';

const floatingButtonCss = "floodteam-floating-button .ion-fab-wrapper{position:absolute;height:60px;width:80px}floodteam-floating-button ion-badge{margin:0 auto;padding:3px;display:block;font-size:12px;position:absolute;top:3px;right:3px;z-index:9999}floodteam-floating-button ion-fab>ion-fab-button{font-size:40px;position:relative}floodteam-floating-button ion-fab>ion-fab-button ion-icon{margin:0 auto;display:block;height:30px;width:30px;font-size:30px}";

let FloatingButton = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /**
     * The list of buttons to show when the material button is clicked
     */
    this.buttonList = [];
    /**
     * The icon to use on the material button when it's closed
     */
    this.openIcon = "ellipsis-vertical";
    /**
     * The horizontal position of the button
     */
    this.horizontal = "end";
    /**
     * The vertical position of the button
     */
    this.vertical = "center";
    /**
     * The side the list should display
     */
    this.listSide = "bottom";
    /**
     * The color of the badge to display
     */
    this.badgeColor = "success";
  }
  onClosePopover() {
    this.popoverEl.dismiss();
    this.popoverEl = null;
  }
  componentDidLoad() {
    {
      const fabIconEl = this.fabEl
        .querySelector("ion-fab-button")
        .shadowRoot.querySelector("ion-icon");
      fabIconEl.style.setProperty("font-size", "40px");
    }
  }
  render() {
    return (h("div", { class: "ion-fab-wrapper" }, h("ion-fab", { horizontal: this.horizontal, vertical: this.vertical, ref: (el) => (this.fabEl = el), onClick: async (event) => {
        event.preventDefault();
        this.popoverEl = await popoverController.create({
          event,
          component: "floodteam-popover-controls",
          componentProps: {
            buttonList: this.buttonList
          }
        });
        await this.popoverEl.present();
      } }, h("ion-fab-button", { color: this.color }, h("ion-icon", { name: this.openIcon }))), this.badge && (h("ion-badge", { color: this.badgeColor, innerHTML: this.badge }))));
  }
};
FloatingButton.style = floatingButtonCss;

export { FloatingButton as floodteam_floating_button };
