import { n as p, C as h } from "../chunks/lib-cortex-element.CVMmyPMC.js";
import { c as d } from "../chunks/component.styles.CRO4Odto.js";
import { c as m } from "../chunks/custom-element.L4WJXn1j.js";
import { L as u } from "../chunks/i18n.BABe9hN4.js";
import { i as f, x as b } from "../chunks/lit-element.jLBm65_O.js";
import { e as c } from "../chunks/query.BBf1UFkC.js";
import g from "./icon.js";
const S = f`.breadcrumb{flex-wrap:wrap;align-items:center;display:flex}`;
var x = Object.defineProperty, v = Object.getOwnPropertyDescriptor, l = (s, e, r, t) => {
  for (var a = t > 1 ? void 0 : t ? v(e, r) : e, i = s.length - 1, n; i >= 0; i--)
    (n = s[i]) && (a = (t ? n(e, r, a) : n(a)) || a);
  return t && a && x(e, r, a), a;
};
let o = class extends h {
  constructor() {
    super(...arguments), this.localize = new u(this), this.separatorDir = this.localize.dir(), this.label = "";
  }
  // Generates a clone of the separator element to use for each breadcrumb item
  getSeparator() {
    const e = this.separatorSlot.assignedElements({
      flatten: !0
    })[0].cloneNode(!0);
    return [e, ...e.querySelectorAll("[id]")].forEach(
      (r) => r.removeAttribute("id")
    ), e.setAttribute("data-default", ""), e.slot = "separator", e;
  }
  handleSlotChange() {
    const s = [
      ...this.defaultSlot.assignedElements({ flatten: !0 })
    ].filter(
      (e) => e.tagName.toLowerCase() === "cx-breadcrumb-item"
    );
    s.forEach((e, r) => {
      const t = e.querySelector('[slot="separator"]');
      t === null ? e.append(this.getSeparator()) : t.hasAttribute("data-default") && t.replaceWith(this.getSeparator()), r === s.length - 1 ? e.setAttribute("aria-current", "page") : e.removeAttribute("aria-current");
    });
  }
  render() {
    return this.separatorDir !== this.localize.dir() && (this.separatorDir = this.localize.dir(), this.updateComplete.then(() => this.handleSlotChange())), b`<nav part="base" class="breadcrumb" aria-label=${this.label}><slot @slotchange=${this.handleSlotChange}></slot></nav><span hidden aria-hidden="true" style="display: none"><slot name="separator" @slotchange=${this.handleSlotChange}><cx-icon name=${this.localize.dir() === "rtl" ? "chevron_left" : "chevron_right"}></cx-icon></slot></span>`;
  }
};
o.styles = [d, S];
o.dependencies = { "cx-icon": g };
l([
  c("slot")
], o.prototype, "defaultSlot", 2);
l([
  c('slot[name="separator"]')
], o.prototype, "separatorSlot", 2);
l([
  p()
], o.prototype, "label", 2);
o = l([
  m("cx-breadcrumb")
], o);
export {
  o as default
};
