import { a as TailwindElement, E, x } from '../../index-CAvOol0G.js';
import { n, s as safeCustomElement } from '../../safe-custom-element-CZzvtxkH.js';
import { r } from '../../state-C4McChL8.js';
import { e } from '../../query-CHb9Ft_d.js';
import { c as ce } from '../../index-B9iart53.js';
import '../../tailwind-config.js';
import { c as cn } from '../../axe-BK9JSROP.js';
import '../lukso-icon/index.js';
import '../lukso-form-label/index.js';
import '../lukso-form-description/index.js';
import '../lukso-form-error/index.js';

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 LuksoCollapse = class extends TailwindElement {
  constructor() {
    super(...arguments);
    this.label = "";
    this.description = "";
    this.error = "";
    this.triggerLabel = "";
    this.toggleLabel = {
      open: "",
      close: ""
    };
    this.isOpen = false;
    this.customClass = "";
    this.isDisabled = false;
    this.icon = "";
    this.size = "large";
    this.maxHeight = "0px";
    this.observedHeight = 0;
    this.onTransitionEnd = (e) => {
      if (e.propertyName !== "max-height") return;
      this.dispatchEvent(
        new CustomEvent(this.isOpen ? "after-enter" : "after-leave")
      );
    };
    this.collapseStyles = ce({
      slots: {
        base: "transition transition-all duration-150 border bg-neutral-100",
        header: "flex items-center justify-between cursor-pointer overflow-hidden",
        triggerLabel: "",
        toggleLabel: "",
        icon: "transition cursor-pointer",
        content: "transition-all duration-250 ease-in-out"
      },
      variants: {
        isOpen: {
          true: {
            icon: "rotate-180",
            content: "opacity-100"
          },
          false: {
            content: "opacity-0"
          }
        },
        isDisabled: {
          true: {
            base: "opacity-60",
            header: "cursor-not-allowed",
            icon: "opacity-60 cursor-not-allowed"
          }
        },
        size: {
          small: {
            base: "rounded-8",
            header: "h-7 pl-2",
            triggerLabel: "paragraph-inter-12-semi-bold",
            toggleLabel: "paragraph-inter-12-semi-bold",
            icon: "mr-1"
          },
          medium: {
            base: "rounded-10",
            header: "h-10 pl-3",
            triggerLabel: "paragraph-inter-14-semi-bold",
            toggleLabel: "paragraph-inter-14-semi-bold",
            icon: "mr-2"
          },
          large: {
            base: "rounded-12",
            header: "h-12 pl-4",
            triggerLabel: "paragraph-inter-14-semi-bold",
            toggleLabel: "paragraph-inter-14-semi-bold",
            icon: "mr-3"
          },
          "x-large": {
            base: "rounded-14",
            header: "h-17 pl-5",
            triggerLabel: "paragraph-inter-16-semi-bold",
            toggleLabel: "paragraph-inter-16-semi-bold",
            icon: "mr-4"
          }
        },
        hasError: {
          true: {
            base: "border-red-85 hover:border-red-65",
            triggerLabel: "text-red-65",
            toggleLabel: "text-red-65"
          },
          false: {
            base: "border-neutral-90",
            triggerLabel: "text-neutral-45",
            toggleLabel: "text-neutral-45"
          }
        }
      },
      compoundVariants: [
        {
          isDisabled: false,
          hasError: false,
          class: {
            base: "hover:border-neutral-35"
          }
        }
      ]
    });
  }
  firstUpdated() {
    if ("ResizeObserver" in window) {
      this.resizeObserver = new ResizeObserver(() => this.syncHeight());
      this.resizeObserver.observe(this.contentElement);
    }
    this.syncHeight(true);
  }
  disconnectedCallback() {
    this.resizeObserver?.disconnect();
    super.disconnectedCallback();
  }
  updated(changed) {
    if (changed.has("isOpen")) {
      this.syncHeight();
    }
  }
  syncHeight(immediate = false) {
    const content = this.contentElement;
    if (!content) return;
    const height = content.scrollHeight;
    this.observedHeight = height;
    if (this.isOpen) {
      if (immediate) {
        this.maxHeight = `${height}px`;
      } else {
        if (this.maxHeight !== `${height}px`) this.maxHeight = `${height}px`;
      }
    } else {
      this.maxHeight = `${height}px`;
      requestAnimationFrame(() => {
        this.maxHeight = "0px";
      });
    }
  }
  toggle() {
    this.isOpen = !this.isOpen;
    this.dispatchEvent(
      new CustomEvent("toggle", { detail: { open: this.isOpen } })
    );
  }
  render() {
    const { base, header, triggerLabel, toggleLabel, icon, content } = this.collapseStyles({
      isOpen: this.isOpen,
      isDisabled: this.isDisabled,
      size: this.size,
      hasError: !!this.error
    });
    return x`
      <div class="w-[inherit]">
        <lukso-form-label label=${this.label}></lukso-form-label>
        <lukso-form-description
          description=${this.description}
        ></lukso-form-description>
        <div class=${cn(base(), this.customClass)}>
          <!-- Header -->
          <div
            class=${header()}
            @click=${() => !this.isDisabled && this.toggle()}
          >
            <span class=${triggerLabel()}>${this.triggerLabel}</span>
            <div class="flex items-center">
              ${this.toggleLabel ? x`<span class=${toggleLabel()}>
                    ${this.isOpen ? this.toggleLabel?.close : this.toggleLabel?.open}
                  </span>` : E}
              ${this.icon ? x`<lukso-icon
                    name=${this.icon}
                    class=${icon()}
                  ></lukso-icon>` : E}
            </div>
          </div>

          <!-- Content -->
          <div
            class=${content()}
            style="max-height:${this.maxHeight};"
            @transitionend=${this.onTransitionEnd}
          >
            <div class="collapse-content">
              <slot @slotchange=${() => this.syncHeight()}></slot>
            </div>
          </div>
        </div>
        <lukso-form-error error=${this.error}></lukso-form-error>
      </div>
    `;
  }
};
__decorateClass([
  n({ type: String })
], LuksoCollapse.prototype, "label", 2);
__decorateClass([
  n({ type: String })
], LuksoCollapse.prototype, "description", 2);
__decorateClass([
  n({ type: String })
], LuksoCollapse.prototype, "error", 2);
__decorateClass([
  n({ type: String, attribute: "trigger-label" })
], LuksoCollapse.prototype, "triggerLabel", 2);
__decorateClass([
  n({ type: Object, attribute: "toggle-label" })
], LuksoCollapse.prototype, "toggleLabel", 2);
__decorateClass([
  n({ type: Boolean, attribute: "is-open" })
], LuksoCollapse.prototype, "isOpen", 2);
__decorateClass([
  n({ type: String, attribute: "custom-class" })
], LuksoCollapse.prototype, "customClass", 2);
__decorateClass([
  n({ type: Boolean, attribute: "is-disabled" })
], LuksoCollapse.prototype, "isDisabled", 2);
__decorateClass([
  n({ type: String, attribute: "icon" })
], LuksoCollapse.prototype, "icon", 2);
__decorateClass([
  n({ type: String })
], LuksoCollapse.prototype, "size", 2);
__decorateClass([
  r()
], LuksoCollapse.prototype, "maxHeight", 2);
__decorateClass([
  r()
], LuksoCollapse.prototype, "observedHeight", 2);
__decorateClass([
  e(".collapse-content")
], LuksoCollapse.prototype, "contentElement", 2);
LuksoCollapse = __decorateClass([
  safeCustomElement("lukso-collapse")
], LuksoCollapse);

export { LuksoCollapse };
