import {
  LocalizeController
} from "./chunk.X3FE7OHE.js";
import {
  SolidElement,
  customElement
} from "./chunk.H53WQBDK.js";
import {
  __decorateClass
} from "./chunk.S3NI7NKU.js";

// src/components/breadcrumb/breadcrumb.ts
import { css, html } from "lit";
import { property, query, state } from "lit/decorators.js";
import cx from "classix";
var SdBreadcrumb = class extends SolidElement {
  constructor() {
    super(...arguments);
    this.localize = new LocalizeController(this);
    this.label = "";
    this.itemPositionsCached = false;
    this.isTruncated = false;
  }
  get items() {
    return this.querySelectorAll("sd-breadcrumb-item");
  }
  cacheItemPositions() {
    this.items.forEach((item) => {
      const { width } = item.getBoundingClientRect();
      item.dataset.size = `${width}`;
    });
    this.itemPositionsCached = true;
  }
  handleTruncation() {
    var _a;
    if (document.documentElement.clientWidth <= 1024) return;
    const { width: parentWidth } = this.base.getBoundingClientRect();
    const { width: truncatedWidth } = this.truncated.getBoundingClientRect();
    if (!this.itemPositionsCached) {
      this.cacheItemPositions();
    }
    this.dropdown.innerHTML = "";
    this.isTruncated = false;
    let sum = 0;
    for (const [index, item] of Array.from(this.items).reverse().entries()) {
      const width = parseFloat(`${(_a = item.dataset.size) != null ? _a : item.getBoundingClientRect().width}`);
      item.hidden = false;
      if (this.isTruncated) {
        const cloned = item.cloneNode(true);
        this.dropdown.prepend(cloned);
        item.hidden = true;
        continue;
      }
      if (index === 0 || index === 1) {
        sum += width;
        continue;
      }
      this.isTruncated = sum + width + truncatedWidth > parentWidth;
      if (this.isTruncated) {
        const cloned = item.cloneNode(true);
        this.dropdown.prepend(cloned);
        item.hidden = true;
      } else {
        sum += width;
      }
    }
  }
  handleMobileChevron() {
    var _a, _b, _c;
    const icon = document.createElement("sd-icon");
    icon.setAttribute("slot", "icon-left");
    icon.setAttribute("library", "_internal");
    icon.setAttribute("name", "chevron-left");
    icon.setAttribute("class", "text-base me-1 lg:hidden");
    (_c = (_b = (_a = Array.from(this.items).at(-2)) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.querySelector("sd-link")) == null ? void 0 : _c.appendChild(icon);
  }
  handleSlotChange() {
    this.handleMobileChevron();
  }
  connectedCallback() {
    super.connectedCallback();
    this.resizeObserver = new ResizeObserver(() => this.handleTruncation());
    this.resizeObserver.observe(this);
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    this.resizeObserver.unobserve(this);
  }
  render() {
    return html`<nav part="base" class="flex items-center pb-1" aria-label="${this.label}"><sd-dropdown part="truncated" class="${cx(!this.isTruncated && "absolute opacity-0 pointer-events-none")}"><button slot="trigger" tabindex="${this.isTruncated ? "0" : "-1"}" aria-label="${this.localize.term("truncatedBreadcrumbs")}" aria-expanded="false" aria-haspopup="true" class="flex sd-interactive">[...]</button><ol part="truncated-dropdown" class="flex flex-col gap-4 px-2 py-3 min-w-40"></ol></sd-dropdown><ol part="list" class="flex items-center"><slot @slotchange="${this.handleSlotChange}"></slot></ol></nav>`;
  }
};
SdBreadcrumb.styles = [
  ...SolidElement.styles,
  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
:host{position:relative;display:block}::slotted(sd-breadcrumb-item:not(:last-of-type))::after,sd-dropdown::after{margin-inline:var(--sd-spacing-2);display:none;height:var(--sd-spacing-1);width:var(--sd-spacing-1);border-radius:var(--sd-radius-full);background-color:rgba(var(--sd-breadcrumb__separator-color,rgba(var(--sd-color-neutral-400))));--tw-content:'';content:var(--tw-content)}@media (width >= 64rem){::slotted(sd-breadcrumb-item:not(:last-of-type))::after,sd-dropdown::after{display:inline-block}}::slotted(sd-breadcrumb-item:nth-last-child(2)){display:flex}@media (width >= 64rem){::slotted(sd-breadcrumb-item:nth-last-child(2))::after{background-color:rgba(var(--sd-breadcrumb__separator--current-color,rgba(var(--sd-color-accent))))}}::slotted(sd-breadcrumb-item),sd-dropdown{display:none;align-items:center;font-size:var(--sd-text-sm);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}@media (width >= 64rem){::slotted(sd-breadcrumb-item),sd-dropdown{display:flex}}@property --tw-content{syntax:"*";inherits:false;initial-value:""}`
];
__decorateClass([
  query('[part="base"]')
], SdBreadcrumb.prototype, "base", 2);
__decorateClass([
  query('[part="truncated"]')
], SdBreadcrumb.prototype, "truncated", 2);
__decorateClass([
  query('[part="truncated-dropdown"]')
], SdBreadcrumb.prototype, "dropdown", 2);
__decorateClass([
  query("slot")
], SdBreadcrumb.prototype, "defaultSlot", 2);
__decorateClass([
  property({ type: String, reflect: true })
], SdBreadcrumb.prototype, "label", 2);
__decorateClass([
  state()
], SdBreadcrumb.prototype, "itemPositionsCached", 2);
__decorateClass([
  state()
], SdBreadcrumb.prototype, "isTruncated", 2);
SdBreadcrumb = __decorateClass([
  customElement("sd-breadcrumb")
], SdBreadcrumb);

export {
  SdBreadcrumb
};
