import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, h, Prop } from "@stencil/core";
import { getProps } from "../../utils/utils";
import { ProgramExplainerStepView } from "./sqm-program-explainer-step-view";
/**
 * @uiName Program Explainer Step
 * @exampleGroup Common Components
 * @example Program Explainer Step - <sqm-program-explainer-step description="Explore and use our product while earning points in the process!" header="Earn points" icon="cash-stack"></sqm-program-explainer-step>
 * @validParents ["sqm-program-explainer"]
 */
export class ProgramExplainerStep {
  constructor() {
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    return h(ProgramExplainerStepView, Object.assign({}, getProps(this)));
  }
  static get is() { return "sqm-program-explainer-step"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "header": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Title",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "header",
      "reflect": false
    },
    "description": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Description",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": ""
      },
      "attribute": "description",
      "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
    },
    "backgroundColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Background color",
            "name": "uiName"
          }, {
            "text": "color",
            "name": "uiWidget"
          }, {
            "text": "color",
            "name": "format"
          }],
        "text": ""
      },
      "attribute": "background-color",
      "reflect": false
    },
    "borderRadius": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Border radius",
            "name": "uiName"
          }, {
            "text": "number",
            "name": "type"
          }],
        "text": "Amount in pixels"
      },
      "attribute": "border-radius",
      "reflect": false
    },
    "iconBackgroundColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Icon Background color",
            "name": "uiName"
          }, {
            "text": "color",
            "name": "uiWidget"
          }, {
            "text": "color",
            "name": "format"
          }],
        "text": ""
      },
      "attribute": "icon-background-color",
      "reflect": false
    },
    "iconColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Icon color",
            "name": "uiName"
          }, {
            "text": "color",
            "name": "uiWidget"
          }, {
            "text": "color",
            "name": "format"
          }],
        "text": ""
      },
      "attribute": "icon-color",
      "reflect": false
    },
    "imageUrl": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Image URL",
            "name": "uiName"
          }, {
            "text": "imageUpload",
            "name": "uiWidget"
          }, {
            "text": "url",
            "name": "format"
          }],
        "text": "Displayed in place of an icon"
      },
      "attribute": "image-url",
      "reflect": false
    },
    "icon": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Icon",
            "name": "uiName"
          }],
        "text": "Full list of valid icon names available in the [Shoelace Icon Library](https://shoelace.style/components/icon). This value is case sensitive."
      },
      "attribute": "icon",
      "reflect": false
    }
  }; }
}
