@oslokommune/punkt-vue 11.13.13 → 11.14.0

package/CHANGELOG.md

@@ -5,6 +5,24 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [11.14.0](https://github.com/oslokommune/punkt/compare/11.13.14...11.14.0) (2024-06-26)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+* Progressbar. 
+
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [11.13.12](https://github.com/oslokommune/punkt/compare/11.13.11...11.13.12) (2024-06-10)
 
 ### ⚠ BREAKING CHANGES

package/dist/punkt-vue-index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("./punkt-vue-alert.cjs"),t=require("./punkt-vue-accordion.cjs"),a=require("./punkt-vue-backlink.cjs"),r=require("./punkt-vue-breadcrumbs.cjs"),q=require("./punkt-vue-button.cjs"),l=require("./punkt-vue-checkbox.cjs"),o=require("./punkt-vue-footer.cjs"),u=require("./punkt-vue-footersimple.cjs"),d=require("./punkt-vue-header.cjs"),x=require("./punkt-vue-icon.cjs"),g=require("./punkt-vue-inputwrapper.cjs"),n=require("./punkt-vue-messagebox.cjs"),c=require("./punkt-vue-linkcard.cjs"),i=require("./punkt-vue-loader.cjs"),k=require("./punkt-vue-radiobutton.cjs"),s=require("./punkt-vue-select.cjs"),e=require("./punkt-vue-table.cjs"),f=require("./punkt-vue-tabs.cjs"),m=require("./punkt-vue-tag.cjs"),b=require("./punkt-vue-textarea.cjs"),P=require("./punkt-vue-textinput.cjs"),B=require("./plugins-IAlvxbZ2.cjs"),H=require("./Alert-VmiRg_3U.cjs"),L=require("./Button-fJVVmqZU.cjs"),S=require("./Icon-7iwiZOEn.cjs"),y=require("./InputWrapper-tRopywnC.cjs"),F=require("./Tag-1MK-d3wL.cjs");require("vue");require("./_plugin-vue_export-helper-jfW5FsfF.cjs");const T=Object.freeze(Object.defineProperty({__proto__:null,Accordion:t.default,AccordionItem:t.default,Alert:p.default,BackLink:a.default,Breadcrumbs:r.default,Button:q.default,Checkbox:l.default,Footer:o.default,FooterSimple:u.default,Header:d.default,Icon:x.default,InputWrapper:g.default,Linkcard:c.default,Loader:i.default,Messagebox:n.default,Radiobutton:k.default,Select:s.default,Table:e.default,TableBody:e.default,TableDataCell:e.default,TableHeader:e.default,TableHeaderCell:e.default,TableRow:e.default,Tabs:f.default,Tag:m.default,Textarea:b.default,Textinput:P.default},Symbol.toStringTag,{value:"Module"})),I={install(A,R={}){for(const C in T)B.registerPlugin(A,T[C])}};B.use(I);exports.Alert=p.default;exports.Accordion=t.default;exports.AccordionItem=t.default;exports.PktAccordion=t.PktAccordion;exports.PktAccordionItem=t.PktAccordionItem;exports.BackLink=a.default;exports.PktBackLink=a.PktBackLink;exports.Breadcrumbs=r.default;exports.PktBreadcrumbs=r.PktBreadcrumbs;exports.Button=q.default;exports.Checkbox=l.default;exports.PktCheckbox=l.PktCheckbox;exports.Footer=o.default;exports.PktFooter=o.PktFooter;exports.FooterSimple=u.default;exports.PktFooterSimple=u.PktFooterSimple;exports.Header=d.default;exports.PktHeader=d.PktHeader;exports.Icon=x.default;exports.InputWrapper=g.default;exports.Messagebox=n.default;exports.PktMessagebox=n.PktMessagebox;exports.Linkcard=c.default;exports.PktLinkcard=c.PktLinkcard;exports.Loader=i.default;exports.PktLoader=i.PktLoader;exports.PktRadiobutton=k.PktRadiobutton;exports.Radiobutton=k.default;exports.PktSelect=s.PktSelect;exports.Select=s.default;exports.PktTable=e.PktTable;exports.PktTableBody=e.PktTableBody;exports.PktTableDataCell=e.PktTableDataCell;exports.PktTableHeader=e.PktTableHeader;exports.PktTableHeaderCell=e.PktTableHeaderCell;exports.PktTableRow=e.PktTableRow;exports.Table=e.default;exports.TableBody=e.default;exports.TableDataCell=e.default;exports.TableHeader=e.default;exports.TableHeaderCell=e.default;exports.TableRow=e.default;exports.PktTabs=f.PktTabs;exports.Tabs=f.default;exports.Tag=m.default;exports.PktTextarea=b.PktTextarea;exports.Textarea=b.default;exports.PktTextinput=P.PktTextinput;exports.Textinput=P.default;exports.PktAlert=H.PktAlert;exports.PktButton=L.PktButton;exports.PktIcon=S.PktIcon;exports.PktInputWrapper=y.PktInputWrapper;exports.PktTag=F.Tag;exports.default=I;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const q=require("./punkt-vue-alert.cjs"),t=require("./punkt-vue-accordion.cjs"),a=require("./punkt-vue-backlink.cjs"),r=require("./punkt-vue-breadcrumbs.cjs"),g=require("./punkt-vue-button.cjs"),o=require("./punkt-vue-checkbox.cjs"),l=require("./punkt-vue-footer.cjs"),u=require("./punkt-vue-footersimple.cjs"),d=require("./punkt-vue-header.cjs"),x=require("./punkt-vue-icon.cjs"),m=require("./punkt-vue-inputwrapper.cjs"),n=require("./punkt-vue-messagebox.cjs"),c=require("./punkt-vue-linkcard.cjs"),i=require("./punkt-vue-loader.cjs"),k=require("./punkt-vue-progressbar.cjs"),s=require("./punkt-vue-radiobutton.cjs"),b=require("./punkt-vue-select.cjs"),e=require("./punkt-vue-table.cjs"),f=require("./punkt-vue-tabs.cjs"),B=require("./punkt-vue-tag.cjs"),P=require("./punkt-vue-textarea.cjs"),T=require("./punkt-vue-textinput.cjs"),I=require("./plugins-IAlvxbZ2.cjs"),L=require("./Alert-VmiRg_3U.cjs"),S=require("./Button-fJVVmqZU.cjs"),y=require("./Icon-7iwiZOEn.cjs"),F=require("./InputWrapper-tRopywnC.cjs"),R=require("./Tag-1MK-d3wL.cjs");require("vue");require("./_plugin-vue_export-helper-jfW5FsfF.cjs");const p=Object.freeze(Object.defineProperty({__proto__:null,Accordion:t.default,AccordionItem:t.default,Alert:q.default,BackLink:a.default,Breadcrumbs:r.default,Button:g.default,Checkbox:o.default,Footer:l.default,FooterSimple:u.default,Header:d.default,Icon:x.default,InputWrapper:m.default,Linkcard:c.default,Loader:i.default,Messagebox:n.default,Progressbar:k.default,Radiobutton:s.default,Select:b.default,Table:e.default,TableBody:e.default,TableDataCell:e.default,TableHeader:e.default,TableHeaderCell:e.default,TableRow:e.default,Tabs:f.default,Tag:B.default,Textarea:P.default,Textinput:T.default},Symbol.toStringTag,{value:"Module"})),A={install(C,M={}){for(const H in p)I.registerPlugin(C,p[H])}};I.use(A);exports.Alert=q.default;exports.Accordion=t.default;exports.AccordionItem=t.default;exports.PktAccordion=t.PktAccordion;exports.PktAccordionItem=t.PktAccordionItem;exports.BackLink=a.default;exports.PktBackLink=a.PktBackLink;exports.Breadcrumbs=r.default;exports.PktBreadcrumbs=r.PktBreadcrumbs;exports.Button=g.default;exports.Checkbox=o.default;exports.PktCheckbox=o.PktCheckbox;exports.Footer=l.default;exports.PktFooter=l.PktFooter;exports.FooterSimple=u.default;exports.PktFooterSimple=u.PktFooterSimple;exports.Header=d.default;exports.PktHeader=d.PktHeader;exports.Icon=x.default;exports.InputWrapper=m.default;exports.Messagebox=n.default;exports.PktMessagebox=n.PktMessagebox;exports.Linkcard=c.default;exports.PktLinkcard=c.PktLinkcard;exports.Loader=i.default;exports.PktLoader=i.PktLoader;exports.PktProgressbar=k.PktProgressbar;exports.Progressbar=k.default;exports.PktRadiobutton=s.PktRadiobutton;exports.Radiobutton=s.default;exports.PktSelect=b.PktSelect;exports.Select=b.default;exports.PktTable=e.PktTable;exports.PktTableBody=e.PktTableBody;exports.PktTableDataCell=e.PktTableDataCell;exports.PktTableHeader=e.PktTableHeader;exports.PktTableHeaderCell=e.PktTableHeaderCell;exports.PktTableRow=e.PktTableRow;exports.Table=e.default;exports.TableBody=e.default;exports.TableDataCell=e.default;exports.TableHeader=e.default;exports.TableHeaderCell=e.default;exports.TableRow=e.default;exports.PktTabs=f.PktTabs;exports.Tabs=f.default;exports.Tag=B.default;exports.PktTextarea=P.PktTextarea;exports.Textarea=P.default;exports.PktTextinput=T.PktTextinput;exports.Textinput=T.default;exports.PktAlert=L.PktAlert;exports.PktButton=S.PktButton;exports.PktIcon=y.PktIcon;exports.PktInputWrapper=F.PktInputWrapper;exports.PktTag=R.Tag;exports.default=A;

package/dist/punkt-vue-index.js

@@ -1,49 +1,51 @@
 import m from "./punkt-vue-alert.js";
 import r from "./punkt-vue-accordion.js";
-import { PktAccordion as oo, PktAccordionItem as ro } from "./punkt-vue-accordion.js";
+import { PktAccordion as eo, PktAccordionItem as to } from "./punkt-vue-accordion.js";
 import i from "./punkt-vue-backlink.js";
-import { PktBackLink as eo } from "./punkt-vue-backlink.js";
+import { PktBackLink as mo } from "./punkt-vue-backlink.js";
 import l from "./punkt-vue-breadcrumbs.js";
-import { PktBreadcrumbs as mo } from "./punkt-vue-breadcrumbs.js";
+import { PktBreadcrumbs as lo } from "./punkt-vue-breadcrumbs.js";
 import p from "./punkt-vue-button.js";
 import n from "./punkt-vue-checkbox.js";
-import { PktCheckbox as lo } from "./punkt-vue-checkbox.js";
+import { PktCheckbox as no } from "./punkt-vue-checkbox.js";
 import s from "./punkt-vue-footer.js";
-import { PktFooter as no } from "./punkt-vue-footer.js";
+import { PktFooter as Po } from "./punkt-vue-footer.js";
 import P from "./punkt-vue-footersimple.js";
-import { PktFooterSimple as Po } from "./punkt-vue-footersimple.js";
+import { PktFooterSimple as uo } from "./punkt-vue-footersimple.js";
 import f from "./punkt-vue-header.js";
-import { PktHeader as uo } from "./punkt-vue-header.js";
+import { PktHeader as bo } from "./punkt-vue-header.js";
 import u from "./punkt-vue-icon.js";
 import k from "./punkt-vue-inputwrapper.js";
 import b from "./punkt-vue-messagebox.js";
-import { PktMessagebox as bo } from "./punkt-vue-messagebox.js";
+import { PktMessagebox as go } from "./punkt-vue-messagebox.js";
 import c from "./punkt-vue-linkcard.js";
-import { PktLinkcard as xo } from "./punkt-vue-linkcard.js";
-import d from "./punkt-vue-loader.js";
-import { PktLoader as To } from "./punkt-vue-loader.js";
-import x from "./punkt-vue-radiobutton.js";
-import { PktRadiobutton as Bo } from "./punkt-vue-radiobutton.js";
-import g from "./punkt-vue-select.js";
-import { PktSelect as Co } from "./punkt-vue-select.js";
+import { PktLinkcard as To } from "./punkt-vue-linkcard.js";
+import g from "./punkt-vue-loader.js";
+import { PktLoader as Bo } from "./punkt-vue-loader.js";
+import x from "./punkt-vue-progressbar.js";
+import { PktProgressbar as Co } from "./punkt-vue-progressbar.js";
+import d from "./punkt-vue-radiobutton.js";
+import { PktRadiobutton as Io } from "./punkt-vue-radiobutton.js";
+import T from "./punkt-vue-select.js";
+import { PktSelect as So } from "./punkt-vue-select.js";
 import o from "./punkt-vue-table.js";
-import { PktTable as Io, PktTableBody as Lo, PktTableDataCell as So, PktTableHeader as yo, PktTableHeaderCell as Fo, PktTableRow as Ro } from "./punkt-vue-table.js";
-import T from "./punkt-vue-tabs.js";
-import { PktTabs as Mo } from "./punkt-vue-tabs.js";
-import $ from "./punkt-vue-tag.js";
-import B from "./punkt-vue-textarea.js";
-import { PktTextarea as jo } from "./punkt-vue-textarea.js";
-import A from "./punkt-vue-textinput.js";
-import { PktTextinput as Do } from "./punkt-vue-textinput.js";
-import { u as C, r as H } from "./plugins-UPM181Xt.js";
-import { P as Oo } from "./Alert-LNP7MGFo.js";
-import { P as zo } from "./Button-5obh_jeA.js";
-import { P as qo } from "./Icon-8MjQJfqx.js";
-import { P as Go } from "./InputWrapper-aBvhZpl8.js";
-import { T as No } from "./Tag-jpZpXEPw.js";
+import { PktTable as Fo, PktTableBody as Ro, PktTableDataCell as ho, PktTableHeader as Mo, PktTableHeaderCell as _o, PktTableRow as jo } from "./punkt-vue-table.js";
+import $ from "./punkt-vue-tabs.js";
+import { PktTabs as Do } from "./punkt-vue-tabs.js";
+import B from "./punkt-vue-tag.js";
+import A from "./punkt-vue-textarea.js";
+import { PktTextarea as Oo } from "./punkt-vue-textarea.js";
+import C from "./punkt-vue-textinput.js";
+import { PktTextinput as zo } from "./punkt-vue-textinput.js";
+import { u as H, r as I } from "./plugins-UPM181Xt.js";
+import { P as qo } from "./Alert-LNP7MGFo.js";
+import { P as Go } from "./Button-5obh_jeA.js";
+import { P as No } from "./Icon-8MjQJfqx.js";
+import { P as Uo } from "./InputWrapper-aBvhZpl8.js";
+import { T as Xo } from "./Tag-jpZpXEPw.js";
 import "vue";
 import "./_plugin-vue_export-helper-hUChTQA_.js";
-const t = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const e = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Accordion: r,
   AccordionItem: r,
@@ -58,27 +60,28 @@ const t = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   Icon: u,
   InputWrapper: k,
   Linkcard: c,
-  Loader: d,
+  Loader: g,
   Messagebox: b,
-  Radiobutton: x,
-  Select: g,
+  Progressbar: x,
+  Radiobutton: d,
+  Select: T,
   Table: o,
   TableBody: o,
   TableDataCell: o,
   TableHeader: o,
   TableHeaderCell: o,
   TableRow: o,
-  Tabs: T,
-  Tag: $,
-  Textarea: B,
-  Textinput: A
-}, Symbol.toStringTag, { value: "Module" })), I = {
-  install(e, L = {}) {
-    for (const a in t)
-      H(e, t[a]);
+  Tabs: $,
+  Tag: B,
+  Textarea: A,
+  Textinput: C
+}, Symbol.toStringTag, { value: "Module" })), L = {
+  install(t, S = {}) {
+    for (const a in e)
+      I(t, e[a]);
   }
 };
