dap-design-system/dist/components/breadcrumb/breadcrumb.component.js

Official design system for the DÁP (dap.gov.hu)

import { clsx as c } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { html as u } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as p } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { query as h } from "../../node_modules/@lit/reactive-element/decorators/query.js";
import { ifDefined as m } from "../../node_modules/lit-html/directives/if-defined.js";
import { DdsElement as f } from "../../internal/dds-hu-element.js";
import b from "../breadcrumb-item/breadcrumb-item.component.js";
import y from "./breadcrumb.scss.js";
import { unsafeCSS as g } from "../../node_modules/@lit/reactive-element/css-tag.js";
var v = Object.defineProperty, i = (d, r, o, t) => {
  for (var e = void 0, a = d.length - 1, l; a >= 0; a--)
    (l = d[a]) && (e = l(r, o, e) || e);
  return e && v(r, o, e), e;
};
const n = class n extends f {
  constructor() {
    super(...arguments), this.variant = "normal", this.mobile = !1, this._cachedItems = [];
  }
  cloneSeparator() {
    const o = this.separatorSlot.assignedElements({
      flatten: !0
    })[0].cloneNode(!0);
    return o.slot = "separator", o;
  }
  handleSlotChange() {
    this._debounceTimeout && clearTimeout(this._debounceTimeout), this._debounceTimeout = window.setTimeout(() => {
      this._updateBreadcrumbItems();
    }, 16);
  }
  _updateBreadcrumbItems() {
    const r = Array.from(
      this.defaultSlot.assignedElements({ flatten: !0 })
    ).filter(
      (t) => t instanceof b
    );
    (r.length !== this._cachedItems.length || r.some((t, e) => t !== this._cachedItems[e])) && (this._cachedItems = r, r.forEach((t, e) => {
      const a = e === r.length - 1;
      if (this.mobile && e !== 0 && !a) {
        t.style.display = "none";
        return;
      } else
        t.style.display = "";
      t.toggleAttribute("inverted", this.variant === "inverted"), t.variant = this.variant, a ? t.setAttribute("aria-current", "page") : t.removeAttribute("aria-current"), t.toggleAttribute("disabled", a);
      const l = t.querySelector('[slot="separator"]');
      !a && !l && t.append(this.cloneSeparator());
    }));
  }
  render() {
    return u`
      <nav
        part="base"
        aria-label="${m(this.ariaLabel) || ""}"
        aria-labelledby="${m(this.ariaLabelledBy) || ""}"
        class="${c("breadcrumb")}">
        <ol class="breadcrumb__list" part="list">
          <slot @slotchange="${this.handleSlotChange}"></slot>
        </ol>
      </nav>
      <span hidden aria-hidden="true">
        <slot name="separator"> <span>/</span> </slot>
      </span>
    `;
  }
};
n.tagName = "dap-ds-breadcrumb", n.styles = g(y);
let s = n;
i([
  h("slot")
], s.prototype, "defaultSlot");
i([
  h('slot[name="separator"]')
], s.prototype, "separatorSlot");
i([
  p({ type: String })
], s.prototype, "variant");
i([
  p({ type: Boolean })
], s.prototype, "mobile");
i([
  p({ type: String, attribute: "aria-labelledby" })
], s.prototype, "ariaLabelledBy");
export {
  s as default
};
//# sourceMappingURL=breadcrumb.component.js.map