import { h, Host, } from "@stencil/core";
import { getMap } from "../utils";
export class Drawer {
  constructor() {
    this.closeDrawerClick = () => (this.open = false);
    this.content = undefined;
    this.drawerTitle = undefined;
    this.mapId = undefined;
    this.open = false;
  }
  openChanged(isOpen) {
    this.glDrawerToggle.emit({
      open: isOpen,
    });
  }
  componentDidUpdate() {
    let map = getMap(this.mapId);
    map.resizeMap();
  }
  /**
   * Opens the drawer if it is closed and closes the drawer if it is open
   */
  async toggle() {
    this.open = !this.open;
  }
  render() {
    return (h(Host, { class: {
        "gl-drawer-closed": !this.open,
        "gl-drawer-open": this.open,
      } }, h("ion-header", null, h("ion-toolbar", null, h("ion-buttons", { slot: "start" }, h("slot", { name: "toolbar-start-buttons" })), h("ion-title", null, this.drawerTitle), h("ion-buttons", { slot: "end" }, h("slot", { name: "toolbar-end-buttons" }), h("ion-button", { title: "Close", onClick: this.closeDrawerClick }, h("ion-icon", { slot: "icon-only", name: "close" }))))), h("ion-content", null, h("slot", null))));
  }
  static get is() { return "gl-drawer"; }
  static get originalStyleUrls() {
    return {
      "$": ["drawer.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["drawer.css"]
    };
  }
  static get properties() {
    return {
      "drawerTitle": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Title of the drawer displayed in the toolbar."
        },
        "attribute": "drawer-title",
        "reflect": false
      },
      "mapId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Map ID of the map that should be resized when the drawer is opened or closed."
        },
        "attribute": "map-id",
        "reflect": false
      },
      "open": {
        "type": "boolean",
        "mutable": true,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The drawer is currently open."
        },
        "attribute": "open",
        "reflect": false,
        "defaultValue": "false"
      }
    };
  }
  static get states() {
    return {
      "content": {}
    };
  }
  static get events() {
    return [{
        "method": "glDrawerToggle",
        "name": "glDrawerToggle",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emitted when the drawer is opened or closed."
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }];
  }
  static get methods() {
    return {
      "toggle": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global",
              "id": "global::Promise"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "Opens the drawer if it is closed and closes the drawer if it is open",
          "tags": []
        }
      }
    };
  }
  static get watchers() {
    return [{
        "propName": "open",
        "methodName": "openChanged"
      }];
  }
}
//# sourceMappingURL=drawer.js.map
