import { r, c as s, h as t, H as l, g as c } from "./index.61732cef.js";
import { c as p } from "./index-orsBiyT_.fc4357c3.js";
import "react";
import "react-dom";
const d = () => ':host{display:block;overflow-x:auto;width:100%}:host *{box-sizing:border-box}.app-bar{display:flex;min-height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;gap:var(--s-space-16)}.app-bar--has-cta .app-bar__cta{display:block}.app-bar:not(.app-bar--has-right-controls) .app-bar__right-controls{display:none}.app-bar__left-controls{display:flex;min-width:0;flex-shrink:0;align-items:center;gap:var(--s-space-16)}.app-bar__main-navigation-control{flex-shrink:0}.app-bar__cta{display:none}.app-bar__heading{display:flex;min-width:10rem;flex-grow:1;align-items:center}@media (min-width: 992px){.app-bar__heading{min-width:0;flex-grow:0}}.app-bar__stepper-controls{position:relative;display:flex;flex-shrink:0;gap:var(--s-space-4)}.app-bar__stepper-controls:not(:first-child){padding-left:var(--s-space-16)}.app-bar__stepper-controls:not(:first-child):after{position:absolute;top:50%;left:0;width:var(--s-border-width-default);height:1.25rem;background-color:var(--s-border-default);content:"";transform:translateY(-50%)}.app-bar__center-controls{display:none;flex-grow:1;justify-content:center;align-items:center}@media (min-width: 992px){.app-bar__center-controls{display:flex}}.app-bar:not(.app-bar--has-heading) .app-bar__center-controls{display:flex}.app-bar:not(.app-bar--has-heading) .app-bar__heading{display:none}.app-bar__right-controls{display:flex;min-width:0;flex-shrink:0;justify-content:flex-end;align-items:center}', h = class {
  constructor(e) {
    r(this, e), this.backButtonClick = s(this, "backButtonClick", 7), this.closeButtonClick = s(this, "closeButtonClick", 7), this.stepUpButtonClick = s(this, "stepUpButtonClick", 7), this.stepDownButtonClick = s(this, "stepDownButtonClick", 7), this.backButtonLabel = "Go back", this.closeButtonIcon = "<swirl-icon-close></swirl-icon-close>", this.closeButtonLabel = "Close", this.paddingInlineEnd = "16", this.paddingInlineStart = "16", this.stepUpButtonLabel = "Previous item", this.stepDownButtonLabel = "Next item", this.showHeading = !0, this.onBackButtonClick = (a) => {
      this.backButtonClick.emit(a);
    }, this.onCloseButtonClick = (a) => {
      this.closeButtonClick.emit(a);
    }, this.onStepUpButtonClick = (a) => {
      this.stepUpButtonClick.emit(a);
    }, this.onStepDownButtonClick = (a) => {
      this.stepDownButtonClick.emit(a);
    };
  }
  componentWillLoad() {
    this.mutationObserver = new MutationObserver(() => {
      this.updateCtaStatus();
    }), this.mutationObserver.observe(this.el, { childList: !0 }), queueMicrotask(() => {
      this.updateCtaStatus();
    });
  }
  disconnectedCallback() {
    var e;
    (e = this.mutationObserver) == null || e.disconnect();
  }
  updateCtaStatus() {
    this.hasCta = Boolean(this.el.querySelector('[slot="cta"]'));
  }
  render() {
    const e = this.showBackButton || this.showCloseButton || this.showStepperControls, a = Boolean(this.el.querySelector('[slot="right-controls"]')), i = Boolean(this.el.querySelector('[slot="heading"]')), o = p("app-bar", {
      "app-bar--has-cta": this.hasCta,
      "app-bar--has-right-controls": a,
      "app-bar--has-heading": i && this.showHeading
    }), n = {
      paddingInlineEnd: `var(--s-space-${this.paddingInlineEnd})`,
      paddingInlineStart: `var(--s-space-${this.paddingInlineStart})`
    };
    return t(l, { key: "3780ddd0d31da42b5debfb9a4a239db65d2b9f6a" }, t("div", { key: "6a64894f59b6e56a3ea43a2fd2186bcc00f4d1a5", class: o, style: n }, e && t("div", { key: "ca74718a2032cac792a1fbc43745eac49a71d5fe", class: "app-bar__left-controls" }, (this.showBackButton || this.showCloseButton) && t("div", { key: "2066d1cab1565885df8a31a6a983980205e1ea82", class: "app-bar__main-navigation-control" }, this.showBackButton && t("swirl-button", { key: "67f59277ee4523b25ee497ca9a1d2d0f6690088b", hideLabel: !0, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButtonLabel, onClick: this.onBackButtonClick }), this.showCloseButton && t("swirl-button", { key: "da058aef20dedd56df6ebd911f6e5822a8b1af37", hideLabel: !0, icon: this.closeButtonIcon, label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showStepperControls && t("div", { key: "c9da007e15d4f351535c44a8766d285cd7fdf758", class: "app-bar__stepper-controls" }, t("swirl-button", { key: "b75f27203ca254564147a45180240f4a050607c0", hideLabel: !0, icon: "<swirl-icon-arrow-upward></swirl-icon-arrow-upward>", label: this.stepUpButtonLabel, onClick: this.onStepUpButtonClick }), t("swirl-button", { key: "4a6aebc86c7e3e73cc80579ce79c22fa17c2f2bd", hideLabel: !0, icon: "<swirl-icon-arrow-downward></swirl-icon-arrow-downward>", label: this.stepDownButtonLabel, onClick: this.onStepDownButtonClick }))), t("div", { key: "05efc306d01e5a8f29436001e583496fdbc4d474", class: "app-bar__cta" }, t("slot", { key: "794013782abe08494ef50da060da52c95e5f8e50", name: "cta" })), t("div", { key: "d3ee2f096ada2ccb1a0cefa7e3f4b52a5180e3fe", class: "app-bar__heading" }, t("slot", { key: "a3f2f4adf696a08752874556b2cad106dbbe8cef", name: "heading" })), t("div", { key: "971230dd573cb3a35650534365b5a16506ad117a", class: "app-bar__center-controls" }, t("slot", { key: "d26903808a059b4645efd868dc1847e87e4daf96", name: "center-controls" })), t("div", { key: "466c2ec56b707d9d4d33022fb83ad87648e3f177", class: "app-bar__right-controls" }, t("slot", { key: "786e1a1b3a962d82989a23f6ed6304e4bce1bbf0", name: "right-controls" }))));
  }
  get el() {
    return c(this);
  }
};
h.style = d();
export {
  h as swirl_app_bar
};
