import { Component, h, Prop, State } from "@stencil/core";
import { withHooks } from "@saasquatch/stencil-hooks";
import { TextSpanView } from "./sqm-text-span-view";
/**
 * @uiName Text Span
 * @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"]
 * @canvasRenderer always-replace
 */
export class TextSpan {
  constructor() {
    this.ignored = true;
    withHooks(this);
  }
  disconnectedCallback() { }
  componentWillLoad() { }
  render() {
    return (h(TextSpanView, { type: this.type, fontSize: this.fontSize, textColor: this.textColor }, this.text));
  }
  static get is() { return "sqm-text-span"; }
  static get properties() { return {
    "text": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "text",
      "reflect": false
    },
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"p\" | \"subtext\" | \"h1\" | \"h2\" | \"h3\" | \"h4\"",
        "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"p\" | \"subtext\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Type",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"p\", \"subtext\", \"h1\", \"h2\", \"h3\", \"h4\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"Paragraph\", \"Subtext\", \"Header 1\", \"Header 2\", \"Header 3\", \"Header 4\"]",
            "name": "uiEnumNames"
          }],
        "text": ""
      },
      "attribute": "type",
      "reflect": false
    },
    "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": {}
  }; }
}
