@oslokommune/punkt-elements 12.39.2 → 12.39.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +34 -0
- package/dist/{button-BOSdkRWa.js → button-BCCtR9ff.js} +28 -24
- package/dist/{button-DeAuj8qB.cjs → button-C60j8BsA.cjs} +3 -3
- package/dist/{consent-B3jbzwS_.cjs → consent-1ZSUrWK9.cjs} +1 -1
- package/dist/{consent-B4vlcsFJ.js → consent-c6eWVBWx.js} +1 -1
- package/dist/index.d.ts +7 -0
- package/dist/{loader-C9EtX_mK.js → loader-DhmtCyQA.js} +39 -35
- package/dist/loader-ndMy12Pb.cjs +11 -0
- package/dist/{modal-8bEB_CoY.js → modal-C8qYfLqF.js} +22 -22
- package/dist/{modal-B6VJdIeY.cjs → modal-CTh_wH8S.cjs} +1 -1
- package/dist/pkt-button.cjs +1 -1
- package/dist/pkt-button.js +1 -1
- package/dist/pkt-consent.cjs +1 -1
- package/dist/pkt-consent.js +1 -1
- package/dist/pkt-index.cjs +1 -1
- package/dist/pkt-index.js +4 -4
- package/dist/pkt-loader.cjs +1 -1
- package/dist/pkt-loader.js +1 -1
- package/dist/pkt-modal.cjs +1 -1
- package/dist/pkt-modal.js +1 -1
- package/package.json +3 -3
- package/src/components/button/button.ts +7 -1
- package/src/components/loader/loader.ts +10 -1
- package/src/components/modal/modal.ts +1 -1
- package/dist/loader-Bk4XPiOY.cjs +0 -11
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,40 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
|
|
|
5
5
|
|
|
6
6
|
---
|
|
7
7
|
|
|
8
|
+
## [12.39.5](https://github.com/oslokommune/punkt/compare/12.39.4...12.39.5) (2025-05-16)
|
|
9
|
+
|
|
10
|
+
### ⚠ BREAKING CHANGES
|
|
11
|
+
Ingen
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
Ingen
|
|
15
|
+
|
|
16
|
+
### Bug Fixes
|
|
17
|
+
Ingen
|
|
18
|
+
|
|
19
|
+
### Chores
|
|
20
|
+
Ingen
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
## [12.39.3](https://github.com/oslokommune/punkt/compare/12.39.2...12.39.3) (2025-05-15)
|
|
26
|
+
|
|
27
|
+
### ⚠ BREAKING CHANGES
|
|
28
|
+
Ingen
|
|
29
|
+
|
|
30
|
+
### Features
|
|
31
|
+
Ingen
|
|
32
|
+
|
|
33
|
+
### Bug Fixes
|
|
34
|
+
Ingen
|
|
35
|
+
|
|
36
|
+
### Chores
|
|
37
|
+
Ingen
|
|
38
|
+
|
|
39
|
+
---
|
|
40
|
+
|
|
41
|
+
|
|
8
42
|
## [12.39.0](https://github.com/oslokommune/punkt/compare/12.38.2...12.39.0) (2025-05-15)
|
|
9
43
|
|
|
10
44
|
### ⚠ BREAKING CHANGES
|
|
@@ -1,21 +1,22 @@
|
|
|
1
1
|
import { n as a, P as c, E as p, x as l, a as b } from "./element-DjjF_tEh.js";
|
|
2
2
|
import { P as f } from "./pkt-slot-controller-DtDaD9q_.js";
|
|
3
3
|
import { e as u, n as k } from "./ref-iIffqQAI.js";
|
|
4
|
-
var
|
|
5
|
-
for (var
|
|
6
|
-
(h = t[d]) && (
|
|
7
|
-
return
|
|
4
|
+
var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, e = (t, s, n, r) => {
|
|
5
|
+
for (var o = r > 1 ? void 0 : r ? y(s, n) : s, d = t.length - 1, h; d >= 0; d--)
|
|
6
|
+
(h = t[d]) && (o = (r ? h(s, n, o) : h(o)) || o);
|
|
7
|
+
return r && o && m(s, n, o), o;
|
|
8
8
|
};
|
|
9
|
+
window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/latest/animations/";
|
|
9
10
|
let i = class extends c {
|
|
10
11
|
constructor() {
|
|
11
|
-
super(), this.internals = this.attachInternals(), this.defaultSlot = u(), this.iconName = "user", this.secondIconName = "user", this.mode = "light", this.size = "medium", this.skin = "primary", this.variant = "label-only", this.state = "normal", this.type = "button", this.isLoading = !1, this.disabled = !1, this.slotController = new f(this, this.defaultSlot), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeydown);
|
|
12
|
+
super(), this.internals = this.attachInternals(), this.defaultSlot = u(), this.iconName = "user", this.secondIconName = "user", this.mode = "light", this.size = "medium", this.skin = "primary", this.variant = "label-only", this.state = "normal", this.type = "button", this.isLoading = !1, this.disabled = !1, this.loadingAnimationPath = window.pktAnimationPath, this.slotController = new f(this, this.defaultSlot), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeydown);
|
|
12
13
|
}
|
|
13
14
|
// Lifecycle
|
|
14
15
|
disconnectedCallback() {
|
|
15
16
|
super.disconnectedCallback(), this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeydown);
|
|
16
17
|
}
|
|
17
|
-
attributeChangedCallback(t,
|
|
18
|
-
super.attributeChangedCallback(t,
|
|
18
|
+
attributeChangedCallback(t, s, n) {
|
|
19
|
+
super.attributeChangedCallback(t, s, n), t === "disabled" && n === "false" && (this.disabled = !1), (t === "isloading" || t === "isLoading") && n === "false" && (this.isLoading = !1);
|
|
19
20
|
}
|
|
20
21
|
firstUpdated(t) {
|
|
21
22
|
super.firstUpdated(t), this.disabled === "false" && (this.disabled = !1), this.isLoading === "false" && (this.isLoading = !1);
|
|
@@ -30,7 +31,7 @@ let i = class extends c {
|
|
|
30
31
|
${this.isLoading ? l`<pkt-icon
|
|
31
32
|
class="pkt-btn__icon pkt-btn__spinner"
|
|
32
33
|
name="spinner-blue"
|
|
33
|
-
path
|
|
34
|
+
path=${this.loadingAnimationPath}
|
|
34
35
|
></pkt-icon>` : p}
|
|
35
36
|
${this.variant !== "label-only" ? l`<pkt-icon class="pkt-btn__icon pkt-icon" name=${this.iconName}></pkt-icon>` : p}
|
|
36
37
|
<span class="pkt-btn__text" ${k(this.defaultSlot)}></span>
|
|
@@ -40,8 +41,8 @@ let i = class extends c {
|
|
|
40
41
|
}
|
|
41
42
|
// Methods
|
|
42
43
|
updateElementClasses() {
|
|
43
|
-
const t = /* @__PURE__ */ new Set(),
|
|
44
|
-
t.add("pkt-btn"),
|
|
44
|
+
const t = /* @__PURE__ */ new Set(), s = this.getAttribute("class");
|
|
45
|
+
t.add("pkt-btn"), s && s.split(" ").forEach((n) => t.add(n)), this.size && t.add(`pkt-btn--${this.size}`), this.skin && t.add(`pkt-btn--${this.skin}`), this.variant && t.add(`pkt-btn--${this.variant}`), this.color && t.add(`pkt-btn--${this.color}`), this.isLoading && t.add("pkt-btn--active"), this.state && t.add(`pkt-btn--${this.state}`), this.disabled && t.add("pkt-btn--disabled"), this.className = [...t].join(" ");
|
|
45
46
|
}
|
|
46
47
|
handleClick(t) {
|
|
47
48
|
if (this.disabled || this.isLoading) {
|
|
@@ -67,46 +68,49 @@ let i = class extends c {
|
|
|
67
68
|
handleKeydown(t) {
|
|
68
69
|
if (!(this.disabled || this.isLoading) && (t.key === "Enter" || t.key === " ")) {
|
|
69
70
|
t.preventDefault();
|
|
70
|
-
const
|
|
71
|
-
|
|
71
|
+
const s = t.target;
|
|
72
|
+
s && s.click();
|
|
72
73
|
}
|
|
73
74
|
}
|
|
74
75
|
};
|
|
75
76
|
i.formAssociated = !0;
|
|
76
|
-
|
|
77
|
+
e([
|
|
77
78
|
a({ type: String })
|
|
78
79
|
], i.prototype, "iconName", 2);
|
|
79
|
-
|
|
80
|
+
e([
|
|
80
81
|
a({ type: String })
|
|
81
82
|
], i.prototype, "secondIconName", 2);
|
|
82
|
-
|
|
83
|
+
e([
|
|
83
84
|
a({ type: String })
|
|
84
85
|
], i.prototype, "mode", 2);
|
|
85
|
-
|
|
86
|
+
e([
|
|
86
87
|
a({ type: String })
|
|
87
88
|
], i.prototype, "size", 2);
|
|
88
|
-
|
|
89
|
+
e([
|
|
89
90
|
a({ type: String })
|
|
90
91
|
], i.prototype, "color", 2);
|
|
91
|
-
|
|
92
|
+
e([
|
|
92
93
|
a({ type: String })
|
|
93
94
|
], i.prototype, "skin", 2);
|
|
94
|
-
|
|
95
|
+
e([
|
|
95
96
|
a({ type: String })
|
|
96
97
|
], i.prototype, "variant", 2);
|
|
97
|
-
|
|
98
|
+
e([
|
|
98
99
|
a({ type: String, reflect: !0 })
|
|
99
100
|
], i.prototype, "state", 2);
|
|
100
|
-
|
|
101
|
+
e([
|
|
101
102
|
a({ type: String, reflect: !0 })
|
|
102
103
|
], i.prototype, "type", 2);
|
|
103
|
-
|
|
104
|
+
e([
|
|
104
105
|
a({ type: Boolean, reflect: !0 })
|
|
105
106
|
], i.prototype, "isLoading", 2);
|
|
106
|
-
|
|
107
|
+
e([
|
|
107
108
|
a({ type: Boolean, reflect: !0 })
|
|
108
109
|
], i.prototype, "disabled", 2);
|
|
109
|
-
|
|
110
|
+
e([
|
|
111
|
+
a({ type: String })
|
|
112
|
+
], i.prototype, "loadingAnimationPath", 2);
|
|
113
|
+
i = e([
|
|
110
114
|
b("pkt-button")
|
|
111
115
|
], i);
|
|
112
116
|
export {
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
"use strict";const i=require("./element-BSypUpzA.cjs"),h=require("./pkt-slot-controller-Da-RgXfS.cjs"),d=require("./ref-BvbyvXRH.cjs");var p=Object.defineProperty,u=Object.getOwnPropertyDescriptor,e=(o,t,s,n)=>{for(var a=n>1?void 0:n?u(t,s):t,r=o.length-1,l;r>=0;r--)(l=o[r])&&(a=(n?l(t,s,a):l(a))||a);return n&&a&&p(t,s,a),a};exports.PktButton=class extends i.PktElement{constructor(){super(),this.internals=this.attachInternals(),this.defaultSlot=d.e(),this.iconName="user",this.secondIconName="user",this.mode="light",this.size="medium",this.skin="primary",this.variant="label-only",this.state="normal",this.type="button",this.isLoading=!1,this.disabled=!1,this.slotController=new h.PktSlotController(this,this.defaultSlot),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeydown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeydown)}attributeChangedCallback(t,s,n){super.attributeChangedCallback(t,s,n),t==="disabled"&&n==="false"&&(this.disabled=!1),(t==="isloading"||t==="isLoading")&&n==="false"&&(this.isLoading=!1)}firstUpdated(t){super.firstUpdated(t),this.disabled==="false"&&(this.disabled=!1),this.isLoading==="false"&&(this.isLoading=!1)}updated(t){super.updated(t),this.setAttribute("role","button"),this.internals.role="button",this.disabled==="false"&&(this.disabled=!1),this.isLoading==="false"&&(this.isLoading=!1),this.disabled?(this.getAttribute("tabindex")!=="-1"&&this.setAttribute("tabindex","-1"),this.getAttribute("aria-disabled")!=="true"&&this.setAttribute("aria-disabled","true")):(this.getAttribute("tabindex")!=="0"&&this.setAttribute("tabindex","0"),this.getAttribute("aria-disabled")!=="false"&&this.removeAttribute("aria-disabled")),this.isLoading?this.getAttribute("aria-busy")!=="true"&&this.setAttribute("aria-busy","true"):this.hasAttribute("aria-busy")&&this.removeAttribute("aria-busy"),this.updateElementClasses()}render(){return i.x`
|
|
1
|
+
"use strict";const i=require("./element-BSypUpzA.cjs"),h=require("./pkt-slot-controller-Da-RgXfS.cjs"),d=require("./ref-BvbyvXRH.cjs");var p=Object.defineProperty,u=Object.getOwnPropertyDescriptor,e=(o,t,s,n)=>{for(var a=n>1?void 0:n?u(t,s):t,r=o.length-1,l;r>=0;r--)(l=o[r])&&(a=(n?l(t,s,a):l(a))||a);return n&&a&&p(t,s,a),a};window.pktAnimationPath=window.pktAnimationPath||"https://punkt-cdn.oslo.kommune.no/latest/animations/";exports.PktButton=class extends i.PktElement{constructor(){super(),this.internals=this.attachInternals(),this.defaultSlot=d.e(),this.iconName="user",this.secondIconName="user",this.mode="light",this.size="medium",this.skin="primary",this.variant="label-only",this.state="normal",this.type="button",this.isLoading=!1,this.disabled=!1,this.loadingAnimationPath=window.pktAnimationPath,this.slotController=new h.PktSlotController(this,this.defaultSlot),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeydown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeydown)}attributeChangedCallback(t,s,n){super.attributeChangedCallback(t,s,n),t==="disabled"&&n==="false"&&(this.disabled=!1),(t==="isloading"||t==="isLoading")&&n==="false"&&(this.isLoading=!1)}firstUpdated(t){super.firstUpdated(t),this.disabled==="false"&&(this.disabled=!1),this.isLoading==="false"&&(this.isLoading=!1)}updated(t){super.updated(t),this.setAttribute("role","button"),this.internals.role="button",this.disabled==="false"&&(this.disabled=!1),this.isLoading==="false"&&(this.isLoading=!1),this.disabled?(this.getAttribute("tabindex")!=="-1"&&this.setAttribute("tabindex","-1"),this.getAttribute("aria-disabled")!=="true"&&this.setAttribute("aria-disabled","true")):(this.getAttribute("tabindex")!=="0"&&this.setAttribute("tabindex","0"),this.getAttribute("aria-disabled")!=="false"&&this.removeAttribute("aria-disabled")),this.isLoading?this.getAttribute("aria-busy")!=="true"&&this.setAttribute("aria-busy","true"):this.hasAttribute("aria-busy")&&this.removeAttribute("aria-busy"),this.updateElementClasses()}render(){return i.x`
|
|
2
2
|
<div class="pkt-contents">
|
|
3
3
|
${this.isLoading?i.x`<pkt-icon
|
|
4
4
|
class="pkt-btn__icon pkt-btn__spinner"
|
|
5
5
|
name="spinner-blue"
|
|
6
|
-
path
|
|
6
|
+
path=${this.loadingAnimationPath}
|
|
7
7
|
></pkt-icon>`:i.E}
|
|
8
8
|
${this.variant!=="label-only"?i.x`<pkt-icon class="pkt-btn__icon pkt-icon" name=${this.iconName}></pkt-icon>`:i.E}
|
|
9
9
|
<span class="pkt-btn__text" ${d.n(this.defaultSlot)}></span>
|
|
10
10
|
${this.variant==="icons-right-and-left"?i.x`<pkt-icon class="pkt-btn__icon" name=${this.secondIconName}></pkt-icon>`:i.E}
|
|
11
11
|
</div>
|
|
12
|
-
`}updateElementClasses(){const t=new Set,s=this.getAttribute("class");t.add("pkt-btn"),s&&s.split(" ").forEach(n=>t.add(n)),this.size&&t.add(`pkt-btn--${this.size}`),this.skin&&t.add(`pkt-btn--${this.skin}`),this.variant&&t.add(`pkt-btn--${this.variant}`),this.color&&t.add(`pkt-btn--${this.color}`),this.isLoading&&t.add("pkt-btn--active"),this.state&&t.add(`pkt-btn--${this.state}`),this.disabled&&t.add("pkt-btn--disabled"),this.className=[...t].join(" ")}handleClick(t){if(this.disabled||this.isLoading){t.preventDefault(),t.stopImmediatePropagation();return}if(this.type==="submit"&&this.internals.form){this.internals.form.requestSubmit();return}if(this.type==="reset"&&this.internals.form){this.internals.form.reset();return}this.onClick&&typeof this.onClick=="function"&&this.onClick!==this.handleClick&&this.onClick(t),this.dispatchEvent(new CustomEvent("button-click",{bubbles:!0,composed:!0,detail:{originalEvent:t}}))}handleKeydown(t){if(!(this.disabled||this.isLoading)&&(t.key==="Enter"||t.key===" ")){t.preventDefault();const s=t.target;s&&s.click()}}};exports.PktButton.formAssociated=!0;e([i.n({type:String})],exports.PktButton.prototype,"iconName",2);e([i.n({type:String})],exports.PktButton.prototype,"secondIconName",2);e([i.n({type:String})],exports.PktButton.prototype,"mode",2);e([i.n({type:String})],exports.PktButton.prototype,"size",2);e([i.n({type:String})],exports.PktButton.prototype,"color",2);e([i.n({type:String})],exports.PktButton.prototype,"skin",2);e([i.n({type:String})],exports.PktButton.prototype,"variant",2);e([i.n({type:String,reflect:!0})],exports.PktButton.prototype,"state",2);e([i.n({type:String,reflect:!0})],exports.PktButton.prototype,"type",2);e([i.n({type:Boolean,reflect:!0})],exports.PktButton.prototype,"isLoading",2);e([i.n({type:Boolean,reflect:!0})],exports.PktButton.prototype,"disabled",2);exports.PktButton=e([i.t("pkt-button")],exports.PktButton);
|
|
12
|
+
`}updateElementClasses(){const t=new Set,s=this.getAttribute("class");t.add("pkt-btn"),s&&s.split(" ").forEach(n=>t.add(n)),this.size&&t.add(`pkt-btn--${this.size}`),this.skin&&t.add(`pkt-btn--${this.skin}`),this.variant&&t.add(`pkt-btn--${this.variant}`),this.color&&t.add(`pkt-btn--${this.color}`),this.isLoading&&t.add("pkt-btn--active"),this.state&&t.add(`pkt-btn--${this.state}`),this.disabled&&t.add("pkt-btn--disabled"),this.className=[...t].join(" ")}handleClick(t){if(this.disabled||this.isLoading){t.preventDefault(),t.stopImmediatePropagation();return}if(this.type==="submit"&&this.internals.form){this.internals.form.requestSubmit();return}if(this.type==="reset"&&this.internals.form){this.internals.form.reset();return}this.onClick&&typeof this.onClick=="function"&&this.onClick!==this.handleClick&&this.onClick(t),this.dispatchEvent(new CustomEvent("button-click",{bubbles:!0,composed:!0,detail:{originalEvent:t}}))}handleKeydown(t){if(!(this.disabled||this.isLoading)&&(t.key==="Enter"||t.key===" ")){t.preventDefault();const s=t.target;s&&s.click()}}};exports.PktButton.formAssociated=!0;e([i.n({type:String})],exports.PktButton.prototype,"iconName",2);e([i.n({type:String})],exports.PktButton.prototype,"secondIconName",2);e([i.n({type:String})],exports.PktButton.prototype,"mode",2);e([i.n({type:String})],exports.PktButton.prototype,"size",2);e([i.n({type:String})],exports.PktButton.prototype,"color",2);e([i.n({type:String})],exports.PktButton.prototype,"skin",2);e([i.n({type:String})],exports.PktButton.prototype,"variant",2);e([i.n({type:String,reflect:!0})],exports.PktButton.prototype,"state",2);e([i.n({type:String,reflect:!0})],exports.PktButton.prototype,"type",2);e([i.n({type:Boolean,reflect:!0})],exports.PktButton.prototype,"isLoading",2);e([i.n({type:Boolean,reflect:!0})],exports.PktButton.prototype,"disabled",2);e([i.n({type:String})],exports.PktButton.prototype,"loadingAnimationPath",2);exports.PktButton=e([i.t("pkt-button")],exports.PktButton);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const s=require("./element-BSypUpzA.cjs");require("./button-
|
|
1
|
+
"use strict";const s=require("./element-BSypUpzA.cjs");require("./button-C60j8BsA.cjs");require("./icon-BnKGwYjj.cjs");const g={i18n:{nb:{contentPresentation:{title:"Oslo kommune bruker informasjonskapsler",description:["For at nettstedet skal fungere og være trygt, bruker Oslo kommune informasjonskapsler. Noen er teknisk nødvendige, mens andre sikrer ulik funksjonalitet.","Godtar du alle informasjonskapsler, tillater du også at vi samler inn data om statistikk og brukeradferd. Da hjelper du oss med å lage et bedre nettsted uten at du trenger å dele noe personlig informasjon med oss."],buttons:{accept:"Godta alle",reject:"Kun nødvendige",settings:"Innstillinger for informasjonskapsler"}},contentSettings:{title:"Innstillinger for informasjonskapsler",description:["Her kan du velge hvilke typer informasjonskapsler du vil tillate. Tillatelsen gjelder i 90 dager. Husk at nødvendige informasjonskapsler ikke kan velges bort.","Du kan når som helst endre innstillingene og finne mer informasjon nederst på nettstedet under «Innstillinger for informasjonskapsler» og «Personvern og informasjonskapsler»."],buttons:{back:"Tilbake",save:"Lagre innstillinger"}}},en:{contentPresentation:{title:"Before you visit Oslo kommune ...",description:["This website uses cookies to make improvements. In this context, we need your consent to measure the traffic on the website in relation to statistics and feedback.","To read more about what we use cookies for, go to our privacy declaration which you will find at the bottom of our websites."],buttons:{accept:"Yes, I accept",reject:"Only necessary",settings:"Go to settings"}},contentSettings:{title:"Her kan du aktivt velge mellom ulike informasjonskapsler",description:["For å lese mer om hva vi bruker informasjonskapsler til gå til vår personvernserklering som du finner på våre nettsider"],buttons:{back:"Back",save:"Save settings"}}}}},c=globalThis,d=c.__cookieEvents||{events:{},on(n,e){this.events[n]||(this.events[n]=[]),this.events[n].push(e)},off(n,e){this.events[n]&&(this.events[n]=this.events[n].filter(t=>t!==e))},once(n,e){const t=o=>{this.off(n,t),e(o)};this.on(n,t)},emit(n,e){this.events[n]&&this.events[n].forEach(t=>t(e))}};c.__cookieEvents=d;const k=d;var u=Object.defineProperty,p=Object.getOwnPropertyDescriptor,a=(n,e,t,o)=>{for(var i=o>1?void 0:o?p(e,t):e,r=n.length-1,l;r>=0;r--)(l=n[r])&&(i=(o?l(e,t,i):l(i))||i);return o&&i&&u(e,t,i),i};exports.PktConsent=class extends s.PktElement{constructor(){super(),this.hotjarId=null,this.googleAnalyticsId=null,this.triggerType="button",this.triggerText=null,this.i18nLanguage="nb"}connectedCallback(){super.connectedCallback(),this.triggerText=this.triggerText||g.i18n[this.i18nLanguage].contentPresentation.buttons.settings,this.googleAnalyticsId&&(window.googleAnalyticsId=this.googleAnalyticsId),this.hotjarId&&(window.hotjarId=this.hotjarId),k.on("CookieManager.setCookie",e=>{this.emitCookieConsents(e)})}returnJsonOrObject(e){let t;try{t=JSON.parse(e)}catch{t=e}return t}emitCookieConsents(e){const o=this.returnJsonOrObject(e.value).items.reduce((i,r)=>(i[r.name]=r.consent,i),{});this.dispatchEvent(new CustomEvent("toggle-consent",{detail:o,bubbles:!0,composed:!0}))}firstUpdated(e){if(!document.querySelector("#oslo-consent-script")&&window.location.hostname.toLowerCase().includes("oslo.kommune.no")){window.googleAnalyticsId=this.googleAnalyticsId,window.hotjarId=this.hotjarId;const t=document.createElement("script");t.src="https://cdn.web.oslo.kommune.no/cb/cb-v1.0.0.js",t.id="oslo-consent-script",t.onload=()=>{this.triggerInit()},document.head.appendChild(t);const o=document.createElement("link");o.href="https://cdn.web.oslo.kommune.no/cb/cb-v1.0.0.css",o.type="text/css",o.rel="stylesheet",o.id="oslo-consent-styles",document.head.appendChild(o)}}triggerInit(){window.document.dispatchEvent(new Event("DOMContentLoaded",{bubbles:!0,cancelable:!0})),window.cookieBanner.cookieConsent.validateConsentCookie().then(e=>{if(e){const o={value:window.cookieBanner.cookieConsent.getConsentCookie()};this.emitCookieConsents(o)}})}openModal(e){e.preventDefault(),window.cookieBanner.cookieConsent||this.triggerInit(),setTimeout(()=>window.cookieBanner.openCookieModal())}render(){return this.triggerType==="link"?s.x`<a href="#" class="pkt-link" @click=${this.openModal}>${this.triggerText}</a>`:this.triggerType==="footerlink"?s.x`<a href="#" class="pkt-footer__link" @click=${this.openModal}>
|
|
2
2
|
<pkt-icon name="chevron-right" class="pkt-footer__link-icon"></pkt-icon>
|
|
3
3
|
${this.triggerText}
|
|
4
4
|
</a>`:this.triggerType==="icon"?s.x`<pkt-button
|
package/dist/index.d.ts
CHANGED
|
@@ -115,6 +115,7 @@ export declare interface IPktButton {
|
|
|
115
115
|
type?: TPktButtonType;
|
|
116
116
|
isLoading?: Booleanish;
|
|
117
117
|
disabled?: Booleanish;
|
|
118
|
+
loadingAnimationPath?: string;
|
|
118
119
|
}
|
|
119
120
|
|
|
120
121
|
declare interface IPktCard {
|
|
@@ -250,6 +251,10 @@ export declare interface IPktLoader {
|
|
|
250
251
|
* Other variants are "blue" and "rainbow" which are spinner variants.
|
|
251
252
|
*/
|
|
252
253
|
variant?: TPktLoaderVariant;
|
|
254
|
+
/**
|
|
255
|
+
* Override path to loading animations.
|
|
256
|
+
*/
|
|
257
|
+
loadingAnimationPath?: string;
|
|
253
258
|
}
|
|
254
259
|
|
|
255
260
|
declare interface IPktMessagebox {
|
|
@@ -365,6 +370,7 @@ export declare class PktButton extends PktElement<IPktButton> implements IPktBut
|
|
|
365
370
|
type: TPktButtonType;
|
|
366
371
|
isLoading: Booleanish;
|
|
367
372
|
disabled: Booleanish;
|
|
373
|
+
loadingAnimationPath: string | undefined;
|
|
368
374
|
disconnectedCallback(): void;
|
|
369
375
|
attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
|
|
370
376
|
protected firstUpdated(_changedProperties: PropertyValues): void;
|
|
@@ -923,6 +929,7 @@ export declare class PktLoader extends PktElement implements IPktLoader {
|
|
|
923
929
|
message: string | null;
|
|
924
930
|
size: TPktSize;
|
|
925
931
|
variant: TPktLoaderVariant;
|
|
932
|
+
loadingAnimationPath: string | undefined;
|
|
926
933
|
private _shouldDisplayLoader;
|
|
927
934
|
connectedCallback(): void;
|
|
928
935
|
updated(changedProperties: Map<string, unknown>): void;
|
|
@@ -1,47 +1,48 @@
|
|
|
1
|
-
import { P as u, E as
|
|
1
|
+
import { P as u, E as m, x as d, n as a, a as y } from "./element-DjjF_tEh.js";
|
|
2
2
|
import { e as h } from "./class-map-KyMqi0fa.js";
|
|
3
|
-
import { r as
|
|
4
|
-
import { e as f, n as
|
|
5
|
-
import { P as
|
|
3
|
+
import { r as c } from "./state-BtbpSrdV.js";
|
|
4
|
+
import { e as f, n as g } from "./ref-iIffqQAI.js";
|
|
5
|
+
import { P as v } from "./pkt-slot-controller-DtDaD9q_.js";
|
|
6
6
|
import "./icon-Beoxup8E.js";
|
|
7
|
-
var
|
|
8
|
-
for (var i = r > 1 ? void 0 : r ?
|
|
9
|
-
(
|
|
10
|
-
return r && i &&
|
|
7
|
+
var _ = Object.defineProperty, k = Object.getOwnPropertyDescriptor, e = (s, o, n, r) => {
|
|
8
|
+
for (var i = r > 1 ? void 0 : r ? k(o, n) : o, l = s.length - 1, p; l >= 0; l--)
|
|
9
|
+
(p = s[l]) && (i = (r ? p(o, n, i) : p(i)) || i);
|
|
10
|
+
return r && i && _(o, n, i), i;
|
|
11
11
|
};
|
|
12
|
+
window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/latest/animations/";
|
|
12
13
|
let t = class extends u {
|
|
13
14
|
constructor() {
|
|
14
|
-
super(), this.defaultSlot = f(), this.delay = 0, this.inline = !1, this.isLoading = !0, this.message = null, this.size = "medium", this.variant = "shapes", this._shouldDisplayLoader = !1, this.slotController = new
|
|
15
|
+
super(), this.defaultSlot = f(), this.delay = 0, this.inline = !1, this.isLoading = !0, this.message = null, this.size = "medium", this.variant = "shapes", this.loadingAnimationPath = window.pktAnimationPath, this._shouldDisplayLoader = !1, this.slotController = new v(this, this.defaultSlot);
|
|
15
16
|
}
|
|
16
17
|
connectedCallback() {
|
|
17
18
|
super.connectedCallback(), this._shouldDisplayLoader = this.delay === 0, this.delay > 0 && this.setupLoader();
|
|
18
19
|
}
|
|
19
|
-
updated(
|
|
20
|
-
|
|
20
|
+
updated(s) {
|
|
21
|
+
s.has("delay") && this.setupLoader();
|
|
21
22
|
}
|
|
22
23
|
render() {
|
|
23
|
-
const
|
|
24
|
+
const s = h({
|
|
24
25
|
"pkt-loader": !0,
|
|
25
26
|
[`pkt-loader--${this.inline ? "inline" : "box"}`]: !0,
|
|
26
27
|
[`pkt-loader--${this.size}`]: !0
|
|
27
|
-
}),
|
|
28
|
+
}), o = h({
|
|
28
29
|
"pkt-contents": !0,
|
|
29
30
|
"pkt-hide": this.isLoading
|
|
30
31
|
});
|
|
31
|
-
return d`<div role="status" aria-live="polite" .aria-busy=${this.isLoading} class=${
|
|
32
|
+
return d`<div role="status" aria-live="polite" .aria-busy=${this.isLoading} class=${s}>
|
|
32
33
|
${this.isLoading && this._shouldDisplayLoader ? d`<div class="pkt-loader__spinner">
|
|
33
34
|
<pkt-icon
|
|
34
35
|
name=${this.getVariant(this.variant)}
|
|
35
|
-
path
|
|
36
|
+
path=${this.loadingAnimationPath}
|
|
36
37
|
class="pkt-loader__svg pkt-loader__${this.variant}"
|
|
37
38
|
></pkt-icon>
|
|
38
39
|
${this.message && d`<p>${this.message}</p>`}
|
|
39
|
-
</div>` :
|
|
40
|
-
<div class=${
|
|
40
|
+
</div>` : m}
|
|
41
|
+
<div class=${o} ${g(this.defaultSlot)}></div>
|
|
41
42
|
</div>`;
|
|
42
43
|
}
|
|
43
|
-
getVariant(
|
|
44
|
-
switch (
|
|
44
|
+
getVariant(s) {
|
|
45
|
+
switch (s) {
|
|
45
46
|
case "blue":
|
|
46
47
|
return "spinner-blue";
|
|
47
48
|
case "rainbow":
|
|
@@ -56,29 +57,32 @@ let t = class extends u {
|
|
|
56
57
|
}, this.delay));
|
|
57
58
|
}
|
|
58
59
|
};
|
|
59
|
-
|
|
60
|
-
|
|
60
|
+
e([
|
|
61
|
+
a({ type: Number })
|
|
61
62
|
], t.prototype, "delay", 2);
|
|
62
|
-
|
|
63
|
-
|
|
63
|
+
e([
|
|
64
|
+
a({ type: Boolean })
|
|
64
65
|
], t.prototype, "inline", 2);
|
|
65
|
-
|
|
66
|
-
|
|
66
|
+
e([
|
|
67
|
+
a({ type: Boolean })
|
|
67
68
|
], t.prototype, "isLoading", 2);
|
|
68
|
-
|
|
69
|
-
|
|
69
|
+
e([
|
|
70
|
+
a({ type: String })
|
|
70
71
|
], t.prototype, "message", 2);
|
|
71
|
-
|
|
72
|
-
|
|
72
|
+
e([
|
|
73
|
+
a({ type: String })
|
|
73
74
|
], t.prototype, "size", 2);
|
|
74
|
-
|
|
75
|
-
|
|
75
|
+
e([
|
|
76
|
+
a({ type: String })
|
|
76
77
|
], t.prototype, "variant", 2);
|
|
77
|
-
|
|
78
|
-
|
|
78
|
+
e([
|
|
79
|
+
a({ type: String })
|
|
80
|
+
], t.prototype, "loadingAnimationPath", 2);
|
|
81
|
+
e([
|
|
82
|
+
c()
|
|
79
83
|
], t.prototype, "_shouldDisplayLoader", 2);
|
|
80
|
-
t =
|
|
81
|
-
|
|
84
|
+
t = e([
|
|
85
|
+
y("pkt-loader")
|
|
82
86
|
], t);
|
|
83
87
|
export {
|
|
84
88
|
t as P
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";const t=require("./element-BSypUpzA.cjs"),d=require("./class-map-DCyaICmy.cjs"),h=require("./state-B5KCNjEd.cjs"),p=require("./ref-BvbyvXRH.cjs"),u=require("./pkt-slot-controller-Da-RgXfS.cjs");require("./icon-BnKGwYjj.cjs");var c=Object.defineProperty,y=Object.getOwnPropertyDescriptor,s=(r,e,a,o)=>{for(var i=o>1?void 0:o?y(e,a):e,n=r.length-1,l;n>=0;n--)(l=r[n])&&(i=(o?l(e,a,i):l(i))||i);return o&&i&&c(e,a,i),i};window.pktAnimationPath=window.pktAnimationPath||"https://punkt-cdn.oslo.kommune.no/latest/animations/";exports.PktLoader=class extends t.PktElement{constructor(){super(),this.defaultSlot=p.e(),this.delay=0,this.inline=!1,this.isLoading=!0,this.message=null,this.size="medium",this.variant="shapes",this.loadingAnimationPath=window.pktAnimationPath,this._shouldDisplayLoader=!1,this.slotController=new u.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback(),this._shouldDisplayLoader=this.delay===0,this.delay>0&&this.setupLoader()}updated(e){e.has("delay")&&this.setupLoader()}render(){const e=d.e({"pkt-loader":!0,[`pkt-loader--${this.inline?"inline":"box"}`]:!0,[`pkt-loader--${this.size}`]:!0}),a=d.e({"pkt-contents":!0,"pkt-hide":this.isLoading});return t.x`<div role="status" aria-live="polite" .aria-busy=${this.isLoading} class=${e}>
|
|
2
|
+
${this.isLoading&&this._shouldDisplayLoader?t.x`<div class="pkt-loader__spinner">
|
|
3
|
+
<pkt-icon
|
|
4
|
+
name=${this.getVariant(this.variant)}
|
|
5
|
+
path=${this.loadingAnimationPath}
|
|
6
|
+
class="pkt-loader__svg pkt-loader__${this.variant}"
|
|
7
|
+
></pkt-icon>
|
|
8
|
+
${this.message&&t.x`<p>${this.message}</p>`}
|
|
9
|
+
</div>`:t.E}
|
|
10
|
+
<div class=${a} ${p.n(this.defaultSlot)}></div>
|
|
11
|
+
</div>`}getVariant(e){switch(e){case"blue":return"spinner-blue";case"rainbow":return"spinner";default:return"loader"}}setupLoader(){this.delay>0&&(this._shouldDisplayLoader=!1,setTimeout(()=>{this._shouldDisplayLoader=!0,this.requestUpdate()},this.delay))}};s([t.n({type:Number})],exports.PktLoader.prototype,"delay",2);s([t.n({type:Boolean})],exports.PktLoader.prototype,"inline",2);s([t.n({type:Boolean})],exports.PktLoader.prototype,"isLoading",2);s([t.n({type:String})],exports.PktLoader.prototype,"message",2);s([t.n({type:String})],exports.PktLoader.prototype,"size",2);s([t.n({type:String})],exports.PktLoader.prototype,"variant",2);s([t.n({type:String})],exports.PktLoader.prototype,"loadingAnimationPath",2);s([h.r()],exports.PktLoader.prototype,"_shouldDisplayLoader",2);exports.PktLoader=s([t.t("pkt-loader")],exports.PktLoader);
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { e as
|
|
2
|
-
import { P as
|
|
3
|
-
import { r as
|
|
1
|
+
import { e as p } from "./class-map-KyMqi0fa.js";
|
|
2
|
+
import { P as k, E as f, x as r, n, a as v } from "./element-DjjF_tEh.js";
|
|
3
|
+
import { r as g } from "./state-BtbpSrdV.js";
|
|
4
4
|
import { P as _ } from "./pkt-slot-controller-DtDaD9q_.js";
|
|
5
|
-
import { e as
|
|
5
|
+
import { e as u, n as m } from "./ref-iIffqQAI.js";
|
|
6
6
|
import "./icon-Beoxup8E.js";
|
|
7
7
|
const y = {
|
|
8
8
|
hideCloseButton: {
|
|
@@ -18,13 +18,13 @@ const y = {
|
|
|
18
18
|
props: y
|
|
19
19
|
};
|
|
20
20
|
var w = Object.defineProperty, b = Object.getOwnPropertyDescriptor, a = (t, e, o, i) => {
|
|
21
|
-
for (var l = i > 1 ? void 0 : i ? b(e, o) : e,
|
|
22
|
-
(d = t[
|
|
21
|
+
for (var l = i > 1 ? void 0 : i ? b(e, o) : e, c = t.length - 1, d; c >= 0; c--)
|
|
22
|
+
(d = t[c]) && (l = (i ? d(e, o, l) : d(l)) || l);
|
|
23
23
|
return i && l && w(e, o, l), l;
|
|
24
24
|
};
|
|
25
|
-
let s = class extends
|
|
25
|
+
let s = class extends k {
|
|
26
26
|
constructor() {
|
|
27
|
-
super(), this.headingText = "", this.removePadding = !1, this.hideCloseButton = h.props.hideCloseButton.default, this.closeOnBackdropClick = h.props.closeOnBackdropClick.default, this.closeButtonSkin = "blue", this.size = h.props.size.default, this.variant = "dialog", this.drawerPosition = "right", this.transparentBackdrop = !1, this.defaultSlot =
|
|
27
|
+
super(), this.headingText = "", this.removePadding = !1, this.hideCloseButton = h.props.hideCloseButton.default, this.closeOnBackdropClick = h.props.closeOnBackdropClick.default, this.closeButtonSkin = "blue", this.size = h.props.size.default, this.variant = "dialog", this.drawerPosition = "right", this.transparentBackdrop = !1, this.defaultSlot = u(), this.dialogRef = u(), this._isOpen = !1, this.close = (t, e = !1) => {
|
|
28
28
|
var i;
|
|
29
29
|
if (!this._isOpen) return;
|
|
30
30
|
this._isOpen = !1, document.body.classList.remove("pkt-modal--open");
|
|
@@ -86,30 +86,30 @@ let s = class extends f {
|
|
|
86
86
|
}, i = this.closeButtonSkin === "blue", l = {
|
|
87
87
|
"pkt-modal__closeButton": !0,
|
|
88
88
|
[`pkt-modal__closeButton--${this.closeButtonSkin}`]: !0
|
|
89
|
-
},
|
|
89
|
+
}, c = {
|
|
90
90
|
"pkt-btn": !0,
|
|
91
91
|
[`pkt-btn--${i ? "tertiary" : "primary"}`]: !0,
|
|
92
92
|
"pkt-btn--icon-only": !0,
|
|
93
93
|
"pkt-btn--medium": !0
|
|
94
94
|
};
|
|
95
|
-
return
|
|
95
|
+
return r`
|
|
96
96
|
<dialog
|
|
97
|
-
class=${
|
|
98
|
-
${
|
|
97
|
+
class=${p(t)}
|
|
98
|
+
${m(this.dialogRef)}
|
|
99
99
|
aria-labelledby="pkt-modal__headingText"
|
|
100
100
|
aria-describedby="pkt-modal__content"
|
|
101
101
|
@close=${(d) => this.close(d, !0)}
|
|
102
102
|
>
|
|
103
103
|
<div class="pkt-modal__wrapper">
|
|
104
|
-
${this.headingText || !this.hideCloseButton ?
|
|
104
|
+
${this.headingText || !this.hideCloseButton ? r`<div class="pkt-modal__header">
|
|
105
105
|
<div class="pkt-modal__header-background"></div>
|
|
106
|
-
${this.headingText ?
|
|
106
|
+
${this.headingText ? r`<h1 id="pkt-modal__headingText" class=${p(e)}>
|
|
107
107
|
${this.headingText}
|
|
108
|
-
</h1>` :
|
|
109
|
-
${this.hideCloseButton ?
|
|
108
|
+
</h1>` : r`<div class="pkt-modal__headingText"></div>`}
|
|
109
|
+
${this.hideCloseButton ? r`<div class="pkt-modal__noCloseButton"></div>` : r`<div class="${p(l)}">
|
|
110
110
|
<pkt-button
|
|
111
111
|
@click=${(d) => this.close(d)}
|
|
112
|
-
class=${c
|
|
112
|
+
class=${p(c)}
|
|
113
113
|
aria-label="close"
|
|
114
114
|
iconname="close"
|
|
115
115
|
variant="icon-only"
|
|
@@ -117,12 +117,12 @@ let s = class extends f {
|
|
|
117
117
|
Lukk
|
|
118
118
|
</pkt-button>
|
|
119
119
|
</div>`}
|
|
120
|
-
</div>` :
|
|
120
|
+
</div>` : f}
|
|
121
121
|
<div class="pkt-modal__container">
|
|
122
122
|
<div
|
|
123
123
|
id="pkt-modal__content"
|
|
124
|
-
class=${
|
|
125
|
-
${
|
|
124
|
+
class=${p(o)}
|
|
125
|
+
${m(this.defaultSlot)}
|
|
126
126
|
></div>
|
|
127
127
|
</div>
|
|
128
128
|
</div>
|
|
@@ -158,10 +158,10 @@ a([
|
|
|
158
158
|
n({ type: Boolean })
|
|
159
159
|
], s.prototype, "transparentBackdrop", 2);
|
|
160
160
|
a([
|
|
161
|
-
|
|
161
|
+
g()
|
|
162
162
|
], s.prototype, "_isOpen", 2);
|
|
163
163
|
s = a([
|
|
164
|
-
|
|
164
|
+
v("pkt-modal")
|
|
165
165
|
], s);
|
|
166
166
|
export {
|
|
167
167
|
s as P
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
${this.headingText?i.x`<h1 id="pkt-modal__headingText" class=${d.e(e)}>
|
|
13
13
|
${this.headingText}
|
|
14
14
|
</h1>`:i.x`<div class="pkt-modal__headingText"></div>`}
|
|
15
|
-
${this.hideCloseButton?i.
|
|
15
|
+
${this.hideCloseButton?i.x`<div class="pkt-modal__noCloseButton"></div>`:i.x`<div class="${d.e(n)}">
|
|
16
16
|
<pkt-button
|
|
17
17
|
@click=${p=>this.close(p)}
|
|
18
18
|
class=${d.e(a)}
|
package/dist/pkt-button.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./button-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./button-C60j8BsA.cjs"),e=t.PktButton;Object.defineProperty(exports,"PktButton",{enumerable:!0,get:()=>t.PktButton});exports.default=e;
|
package/dist/pkt-button.js
CHANGED
package/dist/pkt-consent.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./consent-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./consent-1ZSUrWK9.cjs"),t=e.PktConsent;Object.defineProperty(exports,"PktConsent",{enumerable:!0,get:()=>e.PktConsent});exports.default=t;
|
package/dist/pkt-consent.js
CHANGED
package/dist/pkt-index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("./alert-C2EPmB0W.cjs"),l=require("./accordionitem-RFwXQC_0.cjs"),d=require("./backlink-HHM21crL.cjs"),b=require("./button-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("./alert-C2EPmB0W.cjs"),l=require("./accordionitem-RFwXQC_0.cjs"),d=require("./backlink-HHM21crL.cjs"),b=require("./button-C60j8BsA.cjs"),k=require("./calendar-CYY42kN4.cjs"),m=require("./card-Di1MQneh.cjs"),g=require("./combobox-yUrUarU_.cjs"),h=require("./consent-1ZSUrWK9.cjs"),f=require("./checkbox-zqd3KVfz.cjs"),t=require("./element-BSypUpzA.cjs"),y=require("./pkt-slot-controller-Da-RgXfS.cjs"),s=require("./ref-BvbyvXRH.cjs"),O=require("./class-map-DCyaICmy.cjs"),j=require("./datepicker-CH5ZmFhf.cjs"),q=require("./helptext-bMgnhZ1R.cjs"),x=require("./heading-BnJhJDMD.cjs"),C=require("./icon-BnKGwYjj.cjs"),v=require("./input-wrapper-B-f_SotM.cjs"),S=require("./link-nesPZCIx.cjs"),$=require("./linkcard-s9yoOq90.cjs"),L=require("./loader-ndMy12Pb.cjs"),_=require("./messagebox-B0kgftoP.cjs"),A=require("./modal-CTh_wH8S.cjs"),B=require("./progressbar-DiRfScnB.cjs"),p=require("./radiobutton-CI2xaqAB.cjs"),T=require("./tag-B9kFYxHg.cjs"),I=require("./textarea-DxbylapQ.cjs"),M=require("./textinput-B__c4c1z.cjs"),R=require("./select-BCL790jM.cjs");var H=Object.defineProperty,w=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?w(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&H(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new y.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
|
|
2
2
|
<div class="${O.e(e)}">
|
|
3
3
|
<h1 class="pkt-txt-28">${this.string}</h1>
|
|
4
4
|
|
package/dist/pkt-index.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { P as A } from "./alert-C33z1kBf.js";
|
|
2
2
|
import { P as B, a as E } from "./accordionitem-vmwqD9rr.js";
|
|
3
3
|
import { P as O } from "./backlink-hvyJmwrO.js";
|
|
4
|
-
import { P as T } from "./button-
|
|
4
|
+
import { P as T } from "./button-BCCtR9ff.js";
|
|
5
5
|
import { c as f } from "./calendar-KDcOWD6V.js";
|
|
6
6
|
import { P as D } from "./calendar-KDcOWD6V.js";
|
|
7
7
|
import { P as G } from "./card-CZG7XGlj.js";
|
|
8
8
|
import { P as K } from "./combobox-B6x7Qukm.js";
|
|
9
|
-
import { P as U } from "./consent-
|
|
9
|
+
import { P as U } from "./consent-c6eWVBWx.js";
|
|
10
10
|
import { P as q } from "./checkbox-Ds1FrhqK.js";
|
|
11
11
|
import { P as k, t as h, x as P, n, a as c } from "./element-DjjF_tEh.js";
|
|
12
12
|
import { P as x } from "./pkt-slot-controller-DtDaD9q_.js";
|
|
@@ -19,9 +19,9 @@ import { P as Z } from "./icon-Beoxup8E.js";
|
|
|
19
19
|
import { P as et } from "./input-wrapper-BdeoMGnk.js";
|
|
20
20
|
import { P as ot } from "./link-DCYJhFKJ.js";
|
|
21
21
|
import { P as at } from "./linkcard-Bt-Qa_SP.js";
|
|
22
|
-
import { P as it } from "./loader-
|
|
22
|
+
import { P as it } from "./loader-DhmtCyQA.js";
|
|
23
23
|
import { P as lt } from "./messagebox-DZDP8XZt.js";
|
|
24
|
-
import { P as mt } from "./modal-
|
|
24
|
+
import { P as mt } from "./modal-C8qYfLqF.js";
|
|
25
25
|
import { P as ft } from "./progressbar-BKt_aj7f.js";
|
|
26
26
|
import { P as ht, P as ct } from "./radiobutton-CYJawqxD.js";
|
|
27
27
|
import { P as ut } from "./tag-Cu8afZy8.js";
|
package/dist/pkt-loader.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./loader-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./loader-ndMy12Pb.cjs"),t=e.PktLoader;Object.defineProperty(exports,"PktLoader",{enumerable:!0,get:()=>e.PktLoader});exports.default=t;
|
package/dist/pkt-loader.js
CHANGED
package/dist/pkt-modal.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./modal-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./modal-CTh_wH8S.cjs"),t=e.PktModal;Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>e.PktModal});exports.default=t;
|
package/dist/pkt-modal.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oslokommune/punkt-elements",
|
|
3
|
-
"version": "12.39.
|
|
3
|
+
"version": "12.39.5",
|
|
4
4
|
"description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
|
|
5
5
|
"homepage": "https://punkt.oslo.kommune.no",
|
|
6
6
|
"author": "Team Designsystem, Oslo Origo",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
34
|
"@oslokommune/punkt-assets": "^12.39.2",
|
|
35
|
-
"@oslokommune/punkt-css": "^12.39.
|
|
35
|
+
"@oslokommune/punkt-css": "^12.39.5",
|
|
36
36
|
"sass": "^1.78.0",
|
|
37
37
|
"typescript": "^5.6.2",
|
|
38
38
|
"vite": "^5.4.18",
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"url": "https://github.com/oslokommune/punkt/issues"
|
|
60
60
|
},
|
|
61
61
|
"license": "MIT",
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "1c97e7a7a152408f9574d3e95d5a4497a04317f6"
|
|
63
63
|
}
|
|
@@ -5,6 +5,10 @@ import { html, nothing, PropertyValues } from 'lit'
|
|
|
5
5
|
import { property, customElement } from 'lit/decorators.js'
|
|
6
6
|
import { createRef, Ref, ref } from 'lit/directives/ref.js'
|
|
7
7
|
|
|
8
|
+
// Allow global override of animation assets path
|
|
9
|
+
window.pktAnimationPath =
|
|
10
|
+
window.pktAnimationPath || 'https://punkt-cdn.oslo.kommune.no/latest/animations/'
|
|
11
|
+
|
|
8
12
|
type Booleanish = boolean | 'true' | 'false'
|
|
9
13
|
export type TPktButtonMode = 'light' | 'dark'
|
|
10
14
|
export type TPktButtonSize = 'small' | 'medium' | 'large'
|
|
@@ -43,6 +47,7 @@ export interface IPktButton {
|
|
|
43
47
|
type?: TPktButtonType
|
|
44
48
|
isLoading?: Booleanish
|
|
45
49
|
disabled?: Booleanish
|
|
50
|
+
loadingAnimationPath?: string
|
|
46
51
|
}
|
|
47
52
|
@customElement('pkt-button')
|
|
48
53
|
export class PktButton extends PktElement<IPktButton> implements IPktButton {
|
|
@@ -70,6 +75,7 @@ export class PktButton extends PktElement<IPktButton> implements IPktButton {
|
|
|
70
75
|
@property({ type: String, reflect: true }) type: TPktButtonType = 'button'
|
|
71
76
|
@property({ type: Boolean, reflect: true }) isLoading: Booleanish = false
|
|
72
77
|
@property({ type: Boolean, reflect: true }) disabled: Booleanish = false
|
|
78
|
+
@property({ type: String }) loadingAnimationPath: string | undefined = window.pktAnimationPath
|
|
73
79
|
|
|
74
80
|
// Lifecycle
|
|
75
81
|
|
|
@@ -151,7 +157,7 @@ export class PktButton extends PktElement<IPktButton> implements IPktButton {
|
|
|
151
157
|
? html`<pkt-icon
|
|
152
158
|
class="pkt-btn__icon pkt-btn__spinner"
|
|
153
159
|
name="spinner-blue"
|
|
154
|
-
path
|
|
160
|
+
path=${this.loadingAnimationPath}
|
|
155
161
|
></pkt-icon>`
|
|
156
162
|
: nothing}
|
|
157
163
|
${this.variant !== 'label-only'
|
|
@@ -7,6 +7,10 @@ import { PktSlotController } from '@/controllers/pkt-slot-controller'
|
|
|
7
7
|
import { TPktSize } from '@/types/size'
|
|
8
8
|
import '@/components/icon'
|
|
9
9
|
|
|
10
|
+
// Allow global override of animation assets path
|
|
11
|
+
window.pktAnimationPath =
|
|
12
|
+
window.pktAnimationPath || 'https://punkt-cdn.oslo.kommune.no/latest/animations/'
|
|
13
|
+
|
|
10
14
|
export type TPktLoaderVariant = 'blue' | 'rainbow' | 'shapes'
|
|
11
15
|
|
|
12
16
|
export interface IPktLoader {
|
|
@@ -38,6 +42,10 @@ export interface IPktLoader {
|
|
|
38
42
|
* Other variants are "blue" and "rainbow" which are spinner variants.
|
|
39
43
|
*/
|
|
40
44
|
variant?: TPktLoaderVariant
|
|
45
|
+
/**
|
|
46
|
+
* Override path to loading animations.
|
|
47
|
+
*/
|
|
48
|
+
loadingAnimationPath?: string
|
|
41
49
|
}
|
|
42
50
|
|
|
43
51
|
@customElement('pkt-loader')
|
|
@@ -55,6 +63,7 @@ export class PktLoader extends PktElement implements IPktLoader {
|
|
|
55
63
|
@property({ type: String }) message: string | null = null
|
|
56
64
|
@property({ type: String }) size: TPktSize = 'medium'
|
|
57
65
|
@property({ type: String }) variant: TPktLoaderVariant = 'shapes'
|
|
66
|
+
@property({ type: String }) loadingAnimationPath: string | undefined = window.pktAnimationPath
|
|
58
67
|
|
|
59
68
|
@state() private _shouldDisplayLoader: boolean = false
|
|
60
69
|
|
|
@@ -90,7 +99,7 @@ export class PktLoader extends PktElement implements IPktLoader {
|
|
|
90
99
|
? html`<div class="pkt-loader__spinner">
|
|
91
100
|
<pkt-icon
|
|
92
101
|
name=${this.getVariant(this.variant)}
|
|
93
|
-
path
|
|
102
|
+
path=${this.loadingAnimationPath}
|
|
94
103
|
class="pkt-loader__svg pkt-loader__${this.variant}"
|
|
95
104
|
></pkt-icon>
|
|
96
105
|
${this.message && html`<p>${this.message}</p>`}
|
package/dist/loader-Bk4XPiOY.cjs
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
"use strict";const e=require("./element-BSypUpzA.cjs"),d=require("./class-map-DCyaICmy.cjs"),u=require("./state-B5KCNjEd.cjs"),p=require("./ref-BvbyvXRH.cjs"),h=require("./pkt-slot-controller-Da-RgXfS.cjs");require("./icon-BnKGwYjj.cjs");var c=Object.defineProperty,y=Object.getOwnPropertyDescriptor,s=(o,t,r,i)=>{for(var a=i>1?void 0:i?y(t,r):t,l=o.length-1,n;l>=0;l--)(n=o[l])&&(a=(i?n(t,r,a):n(a))||a);return i&&a&&c(t,r,a),a};exports.PktLoader=class extends e.PktElement{constructor(){super(),this.defaultSlot=p.e(),this.delay=0,this.inline=!1,this.isLoading=!0,this.message=null,this.size="medium",this.variant="shapes",this._shouldDisplayLoader=!1,this.slotController=new h.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback(),this._shouldDisplayLoader=this.delay===0,this.delay>0&&this.setupLoader()}updated(t){t.has("delay")&&this.setupLoader()}render(){const t=d.e({"pkt-loader":!0,[`pkt-loader--${this.inline?"inline":"box"}`]:!0,[`pkt-loader--${this.size}`]:!0}),r=d.e({"pkt-contents":!0,"pkt-hide":this.isLoading});return e.x`<div role="status" aria-live="polite" .aria-busy=${this.isLoading} class=${t}>
|
|
2
|
-
${this.isLoading&&this._shouldDisplayLoader?e.x`<div class="pkt-loader__spinner">
|
|
3
|
-
<pkt-icon
|
|
4
|
-
name=${this.getVariant(this.variant)}
|
|
5
|
-
path="https://punkt-cdn.oslo.kommune.no/latest/animations/"
|
|
6
|
-
class="pkt-loader__svg pkt-loader__${this.variant}"
|
|
7
|
-
></pkt-icon>
|
|
8
|
-
${this.message&&e.x`<p>${this.message}</p>`}
|
|
9
|
-
</div>`:e.E}
|
|
10
|
-
<div class=${r} ${p.n(this.defaultSlot)}></div>
|
|
11
|
-
</div>`}getVariant(t){switch(t){case"blue":return"spinner-blue";case"rainbow":return"spinner";default:return"loader"}}setupLoader(){this.delay>0&&(this._shouldDisplayLoader=!1,setTimeout(()=>{this._shouldDisplayLoader=!0,this.requestUpdate()},this.delay))}};s([e.n({type:Number})],exports.PktLoader.prototype,"delay",2);s([e.n({type:Boolean})],exports.PktLoader.prototype,"inline",2);s([e.n({type:Boolean})],exports.PktLoader.prototype,"isLoading",2);s([e.n({type:String})],exports.PktLoader.prototype,"message",2);s([e.n({type:String})],exports.PktLoader.prototype,"size",2);s([e.n({type:String})],exports.PktLoader.prototype,"variant",2);s([u.r()],exports.PktLoader.prototype,"_shouldDisplayLoader",2);exports.PktLoader=s([e.t("pkt-loader")],exports.PktLoader);
|