import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, h, Prop } from "@stencil/core";
import { getProps } from "../../utils/utils";
import { HeroImageView } from "./sqm-hero-image-view";
/**
 * @uiName Hero Image
 * @uiOrder ["image-url", "image-alt", "min-height", "layout", "header", "description", "button-text", "button-link", "button-new-tab", "*"]
 * @validParents ["sqm-portal-container","sqm-brand", "div", "sqm-divided-layout", "sqb-program-section", "sqb-conditional-section", "sqm-titled-section", "sqm-tab", "template"]
 * @exampleGroup Common Components
 * @example Two Column Hero Image - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="columns" image-pos="right"></sqm-hero-image>
 * @example Overlay Hero Image - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="overlay" image-pos="center" button-link="https://www.example.com" button-new-tab button-text="Earn!" image-percentage="45" overlay-opacity=".5" padding-image="small" padding-text="xxxx-large"></sqm-hero-image>
 */
export class HeroImage {
  constructor() {
    /**
     * @uiName Overlay opacity
     * @uiGroup Style
     */
    this.overlayOpacity = "0.75";
    /**
     * @uiName Image layout
     * @uiType string
     * @uiEnum ["overlay", "columns"]
     * @uiEnumNames ["Overlay", "Two-column"]
     * @uiGroup Style
     */
    this.layout = "overlay";
    /**
     * @uiName Image percentage
     * @uiType number
     * @uiGroup Style
     */
    this.imagePercentage = 50;
    /**
     * @uiName Image position
     * @uiType string
     * @uiEnum ["left", "center", "right"]
     * @uiEnumNames ["Left", "Center", "Right"]
     * @uiGroup Style
     */
    this.imagePos = "center";
    /**
     * @uiName Image mobile position
     * @uiType string
     * @uiEnum ["top", "bottom"]
     * @uiEnumNames ["Top", "Bottom"]
     * @uiGroup Style
     */
    this.imageMobilePos = "top";
    /**
     * @uiName Open link in new tab
     * @default
     */
    this.buttonNewTab = false;
    /**
     * @uiName Text padding
     * @uiType string
     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
     * @uiGroup Style
     */
    this.paddingText = "xxxx-large";
    /**
     * @uiName Image padding
     * @uiType string
     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
     * @uiGroup Style
     */
    this.paddingImage = "none";
    /**
     * The type of the button that is used (primary or secondary).
     * @uiName Button Type
     * @uiType string
     * @uiEnum ["primary", "secondary"]
     * @uiEnumNames ["Primary", "Secondary"]
     * @uiGroup Style
     */
    this.buttonType = "primary";
    /**
     * Minimum height of the component in pixels. Reserves vertical space to prevent layout shift while the image loads.
     *
     * @uiName Minimum height (px)
     */
    this.minHeight = 400;
    /**
     * Alt text for the hero image (columns layout). Leave empty for decorative images.
     *
     * @uiName Image alt text
     */
    this.imageAlt = "";
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    return (h(HeroImageView, Object.assign({}, getProps(this)),
      h("slot", null)));
  }
  static get is() { return "sqm-hero-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": "Image",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "image-url",
      "reflect": false
    },
    "overlayColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Overlay color",
            "name": "uiName"
          }, {
            "text": "color",
            "name": "uiWidget"
          }, {
            "text": "color",
            "name": "format"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "overlay-color",
      "reflect": false
    },
    "overlayOpacity": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Overlay opacity",
            "name": "uiName"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "overlay-opacity",
      "reflect": false,
      "defaultValue": "\"0.75\""
    },
    "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": "Style",
            "name": "uiGroup"
          }],
        "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": "Style",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "background-color",
      "reflect": false
    },
    "layout": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"overlay\" | \"columns\"",
        "resolved": "\"columns\" | \"overlay\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Image layout",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"overlay\", \"columns\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"Overlay\", \"Two-column\"]",
            "name": "uiEnumNames"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "layout",
      "reflect": false,
      "defaultValue": "\"overlay\""
    },
    "imagePercentage": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Image percentage",
            "name": "uiName"
          }, {
            "text": "number",
            "name": "uiType"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "image-percentage",
      "reflect": false,
      "defaultValue": "50"
    },
    "imagePos": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"left\" | \"center\" | \"right\"",
        "resolved": "\"center\" | \"left\" | \"right\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Image position",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"left\", \"center\", \"right\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"Left\", \"Center\", \"Right\"]",
            "name": "uiEnumNames"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "image-pos",
      "reflect": false,
      "defaultValue": "\"center\""
    },
    "imageMobilePos": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"top\" | \"bottom\"",
        "resolved": "\"bottom\" | \"top\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Image mobile position",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"top\", \"bottom\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"Top\", \"Bottom\"]",
            "name": "uiEnumNames"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "image-mobile-pos",
      "reflect": false,
      "defaultValue": "\"top\""
    },
    "header": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "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": true,
      "docs": {
        "tags": [{
            "text": "Description",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": ""
      },
      "attribute": "description",
      "reflect": false
    },
    "buttonText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Button text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "button-text",
      "reflect": false
    },
    "buttonLink": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Button link",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "button-link",
      "reflect": false
    },
    "buttonNewTab": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Open link in new tab",
            "name": "uiName"
          }, {
            "text": undefined,
            "name": "default"
          }],
        "text": ""
      },
      "attribute": "button-new-tab",
      "reflect": false,
      "defaultValue": "false"
    },
    "paddingText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Spacing",
        "resolved": "\"large\" | \"medium\" | \"none\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\" | \"xxxx-large\"",
        "references": {
          "Spacing": {
            "location": "import",
            "path": "../../global/mixins"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Text padding",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
            "name": "uiEnumNames"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "padding-text",
      "reflect": false,
      "defaultValue": "\"xxxx-large\""
    },
    "paddingImage": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Spacing",
        "resolved": "\"large\" | \"medium\" | \"none\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\" | \"xxxx-large\"",
        "references": {
          "Spacing": {
            "location": "import",
            "path": "../../global/mixins"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Image padding",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
            "name": "uiEnumNames"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "padding-image",
      "reflect": false,
      "defaultValue": "\"none\""
    },
    "buttonType": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"primary\" | \"secondary\"",
        "resolved": "\"primary\" | \"secondary\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Button Type",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"primary\", \"secondary\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"Primary\", \"Secondary\"]",
            "name": "uiEnumNames"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": "The type of the button that is used (primary or secondary)."
      },
      "attribute": "button-type",
      "reflect": false,
      "defaultValue": "\"primary\""
    },
    "minHeight": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Minimum height (px)",
            "name": "uiName"
          }],
        "text": "Minimum height of the component in pixels. Reserves vertical space to prevent layout shift while the image loads."
      },
      "attribute": "min-height",
      "reflect": false,
      "defaultValue": "400"
    },
    "imageAlt": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Image alt text",
            "name": "uiName"
          }],
        "text": "Alt text for the hero image (columns layout). Leave empty for decorative images."
      },
      "attribute": "image-alt",
      "reflect": false,
      "defaultValue": "\"\""
    }
  }; }
}
