import { Component, h, Fragment, Prop, Element } from '@stencil/core';
export class ScBreadcrumbs {
  constructor() {
    /**
     * The label to use for the breadcrumb control. This will not be shown, but it will be announced by screen readers and
     * other assistive devices.
     */
    this.label = 'Breadcrumb';
  }
  // Generates a clone of the separator element to use for each breadcrumb item
  getSeparator() {
    const slotted = this.el.shadowRoot.querySelector('slot[name=separator]');
    const separator = slotted.assignedElements({ flatten: true })[0];
    // Clone it, remove ids, and slot it
    const clone = separator.cloneNode(true);
    [clone, ...clone.querySelectorAll('[id]')].forEach(el => el.removeAttribute('id'));
    clone.slot = 'separator';
    return clone;
  }
  handleSlotChange() {
    const slotted = this.el.shadowRoot.querySelector('.breadcrumb slot');
    const items = slotted.assignedElements().filter(node => {
      return node.nodeName === 'CE-BREADCRUMB';
    });
    items.forEach((item, index) => {
      // Append separators to each item if they don't already have one
      const separator = item.querySelector('[slot="separator"]');
      if (separator === null) {
        item.append(this.getSeparator());
      }
      // The last breadcrumb item is the "current page"
      if (index === items.length - 1) {
        item.setAttribute('aria-current', 'page');
      }
      else {
        item.removeAttribute('aria-current');
      }
    });
  }
  render() {
    return (h(Fragment, null,
      h("nav", { part: "base", class: "breadcrumb", "aria-label": this.label },
        h("slot", { onSlotchange: () => this.handleSlotChange() })),
      h("div", { hidden: true, "aria-hidden": "true" },
        h("slot", { name: "separator" },
          h("sc-icon", { name: "chevron-right" })))));
  }
  static get is() { return "sc-breadcrumbs"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sc-breadcrumbs.css"]
  }; }
  static get styleUrls() { return {
    "$": ["sc-breadcrumbs.css"]
  }; }
  static get properties() { return {
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The label to use for the breadcrumb control. This will not be shown, but it will be announced by screen readers and\nother assistive devices."
      },
      "attribute": "label",
      "reflect": false,
      "defaultValue": "'Breadcrumb'"
    }
  }; }
  static get elementRef() { return "el"; }
}
