import { Component, Element, h, Prop, State } from '@stencil/core';
export class ScBreadcrumb {
  constructor() {
    /** The `rel` attribute to use on the link. Only used when `href` is set. */
    this.rel = 'noreferrer noopener';
  }
  handleSlotChange() {
    this.hasPrefix = !!this.el.querySelector('[slot="prefix"]');
    this.hasSuffix = !!this.el.querySelector('[slot="suffix"]');
  }
  render() {
    const Tag = this.href ? 'a' : 'div';
    return (h("div", { part: "base", class: {
        'breadcrumb-item': true,
        'breadcrumb-item--has-prefix': this.hasPrefix,
        'breadcrumb-item--has-suffix': this.hasSuffix,
      } },
      h("span", { part: "prefix", class: "breadcrumb-item__prefix" },
        h("slot", { name: "prefix" })),
      h(Tag, { part: "label", class: "breadcrumb-item__label breadcrumb-item__label--link", href: this.href, target: this.target, rel: this.rel },
        h("slot", null)),
      h("span", { part: "suffix", class: "breadcrumb-item__suffix" },
        h("slot", { name: "suffix", onSlotchange: () => this.handleSlotChange() })),
      h("span", { part: "separator", class: "breadcrumb-item__separator", "aria-hidden": "true" },
        h("slot", { name: "separator", onSlotchange: () => this.handleSlotChange() },
          h("sc-icon", { name: "chevron-right" })))));
  }
  static get is() { return "sc-breadcrumb"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sc-breadcrumb.css"]
  }; }
  static get styleUrls() { return {
    "$": ["sc-breadcrumb.css"]
  }; }
  static get properties() { return {
    "href": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead."
      },
      "attribute": "href",
      "reflect": false
    },
    "target": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'_blank' | '_parent' | '_self' | '_top'",
        "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Tells the browser where to open the link. Only used when `href` is set."
      },
      "attribute": "target",
      "reflect": false
    },
    "rel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The `rel` attribute to use on the link. Only used when `href` is set."
      },
      "attribute": "rel",
      "reflect": false,
      "defaultValue": "'noreferrer noopener'"
    }
  }; }
  static get states() { return {
    "hasPrefix": {},
    "hasSuffix": {}
  }; }
  static get elementRef() { return "el"; }
}
