import { T as TailwindStyledElement, E, x } from './index-92dc158d.js';
import { n, t } from './property-eaa52bd9.js';
import { c as ce } from './index-d14b6a34.js';
import './components/lukso-icon/index.js';
import './index-ff8d75cd.js';
import './components/lukso-username/index.js';

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

const uniqId = () => {
  const s4 = () => ((1 + Math.random()) * 65536 | 0).toString(16).substring(1);
  return `${s4() + s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
};

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

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;
};
let LuksoDropdown = class extends 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.styles = ce({
      base: `bg-neutral-100 border w-full border-neutral-90 shadow-1xl z-50
      flex absolute flex-col gap-1 overflow-y-auto max-h-64 w-[max-content]`,
      variants: {
        openTop: {
          true: "bottom-[48px] mb-2 mt-0"
        },
        size: {
          small: "rounded-8 p-2 mt-1 min-w-[120px] paragraph-inter-12-regular",
          medium: "rounded-12 p-3 mt-2 min-w-[200px] paragraph-inter-14-regular"
        },
        isRight: {
          true: "right-0"
        },
        isFullWidth: {
          true: "w-full"
        }
      },
      compoundVariants: [
        {
          isFullWidth: false,
          size: "small",
          class: "max-w-[200px]"
        },
        {
          isFullWidth: false,
          size: "medium",
          class: "max-w-[300px]"
        }
      ]
    });
    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();
    }
  }
  connectedCallback() {
    super.connectedCallback();
    window.addEventListener("click", this.handleClick.bind(this));
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    window.removeEventListener("click", this.handleClick);
  }
  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 styles = this.styles({
      openTop: this.openTop,
      size: this.size,
      isRight: this.isRight,
      isFullWidth: this.isFullWidth
    });
    if (!this.isOpen) {
      return E;
    }
    return x`<div class="${styles} animate-fade-in animation-duration-200">
      <slot></slot>
    </div>`;
  }
};
__decorateClass([
  n({ type: String })
], LuksoDropdown.prototype, "id", 2);
__decorateClass([
  n({ type: String, attribute: "trigger-id" })
], LuksoDropdown.prototype, "triggerId", 2);
__decorateClass([
  n({ type: Boolean, attribute: "is-open", reflect: true })
], LuksoDropdown.prototype, "isOpen", 2);
__decorateClass([
  n({ type: Boolean, attribute: "is-open-on-outside-click" })
], LuksoDropdown.prototype, "isOpenOnOutsideClick", 2);
__decorateClass([
  n({ type: Boolean, attribute: "open-top" })
], LuksoDropdown.prototype, "openTop", 2);
__decorateClass([
  n({ type: Boolean, attribute: "is-right" })
], LuksoDropdown.prototype, "isRight", 2);
__decorateClass([
  n({ type: Boolean, attribute: "is-full-width" })
], LuksoDropdown.prototype, "isFullWidth", 2);
__decorateClass([
  n({ type: String })
], LuksoDropdown.prototype, "size", 2);
LuksoDropdown = __decorateClass([
  t("lukso-dropdown")
], LuksoDropdown);

export { LuksoDropdown as L, uniqId as u };
