import { unsafeCSS as y, LitElement as x, html as c } from "lit";
import { property as s, state as I } from "lit/decorators.js";
import _ from "./polyfea-md-app.css.js";
import { loc as f } from "./localization.js";
import { updateWhenLocaleChanges as S } from "@lit/localize";
import { importMdElevationSafely as L, importMdRippleSafely as w, importMdIconSafely as T, customElementSafe as $ } from "./custom-element-safe.js";
var A = Object.defineProperty, z = Object.getOwnPropertyDescriptor, u = (t) => {
  throw TypeError(t);
}, a = (t, e, o, h) => {
  for (var n = h > 1 ? void 0 : h ? z(e, o) : e, d = t.length - 1, v; d >= 0; d--)
    (v = t[d]) && (n = (h ? v(e, o, n) : v(n)) || n);
  return h && n && A(e, o, n), n;
}, P = (t, e, o) => e.has(t) || u("Cannot " + o), C = (t, e, o) => e.has(t) ? u("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, o), l = (t, e, o) => (P(t, e, "access private method"), o), r, p, g, b, m;
L();
w();
T();
let i = class extends x {
  constructor() {
    super(), C(this, r), this.headline = "", this.headlineLocalizeId = "", this.shortHeadline = "", this.shortHeadlineLocalizeId = "", this.supportingText = "", this.supportingTextLocalizeId = "", this.tileImgSrc = "", this.iconSrc = "", this.materialIcon = "", this.tileImgDisabled = !1, this.href = "", this.isActivePrefix = !1, this.context = "", this.mode = null, this.isActive = !1, S(this);
  }
  connectedCallback() {
    super.connectedCallback(), globalThis.navigation?.addEventListener && globalThis.navigation?.addEventListener("navigatesuccess", l(this, r, p).bind(this)), l(this, r, p).call(this);
  }
  disconnectedCallback() {
    globalThis.navigation?.removeEventListener && globalThis.navigation?.removeEventListener("navigatesuccess", l(this, r, p).bind(this)), super.disconnectedCallback();
  }
  render() {
    let t = this.mode;
    if (!t && this.context) {
      const e = this.context.split("-")[0];
      (e === "drawer" || e === "rail" || e === "navigation") && (t = e);
    }
    return !t || t === "tile" ? (this.setAttribute("class", "tile"), l(this, r, g).call(this)) : (this.setAttribute("class", t || "icon"), l(this, r, b).call(this, t));
  }
};
r = /* @__PURE__ */ new WeakSet();
p = function() {
  const t = new URL(this.href, new URL(document.baseURI, document.location.href || "http://localhost"));
  if (this.isActivePrefix) {
    const e = t.pathname + t.hash, o = window.location.pathname + window.location.hash;
    this.isActive = o.startsWith(e);
  } else
    this.isActive = window.location.href === t.href;
};
g = function() {
  return c` <a class="card-wrapper" href=${this.href} @click=${(t) => l(this, r, m).call(this, t)}>
      <md-elevation></md-elevation>
      <md-ripple></md-ripple>
      ${this.tileImgDisabled ? "" : c`
            <div class="tile-picture">
              <img src=${this.tileImgSrc} alt="" />
            </div>
          `}
      <div class="content">
        <div class="headline">${f(this.headline, this.headlineLocalizeId)}</div>
        <div class="supporting-text">${f(this.supportingText, this.supportingTextLocalizeId)}</div>
      </div>
    </a>`;
};
b = function(t) {
  return c`
      <a class=${t + "-button"} href=${this.href} @click=${(e) => l(this, r, m).call(this, e)}>
        <div class=${"icon" + (this.isActive ? " active" : "")}>
          <md-ripple></md-ripple>
          <slot name="icon"> ${this.iconSrc ? c`<img src=${this.iconSrc} alt="" />` : this.materialIcon ? c`<md-icon>${this.materialIcon}</md-icon>` : void 0} </slot>
        </div>
        <div class="headline">${f(this.shortHeadline || this.headline || "", this.shortHeadlineLocalizeId)}</div>
      </a>
    `;
};
m = function(t) {
  t.preventDefault(), setTimeout(() => {
    globalThis.navigation ? globalThis.navigation.navigate(this.href) : window.history.pushState({}, "", this.href);
  }, 300);
};
i.styles = y(_);
a([
  s({ attribute: "headline" })
], i.prototype, "headline", 2);
a([
  s({ attribute: "headline-localize-id" })
], i.prototype, "headlineLocalizeId", 2);
a([
  s({ attribute: "short-headline" })
], i.prototype, "shortHeadline", 2);
a([
  s({ attribute: "short-headline-localize-id" })
], i.prototype, "shortHeadlineLocalizeId", 2);
a([
  s({ attribute: "supporting-text" })
], i.prototype, "supportingText", 2);
a([
  s({ attribute: "supporting-text-localize-id" })
], i.prototype, "supportingTextLocalizeId", 2);
a([
  s({ attribute: "tile-img-src" })
], i.prototype, "tileImgSrc", 2);
a([
  s({ attribute: "icon-src" })
], i.prototype, "iconSrc", 2);
a([
  s({ attribute: "material-icon" })
], i.prototype, "materialIcon", 2);
a([
  s({ attribute: "tile-img-disabled" })
], i.prototype, "tileImgDisabled", 2);
a([
  s({ attribute: "href" })
], i.prototype, "href", 2);
a([
  s({ attribute: "is-active-prefix", type: Boolean })
], i.prototype, "isActivePrefix", 2);
a([
  s({
    reflect: !0,
    attribute: "context"
  })
], i.prototype, "context", 2);
a([
  s({ type: String })
], i.prototype, "mode", 2);
a([
  I()
], i.prototype, "isActive", 2);
i = a([
  $("polyfea-md-app")
], i);
export {
  i as PolyfeaMdApp
};
