import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
import { d as defineCustomElement$2 } from './sc-icon2.js';

const scBreadcrumbsCss = ":host{display:block}.breadcrumb{display:flex;align-items:center;flex-wrap:wrap}";

const ScBreadcrumbs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    /**
     * 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", { part: "separator", hidden: true, "aria-hidden": "true" }, h("slot", { name: "separator" }, h("sc-icon", { name: "chevron-right" })))));
  }
  get el() { return this; }
  static get style() { return scBreadcrumbsCss; }
}, [1, "sc-breadcrumbs", {
    "label": [1]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["sc-breadcrumbs", "sc-icon"];
  components.forEach(tagName => { switch (tagName) {
    case "sc-breadcrumbs":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ScBreadcrumbs$1);
      }
      break;
    case "sc-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}
defineCustomElement$1();

const ScBreadcrumbs = ScBreadcrumbs$1;
const defineCustomElement = defineCustomElement$1;

export { ScBreadcrumbs, defineCustomElement };
