@oslokommune/punkt-elements 12.29.0 → 12.29.2

package/dist/alert-CP5oN7df.cjs

@@ -0,0 +1,27 @@
+"use strict";const d=require("./class-map-Dzci3Pfe.cjs"),e=require("./element-r-PeQ419.cjs"),k=require("./state-B77EXPZ9.cjs"),u=require("./pkt-slot-controller-Oc32unDk.cjs"),c=require("./ref-BUWgvhgU.cjs"),h=require("./classutils-BwNK82ZQ.cjs");require("./icon-DcJIqTIY.cjs");const v="pkt-alert",f=!0,m={onClose:{description:"React: Klikk-event for 'Lukk'-knappen"},close:{description:"Vue: Klikk-event for 'Lukk'-knappen"}},b={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}},y={default:{description:"Innholdet i meldingen"}},a={name:v,"css-class":"pkt-alert","dark-mode":!0,isElement:f,events:m,props:b,slots:y};var _=Object.defineProperty,C=Object.getOwnPropertyDescriptor,s=(n,t,r,i)=>{for(var l=i>1?void 0:i?C(t,r):t,o=n.length-1,p;o>=0;o--)(p=n[o])&&(l=(i?p(t,r,l):p(l))||l);return i&&l&&_(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 u.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")&&h.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`
+      <div class=${d.e(t)}>
+        <pkt-icon
+          class="pkt-alert__icon"
+          name=${this.skin==="info"?"alert-information":`alert-${this.skin}`}
+        ></pkt-icon>
+
+        ${this.closeAlert?e.x`
+              <div class="pkt-alert__close">
+                <button
+                  type="button"
+                  class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
+                  tabindex="0"
+                  aria-label="close"
+                  @click=${this.close}
+                >
+                  <pkt-icon name="close" class="pkt-btn__icon" aria-hidden="true"></pkt-icon>
+                </button>
+              </div>
+            `:e.E}
+        ${this.title?e.x`<div class="pkt-alert__title">${this.title}</div>`:e.E}
+
+        <div class="pkt-alert__text" ${c.n(this.defaultSlot)}></div>
+
+        ${this.date?e.x`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>`:e.E}
+      </div>
+    `}};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([k.r()],exports.PktAlert.prototype,"_isClosed",2);exports.PktAlert=s([e.t("pkt-alert")],exports.PktAlert);

package/dist/{alert-C_FCsFfo.js → alert-CugVni4g.js}

@@ -3,15 +3,16 @@ import { P as m, x as n, E as u, n as r, a as h } from "./element-D_ZgQsSr.js";
 import { r as f } from "./state-DuS4ffEQ.js";
 import { P as v } from "./pkt-slot-controller-Clbye6cM.js";
 import { e as b, n as y } from "./ref-BSGI8ogR.js";
+import { u as _ } from "./classutils-RQs1k6D9.js";
 import "./icon-BBFK-d-X.js";
-const _ = "pkt-alert", g = !0, C = {
+const C = "pkt-alert", g = !0, $ = {
   onClose: {
     description: "React: Klikk-event for 'Lukk'-knappen"
   },
   close: {
     description: "Vue: Klikk-event for 'Lukk'-knappen"
   }
-}, $ = {
+}, L = {
   title: {
     name: "Tittel",
     description: "Tittelen som vises øverst i på meldingen",
@@ -55,23 +56,23 @@ const _ = "pkt-alert", g = !0, C = {
     type: "boolean",
     default: !1
   }
-}, L = {
+}, S = {
   default: {
     description: "Innholdet i meldingen"
   }
 }, p = {
-  name: _,
+  name: C,
   "css-class": "pkt-alert",
   "dark-mode": !0,
   isElement: g,
-  events: C,
-  props: $,
-  slots: L
+  events: $,
+  props: L,
+  slots: S
 };
-var S = Object.defineProperty, P = Object.getOwnPropertyDescriptor, i = (t, a, l, o) => {
-  for (var s = o > 1 ? void 0 : o ? P(a, l) : a, c = t.length - 1, d; c >= 0; c--)
+var A = Object.defineProperty, E = Object.getOwnPropertyDescriptor, i = (t, a, l, o) => {
+  for (var s = o > 1 ? void 0 : o ? E(a, l) : a, c = t.length - 1, d; c >= 0; c--)
     (d = t[c]) && (s = (o ? d(a, l, s) : d(s)) || s);
-  return o && s && S(a, l, s), s;
+  return o && s && A(a, l, s), s;
 };
 let e = class extends m {
   constructor() {
@@ -83,6 +84,7 @@ let e = class extends m {
       );
     }, this.slotController = new v(this, this.defaultSlot), this._isClosed = !1;
   }
+  // Lifecycle
   connectedCallback() {
     super.connectedCallback(), this["aria-live"] = this.getAttribute("aria-live") || this.ariaLive;
   }
@@ -90,8 +92,9 @@ let e = class extends m {
     t === "ariaLive" && (this["aria-live"] = l), super.attributeChangedCallback(t, a, l);
   }
   updated(t) {
-    super.updated(t), t.has("ariaLive") && (this["aria-live"] = this.ariaLive);
+    super.updated(t), t.has("ariaLive") && (this["aria-live"] = this.ariaLive), t.has("_isClosed") && _(this, "pkt-hide", this._isClosed);
   }
+  // Render
   render() {
     const t = {
       "pkt-alert": !0,

package/dist/classutils-BwNK82ZQ.cjs

@@ -0,0 +1 @@
+"use strict";function a(s,e,i){const r=s.getAttribute("class")||"",t=new Set(r.split(/\s+/).filter(Boolean));i?t.add(e):t.delete(e),s.setAttribute("class",Array.from(t).join(" "))}exports.updateClassAttribute=a;

package/dist/classutils-RQs1k6D9.js

@@ -0,0 +1,7 @@
+function a(s, e, r) {
+  const i = s.getAttribute("class") || "", t = new Set(i.split(/\s+/).filter(Boolean));
+  r ? t.add(e) : t.delete(e), s.setAttribute("class", Array.from(t).join(" "));
+}
+export {
+  a as u
+};

package/dist/index.d.ts

@@ -14,6 +14,16 @@ import { TZDate } from '@date-fns/tz';
  */
 declare type ElementProps<Element, PropKeys extends keyof Element> = Partial<Pick<Element, PropKeys>>;
 
+declare interface IPktAlert {
+    skin?: TAlertSkin;
+    closeAlert?: boolean;
+    title?: string;
+    date?: string | null;
+    ariaLive?: TAriaLive | null;
+    'aria-live'?: TAriaLive | null;
+    compact?: boolean;
+}
+
 export declare interface IPktButton {
     iconName?: string;
     secondIconName?: string;
@@ -37,6 +47,13 @@ declare interface IPktLinkCard {
     skin?: TLinkCardSkin;
 }
 
+declare interface IPktMessagebox {
+    skin?: TMessageboxSkin;
+    title?: string;
+    compact?: boolean;
+    closable?: boolean;
+}
+
 declare interface IPktModal {
     headingText?: string;
     removePadding?: boolean;
@@ -77,25 +94,25 @@ declare interface IPktTag {
     ariaLabel?: string;
 }
 
-export declare class PktAlert extends PktElement {
+export declare class PktAlert extends PktElement implements IPktAlert {
     defaultSlot: Ref<HTMLElement>;
     constructor();
     compact: boolean;
     title: string;
     skin: TAlertSkin;
     ariaLive: TAriaLive;
-    'aria-live': TAriaLive;
+    'aria-live': TAriaLive | null;
     closeAlert: boolean;
     date: string | null;
     _isClosed: boolean;
-    private close;
     connectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
     protected updated(_changedProperties: PropertyValues): void;
     render(): TemplateResult<1>;
+    private close;
 }
 
-export declare class PktButton extends PktElement implements IPktButton {
+export declare class PktButton extends PktElement<IPktButton> implements IPktButton {
     static formAssociated: boolean;
     private internals;
     defaultSlot: Ref<HTMLElement>;
@@ -113,7 +130,7 @@ export declare class PktButton extends PktElement implements IPktButton {
     disabled: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    updated(changedProps: Map<string | number | symbol, unknown>): void;
+    protected updated(_changedProperties: PropertyValues): void;
     render(): TemplateResult<1>;
     private updateElementClasses;
     private handleClick;
@@ -504,7 +521,7 @@ export declare class PktLinkCard extends PktElement implements IPktLinkCard {
     render(): TemplateResult<1>;
 }
 
-export declare class PktMessagebox extends PktElement {
+export declare class PktMessagebox extends PktElement implements IPktMessagebox {
     defaultSlot: Ref<HTMLElement>;
     constructor();
     closable: boolean;
@@ -512,8 +529,9 @@ export declare class PktMessagebox extends PktElement {
     title: string;
     skin: TMessageboxSkin;
     _isClosed: boolean;
-    private close;
+    protected updated(_changedProperties: PropertyValues): void;
     render(): TemplateResult<1>;
+    private close;
 }
 
 export declare class PktModal extends PktElement implements IPktModal {
@@ -694,7 +712,7 @@ declare type Props_5 = ElementProps<PktTextinput, 'value' | 'type' | 'size' | 'a
 
 declare type TAlertSkin = 'error' | 'success' | 'warning' | 'info';
 
-declare type TAriaLive = 'off' | 'polite' | 'assertive' | null;
+declare type TAriaLive = 'off' | 'polite' | 'assertive';
 
 declare type TCardSkin = 'outlined' | 'gray' | 'beige' | 'green' | 'blue';
 

package/dist/messagebox-BSyLVNas.cjs

@@ -0,0 +1,12 @@
+"use strict";const s=require("./element-r-PeQ419.cjs"),b=require("./pkt-slot-controller-Oc32unDk.cjs"),c=require("./ref-BUWgvhgU.cjs"),d=require("./class-map-Dzci3Pfe.cjs"),k=require("./state-B77EXPZ9.cjs");require("./icon-DcJIqTIY.cjs");const u=require("./classutils-BwNK82ZQ.cjs"),m="pkt-messagebox",g=!0,h={onClose:{description:"React: Event som trigges når meldingsboksen lukkes"},"on-close":{description:"Vue: Event som trigges når meldingsboksen lukkes"}},f={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}},x={default:{description:"Innholdet i meldingsboksen"}},p={name:m,"css-class":"pkt-messagebox",isElement:g,events:h,props:f,slots:x};var v=Object.defineProperty,_=Object.getOwnPropertyDescriptor,o=(i,e,n,l)=>{for(var t=l>1?void 0:l?_(e,n):e,a=i.length-1,r;a>=0;a--)(r=i[a])&&(t=(l?r(e,n,t):r(t))||t);return l&&t&&v(e,n,t),t};exports.PktMessagebox=class extends s.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=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:e},bubbles:!0}))},this.slotController=new b.PktSlotController(this,this.defaultSlot),this._isClosed=!1}updated(e){super.updated(e),e.has("_isClosed")&&u.updateClassAttribute(this,"pkt-hide",this._isClosed)}render(){const e={"pkt-messagebox":!0,"pkt-messagebox--compact":this.compact,[`pkt-messagebox--${this.skin}`]:this.skin,"pkt-messagebox--closable":this.closable,"pkt-hide":this._isClosed};return s.x`<div class=${d.e(e)}>
+      ${this.closable?s.x`<div class="pkt-messagebox__close">
+            <button
+              @click=${this.close}
+              class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
+            >
+              <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
+            </button>
+          </div>`:s.E}
+      ${this.title?s.x`<div class="pkt-messagebox__title">${this.title}</div>`:s.E}
+      <div class="pkt-messagebox__text" ${c.n(this.defaultSlot)}></div>
+    </div>`}};o([s.n({type:Boolean,reflect:!0})],exports.PktMessagebox.prototype,"closable",2);o([s.n({type:Boolean,reflect:!0})],exports.PktMessagebox.prototype,"compact",2);o([s.n({type:String,reflect:!0})],exports.PktMessagebox.prototype,"title",2);o([s.n({type:String,reflect:!0})],exports.PktMessagebox.prototype,"skin",2);o([k.r()],exports.PktMessagebox.prototype,"_isClosed",2);exports.PktMessagebox=o([s.t("pkt-messagebox")],exports.PktMessagebox);

package/dist/{messagebox-BgLZ5zul.js → messagebox-Di7LUz4C.js}

@@ -1,17 +1,18 @@
-import { P as b, x as c, E as d, n, a as k } from "./element-D_ZgQsSr.js";
-import { P as u } from "./pkt-slot-controller-Clbye6cM.js";
-import { e as g, n as f } from "./ref-BSGI8ogR.js";
-import { e as h } from "./class-map-BYCG9U47.js";
+import { P as b, x as c, E as m, n, a as u } from "./element-D_ZgQsSr.js";
+import { P as k } from "./pkt-slot-controller-Clbye6cM.js";
+import { e as h, n as f } from "./ref-BSGI8ogR.js";
+import { e as g } from "./class-map-BYCG9U47.js";
 import { r as v } from "./state-DuS4ffEQ.js";
 import "./icon-BBFK-d-X.js";
-const _ = "pkt-messagebox", x = !0, y = {
+import { u as _ } from "./classutils-RQs1k6D9.js";
+const x = "pkt-messagebox", y = !0, C = {
   onClose: {
     description: "React: Event som trigges når meldingsboksen lukkes"
   },
   "on-close": {
     description: "Vue: Event som trigges når meldingsboksen lukkes"
   }
-}, C = {
+}, E = {
   title: {
     name: "Tittel",
     description: "Tittelen på meldingsboksen",
@@ -40,29 +41,34 @@ const _ = "pkt-messagebox", x = !0, y = {
     type: "boolean",
     default: !1
   }
-}, E = {
+}, P = {
   default: {
     description: "Innholdet i meldingsboksen"
   }
-}, m = {
-  name: _,
+}, d = {
+  name: x,
   "css-class": "pkt-messagebox",
-  isElement: x,
-  events: y,
-  props: C,
-  slots: E
+  isElement: y,
+  events: C,
+  props: E,
+  slots: P
 };
-var P = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, o = (e, l, p, i) => {
-  for (var t = i > 1 ? void 0 : i ? $(l, p) : l, r = e.length - 1, a; r >= 0; r--)
-    (a = e[r]) && (t = (i ? a(l, p, t) : a(t)) || t);
-  return i && t && P(l, p, t), t;
+var $ = Object.defineProperty, S = Object.getOwnPropertyDescriptor, o = (e, i, p, l) => {
+  for (var t = l > 1 ? void 0 : l ? S(i, p) : i, a = e.length - 1, r; a >= 0; a--)
+    (r = e[a]) && (t = (l ? r(i, p, t) : r(t)) || t);
+  return l && t && $(i, p, t), t;
 };
 let s = class extends b {
   constructor() {
-    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) => {
+    super(), this.defaultSlot = h(), this.closable = d.props.closable.default, this.compact = d.props.compact.default, this.title = "", this.skin = d.props.skin.default, this._isClosed = !1, this.close = (e) => {
       this._isClosed = !0, this.dispatchEvent(new CustomEvent("close", { detail: { origin: e }, bubbles: !0 })), this.dispatchEvent(new CustomEvent("on-close", { detail: { origin: e }, bubbles: !0 }));
-    }, this.slotController = new u(this, this.defaultSlot), this._isClosed = !1;
+    }, this.slotController = new k(this, this.defaultSlot), this._isClosed = !1;
+  }
+  // Lifecycle
+  updated(e) {
+    super.updated(e), e.has("_isClosed") && _(this, "pkt-hide", this._isClosed);
   }
+  // Render
   render() {
     const e = {
       "pkt-messagebox": !0,
@@ -71,7 +77,7 @@ let s = class extends b {
       "pkt-messagebox--closable": this.closable,
       "pkt-hide": this._isClosed
     };
-    return c`<div class=${h(e)}>
+    return c`<div class=${g(e)}>
       ${this.closable ? c`<div class="pkt-messagebox__close">
             <button
               @click=${this.close}
@@ -79,8 +85,8 @@ let s = class extends b {
             >
               <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
             </button>
-          </div>` : d}
-      ${this.title ? c`<div class="pkt-messagebox__title">${this.title}</div>` : d}
+          </div>` : m}
+      ${this.title ? c`<div class="pkt-messagebox__title">${this.title}</div>` : m}
       <div class="pkt-messagebox__text" ${f(this.defaultSlot)}></div>
     </div>`;
   }
@@ -101,7 +107,7 @@ o([
   v()
 ], s.prototype, "_isClosed", 2);
 s = o([
-  k("pkt-messagebox")
+  u("pkt-messagebox")
 ], s);
 export {
   s as P

package/dist/{modal-CV3LSNHb.cjs → modal-CblCiNUi.cjs}

@@ -12,13 +12,14 @@
                 ${this.headingText}
               </h1>`:s.E}
           ${this.hideCloseButton?s.E:s.x`<div class="${d.e(i)}">
-                <button
+                <pkt-button
                   @click=${p=>this.close(p)}
                   class=${d.e(a)}
                   aria-label="close"
+                  iconname="close"
+                  variant="icon-only"
                 >
-                  <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
-                </button>
+                </pkt-button>
               </div>`}
         </div>
         <div class="pkt-modal__container">

package/dist/{modal-CnSYSYsQ.js → modal-DZUQb_yG.js}

@@ -1,5 +1,5 @@
 import { e as c } from "./class-map-BYCG9U47.js";
-import { P as f, x as p, E as k, n as d, a as g } from "./element-D_ZgQsSr.js";
+import { P as f, x as p, E as k, n as r, a as g } from "./element-D_ZgQsSr.js";
 import { r as v } from "./state-DuS4ffEQ.js";
 import { P as b } from "./pkt-slot-controller-Clbye6cM.js";
 import { e as m, n as h } from "./ref-BSGI8ogR.js";
@@ -60,28 +60,28 @@ const y = "pkt-modal", _ = !0, C = {
   props: B,
   slots: w
 };
-var E = Object.defineProperty, S = Object.getOwnPropertyDescriptor, l = (t, e, o, s) => {
-  for (var n = s > 1 ? void 0 : s ? S(e, o) : e, r = t.length - 1, a; r >= 0; r--)
-    (a = t[r]) && (n = (s ? a(e, o, n) : a(n)) || n);
-  return s && n && E(e, o, n), n;
+var E = Object.defineProperty, S = Object.getOwnPropertyDescriptor, l = (t, e, o, n) => {
+  for (var s = n > 1 ? void 0 : n ? S(e, o) : e, d = t.length - 1, a; d >= 0; d--)
+    (a = t[d]) && (s = (n ? a(e, o, s) : a(s)) || s);
+  return n && s && E(e, o, s), s;
 };
 let i = class extends f {
   constructor() {
     super(), this.headingText = "", this.removePadding = !1, this.hideCloseButton = u.props.hideCloseButton.default, this.closeOnBackdropClick = u.props.closeOnBackdropClick.default, this.closeButtonSkin = "blue", this.size = u.props.size.default, this.defaultSlot = m(), this.dialogRef = m(), this._isOpen = !1, this.close = (t, e = !1) => {
-      var s;
+      var n;
       if (!this._isOpen) return;
       this._isOpen = !1, document.body.classList.remove("pkt-modal--open");
       const o = document.activeElement;
       o && !this.isElementInViewport(o) && o.scrollIntoView({ behavior: "smooth", block: "nearest" }), this.dispatchEvent(
         new CustomEvent("close", { detail: { origin: t }, bubbles: !0, composed: !0 })
-      ), e || (s = this.dialogRef.value) == null || s.close(), this.requestUpdate();
+      ), e || (n = this.dialogRef.value) == null || n.close(), this.requestUpdate();
     }, this.showModal = (t) => {
       var o;
       this._isOpen = !0, (o = this.dialogRef.value) == null || o.showModal();
       const e = document.querySelector(".pkt-modal");
       requestAnimationFrame(() => {
-        var s;
-        this.dialogRef.value && ((s = this.dialogRef.value) == null || s.focus());
+        var n;
+        this.dialogRef.value && ((n = this.dialogRef.value) == null || n.focus());
       }), e && document.body.classList.add("pkt-modal--open"), this.dispatchEvent(
         new CustomEvent("showModal", { detail: { origin: t }, bubbles: !0, composed: !0 })
       ), this.requestUpdate();
@@ -117,12 +117,12 @@ let i = class extends f {
     }, o = {
       "pkt-modal__content": !0,
       "pkt-txt-18-light": !0
-    }, s = this.closeButtonSkin === "blue", n = {
+    }, n = this.closeButtonSkin === "blue", s = {
       "pkt-modal__closeButton": !0,
       [`pkt-modal__closeButton--${this.closeButtonSkin}`]: !0
-    }, r = {
+    }, d = {
       "pkt-btn": !0,
-      [`pkt-btn--${s ? "tertiary" : "primary"}`]: !0,
+      [`pkt-btn--${n ? "tertiary" : "primary"}`]: !0,
       "pkt-btn--icon-only": !0,
       "pkt-btn--medium": !0
     };
@@ -139,14 +139,15 @@ let i = class extends f {
           ${this.headingText ? p`<h1 id="pkt-modal__headingText" class=${c(e)}>
                 ${this.headingText}
               </h1>` : k}
-          ${this.hideCloseButton ? k : p`<div class="${c(n)}">
-                <button
+          ${this.hideCloseButton ? k : p`<div class="${c(s)}">
+                <pkt-button
                   @click=${(a) => this.close(a)}
-                  class=${c(r)}
+                  class=${c(d)}
                   aria-label="close"
+                  iconname="close"
+                  variant="icon-only"
                 >
-                  <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
-                </button>
+                </pkt-button>
               </div>`}
         </div>
         <div class="pkt-modal__container">
@@ -161,22 +162,22 @@ let i = class extends f {
   }
 };
 l([
-  d({ type: String, reflect: !0 })
+  r({ type: String, reflect: !0 })
 ], i.prototype, "headingText", 2);
 l([
-  d({ type: Boolean, reflect: !0 })
+  r({ type: Boolean, reflect: !0 })
 ], i.prototype, "removePadding", 2);
 l([
-  d({ type: Boolean, reflect: !0 })
+  r({ type: Boolean, reflect: !0 })
 ], i.prototype, "hideCloseButton", 2);
 l([
-  d({ type: Boolean, reflect: !0 })
+  r({ type: Boolean, reflect: !0 })
 ], i.prototype, "closeOnBackdropClick", 2);
 l([
-  d({ type: String, reflect: !0 })
+  r({ type: String, reflect: !0 })
 ], i.prototype, "closeButtonSkin", 2);
 l([
-  d({ type: String, reflect: !0 })
+  r({ type: String, reflect: !0 })
 ], i.prototype, "size", 2);
 l([
   v()

package/dist/pkt-alert.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./alert-Cx7AYawa.cjs"),t=e.PktAlert;Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>e.PktAlert});exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./alert-CP5oN7df.cjs"),t=e.PktAlert;Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>e.PktAlert});exports.default=t;

package/dist/pkt-alert.js

@@ -1,4 +1,4 @@
-import { P as t } from "./alert-C_FCsFfo.js";
+import { P as t } from "./alert-CugVni4g.js";
 const e = t;
 export {
   t as PktAlert,

package/dist/pkt-index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("./alert-Cx7AYawa.cjs"),d=require("./button-DPb5WL9h.cjs"),c=require("./calendar-DUkAC9Hx.cjs"),k=require("./card-Bxe-jQD_.cjs"),P=require("./checkbox-CDMUepTW.cjs"),t=require("./element-r-PeQ419.cjs"),b=require("./pkt-slot-controller-Oc32unDk.cjs"),i=require("./ref-BUWgvhgU.cjs"),h=require("./class-map-Dzci3Pfe.cjs"),m=require("./datepicker-D6ifQ2so.cjs"),g=require("./helptext-C0mrdhRi.cjs"),f=require("./icon-DcJIqTIY.cjs"),y=require("./input-wrapper-Dqj4uers.cjs"),x=require("./link-C_bwx1Ml.cjs"),C=require("./linkcard-C6mZOE0R.cjs"),O=require("./messagebox-DJzOyZwE.cjs"),j=require("./modal-CV3LSNHb.cjs"),q=require("./progressbar-C_q48_qh.cjs"),v=require("./radiobutton-3e105CXX.cjs"),S=require("./tag-BMyii4Da.cjs"),$=require("./textarea-DxpzI67n.cjs"),_=require("./textinput-BRupcl9v.cjs"),T=require("./select-DJu4Wr1y.cjs");var L=Object.defineProperty,M=Object.getOwnPropertyDescriptor,o=(a,e,r,s)=>{for(var n=s>1?void 0:s?M(e,r):e,l=a.length-1,u;l>=0;l--)(u=a[l])&&(n=(s?u(e,r,n):u(n))||n);return s&&n&&L(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=i.e(),this.namedSlot=i.e(),this.slotController=new b.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`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("./alert-CP5oN7df.cjs"),d=require("./button-DPb5WL9h.cjs"),c=require("./calendar-DUkAC9Hx.cjs"),k=require("./card-Bxe-jQD_.cjs"),P=require("./checkbox-CDMUepTW.cjs"),t=require("./element-r-PeQ419.cjs"),b=require("./pkt-slot-controller-Oc32unDk.cjs"),i=require("./ref-BUWgvhgU.cjs"),h=require("./class-map-Dzci3Pfe.cjs"),m=require("./datepicker-D6ifQ2so.cjs"),g=require("./helptext-C0mrdhRi.cjs"),f=require("./icon-DcJIqTIY.cjs"),y=require("./input-wrapper-Dqj4uers.cjs"),x=require("./link-C_bwx1Ml.cjs"),C=require("./linkcard-C6mZOE0R.cjs"),O=require("./messagebox-BSyLVNas.cjs"),j=require("./modal-CblCiNUi.cjs"),q=require("./progressbar-C_q48_qh.cjs"),v=require("./radiobutton-3e105CXX.cjs"),S=require("./tag-BMyii4Da.cjs"),$=require("./textarea-DxpzI67n.cjs"),_=require("./textinput-BRupcl9v.cjs"),T=require("./select-DJu4Wr1y.cjs");var L=Object.defineProperty,M=Object.getOwnPropertyDescriptor,o=(a,e,r,s)=>{for(var n=s>1?void 0:s?M(e,r):e,l=a.length-1,u;l>=0;l--)(u=a[l])&&(n=(s?u(e,r,n):u(n))||n);return s&&n&&L(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=i.e(),this.namedSlot=i.e(),this.slotController=new b.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`
       <div class="${h.e(e)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 

package/dist/pkt-index.js

@@ -1,4 +1,4 @@
-import { P as w } from "./alert-C_FCsFfo.js";
+import { P as w } from "./alert-CugVni4g.js";
 import { P as O } from "./button-BnmFhao8.js";
 import { c as d } from "./calendar-DevhqUoj.js";
 import { P as j } from "./calendar-DevhqUoj.js";
@@ -14,8 +14,8 @@ import { P as N } from "./icon-BBFK-d-X.js";
 import { P as W } from "./input-wrapper-D-pEAZaj.js";
 import { P as z } from "./link-CDkU7zsB.js";
 import { P as J } from "./linkcard-Dr5iKZrV.js";
-import { P as V } from "./messagebox-BgLZ5zul.js";
-import { P as Y } from "./modal-CnSYSYsQ.js";
+import { P as V } from "./messagebox-Di7LUz4C.js";
+import { P as Y } from "./modal-DZUQb_yG.js";
 import { P as tt } from "./progressbar-CuZj4FWi.js";
 import { P as rt } from "./radiobutton-CcZ2-z8q.js";
 import { P as ot } from "./tag-DVk69673.js";

package/dist/pkt-messagebox.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./messagebox-DJzOyZwE.cjs"),t=e.PktMessagebox;Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>e.PktMessagebox});exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./messagebox-BSyLVNas.cjs"),t=e.PktMessagebox;Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>e.PktMessagebox});exports.default=t;

package/dist/pkt-messagebox.js

@@ -1,4 +1,4 @@
-import { P as s } from "./messagebox-BgLZ5zul.js";
+import { P as s } from "./messagebox-Di7LUz4C.js";
 const a = s;
 export {
   s as PktMessagebox,

package/dist/pkt-modal.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./modal-CV3LSNHb.cjs"),t=e.PktModal;Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>e.PktModal});exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./modal-CblCiNUi.cjs"),t=e.PktModal;Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>e.PktModal});exports.default=t;

package/dist/pkt-modal.js

@@ -1,4 +1,4 @@
-import { P as a } from "./modal-CnSYSYsQ.js";
+import { P as a } from "./modal-DZUQb_yG.js";
 const t = a;
 export {
   a as PktModal,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.29.0",
+  "version": "12.29.2",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -57,5 +57,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "2f85764bd3da7652eacddf71afb9ab9f0ff652d4"
+  "gitHead": "bba55044dd965cd3cab5a32614be5a600b02b2ed"
 }

package/src/components/alert/alert.ts

@@ -5,7 +5,7 @@ import { PktElement } from '@/base-elements/element'
 import { PktSlotController } from '@/controllers/pkt-slot-controller'
 import { ref, createRef, Ref } from 'lit/directives/ref.js'
 import { TAriaLive } from '@/types/aria'
-
+import { updateClassAttribute } from '@/utils/classutils'
 import specs from 'componentSpecs/alert.json'
 
 import '@/components/icon'
@@ -16,13 +16,13 @@ export interface IPktAlert {
   skin?: TAlertSkin
   closeAlert?: boolean
   title?: string
-  date?: string
-  ariaLive?: TAriaLive
-  'aria-live'?: TAriaLive
+  date?: string | null
+  ariaLive?: TAriaLive | null
+  'aria-live'?: TAriaLive | null
   compact?: boolean
 }
 @customElement('pkt-alert')
-export class PktAlert extends PktElement {
+export class PktAlert extends PktElement implements IPktAlert {
   defaultSlot: Ref<HTMLElement> = createRef()
 
   constructor() {
@@ -31,27 +31,20 @@ export class PktAlert extends PktElement {
     this._isClosed = false
   }
 
+  // Properties
+
   @property({ type: Boolean, reflect: false }) compact = specs.props.compact.default
   @property({ type: String, reflect: true }) title: string = ''
   @property({ type: String, reflect: true }) skin: TAlertSkin = specs.props.skin
     .default as TAlertSkin
   @property({ type: String }) ariaLive: TAriaLive = specs.props.ariaLive.default as TAriaLive
-  @property({ type: String, reflect: true }) 'aria-live': TAriaLive = null
+  @property({ type: String, reflect: true }) 'aria-live': TAriaLive | null = null
   @property({ type: Boolean, reflect: true }) closeAlert = specs.props.closeAlert.default
   @property({ type: String, reflect: true }) date: string | null = null
 
   @state() _isClosed: boolean = false
 
-  private close = (event: MouseEvent) => {
-    this._isClosed = true
-    this.dispatchEvent(
-      new CustomEvent('close', { detail: { origin: event }, bubbles: true, composed: true }),
-    )
-    // Historical support of old Vue implementations…
-    this.dispatchEvent(
-      new CustomEvent('on-close', { detail: { origin: event }, bubbles: true, composed: true }),
-    )
-  }
+  // Lifecycle
 
   connectedCallback(): void {
     super.connectedCallback()
@@ -70,8 +63,13 @@ export class PktAlert extends PktElement {
     if (_changedProperties.has('ariaLive')) {
       this['aria-live'] = this.ariaLive
     }
+    if (_changedProperties.has('_isClosed')) {
+      updateClassAttribute(this, 'pkt-hide', this._isClosed)
+    }
   }
 
+  // Render
+
   render() {
     const classes = {
       'pkt-alert': true,
@@ -112,4 +110,17 @@ export class PktAlert extends PktElement {
       </div>
     `
   }
+
+  // Methods
+
+  private close = (event: MouseEvent) => {
+    this._isClosed = true
+    this.dispatchEvent(
+      new CustomEvent('close', { detail: { origin: event }, bubbles: true, composed: true }),
+    )
+    // Historical support of old Vue implementations…
+    this.dispatchEvent(
+      new CustomEvent('on-close', { detail: { origin: event }, bubbles: true, composed: true }),
+    )
+  }
 }

package/src/components/button/button.ts

@@ -1,6 +1,6 @@
 import { PktElement } from '@/base-elements/element'
 import { PktSlotController } from '@/controllers/pkt-slot-controller'
-import { html, nothing } from 'lit'
+import { html, nothing, PropertyValues } from 'lit'
 import { property, customElement } from 'lit/decorators.js'
 import { createRef, Ref, ref } from 'lit/directives/ref.js'
 
@@ -43,7 +43,7 @@ export interface IPktButton {
   disabled?: boolean
 }
 @customElement('pkt-button')
-export class PktButton extends PktElement implements IPktButton {
+export class PktButton extends PktElement<IPktButton> implements IPktButton {
   static formAssociated = true
   private internals = this.attachInternals()
   defaultSlot: Ref<HTMLElement> = createRef()
@@ -80,8 +80,8 @@ export class PktButton extends PktElement implements IPktButton {
     this.removeEventListener('keydown', this.handleKeydown as EventListener)
   }
 
-  updated(changedProps: Map<string | number | symbol, unknown>) {
-    super.updated(changedProps)
+  protected updated(_changedProperties: PropertyValues): void {
+    super.updated(_changedProperties)
 
     this.setAttribute('role', 'button')
 
@@ -100,7 +100,6 @@ export class PktButton extends PktElement implements IPktButton {
         this.setAttribute('aria-disabled', 'false')
       }
     }
-
     if (this.isLoading) {
       if (this.getAttribute('aria-busy') !== 'true') {
         this.setAttribute('aria-busy', 'true')

package/src/components/messagebox/messagebox.ts

@@ -2,12 +2,13 @@ import { PktElement } from '@/base-elements/element'
 import { PktSlotController } from '@/controllers/pkt-slot-controller'
 import { ref } from 'lit/directives/ref.js'
 import { Ref, createRef } from 'lit/directives/ref.js'
-import { html, nothing } from 'lit'
+import { html, nothing, PropertyValues } from 'lit'
 import { classMap } from 'lit/directives/class-map.js'
 import { customElement, property, state } from 'lit/decorators.js'
 import specs from 'componentSpecs/messagebox.json'
 
 import '@/components/icon'
+import { updateClassAttribute } from '@/utils/classutils'
 
 export type TMessageboxSkin = 'beige' | 'blue' | 'red' | 'green'
 
@@ -19,7 +20,7 @@ export interface IPktMessagebox {
 }
 
 @customElement('pkt-messagebox')
-export class PktMessagebox extends PktElement {
+export class PktMessagebox extends PktElement implements IPktMessagebox {
   defaultSlot: Ref<HTMLElement> = createRef()
 
   constructor() {
@@ -28,6 +29,8 @@ export class PktMessagebox extends PktElement {
     this._isClosed = false
   }
 
+  // Properties
+
   @property({ type: Boolean, reflect: true }) closable = specs.props.closable.default
   @property({ type: Boolean, reflect: true }) compact = specs.props.compact.default
   @property({ type: String, reflect: true }) title = ''
@@ -35,13 +38,18 @@ export class PktMessagebox extends PktElement {
 
   @state() _isClosed: boolean = false
 
-  private close = (event: MouseEvent) => {
-    this._isClosed = true
-    this.dispatchEvent(new CustomEvent('close', { detail: { origin: event }, bubbles: true }))
-    // Historical support of old Vue implementations…
-    this.dispatchEvent(new CustomEvent('on-close', { detail: { origin: event }, bubbles: true }))
+  // Lifecycle
+
+  protected updated(_changedProperties: PropertyValues): void {
+    super.updated(_changedProperties)
+
+    if (_changedProperties.has('_isClosed')) {
+      updateClassAttribute(this, 'pkt-hide', this._isClosed)
+    }
   }
 
+  // Render
+
   render() {
     const classes = {
       'pkt-messagebox': true,
@@ -66,4 +74,12 @@ export class PktMessagebox extends PktElement {
       <div class="pkt-messagebox__text" ${ref(this.defaultSlot)}></div>
     </div>`
   }
+
+  // Methods
+  private close = (event: MouseEvent) => {
+    this._isClosed = true
+    this.dispatchEvent(new CustomEvent('close', { detail: { origin: event }, bubbles: true }))
+    // Historical support of old Vue implementations…
+    this.dispatchEvent(new CustomEvent('on-close', { detail: { origin: event }, bubbles: true }))
+  }
 }

package/src/components/modal/modal.ts

@@ -166,13 +166,14 @@ export class PktModal extends PktElement implements IPktModal {
             : nothing}
           ${!this.hideCloseButton
             ? html`<div class="${classMap(closeButtonClasses)}">
-                <button
+                <pkt-button
                   @click=${(event: Event) => this.close(event)}
                   class=${classMap(buttonClasses)}
                   aria-label="close"
+                  iconname="close"
+                  variant="icon-only"
                 >
-                  <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
-                </button>
+                </pkt-button>
               </div>`
             : nothing}
         </div>

package/dist/alert-Cx7AYawa.cjs

@@ -1,27 +0,0 @@
-"use strict";const d=require("./class-map-Dzci3Pfe.cjs"),t=require("./element-r-PeQ419.cjs"),k=require("./state-B77EXPZ9.cjs"),u=require("./pkt-slot-controller-Oc32unDk.cjs"),c=require("./ref-BUWgvhgU.cjs");require("./icon-DcJIqTIY.cjs");const h="pkt-alert",v=!0,f={onClose:{description:"React: Klikk-event for 'Lukk'-knappen"},close:{description:"Vue: Klikk-event for 'Lukk'-knappen"}},m={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:h,"css-class":"pkt-alert","dark-mode":!0,isElement:v,events:f,props:m,slots:b};var y=Object.defineProperty,_=Object.getOwnPropertyDescriptor,i=(a,e,l,s)=>{for(var r=s>1?void 0:s?_(e,l):e,o=a.length-1,p;o>=0;o--)(p=a[o])&&(r=(s?p(e,l,r):p(r))||r);return s&&r&&y(e,l,r),r};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,s){e==="ariaLive"&&(this["aria-live"]=s),super.attributeChangedCallback(e,l,s)}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`
-      <div class=${d.e(e)}>
-        <pkt-icon
-          class="pkt-alert__icon"
-          name=${this.skin==="info"?"alert-information":`alert-${this.skin}`}
-        ></pkt-icon>
-
-        ${this.closeAlert?t.x`
-              <div class="pkt-alert__close">
-                <button
-                  type="button"
-                  class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
-                  tabindex="0"
-                  aria-label="close"
-                  @click=${this.close}
-                >
-                  <pkt-icon name="close" class="pkt-btn__icon" aria-hidden="true"></pkt-icon>
-                </button>
-              </div>
-            `:t.E}
-        ${this.title?t.x`<div class="pkt-alert__title">${this.title}</div>`:t.E}
-
-        <div class="pkt-alert__text" ${c.n(this.defaultSlot)}></div>
-
-        ${this.date?t.x`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>`:t.E}
-      </div>
-    `}};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([k.r()],exports.PktAlert.prototype,"_isClosed",2);exports.PktAlert=i([t.t("pkt-alert")],exports.PktAlert);

package/dist/messagebox-DJzOyZwE.cjs

@@ -1,12 +0,0 @@
-"use strict";const e=require("./element-r-PeQ419.cjs"),b=require("./pkt-slot-controller-Oc32unDk.cjs"),p=require("./ref-BUWgvhgU.cjs"),k=require("./class-map-Dzci3Pfe.cjs"),d=require("./state-B77EXPZ9.cjs");require("./icon-DcJIqTIY.cjs");const u="pkt-messagebox",m=!0,g={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:m,events:g,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)}>
-      ${this.closable?e.x`<div class="pkt-messagebox__close">
-            <button
-              @click=${this.close}
-              class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
-            >
-              <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
-            </button>
-          </div>`:e.E}
-      ${this.title?e.x`<div class="pkt-messagebox__title">${this.title}</div>`:e.E}
-      <div class="pkt-messagebox__text" ${p.n(this.defaultSlot)}></div>
-    </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);