import {
  __decorateClass,
  __privateAdd,
  __privateGet
} from "../../chunks/chunk.QU3DSPNU.js";
var _handleToggle, _handleKeydown, _syncGroupState, _dispatchStateEvent, _renderHeader, _renderIconButton, _renderContent;
import { property, query } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { GdsElement } from "../../gds-element.js";
import { tokens } from "../../tokens.style.js";
import { watch } from "../../utils/decorators/watch.js";
import {
  gdsCustomElement,
  html
} from "../../utils/helpers/custom-element-scoping.js";
import {
  withLayoutChildProps,
  withMarginProps,
  withSizeXProps
} from "../../utils/mixins/declarative-layout-mixins.js";
import { GdsButton } from "../button/button.component.js";
import { GdsIconDetails } from "./details-icon/details-icon.component.js";
import DetailsStyles from "./details.styles.js";
let GdsDetails = class extends withSizeXProps(
  withMarginProps(withLayoutChildProps(GdsElement))
) {
  constructor() {
    super(...arguments);
    this.summary = "";
    this.name = "";
    this.open = false;
    this.size = "large";
    __privateAdd(this, _handleToggle, () => {
      this.open = !this.open;
      __privateGet(this, _dispatchStateEvent).call(this);
    });
    __privateAdd(this, _handleKeydown, (event) => {
      if (event.key === "Enter" || event.key === " ") {
        event.preventDefault();
        __privateGet(this, _handleToggle).call(this);
      }
    });
    __privateAdd(this, _syncGroupState, () => {
      if (!this.open || !this.name) return;
      document.querySelectorAll('[gds-element="gds-details"]').forEach((details) => {
        var _a;
        if (details !== this && details.name === this.name) {
          const other = details;
          other.open = false;
          __privateGet(_a = other, _dispatchStateEvent).call(_a);
        }
      });
    });
    __privateAdd(this, _dispatchStateEvent, () => {
      this.dispatchCustomEvent("gds-ui-state", {
        bubbles: true,
        composed: true,
        detail: this.open
      });
    });
    __privateAdd(this, _renderHeader, () => {
      return html`
      <div
        class="summary"
        part="summary"
        role="button"
        tabindex="0"
        @click=${__privateGet(this, _handleToggle)}
        @keydown=${__privateGet(this, _handleKeydown)}
        aria-expanded="${this.open}"
        aria-controls="content-${this.name || "default"}"
      >
        <div id="summary-${this.name || "default"}" class="summary-label">
          ${this.summary || "Summary"}
        </div>
        ${__privateGet(this, _renderIconButton).call(this)}
      </div>
    `;
    });
    __privateAdd(this, _renderIconButton, () => {
      return html`
      <div class="summary-icon" role="presentation" aria-hidden="true">
        <gds-button
          rank="tertiary"
          size=${this.size === "small" ? "xs" : "medium"}
          role="presentation"
          tabindex="-1"
        >
          <gds-icon-details .open=${this.open}></gds-icon-details>
        </gds-button>
      </div>
    `;
    });
    __privateAdd(this, _renderContent, () => {
      return html`
      <div
        id="content-${this.name || "default"}"
        class=${classMap({
        content: true,
        open: this.open,
        small: this.size === "small"
      })}
        aria-hidden="${!this.open}"
        ?inert="${!this.open}"
      >
        <slot></slot>
      </div>
    `;
    });
  }
  __handleOpenChange() {
    __privateGet(this, _syncGroupState).call(this);
  }
  render() {
    return html`
      <div
        class=${classMap({
      details: true,
      open: this.open,
      small: this.size === "small"
    })}
      >
        ${__privateGet(this, _renderHeader).call(this)} ${__privateGet(this, _renderContent).call(this)}
      </div>
    `;
  }
};
_handleToggle = new WeakMap();
_handleKeydown = new WeakMap();
_syncGroupState = new WeakMap();
_dispatchStateEvent = new WeakMap();
_renderHeader = new WeakMap();
_renderIconButton = new WeakMap();
_renderContent = new WeakMap();
GdsDetails.styles = [tokens, DetailsStyles];
__decorateClass([
  property({ type: String })
], GdsDetails.prototype, "summary", 2);
__decorateClass([
  property({ type: String })
], GdsDetails.prototype, "name", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], GdsDetails.prototype, "open", 2);
__decorateClass([
  property({ type: String })
], GdsDetails.prototype, "size", 2);
__decorateClass([
  query(".content")
], GdsDetails.prototype, "_content", 2);
__decorateClass([
  query('slot[name="summary-icon-open"]')
], GdsDetails.prototype, "_openIconSlot", 2);
__decorateClass([
  query('slot[name="summary-icon-closed"]')
], GdsDetails.prototype, "_closedIconSlot", 2);
__decorateClass([
  watch("open")
], GdsDetails.prototype, "__handleOpenChange", 1);
GdsDetails = __decorateClass([
  gdsCustomElement("gds-details", { dependsOn: [GdsButton, GdsIconDetails] })
], GdsDetails);
export {
  GdsDetails
};
