import { h } from "@stencil/core";
/**
 * Klevu typography component. This component is used in most places to set correct font in component pieces.
 *
 * @cssprop --klevu-typography-color - Color of the text
 * @cssprop --klevu-h1-size 24px H1 size
 * @cssprop --klevu-h1-lineheight calc(28em/24) H1 line-height
 * @cssprop --klevu-h1-weight 700 H1 weight
 * @cssprop --klevu-h2-size 20px H2 size
 * @cssprop --klevu-h2-lineheight calc(24em/20) H2 line-height
 * @cssprop --klevu-h2-weight 700 H2 weight
 * @cssprop --klevu-h3-size 16px H3 size
 * @cssprop --klevu-h3-lineheight calc(20em/16) H3 line-height
 * @cssprop --klevu-h3-weight 700 H3 weight
 * @cssprop --klevu-h4-size 14px H4 size
 * @cssprop --klevu-h4-lineheight calc(18em/14) H4 line-height
 * @cssprop --klevu-h4-weight 700 H4 weight
 * @cssprop --klevu-body-l-size 20px Body large size
 * @cssprop --klevu-body-l-line-height calc(28em/20) Body large line-height
 * @cssprop --klevu-body-m-size 16px Body medium size
 * @cssprop --klevu-body-m-line-height calc(24em/16) Body medium line-height
 * @cssprop --klevu-body-s-size 14px  Body small size
 * @cssprop --klevu-body-s-line-height calc(20em/14) Body small line-height
 * @cssprop --klevu-body-xs-size 12px Body extra small size
 * @cssprop --klevu-body-xs-line-height calc(16em/12) Body extra small line-height
 *
 */
export class KlevuTypography {
  constructor() {
    this.variant = undefined;
  }
  render() {
    return (h("span", { class: `variant-${this.variant}` }, h("slot", null)));
  }
  static get is() { return "klevu-typography"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["klevu-typography.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["klevu-typography.css"]
    };
  }
  static get properties() {
    return {
      "variant": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "KlevuTypographyVariant",
          "resolved": "\"body-l\" | \"body-l-bold\" | \"body-m\" | \"body-m-bold\" | \"body-s\" | \"body-s-bold\" | \"body-xs\" | \"body-xs-bold\" | \"h1\" | \"h2\" | \"h3\" | \"h4\"",
          "references": {
            "KlevuTypographyVariant": {
              "location": "local",
              "path": "/home/runner/work/frontend-sdk/frontend-sdk/packages/klevu-ui/src/components/klevu-typography/klevu-typography.tsx"
            }
          }
        },
        "required": true,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Variant of heading"
        },
        "attribute": "variant",
        "reflect": false
      }
    };
  }
}
//# sourceMappingURL=klevu-typography.js.map
