var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
  if (kind === "a" && !f)
    throw new TypeError("Private accessor was defined without a getter");
  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
    throw new TypeError("Cannot read private member from an object whose class did not declare it");
  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
  if (kind === "m")
    throw new TypeError("Private method is not writable");
  if (kind === "a" && !f)
    throw new TypeError("Private accessor was defined without a setter");
  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
    throw new TypeError("Cannot write private member to an object whose class did not declare it");
  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
var _KlevuPopup_instances, _KlevuPopup_stopUpdatePos, _KlevuPopup_originElement, _KlevuPopup_contentElement, _KlevuPopup_closeEvent, _KlevuPopup_internalOpen, _KlevuPopup_updatePopupPosition;
import { autoUpdate, computePosition, offset, shift, size } from "@floating-ui/dom";
import { h, Host } from "@stencil/core";
/**
 * Popup component where clicking origin component popups the the content
 *
 * @slot origin - Popoup origin that opens content of popup
 * @slot content - Content of the popup
 */
export class KlevuPopup {
  constructor() {
    _KlevuPopup_instances.add(this);
    _KlevuPopup_stopUpdatePos.set(this, void 0);
    _KlevuPopup_originElement.set(this, void 0);
    _KlevuPopup_contentElement.set(this, void 0);
    this.startOpen = undefined;
    this.openAtFocus = true;
    this.closeAtOutsideClick = true;
    this.fullwidthContent = false;
    this.anchor = "left-end";
    this.elevation = 1;
    this.open = false;
  }
  /**
   * Opens the popup
   */
  async openModal() {
    __classPrivateFieldGet(this, _KlevuPopup_instances, "m", _KlevuPopup_internalOpen).call(this);
  }
  /**
   * Closes the popup
   */
  async closeModal() {
    this.open = false;
  }
  childItemClicked(event) {
    if (event.composedPath().some((e) => e.localName === "slot" && e.name === "origin")) {
      __classPrivateFieldGet(this, _KlevuPopup_instances, "m", _KlevuPopup_internalOpen).call(this);
    }
  }
  childItemFocused(event) {
    if (!this.openAtFocus) {
      return;
    }
    if (event.composedPath().some((e) => e.localName === "slot" && e.name === "origin")) {
      __classPrivateFieldGet(this, _KlevuPopup_instances, "m", _KlevuPopup_internalOpen).call(this);
    }
  }
  connectedCallback() {
    if (this.closeAtOutsideClick) {
      document.addEventListener("click", __classPrivateFieldGet(this, _KlevuPopup_instances, "m", _KlevuPopup_closeEvent).bind(this));
    }
  }
  componentDidLoad() {
    var _a, _b, _c, _d;
    __classPrivateFieldSet(this, _KlevuPopup_originElement, (_b = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("#origin"), "f");
    __classPrivateFieldSet(this, _KlevuPopup_contentElement, (_d = (_c = this.el) === null || _c === void 0 ? void 0 : _c.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector("#content"), "f");
    if (this.startOpen) {
      this.openModal();
    }
    if (__classPrivateFieldGet(this, _KlevuPopup_originElement, "f") && __classPrivateFieldGet(this, _KlevuPopup_contentElement, "f")) {
      __classPrivateFieldSet(this, _KlevuPopup_stopUpdatePos, autoUpdate(__classPrivateFieldGet(this, _KlevuPopup_originElement, "f"), __classPrivateFieldGet(this, _KlevuPopup_contentElement, "f"), __classPrivateFieldGet(this, _KlevuPopup_instances, "m", _KlevuPopup_updatePopupPosition).bind(this)), "f");
    }
  }
  detachedCallback() {
    var _a;
    document.removeEventListener("click", __classPrivateFieldGet(this, _KlevuPopup_instances, "m", _KlevuPopup_closeEvent));
    (_a = __classPrivateFieldGet(this, _KlevuPopup_stopUpdatePos, "f")) === null || _a === void 0 ? void 0 : _a.call(this);
  }
  render() {
    const popupClasses = {
      popup: true,
      show: this.open,
    };
    popupClasses[`elevation-${this.elevation}`] = true;
    return (h(Host, null, h("div", { id: "origin", class: "originContainer" }, h("slot", { name: "origin" })), h("div", { id: "content", class: popupClasses }, h("slot", { name: "content" }))));
  }
  static get is() { return "klevu-popup"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["klevu-popup.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["klevu-popup.css"]
    };
  }
  static get properties() {
    return {
      "startOpen": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Initially show the popup"
        },
        "attribute": "start-open",
        "reflect": false
      },
      "openAtFocus": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Open content when origin component is focused"
        },
        "attribute": "open-at-focus",
        "reflect": false,
        "defaultValue": "true"
      },
      "closeAtOutsideClick": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Close popup when clicking outside content area"
        },
        "attribute": "close-at-outside-click",
        "reflect": false,
        "defaultValue": "true"
      },
      "fullwidthContent": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "At minimum popup content should be the widht of the origin"
        },
        "attribute": "fullwidth-content",
        "reflect": false,
        "defaultValue": "false"
      },
      "anchor": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "Placement",
          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
          "references": {
            "Placement": {
              "location": "import",
              "path": "@floating-ui/dom"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Anchor popup to left or right of page"
        },
        "attribute": "anchor",
        "reflect": false,
        "defaultValue": "\"left-end\""
      },
      "elevation": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Elevation of the popup. 0-3."
        },
        "attribute": "elevation",
        "reflect": false,
        "defaultValue": "1"
      }
    };
  }
  static get states() {
    return {
      "open": {}
    };
  }
  static get events() {
    return [{
        "method": "klevuPopupOpen",
        "name": "klevuPopupOpen",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "When popup is opened this event is emitted"
        },
        "complexType": {
          "original": "void",
          "resolved": "void",
          "references": {}
        }
      }];
  }
  static get methods() {
    return {
      "openModal": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "Opens the popup",
          "tags": []
        }
      },
      "closeModal": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "Closes the popup",
          "tags": []
        }
      }
    };
  }
  static get elementRef() { return "el"; }
  static get listeners() {
    return [{
        "name": "click",
        "method": "childItemClicked",
        "target": undefined,
        "capture": true,
        "passive": false
      }, {
        "name": "focus",
        "method": "childItemFocused",
        "target": undefined,
        "capture": true,
        "passive": false
      }];
  }
}
_KlevuPopup_stopUpdatePos = new WeakMap(), _KlevuPopup_originElement = new WeakMap(), _KlevuPopup_contentElement = new WeakMap(), _KlevuPopup_instances = new WeakSet(), _KlevuPopup_closeEvent = function _KlevuPopup_closeEvent(event) {
  if (!event.composedPath().some((el) => el === this.el)) {
    this.open = false;
  }
}, _KlevuPopup_internalOpen = async function _KlevuPopup_internalOpen() {
  if (this.open) {
    return;
  }
  this.open = true;
  __classPrivateFieldGet(this, _KlevuPopup_instances, "m", _KlevuPopup_updatePopupPosition).call(this);
  this.klevuPopupOpen.emit();
}, _KlevuPopup_updatePopupPosition = async function _KlevuPopup_updatePopupPosition() {
  if (!__classPrivateFieldGet(this, _KlevuPopup_originElement, "f") || !__classPrivateFieldGet(this, _KlevuPopup_contentElement, "f") || !this.open) {
    return;
  }
  const { x, y } = await computePosition(__classPrivateFieldGet(this, _KlevuPopup_originElement, "f"), __classPrivateFieldGet(this, _KlevuPopup_contentElement, "f"), {
    placement: this.anchor,
    middleware: [
      offset(16),
      shift(),
      size({
        apply({ availableWidth, availableHeight, elements }) {
          Object.assign(elements.floating.style, {
            maxWidth: `${availableWidth}px`,
            maxHeight: `${availableHeight}px`,
          });
        },
      }),
    ],
  });
  Object.assign(__classPrivateFieldGet(this, _KlevuPopup_contentElement, "f").style, {
    left: `${x}px`,
    top: `${y}px`,
  });
};
//# sourceMappingURL=klevu-popup.js.map
