import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, h, Prop } from "@stencil/core";
import { useRequestRerender } from "../../tables/re-render";
import { TabView } from "./sqm-tab-view";
/**
 * @uiName Tab
 * @slots [{"name":"", "title":"Tab Content"}]
 * @validParents ["sqm-tabs"]
 * @exampleGroup Layout
 * @example Tab - <sqm-tab header="Example"><p>This is an example tab. Add your own content here.</p></sqm-tab>
 */
export class Tab {
  constructor() {
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    useRequestRerender([this.header]);
    return (h(TabView, null,
      h("slot", null)));
  }
  static get is() { return "sqm-tab"; }
  static get properties() { return {
    "header": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Tab title",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "header",
      "reflect": false
    }
  }; }
}
