@oslokommune/punkt-elements 16.0.5 → 16.1.0

package/dist/link-oGYvBLYL.js

@@ -0,0 +1,53 @@
+import { P as h, s as m } from "./element-with-slot-1djk8KXi.js";
+import { A as u, b as c, n as i, t as g } from "./element-CV9utnHJ.js";
+import { e as P } from "./class-map-3ADKve8g.js";
+import "./icon-D0IQAVwS.js";
+const k = { href: { default: "#" }, target: { default: "_self" } }, f = {
+  props: k
+};
+var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, r = (o, n, p, s) => {
+  for (var t = s > 1 ? void 0 : s ? _(n, p) : n, a = o.length - 1, l; a >= 0; a--)
+    (l = o[a]) && (t = (s ? l(n, p, t) : l(t)) || t);
+  return s && t && y(n, p, t), t;
+};
+let e = class extends h {
+  constructor() {
+    super(...arguments), this.href = f.props.href.default, this.iconName = void 0, this.iconPosition = void 0, this.external = !1, this.target = f.props.target.default;
+  }
+  render() {
+    const o = {
+      "pkt-link": !0,
+      "pkt-link--icon-left": !!this.iconName && this.iconPosition === "left" || !!(this.iconName && !this.iconPosition),
+      "pkt-link--icon-right": !!this.iconName && this.iconPosition === "right",
+      "pkt-link--external": this.external
+    };
+    return c`<a
+      class=${P(o)}
+      href=${this.href}
+      .target=${this.target}
+      .rel=${this.external ? "noopener noreferrer" : u}
+      >${this.iconName ? c`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>` : ""} <span>${m(this)}</span></a
+    >`;
+  }
+};
+r([
+  i({ type: String, reflect: !0 })
+], e.prototype, "href", 2);
+r([
+  i({ type: String, reflect: !0 })
+], e.prototype, "iconName", 2);
+r([
+  i({ type: String, reflect: !0 })
+], e.prototype, "iconPosition", 2);
+r([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "external", 2);
+r([
+  i({ type: String, reflect: !0 })
+], e.prototype, "target", 2);
+e = r([
+  g("pkt-link")
+], e);
+export {
+  e as P
+};

package/dist/linkcard-BhVIc18n.js

@@ -0,0 +1,54 @@
+import { b as c, n, t as f } from "./element-CV9utnHJ.js";
+import { P as h, s as k } from "./element-with-slot-1djk8KXi.js";
+import "./icon-D0IQAVwS.js";
+import { o as m } from "./if-defined-rXcLNTzN.js";
+var _ = Object.defineProperty, u = Object.getOwnPropertyDescriptor, r = (o, i, l, s) => {
+  for (var e = s > 1 ? void 0 : s ? u(i, l) : i, p = o.length - 1, a; p >= 0; p--)
+    (a = o[p]) && (e = (s ? a(i, l, e) : a(e)) || e);
+  return s && e && _(i, l, e), e;
+};
+let t = class extends h {
+  constructor() {
+    super(...arguments), this.title = "", this.href = "#", this.iconName = "", this.external = !1, this.openInNewTab = !1, this.skin = "normal";
+  }
+  render() {
+    const o = ["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 c`
+      <a
+        href=${this.href}
+        class=${o}
+        target=${this.openInNewTab ? "_blank" : "_self"}
+        rel=${m(this.openInNewTab ? "noopener noreferrer" : void 0)}
+      >
+        ${this.iconName && c`<pkt-icon class="pkt-link__icon" name="${this.iconName}" />`}
+        ${this.title && c`<div class=${i}>${this.title}</div>`}
+
+        <div class="pkt-linkcard__text">${k(this)}</div>
+      </a>
+    `;
+  }
+};
+r([
+  n({ type: String, reflect: !0 })
+], t.prototype, "title", 2);
+r([
+  n({ type: String, reflect: !0 })
+], t.prototype, "href", 2);
+r([
+  n({ type: String, reflect: !0 })
+], t.prototype, "iconName", 2);
+r([
+  n({ type: Boolean, reflect: !0 })
+], t.prototype, "external", 2);
+r([
+  n({ type: Boolean, reflect: !0 })
+], t.prototype, "openInNewTab", 2);
+r([
+  n({ type: String, reflect: !0 })
+], t.prototype, "skin", 2);
+t = r([
+  f("pkt-linkcard")
+], t);
+export {
+  t as P
+};

package/dist/linkcard-C20WC6Nw.cjs

@@ -0,0 +1,13 @@
+"use strict";const t=require("./element-CMTfByxQ.cjs"),k=require("./element-with-slot-yT8k1Z37.cjs");require("./icon-Dj0oZZSa.cjs");const p=require("./if-defined-hKKmbsI8.cjs");var c=Object.defineProperty,h=Object.getOwnPropertyDescriptor,r=(l,n,i,s)=>{for(var e=s>1?void 0:s?h(n,i):n,o=l.length-1,a;o>=0;o--)(a=l[o])&&(e=(s?a(n,i,e):a(e))||e);return s&&e&&c(n,i,e),e};exports.PktLinkCard=class extends k.PktElementWithSlot{constructor(){super(...arguments),this.title="",this.href="#",this.iconName="",this.external=!1,this.openInNewTab=!1,this.skin="normal"}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.b`
+      <a
+        href=${this.href}
+        class=${n}
+        target=${this.openInNewTab?"_blank":"_self"}
+        rel=${p.o(this.openInNewTab?"noopener noreferrer":void 0)}
+      >
+        ${this.iconName&&t.b`<pkt-icon class="pkt-link__icon" name="${this.iconName}" />`}
+        ${this.title&&t.b`<div class=${i}>${this.title}</div>`}
+
+        <div class="pkt-linkcard__text">${k.slotContent(this)}</div>
+      </a>
+    `}};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);

package/dist/{loader-BF9K1VCZ.js → loader-BHt9i5Xp.js}

@@ -1,18 +1,17 @@
-import { P as u, A as m, b as d, n as a, t as y } from "./element-CV9utnHJ.js";
+import { P as u, s as m } from "./element-with-slot-1djk8KXi.js";
 import { e as h } from "./class-map-3ADKve8g.js";
-import { r as c } from "./state-l4hGZdFJ.js";
-import { e as f, n as g } from "./ref-Dma3n3i8.js";
-import { P as v } from "./pkt-slot-controller-D7CrjM52.js";
+import { A as y, b as d, n as a, t as c } from "./element-CV9utnHJ.js";
+import { r as g } from "./state-l4hGZdFJ.js";
 import "./icon-D0IQAVwS.js";
-var _ = Object.defineProperty, k = Object.getOwnPropertyDescriptor, e = (s, o, n, r) => {
-  for (var i = r > 1 ? void 0 : r ? k(o, n) : o, l = s.length - 1, p; l >= 0; l--)
-    (p = s[l]) && (i = (r ? p(o, n, i) : p(i)) || i);
-  return r && i && _(o, n, i), i;
+var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, e = (s, o, n, r) => {
+  for (var i = r > 1 ? void 0 : r ? _(o, n) : o, p = s.length - 1, l; p >= 0; p--)
+    (l = s[p]) && (i = (r ? l(o, n, i) : l(i)) || i);
+  return r && i && v(o, n, i), i;
 };
 window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/latest/animations/";
 let t = class extends u {
   constructor() {
-    super(), this.defaultSlot = f(), this.delay = 0, this.inline = !1, this.isLoading = !0, this.message = null, this.size = "medium", this.variant = "shapes", this.loadingAnimationPath = window.pktAnimationPath, this._shouldDisplayLoader = !1, this.slotController = new v(this, this.defaultSlot);
+    super(...arguments), this.delay = 0, this.inline = !1, this.isLoading = !0, this.message = null, this.size = "medium", this.variant = "shapes", this.loadingAnimationPath = window.pktAnimationPath, this._shouldDisplayLoader = !1;
   }
   connectedCallback() {
     super.connectedCallback(), this._shouldDisplayLoader = this.delay === 0, this.delay > 0 && this.setupLoader();
@@ -42,8 +41,8 @@ let t = class extends u {
               class="pkt-loader__svg pkt-loader__${this.variant}"
             ></pkt-icon>
             ${this.message && d`<p>${this.message}</p>`}
-          </div>` : m}
-      <div class=${o} ${g(this.defaultSlot)}></div>
+          </div>` : y}
+      <div class=${o}>${m(this)}</div>
     </div>`;
   }
   getVariant(s) {
@@ -84,10 +83,10 @@ e([
   a({ type: String })
 ], t.prototype, "loadingAnimationPath", 2);
 e([
-  c()
+  g()
 ], t.prototype, "_shouldDisplayLoader", 2);
 t = e([
-  y("pkt-loader")
+  c("pkt-loader")
 ], t);
 export {
   t as P

package/dist/{loader-C1LI8Q4z.cjs → loader-DxAGCcNF.cjs}

@@ -1,4 +1,4 @@
-"use strict";const t=require("./element-CMTfByxQ.cjs"),d=require("./class-map-Bokp1SoS.cjs"),h=require("./state-BNgpvY-A.cjs"),p=require("./ref-CxLwrCxt.cjs"),u=require("./pkt-slot-controller-D4nKlom5.cjs");require("./icon-Dj0oZZSa.cjs");var c=Object.defineProperty,y=Object.getOwnPropertyDescriptor,s=(r,e,a,o)=>{for(var i=o>1?void 0:o?y(e,a):e,n=r.length-1,l;n>=0;n--)(l=r[n])&&(i=(o?l(e,a,i):l(i))||i);return o&&i&&c(e,a,i),i};window.pktAnimationPath=window.pktAnimationPath||"https://punkt-cdn.oslo.kommune.no/latest/animations/";exports.PktLoader=class extends t.PktElement{constructor(){super(),this.defaultSlot=p.e(),this.delay=0,this.inline=!1,this.isLoading=!0,this.message=null,this.size="medium",this.variant="shapes",this.loadingAnimationPath=window.pktAnimationPath,this._shouldDisplayLoader=!1,this.slotController=new u.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback(),this._shouldDisplayLoader=this.delay===0,this.delay>0&&this.setupLoader()}updated(e){e.has("delay")&&this.setupLoader()}render(){const e=d.e({"pkt-loader":!0,[`pkt-loader--${this.inline?"inline":"box"}`]:!0,[`pkt-loader--${this.size}`]:!0}),a=d.e({"pkt-contents":!0,"pkt-hide":this.isLoading});return t.b`<div
+"use strict";const d=require("./element-with-slot-yT8k1Z37.cjs"),p=require("./class-map-Bokp1SoS.cjs"),t=require("./element-CMTfByxQ.cjs"),h=require("./state-BNgpvY-A.cjs");require("./icon-Dj0oZZSa.cjs");var u=Object.defineProperty,c=Object.getOwnPropertyDescriptor,s=(r,e,a,o)=>{for(var i=o>1?void 0:o?c(e,a):e,n=r.length-1,l;n>=0;n--)(l=r[n])&&(i=(o?l(e,a,i):l(i))||i);return o&&i&&u(e,a,i),i};window.pktAnimationPath=window.pktAnimationPath||"https://punkt-cdn.oslo.kommune.no/latest/animations/";exports.PktLoader=class extends d.PktElementWithSlot{constructor(){super(...arguments),this.delay=0,this.inline=!1,this.isLoading=!0,this.message=null,this.size="medium",this.variant="shapes",this.loadingAnimationPath=window.pktAnimationPath,this._shouldDisplayLoader=!1}connectedCallback(){super.connectedCallback(),this._shouldDisplayLoader=this.delay===0,this.delay>0&&this.setupLoader()}updated(e){e.has("delay")&&this.setupLoader()}render(){const e=p.e({"pkt-loader":!0,[`pkt-loader--${this.inline?"inline":"box"}`]:!0,[`pkt-loader--${this.size}`]:!0}),a=p.e({"pkt-contents":!0,"pkt-hide":this.isLoading});return t.b`<div
       role="status"
       aria-live="polite"
       aria-busy=${this.isLoading?"true":"false"}
@@ -12,5 +12,5 @@
             ></pkt-icon>
             ${this.message&&t.b`<p>${this.message}</p>`}
           </div>`:t.A}
-      <div class=${a} ${p.n(this.defaultSlot)}></div>
+      <div class=${a}>${d.slotContent(this)}</div>
     </div>`}getVariant(e){switch(e){case"blue":return"spinner-blue";case"rainbow":return"spinner";default:return"loader"}}setupLoader(){this.delay>0&&(this._shouldDisplayLoader=!1,setTimeout(()=>{this._shouldDisplayLoader=!0,this.requestUpdate()},this.delay))}};s([t.n({type:Number})],exports.PktLoader.prototype,"delay",2);s([t.n({type:Boolean})],exports.PktLoader.prototype,"inline",2);s([t.n({type:Boolean})],exports.PktLoader.prototype,"isLoading",2);s([t.n({type:String})],exports.PktLoader.prototype,"message",2);s([t.n({type:String})],exports.PktLoader.prototype,"size",2);s([t.n({type:String})],exports.PktLoader.prototype,"variant",2);s([t.n({type:String})],exports.PktLoader.prototype,"loadingAnimationPath",2);s([h.r()],exports.PktLoader.prototype,"_shouldDisplayLoader",2);exports.PktLoader=s([t.t("pkt-loader")],exports.PktLoader);

package/dist/messagebox-B8LW0PSQ.cjs

@@ -0,0 +1,13 @@
+"use strict";const n=require("./element-with-slot-yT8k1Z37.cjs"),e=require("./element-CMTfByxQ.cjs"),b=require("./class-map-Bokp1SoS.cjs"),u=require("./state-BNgpvY-A.cjs");require("./icon-Dj0oZZSa.cjs");const k=require("./classutils-BwNK82ZQ.cjs"),d={skin:{default:"beige"},compact:{default:!1},closable:{default:!1}},r={props:d};var h=Object.defineProperty,g=Object.getOwnPropertyDescriptor,o=(l,t,a,i)=>{for(var s=i>1?void 0:i?g(t,a):t,c=l.length-1,p;c>=0;c--)(p=l[c])&&(s=(i?p(t,a,s):p(s))||s);return i&&s&&h(t,a,s),s};exports.PktMessagebox=class extends n.PktElementWithSlot{constructor(){super(),this.closable=r.props.closable.default,this.compact=r.props.compact.default,this.title="",this.skin=r.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._isClosed=!1}updated(t){super.updated(t),t.has("_isClosed")&&k.updateClassAttribute(this,"pkt-hide",this._isClosed)}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.b`<div class=${b.e(t)}>
+      ${this.closable?e.b`<div class="pkt-messagebox__close">
+            <button
+              @click=${this.close}
+              class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
+              aria-label="Lukk"
+            >
+              <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
+            </button>
+          </div>`:e.A}
+      ${this.title?e.b`<div class="pkt-messagebox__title">${this.title}</div>`:e.A}
+      <div class="pkt-messagebox__text">${n.slotContent(this)}</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([u.r()],exports.PktMessagebox.prototype,"_isClosed",2);exports.PktMessagebox=o([e.t("pkt-messagebox")],exports.PktMessagebox);

package/dist/messagebox-DkspcMQg.js

@@ -0,0 +1,69 @@
+import { P as d, s as m } from "./element-with-slot-1djk8KXi.js";
+import { A as u, b as n, n as p, t as h } from "./element-CV9utnHJ.js";
+import { e as f } from "./class-map-3ADKve8g.js";
+import { r as k } from "./state-l4hGZdFJ.js";
+import "./icon-D0IQAVwS.js";
+import { u as _ } from "./classutils-RQs1k6D9.js";
+const v = { skin: { default: "beige" }, compact: { default: !1 }, closable: { default: !1 } }, b = {
+  props: v
+};
+var g = Object.defineProperty, x = Object.getOwnPropertyDescriptor, o = (t, i, a, l) => {
+  for (var s = l > 1 ? void 0 : l ? x(i, a) : i, r = t.length - 1, c; r >= 0; r--)
+    (c = t[r]) && (s = (l ? c(i, a, s) : c(s)) || s);
+  return l && s && g(i, a, s), s;
+};
+let e = class extends d {
+  constructor() {
+    super(), this.closable = b.props.closable.default, this.compact = b.props.compact.default, this.title = "", this.skin = b.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._isClosed = !1;
+  }
+  // Lifecycle
+  updated(t) {
+    super.updated(t), t.has("_isClosed") && _(this, "pkt-hide", this._isClosed);
+  }
+  // Render
+  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 n`<div class=${f(t)}>
+      ${this.closable ? n`<div class="pkt-messagebox__close">
+            <button
+              @click=${this.close}
+              class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
+              aria-label="Lukk"
+            >
+              <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
+            </button>
+          </div>` : u}
+      ${this.title ? n`<div class="pkt-messagebox__title">${this.title}</div>` : u}
+      <div class="pkt-messagebox__text">${m(this)}</div>
+    </div>`;
+  }
+};
+o([
+  p({ type: Boolean, reflect: !0 })
+], e.prototype, "closable", 2);
+o([
+  p({ type: Boolean, reflect: !0 })
+], e.prototype, "compact", 2);
+o([
+  p({ type: String, reflect: !0 })
+], e.prototype, "title", 2);
+o([
+  p({ type: String, reflect: !0 })
+], e.prototype, "skin", 2);
+o([
+  k()
+], e.prototype, "_isClosed", 2);
+e = o([
+  h("pkt-messagebox")
+], e);
+export {
+  e as P
+};

package/dist/modal-Bfk_ncLQ.cjs

@@ -0,0 +1,36 @@
+"use strict";const d=require("./class-map-Bokp1SoS.cjs"),o=require("./element-CMTfByxQ.cjs"),u=require("./state-BNgpvY-A.cjs"),p=require("./element-with-slot-yT8k1Z37.cjs"),h=require("./ref-DahIePMT.cjs");require("./icon-Dj0oZZSa.cjs");const k={hideCloseButton:{default:!1},closeOnBackdropClick:{default:!1},size:{default:"medium"}},c={props:k};var m=Object.defineProperty,v=Object.getOwnPropertyDescriptor,n=(r,e,t,i)=>{for(var s=i>1?void 0:i?v(e,t):e,l=r.length-1,a;l>=0;l--)(a=r[l])&&(s=(i?a(e,t,s):a(s))||s);return i&&s&&m(e,t,s),s};exports.PktModal=class extends p.PktElementWithSlot{constructor(){super(),this.headingText="",this.removePadding=!1,this.hideCloseButton=c.props.hideCloseButton.default,this.closeOnBackdropClick=c.props.closeOnBackdropClick.default,this.closeButtonSkin="blue",this.size=c.props.size.default,this.variant="dialog",this.drawerPosition="right",this.transparentBackdrop=!1,this.dialogRef=h.e(),this._isOpen=!1,this.close=(e,t=!1)=>{var s;if(!this._isOpen)return;this._isOpen=!1,document.body.classList.remove("pkt-modal--open");const i=document.activeElement;i&&!this.isElementInViewport(i)&&i.scrollIntoView({behavior:"smooth",block:"nearest"}),this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0,composed:!0})),t||(s=this.dialogRef.value)==null||s.close(),this.requestUpdate()},this.showModal=(e=null)=>{var i;this._isOpen=!0,(i=this.dialogRef.value)==null||i.showModal();const t=document.querySelector(".pkt-modal");requestAnimationFrame(()=>{var s;this.dialogRef.value&&((s=this.dialogRef.value)==null||s.focus())}),t&&document.body.classList.add("pkt-modal--open"),this.dispatchEvent(new CustomEvent("showModal",{detail:{origin:e},bubbles:!0,composed:!0})),this.requestUpdate()},this._isOpen=!1}async connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.handleKeyDown.bind(this)),document.addEventListener("click",this.handleBackdropClick.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("click",this.handleBackdropClick)}async firstUpdated(e){super.firstUpdated(e),this.dialogRef.value&&!window.HTMLDialogElement&&!this.dialogRef.value.showModal&&("document"in window&&"createElement"in document&&(await Promise.resolve().then(()=>require("./dialog-polyfill.esm-CPKZe7AL.cjs")).then(i=>i.default)).registerDialog(this.dialogRef.value),this.dialogRef.value.addEventListener("close",()=>{this.close(new Event("close"),!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--noShadow":this.closeButtonSkin==="yellow-filled","pkt-modal--transparentBackdrop":this.transparentBackdrop??!1,[`pkt-modal--${this.size}`]:this.size!==void 0,[`pkt-modal__${this.variant}`]:this.variant!==void 0,[`pkt-modal__drawer--${this.drawerPosition}`]:this.variant==="drawer"},t={"pkt-modal__headingText":!0,"pkt-txt-24":!0},i={"pkt-modal__content":!0,"pkt-txt-18-light":!0},s=this.closeButtonSkin==="blue",l={"pkt-modal__closeButton":!0,[`pkt-modal__closeButton--${this.closeButtonSkin}`]:!0};return o.b`
+      <dialog
+        class=${d.e(e)}
+        ${h.n(this.dialogRef)}
+        aria-labelledby="pkt-modal__headingText"
+        aria-describedby="pkt-modal__content"
+        @close=${a=>this.close(a,!0)}
+      >
+        <div class="pkt-modal__wrapper">
+          ${this.headingText||!this.hideCloseButton?o.b`<div class="pkt-modal__header">
+                <div class="pkt-modal__header-background"></div>
+                ${this.headingText?o.b`<h1 id="pkt-modal__headingText" class=${d.e(t)}>
+                      ${this.headingText}
+                    </h1>`:o.b`<div class="pkt-modal__headingText"></div>`}
+                ${this.hideCloseButton?o.b`<div class="pkt-modal__noCloseButton"></div>`:o.b`<div class="${d.e(l)}">
+                      <pkt-button
+                        @click=${a=>this.close(a)}
+                        aria-label="close"
+                        iconname="close"
+                        variant="icon-only"
+                        size="medium"
+                        skin=${s?"tertiary":"primary"}
+                      >
+                        Lukk
+                      </pkt-button>
+                    </div>`}
+              </div>`:o.A}
+          <div class="pkt-modal__container">
+            <div
+              id="pkt-modal__content"
+              class=${d.e(i)}
+            >${p.slotContent(this)}</div>
+          </div>
+        </div>
+      </dialog>
+    `}};n([o.n({type:String})],exports.PktModal.prototype,"headingText",2);n([o.n({type:Boolean})],exports.PktModal.prototype,"removePadding",2);n([o.n({type:Boolean})],exports.PktModal.prototype,"hideCloseButton",2);n([o.n({type:Boolean})],exports.PktModal.prototype,"closeOnBackdropClick",2);n([o.n({type:String})],exports.PktModal.prototype,"closeButtonSkin",2);n([o.n({type:String})],exports.PktModal.prototype,"size",2);n([o.n({type:String})],exports.PktModal.prototype,"variant",2);n([o.n({type:String})],exports.PktModal.prototype,"drawerPosition",2);n([o.n({type:Boolean})],exports.PktModal.prototype,"transparentBackdrop",2);n([u.r()],exports.PktModal.prototype,"_isOpen",2);exports.PktModal=n([o.t("pkt-modal")],exports.PktModal);

package/dist/{modal-CGHWsjk8.js → modal-p1rvuP8e.js}

@@ -1,20 +1,20 @@
 import { e as c } from "./class-map-3ADKve8g.js";
-import { P as k, A as f, b as r, n, t as v } from "./element-CV9utnHJ.js";
-import { r as g } from "./state-l4hGZdFJ.js";
-import { P as _ } from "./pkt-slot-controller-D7CrjM52.js";
-import { e as u, n as m } from "./ref-Dma3n3i8.js";
+import { A as u, b as r, n as l, t as m } from "./element-CV9utnHJ.js";
+import { r as k } from "./state-l4hGZdFJ.js";
+import { P as v, s as f } from "./element-with-slot-1djk8KXi.js";
+import { e as g, n as _ } from "./ref-DBGHvw2G.js";
 import "./icon-D0IQAVwS.js";
 const y = { hideCloseButton: { default: !1 }, closeOnBackdropClick: { default: !1 }, size: { default: "medium" } }, h = {
   props: y
 };
 var w = Object.defineProperty, B = Object.getOwnPropertyDescriptor, a = (e, t, o, i) => {
-  for (var l = i > 1 ? void 0 : i ? B(t, o) : t, d = e.length - 1, p; d >= 0; d--)
-    (p = e[d]) && (l = (i ? p(t, o, l) : p(l)) || l);
-  return i && l && w(t, o, l), l;
+  for (var n = i > 1 ? void 0 : i ? B(t, o) : t, d = e.length - 1, p; d >= 0; d--)
+    (p = e[d]) && (n = (i ? p(t, o, n) : p(n)) || n);
+  return i && n && w(t, o, n), n;
 };
-let s = class extends k {
+let s = class extends v {
   constructor() {
-    super(), this.headingText = "", this.removePadding = !1, this.hideCloseButton = h.props.hideCloseButton.default, this.closeOnBackdropClick = h.props.closeOnBackdropClick.default, this.closeButtonSkin = "blue", this.size = h.props.size.default, this.variant = "dialog", this.drawerPosition = "right", this.transparentBackdrop = !1, this.defaultSlot = u(), this.dialogRef = u(), this._isOpen = !1, this.close = (e, t = !1) => {
+    super(), this.headingText = "", this.removePadding = !1, this.hideCloseButton = h.props.hideCloseButton.default, this.closeOnBackdropClick = h.props.closeOnBackdropClick.default, this.closeButtonSkin = "blue", this.size = h.props.size.default, this.variant = "dialog", this.drawerPosition = "right", this.transparentBackdrop = !1, this.dialogRef = g(), this._isOpen = !1, this.close = (e, t = !1) => {
       var i;
       if (!this._isOpen) return;
       this._isOpen = !1, document.body.classList.remove("pkt-modal--open");
@@ -32,7 +32,7 @@ let s = class extends k {
       }), t && document.body.classList.add("pkt-modal--open"), this.dispatchEvent(
         new CustomEvent("showModal", { detail: { origin: e }, bubbles: !0, composed: !0 })
       ), this.requestUpdate();
-    }, this.slotController = new _(this, this.defaultSlot), this._isOpen = !1;
+    }, this._isOpen = !1;
   }
   async connectedCallback() {
     super.connectedCallback(), document.addEventListener("keydown", this.handleKeyDown.bind(this)), document.addEventListener("click", this.handleBackdropClick.bind(this));
@@ -73,14 +73,14 @@ let s = class extends k {
     }, o = {
       "pkt-modal__content": !0,
       "pkt-txt-18-light": !0
-    }, i = this.closeButtonSkin === "blue", l = {
+    }, i = this.closeButtonSkin === "blue", n = {
       "pkt-modal__closeButton": !0,
       [`pkt-modal__closeButton--${this.closeButtonSkin}`]: !0
     };
     return r`
       <dialog
         class=${c(e)}
-        ${m(this.dialogRef)}
+        ${_(this.dialogRef)}
         aria-labelledby="pkt-modal__headingText"
         aria-describedby="pkt-modal__content"
         @close=${(d) => this.close(d, !0)}
@@ -91,7 +91,7 @@ let s = class extends k {
                 ${this.headingText ? r`<h1 id="pkt-modal__headingText" class=${c(t)}>
                       ${this.headingText}
                     </h1>` : r`<div class="pkt-modal__headingText"></div>`}
-                ${this.hideCloseButton ? r`<div class="pkt-modal__noCloseButton"></div>` : r`<div class="${c(l)}">
+                ${this.hideCloseButton ? r`<div class="pkt-modal__noCloseButton"></div>` : r`<div class="${c(n)}">
                       <pkt-button
                         @click=${(d) => this.close(d)}
                         aria-label="close"
@@ -103,13 +103,12 @@ let s = class extends k {
                         Lukk
                       </pkt-button>
                     </div>`}
-              </div>` : f}
+              </div>` : u}
           <div class="pkt-modal__container">
             <div
               id="pkt-modal__content"
               class=${c(o)}
-              ${m(this.defaultSlot)}
-            ></div>
+            >${f(this)}</div>
           </div>
         </div>
       </dialog>
@@ -117,37 +116,37 @@ let s = class extends k {
   }
 };
 a([
-  n({ type: String })
+  l({ type: String })
 ], s.prototype, "headingText", 2);
 a([
-  n({ type: Boolean })
+  l({ type: Boolean })
 ], s.prototype, "removePadding", 2);
 a([
-  n({ type: Boolean })
+  l({ type: Boolean })
 ], s.prototype, "hideCloseButton", 2);
 a([
-  n({ type: Boolean })
+  l({ type: Boolean })
 ], s.prototype, "closeOnBackdropClick", 2);
 a([
-  n({ type: String })
+  l({ type: String })
 ], s.prototype, "closeButtonSkin", 2);
 a([
-  n({ type: String })
+  l({ type: String })
 ], s.prototype, "size", 2);
 a([
-  n({ type: String })
+  l({ type: String })
 ], s.prototype, "variant", 2);
 a([
-  n({ type: String })
+  l({ type: String })
 ], s.prototype, "drawerPosition", 2);
 a([
-  n({ type: Boolean })
+  l({ type: Boolean })
 ], s.prototype, "transparentBackdrop", 2);
 a([
-  g()
+  k()
 ], s.prototype, "_isOpen", 2);
 s = a([
-  v("pkt-modal")
+  m("pkt-modal")
 ], s);
 export {
   s as P

package/dist/pkt-accordion.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./accordionitem-To95GT6b.cjs");exports.PktAccordion=e.PktAccordion;exports.PktAccordionItem=e.PktAccordionItem_default;exports.default=e.PktAccordion;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./accordionitem-D7sWqDM_.cjs");exports.PktAccordion=e.PktAccordion;exports.PktAccordionItem=e.PktAccordionItem_default;exports.default=e.PktAccordion;

package/dist/pkt-accordion.js

@@ -1,5 +1,5 @@
-import { P as r } from "./accordionitem-CHXGzgLv.js";
-import { a as c } from "./accordionitem-CHXGzgLv.js";
+import { P as r } from "./accordionitem-Cj74XruR.js";
+import { a as c } from "./accordionitem-Cj74XruR.js";
 export {
   r as PktAccordion,
   c as PktAccordionItem,

package/dist/pkt-alert.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./alert-BDXWFRcf.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-C95U_RZ0.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-BHSd2Vpj.js";
+import { P as t } from "./alert-ca_hFi-u.js";
 const e = t;
 export {
   t as PktAlert,

package/dist/pkt-button.cjs

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

package/dist/pkt-button.js

@@ -1,4 +1,4 @@
-import { P as t } from "./button-CHUuxLQV.js";
+import { P as t } from "./button-BRovt5nm.js";
 const a = t;
 export {
   t as PktButton,

package/dist/pkt-card.cjs

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

package/dist/pkt-card.js

@@ -1,4 +1,4 @@
-import { P as a } from "./card-CmfUyl_s.js";
+import { P as a } from "./card-DvgCTN4B.js";
 const r = a;
 export {
   a as PktCard,

package/dist/pkt-checkbox.cjs

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

package/dist/pkt-checkbox.js

@@ -1,4 +1,4 @@
-import { P as o } from "./checkbox-D6nltMuc.js";
+import { P as o } from "./checkbox-CbIUMIYt.js";
 const k = o;
 export {
   o as PktCheckbox,

package/dist/pkt-combobox.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./combobox-DX2BLzIm.cjs"),o=e.PktCombobox;Object.defineProperty(exports,"PktCombobox",{enumerable:!0,get:()=>e.PktCombobox});exports.default=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./combobox-TKL44xnV.cjs"),o=e.PktCombobox;Object.defineProperty(exports,"PktCombobox",{enumerable:!0,get:()=>e.PktCombobox});exports.default=o;

package/dist/pkt-combobox.js

@@ -1,4 +1,4 @@
-import { P as o } from "./combobox-TKTemUxN.js";
+import { P as o } from "./combobox-CwW0md6G.js";
 const b = o;
 export {
   o as PktCombobox,

package/dist/pkt-consent.cjs

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

package/dist/pkt-consent.js

@@ -1,4 +1,4 @@
-import { P as t } from "./consent-knPF4PS_.js";
+import { P as t } from "./consent-CgS1L1xF.js";
 const o = t;
 export {
   t as PktConsent,

package/dist/pkt-datepicker.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./datepicker-CPNcXd-o.cjs"),t=e.PktDatepicker;Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>e.PktDatepicker});Object.defineProperty(exports,"PktDatepickerMultiple",{enumerable:!0,get:()=>e.PktDatepickerMultiple});Object.defineProperty(exports,"PktDatepickerRange",{enumerable:!0,get:()=>e.PktDatepickerRange});Object.defineProperty(exports,"PktDatepickerSingle",{enumerable:!0,get:()=>e.PktDatepickerSingle});exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./datepicker-oN9L0Wnm.cjs"),t=e.PktDatepicker;Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>e.PktDatepicker});Object.defineProperty(exports,"PktDatepickerMultiple",{enumerable:!0,get:()=>e.PktDatepickerMultiple});Object.defineProperty(exports,"PktDatepickerRange",{enumerable:!0,get:()=>e.PktDatepickerRange});Object.defineProperty(exports,"PktDatepickerSingle",{enumerable:!0,get:()=>e.PktDatepickerSingle});exports.default=t;

package/dist/pkt-datepicker.js

@@ -1,5 +1,5 @@
-import { a as e } from "./datepicker-MuQYeXhL.js";
-import { b as p, c as i, d as c } from "./datepicker-MuQYeXhL.js";
+import { a as e } from "./datepicker-qRWWzmbo.js";
+import { b as p, c as i, d as c } from "./datepicker-qRWWzmbo.js";
 const a = e;
 export {
   e as PktDatepicker,