@oslokommune/punkt-elements 12.40.10 → 12.41.0

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.41.0](https://github.com/oslokommune/punkt/compare/12.40.10...12.41.0) (2025-06-10)
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.40.10](https://github.com/oslokommune/punkt/compare/12.40.9...12.40.10) (2025-06-10)
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,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);
@@ -0,0 +1,100 @@
1
+ import { P as b, E as c, x as p, n as s, a as f } from "./element-gAd63VwC.js";
2
+ import { P as m } from "./pkt-slot-controller-DtDaD9q_.js";
3
+ import { e as y } from "./class-map-m7ZCZ49w.js";
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;
10
+ };
11
+ window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/latest/animations/";
12
+ let t = class extends b {
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);
15
+ }
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);
19
+ }
20
+ firstUpdated(e) {
21
+ super.firstUpdated(e), this.disabled === "false" && (this.disabled = !1), this.isLoading === "false" && (this.isLoading = !1);
22
+ }
23
+ // Render
24
+ render() {
25
+ const e = this.form ?? this.getAttribute("form") ?? void 0, o = {
26
+ "pkt-btn": !0,
27
+ [`pkt-btn--${this.size}`]: !!this.size,
28
+ [`pkt-btn--${this.skin}`]: !!this.skin,
29
+ [`pkt-btn--${this.variant}`]: !!this.variant,
30
+ [`pkt-btn--${this.color}`]: !!this.color,
31
+ [`pkt-btn--${this.state}`]: !!this.state,
32
+ "pkt-btn--disabled": !!this.disabled,
33
+ "pkt-btn--isLoading": !!this.isLoading
34
+ };
35
+ return p`
36
+ <button
37
+ class=${y(o)}
38
+ type=${this.type}
39
+ ?disabled=${!!this.disabled}
40
+ aria-busy=${l(this.isLoading ? "true" : void 0)}
41
+ aria-disabled=${l(this.disabled ? "true" : void 0)}
42
+ form=${l(e)}
43
+ >
44
+ ${this.isLoading ? p`<pkt-icon
45
+ class="pkt-btn__icon pkt-btn__spinner"
46
+ name="spinner-blue"
47
+ path=${l(this.loadingAnimationPath)}
48
+ ></pkt-icon>` : c}
49
+ ${this.variant !== "label-only" ? p`<pkt-icon class="pkt-btn__icon pkt-icon" name=${this.iconName}></pkt-icon>` : c}
50
+ <span class="pkt-btn__text" ${k(this.defaultSlot)}></span>
51
+ ${this.variant === "icons-right-and-left" ? p`<pkt-icon class="pkt-btn__icon" name=${this.secondIconName}></pkt-icon>` : c}
52
+ </button>
53
+ `;
54
+ }
55
+ };
56
+ i([
57
+ s({ type: String })
58
+ ], t.prototype, "iconName", 2);
59
+ i([
60
+ s({ type: String })
61
+ ], t.prototype, "secondIconName", 2);
62
+ i([
63
+ s({ type: String })
64
+ ], t.prototype, "mode", 2);
65
+ i([
66
+ s({ type: String })
67
+ ], t.prototype, "size", 2);
68
+ i([
69
+ s({ type: String })
70
+ ], t.prototype, "color", 2);
71
+ i([
72
+ s({ type: String })
73
+ ], t.prototype, "skin", 2);
74
+ i([
75
+ s({ type: String })
76
+ ], t.prototype, "variant", 2);
77
+ i([
78
+ s({ type: String, reflect: !0 })
79
+ ], t.prototype, "state", 2);
80
+ i([
81
+ s({ type: String })
82
+ ], t.prototype, "type", 2);
83
+ i([
84
+ s({ type: String })
85
+ ], t.prototype, "form", 2);
86
+ i([
87
+ s({ type: Boolean, reflect: !0 })
88
+ ], t.prototype, "isLoading", 2);
89
+ i([
90
+ s({ type: Boolean, reflect: !0 })
91
+ ], t.prototype, "disabled", 2);
92
+ i([
93
+ s({ type: String })
94
+ ], t.prototype, "loadingAnimationPath", 2);
95
+ t = i([
96
+ f("pkt-button")
97
+ ], t);
98
+ export {
99
+ t as P
100
+ };
@@ -1,4 +1,4 @@
1
- "use strict";const s=require("./element-90YeMNbV.cjs");require("./button-oZThyRNI.cjs");require("./icon-B1_BRNqf.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}>
1
+ "use strict";const s=require("./element-90YeMNbV.cjs");require("./button-KzBZ-Bff.cjs");require("./icon-B1_BRNqf.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
@@ -1,5 +1,5 @@
1
1
  import { P as k, x as l, n as a, a as u } from "./element-gAd63VwC.js";
2
- import "./button-BSTI5da6.js";
2
+ import "./button-OLSvT2Im.js";
3
3
  import "./icon-CO1TLSs5.js";
4
4
  const h = {
5
5
  i18n: {
package/dist/index.d.ts CHANGED
@@ -355,8 +355,6 @@ export declare class PktBackLink extends PktElement<IPktBackLink> implements IPk
355
355
  }
356
356
 
357
357
  export declare class PktButton extends PktElement<IPktButton> implements IPktButton {
358
- static formAssociated: boolean;
359
- private internals;
360
358
  slotController: PktSlotController;
361
359
  defaultSlot: Ref<HTMLElement>;
362
360
  constructor();
@@ -369,18 +367,13 @@ export declare class PktButton extends PktElement<IPktButton> implements IPktBut
369
367
  variant: TPktButtonVariant;
370
368
  state?: TPktButtonState;
371
369
  type: TPktButtonType;
370
+ form: string | undefined;
372
371
  isLoading: Booleanish;
373
372
  disabled: Booleanish;
374
373
  loadingAnimationPath: string | undefined;
375
- connectedCallback(): void;
376
- disconnectedCallback(): void;
377
374
  attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
378
375
  protected firstUpdated(_changedProperties: PropertyValues): void;
379
- protected updated(_changedProperties: PropertyValues): void;
380
376
  render(): TemplateResult<1>;
381
- private updateElementClasses;
382
- private handleClick;
383
- private handleKeydown;
384
377
  }
385
378
 
386
379
  export declare class PktCalendar extends PktElement {
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./button-oZThyRNI.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-KzBZ-Bff.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-BSTI5da6.js";
1
+ import { P as t } from "./button-OLSvT2Im.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-CkDh30xr.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-D1r9LYda.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-B_cBTKCZ.js";
1
+ import { P as t } from "./consent-a09DlJZT.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-D2PhTV94.cjs"),l=require("./accordionitem-Dz6jwPpb.cjs"),d=require("./backlink-CcAZfB1d.cjs"),b=require("./button-oZThyRNI.cjs"),k=require("./calendar-BDeaGBaH.cjs"),m=require("./card-CmdIb2X9.cjs"),g=require("./combobox-lds6Lryq.cjs"),h=require("./consent-CkDh30xr.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-DpQV8G6g.cjs"),q=require("./helptext-AqNI_oFG.cjs"),x=require("./heading-CxJ0IqpU.cjs"),C=require("./icon-B1_BRNqf.cjs"),v=require("./input-wrapper-B_TtkGqo.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-j8kBS-hf.cjs"),M=require("./textinput-kmcj-FlC.cjs"),R=require("./select-BUvu5SFp.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-D2PhTV94.cjs"),l=require("./accordionitem-Dz6jwPpb.cjs"),d=require("./backlink-CcAZfB1d.cjs"),b=require("./button-KzBZ-Bff.cjs"),k=require("./calendar-BDeaGBaH.cjs"),m=require("./card-CmdIb2X9.cjs"),g=require("./combobox-lds6Lryq.cjs"),h=require("./consent-D1r9LYda.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-DpQV8G6g.cjs"),q=require("./helptext-AqNI_oFG.cjs"),x=require("./heading-CxJ0IqpU.cjs"),C=require("./icon-B1_BRNqf.cjs"),v=require("./input-wrapper-B_TtkGqo.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-j8kBS-hf.cjs"),M=require("./textinput-kmcj-FlC.cjs"),R=require("./select-BUvu5SFp.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-CoGYPbs-.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-BSTI5da6.js";
4
+ import { P as T } from "./button-OLSvT2Im.js";
5
5
  import { c as f } from "./calendar-Beno8yU7.js";
6
6
  import { P as D } from "./calendar-Beno8yU7.js";
7
7
  import { P as G } from "./card-BxHlJq4J.js";
8
8
  import { P as K } from "./combobox-Ct7-a2Vy.js";
9
- import { P as U } from "./consent-B_cBTKCZ.js";
9
+ import { P as U } from "./consent-a09DlJZT.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.40.10",
3
+ "version": "12.41.0",
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.40.10",
35
+ "@oslokommune/punkt-css": "^12.41.0",
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": "cc642acc20fb7c667d25909bd6309fe613f66c6f"
62
+ "gitHead": "0fa02d9d211044739d7b86ec9f24f334df782a1d"
63
63
  }
@@ -3,6 +3,8 @@ import { PktSlotController } from '@/controllers/pkt-slot-controller'
3
3
  import { PktIconName } from '@oslokommune/punkt-assets/dist/icons/icon'
4
4
  import { html, nothing, PropertyValues } from 'lit'
5
5
  import { property, customElement } from 'lit/decorators.js'
6
+ import { classMap } from 'lit/directives/class-map.js'
7
+ import { ifDefined } from 'lit/directives/if-defined.js'
6
8
  import { createRef, Ref, ref } from 'lit/directives/ref.js'
7
9
 
8
10
  // Allow global override of animation assets path
@@ -51,8 +53,6 @@ export interface IPktButton {
51
53
  }
52
54
  @customElement('pkt-button')
53
55
  export class PktButton extends PktElement<IPktButton> implements IPktButton {
54
- static formAssociated = true
55
- private internals = this.attachInternals()
56
56
  slotController: PktSlotController
57
57
  defaultSlot: Ref<HTMLElement> = createRef()
58
58
 
@@ -70,25 +70,14 @@ 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, reflect: true }) type: TPktButtonType = 'button'
73
+ @property({ type: String }) type: TPktButtonType = 'button'
74
+ @property({ type: String }) form: string | undefined = undefined
74
75
  @property({ type: Boolean, reflect: true }) isLoading: Booleanish = false
75
76
  @property({ type: Boolean, reflect: true }) disabled: Booleanish = false
76
77
  @property({ type: String }) loadingAnimationPath: string | undefined = window.pktAnimationPath
77
78
 
78
79
  // Lifecycle
79
80
 
80
- connectedCallback() {
81
- super.connectedCallback();
82
- this.addEventListener('click', this.handleClick as EventListener)
83
- this.addEventListener('keydown', this.handleKeydown as EventListener)
84
- }
85
-
86
- disconnectedCallback() {
87
- super.disconnectedCallback()
88
- this.removeEventListener('click', this.handleClick as EventListener)
89
- this.removeEventListener('keydown', this.handleKeydown as EventListener)
90
- }
91
-
92
81
  attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
93
82
  super.attributeChangedCallback(name, _old, value)
94
83
  // Convert strings to booleans
@@ -111,57 +100,36 @@ export class PktButton extends PktElement<IPktButton> implements IPktButton {
111
100
  }
112
101
  }
113
102
 
114
- protected updated(_changedProperties: PropertyValues): void {
115
- super.updated(_changedProperties)
116
-
117
- this.setAttribute('role', 'button')
118
- this.internals.role = 'button'
119
-
120
- if (this.disabled === 'false') {
121
- this.disabled = false
122
- }
123
- if (this.isLoading === 'false') {
124
- this.isLoading = false
125
- }
126
-
127
- if (this.disabled) {
128
- if (this.getAttribute('tabindex') !== '-1') {
129
- this.setAttribute('tabindex', '-1')
130
- }
131
- if (this.getAttribute('aria-disabled') !== 'true') {
132
- this.setAttribute('aria-disabled', 'true')
133
- }
134
- } else {
135
- if (this.getAttribute('tabindex') !== '0') {
136
- this.setAttribute('tabindex', '0')
137
- }
138
- if (this.getAttribute('aria-disabled') !== 'false') {
139
- this.removeAttribute('aria-disabled')
140
- }
141
- }
142
- if (this.isLoading) {
143
- if (this.getAttribute('aria-busy') !== 'true') {
144
- this.setAttribute('aria-busy', 'true')
145
- }
146
- } else {
147
- if (this.hasAttribute('aria-busy')) {
148
- this.removeAttribute('aria-busy')
149
- }
150
- }
151
-
152
- this.updateElementClasses()
153
- }
154
-
155
103
  // Render
156
104
 
157
105
  render() {
106
+ const formId = this.form ?? this.getAttribute('form') ?? undefined
107
+
108
+ const classes = {
109
+ 'pkt-btn': true,
110
+ [`pkt-btn--${this.size}`]: !!this.size,
111
+ [`pkt-btn--${this.skin}`]: !!this.skin,
112
+ [`pkt-btn--${this.variant}`]: !!this.variant,
113
+ [`pkt-btn--${this.color}`]: !!this.color,
114
+ [`pkt-btn--${this.state}`]: !!this.state,
115
+ 'pkt-btn--disabled': !!this.disabled,
116
+ 'pkt-btn--isLoading': !!this.isLoading,
117
+ }
118
+
158
119
  return html`
159
- <div class="pkt-contents">
120
+ <button
121
+ class=${classMap(classes)}
122
+ type=${this.type}
123
+ ?disabled=${!!this.disabled}
124
+ aria-busy=${ifDefined(this.isLoading ? 'true' : undefined)}
125
+ aria-disabled=${ifDefined(this.disabled ? 'true' : undefined)}
126
+ form=${ifDefined(formId)}
127
+ >
160
128
  ${this.isLoading
161
129
  ? html`<pkt-icon
162
130
  class="pkt-btn__icon pkt-btn__spinner"
163
131
  name="spinner-blue"
164
- path=${this.loadingAnimationPath}
132
+ path=${ifDefined(this.loadingAnimationPath)}
165
133
  ></pkt-icon>`
166
134
  : nothing}
167
135
  ${this.variant !== 'label-only'
@@ -171,73 +139,9 @@ export class PktButton extends PktElement<IPktButton> implements IPktButton {
171
139
  ${this.variant === 'icons-right-and-left'
172
140
  ? html`<pkt-icon class="pkt-btn__icon" name=${this.secondIconName}></pkt-icon>`
173
141
  : nothing}
174
- </div>
142
+ </button>
175
143
  `
176
144
  }
177
-
178
- // Methods
179
-
180
- private updateElementClasses() {
181
- const classes = new Set<string>()
182
- const currentClasses = this.getAttribute('class')
183
-
184
- classes.add('pkt-btn')
185
-
186
- if (currentClasses) {
187
- currentClasses.split(' ').forEach((classname) => classes.add(classname))
188
- }
189
- if (this.size) classes.add(`pkt-btn--${this.size}`)
190
- if (this.skin) classes.add(`pkt-btn--${this.skin}`)
191
- if (this.variant) classes.add(`pkt-btn--${this.variant}`)
192
- if (this.color) classes.add(`pkt-btn--${this.color}`)
193
- if (this.isLoading) classes.add('pkt-btn--active')
194
- if (this.state) classes.add(`pkt-btn--${this.state}`)
195
- if (this.disabled) classes.add('pkt-btn--disabled')
196
-
197
- this.className = [...classes].join(' ')
198
- }
199
-
200
- private handleClick(event: MouseEvent) {
201
- if (this.disabled || this.isLoading) {
202
- event.preventDefault()
203
- event.stopImmediatePropagation()
204
- return
205
- }
206
-
207
- if (this.type === 'submit' && this.internals.form) {
208
- this.internals.form.requestSubmit()
209
-
210
- return
211
- }
212
- if (this.type === 'reset' && this.internals.form) {
213
- this.internals.form.reset()
214
-
215
- return
216
- }
217
-
218
- if (this.onClick && typeof this.onClick === 'function' && this.onClick !== this.handleClick) {
219
- this.onClick(event)
220
- }
221
-
222
- this.dispatchEvent(
223
- new CustomEvent('button-click', {
224
- bubbles: true,
225
- composed: true,
226
- detail: { originalEvent: event },
227
- }),
228
- )
229
- }
230
-
231
- private handleKeydown(event: KeyboardEvent) {
232
- if (this.disabled || this.isLoading) return
233
-
234
- if (event.key === 'Enter' || event.key === ' ') {
235
- event.preventDefault()
236
- const button = event.target as HTMLButtonElement
237
- if (button) {
238
- button.click()
239
- }
240
- }
241
- }
242
145
  }
