@oslokommune/punkt-elements 12.18.13 → 12.20.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/dist/card-BAb6gxS6.cjs +28 -0
- package/dist/{card-CSPi9sBR.js → card-CgBn5v1q.js} +54 -49
- package/dist/pkt-card.cjs +1 -1
- package/dist/pkt-card.js +1 -1
- package/dist/pkt-index.cjs +1 -1
- package/dist/pkt-index.js +2 -2
- package/dist/pkt-select.cjs +1 -1
- package/dist/pkt-select.js +1 -1
- package/dist/{select-CFdjp5Sk.cjs → select-D8hS-Xjk.cjs} +7 -7
- package/dist/{select-ACWsh3Q4.js → select-DqdMM9bl.js} +7 -8
- package/package.json +4 -4
- package/src/components/card/card.ts +6 -1
- package/src/components/select/select.ts +0 -1
- package/dist/card-DY2rbosk.cjs +0 -23
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";const g=require("./class-map-Boa7BqCc.cjs"),d=require("./if-defined-DEDlGbAc.cjs"),t=require("./icon-CdMQ6zBT.cjs"),k=require("./pkt-slot-controller-mHT3foJ4.cjs"),l=require("./ref-DCOsLZQg.cjs");require("./tag-Du8P8YIp.cjs");const u="pkt-card",h=!0,m={heading:{type:"string",name:"Heading",description:"Tittel på kortet"},subheading:{type:"string",name:"Subheading",description:"Undertittel på kortet"},skin:{type:["outlined","gray","blue","beige","green"],name:"Skin",description:"Farge på kortet",default:"outlined"},direction:{type:["landscape","portrait"],name:"Direction",description:"Retningen innholdet skal ligge i forhold til kortet",default:"portrait"},tags:{type:"array",description:"Liste av tags på kortet. Tar inn en array med objekter med følgende stringproperties: skin, iconName, ariaLabel, text",name:"Tags",items:{type:"object",properties:{skin:{type:["blue","green","red","yellow"],description:"Farge på tag"},iconName:{type:"icon",description:"Id på ikonet du ønsker å bruke til tag"},ariaLabel:{type:"string",description:"Tekst for aria-label"},text:{type:"string",description:"Tekst på tag",required:!0}}}},image:{type:"object",name:"Bilde",description:"Bilde på kortet. Tar inn et objekt av typen {src: string, alt: string}. src er stien til bildet, og alt er tekst for aria-label.",properties:{src:{type:"string",description:"Bilde på kortet",required:!0},alt:{type:"string",description:"Tekst for aria-label",required:!0}}}},y={default:{description:"Innholdet i kortet"}},c={name:u,"css-class":"pkt-card",isElement:h,props:m,slots:y};var f=Object.defineProperty,b=Object.getOwnPropertyDescriptor,i=(a,s,e,n)=>{for(var r=n>1?void 0:n?b(s,e):s,o=a.length-1,p;o>=0;o--)(p=a[o])&&(r=(n?p(s,e,r):p(r))||r);return n&&r&&f(s,e,r),r};exports.PktCard=class extends t.PktElement{constructor(){super(),this.defaultSlot=l.e(),this.skin=c.props.skin.default,this.direction=c.props.direction.default,this.image={src:"",alt:""},this.heading="",this.subheading="",this.tags=[],this.slotController=new k.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback()}render(){const s={"pkt-card":!0,[`pkt-card--${this.skin}`]:this.skin,[`pkt-card--${this.direction}`]:this.direction};return t.x`
|
|
2
|
+
<div class=${g.e(s)}>
|
|
3
|
+
${this.image.src&&t.x`
|
|
4
|
+
<div class="pkt-card__image">
|
|
5
|
+
<img src=${this.image.src} alt=${this.image.alt||""} />
|
|
6
|
+
</div>
|
|
7
|
+
`}
|
|
8
|
+
<div class="pkt-card__wrapper">
|
|
9
|
+
${this.tags.length>0?t.x`
|
|
10
|
+
<div class="pkt-card__tags">
|
|
11
|
+
${this.tags.map(e=>t.x`
|
|
12
|
+
<pkt-tag
|
|
13
|
+
textStyle="normal-text"
|
|
14
|
+
size="medium"
|
|
15
|
+
skin=${d.o(e.skin)}
|
|
16
|
+
iconName=${d.o(e.iconName)}
|
|
17
|
+
>
|
|
18
|
+
${e.text}
|
|
19
|
+
</pkt-tag>
|
|
20
|
+
`)}
|
|
21
|
+
</div>
|
|
22
|
+
`:t.E}
|
|
23
|
+
${this.heading&&t.x`<h3 class="pkt-txt-30-medium">${this.heading}</h3>`}
|
|
24
|
+
${this.subheading&&t.x`<p class="pkt-txt-20-light">${this.subheading}</p>`}
|
|
25
|
+
${this.defaultSlot&&t.x`<div class="pkt-card__content" ${l.n(this.defaultSlot)}></div>`}
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
`}};i([t.n({type:String,reflect:!0})],exports.PktCard.prototype,"skin",2);i([t.n({type:String,reflect:!0})],exports.PktCard.prototype,"direction",2);i([t.n({type:Object,reflect:!0})],exports.PktCard.prototype,"image",2);i([t.n({type:String,reflect:!0})],exports.PktCard.prototype,"heading",2);i([t.n({type:String,reflect:!0})],exports.PktCard.prototype,"subheading",2);i([t.n({type:Array,reflect:!0})],exports.PktCard.prototype,"tags",2);exports.PktCard=i([t.t("pkt-card")],exports.PktCard);
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { e as
|
|
2
|
-
import { o as
|
|
3
|
-
import { P as k, x as r, E as
|
|
1
|
+
import { e as h } from "./class-map-hz16xq5a.js";
|
|
2
|
+
import { o as c } from "./if-defined-ZFE4ti2t.js";
|
|
3
|
+
import { P as k, x as r, E as m, n as a, t as u } from "./icon-wUXeHiBk.js";
|
|
4
4
|
import { P as y } from "./pkt-slot-controller-DsYpzJ9b.js";
|
|
5
5
|
import { e as f, n as b } from "./ref-DuFGTLVX.js";
|
|
6
6
|
import "./tag-DlnEKEym.js";
|
|
7
|
-
const
|
|
7
|
+
const $ = "pkt-card", v = !0, _ = {
|
|
8
8
|
heading: {
|
|
9
9
|
type: "string",
|
|
10
10
|
name: "Heading",
|
|
@@ -15,6 +15,27 @@ const v = "pkt-card", $ = !0, _ = {
|
|
|
15
15
|
name: "Subheading",
|
|
16
16
|
description: "Undertittel på kortet"
|
|
17
17
|
},
|
|
18
|
+
skin: {
|
|
19
|
+
type: [
|
|
20
|
+
"outlined",
|
|
21
|
+
"gray",
|
|
22
|
+
"blue",
|
|
23
|
+
"beige",
|
|
24
|
+
"green"
|
|
25
|
+
],
|
|
26
|
+
name: "Skin",
|
|
27
|
+
description: "Farge på kortet",
|
|
28
|
+
default: "outlined"
|
|
29
|
+
},
|
|
30
|
+
direction: {
|
|
31
|
+
type: [
|
|
32
|
+
"landscape",
|
|
33
|
+
"portrait"
|
|
34
|
+
],
|
|
35
|
+
name: "Direction",
|
|
36
|
+
description: "Retningen innholdet skal ligge i forhold til kortet",
|
|
37
|
+
default: "portrait"
|
|
38
|
+
},
|
|
18
39
|
tags: {
|
|
19
40
|
type: "array",
|
|
20
41
|
description: "Liste av tags på kortet. Tar inn en array med objekter med følgende stringproperties: skin, iconName, ariaLabel, text",
|
|
@@ -47,27 +68,6 @@ const v = "pkt-card", $ = !0, _ = {
|
|
|
47
68
|
}
|
|
48
69
|
}
|
|
49
70
|
},
|
|
50
|
-
skin: {
|
|
51
|
-
type: [
|
|
52
|
-
"outlined",
|
|
53
|
-
"gray",
|
|
54
|
-
"blue",
|
|
55
|
-
"beige",
|
|
56
|
-
"green"
|
|
57
|
-
],
|
|
58
|
-
name: "Skin",
|
|
59
|
-
description: "Farge på kortet",
|
|
60
|
-
default: "outlined"
|
|
61
|
-
},
|
|
62
|
-
direction: {
|
|
63
|
-
type: [
|
|
64
|
-
"landscape",
|
|
65
|
-
"portrait"
|
|
66
|
-
],
|
|
67
|
-
name: "Direction",
|
|
68
|
-
description: "Retningen innholdet skal ligge i forhold til kortet",
|
|
69
|
-
default: "portrait"
|
|
70
|
-
},
|
|
71
71
|
image: {
|
|
72
72
|
type: "object",
|
|
73
73
|
name: "Bilde",
|
|
@@ -89,21 +89,21 @@ const v = "pkt-card", $ = !0, _ = {
|
|
|
89
89
|
default: {
|
|
90
90
|
description: "Innholdet i kortet"
|
|
91
91
|
}
|
|
92
|
-
},
|
|
93
|
-
name:
|
|
92
|
+
}, g = {
|
|
93
|
+
name: $,
|
|
94
94
|
"css-class": "pkt-card",
|
|
95
|
-
isElement:
|
|
95
|
+
isElement: v,
|
|
96
96
|
props: _,
|
|
97
97
|
slots: S
|
|
98
98
|
};
|
|
99
|
-
var x = Object.defineProperty, P = Object.getOwnPropertyDescriptor, s = (n,
|
|
100
|
-
for (var i = o > 1 ? void 0 : o ? P(
|
|
101
|
-
(d = n[l]) && (i = (o ? d(
|
|
102
|
-
return o && i && x(
|
|
99
|
+
var x = Object.defineProperty, P = Object.getOwnPropertyDescriptor, s = (n, t, p, o) => {
|
|
100
|
+
for (var i = o > 1 ? void 0 : o ? P(t, p) : t, l = n.length - 1, d; l >= 0; l--)
|
|
101
|
+
(d = n[l]) && (i = (o ? d(t, p, i) : d(i)) || i);
|
|
102
|
+
return o && i && x(t, p, i), i;
|
|
103
103
|
};
|
|
104
|
-
let
|
|
104
|
+
let e = class extends k {
|
|
105
105
|
constructor() {
|
|
106
|
-
super(), this.defaultSlot = f(), this.skin =
|
|
106
|
+
super(), this.defaultSlot = f(), this.skin = g.props.skin.default, this.direction = g.props.direction.default, this.image = {
|
|
107
107
|
src: "",
|
|
108
108
|
alt: ""
|
|
109
109
|
}, this.heading = "", this.subheading = "", this.tags = [], this.slotController = new y(this, this.defaultSlot);
|
|
@@ -118,7 +118,7 @@ let t = class extends k {
|
|
|
118
118
|
[`pkt-card--${this.direction}`]: this.direction
|
|
119
119
|
};
|
|
120
120
|
return r`
|
|
121
|
-
<div class=${
|
|
121
|
+
<div class=${h(n)}>
|
|
122
122
|
${this.image.src && r`
|
|
123
123
|
<div class="pkt-card__image">
|
|
124
124
|
<img src=${this.image.src} alt=${this.image.alt || ""} />
|
|
@@ -128,14 +128,19 @@ let t = class extends k {
|
|
|
128
128
|
${this.tags.length > 0 ? r`
|
|
129
129
|
<div class="pkt-card__tags">
|
|
130
130
|
${this.tags.map(
|
|
131
|
-
(
|
|
132
|
-
<pkt-tag
|
|
133
|
-
|
|
131
|
+
(t) => r`
|
|
132
|
+
<pkt-tag
|
|
133
|
+
textStyle="normal-text"
|
|
134
|
+
size="medium"
|
|
135
|
+
skin=${c(t.skin)}
|
|
136
|
+
iconName=${c(t.iconName)}
|
|
137
|
+
>
|
|
138
|
+
${t.text}
|
|
134
139
|
</pkt-tag>
|
|
135
140
|
`
|
|
136
141
|
)}
|
|
137
142
|
</div>
|
|
138
|
-
` :
|
|
143
|
+
` : m}
|
|
139
144
|
${this.heading && r`<h3 class="pkt-txt-30-medium">${this.heading}</h3>`}
|
|
140
145
|
${this.subheading && r`<p class="pkt-txt-20-light">${this.subheading}</p>`}
|
|
141
146
|
${this.defaultSlot && r`<div class="pkt-card__content" ${b(this.defaultSlot)}></div>`}
|
|
@@ -146,25 +151,25 @@ let t = class extends k {
|
|
|
146
151
|
};
|
|
147
152
|
s([
|
|
148
153
|
a({ type: String, reflect: !0 })
|
|
149
|
-
],
|
|
154
|
+
], e.prototype, "skin", 2);
|
|
150
155
|
s([
|
|
151
156
|
a({ type: String, reflect: !0 })
|
|
152
|
-
],
|
|
157
|
+
], e.prototype, "direction", 2);
|
|
153
158
|
s([
|
|
154
159
|
a({ type: Object, reflect: !0 })
|
|
155
|
-
],
|
|
160
|
+
], e.prototype, "image", 2);
|
|
156
161
|
s([
|
|
157
162
|
a({ type: String, reflect: !0 })
|
|
158
|
-
],
|
|
163
|
+
], e.prototype, "heading", 2);
|
|
159
164
|
s([
|
|
160
165
|
a({ type: String, reflect: !0 })
|
|
161
|
-
],
|
|
166
|
+
], e.prototype, "subheading", 2);
|
|
162
167
|
s([
|
|
163
168
|
a({ type: Array, reflect: !0 })
|
|
164
|
-
],
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
],
|
|
169
|
+
], e.prototype, "tags", 2);
|
|
170
|
+
e = s([
|
|
171
|
+
u("pkt-card")
|
|
172
|
+
], e);
|
|
168
173
|
export {
|
|
169
|
-
|
|
174
|
+
e as P
|
|
170
175
|
};
|
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-BAb6gxS6.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-index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./alert-DfjFhisP.cjs"),u=require("./calendar-QSulz7im.cjs"),d=require("./card-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./alert-DfjFhisP.cjs"),u=require("./calendar-QSulz7im.cjs"),d=require("./card-BAb6gxS6.cjs"),t=require("./icon-CdMQ6zBT.cjs"),k=require("./pkt-slot-controller-mHT3foJ4.cjs"),i=require("./ref-DCOsLZQg.cjs"),P=require("./class-map-Boa7BqCc.cjs"),b=require("./datepicker-BUUPN2Ak.cjs"),g=require("./helptext-iZEgxz2U.cjs"),h=require("./input-wrapper-DraeSNb6.cjs"),m=require("./link-DTldg4W2.cjs"),f=require("./linkcard-C5GUN22k.cjs"),y=require("./messagebox-DLsgkPtN.cjs"),v=require("./modal-B-n1mhZ1.cjs"),x=require("./progressbar-872kMPws.cjs"),C=require("./tag-Du8P8YIp.cjs"),O=require("./textarea-DPTHMOSZ.cjs"),j=require("./textinput-OmztIgoC.cjs"),q=require("./select-D8hS-Xjk.cjs");var S=Object.defineProperty,$=Object.getOwnPropertyDescriptor,o=(a,e,r,s)=>{for(var n=s>1?void 0:s?$(e,r):e,l=a.length-1,p;l>=0;l--)(p=a[l])&&(n=(s?p(e,r,n):p(n))||n);return s&&n&&S(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=i.e(),this.namedSlot=i.e(),this.slotController=new k.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="${P.e(e)}">
|
|
3
3
|
<h1 class="pkt-txt-28">${this.string}</h1>
|
|
4
4
|
|
package/dist/pkt-index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { P as w } from "./alert-Du_24cUG.js";
|
|
2
2
|
import { c as P } from "./calendar-BUqcNvfI.js";
|
|
3
3
|
import { P as O } from "./calendar-BUqcNvfI.js";
|
|
4
|
-
import { P as j } from "./card-
|
|
4
|
+
import { P as j } from "./card-CgBn5v1q.js";
|
|
5
5
|
import { P as f, x as h, s as c, n, t as k } from "./icon-wUXeHiBk.js";
|
|
6
6
|
import { a as D } from "./icon-wUXeHiBk.js";
|
|
7
7
|
import { P as x } from "./pkt-slot-controller-DsYpzJ9b.js";
|
|
@@ -18,7 +18,7 @@ import { P as V } from "./progressbar-KBLmOgxm.js";
|
|
|
18
18
|
import { P as Y } from "./tag-DlnEKEym.js";
|
|
19
19
|
import { P as tt } from "./textarea-8VOlYKdT.js";
|
|
20
20
|
import { P as rt } from "./textinput-D2uB8zkQ.js";
|
|
21
|
-
import { P as ot } from "./select-
|
|
21
|
+
import { P as ot } from "./select-DqdMM9bl.js";
|
|
22
22
|
var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (t, e, i, a) => {
|
|
23
23
|
for (var r = a > 1 ? void 0 : a ? v(e, i) : e, p = t.length - 1, l; p >= 0; p--)
|
|
24
24
|
(l = t[p]) && (r = (a ? l(e, i, r) : l(r)) || r);
|
package/dist/pkt-select.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./select-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./select-D8hS-Xjk.cjs"),t=e.PktSelect;Object.defineProperty(exports,"PktSelect",{enumerable:!0,get:()=>e.PktSelect});exports.default=t;
|
package/dist/pkt-select.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const
|
|
1
|
+
"use strict";const n=require("./icon-CdMQ6zBT.cjs"),d=require("./state-SKYD8kRO.cjs"),a=require("./ref-DCOsLZQg.cjs"),o=require("./if-defined-DEDlGbAc.cjs"),u=require("./input-element-BxMdqhqV.cjs");require("./input-wrapper-DraeSNb6.cjs");class c{constructor(t){this.nodes=[],this.options=[],this.host=t,this.host.addController(this),this.nodes=[],this.options=[],this.observer=new MutationObserver(e=>this.handleMutations(e))}hostConnected(){Array.from(this.host.childNodes).forEach(t=>{(t.nodeName==="OPTION"||t.nodeName==="DATA")&&this.addNode(t)}),this.observer.observe(this.host,{childList:!0})}hostDisconnected(){this.observer.disconnect()}addNode(t){(t.nodeName==="OPTION"||t.nodeName==="DATA")&&(t.setAttribute("class","pkt-hide"),this.nodes.push(t))}createOptions(){this.options=this.nodes.map(t=>({value:t.getAttribute("value")||t.textContent||"",label:t.textContent||t.getAttribute("value")||"",selected:!!t.getAttribute("selected"),disabled:!!t.getAttribute("disabled")})),this.host.setAttribute("options",JSON.stringify(this.options))}handleMutations(t){let e=!1;t.forEach(s=>{s.addedNodes.forEach(i=>{(i.nodeName==="OPTION"||i.nodeName==="DATA")&&(this.addNode(i),e=!0)}),s.removedNodes.forEach(i=>{(i.nodeName==="OPTION"||i.nodeName==="DATA")&&(this.nodes=this.nodes.filter(r=>r!==i),e=!0)})}),e&&this.createOptions()}}var b=Object.defineProperty,f=Object.getOwnPropertyDescriptor,h=(l,t,e,s)=>{for(var i=s>1?void 0:s?f(t,e):t,r=l.length-1,p;r>=0;r--)(p=l[r])&&(i=(s?p(t,e,i):p(i))||i);return s&&i&&b(t,e,i),i};exports.PktSelect=class extends u.PktInputElement{constructor(){super(),this.selectRef=a.e(),this.defaultSlot=a.e(),this.options=[],this.value="",this._options=[],this.optionsController=new c(this)}connectedCallback(){super.connectedCallback();const t=this.options.length>0,e=this.optionsController.nodes.length&&this.optionsController.nodes.length>0;!t&&e?this.optionsController.nodes.forEach(s=>{const i={value:s.getAttribute("value")||s.textContent||"",label:s.textContent||s.getAttribute("value")||"",disabled:!!s.getAttribute("disabled")};s.getAttribute("selected")&&!this.value&&(this.value=i.value),this._options.push(i)}):this._options=this.options}attributeChangedCallback(t,e,s){t==="options"&&(this._options=s?JSON.parse(s):[]),super.attributeChangedCallback(t,e,s)}firstUpdated(t){super.firstUpdated(t),this.options.length&&(this._options=this.options)}render(){const t=`pkt-input ${this.fullwidth?"pkt-input--fullwidth":""}`;return n.x`
|
|
2
2
|
<pkt-input-wrapper
|
|
3
3
|
?counter=${this.counter}
|
|
4
4
|
?disabled=${this.disabled}
|
|
@@ -32,13 +32,13 @@
|
|
|
32
32
|
${a.n(this.selectRef)}
|
|
33
33
|
${a.n(this.defaultSlot)}
|
|
34
34
|
>
|
|
35
|
-
${this._options.length>0&&this._options.map(
|
|
36
|
-
value=${
|
|
37
|
-
?selected=${this.value==
|
|
38
|
-
?disabled=${
|
|
35
|
+
${this._options.length>0&&this._options.map(e=>n.x`<option
|
|
36
|
+
value=${e.value}
|
|
37
|
+
?selected=${this.value==e.value}
|
|
38
|
+
?disabled=${e.disabled}
|
|
39
39
|
>
|
|
40
|
-
${
|
|
40
|
+
${e.label}
|
|
41
41
|
</option>`)}
|
|
42
42
|
</select>
|
|
43
43
|
</pkt-input-wrapper>
|
|
44
|
-
`}};h([
|
|
44
|
+
`}};h([n.n({type:Array})],exports.PktSelect.prototype,"options",2);h([n.n({type:String})],exports.PktSelect.prototype,"value",2);h([d.r()],exports.PktSelect.prototype,"_options",2);exports.PktSelect=h([n.t("pkt-select")],exports.PktSelect);
|
|
@@ -38,9 +38,9 @@ class v {
|
|
|
38
38
|
}), e && this.createOptions();
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
|
-
var g = Object.defineProperty, m = Object.getOwnPropertyDescriptor,
|
|
42
|
-
for (var s = o > 1 ? void 0 : o ? m(t, e) : t, a = i.length - 1,
|
|
43
|
-
(
|
|
41
|
+
var g = Object.defineProperty, m = Object.getOwnPropertyDescriptor, h = (i, t, e, o) => {
|
|
42
|
+
for (var s = o > 1 ? void 0 : o ? m(t, e) : t, a = i.length - 1, n; a >= 0; a--)
|
|
43
|
+
(n = i[a]) && (s = (o ? n(t, e, s) : n(s)) || s);
|
|
44
44
|
return o && s && g(t, e, s), s;
|
|
45
45
|
};
|
|
46
46
|
let l = class extends $ {
|
|
@@ -52,7 +52,6 @@ let l = class extends $ {
|
|
|
52
52
|
super.connectedCallback();
|
|
53
53
|
const i = this.options.length > 0, t = this.optionsController.nodes.length && this.optionsController.nodes.length > 0;
|
|
54
54
|
!i && t ? this.optionsController.nodes.forEach((e) => {
|
|
55
|
-
if (!e.textContent && !e.getAttribute("value")) return null;
|
|
56
55
|
const o = {
|
|
57
56
|
value: e.getAttribute("value") || e.textContent || "",
|
|
58
57
|
label: e.textContent || e.getAttribute("value") || "",
|
|
@@ -117,16 +116,16 @@ let l = class extends $ {
|
|
|
117
116
|
`;
|
|
118
117
|
}
|
|
119
118
|
};
|
|
120
|
-
|
|
119
|
+
h([
|
|
121
120
|
c({ type: Array })
|
|
122
121
|
], l.prototype, "options", 2);
|
|
123
|
-
|
|
122
|
+
h([
|
|
124
123
|
c({ type: String })
|
|
125
124
|
], l.prototype, "value", 2);
|
|
126
|
-
|
|
125
|
+
h([
|
|
127
126
|
f()
|
|
128
127
|
], l.prototype, "_options", 2);
|
|
129
|
-
l =
|
|
128
|
+
l = h([
|
|
130
129
|
b("pkt-select")
|
|
131
130
|
], l);
|
|
132
131
|
export {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oslokommune/punkt-elements",
|
|
3
|
-
"version": "12.
|
|
3
|
+
"version": "12.20.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",
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
"urlpattern-polyfill": "^10.0.0"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
|
-
"@oslokommune/punkt-assets": "^12.
|
|
33
|
-
"@oslokommune/punkt-css": "^12.
|
|
32
|
+
"@oslokommune/punkt-assets": "^12.19.0",
|
|
33
|
+
"@oslokommune/punkt-css": "^12.19.0",
|
|
34
34
|
"sass": "^1.78.0",
|
|
35
35
|
"typescript": "^5.6.2",
|
|
36
36
|
"vite": "^5.4.4",
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"url": "https://github.com/oslokommune/punkt/issues"
|
|
58
58
|
},
|
|
59
59
|
"license": "MIT",
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "279a374221d1cfe41fac21406920a020b834a49c"
|
|
61
61
|
}
|
|
@@ -59,7 +59,12 @@ export class PktCard extends PktElement {
|
|
|
59
59
|
<div class="pkt-card__tags">
|
|
60
60
|
${this.tags.map(
|
|
61
61
|
(tag) => html`
|
|
62
|
-
<pkt-tag
|
|
62
|
+
<pkt-tag
|
|
63
|
+
textStyle="normal-text"
|
|
64
|
+
size="medium"
|
|
65
|
+
skin=${ifDefined(tag.skin)}
|
|
66
|
+
iconName=${ifDefined(tag.iconName)}
|
|
67
|
+
>
|
|
63
68
|
${tag.text}
|
|
64
69
|
</pkt-tag>
|
|
65
70
|
`,
|
|
@@ -54,7 +54,6 @@ export class PktSelect extends PktInputElement implements IPktSelect {
|
|
|
54
54
|
|
|
55
55
|
if (!optionsReceivedFromProps && checkIfOptionNodesInSlot) {
|
|
56
56
|
this.optionsController.nodes.forEach((node: Element) => {
|
|
57
|
-
if (!node.textContent && !node.getAttribute('value')) return null
|
|
58
57
|
const option: TSelectOption = {
|
|
59
58
|
value: node.getAttribute('value') || node.textContent || '',
|
|
60
59
|
label: node.textContent || node.getAttribute('value') || '',
|
package/dist/card-DY2rbosk.cjs
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
"use strict";const c=require("./class-map-Boa7BqCc.cjs"),g=require("./if-defined-DEDlGbAc.cjs"),t=require("./icon-CdMQ6zBT.cjs"),k=require("./pkt-slot-controller-mHT3foJ4.cjs"),d=require("./ref-DCOsLZQg.cjs");require("./tag-Du8P8YIp.cjs");const u="pkt-card",h=!0,y={heading:{type:"string",name:"Heading",description:"Tittel på kortet"},subheading:{type:"string",name:"Subheading",description:"Undertittel på kortet"},tags:{type:"array",description:"Liste av tags på kortet. Tar inn en array med objekter med følgende stringproperties: skin, iconName, ariaLabel, text",name:"Tags",items:{type:"object",properties:{skin:{type:["blue","green","red","yellow"],description:"Farge på tag"},iconName:{type:"icon",description:"Id på ikonet du ønsker å bruke til tag"},ariaLabel:{type:"string",description:"Tekst for aria-label"},text:{type:"string",description:"Tekst på tag",required:!0}}}},skin:{type:["outlined","gray","blue","beige","green"],name:"Skin",description:"Farge på kortet",default:"outlined"},direction:{type:["landscape","portrait"],name:"Direction",description:"Retningen innholdet skal ligge i forhold til kortet",default:"portrait"},image:{type:"object",name:"Bilde",description:"Bilde på kortet. Tar inn et objekt av typen {src: string, alt: string}. src er stien til bildet, og alt er tekst for aria-label.",properties:{src:{type:"string",description:"Bilde på kortet",required:!0},alt:{type:"string",description:"Tekst for aria-label",required:!0}}}},m={default:{description:"Innholdet i kortet"}},l={name:u,"css-class":"pkt-card",isElement:h,props:y,slots:m};var f=Object.defineProperty,b=Object.getOwnPropertyDescriptor,r=(a,i,s,n)=>{for(var e=n>1?void 0:n?b(i,s):i,o=a.length-1,p;o>=0;o--)(p=a[o])&&(e=(n?p(i,s,e):p(e))||e);return n&&e&&f(i,s,e),e};exports.PktCard=class extends t.PktElement{constructor(){super(),this.defaultSlot=d.e(),this.skin=l.props.skin.default,this.direction=l.props.direction.default,this.image={src:"",alt:""},this.heading="",this.subheading="",this.tags=[],this.slotController=new k.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback()}render(){const i={"pkt-card":!0,[`pkt-card--${this.skin}`]:this.skin,[`pkt-card--${this.direction}`]:this.direction};return t.x`
|
|
2
|
-
<div class=${c.e(i)}>
|
|
3
|
-
${this.image.src&&t.x`
|
|
4
|
-
<div class="pkt-card__image">
|
|
5
|
-
<img src=${this.image.src} alt=${this.image.alt||""} />
|
|
6
|
-
</div>
|
|
7
|
-
`}
|
|
8
|
-
<div class="pkt-card__wrapper">
|
|
9
|
-
${this.tags.length>0?t.x`
|
|
10
|
-
<div class="pkt-card__tags">
|
|
11
|
-
${this.tags.map(s=>t.x`
|
|
12
|
-
<pkt-tag textStyle="normal-text" size="medium" skin=${g.o(s.skin)}>
|
|
13
|
-
${s.text}
|
|
14
|
-
</pkt-tag>
|
|
15
|
-
`)}
|
|
16
|
-
</div>
|
|
17
|
-
`:t.E}
|
|
18
|
-
${this.heading&&t.x`<h3 class="pkt-txt-30-medium">${this.heading}</h3>`}
|
|
19
|
-
${this.subheading&&t.x`<p class="pkt-txt-20-light">${this.subheading}</p>`}
|
|
20
|
-
${this.defaultSlot&&t.x`<div class="pkt-card__content" ${d.n(this.defaultSlot)}></div>`}
|
|
21
|
-
</div>
|
|
22
|
-
</div>
|
|
23
|
-
`}};r([t.n({type:String,reflect:!0})],exports.PktCard.prototype,"skin",2);r([t.n({type:String,reflect:!0})],exports.PktCard.prototype,"direction",2);r([t.n({type:Object,reflect:!0})],exports.PktCard.prototype,"image",2);r([t.n({type:String,reflect:!0})],exports.PktCard.prototype,"heading",2);r([t.n({type:String,reflect:!0})],exports.PktCard.prototype,"subheading",2);r([t.n({type:Array,reflect:!0})],exports.PktCard.prototype,"tags",2);exports.PktCard=r([t.t("pkt-card")],exports.PktCard);
|