import { Component, h, Prop, State } from "@stencil/core";
import { withHooks } from "@saasquatch/stencil-hooks";
/**
 * @uiName Text
 * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-big-stat","span","sqm-text-span","sqb-program-section","sqb-conditional-section", "sqm-titled-section"]
 * @slots [{"name":"", "title":"Text"}]
 * @slotEditor richText
 * @canvasRenderer always-replace
 */
export class Text {
  constructor() {
    this.ignored = true;
    withHooks(this);
  }
  disconnectedCallback() { }
  componentWillLoad() { }
  render() {
    const vanillaStyle = `
    sqm-text {
      display: block;
      color: ${this.textColor || "var(--sqm-text)"};
    }

    sqm-text h1 {
      font-size: ${this.fontSize ? `${this.fontSize}px` : "var(--sl-font-size-xxx-large)"};
      font-weight: var(--sl-font-weight-semibold);
      color: ${this.textColor || "var(--sqm-text)"};
      margin: 0;
    }

    sqm-text h2 {
      font-size: ${this.fontSize ? `${this.fontSize}px` : "var(--sl-font-size-xx-large)"};
      font-weight: var(--sl-font-weight-semibold);
      color: ${this.textColor || "var(--sqm-text)"};
      margin: 0;
    }

    sqm-text h3 {
      font-size: ${this.fontSize ? `${this.fontSize}px` : "var(--sl-font-size-x-large)"};
      font-weight: var(--sl-font-weight-semibold);
      color: ${this.textColor || "var(--sqm-text)"};
      margin: 0;
    }

    sqm-text h4 {
      font-size: ${this.fontSize ? `${this.fontSize}px` : "var(--sl-font-size-large)"};
      font-weight: var(--sl-font-weight-bold);
      color: ${this.textColor || "var(--sqm-text)"};
      margin: 0;
    }

    sqm-text p {
      font-size: ${this.fontSize ? `${this.fontSize}px` : "var(--sl-font-size-medium)"};
      font-weight: var(--sl-font-weight-normal);
      color: ${this.textColor || "var(--sqm-text)"};
      margin: 0;
    }

    sqm-text sub {
      font-size: ${this.fontSize ? `${this.fontSize}px` : "var(--sl-font-size-small)"};
      font-weight: var(--sl-font-weight-normal);
      color: ${this.textColor || "var(--sqm-text)"};
      margin: 0;
    }
    `;
    return (h("div", null,
      h("style", null, vanillaStyle),
      h("slot", null)));
  }
  static get is() { return "sqm-text"; }
  static get properties() { return {
    "fontSize": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Font Size",
            "name": "uiName"
          }, {
            "text": "number",
            "name": "uiType"
          }],
        "text": "Font size in pixels"
      },
      "attribute": "font-size",
      "reflect": false
    },
    "textColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Text Color",
            "name": "uiName"
          }, {
            "text": "color",
            "name": "uiWidget"
          }, {
            "text": "color",
            "name": "format"
          }],
        "text": ""
      },
      "attribute": "text-color",
      "reflect": false
    }
  }; }
  static get states() { return {
    "ignored": {}
  }; }
}
