import { popoverController } from "@ionic/core";
import { Component, Prop, h, Build, Listen } from "@stencil/core";
export class FloatingButton {
  constructor() {
    /**
     * 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() {
    if (Build.isBrowser) {
      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 }))));
  }
  static get is() { return "floodteam-floating-button"; }
  static get originalStyleUrls() { return {
    "$": ["floating-button.css"]
  }; }
  static get styleUrls() { return {
    "$": ["floating-button.css"]
  }; }
  static get properties() { return {
    "buttonList": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "{\n    /**\n     * The label to show next to the button\n     */\n    label: string;\n    /**\n     * The icon to use in the button\n     */\n    icon: string;\n    /**\n     * The color from the theme to make the button\n     */\n    color?: Color;\n    /**\n     * The link to use for the button\n     */\n    href?: string;\n    /**\n     * The functionality to run when the button is clicked\n     */\n    onClick?: (event: any) => any;\n  }[]",
        "resolved": "{ label: string; icon: string; color?: string; href?: string; onClick?: (event: any) => any; }[]",
        "references": {
          "Color": {
            "location": "import",
            "path": "@ionic/core"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The list of buttons to show when the material button is clicked"
      },
      "defaultValue": "[]"
    },
    "url": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The url to link the material button to"
      },
      "attribute": "url",
      "reflect": false
    },
    "openIcon": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The icon to use on the material button when it's closed"
      },
      "attribute": "open-icon",
      "reflect": false,
      "defaultValue": "\"ellipsis-vertical\""
    },
    "horizontal": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"end\" | \"start\" | \"center\"",
        "resolved": "\"center\" | \"end\" | \"start\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The horizontal position of the button"
      },
      "attribute": "horizontal",
      "reflect": false,
      "defaultValue": "\"end\""
    },
    "vertical": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"center\" | \"top\" | \"bottom\"",
        "resolved": "\"bottom\" | \"center\" | \"top\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The vertical position of the button"
      },
      "attribute": "vertical",
      "reflect": false,
      "defaultValue": "\"center\""
    },
    "color": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Color",
        "resolved": "string",
        "references": {
          "Color": {
            "location": "import",
            "path": "@ionic/core"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The color of the button"
      },
      "attribute": "color",
      "reflect": false
    },
    "listSide": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"end\" | \"start\" | \"top\" | \"bottom\"",
        "resolved": "\"bottom\" | \"end\" | \"start\" | \"top\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The side the list should display"
      },
      "attribute": "list-side",
      "reflect": false,
      "defaultValue": "\"bottom\""
    },
    "badgeColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Color",
        "resolved": "string",
        "references": {
          "Color": {
            "location": "import",
            "path": "@ionic/core"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "The color of the badge to display"
      },
      "attribute": "badge-color",
      "reflect": false,
      "defaultValue": "\"success\""
    },
    "badge": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "The content of the badge"
      },
      "attribute": "badge",
      "reflect": false
    }
  }; }
  static get listeners() { return [{
      "name": "floodteamClosePopover",
      "method": "onClosePopover",
      "target": "body",
      "capture": false,
      "passive": false
    }]; }
}
