import { h } from "@stencil/core";
import { _t } from "../i18n/i18n";
export class App {
  constructor() {
    this.label = undefined;
    this.menu = true;
    this.menuLabel = _t("webmapgl.app.menulabel");
    this.splitPane = true;
    this.menuType = "push";
  }
  componentDidLoad() {
    this.el.querySelector("gl-map").resizeMap();
  }
  getMenu() {
    if (this.menu === true) {
      return (h("ion-menu", { "content-id": "main", type: this.menuType }, h("ion-header", null, h("ion-toolbar", null, h("ion-title", null, this.menuLabel))), h("ion-content", null, h("div", { class: "gl-menu-content" }, h("slot", { name: "menu" })))));
    }
    else if (this.menu === "custom") {
      return h("slot", { name: "menu" });
    }
  }
  getMenuButton() {
    if (this.menu === true)
      return (h("ion-menu-toggle", null, h("ion-button", null, h("ion-icon", { slot: "icon-only", name: "menu" }))));
  }
  getMain() {
    return (h("div", { class: "pane-main", id: "main" }, h("ion-header", null, h("ion-toolbar", null, h("ion-buttons", { slot: "start" }, this.getMenuButton(), h("slot", { name: "start-buttons" })), h("ion-buttons", { slot: "end" }, h("slot", { name: "end-buttons" })), h("ion-title", null, this.label))), h("ion-content", { scrollX: false, scrollY: false, class: "map-content" }, h("div", { class: "fixed-content", slot: "fixed" }, h("slot", null))), h("slot", { name: "after-content" }), h("ion-footer", null, h("slot", { name: "footer" }))));
  }
  render() {
    let content = [this.getMenu(), this.getMain()];
    if (this.splitPane)
      content = [h("ion-split-pane", { "content-id": "main" }, content)];
    return h("ion-app", null, content);
  }
  static get is() { return "gl-app"; }
  static get originalStyleUrls() {
    return {
      "$": ["app.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["app.css"]
    };
  }
  static get properties() {
    return {
      "label": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Application name in the main title bar."
        },
        "attribute": "label",
        "reflect": false
      },
      "menu": {
        "type": "any",
        "mutable": false,
        "complexType": {
          "original": "\"custom\" | boolean",
          "resolved": "\"custom\" | boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Menu type. A value of `false` disables the menu, while a `custom` menu\ntype creates a menu slot."
        },
        "attribute": "menu",
        "reflect": false,
        "defaultValue": "true"
      },
      "menuLabel": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Heading text for the menu."
        },
        "attribute": "menu-label",
        "reflect": false,
        "defaultValue": "_t(\"webmapgl.app.menulabel\")"
      },
      "splitPane": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Should the application use `ion-split-pane` to display the menu?"
        },
        "attribute": "split-pane",
        "reflect": false,
        "defaultValue": "true"
      },
      "menuType": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "\"push\" | \"overlay\" | \"reveal\"",
          "resolved": "\"overlay\" | \"push\" | \"reveal\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "What type of side menu to use, valid options are `push`, `overlay`, and `reveal`."
        },
        "attribute": "menu-type",
        "reflect": false,
        "defaultValue": "\"push\""
      }
    };
  }
  static get elementRef() { return "el"; }
}
//# sourceMappingURL=app.js.map
