@oslokommune/punkt-elements/dist/progressbar-o-M17HPA.js

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { c as e, d as t, l as n, o as r, r as i, s as a, t as o, u as s } from "./element-cZ85T_aa.js";
import { n as c, r as l, t as u } from "./directive-3THFsVew.js";
import { t as d } from "./class-map-C8HuhNzZ.js";
import "./icon-Co72KtgF.js";
import { n as f, t as p } from "./ref-RS8Uv6uC.js";
import { n as m } from "./utils-BOOZ0ppt.js";
//#region ../../node_modules/lit-html/directives/style-map.js
var h = "important", g = " !" + h, _ = u(class extends c {
	constructor(e) {
		if (super(e), e.type !== l.ATTRIBUTE || e.name !== "style" || e.strings?.length > 2) throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.");
	}
	render(e) {
		return Object.keys(e).reduce((t, n) => {
			let r = e[n];
			return r == null ? t : t + `${n = n.includes("-") ? n : n.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${r};`;
		}, "");
	}
	update(e, [t]) {
		let { style: n } = e.element;
		if (this.ft === void 0) return this.ft = new Set(Object.keys(t)), this.render(t);
		for (let e of this.ft) t[e] ?? (this.ft.delete(e), e.includes("-") ? n.removeProperty(e) : n[e] = null);
		for (let e in t) {
			let r = t[e];
			if (r != null) {
				this.ft.add(e);
				let t = typeof r == "string" && r.endsWith(g);
				e.includes("-") || t ? n.setProperty(e, t ? r.slice(0, -11) : r, t ? h : "") : n[e] = r;
			}
		}
		return s;
	}
}), v = class extends o {
	constructor() {
		super(), this.ariaLabel = null, this.ariaLabelledby = null, this.ariaValueText = null, this.ariaLive = "polite", this.id = m(), 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 = p(), this.progressBarRef = p();
	}
	firstUpdated(e) {
		super.firstUpdated(e), this.setComputedValues(), this.syncAttributes();
	}
	updated(e) {
		super.updated(e), e.has("valueCurrent") && this.labelRef.value && (this.labelWidth = this.labelRef.value.getBoundingClientRect().width || 0), e.has("id") && this.id && (this.progressBarId = this.id), (e.has("statusType") || e.has("id") || e.has("ariaLabelledby")) && (this.progressbarId = this.id || m(), this.computedAriaLabelledby = this.ariaLabelledby || `${this.progressbarId}-title`), (e.has("ariaValueText") || e.has("valueCurrent") || e.has("valueMax")) && (this.computedAriaValueText = this.statusType === "fraction" && !this.ariaValueText ? `${this.valueCurrent} av ${this.valueMax - this.valueMin}` : this.ariaValueText || ""), this.syncAttributes();
	}
	render() {
		let e = this.statusType !== "none", r = this.valueMax - this.valueMin, i = this.valueCurrent / r * 100, a = this.statusType === "fraction" ? Math.round(i) : Math.round((this.valueCurrent - this.valueMin) / (this.valueMax - this.valueMin) * 100), o = `${this.valueCurrent} av ${r}`, s = d({
			"pkt-progressbar__bar": !0,
			[`pkt-progressbar__bar--${this.skin}`]: !!this.skin
		}), c = d({
			"pkt-progressbar__title": !0,
			"pkt-progressbar__title-center": this.titlePosition === "center"
		}), l = d({
			"pkt-progressbar__status": !0,
			"pkt-progressbar__status--center": this.statusPlacement === "center"
		}), u = d({
			"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 t` <div
      class="pkt-progressbar__container"
      .ref=${this.progressBarRef}
      style=${_({
			"--pkt-progress-label-width": `${this.labelWidth}px`,
			"--pkt-progress-width": `${a}%`
		})}
    >
      ${this.title ? t`<p id=${`${this.progressBarId}-title`} class=${c}>${this.title}</p>` : n}

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

      ${e ? t`<div class=${l}>
            <span class=${u} ${f(this.labelRef)}>
              ${this.statusType === "percentage" ? `${a}%` : o}
            </span>
          </div>` : n}
    </div>`;
	}
	setComputedValues() {
		this.progressbarId = this.id || m(), 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(e, t) {
		t == null || t === "" ? this.removeAttribute(e) : this.setAttribute(e, String(t));
	}
};
i([a({ type: String })], v.prototype, "ariaLabel", void 0), i([a({
	type: String,
	reflect: !0
})], v.prototype, "ariaLabelledby", void 0), i([a({
	type: String,
	reflect: !0
})], v.prototype, "ariaValueText", void 0), i([a({ type: String })], v.prototype, "ariaLive", void 0), i([a({
	type: String,
	reflect: !0
})], v.prototype, "id", void 0), i([a({ type: String })], v.prototype, "role", void 0), i([a({ type: String })], v.prototype, "skin", void 0), i([a({ type: String })], v.prototype, "statusPlacement", void 0), i([a({ type: String })], v.prototype, "statusType", void 0), i([a({
	type: String,
	reflect: !0
})], v.prototype, "title", void 0), i([a({ type: String })], v.prototype, "titlePosition", void 0), i([a({
	type: Number,
	reflect: !0
})], v.prototype, "valueCurrent", void 0), i([a({ type: Number })], v.prototype, "valueMax", void 0), i([a({ type: Number })], v.prototype, "valueMin", void 0), i([r()], v.prototype, "labelWidth", void 0), i([r()], v.prototype, "progressbarId", void 0), i([r()], v.prototype, "computedAriaLabelledby", void 0), i([r()], v.prototype, "computedAriaValueText", void 0);
try {
	e("pkt-progressbar")(v);
} catch {
	console.warn("Forsøker å definere <pkt-progressbar>, men den er allerede definert");
}
//#endregion
//#region src/components/progressbar/index.ts
var y = v;
//#endregion
export { v as n, y as t };