import { r as registerInstance, h, H as Host, g as getElement } from './index-e3f64949.js';

const balHintCss = "@-webkit-keyframes spinAround{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spinAround{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.sc-bal-hint-h{display:inline-block}.bal-hint-icon.sc-bal-hint{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;background:#003399;width:20px;height:20px;border-radius:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.bal-hint-icon.sc-bal-hint span.sc-bal-hint{color:#ffffff;font-weight:700;font-family:MetaPro, Arial, sans-serif;font-size:15px;margin-top:-1px}.bal-hint-icon.sc-bal-hint:hover{background:#002b82}.bal-hint-content.sc-bal-hint{position:fixed;top:0;bottom:0;left:0;right:0;z-index:100;background:#003399;color:#ffffff;padding:30px;min-width:280px}.bal-hint-content.sc-bal-hint .title.sc-bal-hint{color:#ffffff}.bal-hint-content.sc-bal-hint .buttons.sc-bal-hint{margin-top:30px}@media screen and (min-width: 720px), print{.bal-hint-content.sc-bal-hint{position:absolute;margin-left:40px;top:-20px;bottom:initial;left:initial;right:initial;-webkit-box-shadow:0 0 10px 0 rgba(0, 33, 98, 0.15);box-shadow:0 0 10px 0 rgba(0, 33, 98, 0.15)}}";

const Hint = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.isActive = false;
    /**
     * Text for the close button.
     */
    this.closeLabel = 'Close';
    /**
     * If `true`, the user cannot interact with the input.
     */
    this.disabled = false;
  }
  handleKeyUp(event) {
    if (event.key === 'Escape' || event.key === 'Esc') {
      event.preventDefault();
      this.close();
    }
  }
  clickOnOutside(event) {
    if (!this.element.contains(event.target) && this.isActive) {
      this.toggle();
    }
  }
  /**
   * Toggles the hint box.
   */
  async toggle() {
    this.isActive = !this.isActive;
  }
  /**
   * Opens the hint box.
   */
  async open() {
    this.isActive = true;
  }
  /**
   * Closes the hint box.
   */
  async close() {
    this.isActive = false;
  }
  render() {
    return (h(Host, null, h("div", { role: "button", class: "bal-hint-icon", onClick: () => this.toggle() }, h("span", null, "i")), h("div", { class: "bal-hint-content", style: { display: this.isActive ? 'inline-block' : 'none' } }, h("slot", null), h("div", { class: "buttons is-row-reverse" }, h("bal-button", { type: "is-info", outlined: true, inverted: true, onClick: () => this.close() }, this.closeLabel)))));
  }
  get element() { return getElement(this); }
};
Hint.style = balHintCss;

export { Hint as bal_hint };
