import d from "./grid.js";
import m from "./grid-item.js";
import { C as x } from "../chunks/icon-button.C2s3pHG4.js";
import h from "./line-clamp.js";
import g from "./space.js";
import { C as w } from "../chunks/typography.DJC_UXgs.js";
import { n as a, C as u } from "../chunks/lib-cortex-element.CVMmyPMC.js";
import { c as _ } from "../chunks/component.styles.CRO4Odto.js";
import { c as v } from "../chunks/custom-element.L4WJXn1j.js";
import { L as S } from "../chunks/i18n.BABe9hN4.js";
import { i as $, x as r } from "../chunks/lit-element.jLBm65_O.js";
import { o as y } from "../chunks/if-defined.BRoBj_Rp.js";
import { o as b } from "../chunks/style-map.llVFPd__.js";
import { n as p } from "../chunks/when.Dr1es41R.js";
import { c as C } from "../chunks/capitalize.CNStXZBq.js";
const D = $`:host{--typeface-font-family:var(--cx-font-sans);--typeface-font-style:normal;--typeface-font-weight:var(--cx-font-weight-normal);width:100%;display:block}.typeface__name,.typeface__preview-text,.typeface__static-text,.typeface__description{color:var(--color);overflow-wrap:break-word}.typeface__name,.typeface__preview-text,.typeface__static-text{--font-family:var(--typeface-font-family);--font-style:var(--typeface-font-style);--font-weight:var(--typeface-font-weight)}.typeface__preview-text{--font-size:var(--cx-font-size-4x-large);text-align:var(--text-align,left)}.typeface__preview-text::part(base){padding-right:var(--cx-spacing-x-large);line-height:1.5}.typeface__static-text{--font-size:var(--cx-font-size-medium-large);--line-height:1}.typeface__description{font-family:var(--cx-font-sans);flex-basis:120px}`;
var z = Object.defineProperty, I = Object.getOwnPropertyDescriptor, e = (o, c, s, n) => {
  for (var i = n > 1 ? void 0 : n ? I(c, s) : c, l = o.length - 1, f; l >= 0; l--)
    (f = o[l]) && (i = (n ? f(c, s, i) : f(i)) || i);
  return n && i && z(c, s, i), i;
};
let t = class extends u {
  constructor() {
    super(...arguments), this.localize = new S(this), this.previewText = "", this.fontFamily = "", this.fontWeight = "", this.fontStyle = "", this.fontSrc = "", this.canDownload = !1, this.downloadIconName = "cloud_download", this.downloadIconSrc = "", this.canSelfDownload = !1, this.variant = "detailed";
  }
  handleDownload(o) {
    o.preventDefault(), this.canSelfDownload ? this.ownerDocument.defaultView?.open(this.fontSrc, "_blank") : this.emit("cx-typeface-download", { detail: this.fontSrc });
  }
  render() {
    const o = this.variant === "compact" ? "6" : "5";
    return r`<div class="typeface" style=${b({
      "--typeface-font-family": `"${this.fontFamily.replace(/"/g, '\\"')}"`,
      "--typeface-font-style": this.fontStyle,
      "--typeface-font-weight": this.fontWeight
    })}>${p(
      this.variant === "detailed",
      () => r`<cx-typography class="typeface__name">${this.fontFamily}-${this.fontWeight}</cx-typography>`
    )}<cx-grid columns=${o} wrap="wrap" column-spacing="var(--cx-spacing-medium)" row-spacing="var(--cx-spacing-medium)" use-flex-gap use-container>${p(
      this.variant === "compact",
      () => r`<cx-grid-item xs=${o} md="1"></cx-grid-item>`
    )}<cx-grid-item xs=${o} md="2"><cx-line-clamp lines="1"><cx-typography class="typeface__preview-text">${this.previewText}</cx-typography></cx-line-clamp></cx-grid-item><cx-grid-item xs=${o} md="2"><cx-typography class="typeface__static-text">
            ABCDEFGHIJKLMNOPQRSTUVWXYZ
          </cx-typography><cx-typography class="typeface__static-text">
            abcdefghijklmnopqrstuvwxyz
          </cx-typography><cx-typography class="typeface__static-text">
            1234567890!@#$%^&*()-=/:;.,”
          </cx-typography></cx-grid-item><cx-grid-item xs=${o} md="1"><cx-space direction="horizontal" align-items="center" justify-content="space-between" wrap="nowrap">${p(
      this.variant === "detailed",
      () => r`<div class="typeface__description"><cx-typography>${this.fontFamily}</cx-typography><cx-typography>Weight: ${this.fontWeight}</cx-typography><cx-typography>
                    Style: ${C(this.fontStyle)}</cx-typography></div>`
    )}
            ${p(
      this.canDownload && this.fontSrc,
      () => r`<cx-icon-button name=${y(
        this.downloadIconSrc ? void 0 : this.downloadIconName
      )} src=${y(this.downloadIconSrc || void 0)} class="typeface__download" label=${this.localize.term("download")} @click=${this.handleDownload}>
                  Download
                </cx-icon-button>`
    )}</cx-space></cx-grid-item></cx-grid></div>`;
  }
};
t.styles = [_, D];
t.dependencies = {
  "cx-grid": d,
  "cx-grid-item": m,
  "cx-icon-button": x,
  "cx-line-clamp": h,
  "cx-space": g,
  "cx-typography": w
};
e([
  a({ attribute: "preview-text", reflect: !0, type: String })
], t.prototype, "previewText", 2);
e([
  a({ attribute: "font-family", reflect: !0, type: String })
], t.prototype, "fontFamily", 2);
e([
  a({ attribute: "font-weight", reflect: !0, type: String })
], t.prototype, "fontWeight", 2);
e([
  a({ attribute: "font-style", reflect: !0, type: String })
], t.prototype, "fontStyle", 2);
e([
  a({ attribute: "font-src", reflect: !0, type: String })
], t.prototype, "fontSrc", 2);
e([
  a({ attribute: "can-download", reflect: !0, type: Boolean })
], t.prototype, "canDownload", 2);
e([
  a({ attribute: "download-icon-name", reflect: !0, type: String })
], t.prototype, "downloadIconName", 2);
e([
  a({ attribute: "download-icon-src", reflect: !0, type: String })
], t.prototype, "downloadIconSrc", 2);
e([
  a({ attribute: "can-self-download", reflect: !0, type: Boolean })
], t.prototype, "canSelfDownload", 2);
e([
  a({ reflect: !0, type: String })
], t.prototype, "variant", 2);
t = e([
  v("cx-typeface")
], t);
export {
  t as default
};
