import { Component, h, Host, Listen, Method, Prop, Element, Event, State } from '@stencil/core';
export class Dropdown {
  constructor() {
    this.dropdownId = `bal-dd-${DropdownIds++}`;
    this.isDropDownContentUp = false;
    /**
     * Limit the height of the dropdown content. Pass the amount of pixel.
     */
    this.scrollable = 0;
    /**
     * If `true` the field spans over the whole width.
     */
    this.expanded = false;
    /**
     * If `true` the dropdown content is open.
     */
    this.isActive = false;
  }
  handleDropdownPrepare(dropdownId) {
    if (this.dropdownId !== dropdownId) {
      this.close();
    }
  }
  handleKeyUp(event) {
    if (this.isActive && (event.key === 'Escape' || event.key === 'Esc')) {
      event.preventDefault();
      this.close();
    }
  }
  /**
   * Open the dropdown menu.
   */
  async open() {
    this.balDropdownPrepare.emit(this.dropdownId);
    this.isActive = true;
    this.balCollapse.emit(this.isActive);
  }
  /**
   * Closes the dropdown menu.
   */
  async close() {
    this.isActive = false;
    this.balCollapse.emit(this.isActive);
  }
  /**
   * Open or closes the dropdown.
   */
  async toggle() {
    this.isActive = !this.isActive;
    this.balCollapse.emit(this.isActive);
  }
  /**
   * Returns the `HTMLDivElement` of the menu element
   */
  async getMenuElement() {
    return this.menuElement;
  }
  /**
   * Returns the `HTMLDivElement` of the content element
   */
  async getContentElement() {
    return this.contentElement;
  }
  async tabOutside(event) {
    if (event.key === 'Tab' && !this.element.contains(document.activeElement) && this.isActive) {
      await this.toggle();
    }
  }
  async clickOnOutside(event) {
    if (!this.element.contains(event.target) && this.isActive) {
      await this.toggle();
      this.calcIsDropDownContentUp();
    }
  }
  async resizeHandler() {
    this.calcIsDropDownContentUp();
  }
  async scrollHandler() {
    this.calcIsDropDownContentUp();
  }
  get contentStyle() {
    if (this.scrollable === 0) {
      return {};
    }
    else {
      const maxHeight = `${this.scrollable}px`;
      return {
        'max-height': maxHeight,
        'overflow': 'auto',
      };
    }
  }
  calcIsDropDownContentUp() {
    var _a;
    const box = this.element.getBoundingClientRect();
    const clientHeight = ((_a = this.contentElement) === null || _a === void 0 ? void 0 : _a.clientHeight) || 250;
    this.isDropDownContentUp = window.innerHeight < box.bottom + clientHeight + 50;
  }
  componentWillRender() {
    this.calcIsDropDownContentUp();
  }
  render() {
    return (h(Host, { "data-id": this.dropdownId },
      h("div", { class: {
          'dropdown': true,
          'is-active': this.isActive,
          'is-expanded': this.expanded,
          'is-up': this.isDropDownContentUp,
        } },
        h("div", { class: "dropdown-trigger" },
          h("slot", { name: "trigger" })),
        h("div", { class: "dropdown-menu", id: "dropdown-menu", role: "menu", ref: el => (this.menuElement = el) },
          h("div", { class: "dropdown-content", style: this.contentStyle, ref: el => (this.contentElement = el) },
            h("slot", null))))));
  }
  static get is() { return "bal-dropdown"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["bal-dropdown.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["bal-dropdown.css"]
  }; }
  static get properties() { return {
    "scrollable": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Limit the height of the dropdown content. Pass the amount of pixel."
      },
      "attribute": "scrollable",
      "reflect": false,
      "defaultValue": "0"
    },
    "expanded": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true` the field spans over the whole width."
      },
      "attribute": "expanded",
      "reflect": false,
      "defaultValue": "false"
    },
    "isActive": {
      "type": "boolean",
      "mutable": true,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true` the dropdown content is open."
      },
      "attribute": "is-active",
      "reflect": true,
      "defaultValue": "false"
    }
  }; }
  static get states() { return {
    "isDropDownContentUp": {}
  }; }
  static get events() { return [{
      "method": "balCollapse",
      "name": "balCollapse",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Listen when the dropdown opens or closes. Returns the current `isActive` value."
      },
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      }
    }, {
      "method": "balDropdownPrepare",
      "name": "balDropdownPrepare",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Internal"
      },
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      }
    }]; }
  static get methods() { return {
    "open": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "Open the dropdown menu.",
        "tags": []
      }
    },
    "close": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "Closes the dropdown menu.",
        "tags": []
      }
    },
    "toggle": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "Open or closes the dropdown.",
        "tags": []
      }
    },
    "getMenuElement": {
      "complexType": {
        "signature": "() => Promise<HTMLDivElement>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          },
          "HTMLDivElement": {
            "location": "global"
          }
        },
        "return": "Promise<HTMLDivElement>"
      },
      "docs": {
        "text": "Returns the `HTMLDivElement` of the menu element",
        "tags": []
      }
    },
    "getContentElement": {
      "complexType": {
        "signature": "() => Promise<HTMLDivElement>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          },
          "HTMLDivElement": {
            "location": "global"
          }
        },
        "return": "Promise<HTMLDivElement>"
      },
      "docs": {
        "text": "Returns the `HTMLDivElement` of the content element",
        "tags": []
      }
    }
  }; }
  static get elementRef() { return "element"; }
  static get listeners() { return [{
      "name": "balDropdownPrepare",
      "method": "handleDropdownPrepare",
      "target": "body",
      "capture": false,
      "passive": false
    }, {
      "name": "keydown",
      "method": "handleKeyUp",
      "target": "window",
      "capture": false,
      "passive": false
    }, {
      "name": "keyup",
      "method": "tabOutside",
      "target": "document",
      "capture": false,
      "passive": false
    }, {
      "name": "click",
      "method": "clickOnOutside",
      "target": "document",
      "capture": false,
      "passive": false
    }, {
      "name": "resize",
      "method": "resizeHandler",
      "target": "window",
      "capture": false,
      "passive": true
    }, {
      "name": "scroll",
      "method": "scrollHandler",
      "target": "window",
      "capture": false,
      "passive": true
    }]; }
}
let DropdownIds = 0;
