@oslokommune/punkt-elements 12.18.0 → 12.18.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.
Files changed (126) hide show
  1. package/dist/alert-BbVWu2lm.cjs +27 -0
  2. package/dist/alert-Dh6A96vo.js +159 -0
  3. package/dist/{index-D2jSRMrn.js → calendar-BUqcNvfI.js} +41 -29
  4. package/dist/calendar-QSulz7im.cjs +108 -0
  5. package/dist/card-B0GPdG5M.cjs +23 -0
  6. package/dist/card-kWt0BA2a.js +170 -0
  7. package/dist/{class-map-a5HUzP83.cjs → class-map-Boa7BqCc.cjs} +2 -2
  8. package/dist/{class-map-CBvUV2N3.js → class-map-hz16xq5a.js} +9 -10
  9. package/dist/datepicker-BhavwiBZ.js +659 -0
  10. package/dist/datepicker-vX74tb3R.cjs +154 -0
  11. package/dist/helptext--4FLdAWi.js +194 -0
  12. package/dist/helptext-iZEgxz2U.cjs +23 -0
  13. package/dist/icon-CdMQ6zBT.cjs +250 -0
  14. package/dist/{index-CFDwiDTU.js → icon-wUXeHiBk.js} +7371 -7559
  15. package/dist/if-defined-DEDlGbAc.cjs +5 -0
  16. package/dist/if-defined-ZFE4ti2t.js +10 -0
  17. package/dist/index.d.ts +49 -51
  18. package/dist/input-element-BQTCZtNQ.js +185 -0
  19. package/dist/input-element-DNklGY_O.cjs +1 -0
  20. package/dist/{input-wrapper-DVXNuxVu.js → input-wrapper-BTQk3W8T.js} +10 -11
  21. package/dist/input-wrapper-D-PNRJB_.cjs +46 -0
  22. package/dist/link-BpqavGSD.cjs +8 -0
  23. package/dist/link-Bx9nVgZi.js +108 -0
  24. package/dist/linkcard-CUrbzjLK.js +53 -0
  25. package/dist/linkcard-DSu3A4Yx.cjs +13 -0
  26. package/dist/messagebox-C1aWoQbu.cjs +12 -0
  27. package/dist/messagebox-LpiVQIoM.js +107 -0
  28. package/dist/modal-Avai5eVz.cjs +30 -0
  29. package/dist/{modal-lQfiTbGh.js → modal-Co1YFmHi.js} +7 -8
  30. package/dist/pkt-alert.cjs +1 -27
  31. package/dist/pkt-alert.js +4 -158
  32. package/dist/pkt-calendar.cjs +1 -1
  33. package/dist/pkt-calendar.js +4 -7
  34. package/dist/pkt-card.cjs +1 -23
  35. package/dist/pkt-card.js +4 -169
  36. package/dist/pkt-datepicker.cjs +1 -154
  37. package/dist/pkt-datepicker.js +4 -657
  38. package/dist/pkt-helptext.cjs +1 -1
  39. package/dist/pkt-helptext.js +1 -1
  40. package/dist/pkt-icon.cjs +1 -1
  41. package/dist/pkt-icon.js +4 -4
  42. package/dist/pkt-index.cjs +29 -1
  43. package/dist/pkt-index.js +127 -32
  44. package/dist/pkt-input-wrapper.cjs +1 -1
  45. package/dist/pkt-input-wrapper.js +1 -1
  46. package/dist/pkt-link.cjs +1 -8
  47. package/dist/pkt-link.js +4 -108
  48. package/dist/pkt-linkcard.cjs +1 -1
  49. package/dist/pkt-linkcard.js +1 -1
  50. package/dist/pkt-messagebox.cjs +1 -12
  51. package/dist/pkt-messagebox.js +4 -106
  52. package/dist/pkt-modal.cjs +1 -1
  53. package/dist/pkt-modal.js +1 -1
  54. package/dist/pkt-progressbar.cjs +1 -1
  55. package/dist/pkt-progressbar.js +2 -2
  56. package/dist/pkt-tag.cjs +1 -17
  57. package/dist/pkt-tag.js +4 -149
  58. package/dist/pkt-textarea.cjs +1 -1
  59. package/dist/pkt-textarea.js +1 -1
  60. package/dist/pkt-textinput.cjs +1 -1
  61. package/dist/pkt-textinput.js +1 -1
  62. package/dist/{progressbar-1PEs_SMc.js → progressbar-BS_oawSB.js} +42 -47
  63. package/dist/{progressbar-BlzTFI9U.cjs → progressbar-CuXkbAhJ.cjs} +7 -11
  64. package/dist/ref-DCOsLZQg.cjs +13 -0
  65. package/dist/{ref-Dzme4zb6.js → ref-DuFGTLVX.js} +26 -27
  66. package/dist/state-BfyXV7EL.js +12 -0
  67. package/dist/state-SKYD8kRO.cjs +5 -0
  68. package/dist/stringutils-CkVRq4jP.cjs +1 -0
  69. package/dist/stringutils-DJjRa8dG.js +7 -0
  70. package/dist/tag-CGy2mSLE.cjs +17 -0
  71. package/dist/tag-DGFgUF3l.js +150 -0
  72. package/dist/textarea-BFWHQHLs.cjs +48 -0
  73. package/dist/{textarea-BXzQA_ub.js → textarea-BYtGXst8.js} +29 -29
  74. package/dist/{textinput-52G3CfwA.cjs → textinput-33wZwZ4O.cjs} +2 -2
  75. package/dist/{textinput-CTNWiIaP.js → textinput-IgHewJDJ.js} +23 -23
  76. package/package.json +2 -2
  77. package/src/components/alert/alert.ts +115 -0
  78. package/src/components/alert/index.ts +4 -113
  79. package/src/components/calendar/calendar.ts +711 -0
  80. package/src/components/calendar/index.ts +3 -711
  81. package/src/components/card/card.ts +78 -0
  82. package/src/components/card/index.ts +4 -77
  83. package/src/components/datepicker/datepicker.ts +619 -0
  84. package/src/components/datepicker/index.ts +3 -618
  85. package/src/components/helptext/helptext.ts +2 -2
  86. package/src/components/icon/icon.ts +99 -0
  87. package/src/components/icon/index.ts +3 -98
  88. package/src/components/index.ts +21 -17
  89. package/src/components/input-wrapper/input-wrapper.ts +2 -2
  90. package/src/components/link/index.ts +3 -56
  91. package/src/components/link/link.ts +57 -0
  92. package/src/components/linkcard/index.ts +1 -1
  93. package/src/components/linkcard/linkcard.ts +5 -6
  94. package/src/components/messagebox/index.ts +4 -69
  95. package/src/components/messagebox/messagebox.ts +69 -0
  96. package/src/components/modal/index.ts +0 -1
  97. package/src/components/modal/modal.ts +5 -7
  98. package/src/components/progressbar/progressbar.ts +2 -2
  99. package/src/components/tag/index.ts +4 -109
  100. package/src/components/tag/tag.ts +118 -0
  101. package/src/components/textarea/textarea.ts +5 -4
  102. package/src/components/textinput/textinput.ts +3 -3
  103. package/dist/component-template.d.ts +0 -8
  104. package/dist/converters-DNCwIFwr.js +0 -17
  105. package/dist/converters-DhM11VlY.cjs +0 -1
  106. package/dist/custom-element-B-TlBwRu.cjs +0 -9
  107. package/dist/custom-element-CWfU4dcr.js +0 -38
  108. package/dist/element.d.ts +0 -8
  109. package/dist/helptext-DBolvFI4.js +0 -72
  110. package/dist/helptext-_fMLOOCL.cjs +0 -23
  111. package/dist/index-CR7t1zY9.cjs +0 -238
  112. package/dist/index-CmTjXoAb.cjs +0 -9
  113. package/dist/index-RwtTBIhT.js +0 -88
  114. package/dist/index-tvpcg-ad.cjs +0 -108
  115. package/dist/input-wrapper-tJE-X4Ac.cjs +0 -46
  116. package/dist/linkcard-BHokvuVN.js +0 -55
  117. package/dist/linkcard-CUXMP6BH.cjs +0 -13
  118. package/dist/modal-CjsQgmmH.cjs +0 -30
  119. package/dist/pkt-component-template.cjs +0 -29
  120. package/dist/pkt-component-template.js +0 -100
  121. package/dist/pkt-element.cjs +0 -1
  122. package/dist/pkt-element.js +0 -5
  123. package/dist/ref-CA2-0S_W.cjs +0 -13
  124. package/dist/textarea-D_ud1Mpa.cjs +0 -48
  125. package/src/components/component-template/index.ts +0 -129
  126. package/src/components/element/index.ts +0 -353
