import { unsafeCSS as B, LitElement as ee, html as b, nothing as E } from "lit";
import { property as n, state as R } from "lit/decorators.js";
import te from "./polyfea-md-shell.css.js";
import ae from "./polyfea-md-shell-grid.css.js";
import { ResizeController as ie } from "./resize-controller.js";
import { TonalPalette as k, argbFromHex as _, Hct as re, Scheme as O, hexFromArgb as u } from "./node_modules/@materialx/material-color-utilities/dist/dist-B-NhFz70.js";
import { PolyfeaMdThemeControl as w } from "./polyfea-md-theme-control.js";
import { loadLocale as oe, LocalizationRegistry as ne, loc as le } from "./localization.js";
import { targetLocales as se } from "./generated/locale-codes.js";
import { customElementSafe as he } from "./custom-element-safe.js";
var de = Object.defineProperty, ce = Object.getOwnPropertyDescriptor, I = (e) => {
  throw TypeError(e);
}, o = (e, t, r, c) => {
  for (var m = c > 1 ? void 0 : c ? ce(t, r) : t, s = e.length - 1, h; s >= 0; s--)
    (h = e[s]) && (m = (c ? h(t, r, m) : h(m)) || m);
  return c && m && de(t, r, m), m;
}, x = (e, t, r) => t.has(e) || I("Cannot " + r), l = (e, t, r) => (x(e, t, "read from private field"), r ? r.call(e) : t.get(e)), D = (e, t, r) => t.has(e) ? I("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), N = (e, t, r, c) => (x(e, t, "write to private field"), t.set(e, r), r), d = (e, t, r) => (x(e, t, "access private method"), r), z, y, f, a, $, M, P, S, V, F, A, G, W, C, H, q, j, J, Q;
let i = class extends ee {
  constructor() {
    super(...arguments), D(this, a), this.applicationHeadline = "Polyfea Shell", this.applicationHeadlineLocalizedId = "", this.topbarMoreDisabled = !1, this.drawerDisabled = !1, this.drawerCloseDisabled = !1, this.railDisabled = !1, this.navigationDisabled = !1, this.topbarVariant = "centered", this.smallBreakpointRem = 40, this.mediumBreakpointRem = 80, this.themePrimaryColor = "", this.themeSecondaryColor = "", this.themeTertiaryColor = "", this.themeErrorColor = "", this.themeBrandFont = "", this.themePlainFont = "", this.themeIconFont = "", this.themeScaleMultiplier = 1, this.themeMenu = !1, this.localesPath = "", this.locales = [], this.localeMenu = !1, this.absolutePosition = !1, this._drawerOpen = !0, this._scrolled = !1, D(this, z, new ne()), D(this, y, new ie(this)), D(this, f, null);
  }
  /** Initializes component state, loads themes/locales, and attaches global event listeners. */
  connectedCallback() {
    super.connectedCallback();
    const e = localStorage.getItem("drawerOpen");
    this._drawerOpen = e === "true", N(this, f, w.loadTheme()), l(this, z).configureLocalization(this.locales?.length ? this.locales : [...se], this.localesPath), window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", d(this, a, $).bind(this)), window.addEventListener(w.THEME_CHANGED_EVENT, d(this, a, $).bind(this)), this.addEventListener("drawer-closed", d(this, a, M).bind(this)), this.addEventListener("drawer-opened", d(this, a, P).bind(this)), oe();
  }
  /** Cleans up global event listeners to prevent memory leaks. */
  disconnectedCallback() {
    this.removeEventListener("drawer-closed", d(this, a, M).bind(this)), this.removeEventListener("drawer-opened", d(this, a, P).bind(this)), this.removeEventListener(w.THEME_CHANGED_EVENT, d(this, a, $).bind(this)), window.removeEventListener(w.THEME_CHANGED_EVENT, d(this, a, $).bind(this)), super.disconnectedCallback();
  }
  /** Reacts to property changes to update internal controllers like the resize controller. */
  attributeChangedCallback(e, t, r) {
    super.attributeChangedCallback(e, t, r), e === "small-breakpoint-rem" ? l(this, y).setMediaBreakpoints(this.smallBreakpointRem || 40, this.mediumBreakpointRem || 80) : e === "medium-breakpoint-rem" && l(this, y).setMediaBreakpoints(this.smallBreakpointRem || 40, this.mediumBreakpointRem || 80);
  }
  /** Generates the HTML structure of the shell based on current state and properties. */
  render() {
    return b`
      ${d(this, a, V).call(this)}
      <page class=${l(this, a, W)} size=${l(this, y).mediaSize} theme=${l(this, f)?.isDark ? "dark" : "light"}>
        ${d(this, a, q).call(this)}

        <main @scroll=${(e) => this._scrolled = e.target.scrollTop > 0}>
          <polyfea-context name="main-content">
            <slot></slot>
          </polyfea-context>
        </main>

        ${d(this, a, j).call(this)} ${d(this, a, J).call(this)} ${d(this, a, Q).call(this)}
      </page>
    `;
  }
};
z = /* @__PURE__ */ new WeakMap();
y = /* @__PURE__ */ new WeakMap();
f = /* @__PURE__ */ new WeakMap();
a = /* @__PURE__ */ new WeakSet();
$ = function(e) {
  if (e instanceof MediaQueryListEvent) {
    const r = w.loadTheme();
    if (r.followSystemTheme)
      r.isDark = e.matches, e = new CustomEvent(w.THEME_CHANGED_EVENT, { detail: r });
    else
      return;
  }
  const t = e;
  (t.detail.isDark !== l(this, f)?.isDark || t.detail.scale !== l(this, f)?.scale) && this.requestUpdate(), N(this, f, t.detail);
};
M = function() {
  d(this, a, S).call(this, !1);
};
P = function() {
  d(this, a, S).call(this, !0);
};
S = function(e) {
  this._drawerOpen = e, localStorage.setItem("drawer-open", this._drawerOpen ? "true" : "false");
};
V = function() {
  return b`<style>
      ${d(this, a, F).call(this).isDark ? "/* dark theme */" : "/* light theme */"}
      :host {
        ${d(this, a, A).call(this)}
        ${d(this, a, G).call(this)}
      }
    </style>`;
};
F = function() {
  return { ...w.loadTheme(), ...l(this, f) };
};
A = function() {
  const e = k.fromInt(_(this.themePrimaryColor || "#415F91")), t = k.fromInt(_(this.themeSecondaryColor || "#565F71")), r = k.fromInt(_(this.themeTertiaryColor || "#705575")), c = k.fromInt(_(this.themeErrorColor || "#B3261E")), m = _(this.themePrimaryColor || "#415F91"), s = re.fromInt(m), h = k.fromHueAndChroma(s.hue, 6), v = k.fromHueAndChroma(s.hue, 8), T = {
    a1: e,
    a2: t,
    a3: r,
    n1: h,
    n2: v,
    error: c
  }, L = d(this, a, F).call(this).isDark, U = L ? O.darkFromCorePalette(T) : O.lightFromCorePalette(T), g = L ? {
    dim: 6,
    bright: 24,
    containerLowest: 4,
    containerLow: 10,
    container: 12,
    containerHigh: 17,
    containerHighest: 22
  } : {
    dim: 87,
    bright: 98,
    containerLowest: 100,
    containerLow: 96,
    container: 94,
    containerHigh: 92,
    containerHighest: 90
  };
  let p = "";
  p += `--md-sys-color-surface-dim: ${u(h.tone(g.dim))};
`, p += `--md-sys-color-surface-bright: ${u(h.tone(g.bright))};
`, p += `--md-sys-color-surface-container-lowest: ${u(h.tone(g.containerLowest))};
`, p += `--md-sys-color-surface-container-low: ${u(h.tone(g.containerLow))};
`, p += `--md-sys-color-surface-container: ${u(h.tone(g.container))};
`, p += `--md-sys-color-surface-container-high: ${u(h.tone(g.containerHigh))};
`, p += `--md-sys-color-surface-container-highest: ${u(h.tone(g.containerHighest))};
`;
  for (const [Z, K] of Object.entries(U.toJSON())) {
    const X = Z.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), Y = u(K);
    p += `--md-sys-color-${X}: ${Y};
`;
  }
  return p += `--md-sys-color-scrim-background: color-mix(in srgb, var(--md-sys-color-scrim, #eee) 32%, transparent );
`, p;
};
G = function() {
  const e = {
    "display-large": { size: 57, lineHeight: 64, weight: 400, tracking: -0.25, brandFont: !0 },
    "display-medium": { size: 45, lineHeight: 52, weight: 400, tracking: 0, brandFont: !0 },
    "display-small": { size: 36, lineHeight: 44, weight: 400, tracking: 0, brandFont: !0 },
    "headline-large": { size: 32, lineHeight: 40, weight: 400, tracking: 0, brandFont: !0 },
    "headline-medium": { size: 28, lineHeight: 36, weight: 400, tracking: 0, brandFont: !0 },
    "headline-small": { size: 24, lineHeight: 32, weight: 400, tracking: 0, brandFont: !0 },
    "title-large": { size: 22, lineHeight: 28, weight: 400, tracking: 0, brandFont: !0 },
    "title-medium": { size: 16, lineHeight: 24, weight: 500, tracking: 0.15, brandFont: !1 },
    "title-small": { size: 14, lineHeight: 20, weight: 500, tracking: 0.1, brandFont: !1 },
    "label-large": { size: 14, lineHeight: 20, weight: 500, tracking: 0.1, brandFont: !1 },
    "label-medium": { size: 12, lineHeight: 16, weight: 500, tracking: 0.5, brandFont: !1 },
    "label-small": { size: 11, lineHeight: 16, weight: 500, tracking: 0.5, brandFont: !1 },
    "body-large": { size: 16, lineHeight: 24, weight: 400, tracking: 0.5, brandFont: !1 },
    "body-medium": { size: 14, lineHeight: 20, weight: 400, tracking: 0.25, brandFont: !1 },
    "body-small": { size: 12, lineHeight: 16, weight: 400, tracking: 0.4, brandFont: !1 }
  };
  let t = "";
  t += `--md-ref-typeface-brand: ${this.themeBrandFont || "'Roboto Slab Variable', 'Roboto Slab', serif"};
`, t += `--md-ref-typeface-plain: ${this.themePlainFont || "'Roboto Flex Variable','Roboto Flex', Roboto, sans-serif"};
`;
  const r = (this.themeScaleMultiplier || 1) * (d(this, a, F).call(this).scale || 1) / 16, c = (s) => Math.round((s * r + Number.EPSILON) * 1e4) / 1e4 + "rem";
  return t += Object.entries(e).map(
    ([s, h]) => `--md-sys-typescale-${s}-font: var(--md-ref-typeface-${h.brandFont ? "brand" : "plain"});
--md-sys-typescale-${s}-line-height: ${c(h.lineHeight)};
--md-sys-typescale-${s}-size: ${c(h.size)};
--md-sys-typescale-${s}-weight: ${h.weight.toString()};
--md-sys-typescale-${s}-tracking: ${c(h.tracking)};--md-sys-typescale-${s}: var(--md-sys-typescale-${s}-weight)  var(--md-sys-typescale-${s}-size)/var(--md-sys-typescale-${s}-line-height) var(--md-sys-typescale-${s}-font);`
  ).join(`
`) + `
`, t += `--md-icon-font: ${this.themeIconFont || "'Material Symbols Outlined Variable', 'Material Symbols Outlined'"};
`, t + Object.entries({
    "corner-none": 0,
    "corner-extra-small": 4,
    "corner-small": 8,
    "corner-medium": 12,
    "corner-large": 16,
    "corner-extra-large": 28,
    "corner-full": 9999
  }).map(([s, h]) => {
    let v;
    return h === 9999 ? v = "9999px" : v = `${h * r}rem`, `--md-sys-shape-${s}: ${v};`;
  }).join(`
`);
};
W = function() {
  let e = l(this, y).mediaSize;
  return e += l(this, f)?.isDark ? " dark" : " light", l(this, a, C) ? e += " drawer-disabled" : e += " drawer" + (this._drawerOpen ? "-open" : "-closed"), !l(this, a, H) && (l(this, a, C) || !this._drawerOpen) && (e += " rail"), l(this, a, H) && (e += " rail-disabled"), !this.navigationDisabled && l(this, a, C) && l(this, a, H) && (e += " navigation"), this.navigationDisabled && (e += " navigation-disabled"), e;
};
C = function() {
  return this.drawerDisabled || l(this, y).mediaSize === "small";
};
H = function() {
  return this.railDisabled || l(this, y).mediaSize === "small";
};
q = function() {
  const e = l(this, a, H) && !l(this, a, C) && !this._drawerOpen;
  return b` <topbar class=${this._scrolled ? "scrolled" : ""} ?more-actions-disabled=${this.topbarMoreDisabled} ?scrolled=${this._scrolled}>
      <polyfea-md-topbar headline=${le(this.applicationHeadline, this.applicationHeadlineLocalizedId)} leading-icon=${e ? "drawer" : "none"} variant=${this.topbarVariant}>
        <polyfea-context name="topbar-leading-icon" take="1">
          <slot slot="leading" name="topbar-leading"></slot>
        </polyfea-context>
        <polyfea-context name="topbar-trailing-icon" take="1">
          <slot slot="trailing" name="topbar-trailing"></slot>
        </polyfea-context>
        <div class="topbar-menu" slot="menu">
          <polyfea-context name="topbar-menu-items">
            <slot name="topbar-menu"></slot>
          </polyfea-context>
          ${this.themeMenu ? b`

                <polyfea-md-theme-control variant="menu-item" control="theme-toggle"></polyfea-md-theme-control>
                <polyfea-md-theme-control variant="menu-item" control="text-increase"></polyfea-md-theme-control>
                <polyfea-md-theme-control variant="menu-item" control="text-decrease"></polyfea-md-theme-control>
                <polyfea-md-theme-control variant="menu-item" control="reset-font"></polyfea-md-theme-control>
              ` : E}
          ${this.localeMenu ? b`
                <md-sub-menu>
                  <polyfea-md-locale-menu control="locale-select" .locales=${this.locales}></polyfea-md-locale-menu>
                </md-sub-menu>
              ` : ""}
        </div>
      </polyfea-md-topbar>
    </topbar>`;
};
j = function() {
  return this.navigationDisabled ? E : b`
      <navigation>
        <polyfea-md-navigation-bar>
          <polyfea-context name="navigation-content" take="5">
            <slot name="navigation"></slot>
          </polyfea-context>
        </polyfea-md-navigation-bar>
      </navigation>
    `;
};
J = function() {
  return this.railDisabled ? E : b`
      <rail>
        <polyfea-md-rail ?drawer-disabled=${this.drawerDisabled}>
          <polyfea-context name="rail-primary-action" take="1">
            <slot name="primary-action" slot="primary-action"></slot>
          </polyfea-context>
          <polyfea-context name="rail-content" take="7">
            <slot name="rail"></slot>
          </polyfea-context>
        </polyfea-md-rail>
      </rail>
    `;
};
Q = function() {
  return this.drawerDisabled ? E : b`
      <drawer
        class="menu"
        ?open=${this._drawerOpen}
        @click=${() => {
    l(this, y).mediaSize === "medium" && d(this, a, S).call(this, !1);
  }}
      >
        <polyfea-md-drawer ?close-disabled=${this.drawerCloseDisabled || !this._drawerOpen}>
          <polyfea-context name="drawer-content">
            <slot name="drawer"></slot>
          </polyfea-context>
        </polyfea-md-drawer>
      </drawer>
    `;
};
i.styles = [B(ae), B(te)];
o([
  n({ attribute: "application-headline" })
], i.prototype, "applicationHeadline", 2);
o([
  n({ attribute: "application-headline-localized-id" })
], i.prototype, "applicationHeadlineLocalizedId", 2);
o([
  n({ type: Boolean, attribute: "topbar-more-disabled" })
], i.prototype, "topbarMoreDisabled", 2);
o([
  n({ type: Boolean, attribute: "drawer-disabled" })
], i.prototype, "drawerDisabled", 2);
o([
  n({ type: Boolean, attribute: "drawer-close-disabled" })
], i.prototype, "drawerCloseDisabled", 2);
o([
  n({ type: Boolean, attribute: "rail-disabled" })
], i.prototype, "railDisabled", 2);
o([
  n({ type: Boolean, attribute: "navigation-disabled" })
], i.prototype, "navigationDisabled", 2);
o([
  n({ attribute: "topbar-variant" })
], i.prototype, "topbarVariant", 2);
o([
  n({ type: Number, attribute: "small-breakpoint-rem" })
], i.prototype, "smallBreakpointRem", 2);
o([
  n({ type: Number, attribute: "medium-breakpoint-rem" })
], i.prototype, "mediumBreakpointRem", 2);
o([
  n({ attribute: "theme-primary-color" })
], i.prototype, "themePrimaryColor", 2);
o([
  n({ attribute: "theme-secondary-color" })
], i.prototype, "themeSecondaryColor", 2);
o([
  n({ attribute: "theme-tertiary-color" })
], i.prototype, "themeTertiaryColor", 2);
o([
  n({ type: String, attribute: "theme-error-color" })
], i.prototype, "themeErrorColor", 2);
o([
  n({ type: String, attribute: "theme-brand-font" })
], i.prototype, "themeBrandFont", 2);
o([
  n({ type: String, attribute: "theme-plain-font" })
], i.prototype, "themePlainFont", 2);
o([
  n({ type: String, attribute: "theme-icon-font" })
], i.prototype, "themeIconFont", 2);
o([
  n({ type: Number, attribute: "theme-scale-multiplier" })
], i.prototype, "themeScaleMultiplier", 2);
o([
  n({ type: Boolean, attribute: "theme-menu" })
], i.prototype, "themeMenu", 2);
o([
  n({ type: String, attribute: "locales-path" })
], i.prototype, "localesPath", 2);
o([
  n({ type: Array, attribute: "locales" })
], i.prototype, "locales", 2);
o([
  n({ type: Boolean, attribute: "locale-menu" })
], i.prototype, "localeMenu", 2);
o([
  n({ type: Boolean, attribute: "absolute-position" })
], i.prototype, "absolutePosition", 2);
o([
  R()
], i.prototype, "_drawerOpen", 2);
o([
  R()
], i.prototype, "_scrolled", 2);
i = o([
  he("polyfea-md-shell")
], i);
export {
  i as PolyfeaMdShell
};
