import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, h, Prop, State } from "@stencil/core";
import { getProps } from "../../utils/utils";
import { ReferralCardView } from "./sqm-referral-card-view";
import { useChildElements } from "../../tables/useChildElements";
/**
 *
 * @uiName Referral Card
 * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqb-program-section","sqb-conditional-section", "sqm-hero"]
 * @validChildren ["div","sqm-portal-container","p","sqm-timeline","h1","h2","h3","h5","h4","sqm-pagination","sqm-qr-code","sqm-referral-code","sqm-referral-codes","sqm-share-code","sqm-share-link","sqm-text","span", "sqm-portal-footer", "sqm-titled-section"]
 * @exampleGroup Referrals
 * @slots [{"name":"left", "title":"Left Content"},{"name":"right", "title":"Right Content"},{"name":"header", "title":"Header Content"},{"name":"footer", "title":"Footer Content"}]
 * @example Referral Card - <sqm-referral-card vertical-alignment="start"> <sqm-portal-container gap="large" slot="left" direction="column" display="grid" max-width="100%" padding="none" > <sqm-text >They’ll get a $50 credit towards a new account and you’ll get: </sqm-text> <sqm-timeline icon="circle"> <sqm-timeline-entry reward="$50" unit="visa giftcard" desc="Your friend purchases a Business plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$200" unit="visa giftcard" desc="Our sales team qualifies your friend as a good fit for our Enterprise plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$1000" unit="visa giftcard" desc="Your friend purchases an Enterprise plan" icon="circle" > </sqm-timeline-entry> </sqm-timeline> </sqm-portal-container> <sqm-portal-container gap="large" slot="right" direction="column" display="grid" max-width="100%" padding="none" > <sqm-text>Choose how you want to share: </sqm-text> <sqm-text> <sub>Your unique referral link:</sub> <sqm-share-link tooltip-text="Copied to Clipboard" tooltip-lifespan="1000" > </sqm-share-link> </sqm-text> <sqm-portal-container gap="x-small" direction="column" display="grid" max-width="100%" padding="none" > <sqm-share-button medium="email" icon-slot="prefix" size="medium" type="default" > Share via email </sqm-share-button> <sqm-share-button medium="linkedin" icon-slot="prefix" size="medium" type="default" > Share on LinkedIn </sqm-share-button> <sqm-share-button medium="twitter" icon-slot="prefix" size="medium" type="default" > Share on Twitter </sqm-share-button> </sqm-portal-container> </sqm-portal-container> </sqm-referral-card>
 * */
export class ReferralCard {
  constructor() {
    this.ignored = true;
    /**
     * @uiName Vertical alignment
     * @uiType string
     * @uiEnum ["start", "center", "end"]
     * @uiEnumNames ["Top", "Center", "Bottom"]
     */
    this.verticalAlignment = "start";
    /**
     * @uiName Hide border
     * @uiType boolean
     */
    this.hideBorder = false;
    /**
     * @uiName Top padding
     * @uiGroup Padding
     * @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"]
     */
    this.paddingTop = "large";
    /**
     * @uiName Right padding
     * @uiGroup Padding
     * @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"]
     */
    this.paddingRight = "large";
    /**
     * @uiName Bottom padding
     * @uiGroup Padding
     * @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"]
     */
    this.paddingBottom = "large";
    /**
     * @uiName Left padding
     * @uiGroup Padding
     * @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"]
     */
    this.paddingLeft = "large";
    /**
     * @uiName Limit width
     * @uiType boolean
     */
    this.limitWidth = false;
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    const slots = {
      left: h("slot", { name: "left" }),
      right: h("slot", { name: "right" }),
      header: h("slot", { name: "header" }),
      footer: h("slot", { name: "footer" }),
    };
    const children = useChildElements();
    const hasHeader = children.findIndex((child) => child.slot === "header") > -1;
    const hasFooter = children.findIndex((child) => child.slot === "footer") > -1;
    return (h(ReferralCardView, Object.assign({}, getProps(this), { slots: slots, hasHeader: hasHeader, hasFooter: hasFooter }),
      h("slot", null)));
  }
  static get is() { return "sqm-referral-card"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "verticalAlignment": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"start\" | \"center\" | \"end\"",
        "resolved": "\"center\" | \"end\" | \"start\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Vertical alignment",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"start\", \"center\", \"end\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"Top\", \"Center\", \"Bottom\"]",
            "name": "uiEnumNames"
          }],
        "text": ""
      },
      "attribute": "vertical-alignment",
      "reflect": false,
      "defaultValue": "\"start\""
    },
    "hideBorder": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Hide border",
            "name": "uiName"
          }, {
            "text": "boolean",
            "name": "uiType"
          }],
        "text": ""
      },
      "attribute": "hide-border",
      "reflect": false,
      "defaultValue": "false"
    },
    "paddingTop": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Top padding",
            "name": "uiName"
          }, {
            "text": "Padding",
            "name": "uiGroup"
          }, {
            "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": ""
      },
      "attribute": "padding-top",
      "reflect": false,
      "defaultValue": "\"large\""
    },
    "paddingRight": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Right padding",
            "name": "uiName"
          }, {
            "text": "Padding",
            "name": "uiGroup"
          }, {
            "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": ""
      },
      "attribute": "padding-right",
      "reflect": false,
      "defaultValue": "\"large\""
    },
    "paddingBottom": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Bottom padding",
            "name": "uiName"
          }, {
            "text": "Padding",
            "name": "uiGroup"
          }, {
            "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": ""
      },
      "attribute": "padding-bottom",
      "reflect": false,
      "defaultValue": "\"large\""
    },
    "paddingLeft": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Left padding",
            "name": "uiName"
          }, {
            "text": "Padding",
            "name": "uiGroup"
          }, {
            "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": ""
      },
      "attribute": "padding-left",
      "reflect": false,
      "defaultValue": "\"large\""
    },
    "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": "string",
            "name": "uiType"
          }],
        "text": ""
      },
      "attribute": "background-color",
      "reflect": false
    },
    "borderColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Border color",
            "name": "uiName"
          }, {
            "text": "color",
            "name": "uiWidget"
          }, {
            "text": "color",
            "name": "format"
          }],
        "text": "Border color of container"
      },
      "attribute": "border-color",
      "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": "Color of the text and copy icon"
      },
      "attribute": "text-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": "uiType"
          }],
        "text": "The border radius (in pixels)"
      },
      "attribute": "border-radius",
      "reflect": false
    },
    "limitWidth": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Limit width",
            "name": "uiName"
          }, {
            "text": "boolean",
            "name": "uiType"
          }],
        "text": ""
      },
      "attribute": "limit-width",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
  static get states() { return {
    "ignored": {}
  }; }
}
