@oslokommune/punkt-elements/dist/progressbar-Dj_mI_A6.js

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { e as n } from "./class-map-BpTj9gtz.js";
import { T as g, P as _, E as c, x as b, n as u, a as $ } from "./element-CgEWt74-.js";
import { r as h } from "./state-Bo2bck5_.js";
import { e as y, n as A } from "./ref-BBYSqgeW.js";
import { e as x, i as T, t as k } from "./directive-oAbCiebi.js";
import { u as d } from "./stringutils-DJjRa8dG.js";
import "./icon-CC1js8eR.js";
/**
 * @license
 * Copyright 2018 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
const v = "important", C = " !" + v, M = x(class extends T {
  constructor(t) {
    var e;
    if (super(t), t.type !== k.ATTRIBUTE || t.name !== "style" || ((e = t.strings) == null ? void 0 : e.length) > 2) throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.");
  }
  render(t) {
    return Object.keys(t).reduce((e, a) => {
      const s = t[a];
      return s == null ? e : e + `${a = a.includes("-") ? a : a.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${s};`;
    }, "");
  }
  update(t, [e]) {
    const { style: a } = t.element;
    if (this.ft === void 0) return this.ft = new Set(Object.keys(e)), this.render(e);
    for (const s of this.ft) e[s] == null && (this.ft.delete(s), s.includes("-") ? a.removeProperty(s) : a[s] = null);
    for (const s in e) {
      const l = e[s];
      if (l != null) {
        this.ft.add(s);
        const o = typeof l == "string" && l.endsWith(C);
        s.includes("-") || o ? a.setProperty(s, o ? l.slice(0, -11) : l, o ? v : "") : a[s] = l;
      }
    }
    return g;
  }
});
var L = Object.defineProperty, S = Object.getOwnPropertyDescriptor, i = (t, e, a, s) => {
  for (var l = s > 1 ? void 0 : s ? S(e, a) : e, o = t.length - 1, p; o >= 0; o--)
    (p = t[o]) && (l = (s ? p(e, a, l) : p(l)) || l);
  return s && l && L(e, a, l), l;
};
let r = class extends _ {
  constructor() {
    super(), this.ariaLabel = null, this.ariaLabelledby = null, this.ariaValueText = null, this.ariaLive = "polite", this.id = d(), this.role = "progressbar", this.skin = "dark-blue", this.statusPlacement = "following", this.statusType = "none", this.title = "", this.titlePosition = "left", this.valueCurrent = 0, this.valueMax = 100, this.valueMin = 0, this.labelWidth = 0, this.progressbarId = this.id, this.computedAriaLabelledby = null, this.computedAriaValueText = "", this.labelRef = y(), this.progressBarRef = y();
  }
  firstUpdated(t) {
    super.firstUpdated(t), this.setComputedValues(), this.syncAttributes();
  }
  updated(t) {
    super.updated(t), t.has("valueCurrent") && this.labelRef.value && (this.labelWidth = this.labelRef.value.getBoundingClientRect().width || 0), t.has("id") && this.id && (this.progressBarId = this.id), (t.has("statusType") || t.has("id") || t.has("ariaLabelledby")) && (this.progressbarId = this.id || d(), this.computedAriaLabelledby = this.ariaLabelledby || `${this.progressbarId}-title`), (t.has("ariaValueText") || t.has("valueCurrent") || t.has("valueMax")) && (this.computedAriaValueText = this.statusType === "fraction" && !this.ariaValueText ? `${this.valueCurrent} av ${this.valueMax - this.valueMin}` : this.ariaValueText || ""), this.syncAttributes();
  }
  render() {
    const t = this.statusType !== "none", e = this.valueMax - this.valueMin, a = this.valueCurrent / e * 100, s = this.statusType === "fraction" ? Math.round(a) : Math.round((this.valueCurrent - this.valueMin) / (this.valueMax - this.valueMin) * 100), l = `${this.valueCurrent} av ${e}`, o = n({
      "pkt-progressbar__bar": !0,
      [`pkt-progressbar__bar--${this.skin}`]: !!this.skin
    }), p = n({
      "pkt-progressbar__title": !0,
      "pkt-progressbar__title-center": this.titlePosition === "center"
    }), f = n({
      "pkt-progressbar__status": !0,
      "pkt-progressbar__status--center": this.statusPlacement === "center"
    }), m = n({
      "pkt-progressbar__status-placement--following": this.statusPlacement === "following",
      "pkt-progressbar__status-placement--center": this.statusPlacement === "center",
      "pkt-progressbar__status-placement--left": this.statusPlacement === "left"
    });
    return b` <div
      class="pkt-progressbar__container"
      .ref=${this.progressBarRef}
      style=${M({
      "--pkt-progress-label-width": `${this.labelWidth}px`,
      "--pkt-progress-width": `${s}%`
    })}
    >
      ${this.title ? b`<p id=${`${this.progressBarId}-title`} class=${p}>${this.title}</p>` : c}

      <div class="pkt-progressbar__bar-wrapper">
        <div class=${o}></div>
      </div>

      ${t ? b`<div class=${f}>
            <span class=${m} ${A(this.labelRef)}>
              ${this.statusType === "percentage" ? `${s}%` : l}
            </span>
          </div>` : c}
    </div>`;
  }
  // methods
  setComputedValues() {
    this.progressbarId = this.id || d(), this.computedAriaLabelledby = this.ariaLabelledby || `${this.progressbarId}-title`, this.computedAriaValueText = this.statusType === "fraction" && !this.ariaValueText ? `${this.valueCurrent} av ${this.valueMax - this.valueMin}` : this.ariaValueText || "";
  }
  syncAttributes() {
    this._handleAttribute("aria-live", this.ariaLive), this._handleAttribute("aria-valuenow", this.valueCurrent), this._handleAttribute("aria-valuemin", this.valueMin), this._handleAttribute("aria-valuemax", this.valueMax), this._handleAttribute("aria-valuetext", this.computedAriaValueText), this._handleAttribute("aria-label", this.ariaLabel), this._handleAttribute("role", this.role), this._handleAttribute("aria-atomic", "true"), this._handleAttribute("id", this.progressbarId), this.ariaLabel || this._handleAttribute("aria-labelledby", this.computedAriaLabelledby);
  }
  _handleAttribute(t, e) {
    e == null || e === "" ? this.removeAttribute(t) : this.setAttribute(t, String(e));
  }
};
i([
  u({ type: String })
], r.prototype, "ariaLabel", 2);
i([
  u({ type: String, reflect: !0 })
], r.prototype, "ariaLabelledby", 2);
i([
  u({ type: String, reflect: !0 })
], r.prototype, "ariaValueText", 2);
i([
  u({ type: String })
], r.prototype, "ariaLive", 2);
i([
  u({ type: String, reflect: !0 })
], r.prototype, "id", 2);
i([
  u({ type: String })
], r.prototype, "role", 2);
i([
  u({ type: String })
], r.prototype, "skin", 2);
i([
  u({ type: String })
], r.prototype, "statusPlacement", 2);
i([
  u({ type: String })
], r.prototype, "statusType", 2);
i([
  u({ type: String, reflect: !0 })
], r.prototype, "title", 2);
i([
  u({ type: String })
], r.prototype, "titlePosition", 2);
i([
  u({ type: Number, reflect: !0 })
], r.prototype, "valueCurrent", 2);
i([
  u({ type: Number })
], r.prototype, "valueMax", 2);
i([
  u({ type: Number })
], r.prototype, "valueMin", 2);
i([
  h()
], r.prototype, "labelWidth", 2);
i([
  h()
], r.prototype, "progressbarId", 2);
i([
  h()
], r.prototype, "computedAriaLabelledby", 2);
i([
  h()
], r.prototype, "computedAriaValueText", 2);
r = i([
  $("pkt-progressbar")
], r);
const W = r;
export {
  r as P,
  W as a
};