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

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

import { clsx as h } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as n } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { literal as p, html as u } from "../../node_modules/lit-html/static.js";
import { DdsElement as m } from "../../internal/dds-hu-element.js";
import v from "./sidenav.scss.js";
import { unsafeCSS as A } from "../../node_modules/@lit/reactive-element/css-tag.js";
var b = Object.defineProperty, c = (l, e, t, r) => {
  for (var s = void 0, i = l.length - 1, d; i >= 0; i--)
    (d = l[i]) && (s = d(e, t, s) || s);
  return s && b(e, t, s), s;
};
const f = {
  aside: p`aside`,
  nav: p`nav`
}, o = class o extends m {
  constructor() {
    super(...arguments), this.size = "xs", this.landmark = "aside";
  }
  firstUpdated(e) {
    const t = this.querySelector(
      `[href="${this.activeHref ? this.activeHref : window.location.pathname}"]`
    );
    t && (this.removeActive(), this.setActive(t));
    const r = t == null ? void 0 : t.closest("dap-ds-sidenav-group");
    r && r.setAttribute("open", "true"), this.querySelectorAll("dap-ds-sidenav-item, dap-ds-sidenav-group").forEach(
      (s) => {
        s.size = this.size;
      }
    );
  }
  attributeChangedCallback(e, t, r) {
    if (super.attributeChangedCallback(e, t, r), e === "activehref") {
      this.removeActive();
      const s = this.querySelector(`[href="${r}"]`);
      this.setActive(s);
    }
  }
  removeActive() {
    this.querySelectorAll("dap-ds-sidenav-item, dap-ds-sidenav-group").forEach(
      (e) => {
        e.removeAttribute("active");
      }
    );
  }
  setActive(e) {
    if (e) {
      e.setAttribute("active", "true");
      const t = e.closest("dap-ds-sidenav-group");
      t && t.setAttribute("open", "true");
    }
  }
  // Emits `dds-item-click` when an item (or a group acting as a link) is
  // activated. The event is cancelable: consumers doing client-side routing can
  // call `event.preventDefault()` to suppress the item's native anchor
  // navigation. When nobody prevents it, the anchor navigates as before.
  handleClick(e) {
    const t = e.composedPath().find(
      (i) => i instanceof HTMLElement && (i.tagName === "DAP-DS-SIDENAV-ITEM" || i.tagName === "DAP-DS-SIDENAV-GROUP")
    ), r = (t == null ? void 0 : t.href) || (t == null ? void 0 : t.getAttribute("href"));
    if (!r) return;
    this.emit(
      "dds-item-click",
      { href: r, event: e },
      { cancelable: !0 }
    ).defaultPrevented && e.preventDefault();
  }
  render() {
    var t, r;
    const e = (t = f[this.landmark]) != null ? t : f.aside;
    return u`
      <${e}
        part="base"
        class=${h("sidenav", `sidenav--${this.size}`)}
        aria-label=${(r = this.ariaLabel) != null ? r : this.label}>
        <menu part="menu" @click=${this.handleClick}>
          <slot></slot>
        </menu>
      </${e}>
    `;
  }
};
o.tagName = "dap-ds-sidenav", o.styles = A(v);
let a = o;
c([
  n({ reflect: !0 })
], a.prototype, "label");
c([
  n()
], a.prototype, "activeHref");
c([
  n({ type: String })
], a.prototype, "size");
c([
  n({ reflect: !0, type: String })
], a.prototype, "landmark");
export {
  a as default
};
//# sourceMappingURL=sidenav.component.js.map