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

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

import { clsx as i } 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 o } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { html as p } from "../../node_modules/lit-html/static.js";
import { DdsElement as c } from "../../internal/dds-hu-element.js";
import f from "../icons/arrows/arrows-arrow-right-s-line/arrows-arrow-right-s-line.component.js";
import h from "./sidenav-group.scss.js";
import { unsafeCSS as m } from "../../node_modules/@lit/reactive-element/css-tag.js";
var g = Object.defineProperty, n = (l, t, u, v) => {
  for (var s = void 0, a = l.length - 1, d; a >= 0; a--)
    (d = l[a]) && (s = d(t, u, s) || s);
  return s && g(t, u, s), s;
};
const r = class r extends c {
  constructor() {
    super(...arguments), this.active = !1, this.spacing = "none", this.open = !1, this.size = "xs";
  }
  render() {
    return p`
      <div
        part="base"
        role="listitem"
        class=${i(
      "sidenav-group",
      `sidenav-group--spacing-${this.spacing}`
    )}>
        <div
          class=${i(
      "sidenav-group__item",
      `sidenav-group__item--${this.size}`,
      {
        "sidenav-group__item--active": this.active
      }
    )}>
          <div
            class=${i("sidenav-group__title")}
            part="title"
            id="title"
            @click=${(t) => {
      t.preventDefault(), t.stopPropagation(), this.open ? this.open && !this.href && (this.open = !1) : this.open = !0;
    }}>
            ${this.href ? p`<a
                  href=${this.href}
                  class="sidenav-group__link"
                  part="link">
                  <slot></slot>
                  <slot name="suffix"></slot>
                </a>` : p`<slot></slot>`}
          </div>
          <button
            part="toggle"
            type="button"
            class=${i("sidenav-group__toggle", {
      "sidenav-group__toggle--open": this.open
    })}
            aria-labelledby="title"
            aria-expanded=${this.open ? "true" : "false"}
            aria-controls="submenu"
            @click=${(t) => {
      t.preventDefault(), t.stopPropagation(), this.open = !this.open;
    }}>
            <dap-ds-icon-arrow-right-s-line
              part="icon"
              aria-hidden="true"></dap-ds-icon-arrow-right-s-line>
          </button>
        </div>
        <ul
          part="submenu"
          id="submenu"
          role="list"
          class=${i("sidenav-group__submenu", {
      "sidenav-group__submenu--open": this.open
    })}>
          <slot name="submenu"></slot>
        </ul>
      </div>
    `;
  }
};
r.tagName = "dap-ds-sidenav-group", r.dependencies = {
  "dap-ds-icon-arrow-right-s-line": f
}, r.styles = m(h);
let e = r;
n([
  o({ reflect: !0 })
], e.prototype, "href");
n([
  o({ type: Boolean, reflect: !0 })
], e.prototype, "active");
n([
  o({ reflect: !0 })
], e.prototype, "spacing");
n([
  o({ type: Boolean, reflect: !0 })
], e.prototype, "open");
n([
  o({ reflect: !0, type: String })
], e.prototype, "size");
export {
  e as default
};
//# sourceMappingURL=sidenav-group.component.js.map