dap-design-system/dist/components/typography/typography.component.js

Official design system for the DÁP (dap.gov.hu)

import { cva as u } from "../../node_modules/class-variance-authority/dist/index.js";
import { clsx as h } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as p } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { ifDefined as d } from "../../node_modules/lit-html/directives/if-defined.js";
import { unsafeStatic as y, html as c } from "../../node_modules/lit-html/static.js";
import { anchorClass as f } from "../../common/const.js";
import { DdsElement as v } from "../../internal/dds-hu-element.js";
import b from "./_styles/typography.scss.js";
import { unsafeCSS as _ } from "../../node_modules/@lit/reactive-element/css-tag.js";
var $ = Object.defineProperty, n = (m, r, s, e) => {
  for (var t = void 0, i = m.length - 1, o; i >= 0; i--)
    (o = m[i]) && (t = o(r, s, t) || t);
  return t && $(r, s, t), t;
};
const l = u("typography", {
  variants: {
    variant: {
      h1: "heading typography-h1",
      h2: "heading typography-h2",
      h3: "heading typography-h3",
      h4: "heading typography-h4",
      h5: "heading typography-h5",
      h6: "heading typography-h6",
      body: "typography-body",
      caption: "typography-caption",
      description: "typography-description"
    },
    size: {
      lg: "typography-size-lg",
      md: "typography-size-md",
      sm: "typography-size-sm",
      xs: "typography-size-xs"
    },
    inverted: {
      true: "typography-inverted"
    }
  },
  compoundVariants: [
    {
      variant: ["h1", "h2", "h3", "h4", "h5", "h6"],
      class: ""
    },
    {
      variant: "description",
      size: "lg",
      class: "typography-description-lg"
    },
    {
      variant: "description",
      size: "sm",
      class: "typography-description-sm"
    },
    {
      variant: ["h1", "h2", "h3", "h4", "h5", "h6"],
      inverted: !0,
      class: "typography-heading-inverted"
    },
    {
      variant: "description",
      inverted: !0,
      class: "typography-description-inverted"
    },
    {
      variant: "body",
      inverted: !0,
      class: "typography-inverted"
    },
    {
      variant: "caption",
      inverted: !0,
      class: "typography-caption-inverted"
    }
  ]
}), g = class g extends v {
  constructor() {
    super(...arguments), this.anchor = !1, this.inverted = !1;
  }
  firstUpdated(r) {
    super.firstUpdated(r), this.elementId && this.setAttribute("id", this.elementId);
  }
  get elementId() {
    return this.id ? this.id : void 0;
  }
  _renderHeading(r, s, e, t, i) {
    return c`
      <${y(e)}
        part="base"
        id=${d(r)}
        class=${h(
      l({ variant: e, size: t, inverted: i }),
      { [f]: this.anchor },
      s
    )}
      >
       <slot></slot>
      </${y(e)}>
    `;
  }
  _renderBody(r, s, e, t, i) {
    return c`
      <${y(t)}
        id=${d(r)}
        part="base"
        class=${h(l({ variant: "body", size: e, inverted: i }), s)}
      >
        <slot></slot>
      </${y(t)}>
    `;
  }
  _renderCaption(r, s, e) {
    return c`
      <span
        id=${d(r)}
        part="base"
        class=${h(
      l({ variant: "caption", inverted: e }),
      s
    )}>
        <slot></slot>
      </span>
    `;
  }
  _renderDescription(r, s, e, t) {
    return c`
      <span
        id=${d(r)}
        part="base"
        class=${h(
      l({ variant: "description", size: e, inverted: t }),
      s
    )}>
        <slot></slot>
      </span>
    `;
  }
  _getElement(r, s, e, t = "", i = "p", o = !1) {
    switch (s) {
      case "h1":
      case "h2":
      case "h3":
      case "h4":
      case "h5":
      case "h6":
        return this._renderHeading(
          r,
          t,
          s,
          e,
          o
        );
      case "body":
        return this._renderBody(r, t, e, i, o);
      case "caption":
        return this._renderCaption(r, t, o);
      case "description":
        return this._renderDescription(r, t, e, o);
      default:
        return null;
    }
  }
  render() {
    return this._getElement(
      this.elementId,
      this.variant,
      this.size,
      this.customClass,
      this.bodyAs,
      this.inverted
    );
  }
};
g.tagName = "dap-ds-typography", g.styles = _(b);
let a = g;
n([
  p({ reflect: !0 })
], a.prototype, "variant");
n([
  p({ reflect: !0 })
], a.prototype, "size");
n([
  p({ reflect: !0 })
], a.prototype, "bodyAs");
n([
  p()
], a.prototype, "customClass");
n([
  p({ type: Boolean, reflect: !0 })
], a.prototype, "anchor");
n([
  p({ type: Boolean, reflect: !0 })
], a.prototype, "inverted");
export {
  a as default
};
//# sourceMappingURL=typography.component.js.map