import { Component, Prop, h, Element, Host } from '@stencil/core';
let id = 0;
export class ScTabPanel {
  constructor() {
    this.componentId = `tab-panel-${++id}`;
    /** The tab panel's name. */
    this.name = '';
    /** When true, the tab panel will be shown. */
    this.active = false;
  }
  render() {
    // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels
    this.el.id = this.el.id || this.componentId;
    return (h(Host, { style: { display: this.active ? 'block' : 'none' } },
      h("div", { part: "base", class: "tab-panel", role: "tabpanel", "aria-hidden": this.active ? 'false' : 'true' },
        h("slot", null))));
  }
  static get is() { return "sc-tab-panel"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sc-tab-panel.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sc-tab-panel.css"]
  }; }
  static get properties() { return {
    "name": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The tab panel's name."
      },
      "attribute": "name",
      "reflect": true,
      "defaultValue": "''"
    },
    "active": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "When true, the tab panel will be shown."
      },
      "attribute": "active",
      "reflect": true,
      "defaultValue": "false"
    }
  }; }
  static get elementRef() { return "el"; }
}