-C(I);
+H(L);
 export {
   r as Accordion,
   r as AccordionItem,
@@ -93,46 +96,48 @@ export {
   u as Icon,
   k as InputWrapper,
   c as Linkcard,
-  d as Loader,
+  g as Loader,
   b as Messagebox,
-  oo as PktAccordion,
-  ro as PktAccordionItem,
-  Oo as PktAlert,
-  eo as PktBackLink,
-  mo as PktBreadcrumbs,
-  zo as PktButton,
-  lo as PktCheckbox,
-  no as PktFooter,
-  Po as PktFooterSimple,
-  uo as PktHeader,
-  qo as PktIcon,
-  Go as PktInputWrapper,
-  xo as PktLinkcard,
-  To as PktLoader,
-  bo as PktMessagebox,
-  Bo as PktRadiobutton,
-  Co as PktSelect,
-  Io as PktTable,
-  Lo as PktTableBody,
-  So as PktTableDataCell,
-  yo as PktTableHeader,
-  Fo as PktTableHeaderCell,
-  Ro as PktTableRow,
-  Mo as PktTabs,
-  No as PktTag,
-  jo as PktTextarea,
-  Do as PktTextinput,
-  x as Radiobutton,
-  g as Select,
+  eo as PktAccordion,
+  to as PktAccordionItem,
+  qo as PktAlert,
+  mo as PktBackLink,
+  lo as PktBreadcrumbs,
+  Go as PktButton,
+  no as PktCheckbox,
+  Po as PktFooter,
+  uo as PktFooterSimple,
+  bo as PktHeader,
+  No as PktIcon,
+  Uo as PktInputWrapper,
+  To as PktLinkcard,
+  Bo as PktLoader,
+  go as PktMessagebox,
+  Co as PktProgressbar,
+  Io as PktRadiobutton,
+  So as PktSelect,
+  Fo as PktTable,
+  Ro as PktTableBody,
+  ho as PktTableDataCell,
+  Mo as PktTableHeader,
+  _o as PktTableHeaderCell,
+  jo as PktTableRow,
+  Do as PktTabs,
+  Xo as PktTag,
+  Oo as PktTextarea,
+  zo as PktTextinput,
+  x as Progressbar,
+  d as Radiobutton,
+  T as Select,
   o as Table,
   o as TableBody,
   o as TableDataCell,
   o as TableHeader,
   o as TableHeaderCell,
   o as TableRow,
-  T as Tabs,
-  $ as Tag,
-  B as Textarea,
-  A as Textinput,
-  I as default
+  $ as Tabs,
+  B as Tag,
+  A as Textarea,
+  C as Textinput,
+  L as default
 };

package/dist/punkt-vue-progressbar.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("vue"),m=require("./plugins-IAlvxbZ2.cjs");var l=[];for(var i=0;i<256;++i)l.push((i+256).toString(16).slice(1));function P(e,t=0){return(l[e[t+0]]+l[e[t+1]]+l[e[t+2]]+l[e[t+3]]+"-"+l[e[t+4]]+l[e[t+5]]+"-"+l[e[t+6]]+l[e[t+7]]+"-"+l[e[t+8]]+l[e[t+9]]+"-"+l[e[t+10]]+l[e[t+11]]+l[e[t+12]]+l[e[t+13]]+l[e[t+14]]+l[e[t+15]]).toLowerCase()}var s,U=new Uint8Array(16);function V(){if(!s&&(s=typeof crypto<"u"&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!s))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return s(U)}var f=typeof crypto<"u"&&crypto.randomUUID&&crypto.randomUUID.bind(crypto);const v={randomUUID:f};function N(e,t,n){if(v.randomUUID&&!t&&!e)return v.randomUUID();e=e||{};var r=e.random||(e.rng||V)();if(r[6]=r[6]&15|64,r[8]=r[8]&63|128,t){n=n||0;for(var u=0;u<16;++u)t[n+u]=r[u];return t}return P(r)}const B=["id"],R=["id"],T=["role","aria-valuemin","aria-valuemax","aria-valuenow","aria-labelledby","aria-label","aria-valuetext"],g={__name:"Progressbar",props:{valueCurrent:{type:Number,required:!0},valueMax:{type:Number,default:100},valueMin:{type:Number,default:0},skin:{type:String,default:"dark-blue",validator:e=>["dark-blue","light-blue","green","red"].includes(e)},title:{type:String},titlePosition:{type:String,default:"left",validator:e=>["left","center"].includes(e)},statusType:{type:String,default:"none",validator:e=>["none","percentage","fraction"].includes(e)},statusPlacement:{type:String,default:"following",validator:e=>["center","left","following"].includes(e)},id:{type:String},ariaLabel:{type:String},ariaLabelledby:{type:String},ariaValueText:{type:String},role:{type:String,default:"progressbar",validator:e=>["progressbar","meter"].includes(e)},className:{type:String}},setup(e){const t=e,n=a.ref(null),r=a.ref(0);a.onMounted(()=>{n.value&&(r.value=n.value.getBoundingClientRect().width)}),a.watch(()=>t.valueCurrent,(d,p)=>{d!==p&&n.value&&(r.value=n.value.getBoundingClientRect().width)});const u=a.computed(()=>t.valueMax-t.valueMin),y=a.computed(()=>t.valueCurrent/u.value*100),c=a.computed(()=>t.valueMax!==100||t.valueMin!==0?Math.round(y.value):t.valueCurrent),k=a.computed(()=>`${t.valueCurrent} av ${t.valueMax}`),S=a.computed(()=>t.statusType!=="none"&&t.role==="progressbar"),o=a.computed(()=>t.id||N()),C=a.computed(()=>t.ariaLabelledby||t.title&&`${o.value}-title`),x=a.computed(()=>`pkt-progressbar__bar pkt-progressbar__bar--${t.skin}`),h=a.computed(()=>({"pkt-progressbar__title":!0,"pkt-progressbar__title-center":t.titlePosition==="center"})),_=a.computed(()=>({"pkt-progressbar__status":!0,"pkt-progressbar__status--center":t.statusPlacement==="center"})),w=a.computed(()=>({"pkt-progressbar__status-placement--following":t.statusPlacement==="following","pkt-progressbar__status-placement--center":t.statusPlacement==="center","pkt-progressbar__status-placement--left":t.statusPlacement==="left"})),M=a.computed(()=>({"--pkt-progress-label-width":`${r.value}px`,"--pkt-progress-width":`${c.value}%`}));return(d,p)=>(a.openBlock(),a.createElementBlock("div",{id:o.value,class:a.normalizeClass(["pkt-progressbar__container",e.className]),style:a.normalizeStyle(M.value)},[e.title?(a.openBlock(),a.createElementBlock("p",{key:0,id:`${o.value}-title`,class:a.normalizeClass(h.value)},a.toDisplayString(e.title),11,R)):a.createCommentVNode("",!0),a.createElementVNode("div",{role:e.role,class:"pkt-progressbar__bar-wrapper","aria-valuemin":e.valueMin,"aria-valuemax":e.valueMax,"aria-valuenow":e.valueCurrent,"aria-labelledby":C.value,"aria-label":e.ariaLabel,"aria-valuetext":e.ariaValueText},[a.createElementVNode("div",{class:a.normalizeClass(x.value)},null,2)],8,T),S.value?(a.openBlock(),a.createElementBlock("div",{key:1,class:a.normalizeClass(_.value)},[a.createElementVNode("span",{class:a.normalizeClass(w.value),ref_key:"labelRef",ref:n},a.toDisplayString(e.statusType==="percentage"?`${c.value}%`:k.value),3)],2)):a.createCommentVNode("",!0)],14,B))}},b={install(e){m.registerComponent(e,g)}};m.use(b);exports.PktProgressbar=g;exports.default=b;

package/dist/punkt-vue-progressbar.js

@@ -0,0 +1,162 @@
+import { ref as y, onMounted as V, watch as $, computed as r, openBlock as c, createElementBlock as d, normalizeClass as u, normalizeStyle as N, toDisplayString as k, createCommentVNode as x, createElementVNode as p } from "vue";
+import { u as T, a as D } from "./plugins-UPM181Xt.js";
+var a = [];
+for (var v = 0; v < 256; ++v)
+  a.push((v + 256).toString(16).slice(1));
+function I(e, t = 0) {
+  return (a[e[t + 0]] + a[e[t + 1]] + a[e[t + 2]] + a[e[t + 3]] + "-" + a[e[t + 4]] + a[e[t + 5]] + "-" + a[e[t + 6]] + a[e[t + 7]] + "-" + a[e[t + 8]] + a[e[t + 9]] + "-" + a[e[t + 10]] + a[e[t + 11]] + a[e[t + 12]] + a[e[t + 13]] + a[e[t + 14]] + a[e[t + 15]]).toLowerCase();
+}
+var i, L = new Uint8Array(16);
+function B() {
+  if (!i && (i = typeof crypto < "u" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto), !i))
+    throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
+  return i(L);
+}
+var E = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+const S = {
+  randomUUID: E
+};
+function z(e, t, n) {
+  if (S.randomUUID && !t && !e)
+    return S.randomUUID();
+  e = e || {};
+  var l = e.random || (e.rng || B)();
+  if (l[6] = l[6] & 15 | 64, l[8] = l[8] & 63 | 128, t) {
+    n = n || 0;
+    for (var s = 0; s < 16; ++s)
+      t[n + s] = l[s];
+    return t;
+  }
+  return I(l);
+}
+const A = ["id"], j = ["id"], q = ["role", "aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-labelledby", "aria-label", "aria-valuetext"], H = {
+  __name: "Progressbar",
+  props: {
+    valueCurrent: {
+      type: Number,
+      required: !0
+    },
+    valueMax: {
+      type: Number,
+      default: 100
+    },
+    valueMin: {
+      type: Number,
+      default: 0
+    },
+    skin: {
+      type: String,
+      default: "dark-blue",
+      validator: (e) => ["dark-blue", "light-blue", "green", "red"].includes(e)
+    },
+    title: {
+      type: String
+    },
+    titlePosition: {
+      type: String,
+      default: "left",
+      validator: (e) => ["left", "center"].includes(e)
+    },
+    statusType: {
+      type: String,
+      default: "none",
+      validator: (e) => ["none", "percentage", "fraction"].includes(e)
+    },
+    statusPlacement: {
+      type: String,
+      default: "following",
+      validator: (e) => ["center", "left", "following"].includes(e)
+    },
+    id: {
+      type: String
+    },
+    ariaLabel: {
+      type: String
+    },
+    ariaLabelledby: {
+      type: String
+    },
+    ariaValueText: {
+      type: String
+    },
+    role: {
+      type: String,
+      default: "progressbar",
+      validator: (e) => ["progressbar", "meter"].includes(e)
+    },
+    className: {
+      type: String
+    }
+  },
+  setup(e) {
+    const t = e, n = y(null), l = y(0);
+    V(() => {
+      n.value && (l.value = n.value.getBoundingClientRect().width);
+    }), $(
+      () => t.valueCurrent,
+      (m, b) => {
+        m !== b && n.value && (l.value = n.value.getBoundingClientRect().width);
+      }
+    );
+    const s = r(() => t.valueMax - t.valueMin), h = r(() => t.valueCurrent / s.value * 100), g = r(
+      () => t.valueMax !== 100 || t.valueMin !== 0 ? Math.round(h.value) : t.valueCurrent
+    ), w = r(() => `${t.valueCurrent} av ${t.valueMax}`), C = r(() => t.statusType !== "none" && t.role === "progressbar"), o = r(() => t.id || z()), _ = r(() => t.ariaLabelledby || t.title && `${o.value}-title`), P = r(() => `pkt-progressbar__bar pkt-progressbar__bar--${t.skin}`), M = r(() => ({
+      "pkt-progressbar__title": !0,
+      "pkt-progressbar__title-center": t.titlePosition === "center"
+    })), U = r(() => ({
+      "pkt-progressbar__status": !0,
+      "pkt-progressbar__status--center": t.statusPlacement === "center"
+    })), f = r(() => ({
+      "pkt-progressbar__status-placement--following": t.statusPlacement === "following",
+      "pkt-progressbar__status-placement--center": t.statusPlacement === "center",
+      "pkt-progressbar__status-placement--left": t.statusPlacement === "left"
+    })), R = r(() => ({
+      "--pkt-progress-label-width": `${l.value}px`,
+      "--pkt-progress-width": `${g.value}%`
+    }));
+    return (m, b) => (c(), d("div", {
+      id: o.value,
+      class: u(["pkt-progressbar__container", e.className]),
+      style: N(R.value)
+    }, [
+      e.title ? (c(), d("p", {
+        key: 0,
+        id: `${o.value}-title`,
+        class: u(M.value)
+      }, k(e.title), 11, j)) : x("", !0),
+      p("div", {
+        role: e.role,
+        class: "pkt-progressbar__bar-wrapper",
+        "aria-valuemin": e.valueMin,
+        "aria-valuemax": e.valueMax,
+        "aria-valuenow": e.valueCurrent,
+        "aria-labelledby": _.value,
+        "aria-label": e.ariaLabel,
+        "aria-valuetext": e.ariaValueText
+      }, [
+        p("div", {
+          class: u(P.value)
+        }, null, 2)
+      ], 8, q),
+      C.value ? (c(), d("div", {
+        key: 1,
+        class: u(U.value)
+      }, [
+        p("span", {
+          class: u(f.value),
+          ref_key: "labelRef",
+          ref: n
+        }, k(e.statusType === "percentage" ? `${g.value}%` : w.value), 3)
+      ], 2)) : x("", !0)
+    ], 14, A));
+  }
+}, O = {
+  install(e) {
+    D(e, H);
+  }
+};
+T(O);
+export {
+  H as PktProgressbar,
+  O as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-vue",
-  "version": "11.13.13",
+  "version": "11.14.0",
   "description": "Vue komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -26,8 +26,8 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@oslokommune/punkt-assets": "^11.13.13",
-    "@oslokommune/punkt-css": "^11.13.13",
+    "@oslokommune/punkt-assets": "^11.13.14",
+    "@oslokommune/punkt-css": "^11.14.0",
     "@vitejs/plugin-vue": "^4.5.2",
     "edit-json-file": "^1.7.0",
     "sass": "^1.69.5",
@@ -65,5 +65,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "0e14e568e7e3156eb3fce5d9dbc016bb9bb9ccf7"
+  "gitHead": "bb16f0f94234a0251ca4b9ebec68f65385cd7fa4"
 }