@@ -0,0 +1,53 @@
1
+ import { P as f, x as c, n as i, t as h } from "./icon-wUXeHiBk.js";
2
+ import { e as k, n as u } from "./ref-DuFGTLVX.js";
3
+ import { P as _ } from "./pkt-slot-controller-RJvOnbF4.js";
4
+ var d = Object.defineProperty, m = Object.getOwnPropertyDescriptor, r = (l, n, s, o) => {
5
+ for (var e = o > 1 ? void 0 : o ? m(n, s) : n, a = l.length - 1, p; a >= 0; a--)
6
+ (p = l[a]) && (e = (o ? p(n, s, e) : p(e)) || e);
7
+ return o && e && d(n, s, e), e;
8
+ };
9
+ let t = class extends f {
10
+ constructor() {
11
+ super(), this.defaultSlot = k(), this.title = "", this.href = "#", this.iconName = "", this.external = !1, this.openInNewTab = !1, this.skin = "normal", this.slotController = new _(this, this.defaultSlot);
12
+ }
13
+ render() {
14
+ const l = ["pkt-linkcard", this.skin && `pkt-linkcard--${this.skin}`].filter(Boolean).join(" "), n = ["pkt-linkcard__title", this.external && "pkt-link pkt-link--external"].filter(Boolean).join(" ");
15
+ return c`
16
+ <a
17
+ href=${this.href}
18
+ class=${l}
19
+ target=${this.openInNewTab ? "_blank" : "_self"}
20
+ rel=${this.openInNewTab ?? "noopener noreferrer"}
21
+ >
22
+ ${this.iconName && c`<pkt-icon class="pkt-link__icon" name="${this.iconName}" />`}
23
+ ${this.title && c`<div class=${n}>${this.title}</div>`}
24
+
25
+ <div class="pkt-linkcard__text" ${u(this.defaultSlot)}></div>
26
+ </a>
27
+ `;
28
+ }
29
+ };
30
+ r([
31
+ i({ type: String, reflect: !0 })
32
+ ], t.prototype, "title", 2);
33
+ r([
34
+ i({ type: String, reflect: !0 })
35
+ ], t.prototype, "href", 2);
36
+ r([
37
+ i({ type: String, reflect: !0 })
38
+ ], t.prototype, "iconName", 2);
39
+ r([
40
+ i({ type: Boolean, reflect: !0 })
41
+ ], t.prototype, "external", 2);
42
+ r([
43
+ i({ type: Boolean, reflect: !0 })
44
+ ], t.prototype, "openInNewTab", 2);
45
+ r([
46
+ i({ type: String, reflect: !0 })
47
+ ], t.prototype, "skin", 2);
48
+ t = r([
49
+ h("pkt-linkcard")
50
+ ], t);
51
+ export {
52
+ t as P
53
+ };
@@ -0,0 +1,13 @@
1
+ "use strict";const t=require("./icon-CdMQ6zBT.cjs"),k=require("./ref-DCOsLZQg.cjs"),p=require("./pkt-slot-controller-Ckk_yV0j.cjs");var c=Object.defineProperty,h=Object.getOwnPropertyDescriptor,r=(s,n,i,l)=>{for(var e=l>1?void 0:l?h(n,i):n,o=s.length-1,a;o>=0;o--)(a=s[o])&&(e=(l?a(n,i,e):a(e))||e);return l&&e&&c(n,i,e),e};exports.PktLinkCard=class extends t.PktElement{constructor(){super(),this.defaultSlot=k.e(),this.title="",this.href="#",this.iconName="",this.external=!1,this.openInNewTab=!1,this.skin="normal",this.slotController=new p.PktSlotController(this,this.defaultSlot)}render(){const n=["pkt-linkcard",this.skin&&`pkt-linkcard--${this.skin}`].filter(Boolean).join(" "),i=["pkt-linkcard__title",this.external&&"pkt-link pkt-link--external"].filter(Boolean).join(" ");return t.x`
2
+ <a
3
+ href=${this.href}
4
+ class=${n}
5
+ target=${this.openInNewTab?"_blank":"_self"}
6
+ rel=${this.openInNewTab??"noopener noreferrer"}
7
+ >
8
+ ${this.iconName&&t.x`<pkt-icon class="pkt-link__icon" name="${this.iconName}" />`}
9
+ ${this.title&&t.x`<div class=${i}>${this.title}</div>`}
10
+
11
+ <div class="pkt-linkcard__text" ${k.n(this.defaultSlot)}></div>
12
+ </a>
13
+ `}};r([t.n({type:String,reflect:!0})],exports.PktLinkCard.prototype,"title",2);r([t.n({type:String,reflect:!0})],exports.PktLinkCard.prototype,"href",2);r([t.n({type:String,reflect:!0})],exports.PktLinkCard.prototype,"iconName",2);r([t.n({type:Boolean,reflect:!0})],exports.PktLinkCard.prototype,"external",2);r([t.n({type:Boolean,reflect:!0})],exports.PktLinkCard.prototype,"openInNewTab",2);r([t.n({type:String,reflect:!0})],exports.PktLinkCard.prototype,"skin",2);exports.PktLinkCard=r([t.t("pkt-linkcard")],exports.PktLinkCard);
@@ -0,0 +1,12 @@
1
+ "use strict";const e=require("./icon-CdMQ6zBT.cjs"),b=require("./pkt-slot-controller-Ckk_yV0j.cjs"),p=require("./ref-DCOsLZQg.cjs"),k=require("./class-map-Boa7BqCc.cjs"),d=require("./state-SKYD8kRO.cjs"),u="pkt-messagebox",g=!0,m={onClose:{description:"React: Event som trigges når meldingsboksen lukkes"},"on-close":{description:"Vue: Event som trigges når meldingsboksen lukkes"}},h={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}},f={default:{description:"Innholdet i meldingsboksen"}},c={name:u,"css-class":"pkt-messagebox",isElement:g,events:m,props:h,slots:f};var x=Object.defineProperty,v=Object.getOwnPropertyDescriptor,o=(i,t,n,l)=>{for(var s=l>1?void 0:l?v(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&&x(t,n,s),s};exports.PktMessagebox=class extends e.PktElement{constructor(){super(),this.defaultSlot=p.e(),this.closable=c.props.closable.default,this.compact=c.props.compact.default,this.title="",this.skin=c.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 b.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=${k.e(t)}>
2
+ ${this.closable?e.x`<div class="pkt-messagebox__close">
3
+ <button
4
+ @click=${this.close}
5
+ class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
6
+ >
7
+ <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
8
+ </button>
9
+ </div>`:e.E}
10
+ ${this.title?e.x`<div class="pkt-messagebox__title">${this.title}</div>`:e.E}
11
+ <div class="pkt-messagebox__text" ${p.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([d.r()],exports.PktMessagebox.prototype,"_isClosed",2);exports.PktMessagebox=o([e.t("pkt-messagebox")],exports.PktMessagebox);
@@ -0,0 +1,107 @@
1
+ import { P as b, x as c, E as d, n, t as k } from "./icon-wUXeHiBk.js";
2
+ import { P as u } from "./pkt-slot-controller-RJvOnbF4.js";
3
+ import { e as g, n as f } from "./ref-DuFGTLVX.js";
4
+ import { e as h } from "./class-map-hz16xq5a.js";
5
+ import { r as v } from "./state-BfyXV7EL.js";
6
+ const _ = "pkt-messagebox", x = !0, y = {
7
+ onClose: {
8
+ description: "React: Event som trigges når meldingsboksen lukkes"
9
+ },
10
+ "on-close": {
11
+ description: "Vue: Event som trigges når meldingsboksen lukkes"
12
+ }
13
+ }, C = {
14
+ title: {
15
+ name: "Tittel",
16
+ description: "Tittelen på meldingsboksen",
17
+ type: "string"
18
+ },
19
+ skin: {
20
+ name: "Utseende",
21
+ description: "Velg farge på meldingsboksen",
22
+ type: [
23
+ "beige",
24
+ "blue",
25
+ "red",
26
+ "green"
27
+ ],
28
+ default: "beige"
29
+ },
30
+ compact: {
31
+ name: "Kompakt",
32
+ description: "Gjør meldingsboksen mindre",
33
+ type: "boolean",
34
+ default: !1
35
+ },
36
+ closable: {
37
+ name: "Kan lukkes",
38
+ description: "Viser lukkeknapp",
39
+ type: "boolean",
40
+ default: !1
41
+ }
42
+ }, E = {
43
+ default: {
44
+ description: "Innholdet i meldingsboksen"
45
+ }
46
+ }, m = {
47
+ name: _,
48
+ "css-class": "pkt-messagebox",
49
+ isElement: x,
50
+ events: y,
51
+ props: C,
52
+ slots: E
53
+ };
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
+ };
59
+ let s = class extends b {
60
+ constructor() {
61
+ super(), this.defaultSlot = g(), 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
+ }, this.slotController = new u(this, this.defaultSlot), this._isClosed = !1;
64
+ }
65
+ render() {
66
+ const e = {
67
+ "pkt-messagebox": !0,
68
+ "pkt-messagebox--compact": this.compact,
69
+ [`pkt-messagebox--${this.skin}`]: this.skin,
70
+ "pkt-messagebox--closable": this.closable,
71
+ "pkt-hide": this._isClosed
72
+ };
73
+ return c`<div class=${h(e)}>
74
+ ${this.closable ? c`<div class="pkt-messagebox__close">
75
+ <button
76
+ @click=${this.close}
77
+ class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
78
+ >
79
+ <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
80
+ </button>
81
+ </div>` : d}
82
+ ${this.title ? c`<div class="pkt-messagebox__title">${this.title}</div>` : d}
83
+ <div class="pkt-messagebox__text" ${f(this.defaultSlot)}></div>
84
+ </div>`;
85
+ }
86
+ };
87
+ o([
88
+ n({ type: Boolean, reflect: !0 })
89
+ ], s.prototype, "closable", 2);
90
+ o([
91
+ n({ type: Boolean, reflect: !0 })
92
+ ], s.prototype, "compact", 2);
93
+ o([
94
+ n({ type: String, reflect: !0 })
95
+ ], s.prototype, "title", 2);
96
+ o([
97
+ n({ type: String, reflect: !0 })
98
+ ], s.prototype, "skin", 2);
99
+ o([
100
+ v()
101
+ ], s.prototype, "_isClosed", 2);
102
+ s = o([
103
+ k("pkt-messagebox")
104
+ ], s);
105
+ export {
106
+ s as P
107
+ };
@@ -0,0 +1,30 @@
1
+ "use strict";const c=require("./class-map-Boa7BqCc.cjs"),n=require("./icon-CdMQ6zBT.cjs"),k=require("./state-SKYD8kRO.cjs"),u=require("./pkt-slot-controller-Ckk_yV0j.cjs"),a=require("./ref-DCOsLZQg.cjs"),m="pkt-modal",h=!0,g={"background-click":{description:"Event som trigges når bakgrunnen trykkes på"},close:{description:"Event som trigges når meldingsboksen lukkes"}},f={headingText:{name:"Heading text",description:"Heading tekst på modalen",type:"string"},hideCloseButton:{name:"Gjem 'Lukk'-knapp",description:"Gjemmer lukkeknappen. Dersom denne er satt til true, vil ikke lukkeknappen vises, og dermed er det viktig at man tilbyr en annen måte som f.eks. en knapp for å lukke modalen på.",type:"boolean",default:!1},closeOnBackdropClick:{name:"Lukk modalen når bakgrunnen trykkes på",description:"Lukk modalen når bakgrunnen trykkes på",type:"boolean",default:!1},size:{name:"Størrelse",description:"Størrelsen på modalen",type:["small","medium","large"],default:"medium"}},v={default:{description:"Innholdet i meldingen. Her tilbyr vi støtteklasser for å style 1-3 knapper i modalen."}},p={name:m,"css-class":"pkt-modal",isElements:h,events:g,props:f,slots:v};var b=Object.defineProperty,y=Object.getOwnPropertyDescriptor,i=(d,e,t,o)=>{for(var s=o>1?void 0:o?y(e,t):e,l=d.length-1,r;l>=0;l--)(r=d[l])&&(s=(o?r(e,t,s):r(s))||s);return o&&s&&b(e,t,s),s};exports.PktModal=class extends n.PktElement{constructor(){super(),this.headingText="",this.removePadding=!1,this.hideCloseButton=p.props.hideCloseButton.default,this.closeOnBackdropClick=p.props.closeOnBackdropClick.default,this.size=p.props.size.default,this.defaultSlot=a.e(),this.dialogRef=a.e(),this._isOpen=!1,this.close=(e,t=!1)=>{var l;this._isOpen=!1,t||(l=this.dialogRef.value)==null||l.close();const o=document.activeElement;o&&!this.isElementInViewport(o)&&o.scrollIntoView({behavior:"smooth",block:"nearest"}),this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0,composed:!0})),document.querySelector(".pkt-modal")&&document.body.classList.remove("pkt-modal--open"),this.requestUpdate()},this.showModal=e=>{var o;this._isOpen=!0,(o=this.dialogRef.value)==null||o.showModal(),document.querySelector(".pkt-modal")&&document.body.classList.add("pkt-modal--open"),this.dispatchEvent(new CustomEvent("showModal",{detail:{origin:e},bubbles:!0,composed:!0})),this.requestUpdate()},this.slotController=new u.PktSlotController(this,this.defaultSlot),this._isOpen=!1}async connectedCallback(){var e;super.connectedCallback(),document.addEventListener("keydown",this.handleKeyDown.bind(this)),document.addEventListener("click",this.handleBackdropClick.bind(this)),(e=this.dialogRef.value)==null||e.addEventListener("submit",t=>this.close(t,!0))}disconnectedCallback(){var e;super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeyDown.bind(this)),document.removeEventListener("click",this.handleBackdropClick.bind(this)),(e=this.dialogRef.value)==null||e.removeEventListener("submit",t=>this.close(t,!0))}handleKeyDown(e){e.key==="Escape"&&this.close(e)}handleBackdropClick(e){var t;this.closeOnBackdropClick&&e.target===((t=this.dialogRef)==null?void 0:t.value)&&this.close(e)}isElementInViewport(e){const t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}render(){const e={"pkt-modal":!0,"pkt-modal--removePadding":this.removePadding??!1,"pkt-modal--noHeadingText":this.headingText===""||this.headingText===void 0,[`pkt-modal--${this.size}`]:this.size!==void 0},t={"pkt-modal__headingText":!0,"pkt-txt-24":!0},o={"pkt-modal__content":!0,"pkt-txt-18-light":!0};return n.x`
2
+ <dialog
3
+ class=${c.e(e)}
4
+ aria-modal=${this._isOpen}
5
+ ${a.n(this.dialogRef)}
6
+ aria-labelledby="pkt-modal__headingText"
7
+ aria-describedby="pkt-modal__content"
8
+ autofocus
9
+ >
10
+ <div class="pkt-modal__header">
11
+ ${this.headingText?n.x`<h1 id="pkt-modal__headingText" class=${c.e(t)}>
12
+ ${this.headingText}
13
+ </h1>`:n.E}
14
+ ${this.hideCloseButton?n.E:n.x`<div class="pkt-modal__closeButton">
15
+ <button
16
+ @click=${s=>this.close(s)}
17
+ class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
18
+ aria-label="close"
19
+ >
20
+ <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
21
+ </button>
22
+ </div>`}
23
+ </div>
24
+ <div
25
+ id="pkt-modal__content"
26
+ class=${c.e(o)}
27
+ ${a.n(this.defaultSlot)}
28
+ ></div>
29
+ </dialog>
30
+ `}};i([n.n({type:String,reflect:!0})],exports.PktModal.prototype,"headingText",2);i([n.n({type:Boolean,reflect:!0})],exports.PktModal.prototype,"removePadding",2);i([n.n({type:Boolean,reflect:!0})],exports.PktModal.prototype,"hideCloseButton",2);i([n.n({type:Boolean,reflect:!0})],exports.PktModal.prototype,"closeOnBackdropClick",2);i([n.n({type:String,reflect:!0})],exports.PktModal.prototype,"size",2);i([k.r()],exports.PktModal.prototype,"_isOpen",2);exports.PktModal=i([n.t("pkt-modal")],exports.PktModal);
@@ -1,9 +1,8 @@
1
- import { e as c } from "./class-map-CBvUV2N3.js";
2
- import { t as g } from "./custom-element-CWfU4dcr.js";
3
- import { r as f, P as v, x as p, E as h, n as a } from "./index-CFDwiDTU.js";
1
+ import { e as c } from "./class-map-hz16xq5a.js";
2
+ import { P as g, x as p, E as h, n as a, t as f } from "./icon-wUXeHiBk.js";
3
+ import { r as v } from "./state-BfyXV7EL.js";
4
4
  import { P as b } from "./pkt-slot-controller-RJvOnbF4.js";
