@oslokommune/punkt-elements 12.42.6 → 12.42.8

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 CHANGED
@@ -5,6 +5,23 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
5
5
 
6
6
  ---
7
7
 
8
+ ## [12.42.8](https://github.com/oslokommune/punkt/compare/12.42.7...12.42.8) (2025-06-19)
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.42.6](https://github.com/oslokommune/punkt/compare/12.42.5...12.42.6) (2025-06-18)
9
26
 
10
27
  ### ⚠ BREAKING CHANGES
@@ -0,0 +1,19 @@
1
+ "use strict";const t=require("./element-90YeMNbV.cjs"),h=require("./pkt-slot-controller-Da-RgXfS.cjs"),u=require("./class-map-DWDPOqjO.cjs"),a=require("./if-defined-C8eotHpL.cjs"),d=require("./ref-B-w1vCo8.cjs");var c=Object.defineProperty,k=Object.getOwnPropertyDescriptor,e=(r,i,s,n)=>{for(var o=n>1?void 0:n?k(i,s):i,p=r.length-1,l;p>=0;p--)(l=r[p])&&(o=(n?l(i,s,o):l(o))||o);return n&&o&&c(i,s,o),o};window.pktAnimationPath=window.pktAnimationPath||"https://punkt-cdn.oslo.kommune.no/latest/animations/";exports.PktButton=class extends t.PktElement{constructor(){super(),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.form=void 0,this.isLoading=!1,this.disabled=!1,this.loadingAnimationPath=window.pktAnimationPath,this.slotController=new h.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback(),this.addEventListener("click",i=>{(this.disabled||this.hasAttribute("disabled")||this.isLoading)&&(i.preventDefault(),i.stopImmediatePropagation())},!0),this.addEventListener("keydown",i=>{(this.disabled||this.hasAttribute("disabled")||this.isLoading)&&(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),i.stopImmediatePropagation())},!0)}attributeChangedCallback(i,s,n){super.attributeChangedCallback(i,s,n),i==="disabled"&&n==="false"&&(this.disabled=!1),(i==="isloading"||i==="isLoading")&&n==="false"&&(this.isLoading=!1)}firstUpdated(i){super.firstUpdated(i),this.disabled==="false"&&(this.disabled=!1),this.isLoading==="false"&&(this.isLoading=!1)}render(){const i=this.form??this.getAttribute("form")??void 0,s={"pkt-btn":!0,[`pkt-btn--${this.size}`]:!!this.size,[`pkt-btn--${this.skin}`]:!!this.skin,[`pkt-btn--${this.variant}`]:!!this.variant,[`pkt-btn--${this.color}`]:!!this.color,[`pkt-btn--${this.state}`]:!!this.state,"pkt-btn--disabled":!!this.disabled,"pkt-btn--isLoading":!!this.isLoading};return t.x`
2
+ <button
3
+ class=${u.e(s)}
4
+ type=${this.type}
5
+ ?disabled=${!!this.disabled}
6
+ aria-busy=${a.o(this.isLoading?"true":void 0)}
7
+ aria-disabled=${a.o(this.disabled||this.isLoading?"true":void 0)}
8
+ form=${a.o(i)}
9
+ >
10
+ ${this.isLoading?t.x`<pkt-icon
11
+ class="pkt-btn__icon pkt-btn__spinner"
12
+ name="spinner-blue"
13
+ path=${a.o(this.loadingAnimationPath)}
14
+ ></pkt-icon>`:t.E}
15
+ ${this.variant!=="label-only"?t.x`<pkt-icon class="pkt-btn__icon pkt-icon" name=${this.iconName}></pkt-icon>`:t.E}
16
+ <span class="pkt-btn__text" ${d.n(this.defaultSlot)}></span>
17
+ ${this.variant==="icons-right-and-left"?t.x`<pkt-icon class="pkt-btn__icon" name=${this.secondIconName}></pkt-icon>`:t.E}
18
+ </button>
19
+ `}};e([t.n({type:String})],exports.PktButton.prototype,"iconName",2);e([t.n({type:String})],exports.PktButton.prototype,"secondIconName",2);e([t.n({type:String})],exports.PktButton.prototype,"mode",2);e([t.n({type:String})],exports.PktButton.prototype,"size",2);e([t.n({type:String})],exports.PktButton.prototype,"color",2);e([t.n({type:String})],exports.PktButton.prototype,"skin",2);e([t.n({type:String})],exports.PktButton.prototype,"variant",2);e([t.n({type:String,reflect:!0})],exports.PktButton.prototype,"state",2);e([t.n({type:String,reflect:!0})],exports.PktButton.prototype,"type",2);e([t.n({type:String})],exports.PktButton.prototype,"form",2);e([t.n({type:Boolean,reflect:!0})],exports.PktButton.prototype,"isLoading",2);e([t.n({type:Boolean,reflect:!0})],exports.PktButton.prototype,"disabled",2);e([t.n({type:String})],exports.PktButton.prototype,"loadingAnimationPath",2);exports.PktButton=e([t.t("pkt-button")],exports.PktButton);
@@ -1,28 +1,43 @@
1
1
  import { P as b, E as c, x as p, n as s, a as f } from "./element-gAd63VwC.js";
