@wolf-scope/wolf-ui/dist/components/typography/typography.mjs

UI library for web applications using Lit

import { property as e } from "lit/decorators.js";
import { unsafeCSS as p, LitElement as g, html as f } from "lit";
const m = `:host{display:flex;color:var(--wolf-color-text);line-height:1.5}p,span{margin:0;padding:0;display:flex}::slotted(wolf-icon){margin:0 5px}:host([variant=header-xxlarge]){font-size:7rem;font-weight:600}@media (max-width: 768px){:host([variant=header-xxlarge]){font-size:5rem}}:host([variant=header-xlarge]){font-size:5rem;font-weight:600}@media (max-width: 768px){:host([variant=header-xlarge]){font-size:3.5rem}}:host([variant=header-large]){font-size:4.25rem;font-weight:600}@media (max-width: 768px){:host([variant=header-large]){font-size:3rem}}:host([variant=header-default]){font-size:2.5rem;font-weight:600}@media (max-width: 768px){:host([variant=header-default]){font-size:2rem}}:host([variant=header-small]){font-size:1.8rem;font-weight:600}@media (max-width: 768px){:host([variant=header-small]){font-size:1.4rem}}:host([variant=header-xsmall]){font-size:1rem;font-weight:600}:host([variant=header-xxsmall]){font-size:.875rem;font-weight:600}:host([variant=body-large]){font-size:1.125rem;font-weight:400}:host([variant=body-default]){font-size:1rem;font-weight:400}:host([variant=caption]){font-size:.875rem;font-weight:400}:host([variant=overline]){font-size:.75rem;font-weight:600}:host([color=primary]){color:var(--wolf-color-text)}:host([color=secondary]){color:var(--wolf-color-text-light)}:host([color=error]){color:var(--wolf-color-error)}:host([color=warning]){color:var(--wolf-color-warning)}:host([color=inverse]){color:var(--wolf-color-text-inverse)}:host([align=left]){text-align:left}:host([align=center]){text-align:center}:host([align=right]){text-align:right}:host([noWrap]) p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-flex;margin:0 .7rem}:host([strike]) p{text-decoration:line-through}
`;
var d = Object.defineProperty, c = Object.getOwnPropertyDescriptor, o = (n, a, h, i) => {
  for (var r = i > 1 ? void 0 : i ? c(a, h) : a, s = n.length - 1, l; s >= 0; s--)
    (l = n[s]) && (r = (i ? l(a, h, r) : l(r)) || r);
  return i && r && d(a, h, r), r;
};
const x = "wolf-typography";
class t extends g {
  constructor() {
    super(...arguments), this.variant = "body-default", this.color = "primary", this.align = "left", this.width = "inherit", this.height = "inherit", this.anchor = "", this.strike = !1, this.noWrap = !1;
  }
  render() {
    const a = this.anchor ? f`<a href="${this.anchor}"><slot></slot></a>` : f`<slot></slot>`;
    return f`<p style="width:${this.width}; height:${this.height};">${a}</p>`;
  }
}
t.styles = p(m);
o([
  e()
], t.prototype, "variant", 2);
o([
  e()
], t.prototype, "color", 2);
o([
  e()
], t.prototype, "align", 2);
o([
  e()
], t.prototype, "width", 2);
o([
  e()
], t.prototype, "height", 2);
o([
  e()
], t.prototype, "anchor", 2);
o([
  e({ type: Boolean })
], t.prototype, "strike", 2);
o([
  e({ type: Boolean })
], t.prototype, "noWrap", 2);
export {
  t as WolfTypography,
  x as tagName
};