dap-design-system/dist/components/progress/progress.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 n, nothing as o } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as t } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { translate as l } from "../../node_modules/lit-i18n/src/lit-i18n.js";
import { DdsElement as u } from "../../internal/dds-hu-element.js";
import { SizedMixin as f } from "../../internal/mixin/sizedMixin.js";
import v from "./progress.scss.js";
import { unsafeCSS as y } from "../../node_modules/@lit/reactive-element/css-tag.js";
var $ = Object.defineProperty, i = (h, a, s, p) => {
  for (var r = void 0, d = h.length - 1, g; d >= 0; d--)
    (g = h[d]) && (r = g(a, s, r) || r);
  return r && $(a, s, r), r;
};
const _ = f(u), c = class c extends _ {
  constructor() {
    super(...arguments), this.variant = "linear", this.color = "brand", this.max = 100, this.indeterminate = !1, this.showPercentage = !1, this.ariaLive = "polite";
  }
  /** Maps effectiveSize from SizedMixin to progress visual size class (xs–lg; xxs maps to xs). */
  get progressSize() {
    return this.effectiveSize === "xxs" ? "xs" : this.effectiveSize;
  }
  /**
   * Calculate the percentage value (0-100).
   */
  get percentage() {
    return this.value === void 0 || this.indeterminate ? 0 : Math.min(100, Math.max(0, this.value / this.max * 100));
  }
  /**
   * Calculate the stroke-dashoffset for circular progress.
   * Circle circumference = 2πr where r = 45 (radius of circle with center at 50,50 in viewBox 0 0 100 100)
   */
  get circleOffset() {
    return 2 * Math.PI * 45 * (1 - this.percentage / 100);
  }
  /**
   * Render the linear progress variant.
   */
  renderLinear() {
    return n`
      <div part="track" class="progress__track" role="presentation">
        <div
          part="fill"
          class="progress__fill"
          style=${this.indeterminate ? "" : `width: ${this.percentage}%`}></div>
      </div>
    `;
  }
  /**
   * Render the circular progress variant.
   */
  renderCircular() {
    const s = 2 * Math.PI * 45;
    return n`
      <svg
        part="track"
        class="progress__svg"
        viewBox="0 0 100 100"
        role="presentation">
        <!-- Background circle -->
        <circle
          part="background"
          class="progress__circle progress__circle--background"
          cx="50"
          cy="50"
          r="${45}"
          fill="none"
          stroke-width="8" />
        <!-- Progress circle -->
        <circle
          part="fill"
          class="progress__circle progress__circle--progress"
          cx="50"
          cy="50"
          r="${45}"
          fill="none"
          stroke-width="8"
          stroke-dasharray="${s}"
          stroke-dashoffset="${this.indeterminate ? 0 : this.circleOffset}"
          transform="rotate(-90 50 50)" />
      </svg>
      ${this.showPercentage && !this.indeterminate ? n`
            <span part="percentage" class="progress__percentage">
              ${Math.round(this.percentage)}%
            </span>
          ` : o}
    `;
  }
  render() {
    var p, r;
    const a = this.indeterminate ? "status" : "progressbar", s = this.indeterminate ? "true" : "false";
    return n`
      <div
        part="base"
        class=${m(
      "progress",
      `progress--${this.variant}`,
      `progress--${this.color}`,
      `progress--${this.progressSize}`,
      {
        "progress--indeterminate": this.indeterminate
      }
    )}
        role=${a}
        aria-busy=${s}
        aria-label=${(r = (p = this.ariaLabel) != null ? p : this.label) != null ? r : this.indeterminate ? l("progress.loading") : l("progress.progress", {
      percentage: Math.round(this.percentage)
    })}
        aria-live=${this.ariaLive}
        aria-valuenow=${this.indeterminate ? o : Math.round(this.percentage)}
        aria-valuemin=${this.indeterminate ? o : 0}
        aria-valuemax=${this.indeterminate ? o : 100}>
        ${this.label ? n`<div part="label" class="progress__label">${this.label}</div>` : o}
        <slot name="label"></slot>

        <div class="progress__indicator">
          ${this.variant === "circular" ? this.renderCircular() : this.renderLinear()}
        </div>

        <!-- Screen reader announcements -->
        <div class="sr-only" aria-live=${this.ariaLive} aria-atomic="true">
          ${this.indeterminate ? l("progress.loading") : l("progress.progress", {
      percentage: Math.round(this.percentage)
    })}
        </div>
      </div>
    `;
  }
};
c.tagName = "dap-ds-progress", c.styles = y(v);
let e = c;
i([
  t({ type: String, reflect: !0 })
], e.prototype, "variant");
i([
  t({ type: String, reflect: !0 })
], e.prototype, "color");
i([
  t({ type: Number })
], e.prototype, "value");
i([
  t({ type: Number })
], e.prototype, "max");
i([
  t({ type: Boolean, reflect: !0 })
], e.prototype, "indeterminate");
i([
  t({ type: Boolean })
], e.prototype, "showPercentage");
i([
  t({ type: String })
], e.prototype, "label");
i([
  t({ type: String, attribute: "aria-live" })
], e.prototype, "ariaLive");
export {
  e as default
};
//# sourceMappingURL=progress.component.js.map