import { Component, h, Prop, State } from "@stencil/core";
import { withHooks } from "@saasquatch/stencil-hooks";
import { StatContainerView } from "./sqm-stat-container-view";
import { getProps } from "../../utils/utils";
/**
 * @uiName Stat Container
 * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero", "sqb-program-section", "sqb-conditional-section"]
 * @validChildren ["sqm-big-stat"]
 * @slots [{"name":"", "title":"Stats"}]
 * @exampleGroup Statistics
 * @example Container with Three Stats - <sqm-stat-container space="xxx-large" display="flex"><sqm-big-stat flex-reverse="true" alignment="left" stat-type="/rewardBalance/CREDIT/POINT/value/global"><p>Points Balance</p></sqm-big-stat><sqm-big-stat flex-reverse="true" alignment="left" stat-type="/integrationRewardsCountFiltered/AVAILABLE/global"><p>Giftcards Earned</p></sqm-big-stat><sqm-big-stat flex-reverse="true" alignment="left" stat-type="/referralsCount"><p>Referrals</p></sqm-big-stat></sqm-stat-container>
 */
export class StatContainer {
  constructor() {
    this.ignored = true;
    /**
     * @uiName Space between stats
     * @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"]
     */
    this.space = "xxx-large";
    /**
     * @undocumented
     * @uiName Display
     * @uiType string
     * @uiEnum ["grid", "flex"]
     * @uiEnumNames ["Grid", "Flex"]
     */
    this.display = "flex";
    /**
     * Controls the alignment of the flexbox
     *
     * @uiName Alignment
     * @uiType string
     * @uiEnum ["left", "right", "center"]
     * @uiEnumNames ["Left", "Right", "Center"]
     */
    this.alignment = "center";
    /**
     * @uiName Gap
     * @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"]
     */
    this.gap = "x-large";
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    return (h(StatContainerView, Object.assign({}, getProps(this)),
      h("slot", null)));
  }
  static get is() { return "sqm-stat-container"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "space": {
      "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": "Space between stats",
            "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": ""
      },
      "attribute": "space",
      "reflect": false,
      "defaultValue": "\"xxx-large\""
    },
    "display": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"grid\" | \"flex\"",
        "resolved": "\"flex\" | \"grid\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "undocumented"
          }, {
            "text": "Display",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"grid\", \"flex\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"Grid\", \"Flex\"]",
            "name": "uiEnumNames"
          }],
        "text": ""
      },
      "attribute": "display",
      "reflect": false,
      "defaultValue": "\"flex\""
    },
    "hideBorder": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Hide border",
            "name": "uiName"
          }, {
            "text": "boolean",
            "name": "uiType"
          }],
        "text": "Hide the seperating border between stats"
      },
      "attribute": "hide-border",
      "reflect": false
    },
    "alignment": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"left\" | \"right\" | \"center\"",
        "resolved": "\"center\" | \"left\" | \"right\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Alignment",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"left\", \"right\", \"center\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"Left\", \"Right\", \"Center\"]",
            "name": "uiEnumNames"
          }],
        "text": "Controls the alignment of the flexbox"
      },
      "attribute": "alignment",
      "reflect": false,
      "defaultValue": "\"center\""
    },
    "gap": {
      "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": "Gap",
            "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": ""
      },
      "attribute": "gap",
      "reflect": false,
      "defaultValue": "\"x-large\""
    }
  }; }
  static get states() { return {
    "ignored": {}
  }; }
}
