import { h } from "@stencil/core";
/**
 * Klevu typography component. This component is used in most places to set correct font in component pieces.
 * @slot default - Typography text
 *
 */
export class KlevuTypography {
  constructor() {
    this.variant = undefined;
    this.fullWidth = undefined;
  }
  render() {
    let style = {};
    if (this.fullWidth) {
      style.width = "100%";
    }
    return (h("span", { class: `variant-${this.variant}`, style: style }, h("slot", null)));
  }
  static get is() { return "klevu-typography"; }
  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",
              "id": "src/components/klevu-typography/klevu-typography.tsx::KlevuTypographyVariant"
            }
          }
        },
        "required": true,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Variant of heading"
        },
        "attribute": "variant",
        "reflect": false
      },
      "fullWidth": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Display the text in full width. Usefull when typography needs to be used as a block element."
        },
        "attribute": "full-width",
        "reflect": false
      }
    };
  }
}
//# sourceMappingURL=klevu-typography.js.map
