@oslokommune/punkt-elements 13.1.2 → 13.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -0
- package/dist/accordionitem-C9T3nlM0.js +138 -0
- package/dist/accordionitem-Csh7iSVG.cjs +34 -0
- package/dist/index.d.ts +7 -0
- package/dist/pkt-accordion.cjs +1 -1
- package/dist/pkt-accordion.js +2 -2
- package/dist/pkt-index.cjs +1 -1
- package/dist/pkt-index.js +1 -1
- package/package.json +3 -3
- package/src/components/accordion/accordion.ts +31 -0
- package/src/components/accordion/accordionitem.ts +12 -2
- package/dist/accordionitem-C9FI-NXW.js +0 -111
- package/dist/accordionitem-DjAWPtsn.cjs +0 -33
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.2.0](https://github.com/oslokommune/punkt/compare/13.1.2...13.2.0) (2025-08-19)
|
|
9
|
+
|
|
10
|
+
### ⚠ BREAKING CHANGES
|
|
11
|
+
Ingen
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
Ingen
|
|
15
|
+
|
|
16
|
+
### Bug Fixes
|
|
17
|
+
Ingen
|
|
18
|
+
|
|
19
|
+
### Chores
|
|
20
|
+
Ingen
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
|
|
8
25
|
## [13.1.0](https://github.com/oslokommune/punkt/compare/13.0.4...13.1.0) (2025-07-08)
|
|
9
26
|
|
|
10
27
|
### ⚠ BREAKING CHANGES
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
import { i as k, x as f, n as r, a as u, P as _ } from "./element-CgEWt74-.js";
|
|
2
|
+
import { e as y } from "./class-map-BpTj9gtz.js";
|
|
3
|
+
import { P as v } from "./pkt-slot-controller-BPGj-LC5.js";
|
|
4
|
+
import { e as m, n as h } from "./ref-BBYSqgeW.js";
|
|
5
|
+
import { o as $ } from "./if-defined-CmuO4Vz9.js";
|
|
6
|
+
var b = Object.defineProperty, P = Object.getOwnPropertyDescriptor, d = (t, e, a, o) => {
|
|
7
|
+
for (var i = o > 1 ? void 0 : o ? P(e, a) : e, n = t.length - 1, c; n >= 0; n--)
|
|
8
|
+
(c = t[n]) && (i = (o ? c(e, a, i) : c(i)) || i);
|
|
9
|
+
return o && i && b(e, a, i), i;
|
|
10
|
+
};
|
|
11
|
+
let p = class extends k {
|
|
12
|
+
constructor() {
|
|
13
|
+
super(...arguments), this.ariaLabelledBy = "", this.compact = !1, this.skin = "borderless", this.name = "";
|
|
14
|
+
}
|
|
15
|
+
updated(t) {
|
|
16
|
+
t.has("skin") && this.requestUpdate(), t.has("name") && this.updateAccordionItemNames();
|
|
17
|
+
}
|
|
18
|
+
updateAccordionItemNames() {
|
|
19
|
+
var t;
|
|
20
|
+
if (this.name) {
|
|
21
|
+
const e = (t = this.renderRoot) == null ? void 0 : t.querySelector("slot");
|
|
22
|
+
e && e.assignedElements().forEach((o) => {
|
|
23
|
+
o.tagName.toLowerCase() === "pkt-accordion-item" && (o.hasAttribute("name") || o.setAttribute("name", this.name));
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
firstUpdated() {
|
|
28
|
+
var e;
|
|
29
|
+
const t = (e = this.renderRoot) == null ? void 0 : e.querySelector("slot");
|
|
30
|
+
t && t.addEventListener("slotchange", () => {
|
|
31
|
+
this.updateAccordionItemNames();
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
render() {
|
|
35
|
+
const t = {
|
|
36
|
+
"pkt-accordion": !0,
|
|
37
|
+
"pkt-accordion--compact": this.compact,
|
|
38
|
+
[`pkt-accordion--${this.skin}`]: this.skin
|
|
39
|
+
};
|
|
40
|
+
return f`
|
|
41
|
+
<div
|
|
42
|
+
part="container"
|
|
43
|
+
class=${y(t)}
|
|
44
|
+
data-testid="pkt-accordion"
|
|
45
|
+
aria-labelledby=${this.ariaLabelledBy}
|
|
46
|
+
>
|
|
47
|
+
<slot></slot>
|
|
48
|
+
</div>
|
|
49
|
+
`;
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
d([
|
|
53
|
+
r({ type: String, reflect: !0, attribute: "aria-labelledby" })
|
|
54
|
+
], p.prototype, "ariaLabelledBy", 2);
|
|
55
|
+
d([
|
|
56
|
+
r({ type: Boolean, reflect: !0, attribute: "compact" })
|
|
57
|
+
], p.prototype, "compact", 2);
|
|
58
|
+
d([
|
|
59
|
+
r({ type: String, reflect: !0, attribute: "skin" })
|
|
60
|
+
], p.prototype, "skin", 2);
|
|
61
|
+
d([
|
|
62
|
+
r({ type: String, reflect: !0, attribute: "name" })
|
|
63
|
+
], p.prototype, "name", 2);
|
|
64
|
+
p = d([
|
|
65
|
+
u("pkt-accordion")
|
|
66
|
+
], p);
|
|
67
|
+
const C = p;
|
|
68
|
+
var O = Object.defineProperty, g = Object.getOwnPropertyDescriptor, l = (t, e, a, o) => {
|
|
69
|
+
for (var i = o > 1 ? void 0 : o ? g(e, a) : e, n = t.length - 1, c; n >= 0; n--)
|
|
70
|
+
(c = t[n]) && (i = (o ? c(e, a, i) : c(i)) || i);
|
|
71
|
+
return o && i && O(e, a, i), i;
|
|
72
|
+
};
|
|
73
|
+
let s = class extends _ {
|
|
74
|
+
constructor() {
|
|
75
|
+
super(), this.defaultOpen = !1, this.title = "", this.skin = void 0, this.compact = !1, this.isOpen = !1, this.name = void 0, this.accordionItemRef = m(), this.defaultSlot = m(), this.slotController = new v(this, this.defaultSlot);
|
|
76
|
+
}
|
|
77
|
+
firstUpdated(t) {
|
|
78
|
+
this.defaultOpen && (this.isOpen = !0);
|
|
79
|
+
}
|
|
80
|
+
render() {
|
|
81
|
+
const t = {
|
|
82
|
+
"pkt-accordion-item": !0,
|
|
83
|
+
"pkt-accordion-item--compact": this.compact,
|
|
84
|
+
[`pkt-accordion-item--${this.skin}`]: !!this.skin
|
|
85
|
+
};
|
|
86
|
+
return f`
|
|
87
|
+
<details
|
|
88
|
+
class=${y(t)}
|
|
89
|
+
id=${this.id}
|
|
90
|
+
?open=${this.isOpen}
|
|
91
|
+
${h(this.accordionItemRef)}
|
|
92
|
+
name=${$(this.name)}
|
|
93
|
+
>
|
|
94
|
+
<summary class="pkt-accordion-item__title" id=${`pkt-accordion-item-summary-${this.id}`}>
|
|
95
|
+
${this.title}
|
|
96
|
+
<pkt-icon
|
|
97
|
+
name="chevron-thin-down"
|
|
98
|
+
class="pkt-accordion-item__icon"
|
|
99
|
+
aria-hidden="true"
|
|
100
|
+
></pkt-icon>
|
|
101
|
+
</summary>
|
|
102
|
+
<div
|
|
103
|
+
class="pkt-accordion-item__content"
|
|
104
|
+
id="pkt-accordion-item__content-${this.id}"
|
|
105
|
+
role="region"
|
|
106
|
+
>
|
|
107
|
+
<div class="pkt-accordion-item__content-inner" ${h(this.defaultSlot)}></div>
|
|
108
|
+
</div>
|
|
109
|
+
</details>
|
|
110
|
+
`;
|
|
111
|
+
}
|
|
112
|
+
};
|
|
113
|
+
l([
|
|
114
|
+
r({ type: Boolean })
|
|
115
|
+
], s.prototype, "defaultOpen", 2);
|
|
116
|
+
l([
|
|
117
|
+
r({ type: String })
|
|
118
|
+
], s.prototype, "title", 2);
|
|
119
|
+
l([
|
|
120
|
+
r({ type: String, reflect: !0 })
|
|
121
|
+
], s.prototype, "skin", 2);
|
|
122
|
+
l([
|
|
123
|
+
r({ type: Boolean, reflect: !0 })
|
|
124
|
+
], s.prototype, "compact", 2);
|
|
125
|
+
l([
|
|
126
|
+
r({ type: Boolean, reflect: !0 })
|
|
127
|
+
], s.prototype, "isOpen", 2);
|
|
128
|
+
l([
|
|
129
|
+
r({ type: String, reflect: !0 })
|
|
130
|
+
], s.prototype, "name", 2);
|
|
131
|
+
s = l([
|
|
132
|
+
u("pkt-accordion-item")
|
|
133
|
+
], s);
|
|
134
|
+
const E = s;
|
|
135
|
+
export {
|
|
136
|
+
C as P,
|
|
137
|
+
E as a
|
|
138
|
+
};
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";const e=require("./element-6DBpyGQm.cjs"),u=require("./class-map-BBG2gMX4.cjs"),h=require("./pkt-slot-controller-BzddBp7z.cjs"),m=require("./ref-iJtiv3o2.cjs"),f=require("./if-defined-Cni-RHLS.cjs");var y=Object.defineProperty,k=Object.getOwnPropertyDescriptor,d=(t,i,n,r)=>{for(var o=r>1?void 0:r?k(i,n):i,c=t.length-1,a;c>=0;c--)(a=t[c])&&(o=(r?a(i,n,o):a(o))||o);return r&&o&&y(i,n,o),o};let p=class extends e.i{constructor(){super(...arguments),this.ariaLabelledBy="",this.compact=!1,this.skin="borderless",this.name=""}updated(t){t.has("skin")&&this.requestUpdate(),t.has("name")&&this.updateAccordionItemNames()}updateAccordionItemNames(){var t;if(this.name){const i=(t=this.renderRoot)==null?void 0:t.querySelector("slot");i&&i.assignedElements().forEach(r=>{r.tagName.toLowerCase()==="pkt-accordion-item"&&(r.hasAttribute("name")||r.setAttribute("name",this.name))})}}firstUpdated(){var i;const t=(i=this.renderRoot)==null?void 0:i.querySelector("slot");t&&t.addEventListener("slotchange",()=>{this.updateAccordionItemNames()})}render(){const t={"pkt-accordion":!0,"pkt-accordion--compact":this.compact,[`pkt-accordion--${this.skin}`]:this.skin};return e.x`
|
|
2
|
+
<div
|
|
3
|
+
part="container"
|
|
4
|
+
class=${u.e(t)}
|
|
5
|
+
data-testid="pkt-accordion"
|
|
6
|
+
aria-labelledby=${this.ariaLabelledBy}
|
|
7
|
+
>
|
|
8
|
+
<slot></slot>
|
|
9
|
+
</div>
|
|
10
|
+
`}};d([e.n({type:String,reflect:!0,attribute:"aria-labelledby"})],p.prototype,"ariaLabelledBy",2);d([e.n({type:Boolean,reflect:!0,attribute:"compact"})],p.prototype,"compact",2);d([e.n({type:String,reflect:!0,attribute:"skin"})],p.prototype,"skin",2);d([e.n({type:String,reflect:!0,attribute:"name"})],p.prototype,"name",2);p=d([e.t("pkt-accordion")],p);const _=p;var v=Object.defineProperty,$=Object.getOwnPropertyDescriptor,l=(t,i,n,r)=>{for(var o=r>1?void 0:r?$(i,n):i,c=t.length-1,a;c>=0;c--)(a=t[c])&&(o=(r?a(i,n,o):a(o))||o);return r&&o&&v(i,n,o),o};let s=class extends e.PktElement{constructor(){super(),this.defaultOpen=!1,this.title="",this.skin=void 0,this.compact=!1,this.isOpen=!1,this.name=void 0,this.accordionItemRef=m.e(),this.defaultSlot=m.e(),this.slotController=new h.PktSlotController(this,this.defaultSlot)}firstUpdated(t){this.defaultOpen&&(this.isOpen=!0)}render(){const t={"pkt-accordion-item":!0,"pkt-accordion-item--compact":this.compact,[`pkt-accordion-item--${this.skin}`]:!!this.skin};return e.x`
|
|
11
|
+
<details
|
|
12
|
+
class=${u.e(t)}
|
|
13
|
+
id=${this.id}
|
|
14
|
+
?open=${this.isOpen}
|
|
15
|
+
${m.n(this.accordionItemRef)}
|
|
16
|
+
name=${f.o(this.name)}
|
|
17
|
+
>
|
|
18
|
+
<summary class="pkt-accordion-item__title" id=${`pkt-accordion-item-summary-${this.id}`}>
|
|
19
|
+
${this.title}
|
|
20
|
+
<pkt-icon
|
|
21
|
+
name="chevron-thin-down"
|
|
22
|
+
class="pkt-accordion-item__icon"
|
|
23
|
+
aria-hidden="true"
|
|
24
|
+
></pkt-icon>
|
|
25
|
+
</summary>
|
|
26
|
+
<div
|
|
27
|
+
class="pkt-accordion-item__content"
|
|
28
|
+
id="pkt-accordion-item__content-${this.id}"
|
|
29
|
+
role="region"
|
|
30
|
+
>
|
|
31
|
+
<div class="pkt-accordion-item__content-inner" ${m.n(this.defaultSlot)}></div>
|
|
32
|
+
</div>
|
|
33
|
+
</details>
|
|
34
|
+
`}};l([e.n({type:Boolean})],s.prototype,"defaultOpen",2);l([e.n({type:String})],s.prototype,"title",2);l([e.n({type:String,reflect:!0})],s.prototype,"skin",2);l([e.n({type:Boolean,reflect:!0})],s.prototype,"compact",2);l([e.n({type:Boolean,reflect:!0})],s.prototype,"isOpen",2);l([e.n({type:String,reflect:!0})],s.prototype,"name",2);s=l([e.t("pkt-accordion-item")],s);const b=s;exports.PktAccordion=_;exports.PktAccordionItem=b;
|
package/dist/index.d.ts
CHANGED
|
@@ -71,6 +71,7 @@ export declare interface IPktAccordion {
|
|
|
71
71
|
compact?: boolean;
|
|
72
72
|
skin?: TPktAccordionSkin;
|
|
73
73
|
ariaLabelledBy?: string;
|
|
74
|
+
name?: string;
|
|
74
75
|
}
|
|
75
76
|
|
|
76
77
|
/**
|
|
@@ -86,6 +87,7 @@ export declare interface IPktAccordionItem {
|
|
|
86
87
|
skin?: TPktAccordionSkin;
|
|
87
88
|
compact?: boolean;
|
|
88
89
|
isOpen?: boolean;
|
|
90
|
+
name?: string | undefined;
|
|
89
91
|
}
|
|
90
92
|
|
|
91
93
|
declare interface IPktAlert {
|
|
@@ -320,7 +322,10 @@ export declare class PktAccordion extends LitElement implements IPktAccordion {
|
|
|
320
322
|
ariaLabelledBy: string;
|
|
321
323
|
compact: boolean;
|
|
322
324
|
skin: TPktAccordionSkin;
|
|
325
|
+
name: string;
|
|
323
326
|
updated(changedProperties: Map<string, any>): void;
|
|
327
|
+
private updateAccordionItemNames;
|
|
328
|
+
firstUpdated(): void;
|
|
324
329
|
render(): TemplateResult<1>;
|
|
325
330
|
}
|
|
326
331
|
|
|
@@ -330,9 +335,11 @@ export declare class PktAccordionItem extends PktElement implements IPktAccordio
|
|
|
330
335
|
skin: TPktAccordionSkin | undefined;
|
|
331
336
|
compact: boolean;
|
|
332
337
|
isOpen: boolean;
|
|
338
|
+
name: string | undefined;
|
|
333
339
|
accordionItemRef: Ref<HTMLDivElement>;
|
|
334
340
|
defaultSlot: Ref<HTMLElement>;
|
|
335
341
|
constructor();
|
|
342
|
+
protected firstUpdated(_changedProperties: PropertyValues): void;
|
|
336
343
|
render(): TemplateResult<1>;
|
|
337
344
|
}
|
|
338
345
|
|
package/dist/pkt-accordion.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./accordionitem-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./accordionitem-Csh7iSVG.cjs");exports.PktAccordion=e.PktAccordion;exports.PktAccordionItem=e.PktAccordionItem;exports.default=e.PktAccordion;
|
package/dist/pkt-accordion.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { P as r } from "./accordionitem-
|
|
2
|
-
import { a as c } from "./accordionitem-
|
|
1
|
+
import { P as r } from "./accordionitem-C9T3nlM0.js";
|
|
2
|
+
import { a as c } from "./accordionitem-C9T3nlM0.js";
|
|
3
3
|
export {
|
|
4
4
|
r as PktAccordion,
|
|
5
5
|
c as PktAccordionItem,
|
package/dist/pkt-index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("./alert-BH0lJ2ny.cjs"),l=require("./accordionitem-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("./alert-BH0lJ2ny.cjs"),l=require("./accordionitem-Csh7iSVG.cjs"),d=require("./backlink-C5jQRMwJ.cjs"),b=require("./button-CDocR7iN.cjs"),k=require("./calendar-BZe2D4Sr.cjs"),m=require("./card-Bx36j0q4.cjs"),g=require("./combobox-CijGa9Fr.cjs"),h=require("./consent-DrS71kvz.cjs"),f=require("./checkbox-wJ26voZd.cjs"),t=require("./element-6DBpyGQm.cjs"),y=require("./pkt-slot-controller-BzddBp7z.cjs"),s=require("./ref-iJtiv3o2.cjs"),O=require("./class-map-BBG2gMX4.cjs"),j=require("./datepicker-BhrUneAP.cjs"),q=require("./helptext-CzQX6YVE.cjs"),x=require("./heading-BRE_iFtR.cjs"),C=require("./icon-B_ryAy4Q.cjs"),v=require("./input-wrapper-CZ-a00V7.cjs"),S=require("./link-DTkjNlmy.cjs"),$=require("./linkcard-BlMhPNry.cjs"),L=require("./loader-CHPxY9c6.cjs"),_=require("./messagebox-CqUBJs_D.cjs"),A=require("./modal-BdA5aWGU.cjs"),B=require("./progressbar-DhMBXkww.cjs"),p=require("./radiobutton-CdT6v1oq.cjs"),T=require("./tag-DPk3fpEg.cjs"),I=require("./textarea-CPXsMFUq.cjs"),M=require("./textinput-aNI5kibM.cjs"),R=require("./select-DUeTm8ac.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,5 +1,5 @@
|
|
|
1
1
|
import { P as A } from "./alert-B0OUR9oD.js";
|
|
2
|
-
import { P as B, a as E } from "./accordionitem-
|
|
2
|
+
import { P as B, a as E } from "./accordionitem-C9T3nlM0.js";
|
|
3
3
|
import { P as O } from "./backlink-B13JTp9D.js";
|
|
4
4
|
import { P as T } from "./button-DrrEvUy9.js";
|
|
5
5
|
import { c as f } from "./calendar-DevQhOup.js";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oslokommune/punkt-elements",
|
|
3
|
-
"version": "13.
|
|
3
|
+
"version": "13.2.3",
|
|
4
4
|
"description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
|
|
5
5
|
"homepage": "https://punkt.oslo.kommune.no",
|
|
6
6
|
"author": "Team Designsystem, Oslo Origo",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"@oslokommune/punkt-assets": "^13.0.0",
|
|
34
|
-
"@oslokommune/punkt-css": "^13.
|
|
34
|
+
"@oslokommune/punkt-css": "^13.2.3",
|
|
35
35
|
"sass": "^1.78.0",
|
|
36
36
|
"typescript": "^5.6.2",
|
|
37
37
|
"vite": "^5.4.18",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"url": "https://github.com/oslokommune/punkt/issues"
|
|
59
59
|
},
|
|
60
60
|
"license": "MIT",
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "60cd8b0f004380bc7a85246af4f2b8c4aa5243b9"
|
|
62
62
|
}
|
|
@@ -8,6 +8,7 @@ export interface IPktAccordion {
|
|
|
8
8
|
compact?: boolean
|
|
9
9
|
skin?: TPktAccordionSkin
|
|
10
10
|
ariaLabelledBy?: string
|
|
11
|
+
name?: string
|
|
11
12
|
/**
|
|
12
13
|
* @description A unique identifier to connect the accordion with a heading
|
|
13
14
|
*/
|
|
@@ -21,11 +22,41 @@ export class PktAccordion extends LitElement implements IPktAccordion {
|
|
|
21
22
|
@property({ type: Boolean, reflect: true, attribute: 'compact' }) compact: boolean = false
|
|
22
23
|
@property({ type: String, reflect: true, attribute: 'skin' }) skin: TPktAccordionSkin =
|
|
23
24
|
'borderless'
|
|
25
|
+
@property({ type: String, reflect: true, attribute: 'name' }) name: string = ''
|
|
24
26
|
|
|
25
27
|
updated(changedProperties: Map<string, any>) {
|
|
26
28
|
if (changedProperties.has('skin')) {
|
|
27
29
|
this.requestUpdate()
|
|
28
30
|
}
|
|
31
|
+
|
|
32
|
+
if (changedProperties.has('name')) {
|
|
33
|
+
this.updateAccordionItemNames()
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
private updateAccordionItemNames() {
|
|
38
|
+
if (this.name) {
|
|
39
|
+
const slot = this.renderRoot?.querySelector('slot')
|
|
40
|
+
if (slot) {
|
|
41
|
+
const assignedElements = slot.assignedElements()
|
|
42
|
+
assignedElements.forEach((element) => {
|
|
43
|
+
if (element.tagName.toLowerCase() === 'pkt-accordion-item') {
|
|
44
|
+
if (!element.hasAttribute('name')) {
|
|
45
|
+
element.setAttribute('name', this.name)
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
})
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
firstUpdated() {
|
|
54
|
+
const slot = this.renderRoot?.querySelector('slot')
|
|
55
|
+
if (slot) {
|
|
56
|
+
slot.addEventListener('slotchange', () => {
|
|
57
|
+
this.updateAccordionItemNames()
|
|
58
|
+
})
|
|
59
|
+
}
|
|
29
60
|
}
|
|
30
61
|
|
|
31
62
|
render() {
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { PktElement } from '@/base-elements/element'
|
|
2
2
|
import { PktSlotController } from '@/controllers/pkt-slot-controller'
|
|
3
|
-
import { html } from 'lit'
|
|
3
|
+
import { html, PropertyValues } from 'lit'
|
|
4
4
|
import { customElement, property } from 'lit/decorators.js'
|
|
5
5
|
import { createRef, Ref, ref } from 'lit/directives/ref.js'
|
|
6
6
|
import { TPktAccordionSkin } from './accordion'
|
|
7
7
|
import { classMap } from 'lit/directives/class-map.js'
|
|
8
|
+
import { ifDefined } from 'lit/directives/if-defined.js'
|
|
8
9
|
|
|
9
10
|
/**
|
|
10
11
|
* @param toggleProps
|
|
@@ -20,6 +21,7 @@ export interface IPktAccordionItem {
|
|
|
20
21
|
skin?: TPktAccordionSkin
|
|
21
22
|
compact?: boolean
|
|
22
23
|
isOpen?: boolean
|
|
24
|
+
name?: string | undefined
|
|
23
25
|
}
|
|
24
26
|
|
|
25
27
|
@customElement('pkt-accordion-item')
|
|
@@ -28,7 +30,8 @@ export class PktAccordionItem extends PktElement implements IPktAccordionItem {
|
|
|
28
30
|
@property({ type: String }) title: string = ''
|
|
29
31
|
@property({ type: String, reflect: true }) skin: TPktAccordionSkin | undefined = undefined
|
|
30
32
|
@property({ type: Boolean, reflect: true }) compact: boolean = false
|
|
31
|
-
@property({ type: Boolean, reflect: true }) isOpen: boolean =
|
|
33
|
+
@property({ type: Boolean, reflect: true }) isOpen: boolean = false
|
|
34
|
+
@property({ type: String, reflect: true }) name: string | undefined = undefined
|
|
32
35
|
|
|
33
36
|
accordionItemRef: Ref<HTMLDivElement> = createRef()
|
|
34
37
|
defaultSlot: Ref<HTMLElement> = createRef()
|
|
@@ -38,6 +41,12 @@ export class PktAccordionItem extends PktElement implements IPktAccordionItem {
|
|
|
38
41
|
this.slotController = new PktSlotController(this, this.defaultSlot)
|
|
39
42
|
}
|
|
40
43
|
|
|
44
|
+
protected firstUpdated(_changedProperties: PropertyValues): void {
|
|
45
|
+
if (this.defaultOpen) {
|
|
46
|
+
this.isOpen = true
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
41
50
|
render() {
|
|
42
51
|
const accordionItemClass = {
|
|
43
52
|
'pkt-accordion-item': true,
|
|
@@ -51,6 +60,7 @@ export class PktAccordionItem extends PktElement implements IPktAccordionItem {
|
|
|
51
60
|
id=${this.id}
|
|
52
61
|
?open=${this.isOpen}
|
|
53
62
|
${ref(this.accordionItemRef)}
|
|
63
|
+
name=${ifDefined(this.name)}
|
|
54
64
|
>
|
|
55
65
|
<summary class="pkt-accordion-item__title" id=${`pkt-accordion-item-summary-${this.id}`}>
|
|
56
66
|
${this.title}
|
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
import { i as k, x as u, n as s, a as f, P as _ } from "./element-CgEWt74-.js";
|
|
2
|
-
import { e as y } from "./class-map-BpTj9gtz.js";
|
|
3
|
-
import { P as v } from "./pkt-slot-controller-BPGj-LC5.js";
|
|
4
|
-
import { e as m, n as h } from "./ref-BBYSqgeW.js";
|
|
5
|
-
var $ = Object.defineProperty, P = Object.getOwnPropertyDescriptor, d = (e, o, c, i) => {
|
|
6
|
-
for (var t = i > 1 ? void 0 : i ? P(o, c) : o, a = e.length - 1, n; a >= 0; a--)
|
|
7
|
-
(n = e[a]) && (t = (i ? n(o, c, t) : n(t)) || t);
|
|
8
|
-
return i && t && $(o, c, t), t;
|
|
9
|
-
};
|
|
10
|
-
let p = class extends k {
|
|
11
|
-
constructor() {
|
|
12
|
-
super(...arguments), this.ariaLabelledBy = "", this.compact = !1, this.skin = "borderless";
|
|
13
|
-
}
|
|
14
|
-
updated(e) {
|
|
15
|
-
e.has("skin") && this.requestUpdate();
|
|
16
|
-
}
|
|
17
|
-
render() {
|
|
18
|
-
const e = {
|
|
19
|
-
"pkt-accordion": !0,
|
|
20
|
-
"pkt-accordion--compact": this.compact,
|
|
21
|
-
[`pkt-accordion--${this.skin}`]: this.skin
|
|
22
|
-
};
|
|
23
|
-
return u`
|
|
24
|
-
<div
|
|
25
|
-
part="container"
|
|
26
|
-
class=${y(e)}
|
|
27
|
-
data-testid="pkt-accordion"
|
|
28
|
-
aria-labelledby=${this.ariaLabelledBy}
|
|
29
|
-
>
|
|
30
|
-
<slot></slot>
|
|
31
|
-
</div>
|
|
32
|
-
`;
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
|
-
d([
|
|
36
|
-
s({ type: String, reflect: !0, attribute: "aria-labelledby" })
|
|
37
|
-
], p.prototype, "ariaLabelledBy", 2);
|
|
38
|
-
d([
|
|
39
|
-
s({ type: Boolean, reflect: !0, attribute: "compact" })
|
|
40
|
-
], p.prototype, "compact", 2);
|
|
41
|
-
d([
|
|
42
|
-
s({ type: String, reflect: !0, attribute: "skin" })
|
|
43
|
-
], p.prototype, "skin", 2);
|
|
44
|
-
p = d([
|
|
45
|
-
f("pkt-accordion")
|
|
46
|
-
], p);
|
|
47
|
-
const C = p;
|
|
48
|
-
var b = Object.defineProperty, O = Object.getOwnPropertyDescriptor, l = (e, o, c, i) => {
|
|
49
|
-
for (var t = i > 1 ? void 0 : i ? O(o, c) : o, a = e.length - 1, n; a >= 0; a--)
|
|
50
|
-
(n = e[a]) && (t = (i ? n(o, c, t) : n(t)) || t);
|
|
51
|
-
return i && t && b(o, c, t), t;
|
|
52
|
-
};
|
|
53
|
-
let r = class extends _ {
|
|
54
|
-
constructor() {
|
|
55
|
-
super(), this.defaultOpen = !1, this.title = "", this.skin = void 0, this.compact = !1, this.isOpen = this.defaultOpen, this.accordionItemRef = m(), this.defaultSlot = m(), this.slotController = new v(this, this.defaultSlot);
|
|
56
|
-
}
|
|
57
|
-
render() {
|
|
58
|
-
const e = {
|
|
59
|
-
"pkt-accordion-item": !0,
|
|
60
|
-
"pkt-accordion-item--compact": this.compact,
|
|
61
|
-
[`pkt-accordion-item--${this.skin}`]: !!this.skin
|
|
62
|
-
};
|
|
63
|
-
return u`
|
|
64
|
-
<details
|
|
65
|
-
class=${y(e)}
|
|
66
|
-
id=${this.id}
|
|
67
|
-
?open=${this.isOpen}
|
|
68
|
-
${h(this.accordionItemRef)}
|
|
69
|
-
>
|
|
70
|
-
<summary class="pkt-accordion-item__title" id=${`pkt-accordion-item-summary-${this.id}`}>
|
|
71
|
-
${this.title}
|
|
72
|
-
<pkt-icon
|
|
73
|
-
name="chevron-thin-down"
|
|
74
|
-
class="pkt-accordion-item__icon"
|
|
75
|
-
aria-hidden="true"
|
|
76
|
-
></pkt-icon>
|
|
77
|
-
</summary>
|
|
78
|
-
<div
|
|
79
|
-
class="pkt-accordion-item__content"
|
|
80
|
-
id="pkt-accordion-item__content-${this.id}"
|
|
81
|
-
role="region"
|
|
82
|
-
>
|
|
83
|
-
<div class="pkt-accordion-item__content-inner" ${h(this.defaultSlot)}></div>
|
|
84
|
-
</div>
|
|
85
|
-
</details>
|
|
86
|
-
`;
|
|
87
|
-
}
|
|
88
|
-
};
|
|
89
|
-
l([
|
|
90
|
-
s({ type: Boolean })
|
|
91
|
-
], r.prototype, "defaultOpen", 2);
|
|
92
|
-
l([
|
|
93
|
-
s({ type: String })
|
|
94
|
-
], r.prototype, "title", 2);
|
|
95
|
-
l([
|
|
96
|
-
s({ type: String, reflect: !0 })
|
|
97
|
-
], r.prototype, "skin", 2);
|
|
98
|
-
l([
|
|
99
|
-
s({ type: Boolean, reflect: !0 })
|
|
100
|
-
], r.prototype, "compact", 2);
|
|
101
|
-
l([
|
|
102
|
-
s({ type: Boolean, reflect: !0 })
|
|
103
|
-
], r.prototype, "isOpen", 2);
|
|
104
|
-
r = l([
|
|
105
|
-
f("pkt-accordion-item")
|
|
106
|
-
], r);
|
|
107
|
-
const I = r;
|
|
108
|
-
export {
|
|
109
|
-
C as P,
|
|
110
|
-
I as a
|
|
111
|
-
};
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
"use strict";const e=require("./element-6DBpyGQm.cjs"),h=require("./class-map-BBG2gMX4.cjs"),m=require("./pkt-slot-controller-BzddBp7z.cjs"),d=require("./ref-iJtiv3o2.cjs");var f=Object.defineProperty,k=Object.getOwnPropertyDescriptor,u=(o,i,n,r)=>{for(var t=r>1?void 0:r?k(i,n):i,s=o.length-1,a;s>=0;s--)(a=o[s])&&(t=(r?a(i,n,t):a(t))||t);return r&&t&&f(i,n,t),t};let l=class extends e.i{constructor(){super(...arguments),this.ariaLabelledBy="",this.compact=!1,this.skin="borderless"}updated(o){o.has("skin")&&this.requestUpdate()}render(){const o={"pkt-accordion":!0,"pkt-accordion--compact":this.compact,[`pkt-accordion--${this.skin}`]:this.skin};return e.x`
|
|
2
|
-
<div
|
|
3
|
-
part="container"
|
|
4
|
-
class=${h.e(o)}
|
|
5
|
-
data-testid="pkt-accordion"
|
|
6
|
-
aria-labelledby=${this.ariaLabelledBy}
|
|
7
|
-
>
|
|
8
|
-
<slot></slot>
|
|
9
|
-
</div>
|
|
10
|
-
`}};u([e.n({type:String,reflect:!0,attribute:"aria-labelledby"})],l.prototype,"ariaLabelledBy",2);u([e.n({type:Boolean,reflect:!0,attribute:"compact"})],l.prototype,"compact",2);u([e.n({type:String,reflect:!0,attribute:"skin"})],l.prototype,"skin",2);l=u([e.t("pkt-accordion")],l);const y=l;var _=Object.defineProperty,v=Object.getOwnPropertyDescriptor,p=(o,i,n,r)=>{for(var t=r>1?void 0:r?v(i,n):i,s=o.length-1,a;s>=0;s--)(a=o[s])&&(t=(r?a(i,n,t):a(t))||t);return r&&t&&_(i,n,t),t};let c=class extends e.PktElement{constructor(){super(),this.defaultOpen=!1,this.title="",this.skin=void 0,this.compact=!1,this.isOpen=this.defaultOpen,this.accordionItemRef=d.e(),this.defaultSlot=d.e(),this.slotController=new m.PktSlotController(this,this.defaultSlot)}render(){const o={"pkt-accordion-item":!0,"pkt-accordion-item--compact":this.compact,[`pkt-accordion-item--${this.skin}`]:!!this.skin};return e.x`
|
|
11
|
-
<details
|
|
12
|
-
class=${h.e(o)}
|
|
13
|
-
id=${this.id}
|
|
14
|
-
?open=${this.isOpen}
|
|
15
|
-
${d.n(this.accordionItemRef)}
|
|
16
|
-
>
|
|
17
|
-
<summary class="pkt-accordion-item__title" id=${`pkt-accordion-item-summary-${this.id}`}>
|
|
18
|
-
${this.title}
|
|
19
|
-
<pkt-icon
|
|
20
|
-
name="chevron-thin-down"
|
|
21
|
-
class="pkt-accordion-item__icon"
|
|
22
|
-
aria-hidden="true"
|
|
23
|
-
></pkt-icon>
|
|
24
|
-
</summary>
|
|
25
|
-
<div
|
|
26
|
-
class="pkt-accordion-item__content"
|
|
27
|
-
id="pkt-accordion-item__content-${this.id}"
|
|
28
|
-
role="region"
|
|
29
|
-
>
|
|
30
|
-
<div class="pkt-accordion-item__content-inner" ${d.n(this.defaultSlot)}></div>
|
|
31
|
-
</div>
|
|
32
|
-
</details>
|
|
33
|
-
`}};p([e.n({type:Boolean})],c.prototype,"defaultOpen",2);p([e.n({type:String})],c.prototype,"title",2);p([e.n({type:String,reflect:!0})],c.prototype,"skin",2);p([e.n({type:Boolean,reflect:!0})],c.prototype,"compact",2);p([e.n({type:Boolean,reflect:!0})],c.prototype,"isOpen",2);c=p([e.t("pkt-accordion-item")],c);const $=c;exports.PktAccordion=y;exports.PktAccordionItem=$;
|