import { h, Component, Prop } from "@stencil/core";
import PopupContainerView from "./sqm-popup-container-view";
import { withHooks } from "@saasquatch/stencil-hooks";
import { usePopupContainer } from "./usePopupContainer";
import { getProps } from "../../utils/utils";
/**
 * @uiName Popup Container
 * @slots [{"name":"","title":"Content"}]
 * @canvasRenderer always-replace
 */
export class PopupContainer {
  constructor() {
    /**
     * Text at the bottom of the popup
     *
     * @uiName "Powered by" text
     */
    this.poweredByText = "Powered By";
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    const thisProps = getProps(this);
    return h(PopupContainerView, Object.assign({}, usePopupContainer(thisProps)));
  }
  static get is() { return "sqm-popup-container"; }
  static get originalStyleUrls() { return {
    "$": ["sqm-popup-container.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sqm-popup-container.css"]
  }; }
  static get properties() { return {
    "poweredBy": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Show powered by",
            "name": "uiName"
          }, {
            "text": "[\"CUSTOM_BRANDING\"]",
            "name": "requiredFeatures"
          }, {
            "text": "<div>Integrate your brand identity further by removing impact.com\u2019s branding from your widget. Contact <a href=\"mailto:saasquatch-support%40impact.com?subject=Next steps for Custom Branding feature&body=Hi Support Team, %0D%0A%0D%0A I am interested in learning more about how Custom Branding can support the growth of our referral program. Please connect me with a program strategy manager to discuss this feature further, and determine the next steps.%0D%0A%0D%0A%0D%0AThank you,%0D%0A[Add your name here]\">Support</a> to upgrade your plan</div>",
            "name": "featureTooltip"
          }],
        "text": "Show Powered by Impact.com link"
      },
      "attribute": "powered-by",
      "reflect": false
    },
    "closeButton": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Show close button",
            "name": "uiName"
          }],
        "text": "Display a close button on the popup"
      },
      "attribute": "close-button",
      "reflect": false
    },
    "closeButtonText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Close button text",
            "name": "uiName"
          }],
        "text": "Text inside the close button"
      },
      "attribute": "close-button-text",
      "reflect": false
    },
    "poweredByText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "\"Powered by\" text",
            "name": "uiName"
          }],
        "text": "Text at the bottom of the popup"
      },
      "attribute": "powered-by-text",
      "reflect": false,
      "defaultValue": "\"Powered By\""
    },
    "embedPadding": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"none\" | \"small\" | \"medium\" | \"large\"",
        "resolved": "\"large\" | \"medium\" | \"none\" | \"small\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Embed padding",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"none\", \"small\", \"medium\", \"large\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"None\", \"Small\", \"Medium\", \"Large\"]",
            "name": "uiEnumNames"
          }],
        "text": "Specify padding on the popup contents when in embedded mode"
      },
      "attribute": "embed-padding",
      "reflect": false
    },
    "popupPadding": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"none\" | \"small\" | \"medium\" | \"large\"",
        "resolved": "\"large\" | \"medium\" | \"none\" | \"small\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Popup padding",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"none\", \"small\", \"medium\", \"large\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"None\", \"Small\", \"Medium\", \"Large\"]",
            "name": "uiEnumNames"
          }],
        "text": "Specify padding on the popup contents when in popup mode"
      },
      "attribute": "popup-padding",
      "reflect": false
    }
  }; }
}
