@oslokommune/punkt-elements 12.34.0 → 12.34.2

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.
@@ -3,21 +3,21 @@ export { }
3
3
 
4
4
  declare global {
5
5
  interface HTMLElementTagNameMap {
6
- 'pkt-combobox': PktCombobox & HTMLSelectElement;
6
+ 'pkt-icon': PktIcon;
7
7
  }
8
8
  }
9
9
 
10
10
 
11
11
  declare global {
12
12
  interface HTMLElementTagNameMap {
13
- 'pkt-listbox': PktListbox;
13
+ 'pkt-combobox': PktCombobox & HTMLSelectElement;
14
14
  }
15
15
  }
16
16
 
17
17
 
18
18
  declare global {
19
19
  interface HTMLElementTagNameMap {
20
- 'pkt-icon': PktIcon;
20
+ 'pkt-listbox': PktListbox;
21
21
  }
22
22
  }
23
23
 
@@ -0,0 +1,32 @@
1
+ "use strict";const c=require("./class-map-BjTUtIEl.cjs"),e=require("./element-BYpg5e6C.cjs"),u=require("./state-y7tCw3bg.cjs"),h=require("./pkt-slot-controller-plQxXRvV.cjs"),d=require("./ref-BbKbXwub.cjs"),k=require("./classutils-BwNK82ZQ.cjs");require("./icon-Cc4gVHxd.cjs");const v={skin:{default:"info"},ariaLive:{default:"polite"},compact:{default:!1},closeAlert:{default:!1}},a={props:v};var f=Object.defineProperty,_=Object.getOwnPropertyDescriptor,i=(o,t,s,l)=>{for(var r=l>1?void 0:l?_(t,s):t,p=o.length-1,n;p>=0;p--)(n=o[p])&&(r=(l?n(t,s,r):n(r))||r);return l&&r&&f(t,s,r),r};exports.PktAlert=class extends e.PktElement{constructor(){super(),this.defaultSlot=d.e(),this.compact=a.props.compact.default,this.title="",this.skin=a.props.skin.default,this.ariaLive=a.props.ariaLive.default,this["aria-live"]=null,this.closeAlert=a.props.closeAlert.default,this.date=null,this._isClosed=!1,this.close=t=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:t},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:t},bubbles:!0,composed:!0}))},this.slotController=new h.PktSlotController(this,this.defaultSlot),this._isClosed=!1}connectedCallback(){super.connectedCallback(),this["aria-live"]=this.getAttribute("aria-live")||this.ariaLive}attributeChangedCallback(t,s,l){t==="ariaLive"&&(this["aria-live"]=l),super.attributeChangedCallback(t,s,l)}updated(t){super.updated(t),t.has("ariaLive")&&(this["aria-live"]=this.ariaLive),t.has("_isClosed")&&k.updateClassAttribute(this,"pkt-hide",this._isClosed)}render(){const t={"pkt-alert":!0,"pkt-alert--compact":this.compact,[`pkt-alert--${this.skin}`]:this.skin,"pkt-hide":this._isClosed},s={"pkt-alert__grid":!0,"pkt-alert__noTitle":!this.title,"pkt-alert__noDate":!this.date};return e.x`
2
+ <div class=${c.e(t)}>
3
+ <div class=${c.e(s)}>
4
+ <pkt-icon
5
+ class="pkt-alert__icon"
6
+ aria-hidden="true"
7
+ name=${this.skin==="info"?"alert-information":`alert-${this.skin}`}
8
+ ></pkt-icon>
9
+
10
+ ${this.closeAlert?e.x`
11
+ <div class="pkt-alert__close">
12
+ <pkt-button
13
+ tabindex="0"
14
+ aria-label="close"
15
+ size=${this.compact?"small":"medium"}
16
+ type="button"
17
+ skin="tertiary"
18
+ iconName="close"
19
+ variant="icon-only"
20
+ @click=${this.close}
21
+ >
22
+ </pkt-button>
23
+ </div>
24
+ `:e.E}
25
+ ${this.title?e.x`<div class="pkt-alert__title">${this.title}</div>`:e.E}
26
+
27
+ <div class="pkt-alert__text" ${d.n(this.defaultSlot)}></div>
28
+
29
+ ${this.date?e.x`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>`:e.E}
30
+ </div>
31
+ </div>
32
+ `}};i([e.n({type:Boolean,reflect:!1})],exports.PktAlert.prototype,"compact",2);i([e.n({type:String,reflect:!0})],exports.PktAlert.prototype,"title",2);i([e.n({type:String,reflect:!0})],exports.PktAlert.prototype,"skin",2);i([e.n({type:String})],exports.PktAlert.prototype,"ariaLive",2);i([e.n({type:String,reflect:!0})],exports.PktAlert.prototype,"aria-live",2);i([e.n({type:Boolean,reflect:!0})],exports.PktAlert.prototype,"closeAlert",2);i([e.n({type:String,reflect:!0})],exports.PktAlert.prototype,"date",2);i([u.r()],exports.PktAlert.prototype,"_isClosed",2);exports.PktAlert=i([e.t("pkt-alert")],exports.PktAlert);
@@ -1,8 +1,8 @@
1
- import { e as h } from "./class-map-D4QK1bDP.js";
2
- import { P as f, E as u, x as p, n as l, a as v } from "./element-J964Wi0N.js";
1
+ import { e as u } from "./class-map-D4QK1bDP.js";
2
+ import { P as f, E as h, x as p, n as l, a as v } from "./element-J964Wi0N.js";
3
3
  import { r as k } from "./state-fdb9lRrL.js";
