import { Component, h, Prop } from "@stencil/core";
import { getProps } from "../../utils/utils";
import { ImageView } from "./sqm-image-view";
/**
 * @uiName Image
 * @validParents ["sqm-brand","div","sqm-portal-container","sqm-divided-layout","sqm-titled-section", "sqb-program-section", "sqb-conditional-section", "sqm-tab"]
 * @exampleGroup Common Components
 * @example Image - <sqm-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000259/squatch-assets/tn47wOj.png" alignment="center"></sqm-image>
 */
export class Image {
  constructor() {
    /**
     * @uiName Position alignment
     * @uiType string
     * @uiEnum ["left", "center", "right"]
     * @uiEnumNames ["Left", "Center", "Right"]
     */
    this.alignment = "center";
  }
  render() {
    return h(ImageView, Object.assign({}, getProps(this)));
  }
  static get is() { return "sqm-image"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "imageUrl": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "ImageUpload",
            "name": "uiWidget"
          }, {
            "text": "url",
            "name": "format"
          }, {
            "text": undefined,
            "name": "required"
          }, {
            "text": "Image link",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "image-url",
      "reflect": false
    },
    "alignment": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"left\" | \"center\" | \"right\"",
        "resolved": "\"center\" | \"left\" | \"right\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Position alignment",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"left\", \"center\", \"right\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"Left\", \"Center\", \"Right\"]",
            "name": "uiEnumNames"
          }],
        "text": ""
      },
      "attribute": "alignment",
      "reflect": false,
      "defaultValue": "\"center\""
    },
    "backgroundColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Background color",
            "name": "uiName"
          }, {
            "text": "color",
            "name": "uiWidget"
          }, {
            "text": "color",
            "name": "format"
          }],
        "text": ""
      },
      "attribute": "background-color",
      "reflect": false
    },
    "minHeight": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Minimum height",
            "name": "uiName"
          }],
        "text": "(Optional) Helps with constraining the minimum image size. Can be a pixel value or a percentage i.e. \"500px\", \"33%\", etc."
      },
      "attribute": "min-height",
      "reflect": false
    },
    "width": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Width",
            "name": "uiName"
          }],
        "text": "(Optional) Constrains the width of the image. Can be a pixel value or a percentage i.e. \"500px\", \"33%\", etc."
      },
      "attribute": "width",
      "reflect": false
    }
  }; }
}
