@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 +17 -0
- package/dist/button-KzBZ-Bff.cjs +19 -0
- package/dist/button-OLSvT2Im.js +100 -0
- package/dist/{consent-CkDh30xr.cjs → consent-D1r9LYda.cjs} +1 -1
- package/dist/{consent-B_cBTKCZ.js → consent-a09DlJZT.js} +1 -1
- package/dist/index.d.ts +1 -8
- 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 +2 -2
- package/package.json +3 -3
- package/src/components/button/button.ts +28 -124
- package/dist/button-BSTI5da6.js +0 -121
- package/dist/button-oZThyRNI.cjs +0 -12
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-
|
|
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
|
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 {
|
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-KzBZ-Bff.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-D1r9LYda.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-D2PhTV94.cjs"),l=require("./accordionitem-Dz6jwPpb.cjs"),d=require("./backlink-CcAZfB1d.cjs"),b=require("./button-
|
|
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-
|
|
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-
|
|
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.
|
|
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.
|
|
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": "
|
|
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
|
|
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
|
-
<
|
|
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
|
-
</
|
|
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
|
package/dist/button-BSTI5da6.js
DELETED
|
@@ -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
|
-
};
|
package/dist/button-oZThyRNI.cjs
DELETED
|
@@ -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);
|