import {
  __decorateClass,
  __privateAdd,
  __privateGet,
  __privateMethod
} from "../../chunks/chunk.QU3DSPNU.js";
var _GdsFormControlHeader_instances, handleExtSupTxtSlotChange_fn, _renderExtSupTxtButton, _handleExtSupTxtBtnClick, _handleResize, renderExtSupTxt_fn;
import { localized, msg } from "@lit/localize";
import { property, query, state } from "lit/decorators.js";
import { when } from "lit/directives/when.js";
import { GdsButton } from "../../components/button/button.component.js";
import { GdsCard } from "../../components/card/card.component.js";
import { IconCircleInfo } from "../../components/icon/icons/circle-info.component.js";
import { GdsElement } from "../../gds-element.js";
import {
  gdsCustomElement,
  html
} from "../../utils/helpers/custom-element-scoping.js";
import FormControlHeaderStyles from "./form-control-header.styles.js";
let GdsFormControlHeader = class extends GdsElement {
  constructor() {
    super(...arguments);
    __privateAdd(this, _GdsFormControlHeader_instances);
    this.showExtendedSupportingText = false;
    this._hasExtendedSupportingText = false;
    __privateAdd(this, _renderExtSupTxtButton, () => {
      return html`
      <gds-button
        size="small"
        rank="tertiary"
        margin="-xs 0"
        label="${msg("Show more information")}"
        gds-aria-expanded="${this.showExtendedSupportingText}"
        @click=${__privateGet(this, _handleExtSupTxtBtnClick)}
      >
        <gds-icon-circle-info ?solid=${this.showExtendedSupportingText} />
      </gds-button>
    `;
    });
    __privateAdd(this, _handleExtSupTxtBtnClick, () => {
      const shouldEventHappen = this.dispatchCustomEvent("gds-ui-state", {
        bubbles: true,
        composed: true,
        detail: this.showExtendedSupportingText,
        cancelable: true
      });
      if (!shouldEventHappen) return;
      this.showExtendedSupportingText = !this.showExtendedSupportingText;
      this._extendedSupportingText?.style.setProperty(
        "--_max-height",
        this.showExtendedSupportingText ? `${this._extendedSupportingText.scrollHeight}px` : "0"
      );
    });
    /**
     * Handles the resize event to update the max-height of the extended supporting text.
     * This is necessary to ensure that the extended supporting text doesnt overflow it's container
     */
    __privateAdd(this, _handleResize, () => {
      if (this.showExtendedSupportingText) {
        this._extendedSupportingText?.style.setProperty(
          "--_max-height",
          `${this._extendedSupportingText.scrollHeight}px`
        );
      }
    });
  }
  render() {
    return html`
      <div id="label-row">
        <div>
          <slot name="label"></slot>
          <slot name="supporting-text"></slot>
        </div>
        ${when(this._hasExtendedSupportingText, __privateGet(this, _renderExtSupTxtButton))}
      </div>

      ${__privateMethod(this, _GdsFormControlHeader_instances, renderExtSupTxt_fn).call(this)}
    `;
  }
  connectedCallback() {
    super.connectedCallback();
    window.addEventListener("resize", __privateGet(this, _handleResize));
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    window.removeEventListener("resize", __privateGet(this, _handleResize));
  }
};
_GdsFormControlHeader_instances = new WeakSet();
handleExtSupTxtSlotChange_fn = function(e) {
  this._hasExtendedSupportingText = e.target.assignedElements({ flatten: true }).length > 0;
};
_renderExtSupTxtButton = new WeakMap();
_handleExtSupTxtBtnClick = new WeakMap();
_handleResize = new WeakMap();
renderExtSupTxt_fn = function() {
  return html`
      <div
        id="extended-supporting-text"
        aria-hidden="${this.showExtendedSupportingText ? "false" : "true"}"
        ?inert=${!this.showExtendedSupportingText}
      >
        <slot
          name="extended-supporting-text"
          @slotchange=${__privateMethod(this, _GdsFormControlHeader_instances, handleExtSupTxtSlotChange_fn)}
        ></slot>
      </div>
    `;
};
GdsFormControlHeader.styles = [FormControlHeaderStyles];
__decorateClass([
  property({
    type: Boolean,
    reflect: true
  })
], GdsFormControlHeader.prototype, "showExtendedSupportingText", 2);
__decorateClass([
  state()
], GdsFormControlHeader.prototype, "_hasExtendedSupportingText", 2);
__decorateClass([
  query("#extended-supporting-text")
], GdsFormControlHeader.prototype, "_extendedSupportingText", 2);
GdsFormControlHeader = __decorateClass([
  gdsCustomElement("gds-form-control-header", {
    dependsOn: [GdsButton, GdsCard, IconCircleInfo]
  }),
  localized()
], GdsFormControlHeader);
export {
  GdsFormControlHeader
};
