@oslokommune/punkt-elements 12.39.2 → 12.39.3
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 +17 -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/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 +3 -3
- package/dist/pkt-loader.cjs +1 -1
- package/dist/pkt-loader.js +1 -1
- package/package.json +2 -2
- package/src/components/button/button.ts +7 -1
- package/src/components/loader/loader.ts +10 -1
- package/dist/loader-Bk4XPiOY.cjs +0 -11
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,23 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
|
|
|
5
5
|
|
|
6
6
|
---
|
|
7
7
|
|
|
8
|
+
## [12.39.3](https://github.com/oslokommune/punkt/compare/12.39.2...12.39.3) (2025-05-15)
|
|
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
|
+
|
|
8
25
|
## [12.39.0](https://github.com/oslokommune/punkt/compare/12.38.2...12.39.0) (2025-05-15)
|
|
9
26
|
|
|
10
27
|
### ⚠ 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);
|
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-B6VJdIeY.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,7 +19,7 @@ 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
24
|
import { P as mt } from "./modal-8bEB_CoY.js";
|
|
25
25
|
import { P as ft } from "./progressbar-BKt_aj7f.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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oslokommune/punkt-elements",
|
|
3
|
-
"version": "12.39.
|
|
3
|
+
"version": "12.39.3",
|
|
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",
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"url": "https://github.com/oslokommune/punkt/issues"
|
|
60
60
|
},
|
|
61
61
|
"license": "MIT",
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "c88ba92dc350dc69efb3ad34a03fefa85901741b"
|
|
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);
|