import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, h, Prop } from "@stencil/core";
import { getProps } from "../../utils/utils";
import { PortalSectionView } from "./sqm-portal-section-view";
/**
 * @uiName Titled Section
 * @validParents ["sqm-portal-container","div","sqm-divided-layout","template","sqm-hero","sqm-tab", "sqm-referred-registration", "sqb-program-section","sqb-conditional-section", "sqm-instant-access-registration", "sqm-referral-card", "sqm-referred-registration"]
 * @validChildren ["div","sqm-portal-container","p","sqm-timeline","h1","h2","h3","h5","h4","sqm-qr-code","sqm-referral-code","sqm-referral-codes","sqm-share-code","sqm-share-link","sqm-text","span", "sqm-user-name"]
 * @slots [{"name":"label", "title":"Label"},{"name":"content", "title":"Content"}]
 * @exampleGroup Layout
 * @example Titled Section - <sqm-titled-section text-align="center" label-margin="small" padding="none"><div slot="label"><h2>Section Label</h2></div><div slot="content"><p>Add your section content here!</p></div></sqm-titled-section>
 */
export class TitledSection {
  constructor() {
    /**
     * @uiName Text alignment
     * @uiType string
     * @uiEnum ["left", "center", "right"]
     * @uiEnumNames ["Left", "Center", "Right"]
     */
    this.textAlign = "left";
    /**
     * Margin applied to the bottom of the label slot
     *
     * @uiName Label bottom margin
     * @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.labelMargin = "small";
    /**
     * Padding applied to all 4 sides of the container
     *
     * @uiName Section 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"]
     */
    this.padding = "none";
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    const label = h("slot", { name: "label" }, this.label);
    const content = h("slot", { name: "content" });
    return h(PortalSectionView, Object.assign({}, { ...getProps(this), label, content }));
  }
  static get is() { return "sqm-titled-section"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string | VNode",
        "resolved": "VNode | string",
        "references": {
          "VNode": {
            "location": "import",
            "path": "@stencil/core"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Label",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }],
        "text": "Text value shown when there is no label slot declared."
      },
      "attribute": "label",
      "reflect": false
    },
    "textAlign": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"left\" | \"center\" | \"right\"",
        "resolved": "\"center\" | \"left\" | \"right\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Text alignment",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"left\", \"center\", \"right\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"Left\", \"Center\", \"Right\"]",
            "name": "uiEnumNames"
          }],
        "text": ""
      },
      "attribute": "text-align",
      "reflect": false,
      "defaultValue": "\"left\""
    },
    "labelMargin": {
      "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": "Label bottom margin",
            "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": "Margin applied to the bottom of the label slot"
      },
      "attribute": "label-margin",
      "reflect": false,
      "defaultValue": "\"small\""
    },
    "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": "Section 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": "Padding applied to all 4 sides of the container"
      },
      "attribute": "padding",
      "reflect": false,
      "defaultValue": "\"none\""
    }
  }; }
}