2
2
  import { P as m } from "./pkt-slot-controller-DtDaD9q_.js";
3
- import { e as y } from "./class-map-m7ZCZ49w.js";
3
+ import { e as u } from "./class-map-m7ZCZ49w.js";
4
4
  import { o as l } from "./if-defined-Cj-3Kdsr.js";
5
- import { e as g, n as k } from "./ref-DnSbnXsj.js";
6
- var u = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, i = (e, o, n, r) => {
7
- for (var a = r > 1 ? void 0 : r ? $(o, n) : o, d = e.length - 1, h; d >= 0; d--)
8
- (h = e[d]) && (a = (r ? h(o, n, a) : h(a)) || a);
9
- return r && a && u(o, n, a), a;
5
+ import { e as y, n as k } from "./ref-DnSbnXsj.js";
6
+ var g = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, e = (t, o, n, r) => {
7
+ for (var a = r > 1 ? void 0 : r ? $(o, n) : o, d = t.length - 1, h; d >= 0; d--)
8
+ (h = t[d]) && (a = (r ? h(o, n, a) : h(a)) || a);
9
+ return r && a && g(o, n, a), a;
10
10
  };
11
11
  window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/latest/animations/";
12
- let t = class extends b {
12
+ let i = class extends b {
13
13
  constructor() {
14
- super(), this.defaultSlot = g(), 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.form = void 0, this.isLoading = !1, this.disabled = !1, this.loadingAnimationPath = window.pktAnimationPath, this.slotController = new m(this, this.defaultSlot);
14
+ super(), this.defaultSlot = y(), 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.form = void 0, this.isLoading = !1, this.disabled = !1, this.loadingAnimationPath = window.pktAnimationPath, this.slotController = new m(this, this.defaultSlot);
15
15
  }
16
16
  // Lifecycle
17
- attributeChangedCallback(e, o, n) {
18
- super.attributeChangedCallback(e, o, n), e === "disabled" && n === "false" && (this.disabled = !1), (e === "isloading" || e === "isLoading") && n === "false" && (this.isLoading = !1);
17
+ connectedCallback() {
18
+ super.connectedCallback(), this.addEventListener(
19
+ "click",
20
+ (t) => {
21
+ (this.disabled || this.hasAttribute("disabled") || this.isLoading) && (t.preventDefault(), t.stopImmediatePropagation());
22
+ },
23
+ !0
24
+ ), this.addEventListener(
25
+ "keydown",
26
+ (t) => {
27
+ (this.disabled || this.hasAttribute("disabled") || this.isLoading) && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopImmediatePropagation());
28
+ },
29
+ !0
30
+ );
19
31
  }
20
- firstUpdated(e) {
21
- super.firstUpdated(e), this.disabled === "false" && (this.disabled = !1), this.isLoading === "false" && (this.isLoading = !1);
32
+ attributeChangedCallback(t, o, n) {
33
+ super.attributeChangedCallback(t, o, n), t === "disabled" && n === "false" && (this.disabled = !1), (t === "isloading" || t === "isLoading") && n === "false" && (this.isLoading = !1);
34
+ }
35
+ firstUpdated(t) {
36
+ super.firstUpdated(t), this.disabled === "false" && (this.disabled = !1), this.isLoading === "false" && (this.isLoading = !1);
22
37
  }
23
38
  // Render
24
39
  render() {
25
- const e = this.form ?? this.getAttribute("form") ?? void 0, o = {
40
+ const t = this.form ?? this.getAttribute("form") ?? void 0, o = {
26
41
  "pkt-btn": !0,
27
42
  [`pkt-btn--${this.size}`]: !!this.size,
28
43
  [`pkt-btn--${this.skin}`]: !!this.skin,
@@ -34,12 +49,12 @@ let t = class extends b {
34
49
  };
35
50
  return p`
36
51
  <button
37
- class=${y(o)}
52
+ class=${u(o)}
38
53
  type=${this.type}
39
54
  ?disabled=${!!this.disabled}
40
55
  aria-busy=${l(this.isLoading ? "true" : void 0)}
41
- aria-disabled=${l(this.disabled ? "true" : void 0)}
42
- form=${l(e)}
56
+ aria-disabled=${l(this.disabled || this.isLoading ? "true" : void 0)}
57
+ form=${l(t)}
43
58
  >
44
59
  ${this.isLoading ? p`<pkt-icon
45
60
  class="pkt-btn__icon pkt-btn__spinner"
@@ -53,48 +68,48 @@ let t = class extends b {
53
68
  `;
54
69
  }
55
70
  };
56
- i([
71
+ e([
57
72
  s({ type: String })
58
- ], t.prototype, "iconName", 2);
59
- i([
73
+ ], i.prototype, "iconName", 2);
74
+ e([
60
75
  s({ type: String })
61
- ], t.prototype, "secondIconName", 2);
62
- i([
76
+ ], i.prototype, "secondIconName", 2);
77
+ e([
63
78
  s({ type: String })
64
- ], t.prototype, "mode", 2);
65
- i([
79
+ ], i.prototype, "mode", 2);
80
+ e([
66
81
  s({ type: String })
67
- ], t.prototype, "size", 2);
68
- i([
82
+ ], i.prototype, "size", 2);
83
+ e([
69
84
  s({ type: String })
70
- ], t.prototype, "color", 2);
71
- i([
85
+ ], i.prototype, "color", 2);
86
+ e([
72
87
  s({ type: String })
73
- ], t.prototype, "skin", 2);
74
- i([
88
+ ], i.prototype, "skin", 2);
89
+ e([
75
90
  s({ type: String })
76
- ], t.prototype, "variant", 2);
77
- i([
91
+ ], i.prototype, "variant", 2);
92
+ e([
78
93
  s({ type: String, reflect: !0 })
79
- ], t.prototype, "state", 2);
80
- i([
81
- s({ type: String })
82
- ], t.prototype, "type", 2);
83
- i([
94
+ ], i.prototype, "state", 2);
95
+ e([
96
+ s({ type: String, reflect: !0 })
97
+ ], i.prototype, "type", 2);
98
+ e([
84
99
  s({ type: String })
85
- ], t.prototype, "form", 2);
86
- i([
100
+ ], i.prototype, "form", 2);
101
+ e([
87
102
  s({ type: Boolean, reflect: !0 })
88
- ], t.prototype, "isLoading", 2);
89
- i([
103
+ ], i.prototype, "isLoading", 2);
104
+ e([
90
105
  s({ type: Boolean, reflect: !0 })
91
- ], t.prototype, "disabled", 2);
92
- i([
106
+ ], i.prototype, "disabled", 2);
107
+ e([
93
108
  s({ type: String })
94
- ], t.prototype, "loadingAnimationPath", 2);
95
- t = i([
109
+ ], i.prototype, "loadingAnimationPath", 2);
110
+ i = e([
96
111
  f("pkt-button")
97
- ], t);
112
+ ], i);
98
113
  export {
99
- t as P
114
+ i as P
100
115
  };
@@ -1,4 +1,4 @@
1
- "use strict";const o=require("./element-90YeMNbV.cjs");require("./button-KzBZ-Bff.cjs");require("./icon-B1_BRNqf.cjs");const k={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"}}}}};var d=Object.defineProperty,p=Object.getOwnPropertyDescriptor,s=(r,e,t,n)=>{for(var i=n>1?void 0:n?p(e,t):e,a=r.length-1,l;a>=0;a--)(l=r[a])&&(i=(n?l(e,t,i):l(i))||i);return n&&i&&d(e,t,i),i};let c=null;function u(){return c||(c=new Promise((r,e)=>{if(document.querySelector("#oslo-consent-script")){r();return}const t=document.createElement("script");t.src="https://cdn.web.oslo.kommune.no/cb/cb-v1.1.0.js",t.id="oslo-consent-script",t.onload=()=>r(),t.onerror=e,document.head.appendChild(t);const n=document.createElement("link");n.href="https://cdn.web.oslo.kommune.no/cb/cb-v1.1.0.css",n.type="text/css",n.rel="stylesheet",n.id="oslo-consent-styles",document.head.appendChild(n)}),c)}exports.PktConsent=class extends o.PktElement{constructor(){super(),this.devMode=!1,this.hotjarId=null,this.googleAnalyticsId=null,this.cookieDomain=null,this.cookieSecure=null,this.cookieExpiryDays=null,this.triggerType="button",this.triggerText=null,this.i18nLanguage="nb"}connectedCallback(){super.connectedCallback(),this.triggerText=this.triggerText||k.i18n[this.i18nLanguage].contentPresentation.buttons.settings}disconnectedCallback(){var e;super.disconnectedCallback(),this._cookieEventHandler&&((e=window.__cookieEvents)==null||e.off("CookieManager.setCookie",this._cookieEventHandler))}returnJsonOrObject(e){let t;try{t=JSON.parse(e)}catch{t=e}return t}emitCookieConsents(e){const n=this.returnJsonOrObject(e.value).items.reduce((i,a)=>(i[a.name]=a.consent,i),{});this.dispatchEvent(new CustomEvent("toggle-consent",{detail:n,bubbles:!0,cancelable:!1}))}async firstUpdated(e){window.cookieBanner_googleAnalyticsId=this.googleAnalyticsId,window.cookieBanner_hotjarId=this.hotjarId,this.cookieDomain&&(window.cookieBanner_cookieDomain=this.cookieDomain),this.cookieSecure&&(window.cookieBanner_cookieSecure=this.cookieSecure),this.cookieExpiryDays&&(window.cookieBanner_cookieExpiryDays=this.cookieExpiryDays),this.devMode&&(window.cookieBanner_devMode=this.devMode),await u(),this.triggerInit()}triggerInit(){window.document.dispatchEvent(new Event("CookieBannerReady",{bubbles:!0,cancelable:!0})),window.cookieBanner.cookieConsent.validateConsentCookie().then(e=>{if(e){const n={value:window.cookieBanner.cookieConsent.getConsentCookie()};window.setTimeout(()=>this.emitCookieConsents(n),0),this._cookieEventHandler&&window.__cookieEvents.off("CookieManager.setCookie",this._cookieEventHandler),this._cookieEventHandler=i=>{this.emitCookieConsents(i)},window.__cookieEvents.on("CookieManager.setCookie",this._cookieEventHandler)}})}openModal(e){var t;e.preventDefault(),(t=window.cookieBanner)!=null&&t.cookieConsent||this.triggerInit(),setTimeout(()=>window.cookieBanner.openCookieModal())}render(){return this.triggerType==="link"?o.x`<a href="#" class="pkt-link" @click=${this.openModal}>${this.triggerText}</a>`:this.triggerType==="footerlink"?o.x`<a href="#" class="pkt-footer__link" @click=${this.openModal}>
1
+ "use strict";const o=require("./element-90YeMNbV.cjs");require("./button-D4_O-rYb.cjs");require("./icon-B1_BRNqf.cjs");const k={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"}}}}};var d=Object.defineProperty,p=Object.getOwnPropertyDescriptor,s=(r,e,t,n)=>{for(var i=n>1?void 0:n?p(e,t):e,a=r.length-1,l;a>=0;a--)(l=r[a])&&(i=(n?l(e,t,i):l(i))||i);return n&&i&&d(e,t,i),i};let c=null;function u(){return c||(c=new Promise((r,e)=>{if(document.querySelector("#oslo-consent-script")){r();return}const t=document.createElement("script");t.src="https://cdn.web.oslo.kommune.no/cb/cb-v1.1.0.js",t.id="oslo-consent-script",t.onload=()=>r(),t.onerror=e,document.head.appendChild(t);const n=document.createElement("link");n.href="https://cdn.web.oslo.kommune.no/cb/cb-v1.1.0.css",n.type="text/css",n.rel="stylesheet",n.id="oslo-consent-styles",document.head.appendChild(n)}),c)}exports.PktConsent=class extends o.PktElement{constructor(){super(),this.devMode=!1,this.hotjarId=null,this.googleAnalyticsId=null,this.cookieDomain=null,this.cookieSecure=null,this.cookieExpiryDays=null,this.triggerType="button",this.triggerText=null,this.i18nLanguage="nb"}connectedCallback(){super.connectedCallback(),this.triggerText=this.triggerText||k.i18n[this.i18nLanguage].contentPresentation.buttons.settings}disconnectedCallback(){var e;super.disconnectedCallback(),this._cookieEventHandler&&((e=window.__cookieEvents)==null||e.off("CookieManager.setCookie",this._cookieEventHandler))}returnJsonOrObject(e){let t;try{t=JSON.parse(e)}catch{t=e}return t}emitCookieConsents(e){const n=this.returnJsonOrObject(e.value).items.reduce((i,a)=>(i[a.name]=a.consent,i),{});this.dispatchEvent(new CustomEvent("toggle-consent",{detail:n,bubbles:!0,cancelable:!1}))}async firstUpdated(e){window.cookieBanner_googleAnalyticsId=this.googleAnalyticsId,window.cookieBanner_hotjarId=this.hotjarId,this.cookieDomain&&(window.cookieBanner_cookieDomain=this.cookieDomain),this.cookieSecure&&(window.cookieBanner_cookieSecure=this.cookieSecure),this.cookieExpiryDays&&(window.cookieBanner_cookieExpiryDays=this.cookieExpiryDays),this.devMode&&(window.cookieBanner_devMode=this.devMode),await u(),this.triggerInit()}triggerInit(){window.document.dispatchEvent(new Event("CookieBannerReady",{bubbles:!0,cancelable:!0})),window.cookieBanner.cookieConsent.validateConsentCookie().then(e=>{if(e){const n={value:window.cookieBanner.cookieConsent.getConsentCookie()};window.setTimeout(()=>this.emitCookieConsents(n),0),this._cookieEventHandler&&window.__cookieEvents.off("CookieManager.setCookie",this._cookieEventHandler),this._cookieEventHandler=i=>{this.emitCookieConsents(i)},window.__cookieEvents.on("CookieManager.setCookie",this._cookieEventHandler)}})}openModal(e){var t;e.preventDefault(),(t=window.cookieBanner)!=null&&t.cookieConsent||this.triggerInit(),setTimeout(()=>window.cookieBanner.openCookieModal())}render(){return this.triggerType==="link"?o.x`<a href="#" class="pkt-link" @click=${this.openModal}>${this.triggerText}</a>`:this.triggerType==="footerlink"?o.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"?o.x`<pkt-button
@@ -1,5 +1,5 @@
1
1
  import { P as p, x as c, n as a, a as g } from "./element-gAd63VwC.js";
2
- import "./button-OLSvT2Im.js";
2
+ import "./button-DdpYt2br.js";
3
3
  import "./icon-CO1TLSs5.js";
4
4
  const u = {
5
5
  i18n: {
package/dist/index.d.ts CHANGED
@@ -380,6 +380,7 @@ export declare class PktButton extends PktElement<IPktButton> implements IPktBut
380
380
  isLoading: Booleanish;
381
381
  disabled: Booleanish;
382
382
  loadingAnimationPath: string | undefined;
383
+ connectedCallback(): void;
383
384
  attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
384
385
  protected firstUpdated(_changedProperties: PropertyValues): void;
385
386
  render(): TemplateResult<1>;
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./button-KzBZ-Bff.cjs"),e=t.PktButton;Object.defineProperty(exports,"PktButton",{enumerable:!0,get:()=>t.PktButton});exports.default=e;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./button-D4_O-rYb.cjs"),e=t.PktButton;Object.defineProperty(exports,"PktButton",{enumerable:!0,get:()=>t.PktButton});exports.default=e;
@@ -1,4 +1,4 @@
1
- import { P as t } from "./button-OLSvT2Im.js";
1
+ import { P as t } from "./button-DdpYt2br.js";
2
2
  const a = t;
3
3
  export {
4
4
  t as PktButton,
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./consent-B7w1--m7.cjs"),t=e.PktConsent;Object.defineProperty(exports,"PktConsent",{enumerable:!0,get:()=>e.PktConsent});exports.default=t;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./consent-DmF3dipo.cjs"),t=e.PktConsent;Object.defineProperty(exports,"PktConsent",{enumerable:!0,get:()=>e.PktConsent});exports.default=t;
@@ -1,4 +1,4 @@
1
- import { P as t } from "./consent-ChCTj6FB.js";
1
+ import { P as t } from "./consent-fJjReUb9.js";
2
2
  const o = t;
3
3
  export {
4
4
  t as PktConsent,
@@ -1,4 +1,4 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("./alert-BY97zZYx.cjs"),l=require("./accordionitem-Dz6jwPpb.cjs"),d=require("./backlink-CcAZfB1d.cjs"),b=require("./button-KzBZ-Bff.cjs"),k=require("./calendar-D4qfcRtv.cjs"),m=require("./card-CmdIb2X9.cjs"),g=require("./combobox-CZJrOopi.cjs"),h=require("./consent-B7w1--m7.cjs"),f=require("./checkbox-CiXWukkL.cjs"),t=require("./element-90YeMNbV.cjs"),y=require("./pkt-slot-controller-Da-RgXfS.cjs"),s=require("./ref-B-w1vCo8.cjs"),O=require("./class-map-DWDPOqjO.cjs"),j=require("./datepicker-CE5oM9D3.cjs"),q=require("./helptext-AqNI_oFG.cjs"),x=require("./heading-CxJ0IqpU.cjs"),C=require("./icon-B1_BRNqf.cjs"),v=require("./input-wrapper-Uw7_cZ4w.cjs"),S=require("./link-BWJrqWi7.cjs"),$=require("./linkcard-0KLDuaGM.cjs"),L=require("./loader--5h6NKGl.cjs"),_=require("./messagebox-IJOkv427.cjs"),A=require("./modal-CBURcXBd.cjs"),B=require("./progressbar-BrXtjUvh.cjs"),p=require("./radiobutton-x10h-JEh.cjs"),T=require("./tag-lU4vz70a.cjs"),I=require("./textarea-DcpZnWkt.cjs"),M=require("./textinput-DcES1ibY.cjs"),R=require("./select-BNGnC2U9.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`
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("./alert-BY97zZYx.cjs"),l=require("./accordionitem-Dz6jwPpb.cjs"),d=require("./backlink-CcAZfB1d.cjs"),b=require("./button-D4_O-rYb.cjs"),k=require("./calendar-D4qfcRtv.cjs"),m=require("./card-CmdIb2X9.cjs"),g=require("./combobox-CZJrOopi.cjs"),h=require("./consent-DmF3dipo.cjs"),f=require("./checkbox-CiXWukkL.cjs"),t=require("./element-90YeMNbV.cjs"),y=require("./pkt-slot-controller-Da-RgXfS.cjs"),s=require("./ref-B-w1vCo8.cjs"),O=require("./class-map-DWDPOqjO.cjs"),j=require("./datepicker-CE5oM9D3.cjs"),q=require("./helptext-AqNI_oFG.cjs"),x=require("./heading-CxJ0IqpU.cjs"),C=require("./icon-B1_BRNqf.cjs"),v=require("./input-wrapper-Uw7_cZ4w.cjs"),S=require("./link-BWJrqWi7.cjs"),$=require("./linkcard-0KLDuaGM.cjs"),L=require("./loader--5h6NKGl.cjs"),_=require("./messagebox-IJOkv427.cjs"),A=require("./modal-CBURcXBd.cjs"),B=require("./progressbar-BrXtjUvh.cjs"),p=require("./radiobutton-x10h-JEh.cjs"),T=require("./tag-lU4vz70a.cjs"),I=require("./textarea-DcpZnWkt.cjs"),M=require("./textinput-DcES1ibY.cjs"),R=require("./select-BNGnC2U9.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-oh7nc3ip.js";
2
2
  import { P as B, a as E } from "./accordionitem-DkE9or0K.js";
3
3
  import { P as O } from "./backlink-BnlrDl9O.js";
4
- import { P as T } from "./button-OLSvT2Im.js";
4
+ import { P as T } from "./button-DdpYt2br.js";
5
5
  import { c as f } from "./calendar-Df6-FDRW.js";
6
6
  import { P as D } from "./calendar-Df6-FDRW.js";
7
7
  import { P as G } from "./card-BxHlJq4J.js";
8
8
  import { P as K } from "./combobox-hYeZxIku.js";
9
- import { P as U } from "./consent-ChCTj6FB.js";
9
+ import { P as U } from "./consent-fJjReUb9.js";
10
10
  import { P as q } from "./checkbox-B67_cfqW.js";
11
11
  import { P as k, t as h, x as P, n, a as c } from "./element-gAd63VwC.js";
12
12
  import { P as x } from "./pkt-slot-controller-DtDaD9q_.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oslokommune/punkt-elements",
3
- "version": "12.42.6",
3
+ "version": "12.42.8",
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",
@@ -31,7 +31,7 @@
31
31
  },
32
32
  "devDependencies": {
33
33
  "@oslokommune/punkt-assets": "^12.39.2",
34
- "@oslokommune/punkt-css": "^12.42.5",
34
+ "@oslokommune/punkt-css": "^12.42.8",
35
35
  "sass": "^1.78.0",
36
36
  "typescript": "^5.6.2",
37
37
  "vite": "^5.4.18",
@@ -58,5 +58,5 @@
58
58
  "url": "https://github.com/oslokommune/punkt/issues"
59
59
  },
60
60
  "license": "MIT",
61
- "gitHead": "1d82a7a76a25908e1453c48520da98dfeeae19c2"
61
+ "gitHead": "a2ef9aba6584e59ec9225af086f8791c9a546081"
62
62
  }
@@ -70,7 +70,7 @@ export class PktButton extends PktElement<IPktButton> implements IPktButton {
70
70
  @property({ type: String }) skin: TPktButtonSkin = 'primary'
71
71
  @property({ type: String }) variant: TPktButtonVariant = 'label-only'
72
72
  @property({ type: String, reflect: true }) state?: TPktButtonState = 'normal'
73
- @property({ type: String }) type: TPktButtonType = 'button'
73
+ @property({ type: String, reflect: true }) type: TPktButtonType = 'button'
74
74
  @property({ type: String }) form: string | undefined = undefined
75
75
  @property({ type: Boolean, reflect: true }) isLoading: Booleanish = false
76
76
  @property({ type: Boolean, reflect: true }) disabled: Booleanish = false
@@ -78,6 +78,32 @@ export class PktButton extends PktElement<IPktButton> implements IPktButton {
78
78
 
79
79
  // Lifecycle
80
80
 
81
+ connectedCallback(): void {
82
+ super.connectedCallback()
83
+ this.addEventListener(
84
+ 'click',
85
+ (e) => {
86
+ if (this.disabled || this.hasAttribute('disabled') || this.isLoading) {
87
+ e.preventDefault()
88
+ e.stopImmediatePropagation()
89
+ }
90
+ },
91
+ true,
92
+ )
93
+
94
+ this.addEventListener(
95
+ 'keydown',
96
+ (e) => {
97
+ if (!(this.disabled || this.hasAttribute('disabled') || this.isLoading)) return
98
+ if (e.key === 'Enter' || e.key === ' ') {
99
+ e.preventDefault()
100
+ e.stopImmediatePropagation()
101
+ }
102
+ },
103
+ true,
104
+ )
105
+ }
106
+
81
107
  attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
82
108
  super.attributeChangedCallback(name, _old, value)
83
109
  // Convert strings to booleans
@@ -122,7 +148,7 @@ export class PktButton extends PktElement<IPktButton> implements IPktButton {
122
148
  type=${this.type}
123
149
  ?disabled=${!!this.disabled}
124
150
  aria-busy=${ifDefined(this.isLoading ? 'true' : undefined)}
125
- aria-disabled=${ifDefined(this.disabled ? 'true' : undefined)}
151
+ aria-disabled=${ifDefined(this.disabled || this.isLoading ? 'true' : undefined)}
126
152
  form=${ifDefined(formId)}
127
153
  >
128
154
  ${this.isLoading
@@ -1,19 +0,0 @@
1
- "use strict";const t=require("./element-90YeMNbV.cjs"),h=require("./pkt-slot-controller-Da-RgXfS.cjs"),u=require("./class-map-DWDPOqjO.cjs"),a=require("./if-defined-C8eotHpL.cjs"),d=require("./ref-B-w1vCo8.cjs");var c=Object.defineProperty,k=Object.getOwnPropertyDescriptor,i=(r,n,o,e)=>{for(var s=e>1?void 0:e?k(n,o):n,p=r.length-1,l;p>=0;p--)(l=r[p])&&(s=(e?l(n,o,s):l(s))||s);return e&&s&&c(n,o,s),s};window.pktAnimationPath=window.pktAnimationPath||"https://punkt-cdn.oslo.kommune.no/latest/animations/";exports.PktButton=class extends t.PktElement{constructor(){super(),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.form=void 0,this.isLoading=!1,this.disabled=!1,this.loadingAnimationPath=window.pktAnimationPath,this.slotController=new h.PktSlotController(this,this.defaultSlot)}attributeChangedCallback(n,o,e){super.attributeChangedCallback(n,o,e),n==="disabled"&&e==="false"&&(this.disabled=!1),(n==="isloading"||n==="isLoading")&&e==="false"&&(this.isLoading=!1)}firstUpdated(n){super.firstUpdated(n),this.disabled==="false"&&(this.disabled=!1),this.isLoading==="false"&&(this.isLoading=!1)}render(){const n=this.form??this.getAttribute("form")??void 0,o={"pkt-btn":!0,[`pkt-btn--${this.size}`]:!!this.size,[`pkt-btn--${this.skin}`]:!!this.skin,[`pkt-btn--${this.variant}`]:!!this.variant,[`pkt-btn--${this.color}`]:!!this.color,[`pkt-btn--${this.state}`]:!!this.state,"pkt-btn--disabled":!!this.disabled,"pkt-btn--isLoading":!!this.isLoading};return t.x`
2
- <button
3
- class=${u.e(o)}
4
- type=${this.type}
5
- ?disabled=${!!this.disabled}
6
- aria-busy=${a.o(this.isLoading?"true":void 0)}
7
- aria-disabled=${a.o(this.disabled?"true":void 0)}
8
- form=${a.o(n)}
9
- >
10
- ${this.isLoading?t.x`<pkt-icon
11
- class="pkt-btn__icon pkt-btn__spinner"
12
- name="spinner-blue"
13
- path=${a.o(this.loadingAnimationPath)}
14
- ></pkt-icon>`:t.E}
15
- ${this.variant!=="label-only"?t.x`<pkt-icon class="pkt-btn__icon pkt-icon" name=${this.iconName}></pkt-icon>`:t.E}
16
- <span class="pkt-btn__text" ${d.n(this.defaultSlot)}></span>
17
- ${this.variant==="icons-right-and-left"?t.x`<pkt-icon class="pkt-btn__icon" name=${this.secondIconName}></pkt-icon>`:t.E}
18
- </button>
19
- `}};i([t.n({type:String})],exports.PktButton.prototype,"iconName",2);i([t.n({type:String})],exports.PktButton.prototype,"secondIconName",2);i([t.n({type:String})],exports.PktButton.prototype,"mode",2);i([t.n({type:String})],exports.PktButton.prototype,"size",2);i([t.n({type:String})],exports.PktButton.prototype,"color",2);i([t.n({type:String})],exports.PktButton.prototype,"skin",2);i([t.n({type:String})],exports.PktButton.prototype,"variant",2);i([t.n({type:String,reflect:!0})],exports.PktButton.prototype,"state",2);i([t.n({type:String})],exports.PktButton.prototype,"type",2);i([t.n({type:String})],exports.PktButton.prototype,"form",2);i([t.n({type:Boolean,reflect:!0})],exports.PktButton.prototype,"isLoading",2);i([t.n({type:Boolean,reflect:!0})],exports.PktButton.prototype,"disabled",2);i([t.n({type:String})],exports.PktButton.prototype,"loadingAnimationPath",2);exports.PktButton=i([t.t("pkt-button")],exports.PktButton);