5
- import { e as k, n as u } from "./ref-Dzme4zb6.js";
6
- import "./index-RwtTBIhT.js";
5
+ import { e as k, n as u } from "./ref-DuFGTLVX.js";
7
6
  const y = "pkt-modal", _ = !0, C = {
8
7
  "background-click": {
9
8
  description: "Event som trigges når bakgrunnen trykkes på"
@@ -56,7 +55,7 @@ var B = Object.defineProperty, x = Object.getOwnPropertyDescriptor, l = (e, t, o
56
55
  (r = e[d]) && (s = (i ? r(t, o, s) : r(s)) || s);
57
56
  return i && s && B(t, o, s), s;
58
57
  };
59
- let n = class extends v {
58
+ let n = class extends g {
60
59
  constructor() {
61
60
  super(), this.headingText = "", this.removePadding = !1, this.hideCloseButton = m.props.hideCloseButton.default, this.closeOnBackdropClick = m.props.closeOnBackdropClick.default, this.size = m.props.size.default, this.defaultSlot = k(), this.dialogRef = k(), this._isOpen = !1, this.close = (e, t = !1) => {
62
61
  var s;
@@ -153,10 +152,10 @@ l([
153
152
  a({ type: String, reflect: !0 })
154
153
  ], n.prototype, "size", 2);
155
154
  l([
156
- f()
155
+ v()
157
156
  ], n.prototype, "_isOpen", 2);
158
157
  n = l([
159
- g("pkt-modal")
158
+ f("pkt-modal")
160
159
  ], n);
161
160
  export {
162
161
  n as P
@@ -1,27 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./class-map-a5HUzP83.cjs"),k=require("./custom-element-B-TlBwRu.cjs"),t=require("./index-CR7t1zY9.cjs"),u=require("./pkt-slot-controller-Ckk_yV0j.cjs"),c=require("./ref-CA2-0S_W.cjs");require("./index-CmTjXoAb.cjs");const v="pkt-alert",h=!0,m={onClose:{description:"React: Klikk-event for 'Lukk'-knappen"},close:{description:"Vue: Klikk-event for 'Lukk'-knappen"}},f={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}},b={default:{description:"Innholdet i meldingen"}},n={name:v,"css-class":"pkt-alert","dark-mode":!0,isElement:h,events:m,props:f,slots:b};var y=Object.defineProperty,_=Object.getOwnPropertyDescriptor,i=(o,e,l,r)=>{for(var s=r>1?void 0:r?_(e,l):e,a=o.length-1,p;a>=0;a--)(p=o[a])&&(s=(r?p(e,l,s):p(s))||s);return r&&s&&y(e,l,s),s};exports.PktAlert=class extends t.PktElement{constructor(){super(),this.defaultSlot=c.e(),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=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 u.PktSlotController(this,this.defaultSlot),this._isClosed=!1}connectedCallback(){super.connectedCallback(),this["aria-live"]=this.getAttribute("aria-live")||this.ariaLive}attributeChangedCallback(e,l,r){e==="ariaLive"&&(this["aria-live"]=r)}updated(e){super.updated(e),e.has("ariaLive")&&(this["aria-live"]=this.ariaLive)}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
- <div class=${d.e(e)}>
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?t.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
- `:t.E}
21
- ${this.title?t.x`<div class="pkt-alert__title">${this.title}</div>`:t.E}
22
-
23
- <div class="pkt-alert__text" ${c.n(this.defaultSlot)}></div>
24
-
25
- ${this.date?t.x`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>`:t.E}
26
- </div>
27
- `}};i([t.n({type:Boolean,reflect:!1})],exports.PktAlert.prototype,"compact",2);i([t.n({type:String,reflect:!0})],exports.PktAlert.prototype,"title",2);i([t.n({type:String,reflect:!0})],exports.PktAlert.prototype,"skin",2);i([t.n({type:String})],exports.PktAlert.prototype,"ariaLive",2);i([t.n({type:String,reflect:!0})],exports.PktAlert.prototype,"aria-live",2);i([t.n({type:Boolean,reflect:!0})],exports.PktAlert.prototype,"closeAlert",2);i([t.n({type:String,reflect:!0})],exports.PktAlert.prototype,"date",2);i([t.r()],exports.PktAlert.prototype,"_isClosed",2);exports.PktAlert=i([k.t("pkt-alert")],exports.PktAlert);
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./alert-BbVWu2lm.cjs"),t=e.PktAlert;Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>e.PktAlert});exports.default=t;
package/dist/pkt-alert.js CHANGED
@@ -1,160 +1,6 @@
1
- import { e as k } from "./class-map-CBvUV2N3.js";
2
- import { t as m } from "./custom-element-CWfU4dcr.js";
3
- import { r as v, P as f, x as n, E as u, n as r } from "./index-CFDwiDTU.js";
4
- import { P as h } from "./pkt-slot-controller-RJvOnbF4.js";
5
- import { e as b, n as y } from "./ref-Dzme4zb6.js";
6
- import "./index-RwtTBIhT.js";
7
- const _ = "pkt-alert", g = !0, C = {
8
- onClose: {
9
- description: "React: Klikk-event for 'Lukk'-knappen"
10
- },
11
- close: {
12
- description: "Vue: Klikk-event for 'Lukk'-knappen"
13
- }
14
- }, $ = {
15
- title: {
16
- name: "Tittel",
17
- description: "Tittelen som vises øverst i på meldingen",
18
- type: "string"
19
- },
20
- skin: {
21
- name: "Utseende",
22
- description: "Hvordan type melding er dette?",
23
- type: [
24
- "info",
25
- "success",
26
- "warning",
27
- "error"
28
- ],
29
- default: "info"
30
- },
31
- date: {
32
- name: "Sist oppdatert",
33
- description: "Dato som vises nederst i på meldingen",
34
- type: "string"
35
- },
36
- ariaLive: {
37
- name: "aria-live",
38
- description: "Hvordan skal skjermleseren lese opp meldingen?",
39
- type: [
40
- "off",
41
- "polite",
42
- "assertive"
43
- ],
44
- default: "polite"
45
- },
46
- compact: {
47
- name: "Kompakt",
48
- description: "Gjør meldingen mindre",
49
- type: "boolean",
50
- default: !1
51
- },
52
- closeAlert: {
53
- name: "Vis 'Lukk'-knapp",
54
- description: "Viser 'Lukk'-knappen",
55
- type: "boolean",
56
- default: !1
57
- }
58
- }, L = {
59
- default: {
60
- description: "Innholdet i meldingen"
61
- }
62
- }, p = {
63
- name: _,
64
- "css-class": "pkt-alert",
65
- "dark-mode": !0,
66
- isElement: g,
67
- events: C,
68
- props: $,
69
- slots: L
70
- };
71
- var S = Object.defineProperty, E = Object.getOwnPropertyDescriptor, i = (t, l, o, a) => {
72
- for (var s = a > 1 ? void 0 : a ? E(l, o) : l, c = t.length - 1, d; c >= 0; c--)
73
- (d = t[c]) && (s = (a ? d(l, o, s) : d(s)) || s);
74
- return a && s && S(l, o, s), s;
75
- };
76
- let e = class extends f {
77
- constructor() {
78
- super(), this.defaultSlot = b(), this.compact = p.props.compact.default, this.title = "", this.skin = p.props.skin.default, this.ariaLive = p.props.ariaLive.default, this["aria-live"] = null, this.closeAlert = p.props.closeAlert.default, this.date = null, this._isClosed = !1, this.close = (t) => {
79
- this._isClosed = !0, this.dispatchEvent(
80
- new CustomEvent("close", { detail: { origin: t }, bubbles: !0, composed: !0 })
81
- ), this.dispatchEvent(
82
- new CustomEvent("on-close", { detail: { origin: t }, bubbles: !0, composed: !0 })
83
- );
84
- }, this.slotController = new h(this, this.defaultSlot), this._isClosed = !1;
85
- }
86
- connectedCallback() {
87
- super.connectedCallback(), this["aria-live"] = this.getAttribute("aria-live") || this.ariaLive;
88
- }
89
- attributeChangedCallback(t, l, o) {
90
- t === "ariaLive" && (this["aria-live"] = o);
91
- }
92
- updated(t) {
93
- super.updated(t), t.has("ariaLive") && (this["aria-live"] = this.ariaLive);
94
- }
95
- render() {
96
- const t = {
97
- "pkt-alert": !0,
98
- "pkt-alert--compact": this.compact,
99
- [`pkt-alert--${this.skin}`]: this.skin,
100
- "pkt-hide": this._isClosed
101
- };
102
- return n`
103
- <div class=${k(t)}>
104
- <pkt-icon
105
- class="pkt-alert__icon"
106
- name=${this.skin === "info" ? "alert-information" : `alert-${this.skin}`}
107
- ></pkt-icon>
108
-
109
- ${this.closeAlert ? n`
110
- <div class="pkt-alert__close">
111
- <button
112
- type="button"
113
- class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
114
- tabindex="0"
115
- aria-label="close"
116
- @click=${this.close}
117
- >
118
- <pkt-icon name="close" class="pkt-btn__icon" aria-hidden="true"></pkt-icon>
119
- </button>
120
- </div>
121
- ` : u}
122
- ${this.title ? n`<div class="pkt-alert__title">${this.title}</div>` : u}
123
-
124
- <div class="pkt-alert__text" ${y(this.defaultSlot)}></div>
125
-
126
- ${this.date ? n`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>` : u}
127
- </div>
128
- `;
129
- }
130
- };
131
- i([
132
- r({ type: Boolean, reflect: !1 })
133
- ], e.prototype, "compact", 2);
134
- i([
135
- r({ type: String, reflect: !0 })
136
- ], e.prototype, "title", 2);
137
- i([
138
- r({ type: String, reflect: !0 })
139
- ], e.prototype, "skin", 2);
140
- i([
141
- r({ type: String })
142
- ], e.prototype, "ariaLive", 2);
143
- i([
144
- r({ type: String, reflect: !0 })
145
- ], e.prototype, "aria-live", 2);
146
- i([
147
- r({ type: Boolean, reflect: !0 })
148
- ], e.prototype, "closeAlert", 2);
149
- i([
150
- r({ type: String, reflect: !0 })
151
- ], e.prototype, "date", 2);
152
- i([
153
- v()
154
- ], e.prototype, "_isClosed", 2);
155
- e = i([
156
- m("pkt-alert")
157
- ], e);
1
+ import { P as t } from "./alert-Dh6A96vo.js";
2
+ const e = t;
158
3
  export {
159
- e as PktAlert
4
+ t as PktAlert,
5
+ e as default
160
6
  };
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("./index-CR7t1zY9.cjs");require("./converters-DhM11VlY.cjs");require("./custom-element-B-TlBwRu.cjs");require("./class-map-a5HUzP83.cjs");const e=require("./index-tvpcg-ad.cjs");require("./index-CmTjXoAb.cjs");Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>e.PktCalendar});
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./calendar-QSulz7im.cjs"),t=e.PktCalendar;Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>e.PktCalendar});exports.default=t;
@@ -1,9 +1,6 @@
1
- import "./index-CFDwiDTU.js";
2
- import "./converters-DNCwIFwr.js";
3
- import "./custom-element-CWfU4dcr.js";
4
- import "./class-map-CBvUV2N3.js";
5
- import { P as e } from "./index-D2jSRMrn.js";
6
- import "./index-RwtTBIhT.js";
1
+ import { P as a } from "./calendar-BUqcNvfI.js";
2
+ const r = a;
7
3
  export {
8
- e as PktCalendar
4
+ a as PktCalendar,
5
+ r as default
9
6
  };
package/dist/pkt-card.cjs CHANGED
@@ -1,23 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./class-map-a5HUzP83.cjs"),g=require("./custom-element-B-TlBwRu.cjs"),t=require("./index-CR7t1zY9.cjs"),u=require("./pkt-slot-controller-Ckk_yV0j.cjs"),d=require("./ref-CA2-0S_W.cjs");require("./index-CmTjXoAb.cjs");require("./pkt-tag.cjs");const k="pkt-card",h=!0,m={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}}}},y={default:{description:"Innholdet i kortet"}},l={name:k,"css-class":"pkt-card",isElement:h,props:m,slots:y};var b=Object.defineProperty,f=Object.getOwnPropertyDescriptor,r=(a,i,s,n)=>{for(var e=n>1?void 0:n?f(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&&b(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 u.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=${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([g.t("pkt-card")],exports.PktCard);
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./card-B0GPdG5M.cjs"),t=e.PktCard;Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>e.PktCard});exports.default=t;