import { Component, h, Prop } from "@stencil/core";
import { withHooks } from "@saasquatch/stencil-hooks";
import { DividedLayoutView } from "./sqm-divided-layout-view";
import { getProps } from "../../utils/utils";
/**
 * Shows it's children as either a row or a column, with a division in between them.
 * Spacing is left up to the child
 *
 * @uiName Divided Layout
 * @validParents ["sqm-brand","sqm-portal-container","div","sqm-popup-container","sqm-hero","sqm-referral-card","sqm-titled-section","sqb-program-section","sqb-conditional-section", "sqm-divided-layout"]
 * @exampleGroup Layout
 * @slots [{"name":"", "title":"Layout Content"}]
 */
export class DividedLayout {
  constructor() {
    /**
     * @undocumented
     * Uses Shorthand CSS border syntax allowing specification of thickness, fill style and color.
     * @uiName Border style
     */
    this.dividerStyle = "var(--sqm-border-thickness) solid var(--sqm-border-color)";
    /**
     * Background color of the divider
     * @uiName Background Color
     * @uiWidget color
     */
    this.backgroundColor = "#FFFFFF";
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    return (h(DividedLayoutView, Object.assign({}, getProps(this)),
      h("slot", null)));
  }
  static get is() { return "sqm-divided-layout"; }
  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
    },
    "contentAreaWidth": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string | null",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Content Area Width",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }],
        "text": "Overrides max-width of content area"
      },
      "attribute": "content-area-width",
      "reflect": false
    },
    "dividerStyle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Uses Shorthand CSS border syntax allowing specification of thickness, fill style and color.",
            "name": "undocumented"
          }, {
            "text": "Border style",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "divider-style",
      "reflect": false,
      "defaultValue": "\"var(--sqm-border-thickness) solid var(--sqm-border-color)\""
    },
    "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": "Background color of the divider"
      },
      "attribute": "background-color",
      "reflect": false,
      "defaultValue": "\"#FFFFFF\""
    },
    "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 of the divider (defaults to default text color if none is set)"
      },
      "attribute": "border-color",
      "reflect": false
    }
  }; }
}
