import { Component, h, Prop, State } from "@stencil/core";
import { withHooks } from "@saasquatch/stencil-hooks";
import { PortalContainerView } from "./sqm-portal-container-view";
import { getProps } from "../../utils/utils";
/**
 * @uiName Container
 * @slots [{"name":"", "title":"Widget Content"}]
 * @exampleGroup Layout
 * @example Row Layout Container - <sqm-portal-container direction="row" padding="none" gap="xxx-large" display="flex" max-width="100%"><p>Add your row content!</p></sqm-portal-container>
 * @example Column Layout Container - <sqm-portal-container direction="column" padding="none" gap="xxx-large" display="grid" max-width="100%"><p>Add your column content!</p></sqm-portal-container>
 */
export class PortalContainer {
  constructor() {
    this.ignored = true;
    /**
     * @uiName Direction
     * @uiType string
     * @uiEnum ["row", "column"]
     * @uiEnumNames ["Row", "Column"]
     */
    this.direction = "column";
    /**
     * @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 = "xxx-large";
    /**
     * @uiName Display
     * @uiType string
     * @uiEnum ["grid", "flex"]
     * @uiEnumNames ["Grid", "Flex"]
     */
    this.display = "grid";
    /**
     * @uiName Maximum width
     */
    this.maxWidth = "100%";
    /**
     * @uiName Flex wrap behavior
     * @uiType string
     * @uiEnum ["wrap", "nowrap"]
     * @uiEnumNames ["Wrap", "No Wrap"]
     */
    this.flexWrap = "wrap";
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    return (h(PortalContainerView, Object.assign({}, getProps(this)),
      h("slot", null)));
  }
  static get is() { return "sqm-portal-container"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "direction": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"row\" | \"column\"",
        "resolved": "\"column\" | \"row\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Direction",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"row\", \"column\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"Row\", \"Column\"]",
            "name": "uiEnumNames"
          }],
        "text": ""
      },
      "attribute": "direction",
      "reflect": false,
      "defaultValue": "\"column\""
    },
    "padding": {
      "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": "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": ""
      },
      "attribute": "padding",
      "reflect": false
    },
    "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": "\"xxx-large\""
    },
    "minWidth": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Minimum width",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "min-width",
      "reflect": false
    },
    "display": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"grid\" | \"flex\"",
        "resolved": "\"flex\" | \"grid\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Display",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"grid\", \"flex\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"Grid\", \"Flex\"]",
            "name": "uiEnumNames"
          }],
        "text": ""
      },
      "attribute": "display",
      "reflect": false,
      "defaultValue": "\"grid\""
    },
    "justifyContent": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "| \"start\"\n    | \"center\"\n    | \"end\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\"",
        "resolved": "\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Justify content",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"start\", \"center\", \"end\", \"space-between\", \"space-around\", \"space-evenly\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"Start\", \"Center\", \"End\", \"Space Between\", \"Space Around\", \"Space Evenly\"]",
            "name": "uiEnumNames"
          }],
        "text": "Define how this container distributes its contents along the main-axis."
      },
      "attribute": "justify-content",
      "reflect": false
    },
    "maxWidth": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Maximum width",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "max-width",
      "reflect": false,
      "defaultValue": "\"100%\""
    },
    "flexWrap": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Flex wrap behavior",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"wrap\", \"nowrap\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"Wrap\", \"No Wrap\"]",
            "name": "uiEnumNames"
          }],
        "text": ""
      },
      "attribute": "flex-wrap",
      "reflect": false,
      "defaultValue": "\"wrap\""
    },
    "center": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Center content",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "center",
      "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": "string",
            "name": "uiType"
          }],
        "text": ""
      },
      "attribute": "background-color",
      "reflect": false
    }
  }; }
  static get states() { return {
    "ignored": {}
  }; }
}