4
4
  import { P as m } from "./pkt-slot-controller-DFrc5O93.js";
5
- import { e as b, n as _ } from "./ref-3rhflVgg.js";
5
+ import { e as _, n as b } from "./ref-3rhflVgg.js";
6
6
  import { u as C } from "./classutils-RQs1k6D9.js";
7
7
  import "./icon-kSv2VoAB.js";
8
8
  const y = {
@@ -18,17 +18,17 @@ const y = {
18
18
  closeAlert: {
19
19
  default: !1
20
20
  }
21
- }, n = {
21
+ }, c = {
22
22
  props: y
23
23
  };
24
- var $ = Object.defineProperty, S = Object.getOwnPropertyDescriptor, i = (t, a, r, o) => {
25
- for (var s = o > 1 ? void 0 : o ? S(a, r) : a, c = t.length - 1, d; c >= 0; c--)
26
- (d = t[c]) && (s = (o ? d(a, r, s) : d(s)) || s);
27
- return o && s && $(a, r, s), s;
24
+ var $ = Object.defineProperty, g = Object.getOwnPropertyDescriptor, i = (t, s, r, o) => {
25
+ for (var a = o > 1 ? void 0 : o ? g(s, r) : s, n = t.length - 1, d; n >= 0; n--)
26
+ (d = t[n]) && (a = (o ? d(s, r, a) : d(a)) || a);
27
+ return o && a && $(s, r, a), a;
28
28
  };
29
29
  let e = class extends f {
30
30
  constructor() {
31
- super(), this.defaultSlot = b(), this.compact = n.props.compact.default, this.title = "", this.skin = n.props.skin.default, this.ariaLive = n.props.ariaLive.default, this["aria-live"] = null, this.closeAlert = n.props.closeAlert.default, this.date = null, this._isClosed = !1, this.close = (t) => {
31
+ super(), this.defaultSlot = _(), this.compact = c.props.compact.default, this.title = "", this.skin = c.props.skin.default, this.ariaLive = c.props.ariaLive.default, this["aria-live"] = null, this.closeAlert = c.props.closeAlert.default, this.date = null, this._isClosed = !1, this.close = (t) => {
32
32
  this._isClosed = !0, this.dispatchEvent(
33
33
  new CustomEvent("close", { detail: { origin: t }, bubbles: !0, composed: !0 })
34
34
  ), this.dispatchEvent(
@@ -40,8 +40,8 @@ let e = class extends f {
40
40
  connectedCallback() {
41
41
  super.connectedCallback(), this["aria-live"] = this.getAttribute("aria-live") || this.ariaLive;
42
42
  }
43
- attributeChangedCallback(t, a, r) {
44
- t === "ariaLive" && (this["aria-live"] = r), super.attributeChangedCallback(t, a, r);
43
+ attributeChangedCallback(t, s, r) {
44
+ t === "ariaLive" && (this["aria-live"] = r), super.attributeChangedCallback(t, s, r);
45
45
  }
46
46
  updated(t) {
47
47
  super.updated(t), t.has("ariaLive") && (this["aria-live"] = this.ariaLive), t.has("_isClosed") && C(this, "pkt-hide", this._isClosed);
@@ -53,32 +53,41 @@ let e = class extends f {
53
53
  "pkt-alert--compact": this.compact,
54
54
  [`pkt-alert--${this.skin}`]: this.skin,
55
55
  "pkt-hide": this._isClosed
56
+ }, s = {
57
+ "pkt-alert__grid": !0,
58
+ "pkt-alert__noTitle": !this.title,
59
+ "pkt-alert__noDate": !this.date
56
60
  };
57
61
  return p`
58
- <div class=${h(t)}>
59
- <pkt-icon
60
- class="pkt-alert__icon"
61
- name=${this.skin === "info" ? "alert-information" : `alert-${this.skin}`}
62
- ></pkt-icon>
62
+ <div class=${u(t)}>
63
+ <div class=${u(s)}>
64
+ <pkt-icon
65
+ class="pkt-alert__icon"
66
+ aria-hidden="true"
67
+ name=${this.skin === "info" ? "alert-information" : `alert-${this.skin}`}
68
+ ></pkt-icon>
63
69
 
64
- ${this.closeAlert ? p`
65
- <div class="pkt-alert__close">
66
- <button
67
- type="button"
68
- class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
69
- tabindex="0"
70
- aria-label="close"
71
- @click=${this.close}
72
- >
73
- <pkt-icon name="close" class="pkt-btn__icon" aria-hidden="true"></pkt-icon>
74
- </button>
75
- </div>
76
- ` : u}
77
- ${this.title ? p`<div class="pkt-alert__title">${this.title}</div>` : u}
70
+ ${this.closeAlert ? p`
71
+ <div class="pkt-alert__close">
72
+ <pkt-button
73
+ tabindex="0"
74
+ aria-label="close"
75
+ size=${this.compact ? "small" : "medium"}
76
+ type="button"
77
+ skin="tertiary"
78
+ iconName="close"
79
+ variant="icon-only"
80
+ @click=${this.close}
81
+ >
82
+ </pkt-button>
83
+ </div>
84
+ ` : h}
85
+ ${this.title ? p`<div class="pkt-alert__title">${this.title}</div>` : h}
78
86
 
79
- <div class="pkt-alert__text" ${_(this.defaultSlot)}></div>
87
+ <div class="pkt-alert__text" ${b(this.defaultSlot)}></div>
80
88
 
81
- ${this.date ? p`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>` : u}
89
+ ${this.date ? p`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>` : h}
90
+ </div>
82
91
  </div>
83
92
  `;
84
93
  }
package/dist/alert.d.ts CHANGED
@@ -3,21 +3,21 @@ export { }
3
3
 
4
4
  declare global {
5
5
  interface HTMLElementTagNameMap {
6
- 'pkt-combobox': PktCombobox & HTMLSelectElement;
6
+ 'pkt-icon': PktIcon;
7
7
  }
8
8
  }
9
9
 
10
10
 
11
11
  declare global {
12
12
  interface HTMLElementTagNameMap {
13
- 'pkt-listbox': PktListbox;
13
+ 'pkt-combobox': PktCombobox & HTMLSelectElement;
14
14
  }
15
15
  }
16
16
 
17
17
 
18
18
  declare global {
19
19
  interface HTMLElementTagNameMap {
20
- 'pkt-icon': PktIcon;
20
+ 'pkt-listbox': PktListbox;
21
21
  }
22
22
  }
23
23
 
@@ -3,21 +3,21 @@ export { }
3
3
 
4
4
  declare global {
5
5
  interface HTMLElementTagNameMap {
6
- 'pkt-combobox': PktCombobox & HTMLSelectElement;
6
+ 'pkt-icon': PktIcon;
7
7
  }
8
8
  }
9
9
 
10
10
 
11
11
  declare global {
12
12
  interface HTMLElementTagNameMap {
13
- 'pkt-listbox': PktListbox;
13
+ 'pkt-combobox': PktCombobox & HTMLSelectElement;
14
14
  }
15
15
  }
16
16
 
17
17
 
18
18
  declare global {
19
19
  interface HTMLElementTagNameMap {
20
- 'pkt-icon': PktIcon;
20
+ 'pkt-listbox': PktListbox;
21
21
  }
22
22
  }
23
23
 
package/dist/button.d.ts CHANGED
@@ -3,21 +3,21 @@ export { }
3
3
 
4
4
  declare global {
5
5
  interface HTMLElementTagNameMap {
6
- 'pkt-combobox': PktCombobox & HTMLSelectElement;
6
+ 'pkt-icon': PktIcon;
7
7
  }
8
8
  }
9
9
 
10
10
 
11
11
  declare global {
12
12
  interface HTMLElementTagNameMap {
13
- 'pkt-listbox': PktListbox;
13
+ 'pkt-combobox': PktCombobox & HTMLSelectElement;
14
14
  }
15
15
  }
16
16
 
17
17
 
18
18
  declare global {
19
19
  interface HTMLElementTagNameMap {
20
- 'pkt-icon': PktIcon;
20
+ 'pkt-listbox': PktListbox;
21
21
  }
22
22
  }
23
23
 
@@ -3,21 +3,21 @@ export { }
3
3
 
4
4
  declare global {
5
5
  interface HTMLElementTagNameMap {
6
- 'pkt-combobox': PktCombobox & HTMLSelectElement;
6
+ 'pkt-icon': PktIcon;
7
7
  }
8
8
  }
9
9
 
10
10
 
11
11
  declare global {
12
12
  interface HTMLElementTagNameMap {
13
- 'pkt-listbox': PktListbox;
13
+ 'pkt-combobox': PktCombobox & HTMLSelectElement;
14
14
  }
15
15
  }
16
16
 
17
17
 
18
18
  declare global {
19
19
  interface HTMLElementTagNameMap {
20
- 'pkt-icon': PktIcon;
20
+ 'pkt-listbox': PktListbox;
21
21
  }
22
22
  }
23
23
 
package/dist/card.d.ts CHANGED
@@ -3,21 +3,21 @@ export { }
3
3
 
4
4
  declare global {
5
5
  interface HTMLElementTagNameMap {
6
- 'pkt-combobox': PktCombobox & HTMLSelectElement;
6
+ 'pkt-icon': PktIcon;
7
7
  }
8
8
  }
9
9
 
10
10
 
11
11
  declare global {
12
12
  interface HTMLElementTagNameMap {
13
- 'pkt-listbox': PktListbox;
13
+ 'pkt-combobox': PktCombobox & HTMLSelectElement;
14
14
  }
15
15
  }
16
16
 
17
17
 
18
18
  declare global {
19
19
  interface HTMLElementTagNameMap {
20
- 'pkt-icon': PktIcon;
20
+ 'pkt-listbox': PktListbox;
21
21
  }
22
22
  }
23
23
 
@@ -3,21 +3,21 @@ export { }
3
3
 
4
4
  declare global {
5
5
  interface HTMLElementTagNameMap {
6
- 'pkt-combobox': PktCombobox & HTMLSelectElement;
6
+ 'pkt-icon': PktIcon;
7
7
  }
8
8
  }
9
9
 
10
10
 
11
11
  declare global {
12
12
  interface HTMLElementTagNameMap {
13
- 'pkt-listbox': PktListbox;
13
+ 'pkt-combobox': PktCombobox & HTMLSelectElement;
14
14
  }
15
15
  }
16
16
 
17
17
 
18
18
  declare global {
19
19
  interface HTMLElementTagNameMap {
20
- 'pkt-icon': PktIcon;
20
+ 'pkt-listbox': PktListbox;
21
21
  }
22
22
  }
23
23
 
@@ -3,21 +3,21 @@ export { }
3
3
 
4
4
  declare global {
5
5
  interface HTMLElementTagNameMap {
6
- 'pkt-combobox': PktCombobox & HTMLSelectElement;
6
+ 'pkt-icon': PktIcon;
7
7
  }
8
8
  }
9
9
 
10
10
 
11
11
  declare global {
12
12
  interface HTMLElementTagNameMap {
13
- 'pkt-listbox': PktListbox;
13
+ 'pkt-combobox': PktCombobox & HTMLSelectElement;
14
14
  }
15
15
  }
16
16
 
17
17
 
18
18
  declare global {
19
19
  interface HTMLElementTagNameMap {
20
- 'pkt-icon': PktIcon;
20
+ 'pkt-listbox': PktListbox;
21
21
  }
22
22
  }
23
23
 
@@ -3,21 +3,21 @@ export { }
3
3
 
4
4
  declare global {
5
5
  interface HTMLElementTagNameMap {
6
- 'pkt-combobox': PktCombobox & HTMLSelectElement;
6
+ 'pkt-icon': PktIcon;
7
7
  }
8
8
  }
9
9
 
10
10
 
11
11
  declare global {
12
12
  interface HTMLElementTagNameMap {
13
- 'pkt-listbox': PktListbox;
13
+ 'pkt-combobox': PktCombobox & HTMLSelectElement;
14
14
  }
15
15
  }
16
16
 
17
17
 
18
18
  declare global {
19
19
  interface HTMLElementTagNameMap {
20
- 'pkt-icon': PktIcon;
20
+ 'pkt-listbox': PktListbox;
21
21
  }
22
22
  }
23
23
 
@@ -3,21 +3,21 @@ export { }
3
3
 
4
4
  declare global {
5
5
  interface HTMLElementTagNameMap {
6
- 'pkt-combobox': PktCombobox & HTMLSelectElement;
6
+ 'pkt-icon': PktIcon;
7
7
  }
8
8
  }
9
9
 
10
10
 
11
11
  declare global {
12
12
  interface HTMLElementTagNameMap {
13
- 'pkt-listbox': PktListbox;
13
+ 'pkt-combobox': PktCombobox & HTMLSelectElement;
14
14
  }
15
15
  }
16
16
 
17
17
 
18
18
  declare global {
19
19
  interface HTMLElementTagNameMap {
20
- 'pkt-icon': PktIcon;
20
+ 'pkt-listbox': PktListbox;
21
21
  }
22
22
  }
23
23
 
package/dist/icon.d.ts CHANGED
@@ -3,21 +3,21 @@ export { }
3
3
 
4
4
  declare global {
5
5
  interface HTMLElementTagNameMap {
6
- 'pkt-combobox': PktCombobox & HTMLSelectElement;
6
+ 'pkt-icon': PktIcon;
7
7
  }
8
8
  }
9
9
 
10
10
 
11
11
  declare global {
12
12
  interface HTMLElementTagNameMap {
13
- 'pkt-listbox': PktListbox;
13
+ 'pkt-combobox': PktCombobox & HTMLSelectElement;
14
14
  }
15
15
  }
16
16
 
17
17
 
18
18
  declare global {
19
19
  interface HTMLElementTagNameMap {
20
- 'pkt-icon': PktIcon;
20
+ 'pkt-listbox': PktListbox;
21
21
  }
22
22
  }
23
23
 
package/dist/index.d.ts CHANGED
@@ -1125,21 +1125,21 @@ export { }
1125
1125
 
1126
1126
  declare global {
1127
1127
  interface HTMLElementTagNameMap {
1128
- 'pkt-combobox': PktCombobox & HTMLSelectElement;
1128
+ 'pkt-icon': PktIcon;
1129
1129
  }
1130
1130
  }
1131
1131
 
1132
1132
 
1133
1133
  declare global {
1134
1134
  interface HTMLElementTagNameMap {
1135
- 'pkt-listbox': PktListbox;
1135
+ 'pkt-combobox': PktCombobox & HTMLSelectElement;
1136
1136
  }
1137
1137
  }
1138
1138
 
1139
1139
 
1140
1140
  declare global {
1141
1141
  interface HTMLElementTagNameMap {
1142
- 'pkt-icon': PktIcon;
1142
+ 'pkt-listbox': PktListbox;
1143
1143
  }
1144
1144
  }
1145
1145
 
@@ -3,21 +3,21 @@ export { }
3
3
 
4
4
  declare global {
5
5
  interface HTMLElementTagNameMap {
6
- 'pkt-combobox': PktCombobox & HTMLSelectElement;
6
+ 'pkt-icon': PktIcon;
7
7
  }
8
8
  }
9
9
 
10
10
 
11
11
  declare global {
12
12
  interface HTMLElementTagNameMap {
13
- 'pkt-listbox': PktListbox;
13
+ 'pkt-combobox': PktCombobox & HTMLSelectElement;
14
14
  }
15
15
  }
16
16
 
17
17
 
18
18
  declare global {
19
19
  interface HTMLElementTagNameMap {
20
- 'pkt-icon': PktIcon;
20
+ 'pkt-listbox': PktListbox;
21
21
  }
22
22
  }
23
23
 
package/dist/link.d.ts CHANGED
@@ -3,21 +3,21 @@ export { }
3
3
 
4
4
  declare global {
5
5
  interface HTMLElementTagNameMap {
6
- 'pkt-combobox': PktCombobox & HTMLSelectElement;
6
+ 'pkt-icon': PktIcon;
7
7
  }
8
8
  }
9
9
 
10
10
 
11
11
  declare global {
12
12
  interface HTMLElementTagNameMap {
13
- 'pkt-listbox': PktListbox;
13
+ 'pkt-combobox': PktCombobox & HTMLSelectElement;
14
14
  }
15
15
  }
16
16
 
17
17
 
18
18
  declare global {
19
19
  interface HTMLElementTagNameMap {
20
- 'pkt-icon': PktIcon;
20
+ 'pkt-listbox': PktListbox;
21
21
  }
22
22
  }
23
23
 
@@ -3,21 +3,21 @@ export { }
3
3
 
4
4
  declare global {
5
5
  interface HTMLElementTagNameMap {
6
- 'pkt-combobox': PktCombobox & HTMLSelectElement;
6
+ 'pkt-icon': PktIcon;
7
7
  }
8
8
  }
9
9
 
10
10
 
11
11
  declare global {
12
12
  interface HTMLElementTagNameMap {
13
- 'pkt-listbox': PktListbox;
13
+ 'pkt-combobox': PktCombobox & HTMLSelectElement;
14
14
  }
15
15
  }
16
16
 
17
17
 
18
18
  declare global {
19
19
  interface HTMLElementTagNameMap {
20
- 'pkt-icon': PktIcon;
20
+ 'pkt-listbox': PktListbox;
21
21
  }
22
22
  }
23
23
 
package/dist/listbox.d.ts CHANGED
@@ -3,21 +3,21 @@ export { }
3
3
 
4
4
  declare global {
5
5
  interface HTMLElementTagNameMap {
6
- 'pkt-combobox': PktCombobox & HTMLSelectElement;
6
+ 'pkt-icon': PktIcon;
7
7
  }
8
8
  }
9
9
 
10
10
 
11
11
  declare global {
12
12
  interface HTMLElementTagNameMap {
13
- 'pkt-listbox': PktListbox;
13
+ 'pkt-combobox': PktCombobox & HTMLSelectElement;
14
14
  }
15
15
  }
16
16
 
17
17
 
18
18
  declare global {
19
19
  interface HTMLElementTagNameMap {
20
- 'pkt-icon': PktIcon;
20
+ 'pkt-listbox': PktListbox;
21
21
  }
22
22
  }
23
23
 
package/dist/loader.d.ts CHANGED
@@ -3,21 +3,21 @@ export { }
3
3
 
4
4
  declare global {
5
5
  interface HTMLElementTagNameMap {
6
- 'pkt-combobox': PktCombobox & HTMLSelectElement;
6
+ 'pkt-icon': PktIcon;
7
7
  }
8
8
  }
9
9
 
10
10
 
11
11
  declare global {
12
12
  interface HTMLElementTagNameMap {
13
- 'pkt-listbox': PktListbox;
13
+ 'pkt-combobox': PktCombobox & HTMLSelectElement;
14
14
  }
15
15
  }
16
16
 
17
17
 
18
18
  declare global {
19
19
  interface HTMLElementTagNameMap {
20
- 'pkt-icon': PktIcon;
20
+ 'pkt-listbox': PktListbox;
21
21
  }
22
22
  }
23
23
 
@@ -3,21 +3,21 @@ export { }
3
3
 
4
4
  declare global {
5
5
  interface HTMLElementTagNameMap {
6
- 'pkt-combobox': PktCombobox & HTMLSelectElement;
6
+ 'pkt-icon': PktIcon;
7
7
  }
8
8
  }
9
9
 
10
10
 
11
11
  declare global {
12
12
  interface HTMLElementTagNameMap {
13
- 'pkt-listbox': PktListbox;
13
+ 'pkt-combobox': PktCombobox & HTMLSelectElement;
14
14
  }
15
15
  }
16
16
 
17
17
 
18
18
  declare global {
19
19
  interface HTMLElementTagNameMap {
20
- 'pkt-icon': PktIcon;
20
+ 'pkt-listbox': PktListbox;
21
21
  }
22
22
  }
23
23
 
package/dist/modal.d.ts CHANGED
@@ -3,21 +3,21 @@ export { }
3
3
 
4
4
  declare global {
5
5
  interface HTMLElementTagNameMap {
6
- 'pkt-combobox': PktCombobox & HTMLSelectElement;
6
+ 'pkt-icon': PktIcon;
7
7
  }
8
8
  }
9
9
 
10
10
 
11
11
  declare global {
12
12
  interface HTMLElementTagNameMap {
13
- 'pkt-listbox': PktListbox;
13
+ 'pkt-combobox': PktCombobox & HTMLSelectElement;
14
14
  }
15
15
  }
16
16
 
17
17
 
18
18
  declare global {
19
19
  interface HTMLElementTagNameMap {
20
- 'pkt-icon': PktIcon;
20
+ 'pkt-listbox': PktListbox;
21
21
  }
22
22
  }
23
23
 
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./alert-CrBZnND3.cjs"),t=e.PktAlert;Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>e.PktAlert});exports.default=t;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./alert-B3HuK30R.cjs"),t=e.PktAlert;Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>e.PktAlert});exports.default=t;
package/dist/pkt-alert.js CHANGED
@@ -1,4 +1,4 @@
1
- import { P as t } from "./alert-DjT5NY6b.js";
1
+ import { P as t } from "./alert-BOvwM-m4.js";
2
2
  const e = t;
3
3
  export {
4
4
  t as PktAlert,
@@ -1,4 +1,4 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./alert-CrBZnND3.cjs"),l=require("./accordionitem-DDnUkCJP.cjs"),P=require("./backlink-1p-ADrG8.cjs"),b=require("./button-5tOMyPEx.cjs"),p=require("./calendar-BU7DqDLG.cjs"),m=require("./card-a_Cs18EQ.cjs"),g=require("./combobox-DqHwVglB.cjs"),h=require("./checkbox-bsBqWqcn.cjs"),t=require("./element-BYpg5e6C.cjs"),f=require("./pkt-slot-controller-plQxXRvV.cjs"),s=require("./ref-BbKbXwub.cjs"),y=require("./class-map-BjTUtIEl.cjs"),x=require("./datepicker-DW6AdQ9X.cjs"),O=require("./helptext-OW48aGy8.cjs"),j=require("./icon-Cc4gVHxd.cjs"),q=require("./input-wrapper-DmVnotQ2.cjs"),C=require("./link-3uccc2MM.cjs"),v=require("./linkcard-P1I3dzQb.cjs"),S=require("./loader-CM7wLajY.cjs"),$=require("./messagebox-CD8fS0Ym.cjs"),L=require("./modal-DOCsiHGv.cjs"),_=require("./progressbar-BmI-K95y.cjs"),k=require("./radiobutton-CJYNTtFF.cjs"),A=require("./tag-Dg2-c_OZ.cjs"),B=require("./textarea-go_AyeP-.cjs"),T=require("./textinput-FvLq5W70.cjs"),I=require("./select-Swc0c6lZ.cjs");var M=Object.defineProperty,R=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?R(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&&M(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 f.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`
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./alert-B3HuK30R.cjs"),l=require("./accordionitem-DDnUkCJP.cjs"),P=require("./backlink-1p-ADrG8.cjs"),b=require("./button-5tOMyPEx.cjs"),p=require("./calendar-BU7DqDLG.cjs"),m=require("./card-a_Cs18EQ.cjs"),g=require("./combobox-DqHwVglB.cjs"),h=require("./checkbox-bsBqWqcn.cjs"),t=require("./element-BYpg5e6C.cjs"),f=require("./pkt-slot-controller-plQxXRvV.cjs"),s=require("./ref-BbKbXwub.cjs"),y=require("./class-map-BjTUtIEl.cjs"),x=require("./datepicker-DW6AdQ9X.cjs"),O=require("./helptext-OW48aGy8.cjs"),j=require("./icon-Cc4gVHxd.cjs"),q=require("./input-wrapper-DmVnotQ2.cjs"),C=require("./link-3uccc2MM.cjs"),v=require("./linkcard-P1I3dzQb.cjs"),S=require("./loader-CM7wLajY.cjs"),$=require("./messagebox-CD8fS0Ym.cjs"),L=require("./modal-DOCsiHGv.cjs"),_=require("./progressbar-BmI-K95y.cjs"),k=require("./radiobutton-CJYNTtFF.cjs"),A=require("./tag-Dg2-c_OZ.cjs"),B=require("./textarea-go_AyeP-.cjs"),T=require("./textinput-FvLq5W70.cjs"),I=require("./select-Swc0c6lZ.cjs");var M=Object.defineProperty,R=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?R(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&&M(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 f.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="${y.e(e)}">
3
3
  <h1 class="pkt-txt-28">${this.string}</h1>
4
4
 
package/dist/pkt-index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { P as A } from "./alert-DjT5NY6b.js";
1
+ import { P as A } from "./alert-BOvwM-m4.js";
2
2
  import { P as B, a as E } from "./accordionitem-Cg-LZy7n.js";
3
3
  import { P as O } from "./backlink-fjBQGFYt.js";
4
4
  import { P as T } from "./button-Cl6psvlo.js";
@@ -3,21 +3,21 @@ export { }
3
3
 
4
4
  declare global {
5
5
  interface HTMLElementTagNameMap {
6
- 'pkt-combobox': PktCombobox & HTMLSelectElement;
6
+ 'pkt-icon': PktIcon;
7
7
  }
8
8
  }
9
9
 
10
10
 
11
11
  declare global {
12
12
  interface HTMLElementTagNameMap {
13
- 'pkt-listbox': PktListbox;
13
+ 'pkt-combobox': PktCombobox & HTMLSelectElement;
14
14
  }
15
15
  }
16
16
 
17
17
 
18
18
  declare global {
19
19
  interface HTMLElementTagNameMap {
20
- 'pkt-icon': PktIcon;
20
+ 'pkt-listbox': PktListbox;
21
21
  }
22
22
  }
23
23
 
@@ -3,21 +3,21 @@ export { }
3
3
 
4
4
  declare global {
5
5
  interface HTMLElementTagNameMap {
6
- 'pkt-combobox': PktCombobox & HTMLSelectElement;
6
+ 'pkt-icon': PktIcon;
7
7
  }
8
8
  }
9
9
 
10
10
 
11
11
  declare global {
12
12
  interface HTMLElementTagNameMap {
13
- 'pkt-listbox': PktListbox;
13
+ 'pkt-combobox': PktCombobox & HTMLSelectElement;
14
14
  }
15
15
  }
16
16
 
17
17
 
18
18
  declare global {
19
19
  interface HTMLElementTagNameMap {
20
- 'pkt-icon': PktIcon;
20
+ 'pkt-listbox': PktListbox;
21
21
  }
22
22
  }
23
23
 
package/dist/select.d.ts CHANGED
@@ -3,21 +3,21 @@ export { }
3
3
 
4
4
  declare global {
5
5
  interface HTMLElementTagNameMap {
6
- 'pkt-combobox': PktCombobox & HTMLSelectElement;
6
+ 'pkt-icon': PktIcon;
7
7
  }
8
8
  }
9
9
 
10
10
 
11
11
  declare global {
12
12
  interface HTMLElementTagNameMap {
13
- 'pkt-listbox': PktListbox;
13
+ 'pkt-combobox': PktCombobox & HTMLSelectElement;
14
14
  }
15
15
  }
16
16
 
17
17
 
18
18
  declare global {
19
19
  interface HTMLElementTagNameMap {
20
- 'pkt-icon': PktIcon;
20
+ 'pkt-listbox': PktListbox;
21
21
  }
22
22
  }
23
23
 
package/dist/tag.d.ts CHANGED
@@ -3,21 +3,21 @@ export { }
3
3
 
4
4
  declare global {
5
5
  interface HTMLElementTagNameMap {
6
- 'pkt-combobox': PktCombobox & HTMLSelectElement;
6
+ 'pkt-icon': PktIcon;
7
7
  }
8
8
  }
9
9
 
10
10
 
11
11
  declare global {
12
12
  interface HTMLElementTagNameMap {
13
- 'pkt-listbox': PktListbox;
13
+ 'pkt-combobox': PktCombobox & HTMLSelectElement;
14
14
  }
15
15
  }
16
16
 
17
17
 
18
18
  declare global {
19
19
  interface HTMLElementTagNameMap {
20
- 'pkt-icon': PktIcon;
20
+ 'pkt-listbox': PktListbox;
21
21
  }
22
22
  }
23
23
 
@@ -3,21 +3,21 @@ export { }
3
3
 
4
4
  declare global {
5
5
  interface HTMLElementTagNameMap {
6
- 'pkt-combobox': PktCombobox & HTMLSelectElement;
6
+ 'pkt-icon': PktIcon;
7
7
  }
8
8
  }
9
9
 
10
10
 
11
11
  declare global {
12
12
  interface HTMLElementTagNameMap {
13
- 'pkt-listbox': PktListbox;
13
+ 'pkt-combobox': PktCombobox & HTMLSelectElement;
14
14
  }
15
15
  }
16
16
 
17
17
 
18
18
  declare global {
19
19
  interface HTMLElementTagNameMap {
20
- 'pkt-icon': PktIcon;
20
+ 'pkt-listbox': PktListbox;
21
21
  }
22
22
  }
23
23
 
@@ -3,21 +3,21 @@ export { }
3
3
 
4
4
  declare global {
5
5
  interface HTMLElementTagNameMap {
6
- 'pkt-combobox': PktCombobox & HTMLSelectElement;
6
+ 'pkt-icon': PktIcon;
7
7
  }
8
8
  }
9
9
 
10
10
 
11
11
  declare global {
12
12
  interface HTMLElementTagNameMap {
13
- 'pkt-listbox': PktListbox;
13
+ 'pkt-combobox': PktCombobox & HTMLSelectElement;
14
14
  }
15
15
  }
16
16
 
17
17
 
18
18
  declare global {
19
19
  interface HTMLElementTagNameMap {
20
- 'pkt-icon': PktIcon;
20
+ 'pkt-listbox': PktListbox;
21
21
  }
22
22
  }
23
23
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oslokommune/punkt-elements",
3
- "version": "12.34.0",
3
+ "version": "12.34.2",
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",
@@ -30,7 +30,7 @@
30
30
  },
31
31
  "devDependencies": {
32
32
  "@oslokommune/punkt-assets": "^12.30.1",
33
- "@oslokommune/punkt-css": "^12.34.0",
33
+ "@oslokommune/punkt-css": "^12.34.2",
34
34
  "sass": "^1.78.0",
35
35
  "typescript": "^5.6.2",
36
36
  "vite": "^5.4.18",
@@ -57,5 +57,5 @@
57
57
  "url": "https://github.com/oslokommune/punkt/issues"
58
58
  },
59
59
  "license": "MIT",
60
- "gitHead": "4ab2b5b6508cf1749c9b1a66d92c6d214f737b26"
60
+ "gitHead": "780c78ea4619450ddd43ba97183c2eb239a53524"
61
61
  }
@@ -78,35 +78,46 @@ export class PktAlert extends PktElement implements IPktAlert {
78
78
  'pkt-hide': this._isClosed,
79
79
  }
80
80
 
81
+ const gridClasses = {
82
+ 'pkt-alert__grid': true,
83
+ 'pkt-alert__noTitle': !this.title,
84
+ 'pkt-alert__noDate': !this.date,
85
+ }
86
+
81
87
  return html`
82
88
  <div class=${classMap(classes)}>
83
- <pkt-icon
84
- class="pkt-alert__icon"
85
- name=${this.skin === 'info' ? 'alert-information' : `alert-${this.skin}`}
86
- ></pkt-icon>
87
-
88
- ${this.closeAlert
89
- ? html`
90
- <div class="pkt-alert__close">
91
- <button
92
- type="button"
93
- class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
94
- tabindex="0"
95
- aria-label="close"
96
- @click=${this.close}
97
- >
98
- <pkt-icon name="close" class="pkt-btn__icon" aria-hidden="true"></pkt-icon>
99
- </button>
100
- </div>
101
- `
102
- : nothing}
103
- ${this.title ? html`<div class="pkt-alert__title">${this.title}</div>` : nothing}
104
-
105
- <div class="pkt-alert__text" ${ref(this.defaultSlot)}></div>
106
-
107
- ${this.date
108
- ? html`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>`
109
- : nothing}
89
+ <div class=${classMap(gridClasses)}>
90
+ <pkt-icon
91
+ class="pkt-alert__icon"
92
+ aria-hidden="true"
93
+ name=${this.skin === 'info' ? 'alert-information' : `alert-${this.skin}`}
94
+ ></pkt-icon>
95
+
96
+ ${this.closeAlert
97
+ ? html`
98
+ <div class="pkt-alert__close">
99
+ <pkt-button
100
+ tabindex="0"
101
+ aria-label="close"
102
+ size=${this.compact ? 'small' : 'medium'}
103
+ type="button"
104
+ skin="tertiary"
105
+ iconName="close"
106
+ variant="icon-only"
107
+ @click=${this.close}
108
+ >
109
+ </pkt-button>
110
+ </div>
111
+ `
112
+ : nothing}
113
+ ${this.title ? html`<div class="pkt-alert__title">${this.title}</div>` : nothing}
114
+
115
+ <div class="pkt-alert__text" ${ref(this.defaultSlot)}></div>
116
+
117
+ ${this.date
118
+ ? html`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>`
119
+ : nothing}
120
+ </div>
110
121
  </div>
111
122
  `
112
123
  }
@@ -1,27 +0,0 @@
1
- "use strict";const u=require("./class-map-BjTUtIEl.cjs"),e=require("./element-BYpg5e6C.cjs"),d=require("./state-y7tCw3bg.cjs"),h=require("./pkt-slot-controller-plQxXRvV.cjs"),c=require("./ref-BbKbXwub.cjs"),k=require("./classutils-BwNK82ZQ.cjs");require("./icon-Cc4gVHxd.cjs");const f={skin:{default:"info"},ariaLive:{default:"polite"},compact:{default:!1},closeAlert:{default:!1}},a={props:f};var v=Object.defineProperty,b=Object.getOwnPropertyDescriptor,s=(o,t,r,i)=>{for(var l=i>1?void 0:i?b(t,r):t,p=o.length-1,n;p>=0;p--)(n=o[p])&&(l=(i?n(t,r,l):n(l))||l);return i&&l&&v(t,r,l),l};exports.PktAlert=class extends e.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.compact=a.props.compact.default,this.title="",this.skin=a.props.skin.default,this.ariaLive=a.props.ariaLive.default,this["aria-live"]=null,this.closeAlert=a.props.closeAlert.default,this.date=null,this._isClosed=!1,this.close=t=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:t},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:t},bubbles:!0,composed:!0}))},this.slotController=new h.PktSlotController(this,this.defaultSlot),this._isClosed=!1}connectedCallback(){super.connectedCallback(),this["aria-live"]=this.getAttribute("aria-live")||this.ariaLive}attributeChangedCallback(t,r,i){t==="ariaLive"&&(this["aria-live"]=i),super.attributeChangedCallback(t,r,i)}updated(t){super.updated(t),t.has("ariaLive")&&(this["aria-live"]=this.ariaLive),t.has("_isClosed")&&k.updateClassAttribute(this,"pkt-hide",this._isClosed)}render(){const t={"pkt-alert":!0,"pkt-alert--compact":this.compact,[`pkt-alert--${this.skin}`]:this.skin,"pkt-hide":this._isClosed};return e.x`
2
- <div class=${u.e(t)}>
3
- <pkt-icon
4
- class="pkt-alert__icon"
5
- name=${this.skin==="info"?"alert-information":`alert-${this.skin}`}
6
- ></pkt-icon>
7
-
8
- ${this.closeAlert?e.x`
9
- <div class="pkt-alert__close">
10
- <button
11
- type="button"
12
- class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
13
- tabindex="0"
14
- aria-label="close"
15
- @click=${this.close}
16
- >
17
- <pkt-icon name="close" class="pkt-btn__icon" aria-hidden="true"></pkt-icon>
18
- </button>
19
- </div>
20
- `:e.E}
21
- ${this.title?e.x`<div class="pkt-alert__title">${this.title}</div>`:e.E}
22
-
23
- <div class="pkt-alert__text" ${c.n(this.defaultSlot)}></div>
24
-
25
- ${this.date?e.x`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>`:e.E}
26
- </div>
27
- `}};s([e.n({type:Boolean,reflect:!1})],exports.PktAlert.prototype,"compact",2);s([e.n({type:String,reflect:!0})],exports.PktAlert.prototype,"title",2);s([e.n({type:String,reflect:!0})],exports.PktAlert.prototype,"skin",2);s([e.n({type:String})],exports.PktAlert.prototype,"ariaLive",2);s([e.n({type:String,reflect:!0})],exports.PktAlert.prototype,"aria-live",2);s([e.n({type:Boolean,reflect:!0})],exports.PktAlert.prototype,"closeAlert",2);s([e.n({type:String,reflect:!0})],exports.PktAlert.prototype,"date",2);s([d.r()],exports.PktAlert.prototype,"_isClosed",2);exports.PktAlert=s([e.t("pkt-alert")],exports.PktAlert);