'use strict';

Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

const shared_tailwindElement_index = require('../../index--Y2FvB_K.cjs');
const property = require('../../property-TRLHk6Mn.cjs');
const index = require('../../index-CaJky2qL.cjs');
require('../lukso-icon/index.cjs');
require('../../index-DwjA8HMW.cjs');
require('../../index-DKZtrJ1S.cjs');
const uniqId = require('../../uniq-id-Cszs24DQ.cjs');

const debounceFunction = (func, timeout = 100) => {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      typeof func === "function" && func.apply(void 0, args);
    }, timeout);
  };
};

const style = ":host {\n    display: flex;\n    width: 100%\n}";

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
exports.LuksoDropdown = class LuksoDropdown extends shared_tailwindElement_index.TailwindStyledElement(style) {
  constructor() {
    super();
    this.id = "";
    this.triggerId = "";
    this.isOpen = false;
    this.isOpenOnOutsideClick = false;
    this.openTop = false;
    this.isRight = false;
    this.isFullWidth = false;
    this.size = "medium";
    this.trigger = "click";
    this.maxHeight = void 0;
    this.styles = index.ce({
      slots: {
        wrapper: "absolute z-50",
        dropdown: `bg-neutral-100 border border-neutral-90 shadow-1xl
        flex flex-col gap-1 overflow-y-auto w-[max-content] animate-fade-in animation-duration-200`
      },
      variants: {
        openTop: {
          true: {
            wrapper: "mt-0"
          }
        },
        size: {
          small: {
            dropdown: "rounded-8 p-2 mt-1 min-w-[120px] paragraph-inter-12-regular"
          },
          medium: {
            dropdown: "rounded-12 p-3 mt-2 min-w-[200px] paragraph-inter-14-regular"
          }
        },
        isRight: {
          true: {
            wrapper: "right-0"
          }
        },
        isFullWidth: {
          true: { wrapper: "w-full", dropdown: "w-full" }
        },
        hasMaxHeight: {
          true: {}
        }
      },
      compoundVariants: [
        {
          isFullWidth: false,
          size: "small",
          class: { dropdown: "max-w-[200px]" }
        },
        {
          isFullWidth: false,
          size: "medium",
          class: { dropdown: "max-w-[300px]" }
        },
        {
          openTop: true,
          size: "small",
          class: { wrapper: "bottom-7 mb-1" }
        },
        {
          openTop: true,
          size: ["medium"],
          class: { wrapper: "bottom-12 mb-2" }
        },
        {
          hasMaxHeight: false,
          size: "small",
          class: { dropdown: "max-h-52" }
        },
        {
          hasMaxHeight: false,
          size: "medium",
          class: { dropdown: "max-h-64" }
        }
      ]
    });
    this.handleMouseEnter = () => {
      this.isOpen = true;
    };
    this.handleMouseLeave = (event) => {
      const relatedTarget = event.relatedTarget;
      if (relatedTarget?.id === this.id || relatedTarget?.id === this.triggerId) {
        return;
      }
      this.isOpen = false;
    };
    this.handleClick = debounceFunction((event) => {
      const element = event.target;
      if (element.id === this.triggerId || this.id === element.id) {
        this.isOpen = !this.isOpen;
        return;
      }
      if (!this.isOpenOnOutsideClick) {
        this.isOpen = false;
      }
    });
    if (!this.id) {
      this.id = uniqId.uniqId();
    }
  }
  updated(changedProperties) {
    super.updated(changedProperties);
    if (changedProperties.has("isOpen") && this.trigger === "hover") {
      const dropdownElement = this.shadowRoot?.getElementById(this.id);
      if (this.isOpen && dropdownElement) {
        dropdownElement.addEventListener("mouseenter", this.handleMouseEnter);
        dropdownElement.addEventListener("mouseleave", this.handleMouseLeave);
      } else if (dropdownElement) {
        dropdownElement.removeEventListener("mouseenter", this.handleMouseEnter);
        dropdownElement.removeEventListener("mouseleave", this.handleMouseLeave);
      }
    }
  }
  connectedCallback() {
    super.connectedCallback();
    window.addEventListener("click", this.handleClick.bind(this));
    if (this.trigger === "hover") {
      const triggerElement = document.getElementById(this.triggerId);
      if (triggerElement) {
        triggerElement.addEventListener("mouseenter", this.handleMouseEnter);
        triggerElement.addEventListener("mouseleave", this.handleMouseLeave);
      }
    }
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    window.removeEventListener("click", this.handleClick);
    if (this.trigger === "hover") {
      const triggerElement = document.getElementById(this.triggerId);
      if (triggerElement) {
        triggerElement.removeEventListener("mouseenter", this.handleMouseEnter);
        triggerElement.removeEventListener("mouseleave", this.handleMouseLeave);
      }
    }
  }
  async willUpdate(changedProperties) {
    if (changedProperties.has("isOpen")) {
      await this.updateComplete;
      const changeEvent = new CustomEvent(
        "on-change",
        {
          detail: {
            isOpen: this.isOpen
          },
          bubbles: false,
          composed: true
        }
      );
      this.dispatchEvent(changeEvent);
    }
  }
  render() {
    const { wrapper, dropdown } = this.styles({
      openTop: this.openTop,
      size: this.size,
      isRight: this.isRight,
      isFullWidth: this.isFullWidth,
      hasMaxHeight: this.maxHeight !== void 0
    });
    if (!this.isOpen) {
      return shared_tailwindElement_index.E;
    }
    return shared_tailwindElement_index.x`<div id=${this.id} class=${wrapper()}>
      <div class=${dropdown()}>
        <slot></slot>
      </div>
    </div>`;
  }
};
__decorateClass([
  property.n({ type: String })
], exports.LuksoDropdown.prototype, "id", 2);
__decorateClass([
  property.n({ type: String, attribute: "trigger-id" })
], exports.LuksoDropdown.prototype, "triggerId", 2);
__decorateClass([
  property.n({ type: Boolean, attribute: "is-open", reflect: true })
], exports.LuksoDropdown.prototype, "isOpen", 2);
__decorateClass([
  property.n({ type: Boolean, attribute: "is-open-on-outside-click" })
], exports.LuksoDropdown.prototype, "isOpenOnOutsideClick", 2);
__decorateClass([
  property.n({ type: Boolean, attribute: "open-top" })
], exports.LuksoDropdown.prototype, "openTop", 2);
__decorateClass([
  property.n({ type: Boolean, attribute: "is-right" })
], exports.LuksoDropdown.prototype, "isRight", 2);
__decorateClass([
  property.n({ type: Boolean, attribute: "is-full-width" })
], exports.LuksoDropdown.prototype, "isFullWidth", 2);
__decorateClass([
  property.n({ type: String })
], exports.LuksoDropdown.prototype, "size", 2);
__decorateClass([
  property.n({ type: String })
], exports.LuksoDropdown.prototype, "trigger", 2);
__decorateClass([
  property.n({ type: Number, attribute: "max-height", reflect: true })
], exports.LuksoDropdown.prototype, "maxHeight", 2);
exports.LuksoDropdown = __decorateClass([
  property.t("lukso-dropdown")
], exports.LuksoDropdown);
