@synergy-design-system/components/dist/chunks/chunk.RNNT7FDG.js

This package provides the base of the Synergy Design System as native web components. It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/). Synergy officially supports the latest two versions of all major browsers (as define

import {
  breadcrumb_custom_styles_default
} from "./chunk.32CYREEV.js";
import {
  breadcrumb_styles_default
} from "./chunk.S22BO5SF.js";
import {
  SynIcon
} from "./chunk.RCBSMXQH.js";
import {
  LocalizeController
} from "./chunk.OAQRCZOO.js";
import {
  component_styles_default
} from "./chunk.NLYVOJGK.js";
import {
  SynergyElement
} from "./chunk.3THJTCRO.js";
import {
  __decorateClass
} from "./chunk.Z4XV3SMG.js";

// src/components/breadcrumb/breadcrumb.component.ts
import { html } from "lit";
import { property, query } from "lit/decorators.js";
var SynBreadcrumb = class extends SynergyElement {
  constructor() {
    super(...arguments);
    this.localize = new LocalizeController(this);
    this.separatorDir = this.localize.dir();
    this.label = "";
  }
  // Generates a clone of the separator element to use for each breadcrumb item
  getSeparator() {
    const separator = this.separatorSlot.assignedElements({ flatten: true })[0];
    const clone = separator.cloneNode(true);
    [clone, ...clone.querySelectorAll("[id]")].forEach((el) => el.removeAttribute("id"));
    clone.setAttribute("data-default", "");
    clone.slot = "separator";
    return clone;
  }
  handleSlotChange() {
    const items = [...this.defaultSlot.assignedElements({ flatten: true })].filter(
      (item) => item.tagName.toLowerCase() === "syn-breadcrumb-item"
    );
    items.forEach((item, index) => {
      const separator = item.querySelector('[slot="separator"]');
      if (separator === null) {
        item.append(this.getSeparator());
      } else if (separator.hasAttribute("data-default")) {
        separator.replaceWith(this.getSeparator());
      } else {
      }
      if (index === items.length - 1) {
        item.setAttribute("aria-current", "page");
      } else {
        item.removeAttribute("aria-current");
      }
    });
  }
  render() {
    if (this.separatorDir !== this.localize.dir()) {
      this.separatorDir = this.localize.dir();
      this.updateComplete.then(() => this.handleSlotChange());
    }
    return html`
      <nav part="base" class="breadcrumb" aria-label=${this.label}>
        <slot @slotchange=${this.handleSlotChange}></slot>
      </nav>

      <span hidden aria-hidden="true">
        <slot name="separator">
          <syn-icon name="chevron-down" library="system" class=${this.localize.dir()}></syn-icon>
        </slot>
      </span>
    `;
  }
};
SynBreadcrumb.styles = [component_styles_default, breadcrumb_styles_default, breadcrumb_custom_styles_default];
SynBreadcrumb.dependencies = { "syn-icon": SynIcon };
__decorateClass([
  query("slot")
], SynBreadcrumb.prototype, "defaultSlot", 2);
__decorateClass([
  query('slot[name="separator"]')
], SynBreadcrumb.prototype, "separatorSlot", 2);
__decorateClass([
  property()
], SynBreadcrumb.prototype, "label", 2);

export {
  SynBreadcrumb
};
//# sourceMappingURL=chunk.RNNT7FDG.js.map