import { Component, h, Prop, Event, Element, State, Method } from '@stencil/core';
let id = 0;
export class ScTab {
  constructor() {
    this.componentId = `tab-${++id}`;
    /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */
    this.panel = '';
    /** Draws the tab in an active state. */
    this.active = false;
    /** Draws the tab in a disabled state. */
    this.disabled = false;
    this.hasPrefix = false;
    this.hasSuffix = false;
  }
  /** Sets focus to the tab. */
  async triggerFocus(options) {
    this.tab.focus(options);
  }
  /** Removes focus from the tab. */
  async triggerBlur() {
    this.tab.blur();
  }
  handleSlotChange() {
    this.hasPrefix = !!this.el.querySelector('[slot="prefix"]');
    this.hasSuffix = !!this.el.querySelector('[slot="suffix"]');
  }
  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;
    const Tag = this.href ? 'a' : 'div';
    return (h(Tag, { part: `base ${this.active ? `active` : ``}`, href: this.href, class: {
        'tab': true,
        'tab--active': this.active,
        'tab--disabled': this.disabled,
        'tab--has-prefix': this.hasPrefix,
        'tab--has-suffix': this.hasSuffix,
      }, ref: el => (this.tab = el), role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0' },
      h("span", { part: "prefix", class: "tab__prefix" },
        h("slot", { onSlotchange: () => this.handleSlotChange(), name: "prefix" })),
      h("div", { class: "tab__content", part: "content" },
        h("slot", null)),
      h("span", { part: "suffix", class: "tab__suffix" },
        h("slot", { onSlotchange: () => this.handleSlotChange(), name: "suffix" })),
      h("slot", { name: "suffix" }, !!this.count && (h("div", { class: "tab__counter", part: "counter" }, this.count)))));
  }
  static get is() { return "sc-tab"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sc-tab.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sc-tab.css"]
  }; }
  static get properties() { return {
    "panel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The name of the tab panel the tab will control. The panel must be located in the same tab group."
      },
      "attribute": "panel",
      "reflect": true,
      "defaultValue": "''"
    },
    "href": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "href",
      "reflect": true
    },
    "active": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Draws the tab in an active state."
      },
      "attribute": "active",
      "reflect": true,
      "defaultValue": "false"
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Draws the tab in a disabled state."
      },
      "attribute": "disabled",
      "reflect": true,
      "defaultValue": "false"
    },
    "count": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "count",
      "reflect": false
    }
  }; }
  static get states() { return {
    "hasPrefix": {},
    "hasSuffix": {}
  }; }
  static get events() { return [{
      "method": "scClose",
      "name": "scClose",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Close event"
      },
      "complexType": {
        "original": "void",
        "resolved": "void",
        "references": {}
      }
    }]; }
  static get methods() { return {
    "triggerFocus": {
      "complexType": {
        "signature": "(options?: FocusOptions) => Promise<void>",
        "parameters": [{
            "tags": [],
            "text": ""
          }],
        "references": {
          "Promise": {
            "location": "global"
          },
          "FocusOptions": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "Sets focus to the tab.",
        "tags": []
      }
    },
    "triggerBlur": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "Removes focus from the tab.",
        "tags": []
      }
    }
  }; }
  static get elementRef() { return "el"; }
}
