@oslokommune/punkt-elements 12.6.0 → 12.6.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/dist/pkt-alert.cjs +1 -1
- package/dist/pkt-alert.js +13 -11
- package/dist/pkt-messagebox.cjs +2 -2
- package/dist/pkt-messagebox.js +22 -22
- package/dist/pkt-tag.cjs +3 -3
- package/dist/pkt-tag.js +20 -22
- package/package.json +3 -3
- package/src/components/alert/index.ts +4 -0
- package/src/components/messagebox/index.ts +2 -0
- package/src/components/tag/index.ts +5 -5
package/dist/pkt-alert.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-DSyh6tUw.cjs"),c=require("./ref-C3InMDfU.cjs"),d=require("./class-map-Ch54kkX5.cjs"),k=require("./directive-DtixNHDT.cjs");require("./index-Bpc07w_P.cjs");const u="pkt-alert",
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-DSyh6tUw.cjs"),c=require("./ref-C3InMDfU.cjs"),d=require("./class-map-Ch54kkX5.cjs"),k=require("./directive-DtixNHDT.cjs");require("./index-Bpc07w_P.cjs");const u="pkt-alert",m=!0,f={onClose:{description:"React: Klikk-event for 'Lukk'-knappen"},close:{description:"Vue: Klikk-event for 'Lukk'-knappen"}},v={title:{name:"Tittel",description:"Tittelen som vises øverst i på meldingen",type:"string"},skin:{name:"Utseende",description:"Hvordan type melding er dette?",type:["info","success","warning","error"],default:"info"},date:{name:"Sist oppdatert",description:"Dato som vises nederst i på meldingen",type:"string"},ariaLive:{name:"aria-live",description:"Hvordan skal skjermleseren lese opp meldingen?",type:["off","polite","assertive"],default:"polite"},compact:{name:"Kompakt",description:"Gjør meldingen mindre",type:"boolean",default:!1},closeAlert:{name:"Vis 'Lukk'-knapp",description:"Viser 'Lukk'-knappen",type:"boolean",default:!1}},h={default:{description:"Innholdet i meldingen"}},l={name:u,"css-class":"pkt-alert","dark-mode":!0,isElement:m,events:f,props:v,slots:h};var y=Object.defineProperty,_=Object.getOwnPropertyDescriptor,s=(n,e,o,r)=>{for(var i=r>1?void 0:r?_(e,o):e,a=n.length-1,p;a>=0;a--)(p=n[a])&&(i=(r?p(e,o,i):p(i))||i);return r&&i&&y(e,o,i),i};exports.PktAlert=class extends t.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.compact=l.props.compact.default,this.title="",this.skin=l.props.skin.default,this.ariaLive=l.props.ariaLive.default,this.closeAlert=l.props.closeAlert.default,this.date=null,this._isClosed=!1,this.close=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:e},bubbles:!0,composed:!0}))},this.slotController=new c.PktSlotController(this,this.defaultSlot),this._isClosed=!1}render(){const e={"pkt-alert":!0,"pkt-alert--compact":this.compact,[`pkt-alert--${this.skin}`]:this.skin,"pkt-hide":this._isClosed};return t.x`
|
|
2
2
|
<div class=${d.e(e)} aria-live=${this.ariaLive}>
|
|
3
3
|
<pkt-icon
|
|
4
4
|
class="pkt-alert__icon"
|
package/dist/pkt-alert.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { r as m, P as u, x as n, E as k, n as o } from "./index-CsTujnXs.js";
|
|
2
|
-
import { e as f, P as
|
|
2
|
+
import { e as f, P as h, n as v } from "./ref-By_W8A-f.js";
|
|
3
3
|
import { e as y } from "./class-map-DunDFQn7.js";
|
|
4
4
|
import { t as _ } from "./directive-Cxhakbpr.js";
|
|
5
5
|
import "./index-CyqOyy_9.js";
|
|
@@ -67,28 +67,30 @@ const b = "pkt-alert", g = !0, $ = {
|
|
|
67
67
|
props: C,
|
|
68
68
|
slots: S
|
|
69
69
|
};
|
|
70
|
-
var L = Object.defineProperty, P = Object.getOwnPropertyDescriptor, e = (
|
|
71
|
-
for (var
|
|
72
|
-
(d =
|
|
73
|
-
return l &&
|
|
70
|
+
var L = Object.defineProperty, P = Object.getOwnPropertyDescriptor, e = (s, r, p, l) => {
|
|
71
|
+
for (var i = l > 1 ? void 0 : l ? P(r, p) : r, c = s.length - 1, d; c >= 0; c--)
|
|
72
|
+
(d = s[c]) && (i = (l ? d(r, p, i) : d(i)) || i);
|
|
73
|
+
return l && i && L(r, p, i), i;
|
|
74
74
|
};
|
|
75
75
|
let t = class extends u {
|
|
76
76
|
constructor() {
|
|
77
|
-
super(), this.defaultSlot = f(), this.compact = a.props.compact.default, this.title = "", this.skin = a.props.skin.default, this.ariaLive = a.props.ariaLive.default, this.closeAlert = a.props.closeAlert.default, this.date = null, this._isClosed = !1, this.close = (
|
|
77
|
+
super(), this.defaultSlot = f(), this.compact = a.props.compact.default, this.title = "", this.skin = a.props.skin.default, this.ariaLive = a.props.ariaLive.default, this.closeAlert = a.props.closeAlert.default, this.date = null, this._isClosed = !1, this.close = (s) => {
|
|
78
78
|
this._isClosed = !0, this.dispatchEvent(
|
|
79
|
-
new CustomEvent("close", { detail: { origin:
|
|
79
|
+
new CustomEvent("close", { detail: { origin: s }, bubbles: !0, composed: !0 })
|
|
80
|
+
), this.dispatchEvent(
|
|
81
|
+
new CustomEvent("on-close", { detail: { origin: s }, bubbles: !0, composed: !0 })
|
|
80
82
|
);
|
|
81
|
-
}, this.slotController = new
|
|
83
|
+
}, this.slotController = new h(this, this.defaultSlot), this._isClosed = !1;
|
|
82
84
|
}
|
|
83
85
|
render() {
|
|
84
|
-
const
|
|
86
|
+
const s = {
|
|
85
87
|
"pkt-alert": !0,
|
|
86
88
|
"pkt-alert--compact": this.compact,
|
|
87
89
|
[`pkt-alert--${this.skin}`]: this.skin,
|
|
88
90
|
"pkt-hide": this._isClosed
|
|
89
91
|
};
|
|
90
92
|
return n`
|
|
91
|
-
<div class=${y(
|
|
93
|
+
<div class=${y(s)} aria-live=${this.ariaLive}>
|
|
92
94
|
<pkt-icon
|
|
93
95
|
class="pkt-alert__icon"
|
|
94
96
|
name=${this.skin === "info" ? "alert-information" : `alert-${this.skin}`}
|
|
@@ -109,7 +111,7 @@ let t = class extends u {
|
|
|
109
111
|
` : k}
|
|
110
112
|
${this.title ? n`<div class="pkt-alert__title">${this.title}</div>` : k}
|
|
111
113
|
|
|
112
|
-
<div class="pkt-alert__text" ${
|
|
114
|
+
<div class="pkt-alert__text" ${v(this.defaultSlot)}></div>
|
|
113
115
|
|
|
114
116
|
${this.date ? n`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>` : k}
|
|
115
117
|
</div>
|
package/dist/pkt-messagebox.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DSyh6tUw.cjs"),c=require("./ref-C3InMDfU.cjs"),b=require("./class-map-Ch54kkX5.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DSyh6tUw.cjs"),c=require("./ref-C3InMDfU.cjs"),b=require("./class-map-Ch54kkX5.cjs"),d=require("./directive-DtixNHDT.cjs");require("./index-Bpc07w_P.cjs");const k="pkt-messagebox",u=!0,g={onClose:{description:"React: Event som trigges når meldingsboksen lukkes"},"on-close":{description:"Vue: Event som trigges når meldingsboksen lukkes"}},m={title:{name:"Tittel",description:"Tittelen på meldingsboksen",type:"string"},skin:{name:"Utseende",description:"Velg farge på meldingsboksen",type:["beige","blue","red","green"],default:"beige"},compact:{name:"Kompakt",description:"Gjør meldingsboksen mindre",type:"boolean",default:!1},closable:{name:"Kan lukkes",description:"Viser lukkeknapp",type:"boolean",default:!1}},h={default:{description:"Innholdet i meldingsboksen"}},p={name:k,"css-class":"pkt-messagebox",isElement:u,events:g,props:m,slots:h};var f=Object.defineProperty,x=Object.getOwnPropertyDescriptor,o=(i,t,n,l)=>{for(var s=l>1?void 0:l?x(t,n):t,r=i.length-1,a;r>=0;r--)(a=i[r])&&(s=(l?a(t,n,s):a(s))||s);return l&&s&&f(t,n,s),s};exports.PktMessagebox=class extends e.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.closable=p.props.closable.default,this.compact=p.props.compact.default,this.title="",this.skin=p.props.skin.default,this._isClosed=!1,this.close=t=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:t},bubbles:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:t},bubbles:!0}))},this.slotController=new c.PktSlotController(this,this.defaultSlot),this._isClosed=!1}render(){const t={"pkt-messagebox":!0,"pkt-messagebox--compact":this.compact,[`pkt-messagebox--${this.skin}`]:this.skin,"pkt-messagebox--closable":this.closable,"pkt-hide":this._isClosed};return e.x`<div class=${b.e(t)}>
|
|
2
2
|
${this.closable?e.x`<div class="pkt-messagebox__close">
|
|
3
3
|
<button
|
|
4
4
|
@click=${this.close}
|
|
@@ -9,4 +9,4 @@
|
|
|
9
9
|
</div>`:e.E}
|
|
10
10
|
${this.title?e.x`<div class="pkt-messagebox__title">${this.title}</div>`:e.E}
|
|
11
11
|
<div class="pkt-messagebox__text" ${c.n(this.defaultSlot)}></div>
|
|
12
|
-
</div>`}};o([e.n({type:Boolean,reflect:!0})],exports.PktMessagebox.prototype,"closable",2);o([e.n({type:Boolean,reflect:!0})],exports.PktMessagebox.prototype,"compact",2);o([e.n({type:String,reflect:!0})],exports.PktMessagebox.prototype,"title",2);o([e.n({type:String,reflect:!0})],exports.PktMessagebox.prototype,"skin",2);o([e.r()],exports.PktMessagebox.prototype,"_isClosed",2);exports.PktMessagebox=o([
|
|
12
|
+
</div>`}};o([e.n({type:Boolean,reflect:!0})],exports.PktMessagebox.prototype,"closable",2);o([e.n({type:Boolean,reflect:!0})],exports.PktMessagebox.prototype,"compact",2);o([e.n({type:String,reflect:!0})],exports.PktMessagebox.prototype,"title",2);o([e.n({type:String,reflect:!0})],exports.PktMessagebox.prototype,"skin",2);o([e.r()],exports.PktMessagebox.prototype,"_isClosed",2);exports.PktMessagebox=o([d.t("pkt-messagebox")],exports.PktMessagebox);
|
package/dist/pkt-messagebox.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as b, P as k, x as c, E as d, n } from "./index-CsTujnXs.js";
|
|
2
|
-
import { e as u, P as g, n as
|
|
3
|
-
import { e as
|
|
2
|
+
import { e as u, P as g, n as h } from "./ref-By_W8A-f.js";
|
|
3
|
+
import { e as f } from "./class-map-DunDFQn7.js";
|
|
4
4
|
import { t as v } from "./directive-Cxhakbpr.js";
|
|
5
5
|
import "./index-CyqOyy_9.js";
|
|
6
6
|
const _ = "pkt-messagebox", x = !0, y = {
|
|
@@ -39,7 +39,7 @@ const _ = "pkt-messagebox", x = !0, y = {
|
|
|
39
39
|
type: "boolean",
|
|
40
40
|
default: !1
|
|
41
41
|
}
|
|
42
|
-
},
|
|
42
|
+
}, E = {
|
|
43
43
|
default: {
|
|
44
44
|
description: "Innholdet i meldingsboksen"
|
|
45
45
|
}
|
|
@@ -49,28 +49,28 @@ const _ = "pkt-messagebox", x = !0, y = {
|
|
|
49
49
|
isElement: x,
|
|
50
50
|
events: y,
|
|
51
51
|
props: C,
|
|
52
|
-
slots:
|
|
52
|
+
slots: E
|
|
53
53
|
};
|
|
54
|
-
var
|
|
55
|
-
for (var
|
|
56
|
-
(a =
|
|
57
|
-
return i &&
|
|
54
|
+
var P = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, o = (e, l, p, i) => {
|
|
55
|
+
for (var t = i > 1 ? void 0 : i ? $(l, p) : l, r = e.length - 1, a; r >= 0; r--)
|
|
56
|
+
(a = e[r]) && (t = (i ? a(l, p, t) : a(t)) || t);
|
|
57
|
+
return i && t && P(l, p, t), t;
|
|
58
58
|
};
|
|
59
|
-
let
|
|
59
|
+
let s = class extends k {
|
|
60
60
|
constructor() {
|
|
61
|
-
super(), this.defaultSlot = u(), this.closable = m.props.closable.default, this.compact = m.props.compact.default, this.title = "", this.skin = m.props.skin.default, this._isClosed = !1, this.close = (
|
|
62
|
-
this._isClosed = !0, this.dispatchEvent(new CustomEvent("close", { detail: { origin:
|
|
61
|
+
super(), this.defaultSlot = u(), this.closable = m.props.closable.default, this.compact = m.props.compact.default, this.title = "", this.skin = m.props.skin.default, this._isClosed = !1, this.close = (e) => {
|
|
62
|
+
this._isClosed = !0, this.dispatchEvent(new CustomEvent("close", { detail: { origin: e }, bubbles: !0 })), this.dispatchEvent(new CustomEvent("on-close", { detail: { origin: e }, bubbles: !0 }));
|
|
63
63
|
}, this.slotController = new g(this, this.defaultSlot), this._isClosed = !1;
|
|
64
64
|
}
|
|
65
65
|
render() {
|
|
66
|
-
const
|
|
66
|
+
const e = {
|
|
67
67
|
"pkt-messagebox": !0,
|
|
68
68
|
"pkt-messagebox--compact": this.compact,
|
|
69
69
|
[`pkt-messagebox--${this.skin}`]: this.skin,
|
|
70
70
|
"pkt-messagebox--closable": this.closable,
|
|
71
71
|
"pkt-hide": this._isClosed
|
|
72
72
|
};
|
|
73
|
-
return c`<div class=${
|
|
73
|
+
return c`<div class=${f(e)}>
|
|
74
74
|
${this.closable ? c`<div class="pkt-messagebox__close">
|
|
75
75
|
<button
|
|
76
76
|
@click=${this.close}
|
|
@@ -80,28 +80,28 @@ let t = class extends k {
|
|
|
80
80
|
</button>
|
|
81
81
|
</div>` : d}
|
|
82
82
|
${this.title ? c`<div class="pkt-messagebox__title">${this.title}</div>` : d}
|
|
83
|
-
<div class="pkt-messagebox__text" ${
|
|
83
|
+
<div class="pkt-messagebox__text" ${h(this.defaultSlot)}></div>
|
|
84
84
|
</div>`;
|
|
85
85
|
}
|
|
86
86
|
};
|
|
87
87
|
o([
|
|
88
88
|
n({ type: Boolean, reflect: !0 })
|
|
89
|
-
],
|
|
89
|
+
], s.prototype, "closable", 2);
|
|
90
90
|
o([
|
|
91
91
|
n({ type: Boolean, reflect: !0 })
|
|
92
|
-
],
|
|
92
|
+
], s.prototype, "compact", 2);
|
|
93
93
|
o([
|
|
94
94
|
n({ type: String, reflect: !0 })
|
|
95
|
-
],
|
|
95
|
+
], s.prototype, "title", 2);
|
|
96
96
|
o([
|
|
97
97
|
n({ type: String, reflect: !0 })
|
|
98
|
-
],
|
|
98
|
+
], s.prototype, "skin", 2);
|
|
99
99
|
o([
|
|
100
100
|
b()
|
|
101
|
-
],
|
|
102
|
-
|
|
101
|
+
], s.prototype, "_isClosed", 2);
|
|
102
|
+
s = o([
|
|
103
103
|
v("pkt-messagebox")
|
|
104
|
-
],
|
|
104
|
+
], s);
|
|
105
105
|
export {
|
|
106
|
-
|
|
106
|
+
s as PktMessagebox
|
|
107
107
|
};
|
package/dist/pkt-tag.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./class-map-Ch54kkX5.cjs"),g=require("./directive-DtixNHDT.cjs"),t=require("./index-DSyh6tUw.cjs"),o=require("./ref-C3InMDfU.cjs");require("./index-Bpc07w_P.cjs");const h="pkt-tag",
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./class-map-Ch54kkX5.cjs"),g=require("./directive-DtixNHDT.cjs"),t=require("./index-DSyh6tUw.cjs"),o=require("./ref-C3InMDfU.cjs");require("./index-Bpc07w_P.cjs");const h="pkt-tag",d=!0,f={closeTag:{type:"boolean",required:!1,default:!1},size:{required:!1,default:"medium",type:["small","medium","large"]},iconName:{type:"string",required:!1},skin:{required:!1,default:"blue",type:["blue","green","red","beige","yellow","gray","blue-light"]},textStyle:{required:!1,default:"normal-text",type:["thin-text","normal-text"]},type:{required:!1,default:"button",type:["button","submit","reset"]},ariaLabel:{type:"string",required:!1,default:"close"}},k={default:{description:"Teksten til tag"}},a={name:h,"css-class":"pkt-tag",isElement:d,props:f,slots:k};var y=Object.defineProperty,b=Object.getOwnPropertyDescriptor,s=(n,e,l,r)=>{for(var i=r>1?void 0:r?b(e,l):e,p=n.length-1,c;p>=0;p--)(c=n[p])&&(i=(r?c(e,l,i):c(i))||i);return r&&i&&y(e,l,i),i};exports.PktTag=class extends t.PktElement{constructor(){super(),this.defaultSlot=o.e(),this.closeTag=a.props.closeTag.default,this.size=a.props.size.default,this.skin=a.props.skin.default,this.textStyle=a.props.textStyle.default,this.iconName=void 0,this.type=a.props.type.default,this.ariaLabel=a.props.ariaLabel.default,this._isClosed=!1,this.close=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:e},bubbles:!0,composed:!0}))},this.slotController=new o.PktSlotController(this,this.defaultSlot),this._isClosed=!1}render(){const e={"pkt-tag":!0,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`pkt-tag--${this.textStyle}`]:!!this.textStyle},l={"pkt-tag":!0,"pkt-btn":!0,"pkt-btn--tertiary":!0,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`pkt-tag--${this.textStyle}`]:!!this.textStyle,"pkt-btn--icons-right-and-left":this.closeTag&&!!this.iconName,"pkt-hide":this._isClosed};return this.closeTag?t.x`
|
|
2
2
|
<button
|
|
3
3
|
class=${u.e(l)}
|
|
4
4
|
type=${this.type}
|
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
<pkt-icon class="pkt-tag__close-btn" name="close"></pkt-icon>
|
|
11
11
|
</button>
|
|
12
12
|
`:t.x`
|
|
13
|
-
<span class=${u.e(
|
|
13
|
+
<span class=${u.e(e)}>
|
|
14
14
|
${this.iconName&&t.x` <pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon> `}
|
|
15
15
|
<span ${o.n(this.defaultSlot)}></span>
|
|
16
16
|
</span>
|
|
17
|
-
`}};
|
|
17
|
+
`}};s([t.n({type:Boolean,reflect:!0})],exports.PktTag.prototype,"closeTag",2);s([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"size",2);s([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"skin",2);s([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"textStyle",2);s([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"iconName",2);s([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"type",2);s([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"ariaLabel",2);s([t.r()],exports.PktTag.prototype,"_isClosed",2);exports.PktTag=s([g.t("pkt-tag")],exports.PktTag);
|
package/dist/pkt-tag.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { e as h } from "./class-map-DunDFQn7.js";
|
|
2
2
|
import { t as d } from "./directive-Cxhakbpr.js";
|
|
3
|
-
import { r as y, P as g, x as p, n as
|
|
3
|
+
import { r as y, P as g, x as p, n as l } from "./index-CsTujnXs.js";
|
|
4
4
|
import { e as m, P as k, n as f } from "./ref-By_W8A-f.js";
|
|
5
5
|
import "./index-CyqOyy_9.js";
|
|
6
6
|
const b = "pkt-tag", S = !0, $ = {
|
|
@@ -68,30 +68,28 @@ const b = "pkt-tag", S = !0, $ = {
|
|
|
68
68
|
props: $,
|
|
69
69
|
slots: _
|
|
70
70
|
};
|
|
71
|
-
var x = Object.defineProperty, C = Object.getOwnPropertyDescriptor, e = (
|
|
72
|
-
for (var
|
|
73
|
-
(u =
|
|
74
|
-
return
|
|
71
|
+
var x = Object.defineProperty, C = Object.getOwnPropertyDescriptor, e = (s, o, n, a) => {
|
|
72
|
+
for (var i = a > 1 ? void 0 : a ? C(o, n) : o, c = s.length - 1, u; c >= 0; c--)
|
|
73
|
+
(u = s[c]) && (i = (a ? u(o, n, i) : u(i)) || i);
|
|
74
|
+
return a && i && x(o, n, i), i;
|
|
75
75
|
};
|
|
76
76
|
let t = class extends g {
|
|
77
77
|
constructor() {
|
|
78
|
-
super(), this.defaultSlot = m(), this.closeTag = r.props.closeTag.default, this.size = r.props.size.default, this.skin = r.props.skin.default, this.textStyle = r.props.textStyle.default, this.iconName = void 0, this.type = r.props.type.default, this.ariaLabel = r.props.ariaLabel.default, this._isClosed = !1, this.close = (
|
|
78
|
+
super(), this.defaultSlot = m(), this.closeTag = r.props.closeTag.default, this.size = r.props.size.default, this.skin = r.props.skin.default, this.textStyle = r.props.textStyle.default, this.iconName = void 0, this.type = r.props.type.default, this.ariaLabel = r.props.ariaLabel.default, this._isClosed = !1, this.close = (s) => {
|
|
79
79
|
this._isClosed = !0, this.dispatchEvent(
|
|
80
|
-
new CustomEvent("
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
composed: !0
|
|
84
|
-
})
|
|
80
|
+
new CustomEvent("close", { detail: { origin: s }, bubbles: !0, composed: !0 })
|
|
81
|
+
), this.dispatchEvent(
|
|
82
|
+
new CustomEvent("on-close", { detail: { origin: s }, bubbles: !0, composed: !0 })
|
|
85
83
|
);
|
|
86
84
|
}, this.slotController = new k(this, this.defaultSlot), this._isClosed = !1;
|
|
87
85
|
}
|
|
88
86
|
render() {
|
|
89
|
-
const
|
|
87
|
+
const s = {
|
|
90
88
|
"pkt-tag": !0,
|
|
91
89
|
[`pkt-tag--${this.size}`]: !!this.size,
|
|
92
90
|
[`pkt-tag--${this.skin}`]: !!this.skin,
|
|
93
91
|
[`pkt-tag--${this.textStyle}`]: !!this.textStyle
|
|
94
|
-
},
|
|
92
|
+
}, o = {
|
|
95
93
|
"pkt-tag": !0,
|
|
96
94
|
"pkt-btn": !0,
|
|
97
95
|
"pkt-btn--tertiary": !0,
|
|
@@ -103,7 +101,7 @@ let t = class extends g {
|
|
|
103
101
|
};
|
|
104
102
|
return this.closeTag ? p`
|
|
105
103
|
<button
|
|
106
|
-
class=${h(
|
|
104
|
+
class=${h(o)}
|
|
107
105
|
type=${this.type}
|
|
108
106
|
aria-label=${this.ariaLabel}
|
|
109
107
|
@click=${this.close}
|
|
@@ -113,7 +111,7 @@ let t = class extends g {
|
|
|
113
111
|
<pkt-icon class="pkt-tag__close-btn" name="close"></pkt-icon>
|
|
114
112
|
</button>
|
|
115
113
|
` : p`
|
|
116
|
-
<span class=${h(
|
|
114
|
+
<span class=${h(s)}>
|
|
117
115
|
${this.iconName && p` <pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon> `}
|
|
118
116
|
<span ${f(this.defaultSlot)}></span>
|
|
119
117
|
</span>
|
|
@@ -121,25 +119,25 @@ let t = class extends g {
|
|
|
121
119
|
}
|
|
122
120
|
};
|
|
123
121
|
e([
|
|
124
|
-
|
|
122
|
+
l({ type: Boolean, reflect: !0 })
|
|
125
123
|
], t.prototype, "closeTag", 2);
|
|
126
124
|
e([
|
|
127
|
-
|
|
125
|
+
l({ type: String, reflect: !0 })
|
|
128
126
|
], t.prototype, "size", 2);
|
|
129
127
|
e([
|
|
130
|
-
|
|
128
|
+
l({ type: String, reflect: !0 })
|
|
131
129
|
], t.prototype, "skin", 2);
|
|
132
130
|
e([
|
|
133
|
-
|
|
131
|
+
l({ type: String, reflect: !0 })
|
|
134
132
|
], t.prototype, "textStyle", 2);
|
|
135
133
|
e([
|
|
136
|
-
|
|
134
|
+
l({ type: String, reflect: !0 })
|
|
137
135
|
], t.prototype, "iconName", 2);
|
|
138
136
|
e([
|
|
139
|
-
|
|
137
|
+
l({ type: String, reflect: !0 })
|
|
140
138
|
], t.prototype, "type", 2);
|
|
141
139
|
e([
|
|
142
|
-
|
|
140
|
+
l({ type: String, reflect: !0 })
|
|
143
141
|
], t.prototype, "ariaLabel", 2);
|
|
144
142
|
e([
|
|
145
143
|
y()
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oslokommune/punkt-elements",
|
|
3
|
-
"version": "12.6.
|
|
3
|
+
"version": "12.6.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",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@oslokommune/punkt-assets": "^12.4.0",
|
|
31
|
-
"@oslokommune/punkt-css": "^12.
|
|
31
|
+
"@oslokommune/punkt-css": "^12.6.3",
|
|
32
32
|
"sass": "^1.78.0",
|
|
33
33
|
"typescript": "^5.6.2",
|
|
34
34
|
"vite": "^5.4.4",
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"url": "https://github.com/oslokommune/punkt/issues"
|
|
56
56
|
},
|
|
57
57
|
"license": "MIT",
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "35d60829b1e58b95a4771db7ec1d93ea00574269"
|
|
59
59
|
}
|
|
@@ -43,6 +43,10 @@ export class PktAlert extends PktElement {
|
|
|
43
43
|
this.dispatchEvent(
|
|
44
44
|
new CustomEvent('close', { detail: { origin: event }, bubbles: true, composed: true }),
|
|
45
45
|
)
|
|
46
|
+
// Historical support of old Vue implementations…
|
|
47
|
+
this.dispatchEvent(
|
|
48
|
+
new CustomEvent('on-close', { detail: { origin: event }, bubbles: true, composed: true }),
|
|
49
|
+
)
|
|
46
50
|
}
|
|
47
51
|
|
|
48
52
|
render() {
|
|
@@ -37,6 +37,8 @@ export class PktMessagebox extends PktElement {
|
|
|
37
37
|
private close = (event: MouseEvent) => {
|
|
38
38
|
this._isClosed = true
|
|
39
39
|
this.dispatchEvent(new CustomEvent('close', { detail: { origin: event }, bubbles: true }))
|
|
40
|
+
// Historical support of old Vue implementations…
|
|
41
|
+
this.dispatchEvent(new CustomEvent('on-close', { detail: { origin: event }, bubbles: true }))
|
|
40
42
|
}
|
|
41
43
|
|
|
42
44
|
render() {
|
|
@@ -56,11 +56,11 @@ export class PktTag extends PktElement {
|
|
|
56
56
|
private close = (event: MouseEvent) => {
|
|
57
57
|
this._isClosed = true
|
|
58
58
|
this.dispatchEvent(
|
|
59
|
-
new CustomEvent('
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
}),
|
|
59
|
+
new CustomEvent('close', { detail: { origin: event }, bubbles: true, composed: true }),
|
|
60
|
+
)
|
|
61
|
+
// Historical support of old Vue implementations…
|
|
62
|
+
this.dispatchEvent(
|
|
63
|
+
new CustomEvent('on-close', { detail: { origin: event }, bubbles: true, composed: true }),
|
|
64
64
|
)
|
|
65
65
|
}
|
|
66
66
|
|