dap-design-system/dist/components/link/link.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 { nothing as c } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as r } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { state as k } from "../../node_modules/@lit/reactive-element/decorators/state.js";
import { ifDefined as p } from "../../node_modules/lit-html/directives/if-defined.js";
import { html as f } from "../../node_modules/lit-html/static.js";
import "../../localization/localization.js";
import { DdsElement as u } from "../../internal/dds-hu-element.js";
import g from "./_styles/link.scss.js";
import { t as y } from "../../node_modules/i18next/dist/esm/i18next.js";
import { unsafeCSS as b } from "../../node_modules/@lit/reactive-element/css-tag.js";
var $ = Object.defineProperty, i = (h, t, e, l) => {
  for (var o = void 0, n = h.length - 1, d; n >= 0; n--)
    (d = h[n]) && (o = d(t, e, o) || o);
  return o && $(t, e, o), o;
};
const a = class a extends u {
  constructor() {
    super(...arguments), this.variant = "brand", this.target = "_self", this.href = "#", this.disabled = !1, this.rel = "noreferrer noopener", this.download = !1, this.hasLink = !1, this._handleLinkSlotChange = (t) => {
      const e = t.target;
      if (e) {
        const l = e.assignedElements();
        this.hasLink = l.length > 0, l.forEach((o) => o.setAttribute("tabindex", "-1"));
      }
    };
  }
  _getLinkElement() {
    var l;
    const t = (l = this.shadowRoot) == null ? void 0 : l.querySelector(
      'slot[name="link"]'
    );
    if (!t) return null;
    const e = t.assignedElements();
    return e.length > 0 ? e[0] : null;
  }
  handleClick(t) {
    if (this.disabled) {
      t.preventDefault(), t.stopPropagation();
      return;
    }
    if (this.hasLink) {
      t.preventDefault();
      const e = this._getLinkElement();
      e && e.click(), this.emit("dds-click", t);
      return;
    }
    this.href || this.emit("dds-click", t);
  }
  focus() {
    var t, e;
    this.disabled || (e = (t = this.shadowRoot) == null ? void 0 : t.querySelector('[part="base"]')) == null || e.focus();
  }
  render() {
    var t, e;
    return f`
      <a
        part="base"
        .disabled=${this.disabled}
        aria-label=${p((t = this.ariaLabel) != null ? t : "")}
        target=${this.target}
        href=${this.href}
        ?download=${this.download}
        rel=${p(this.target ? this.rel : void 0)}
        class=${m(
      "link",
      `link--${this.size}`,
      { "link--bold": this.bold },
      { "link--no-under-line": this.noUnderline },
      { "link--disabled": this.disabled },
      `link--${this.variant}`
    )}
        @click=${this.handleClick}>
        <span part="text" class="link__text">
          <slot></slot>
        </span>
        ${this.target === "_blank" ? f`<span class="sr-only">
              ${(e = this.targetBlankText) != null ? e : y("opensInNewTab")}</span
            >` : c}
      </a>
      <!-- Link slot: visually hidden, for SPA router links (e.g. Next.js Link) -->
      <div class="link__link-wrapper" aria-hidden="true">
        <slot name="link" @slotchange=${this._handleLinkSlotChange}></slot>
      </div>
    `;
  }
};
a.tagName = "dap-ds-link", a.styles = b(g);
let s = a;
i([
  r({ reflect: !0 })
], s.prototype, "size");
i([
  r()
], s.prototype, "variant");
i([
  r()
], s.prototype, "target");
i([
  r({ type: Boolean })
], s.prototype, "bold");
i([
  r({ type: Boolean })
], s.prototype, "noUnderline");
i([
  r()
], s.prototype, "href");
i([
  r({ type: Boolean, reflect: !0 })
], s.prototype, "disabled");
i([
  r({ type: String })
], s.prototype, "rel");
i([
  r({ type: Boolean })
], s.prototype, "download");
i([
  r({ type: String })
], s.prototype, "targetBlankText");
i([
  k()
], s.prototype, "hasLink");
export {
  s as default
};
//# sourceMappingURL=link.component.js.map