dap-design-system/dist/components/notification-badge/notification-badge.component.js

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

import { clsx as d } 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 { state as m } from "../../node_modules/@lit/reactive-element/decorators/state.js";
import { html as y } from "../../node_modules/lit-html/static.js";
import { DdsElement as C } from "../../internal/dds-hu-element.js";
import g from "./notification-badge.scss.js";
import { unsafeCSS as b } from "../../node_modules/@lit/reactive-element/css-tag.js";
var v = Object.defineProperty, s = (p, t, e, c) => {
  for (var r = void 0, n = p.length - 1, l; n >= 0; n--)
    (l = p[n]) && (r = l(t, e, r) || r);
  return r && v(t, e, r), r;
};
const f = class f extends C {
  constructor() {
    super(...arguments), this.visible = !1, this.showZero = !1, this.type = "negative", this.variant = "round", this.max = 0, this.placement = "top-end", this.circularAuto = !0, this.forceCircular = !1, this.isCircularElement = !1, this.circularOffset = { x: 0, y: 0 };
  }
  firstUpdated(t) {
    super.firstUpdated(t), this.detectCircularElement();
  }
  detectCircularElement() {
    var n;
    if (!this.circularAuto && !this.forceCircular)
      return;
    if (this.forceCircular) {
      this.isCircularElement = !0, this.calculateCircularOffset();
      return;
    }
    const t = (n = this.shadowRoot) == null ? void 0 : n.querySelector("slot"), e = t == null ? void 0 : t.assignedElements();
    if (!(e != null && e.length))
      return;
    const c = e[0], r = this.isElementCircular(c);
    r !== this.isCircularElement && (this.isCircularElement = r, r && this.calculateCircularOffset());
  }
  isElementCircular(t) {
    if (t.tagName.toLowerCase().includes("avatar"))
      return !0;
    const c = getComputedStyle(t).borderRadius;
    if (c === "50%" || c.includes("50%"))
      return !0;
    const r = t.getBoundingClientRect(), n = Math.min(r.width, r.height);
    return parseInt(c, 10) >= n * 0.4 ? !0 : Array.from(document.styleSheets).flatMap((a) => {
      try {
        return Array.from(a.cssRules);
      } catch (u) {
        return [];
      }
    }).filter((a) => a instanceof CSSStyleRule).some((a) => {
      const u = a.selectorText;
      return (u == null ? void 0 : u.includes("circle")) || (u == null ? void 0 : u.includes("rounded"));
    });
  }
  calculateCircularOffset() {
    var a;
    const t = (a = this.shadowRoot) == null ? void 0 : a.querySelector("slot"), e = t == null ? void 0 : t.assignedElements();
    if (!(e != null && e.length))
      return;
    const r = e[0].getBoundingClientRect(), n = Math.min(r.width, r.height) / 2, l = this.getAngleForPlacement(this.placement), h = n * 0.65;
    this.circularOffset = {
      x: Math.cos(l) * h,
      y: Math.sin(l) * h
    }, this.style.setProperty(
      "--dds-notification-badge-circular-offset-x",
      `${this.circularOffset.x}px`
    ), this.style.setProperty(
      "--dds-notification-badge-circular-offset-y",
      `${this.circularOffset.y}px`
    );
  }
  getAngleForPlacement(t) {
    switch (t) {
      case "top-end":
        return -Math.PI / 4;
      // -45 degrees (top-right)
      case "top-start":
        return -3 * Math.PI / 4;
      // -135 degrees (top-left)
      case "bottom-end":
        return Math.PI / 4;
      // 45 degrees (bottom-right)
      case "bottom-start":
        return 3 * Math.PI / 4;
      // 135 degrees (bottom-left)
      default:
        return -Math.PI / 4;
    }
  }
  updated(t) {
    super.updated(t), (t.has("placement") || t.has("forceCircular") || t.has("circularAuto")) && this.detectCircularElement();
  }
  parseBadgeContent(t) {
    if (!t || typeof t == "string" && !t.trim())
      return "";
    const e = typeof t == "number" ? t : parseInt(t, 10);
    return isNaN(e) ? t : e;
  }
  handleMax(t, e) {
    return t > e ? `${e}+` : t.toString();
  }
  renderContent() {
    const t = this.parseBadgeContent(this.badgeContent);
    return t === 0 && !this.showZero ? "" : this.max > 0 && typeof t == "number" ? this.handleMax(t, this.max).toString() : t.toString();
  }
  get hide() {
    return !this.visible && !this.renderContent();
  }
  render() {
    return y`<div part="base" class=${d("notification-badge")}>
      <slot></slot>
      <div
        part="noty"
        class=${d(
      "notification-badge__info",
      `notification-badge__info--${this.type}`,
      `notification-badge__info--${this.placement}`,
      `notification-badge__info--${this.variant}`,
      {
        "notification-badge__info--hidden": this.hide,
        "notification-badge__info--circular": this.isCircularElement
      }
    )}>
        ${this.renderContent()}
      </div>
    </div>`;
  }
};
f.tagName = "dap-ds-notification-badge", f.styles = b(g);
let i = f;
s([
  o({ type: String })
], i.prototype, "badgeContent");
s([
  o({ type: Boolean })
], i.prototype, "visible");
s([
  o({ type: Boolean })
], i.prototype, "showZero");
s([
  o()
], i.prototype, "type");
s([
  o()
], i.prototype, "variant");
s([
  o({ type: Number })
], i.prototype, "max");
s([
  o({ reflect: !0 })
], i.prototype, "placement");
s([
  o({ type: Boolean, attribute: "circular-auto" })
], i.prototype, "circularAuto");
s([
  o({ type: Boolean, attribute: "force-circular" })
], i.prototype, "forceCircular");
s([
  m()
], i.prototype, "isCircularElement");
s([
  m()
], i.prototype, "circularOffset");
export {
  i as default
};
//# sourceMappingURL=notification-badge.component.js.map