package/src/components/progressbar/Progressbar.vue

@@ -0,0 +1,137 @@
+<template>
+  <div :id="progressId" :class="['pkt-progressbar__container', className]" :style="containerStyles">
+    <p v-if="title" :id="`${progressId}-title`" :class="titleClasses">
+      {{ title }}
+    </p>
+    <div
+      :role="role"
+      class="pkt-progressbar__bar-wrapper"
+      :aria-valuemin="valueMin"
+      :aria-valuemax="valueMax"
+      :aria-valuenow="valueCurrent"
+      :aria-labelledby="computedAriaLabelledby"
+      :aria-label="ariaLabel"
+      :aria-valuetext="ariaValueText"
+    >
+      <div :class="barClasses"></div>
+    </div>
+    <div v-if="hasStatus" :class="statusClasses">
+      <span :class="placementClasses" ref="labelRef">
+        {{ statusType === 'percentage' ? `${currentPercentage}%` : formattedTitle }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import { v4 as uuidv4 } from 'uuid'
+
+const props = defineProps({
+  valueCurrent: {
+    type: Number,
+    required: true,
+  },
+  valueMax: {
+    type: Number,
+    default: 100,
+  },
+  valueMin: {
+    type: Number,
+    default: 0,
+  },
+  skin: {
+    type: String,
+    default: 'dark-blue',
+    validator: (value) => ['dark-blue', 'light-blue', 'green', 'red'].includes(value),
+  },
+  title: {
+    type: String,
+  },
+  titlePosition: {
+    type: String,
+    default: 'left',
+    validator: (value) => ['left', 'center'].includes(value),
+  },
+  statusType: {
+    type: String,
+    default: 'none',
+    validator: (value) => ['none', 'percentage', 'fraction'].includes(value),
+  },
+  statusPlacement: {
+    type: String,
+    default: 'following',
+    validator: (value) => ['center', 'left', 'following'].includes(value),
+  },
+  id: {
+    type: String,
+  },
+  ariaLabel: {
+    type: String,
+  },
+  ariaLabelledby: {
+    type: String,
+  },
+  ariaValueText: {
+    type: String,
+  },
+  role: {
+    type: String,
+    default: 'progressbar',
+    validator: (value) => ['progressbar', 'meter'].includes(value),
+  },
+  className: {
+    type: String,
+  },
+})
+
+const labelRef = ref(null)
+const labelWidth = ref(0)
+
+onMounted(() => {
+  if (labelRef.value) {
+    labelWidth.value = labelRef.value.getBoundingClientRect().width
+  }
+})
+
+watch(
+  () => props.valueCurrent,
+  (newVal, oldVal) => {
+    if (newVal !== oldVal && labelRef.value) {
+      labelWidth.value = labelRef.value.getBoundingClientRect().width
+    }
+  },
+)
+
+const totalSteps = computed(() => props.valueMax - props.valueMin)
+const percentageOfSteps = computed(() => (props.valueCurrent / totalSteps.value) * 100)
+const currentPercentage = computed(() =>
+  props.valueMax !== 100 || props.valueMin !== 0 ? Math.round(percentageOfSteps.value) : props.valueCurrent,
+)
+const formattedTitle = computed(() => `${props.valueCurrent} av ${props.valueMax}`)
+const hasStatus = computed(() => props.statusType !== 'none' && props.role === 'progressbar')
+const progressId = computed(() => props.id || uuidv4())
+const computedAriaLabelledby = computed(() => {
+  return props.ariaLabelledby || (props.title && `${progressId.value}-title`)
+})
+
+const barClasses = computed(() => `pkt-progressbar__bar pkt-progressbar__bar--${props.skin}`)
+const titleClasses = computed(() => ({
+  'pkt-progressbar__title': true,
+  'pkt-progressbar__title-center': props.titlePosition === 'center',
+}))
+const statusClasses = computed(() => ({
+  'pkt-progressbar__status': true,
+  'pkt-progressbar__status--center': props.statusPlacement === 'center',
+}))
+const placementClasses = computed(() => ({
+  'pkt-progressbar__status-placement--following': props.statusPlacement === 'following',
+  'pkt-progressbar__status-placement--center': props.statusPlacement === 'center',
+  'pkt-progressbar__status-placement--left': props.statusPlacement === 'left',
+}))
+
+const containerStyles = computed(() => ({
+  '--pkt-progress-label-width': `${labelWidth.value}px`,
+  '--pkt-progress-width': `${currentPercentage.value}%`,
+}))
+</script>