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

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

import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { html as o } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as s } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { ifDefined as h } from "../../node_modules/lit-html/directives/if-defined.js";
import { DdsElement as f } from "../../internal/dds-hu-element.js";
import c from "../icon/icon.component.js";
import u from "../link/link.component.js";
import b from "./breadcrumb-item.scss.js";
import { unsafeCSS as v } from "../../node_modules/@lit/reactive-element/css-tag.js";
var y = Object.defineProperty, i = (n, p, l, g) => {
  for (var r = void 0, a = n.length - 1, d; a >= 0; a--)
    (d = n[a]) && (r = d(p, l, r) || r);
  return r && y(p, l, r), r;
};
const e = class e extends f {
  constructor() {
    super(...arguments), this.rel = "noreferrer noopener", this.disabled = !1, this.variant = "normal";
  }
  render() {
    return o`
      <li
        part="base"
        class=${m("breadcrumb-item", {
      "breadcrumb-item--inverted": this.variant === "inverted"
    })}>
        ${this.href ? o`
              <dap-ds-link
                theme="brand"
                bold
                part="link"
                exportparts="base:link-base"
                href=${this.href}
                target=${h(this.target)}
                rel=${h(
      this._shouldIncludeRel() ? this.rel : void 0
    )}
                .disabled=${this.disabled}>
                <slot></slot>
              </dap-ds-link>
            ` : o`<span part="item-nolink" class="breadcrumb-item-nolink">
              <slot></slot>
            </span>`}

        <span
          part="separator"
          class="breadcrumb-item__separator"
          aria-hidden="true"
          role="presentation">
          <slot name="separator">
            <dap-ds-icon name="arrow-right-s-line"></dap-ds-icon>
          </slot>
        </span>
      </li>
    `;
  }
  _shouldIncludeRel() {
    return this.href ? this.target !== void 0 || this.href.startsWith("http") : !1;
  }
};
e.tagName = "dap-ds-breadcrumb-item", e.dependencies = {
  "dap-ds-link": u,
  "dap-ds-icon": c
}, e.styles = v(b);
let t = e;
i([
  s()
], t.prototype, "href");
i([
  s()
], t.prototype, "target");
i([
  s()
], t.prototype, "rel");
i([
  s({ type: Boolean })
], t.prototype, "disabled");
i([
  s({ type: String, reflect: !0 })
], t.prototype, "variant");
export {
  t as default
};
//# sourceMappingURL=breadcrumb-item.component.js.map