@oslokommune/punkt-elements 13.20.0 → 13.21.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/{card-CIJD8Ezs.cjs → card-BF2QqCMC.cjs} +1 -1
- package/dist/{card-u_TMZLDj.js → card-VdZNKsoO.js} +1 -1
- package/dist/heading-BUdy170t.js +101 -0
- package/dist/heading-Dv_cH6N1.cjs +1 -0
- package/dist/index.d.ts +5 -0
- package/dist/pkt-card.cjs +1 -1
- package/dist/pkt-card.js +1 -1
- package/dist/pkt-heading.cjs +1 -1
- package/dist/pkt-heading.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/heading/heading.ts +33 -2
- package/src/components/heading/index.ts +2 -2
- package/dist/heading--JKFppLS.cjs +0 -1
- package/dist/heading-Cs5yGnJg.js +0 -76
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
|
+
## [13.21.0](https://github.com/oslokommune/punkt/compare/13.20.0...13.21.0) (2026-01-30)
|
|
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
|
## [13.20.0](https://github.com/oslokommune/punkt/compare/13.19.2...13.20.0) (2026-01-23)
|
|
9
26
|
|
|
10
27
|
### ⚠ BREAKING CHANGES
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const p=require("./class-map-C_erArZz.cjs"),h=require("./if-defined-Bc9-_I01.cjs"),t=require("./element-CJ_QKaki.cjs"),g=require("./pkt-slot-controller-BzddBp7z.cjs"),c=require("./ref-BFa5Utho.cjs");require("./icon-BGuizDwk.cjs");require("./tag-BkuJjOy7.cjs");require("./heading
|
|
1
|
+
"use strict";const p=require("./class-map-C_erArZz.cjs"),h=require("./if-defined-Bc9-_I01.cjs"),t=require("./element-CJ_QKaki.cjs"),g=require("./pkt-slot-controller-BzddBp7z.cjs"),c=require("./ref-BFa5Utho.cjs");require("./icon-BGuizDwk.cjs");require("./tag-BkuJjOy7.cjs");require("./heading-Dv_cH6N1.cjs");const k={layout:{default:"vertical"},skin:{type:["outlined","outlined-beige","gray","blue","beige","green"],default:"outlined"},padding:{default:"default"}},o={props:k};var u=Object.defineProperty,m=Object.getOwnPropertyDescriptor,e=(i,a,s,n)=>{for(var r=n>1?void 0:n?m(a,s):a,d=i.length-1,l;d>=0;d--)(l=i[d])&&(r=(n?l(a,s,r):l(r))||r);return n&&r&&u(a,s,r),r};exports.PktCard=class extends t.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.ariaLabel="",this.metaLead=null,this.borderOnHover=!0,this.clickCardLink=null,this.metaTrail=null,this.layout=o.props.layout.default,this.heading="",this.headinglevel=3,this.image={src:"",alt:""},this.imageShape="square",this.openLinkInNewTab=!1,this.padding=o.props.padding.default,this.skin=o.props.skin.default,this.subheading="",this.tagPosition="top",this.tags=[],this.slotController=new g.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback()}render(){var r,d;const a={"pkt-card":!0,[`pkt-card--${this.skin}`]:this.skin,[`pkt-card--${this.layout}`]:this.layout,[`pkt-card--padding-${this.padding}`]:this.padding,"pkt-card--border-on-hover":this.borderOnHover},s=((r=this.ariaLabel)==null?void 0:r.trim())||(this.heading?`${this.heading} lenkekort`:"lenkekort"),n=((d=this.ariaLabel)==null?void 0:d.trim())||(this.heading?this.heading:"kort");return t.x`
|
|
2
2
|
<article
|
|
3
3
|
class=${p.e(a)}
|
|
4
4
|
aria-label=${h.o(this.clickCardLink?s:n)}
|
|
@@ -5,7 +5,7 @@ import { P as $ } from "./pkt-slot-controller-BPGj-LC5.js";
|
|
|
5
5
|
import { e as y, n as _ } from "./ref-Xa5dbh--.js";
|
|
6
6
|
import "./icon-1dy7UZcu.js";
|
|
7
7
|
import "./tag-BpCdJuei.js";
|
|
8
|
-
import "./heading-
|
|
8
|
+
import "./heading-BUdy170t.js";
|
|
9
9
|
const b = { layout: { default: "vertical" }, skin: { type: ["outlined", "outlined-beige", "gray", "blue", "beige", "green"], default: "outlined" }, padding: { default: "default" } }, p = {
|
|
10
10
|
props: b
|
|
11
11
|
};
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import { b as n, x as g, n as r, a as p } from "./element-CRDRygXu.js";
|
|
2
|
+
var o = Object.defineProperty, c = Object.getOwnPropertyDescriptor, l = (e, a, t, h) => {
|
|
3
|
+
for (var i = h > 1 ? void 0 : h ? c(a, t) : a, d = e.length - 1, u; d >= 0; d--)
|
|
4
|
+
(u = e[d]) && (i = (h ? u(a, t, i) : u(i)) || i);
|
|
5
|
+
return h && i && o(a, t, i), i;
|
|
6
|
+
};
|
|
7
|
+
let s = class extends n {
|
|
8
|
+
constructor() {
|
|
9
|
+
super(...arguments), this.size = void 0, this.level = 2, this.weight = void 0, this.visuallyHidden = !1, this.align = void 0;
|
|
10
|
+
}
|
|
11
|
+
connectedCallback() {
|
|
12
|
+
super.connectedCallback(), this.setAttribute("role", "heading"), this.setAttribute("aria-level", String(this.level)), this.updateHostClasses();
|
|
13
|
+
}
|
|
14
|
+
attributeChangedCallback(e, a, t) {
|
|
15
|
+
super.attributeChangedCallback(e, a, t), e === "level" && t && this.setLevel(Number(t)), e === "visuallyHidden" && (this.visuallyHidden = t !== null && t !== "false"), (e === "size" || e === "visuallyHidden" || e === "align" || e === "weight") && this.updateHostClasses();
|
|
16
|
+
}
|
|
17
|
+
updated(e) {
|
|
18
|
+
super.updated(e), e.has("level") && (this.setLevel(this.level), this.hasAttribute("size") || (this.size = this.defaultSizeForLevel), this.hasAttribute("weight") || (this.weight = this.defaultWeightForLevel)), !this.hasAttribute("size") && (e.has("level") || this.size === void 0) && (this.size = this.defaultSizeForLevel), (e.has("size") || e.has("visuallyHidden") || e.has("align") || e.has("weight")) && this.updateHostClasses();
|
|
19
|
+
}
|
|
20
|
+
setLevel(e) {
|
|
21
|
+
e >= 1 && e <= 6 ? (this.level = e, this.setAttribute("aria-level", String(e))) : console.warn(`Invalid heading level: ${e}. Must be between 1 and 6.`);
|
|
22
|
+
}
|
|
23
|
+
get defaultSizeForLevel() {
|
|
24
|
+
switch (this.level) {
|
|
25
|
+
case 1:
|
|
26
|
+
return "xlarge";
|
|
27
|
+
case 2:
|
|
28
|
+
return "large";
|
|
29
|
+
case 3:
|
|
30
|
+
return "medium";
|
|
31
|
+
case 4:
|
|
32
|
+
return "small";
|
|
33
|
+
case 5:
|
|
34
|
+
return "xsmall";
|
|
35
|
+
case 6:
|
|
36
|
+
return "xsmall";
|
|
37
|
+
default:
|
|
38
|
+
return "medium";
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
get defaultWeightForLevel() {
|
|
42
|
+
switch (this.level) {
|
|
43
|
+
case 1:
|
|
44
|
+
return "regular";
|
|
45
|
+
case 2:
|
|
46
|
+
return "regular";
|
|
47
|
+
case 3:
|
|
48
|
+
return "medium";
|
|
49
|
+
case 4:
|
|
50
|
+
return "medium";
|
|
51
|
+
case 5:
|
|
52
|
+
return "medium";
|
|
53
|
+
case 6:
|
|
54
|
+
return "medium";
|
|
55
|
+
default:
|
|
56
|
+
return "medium";
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
updateHostClasses() {
|
|
60
|
+
this.classList.remove(
|
|
61
|
+
"pkt-heading",
|
|
62
|
+
"pkt-heading--xsmall",
|
|
63
|
+
"pkt-heading--small",
|
|
64
|
+
"pkt-heading--medium",
|
|
65
|
+
"pkt-heading--large",
|
|
66
|
+
"pkt-heading--xlarge",
|
|
67
|
+
"pkt-sr-only",
|
|
68
|
+
"pkt-heading--start",
|
|
69
|
+
"pkt-heading--center",
|
|
70
|
+
"pkt-heading--end",
|
|
71
|
+
"pkt-heading--light",
|
|
72
|
+
"pkt-heading--regular",
|
|
73
|
+
"pkt-heading--medium",
|
|
74
|
+
"pkt-heading--bold"
|
|
75
|
+
), this.classList.add("pkt-heading"), this.size && this.classList.add(`pkt-heading--${this.size}`), this.weight && this.classList.add(`pkt-heading--fw-${this.weight}`), this.visuallyHidden && this.classList.add("pkt-sr-only"), this.align && this.classList.add(`pkt-heading--${this.align}`);
|
|
76
|
+
}
|
|
77
|
+
render() {
|
|
78
|
+
return g`<slot></slot>`;
|
|
79
|
+
}
|
|
80
|
+
};
|
|
81
|
+
l([
|
|
82
|
+
r({ type: String, reflect: !0 })
|
|
83
|
+
], s.prototype, "size", 2);
|
|
84
|
+
l([
|
|
85
|
+
r({ type: Number, reflect: !0 })
|
|
86
|
+
], s.prototype, "level", 2);
|
|
87
|
+
l([
|
|
88
|
+
r({ type: String, reflect: !0 })
|
|
89
|
+
], s.prototype, "weight", 2);
|
|
90
|
+
l([
|
|
91
|
+
r({ type: Boolean, reflect: !0 })
|
|
92
|
+
], s.prototype, "visuallyHidden", 2);
|
|
93
|
+
l([
|
|
94
|
+
r({ type: String, reflect: !0 })
|
|
95
|
+
], s.prototype, "align", 2);
|
|
96
|
+
s = l([
|
|
97
|
+
p("pkt-heading")
|
|
98
|
+
], s);
|
|
99
|
+
export {
|
|
100
|
+
s as P
|
|
101
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const i=require("./element-CJ_QKaki.cjs");var n=Object.defineProperty,u=Object.getOwnPropertyDescriptor,a=(r,e,l,t)=>{for(var s=t>1?void 0:t?u(e,l):e,d=r.length-1,h;d>=0;d--)(h=r[d])&&(s=(t?h(e,l,s):h(s))||s);return t&&s&&n(e,l,s),s};exports.PktHeading=class extends i.PktShadowElement{constructor(){super(...arguments),this.size=void 0,this.level=2,this.weight=void 0,this.visuallyHidden=!1,this.align=void 0}connectedCallback(){super.connectedCallback(),this.setAttribute("role","heading"),this.setAttribute("aria-level",String(this.level)),this.updateHostClasses()}attributeChangedCallback(e,l,t){super.attributeChangedCallback(e,l,t),e==="level"&&t&&this.setLevel(Number(t)),e==="visuallyHidden"&&(this.visuallyHidden=t!==null&&t!=="false"),(e==="size"||e==="visuallyHidden"||e==="align"||e==="weight")&&this.updateHostClasses()}updated(e){super.updated(e),e.has("level")&&(this.setLevel(this.level),this.hasAttribute("size")||(this.size=this.defaultSizeForLevel),this.hasAttribute("weight")||(this.weight=this.defaultWeightForLevel)),!this.hasAttribute("size")&&(e.has("level")||this.size===void 0)&&(this.size=this.defaultSizeForLevel),(e.has("size")||e.has("visuallyHidden")||e.has("align")||e.has("weight"))&&this.updateHostClasses()}setLevel(e){e>=1&&e<=6?(this.level=e,this.setAttribute("aria-level",String(e))):console.warn(`Invalid heading level: ${e}. Must be between 1 and 6.`)}get defaultSizeForLevel(){switch(this.level){case 1:return"xlarge";case 2:return"large";case 3:return"medium";case 4:return"small";case 5:return"xsmall";case 6:return"xsmall";default:return"medium"}}get defaultWeightForLevel(){switch(this.level){case 1:return"regular";case 2:return"regular";case 3:return"medium";case 4:return"medium";case 5:return"medium";case 6:return"medium";default:return"medium"}}updateHostClasses(){this.classList.remove("pkt-heading","pkt-heading--xsmall","pkt-heading--small","pkt-heading--medium","pkt-heading--large","pkt-heading--xlarge","pkt-sr-only","pkt-heading--start","pkt-heading--center","pkt-heading--end","pkt-heading--light","pkt-heading--regular","pkt-heading--medium","pkt-heading--bold"),this.classList.add("pkt-heading"),this.size&&this.classList.add(`pkt-heading--${this.size}`),this.weight&&this.classList.add(`pkt-heading--fw-${this.weight}`),this.visuallyHidden&&this.classList.add("pkt-sr-only"),this.align&&this.classList.add(`pkt-heading--${this.align}`)}render(){return i.x`<slot></slot>`}};a([i.n({type:String,reflect:!0})],exports.PktHeading.prototype,"size",2);a([i.n({type:Number,reflect:!0})],exports.PktHeading.prototype,"level",2);a([i.n({type:String,reflect:!0})],exports.PktHeading.prototype,"weight",2);a([i.n({type:Boolean,reflect:!0})],exports.PktHeading.prototype,"visuallyHidden",2);a([i.n({type:String,reflect:!0})],exports.PktHeading.prototype,"align",2);exports.PktHeading=a([i.t("pkt-heading")],exports.PktHeading);
|
package/dist/index.d.ts
CHANGED
|
@@ -210,6 +210,7 @@ export declare interface IPktConsent {
|
|
|
210
210
|
export declare interface IPktHeading {
|
|
211
211
|
size?: TPktHeadingSize;
|
|
212
212
|
level?: TPktHeadingLevel;
|
|
213
|
+
weight?: TPktHeadingWeight;
|
|
213
214
|
visuallyHidden?: boolean;
|
|
214
215
|
align?: 'start' | 'center' | 'end';
|
|
215
216
|
}
|
|
@@ -901,6 +902,7 @@ declare class PktElement<T = {}> extends PktShadowElement<T> {
|
|
|
901
902
|
export declare class PktHeading extends PktShadowElement<IPktHeading> implements IPktHeading {
|
|
902
903
|
size: TPktHeadingSize | undefined;
|
|
903
904
|
level: TPktHeadingLevel;
|
|
905
|
+
weight: TPktHeadingWeight | undefined;
|
|
904
906
|
visuallyHidden: boolean;
|
|
905
907
|
align: 'start' | 'center' | 'end' | undefined;
|
|
906
908
|
connectedCallback(): void;
|
|
@@ -908,6 +910,7 @@ export declare class PktHeading extends PktShadowElement<IPktHeading> implements
|
|
|
908
910
|
protected updated(_changedProperties: PropertyValues): void;
|
|
909
911
|
private setLevel;
|
|
910
912
|
private get defaultSizeForLevel();
|
|
913
|
+
private get defaultWeightForLevel();
|
|
911
914
|
private updateHostClasses;
|
|
912
915
|
render(): TemplateResult<1>;
|
|
913
916
|
}
|
|
@@ -1489,6 +1492,8 @@ export declare type TPktHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
|
|
|
1489
1492
|
|
|
1490
1493
|
export declare type TPktHeadingSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
|
|
1491
1494
|
|
|
1495
|
+
declare type TPktHeadingWeight = 'light' | 'regular' | 'medium' | 'bold';
|
|
1496
|
+
|
|
1492
1497
|
export declare type TPktLoaderVariant = 'blue' | 'rainbow' | 'shapes';
|
|
1493
1498
|
|
|
1494
1499
|
declare type TPktSize = 'small' | 'medium' | 'large';
|
package/dist/pkt-card.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./card-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./card-BF2QqCMC.cjs"),t=e.PktCard;Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>e.PktCard});exports.default=t;
|
package/dist/pkt-card.js
CHANGED
package/dist/pkt-heading.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./heading
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./heading-Dv_cH6N1.cjs"),t=e.PktHeading;Object.defineProperty(exports,"PktHeading",{enumerable:!0,get:()=>e.PktHeading});exports.default=t;
|
package/dist/pkt-heading.js
CHANGED
package/dist/pkt-index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("./alert-CCjoJo11.cjs"),l=require("./accordionitem-DCZrHVNR.cjs"),m=require("./backlink-BzEvli8m.cjs"),g=require("./button-abD9URn0.cjs"),P=require("./calendar-Dz1Cnzx5.cjs"),h=require("./card-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("./alert-CCjoJo11.cjs"),l=require("./accordionitem-DCZrHVNR.cjs"),m=require("./backlink-BzEvli8m.cjs"),g=require("./button-abD9URn0.cjs"),P=require("./calendar-Dz1Cnzx5.cjs"),h=require("./card-BF2QqCMC.cjs"),f=require("./combobox-DYYCdlex.cjs"),y=require("./consent-B1N02CuT.cjs"),O=require("./checkbox-BP5zOlPy.cjs"),t=require("./element-CJ_QKaki.cjs"),j=require("./pkt-slot-controller-BzddBp7z.cjs"),s=require("./ref-BFa5Utho.cjs"),q=require("./class-map-C_erArZz.cjs"),k=require("./datepicker-CnCOXI2x.cjs"),x=require("./helptext-EPTR9AIl.cjs"),C=require("./heading-Dv_cH6N1.cjs"),v=require("./icon-BGuizDwk.cjs"),S=require("./input-wrapper-WEGSbIA6.cjs"),T=require("./link-Da3pZ_CW.cjs"),$=require("./linkcard-BM23gzhS.cjs"),L=require("./loader-Bo8RCbCJ.cjs"),_=require("./messagebox-C76IcXTl.cjs"),I=require("./modal-Cdz9JcCX.cjs"),A=require("./progressbar-8gzOtJyh.cjs"),p=require("./radiobutton-BuKXgQm_.cjs"),B=require("./tag-BkuJjOy7.cjs"),d=require("./tabitem-D5zyipN1.cjs"),D=require("./textarea-CcIQXCmC.cjs"),M=require("./textinput-Dn704gQw.cjs"),R=require("./select-BSnylWof.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 j.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="${q.e(e)}">
|
|
3
3
|
<h1 class="pkt-txt-28">${this.string}</h1>
|
|
4
4
|
|
package/dist/pkt-index.js
CHANGED
|
@@ -4,7 +4,7 @@ import { P as D } from "./backlink-CI_jMGzZ.js";
|
|
|
4
4
|
import { P as O } from "./button-D99MF5nV.js";
|
|
5
5
|
import { c as f } from "./calendar-Bz27nuTP.js";
|
|
6
6
|
import { P as j } from "./calendar-Bz27nuTP.js";
|
|
7
|
-
import { P as G } from "./card-
|
|
7
|
+
import { P as G } from "./card-VdZNKsoO.js";
|
|
8
8
|
import { P as K } from "./combobox-D-VZRCHk.js";
|
|
9
9
|
import { P as U } from "./consent-BSNqH1LX.js";
|
|
10
10
|
import { P as q } from "./checkbox-CfXOh6Lw.js";
|
|
@@ -14,7 +14,7 @@ import { e as m, n as k } from "./ref-Xa5dbh--.js";
|
|
|
14
14
|
import { e as u } from "./class-map-wy7PUk0P.js";
|
|
15
15
|
import { P as F, a as J } from "./datepicker-DsqM01iU.js";
|
|
16
16
|
import { P as V } from "./helptext-Cs3QHeEy.js";
|
|
17
|
-
import { P as Y } from "./heading-
|
|
17
|
+
import { P as Y } from "./heading-BUdy170t.js";
|
|
18
18
|
import { P as tt } from "./icon-1dy7UZcu.js";
|
|
19
19
|
import { P as rt } from "./input-wrapper-CnYj-xNE.js";
|
|
20
20
|
import { P as st } from "./link-DzZCw8j2.js";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oslokommune/punkt-elements",
|
|
3
|
-
"version": "13.
|
|
3
|
+
"version": "13.21.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",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"@babel/preset-env": "^7.28.3",
|
|
43
43
|
"@babel/preset-typescript": "^7.25.9",
|
|
44
44
|
"@oslokommune/punkt-assets": "^13.16.0",
|
|
45
|
-
"@oslokommune/punkt-css": "^13.
|
|
45
|
+
"@oslokommune/punkt-css": "^13.21.0",
|
|
46
46
|
"@testing-library/jest-dom": "^6.6.3",
|
|
47
47
|
"@typescript-eslint/eslint-plugin": "^8.46.0",
|
|
48
48
|
"@typescript-eslint/parser": "^8.46.0",
|
|
@@ -79,5 +79,5 @@
|
|
|
79
79
|
"url": "https://github.com/oslokommune/punkt/issues"
|
|
80
80
|
},
|
|
81
81
|
"license": "MIT",
|
|
82
|
-
"gitHead": "
|
|
82
|
+
"gitHead": "7559532feebf044efeec97d19d74c9c77e46a5b3"
|
|
83
83
|
}
|
|
@@ -4,10 +4,12 @@ import { customElement, property } from 'lit/decorators.js'
|
|
|
4
4
|
|
|
5
5
|
export type TPktHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6
|
|
6
6
|
export type TPktHeadingSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'
|
|
7
|
+
export type TPktHeadingWeight = 'light' | 'regular' | 'medium' | 'bold'
|
|
7
8
|
|
|
8
9
|
export interface IPktHeading {
|
|
9
10
|
size?: TPktHeadingSize
|
|
10
11
|
level?: TPktHeadingLevel
|
|
12
|
+
weight?: TPktHeadingWeight
|
|
11
13
|
visuallyHidden?: boolean
|
|
12
14
|
align?: 'start' | 'center' | 'end'
|
|
13
15
|
}
|
|
@@ -16,6 +18,7 @@ export interface IPktHeading {
|
|
|
16
18
|
export class PktHeading extends PktShadowElement<IPktHeading> implements IPktHeading {
|
|
17
19
|
@property({ type: String, reflect: true }) size: TPktHeadingSize | undefined = undefined
|
|
18
20
|
@property({ type: Number, reflect: true }) level: TPktHeadingLevel = 2
|
|
21
|
+
@property({ type: String, reflect: true }) weight: TPktHeadingWeight | undefined = undefined
|
|
19
22
|
@property({ type: Boolean, reflect: true }) visuallyHidden: boolean = false
|
|
20
23
|
@property({ type: String, reflect: true }) align: 'start' | 'center' | 'end' | undefined =
|
|
21
24
|
undefined
|
|
@@ -36,7 +39,7 @@ export class PktHeading extends PktShadowElement<IPktHeading> implements IPktHea
|
|
|
36
39
|
if (name === 'visuallyHidden') {
|
|
37
40
|
this.visuallyHidden = value !== null && value !== 'false'
|
|
38
41
|
}
|
|
39
|
-
if (name === 'size' || name === 'visuallyHidden' || name === 'align') {
|
|
42
|
+
if (name === 'size' || name === 'visuallyHidden' || name === 'align' || name === 'weight') {
|
|
40
43
|
this.updateHostClasses()
|
|
41
44
|
}
|
|
42
45
|
}
|
|
@@ -49,6 +52,9 @@ export class PktHeading extends PktShadowElement<IPktHeading> implements IPktHea
|
|
|
49
52
|
if (!this.hasAttribute('size')) {
|
|
50
53
|
this.size = this.defaultSizeForLevel
|
|
51
54
|
}
|
|
55
|
+
if (!this.hasAttribute('weight')) {
|
|
56
|
+
this.weight = this.defaultWeightForLevel
|
|
57
|
+
}
|
|
52
58
|
}
|
|
53
59
|
if (
|
|
54
60
|
!this.hasAttribute('size') &&
|
|
@@ -60,7 +66,8 @@ export class PktHeading extends PktShadowElement<IPktHeading> implements IPktHea
|
|
|
60
66
|
if (
|
|
61
67
|
_changedProperties.has('size') ||
|
|
62
68
|
_changedProperties.has('visuallyHidden') ||
|
|
63
|
-
_changedProperties.has('align')
|
|
69
|
+
_changedProperties.has('align') ||
|
|
70
|
+
_changedProperties.has('weight')
|
|
64
71
|
) {
|
|
65
72
|
this.updateHostClasses()
|
|
66
73
|
}
|
|
@@ -94,6 +101,25 @@ export class PktHeading extends PktShadowElement<IPktHeading> implements IPktHea
|
|
|
94
101
|
}
|
|
95
102
|
}
|
|
96
103
|
|
|
104
|
+
private get defaultWeightForLevel(): TPktHeadingWeight {
|
|
105
|
+
switch (this.level) {
|
|
106
|
+
case 1:
|
|
107
|
+
return 'regular'
|
|
108
|
+
case 2:
|
|
109
|
+
return 'regular'
|
|
110
|
+
case 3:
|
|
111
|
+
return 'medium'
|
|
112
|
+
case 4:
|
|
113
|
+
return 'medium'
|
|
114
|
+
case 5:
|
|
115
|
+
return 'medium'
|
|
116
|
+
case 6:
|
|
117
|
+
return 'medium'
|
|
118
|
+
default:
|
|
119
|
+
return 'medium'
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
|
|
97
123
|
private updateHostClasses() {
|
|
98
124
|
// Remove all possible classes first
|
|
99
125
|
this.classList.remove(
|
|
@@ -107,10 +133,15 @@ export class PktHeading extends PktShadowElement<IPktHeading> implements IPktHea
|
|
|
107
133
|
'pkt-heading--start',
|
|
108
134
|
'pkt-heading--center',
|
|
109
135
|
'pkt-heading--end',
|
|
136
|
+
'pkt-heading--light',
|
|
137
|
+
'pkt-heading--regular',
|
|
138
|
+
'pkt-heading--medium',
|
|
139
|
+
'pkt-heading--bold',
|
|
110
140
|
)
|
|
111
141
|
// Add current classes
|
|
112
142
|
this.classList.add('pkt-heading')
|
|
113
143
|
if (this.size) this.classList.add(`pkt-heading--${this.size}`)
|
|
144
|
+
if (this.weight) this.classList.add(`pkt-heading--fw-${this.weight}`)
|
|
114
145
|
if (this.visuallyHidden) this.classList.add('pkt-sr-only')
|
|
115
146
|
if (this.align) this.classList.add(`pkt-heading--${this.align}`)
|
|
116
147
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { PktHeading } from './heading'
|
|
2
|
-
import type { IPktHeading, TPktHeadingSize, TPktHeadingLevel } from './heading'
|
|
2
|
+
import type { IPktHeading, TPktHeadingSize, TPktHeadingLevel, TPktHeadingWeight } from './heading'
|
|
3
3
|
|
|
4
4
|
export { PktHeading }
|
|
5
|
-
export type { IPktHeading, TPktHeadingSize, TPktHeadingLevel }
|
|
5
|
+
export type { IPktHeading, TPktHeadingSize, TPktHeadingLevel, TPktHeadingWeight }
|
|
6
6
|
export default PktHeading
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";const i=require("./element-CJ_QKaki.cjs");var h=Object.defineProperty,u=Object.getOwnPropertyDescriptor,a=(n,e,l,t)=>{for(var s=t>1?void 0:t?u(e,l):e,r=n.length-1,d;r>=0;r--)(d=n[r])&&(s=(t?d(e,l,s):d(s))||s);return t&&s&&h(e,l,s),s};exports.PktHeading=class extends i.PktShadowElement{constructor(){super(...arguments),this.size=void 0,this.level=2,this.visuallyHidden=!1,this.align=void 0}connectedCallback(){super.connectedCallback(),this.setAttribute("role","heading"),this.setAttribute("aria-level",String(this.level)),this.updateHostClasses()}attributeChangedCallback(e,l,t){super.attributeChangedCallback(e,l,t),e==="level"&&t&&this.setLevel(Number(t)),e==="visuallyHidden"&&(this.visuallyHidden=t!==null&&t!=="false"),(e==="size"||e==="visuallyHidden"||e==="align")&&this.updateHostClasses()}updated(e){super.updated(e),e.has("level")&&(this.setLevel(this.level),this.hasAttribute("size")||(this.size=this.defaultSizeForLevel)),!this.hasAttribute("size")&&(e.has("level")||this.size===void 0)&&(this.size=this.defaultSizeForLevel),(e.has("size")||e.has("visuallyHidden")||e.has("align"))&&this.updateHostClasses()}setLevel(e){e>=1&&e<=6?(this.level=e,this.setAttribute("aria-level",String(e))):console.warn(`Invalid heading level: ${e}. Must be between 1 and 6.`)}get defaultSizeForLevel(){switch(this.level){case 1:return"xlarge";case 2:return"large";case 3:return"medium";case 4:return"small";case 5:return"xsmall";case 6:return"xsmall";default:return"medium"}}updateHostClasses(){this.classList.remove("pkt-heading","pkt-heading--xsmall","pkt-heading--small","pkt-heading--medium","pkt-heading--large","pkt-heading--xlarge","pkt-sr-only","pkt-heading--start","pkt-heading--center","pkt-heading--end"),this.classList.add("pkt-heading"),this.size&&this.classList.add(`pkt-heading--${this.size}`),this.visuallyHidden&&this.classList.add("pkt-sr-only"),this.align&&this.classList.add(`pkt-heading--${this.align}`)}render(){return i.x`<slot></slot>`}};a([i.n({type:String,reflect:!0})],exports.PktHeading.prototype,"size",2);a([i.n({type:Number,reflect:!0})],exports.PktHeading.prototype,"level",2);a([i.n({type:Boolean,reflect:!0})],exports.PktHeading.prototype,"visuallyHidden",2);a([i.n({type:String,reflect:!0})],exports.PktHeading.prototype,"align",2);exports.PktHeading=a([i.t("pkt-heading")],exports.PktHeading);
|
package/dist/heading-Cs5yGnJg.js
DELETED
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import { b as u, x as p, n as d, a as o } from "./element-CRDRygXu.js";
|
|
2
|
-
var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (e, i, t, r) => {
|
|
3
|
-
for (var s = r > 1 ? void 0 : r ? v(i, t) : i, h = e.length - 1, n; h >= 0; h--)
|
|
4
|
-
(n = e[h]) && (s = (r ? n(i, t, s) : n(s)) || s);
|
|
5
|
-
return r && s && g(i, t, s), s;
|
|
6
|
-
};
|
|
7
|
-
let l = class extends u {
|
|
8
|
-
constructor() {
|
|
9
|
-
super(...arguments), this.size = void 0, this.level = 2, this.visuallyHidden = !1, this.align = void 0;
|
|
10
|
-
}
|
|
11
|
-
connectedCallback() {
|
|
12
|
-
super.connectedCallback(), this.setAttribute("role", "heading"), this.setAttribute("aria-level", String(this.level)), this.updateHostClasses();
|
|
13
|
-
}
|
|
14
|
-
attributeChangedCallback(e, i, t) {
|
|
15
|
-
super.attributeChangedCallback(e, i, t), e === "level" && t && this.setLevel(Number(t)), e === "visuallyHidden" && (this.visuallyHidden = t !== null && t !== "false"), (e === "size" || e === "visuallyHidden" || e === "align") && this.updateHostClasses();
|
|
16
|
-
}
|
|
17
|
-
updated(e) {
|
|
18
|
-
super.updated(e), e.has("level") && (this.setLevel(this.level), this.hasAttribute("size") || (this.size = this.defaultSizeForLevel)), !this.hasAttribute("size") && (e.has("level") || this.size === void 0) && (this.size = this.defaultSizeForLevel), (e.has("size") || e.has("visuallyHidden") || e.has("align")) && this.updateHostClasses();
|
|
19
|
-
}
|
|
20
|
-
setLevel(e) {
|
|
21
|
-
e >= 1 && e <= 6 ? (this.level = e, this.setAttribute("aria-level", String(e))) : console.warn(`Invalid heading level: ${e}. Must be between 1 and 6.`);
|
|
22
|
-
}
|
|
23
|
-
get defaultSizeForLevel() {
|
|
24
|
-
switch (this.level) {
|
|
25
|
-
case 1:
|
|
26
|
-
return "xlarge";
|
|
27
|
-
case 2:
|
|
28
|
-
return "large";
|
|
29
|
-
case 3:
|
|
30
|
-
return "medium";
|
|
31
|
-
case 4:
|
|
32
|
-
return "small";
|
|
33
|
-
case 5:
|
|
34
|
-
return "xsmall";
|
|
35
|
-
case 6:
|
|
36
|
-
return "xsmall";
|
|
37
|
-
default:
|
|
38
|
-
return "medium";
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
updateHostClasses() {
|
|
42
|
-
this.classList.remove(
|
|
43
|
-
"pkt-heading",
|
|
44
|
-
"pkt-heading--xsmall",
|
|
45
|
-
"pkt-heading--small",
|
|
46
|
-
"pkt-heading--medium",
|
|
47
|
-
"pkt-heading--large",
|
|
48
|
-
"pkt-heading--xlarge",
|
|
49
|
-
"pkt-sr-only",
|
|
50
|
-
"pkt-heading--start",
|
|
51
|
-
"pkt-heading--center",
|
|
52
|
-
"pkt-heading--end"
|
|
53
|
-
), this.classList.add("pkt-heading"), this.size && this.classList.add(`pkt-heading--${this.size}`), this.visuallyHidden && this.classList.add("pkt-sr-only"), this.align && this.classList.add(`pkt-heading--${this.align}`);
|
|
54
|
-
}
|
|
55
|
-
render() {
|
|
56
|
-
return p`<slot></slot>`;
|
|
57
|
-
}
|
|
58
|
-
};
|
|
59
|
-
a([
|
|
60
|
-
d({ type: String, reflect: !0 })
|
|
61
|
-
], l.prototype, "size", 2);
|
|
62
|
-
a([
|
|
63
|
-
d({ type: Number, reflect: !0 })
|
|
64
|
-
], l.prototype, "level", 2);
|
|
65
|
-
a([
|
|
66
|
-
d({ type: Boolean, reflect: !0 })
|
|
67
|
-
], l.prototype, "visuallyHidden", 2);
|
|
68
|
-
a([
|
|
69
|
-
d({ type: String, reflect: !0 })
|
|
70
|
-
], l.prototype, "align", 2);
|
|
71
|
-
l = a([
|
|
72
|
-
o("pkt-heading")
|
|
73
|
-
], l);
|
|
74
|
-
export {
|
|
75
|
-
l as P
|
|
76
|
-
};
|