146
+
243
147
  export default PktButton
@@ -1,121 +0,0 @@
1
- import { n as a, P as c, E as p, x as l, a as b } from "./element-gAd63VwC.js";
2
- import { P as f } from "./pkt-slot-controller-DtDaD9q_.js";
3
- import { e as u, n as k } from "./ref-DnSbnXsj.js";
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
- };
9
- window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/latest/animations/";
10
- let i = class extends c {
11
- constructor() {
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);
13
- }
14
- // Lifecycle
15
- connectedCallback() {
16
- super.connectedCallback(), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeydown);
17
- }
18
- disconnectedCallback() {
19
- super.disconnectedCallback(), this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeydown);
20
- }
21
- attributeChangedCallback(t, s, n) {
22
- super.attributeChangedCallback(t, s, n), t === "disabled" && n === "false" && (this.disabled = !1), (t === "isloading" || t === "isLoading") && n === "false" && (this.isLoading = !1);
23
- }
24
- firstUpdated(t) {
25
- super.firstUpdated(t), this.disabled === "false" && (this.disabled = !1), this.isLoading === "false" && (this.isLoading = !1);
26
- }
27
- updated(t) {
28
- 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();
29
- }
30
- // Render
31
- render() {
32
- return l`
33
- <div class="pkt-contents">
34
- ${this.isLoading ? l`<pkt-icon
35
- class="pkt-btn__icon pkt-btn__spinner"
36
- name="spinner-blue"
37
- path=${this.loadingAnimationPath}
38
- ></pkt-icon>` : p}
39
- ${this.variant !== "label-only" ? l`<pkt-icon class="pkt-btn__icon pkt-icon" name=${this.iconName}></pkt-icon>` : p}
40
- <span class="pkt-btn__text" ${k(this.defaultSlot)}></span>
41
- ${this.variant === "icons-right-and-left" ? l`<pkt-icon class="pkt-btn__icon" name=${this.secondIconName}></pkt-icon>` : p}
42
- </div>
43
- `;
44
- }
45
- // Methods
46
- updateElementClasses() {
47
- const t = /* @__PURE__ */ new Set(), s = this.getAttribute("class");
48
- 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(" ");
49
- }
50
- handleClick(t) {
51
- if (this.disabled || this.isLoading) {
52
- t.preventDefault(), t.stopImmediatePropagation();
53
- return;
54
- }
55
- if (this.type === "submit" && this.internals.form) {
56
- this.internals.form.requestSubmit();
57
- return;
58
- }
59
- if (this.type === "reset" && this.internals.form) {
60
- this.internals.form.reset();
61
- return;
62
- }
63
- this.onClick && typeof this.onClick == "function" && this.onClick !== this.handleClick && this.onClick(t), this.dispatchEvent(
64
- new CustomEvent("button-click", {
65
- bubbles: !0,
66
- composed: !0,
67
- detail: { originalEvent: t }
68
- })
69
- );
70
- }
71
- handleKeydown(t) {
72
- if (!(this.disabled || this.isLoading) && (t.key === "Enter" || t.key === " ")) {
73
- t.preventDefault();
74
- const s = t.target;
75
- s && s.click();
76
- }
77
- }
78
- };
79
- i.formAssociated = !0;
80
- e([
81
- a({ type: String })
82
- ], i.prototype, "iconName", 2);
83
- e([
84
- a({ type: String })
85
- ], i.prototype, "secondIconName", 2);
86
- e([
87
- a({ type: String })
88
- ], i.prototype, "mode", 2);
89
- e([
90
- a({ type: String })
91
- ], i.prototype, "size", 2);
92
- e([
93
- a({ type: String })
94
- ], i.prototype, "color", 2);
95
- e([
96
- a({ type: String })
97
- ], i.prototype, "skin", 2);
98
- e([
99
- a({ type: String })
100
- ], i.prototype, "variant", 2);
101
- e([
102
- a({ type: String, reflect: !0 })
103
- ], i.prototype, "state", 2);
104
- e([
105
- a({ type: String, reflect: !0 })
106
- ], i.prototype, "type", 2);
107
- e([
108
- a({ type: Boolean, reflect: !0 })
109
- ], i.prototype, "isLoading", 2);
110
- e([
111
- a({ type: Boolean, reflect: !0 })
112
- ], i.prototype, "disabled", 2);
113
- e([
114
- a({ type: String })
115
- ], i.prototype, "loadingAnimationPath", 2);
116
- i = e([
117
- b("pkt-button")
118
- ], i);
119
- export {
120
- i as P
121
- };
@@ -1,12 +0,0 @@
1
- "use strict";const i=require("./element-90YeMNbV.cjs"),h=require("./pkt-slot-controller-Da-RgXfS.cjs"),d=require("./ref-B-w1vCo8.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)}connectedCallback(){super.connectedCallback(),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
- <div class="pkt-contents">
3
- ${this.isLoading?i.x`<pkt-icon
4
- class="pkt-btn__icon pkt-btn__spinner"
5
- name="spinner-blue"
6
- path=${this.loadingAnimationPath}
7
- ></pkt-icon>`:i.E}
8
- ${this.variant!=="label-only"?i.x`<pkt-icon class="pkt-btn__icon pkt-icon" name=${this.iconName}></pkt-icon>`:i.E}
9
- <span class="pkt-btn__text" ${d.n(this.defaultSlot)}></span>
10
- ${this.variant==="icons-right-and-left"?i.x`<pkt-icon class="pkt-btn__icon" name=${this.secondIconName}></pkt-icon>`:i.E}
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);e([i.n({type:String})],exports.PktButton.prototype,"loadingAnimationPath",2);exports.PktButton=e([i.t("pkt-button")],exports.PktButton);