@oslokommune/punkt-elements 12.32.0 → 12.32.7

package/dist/linkcard.d.ts

@@ -1,41 +1,41 @@
 export { }
 
 
-/**
- * Pkt Select is a wrapper for the native select element using the pkt-input-wrapper component.
- *
- * The component will prioritize options passed as a prop over options passed as children if both are provided.
- * This is to allow for dynamic options that might change in the case of both children/slot and props are provided.
- *
- * @slot (default) - Options to be rendered as children
- * @prop {TSelectOption[]} options - Options to be rendered as children
- *
- *
- */
 declare global {
     interface HTMLElementTagNameMap {
-        'pkt-select': PktSelect & HTMLSelectElement;
+        'pkt-combobox': PktCombobox & HTMLSelectElement;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'pkt-combobox': PktCombobox & HTMLSelectElement;
+        'pkt-icon': PktIcon;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'pkt-icon': PktIcon;
+        'pkt-listbox': PktListbox;
     }
 }
 
 
+/**
+ * Pkt Select is a wrapper for the native select element using the pkt-input-wrapper component.
+ *
+ * The component will prioritize options passed as a prop over options passed as children if both are provided.
+ * This is to allow for dynamic options that might change in the case of both children/slot and props are provided.
+ *
+ * @slot (default) - Options to be rendered as children
+ * @prop {TSelectOption[]} options - Options to be rendered as children
+ *
+ *
+ */
 declare global {
     interface HTMLElementTagNameMap {
-        'pkt-listbox': PktListbox;
+        'pkt-select': PktSelect & HTMLSelectElement;
     }
 }
 

package/dist/{listbox-BTVnrHWv.cjs → listbox-CK1GmwCE.cjs}

@@ -1,4 +1,4 @@
-"use strict";const s=require("./element-BBo3JZk5.cjs"),p=require("./state-BILlRnrD.cjs"),h=require("./if-defined-C1ZDVzYn.cjs"),u=require("./repeat-kruY8poV.cjs"),c=require("./class-map-D4rXyUxT.cjs"),d=require("./stringutils-CkVRq4jP.cjs");var b=Object.defineProperty,f=Object.getOwnPropertyDescriptor,n=(r,e,t,i)=>{for(var a=i>1?void 0:i?f(e,t):e,o=r.length-1,l;o>=0;o--)(l=r[o])&&(a=(i?l(e,t,a):l(a))||a);return i&&a&&b(e,t,a),a};exports.PktListbox=class extends s.PktElement{constructor(){super(...arguments),this.id=d.uuidish(),this.label=null,this.options=[],this.isOpen=!1,this.disabled=!1,this.includeSearch=!1,this.isMultiSelect=!1,this.allowUserInput=!1,this.maxIsReached=!1,this.customUserInput=null,this.searchPlaceholder=null,this.searchValue=null,this.maxLength=0,this.userMessage=null,this._selectedOptions=0,this._filteredOptions=[]}connectedCallback(){super.connectedCallback(),this.includeSearch&&!this.searchValue&&(this.searchValue=""),this.options.length>0&&this.filterOptions(),this.setAttribute("tabindex","-1"),this.addEventListener("focus",this.focusFirstOrSelectedOption)}updated(e){(e.has("options")||e.has("searchValue"))&&this.filterOptions(),super.updated(e)}attributeChangedCallback(e,t,i){(e==="options"||e==="searchValue"||e==="search-value")&&this.filterOptions(),super.attributeChangedCallback(e,t,i)}render(){return s.x`
+"use strict";const s=require("./element-DJpGVXjq.cjs"),p=require("./state-C4LdlTYO.cjs"),h=require("./if-defined-CoBDkDGb.cjs"),u=require("./repeat-t2oms1o6.cjs"),c=require("./class-map-DvBKxTiW.cjs"),d=require("./stringutils-CkVRq4jP.cjs");var b=Object.defineProperty,f=Object.getOwnPropertyDescriptor,n=(r,e,t,i)=>{for(var a=i>1?void 0:i?f(e,t):e,o=r.length-1,l;o>=0;o--)(l=r[o])&&(a=(i?l(e,t,a):l(a))||a);return i&&a&&b(e,t,a),a};exports.PktListbox=class extends s.PktElement{constructor(){super(...arguments),this.id=d.uuidish(),this.label=null,this.options=[],this.isOpen=!1,this.disabled=!1,this.includeSearch=!1,this.isMultiSelect=!1,this.allowUserInput=!1,this.maxIsReached=!1,this.customUserInput=null,this.searchPlaceholder=null,this.searchValue=null,this.maxLength=0,this.userMessage=null,this._selectedOptions=0,this._filteredOptions=[]}connectedCallback(){super.connectedCallback(),this.includeSearch&&!this.searchValue&&(this.searchValue=""),this.options.length>0&&this.filterOptions(),this.setAttribute("tabindex","-1"),this.addEventListener("focus",this.focusFirstOrSelectedOption)}updated(e){(e.has("options")||e.has("searchValue"))&&this.filterOptions(),super.updated(e)}attributeChangedCallback(e,t,i){(e==="options"||e==="searchValue"||e==="search-value")&&this.filterOptions(),super.attributeChangedCallback(e,t,i)}render(){return s.x`
       <div
         class=${c.e({"pkt-listbox":!0,"pkt-listbox__open":this.isOpen,"pkt-txt-16-light":!0})}
         role="listbox"

package/dist/{listbox-DX-Euxdm.js → listbox-CfJWJDrc.js}

@@ -1,8 +1,8 @@
-import { P as u, x as r, E as p, t as b, n as l, a as f } from "./element-G8JoS0Lj.js";
-import { r as m } from "./state-gfUuUqVg.js";
-import { o as y } from "./if-defined-rCqT8Od1.js";
-import { c as k } from "./repeat-CArTw6-s.js";
-import { e as d } from "./class-map-ChuDQU5C.js";
+import { P as u, x as r, E as p, t as b, n as l, a as f } from "./element-DiqKrDty.js";
+import { r as m } from "./state-CDwPbiQj.js";
+import { o as y } from "./if-defined-DeANa4n5.js";
+import { c as k } from "./repeat-CNLpCTun.js";
+import { e as d } from "./class-map-D4tSZX70.js";
 import { u as x } from "./stringutils-DJjRa8dG.js";
 var O = Object.defineProperty, g = Object.getOwnPropertyDescriptor, a = (e, t, s, o) => {
   for (var n = o > 1 ? void 0 : o ? g(t, s) : t, c = e.length - 1, h; c >= 0; c--)

package/dist/listbox.d.ts

@@ -1,41 +1,41 @@
 export { }
 
 
-/**
- * Pkt Select is a wrapper for the native select element using the pkt-input-wrapper component.
- *
- * The component will prioritize options passed as a prop over options passed as children if both are provided.
- * This is to allow for dynamic options that might change in the case of both children/slot and props are provided.
- *
- * @slot (default) - Options to be rendered as children
- * @prop {TSelectOption[]} options - Options to be rendered as children
- *
- *
- */
 declare global {
     interface HTMLElementTagNameMap {
-        'pkt-select': PktSelect & HTMLSelectElement;
+        'pkt-combobox': PktCombobox & HTMLSelectElement;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'pkt-combobox': PktCombobox & HTMLSelectElement;
+        'pkt-icon': PktIcon;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'pkt-icon': PktIcon;
+        'pkt-listbox': PktListbox;
     }
 }
 
 
+/**
+ * Pkt Select is a wrapper for the native select element using the pkt-input-wrapper component.
+ *
+ * The component will prioritize options passed as a prop over options passed as children if both are provided.
+ * This is to allow for dynamic options that might change in the case of both children/slot and props are provided.
+ *
+ * @slot (default) - Options to be rendered as children
+ * @prop {TSelectOption[]} options - Options to be rendered as children
+ *
+ *
+ */
 declare global {
     interface HTMLElementTagNameMap {
-        'pkt-listbox': PktListbox;
+        'pkt-select': PktSelect & HTMLSelectElement;
     }
 }
 

package/dist/{loader-BudoV0yd.js → loader-DZvOlXzI.js}

@@ -1,9 +1,9 @@
-import { P as u, x as d, E as y, n as o, a as c } from "./element-G8JoS0Lj.js";
-import { e as h } from "./class-map-ChuDQU5C.js";
-import { r as m } from "./state-gfUuUqVg.js";
-import { e as f, n as v } from "./ref-cRTOoM4R.js";
-import { P as _ } from "./pkt-slot-controller-D1DakVrU.js";
-import "./icon-BJnwW0eh.js";
+import { P as u, E as y, x as d, n as o, a as c } from "./element-DiqKrDty.js";
+import { e as h } from "./class-map-D4tSZX70.js";
+import { r as m } from "./state-CDwPbiQj.js";
+import { e as f, n as v } from "./ref-B70YZNXm.js";
+import { P as _ } from "./pkt-slot-controller-BtVLTZb7.js";
+import "./icon-BdY52BIt.js";
 var g = Object.defineProperty, L = Object.getOwnPropertyDescriptor, s = (e, a, l, r) => {
   for (var i = r > 1 ? void 0 : r ? L(a, l) : a, p = e.length - 1, n; p >= 0; p--)
     (n = e[p]) && (i = (r ? n(a, l, i) : n(i)) || i);

package/dist/{loader-Csq0Yd1k.cjs → loader-SDXJp58K.cjs}

@@ -1,4 +1,4 @@
-"use strict";const e=require("./element-BBo3JZk5.cjs"),d=require("./class-map-D4rXyUxT.cjs"),u=require("./state-BILlRnrD.cjs"),p=require("./ref-DsoUUoPU.cjs"),h=require("./pkt-slot-controller-CqNvEpFd.cjs");require("./icon-BTUCDPN5.cjs");var c=Object.defineProperty,y=Object.getOwnPropertyDescriptor,s=(o,t,r,i)=>{for(var a=i>1?void 0:i?y(t,r):t,l=o.length-1,n;l>=0;l--)(n=o[l])&&(a=(i?n(t,r,a):n(a))||a);return i&&a&&c(t,r,a),a};exports.PktLoader=class extends e.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._shouldDisplayLoader=!1,this.slotController=new h.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback(),this._shouldDisplayLoader=this.delay===0,this.delay>0&&this.setupLoader()}updated(t){t.has("delay")&&this.setupLoader()}render(){const t=d.e({"pkt-loader":!0,[`pkt-loader--${this.inline?"inline":"box"}`]:!0,[`pkt-loader--${this.size}`]:!0}),r=d.e({"pkt-contents":!0,"pkt-hide":this.isLoading});return e.x`<div role="status" aria-live="polite" .aria-busy=${this.isLoading} class=${t}>
+"use strict";const e=require("./element-DJpGVXjq.cjs"),d=require("./class-map-DvBKxTiW.cjs"),u=require("./state-C4LdlTYO.cjs"),p=require("./ref-CLqTsViF.cjs"),h=require("./pkt-slot-controller-plQxXRvV.cjs");require("./icon-UtDKPH3R.cjs");var c=Object.defineProperty,y=Object.getOwnPropertyDescriptor,s=(o,t,r,i)=>{for(var a=i>1?void 0:i?y(t,r):t,l=o.length-1,n;l>=0;l--)(n=o[l])&&(a=(i?n(t,r,a):n(a))||a);return i&&a&&c(t,r,a),a};exports.PktLoader=class extends e.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._shouldDisplayLoader=!1,this.slotController=new h.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback(),this._shouldDisplayLoader=this.delay===0,this.delay>0&&this.setupLoader()}updated(t){t.has("delay")&&this.setupLoader()}render(){const t=d.e({"pkt-loader":!0,[`pkt-loader--${this.inline?"inline":"box"}`]:!0,[`pkt-loader--${this.size}`]:!0}),r=d.e({"pkt-contents":!0,"pkt-hide":this.isLoading});return e.x`<div role="status" aria-live="polite" .aria-busy=${this.isLoading} class=${t}>
       ${this.isLoading&&this._shouldDisplayLoader?e.x`<div class="pkt-loader__spinner">
             <pkt-icon
               name=${this.getVariant(this.variant)}

package/dist/loader.d.ts

@@ -1,41 +1,41 @@
 export { }
 
 
-/**
- * Pkt Select is a wrapper for the native select element using the pkt-input-wrapper component.
- *
- * The component will prioritize options passed as a prop over options passed as children if both are provided.
- * This is to allow for dynamic options that might change in the case of both children/slot and props are provided.
- *
- * @slot (default) - Options to be rendered as children
- * @prop {TSelectOption[]} options - Options to be rendered as children
- *
- *
- */
 declare global {
     interface HTMLElementTagNameMap {
-        'pkt-select': PktSelect & HTMLSelectElement;
+        'pkt-combobox': PktCombobox & HTMLSelectElement;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'pkt-combobox': PktCombobox & HTMLSelectElement;
+        'pkt-icon': PktIcon;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'pkt-icon': PktIcon;
+        'pkt-listbox': PktListbox;
     }
 }
 
 
+/**
+ * Pkt Select is a wrapper for the native select element using the pkt-input-wrapper component.
+ *
+ * The component will prioritize options passed as a prop over options passed as children if both are provided.
+ * This is to allow for dynamic options that might change in the case of both children/slot and props are provided.
+ *
+ * @slot (default) - Options to be rendered as children
+ * @prop {TSelectOption[]} options - Options to be rendered as children
+ *
+ *
+ */
 declare global {
     interface HTMLElementTagNameMap {
-        'pkt-listbox': PktListbox;
+        'pkt-select': PktSelect & HTMLSelectElement;
     }
 }
 

package/dist/messagebox-Ce5e1gga.js

@@ -0,0 +1,79 @@
+import { P as b, E as u, x as n, n as p, a as m } from "./element-DiqKrDty.js";
+import { P as h } from "./pkt-slot-controller-BtVLTZb7.js";
+import { e as f, n as k } from "./ref-B70YZNXm.js";
+import { e as _ } from "./class-map-D4tSZX70.js";
+import { r as v } from "./state-CDwPbiQj.js";
+import "./icon-BdY52BIt.js";
+import { u as g } from "./classutils-RQs1k6D9.js";
+const x = {
+  skin: {
+    default: "beige"
+  },
+  compact: {
+    default: !1
+  },
+  closable: {
+    default: !1
+  }
+}, d = {
+  props: x
+};
+var C = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (t, l, a, i) => {
+  for (var s = i > 1 ? void 0 : i ? y(l, a) : l, r = t.length - 1, c; r >= 0; r--)
+    (c = t[r]) && (s = (i ? c(l, a, s) : c(s)) || s);
+  return i && s && C(l, a, s), s;
+};
+let e = class extends b {
+  constructor() {
+    super(), this.defaultSlot = f(), 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 = (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 h(this, this.defaultSlot), this._isClosed = !1;
+  }
+  // Lifecycle
+  updated(t) {
+    super.updated(t), t.has("_isClosed") && g(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=${_(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"
+            >
+              <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" ${k(this.defaultSlot)}></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([
+  v()
+], e.prototype, "_isClosed", 2);
+e = o([
+  m("pkt-messagebox")
+], e);
+export {
+  e as P
+};

package/dist/messagebox-D2_-WZQG.cjs

@@ -0,0 +1,12 @@
+"use strict";const e=require("./element-DJpGVXjq.cjs"),u=require("./pkt-slot-controller-plQxXRvV.cjs"),n=require("./ref-CLqTsViF.cjs"),b=require("./class-map-DvBKxTiW.cjs"),d=require("./state-C4LdlTYO.cjs");require("./icon-UtDKPH3R.cjs");const k=require("./classutils-BwNK82ZQ.cjs"),h={skin:{default:"beige"},compact:{default:!1},closable:{default:!1}},p={props:h};var f=Object.defineProperty,x=Object.getOwnPropertyDescriptor,o=(i,t,a,l)=>{for(var s=l>1?void 0:l?x(t,a):t,r=i.length-1,c;r>=0;r--)(c=i[r])&&(s=(l?c(t,a,s):c(s))||s);return l&&s&&f(t,a,s),s};exports.PktMessagebox=class extends e.PktElement{constructor(){super(),this.defaultSlot=n.e(),this.closable=p.props.closable.default,this.compact=p.props.compact.default,this.title="",this.skin=p.props.skin.default,this._isClosed=!1,this.close=t=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:t},bubbles:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:t},bubbles:!0}))},this.slotController=new u.PktSlotController(this,this.defaultSlot),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.x`<div class=${b.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" ${n.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);

package/dist/messagebox.d.ts

@@ -1,41 +1,41 @@
 export { }
 
 
-/**
- * Pkt Select is a wrapper for the native select element using the pkt-input-wrapper component.
- *
- * The component will prioritize options passed as a prop over options passed as children if both are provided.
- * This is to allow for dynamic options that might change in the case of both children/slot and props are provided.
- *
- * @slot (default) - Options to be rendered as children
- * @prop {TSelectOption[]} options - Options to be rendered as children
- *
- *
- */
 declare global {
     interface HTMLElementTagNameMap {
-        'pkt-select': PktSelect & HTMLSelectElement;
+        'pkt-combobox': PktCombobox & HTMLSelectElement;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'pkt-combobox': PktCombobox & HTMLSelectElement;
+        'pkt-icon': PktIcon;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'pkt-icon': PktIcon;
+        'pkt-listbox': PktListbox;
     }
 }
 
 
+/**
+ * Pkt Select is a wrapper for the native select element using the pkt-input-wrapper component.
+ *
+ * The component will prioritize options passed as a prop over options passed as children if both are provided.
+ * This is to allow for dynamic options that might change in the case of both children/slot and props are provided.
+ *
+ * @slot (default) - Options to be rendered as children
+ * @prop {TSelectOption[]} options - Options to be rendered as children
+ *
+ *
+ */
 declare global {
     interface HTMLElementTagNameMap {
-        'pkt-listbox': PktListbox;
+        'pkt-select': PktSelect & HTMLSelectElement;
     }
 }
 

package/dist/modal-CCtUsYKk.cjs

@@ -0,0 +1,33 @@
+"use strict";const d=require("./class-map-DvBKxTiW.cjs"),i=require("./element-DJpGVXjq.cjs"),h=require("./state-C4LdlTYO.cjs"),k=require("./pkt-slot-controller-plQxXRvV.cjs"),r=require("./ref-CLqTsViF.cjs");require("./icon-UtDKPH3R.cjs");const m={hideCloseButton:{default:!1},closeOnBackdropClick:{default:!1},size:{default:"medium"}},p={props:m};var f=Object.defineProperty,v=Object.getOwnPropertyDescriptor,l=(c,e,t,s)=>{for(var o=s>1?void 0:s?v(e,t):e,n=c.length-1,a;n>=0;n--)(a=c[n])&&(o=(s?a(e,t,o):a(o))||o);return s&&o&&f(e,t,o),o};exports.PktModal=class extends i.PktElement{constructor(){super(),this.headingText="",this.removePadding=!1,this.hideCloseButton=p.props.hideCloseButton.default,this.closeOnBackdropClick=p.props.closeOnBackdropClick.default,this.closeButtonSkin="blue",this.size=p.props.size.default,this.defaultSlot=r.e(),this.dialogRef=r.e(),this._isOpen=!1,this.close=(e,t=!1)=>{var o;if(!this._isOpen)return;this._isOpen=!1,document.body.classList.remove("pkt-modal--open");const s=document.activeElement;s&&!this.isElementInViewport(s)&&s.scrollIntoView({behavior:"smooth",block:"nearest"}),this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0,composed:!0})),t||(o=this.dialogRef.value)==null||o.close(),this.requestUpdate()},this.showModal=e=>{var s;this._isOpen=!0,(s=this.dialogRef.value)==null||s.showModal();const t=document.querySelector(".pkt-modal");requestAnimationFrame(()=>{var o;this.dialogRef.value&&((o=this.dialogRef.value)==null||o.focus())}),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 k.PktSlotController(this,this.defaultSlot),this._isOpen=!1}async connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("click",this.handleBackdropClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("click",this.handleBackdropClick)}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},s={"pkt-modal__content":!0,"pkt-txt-18-light":!0},o=this.closeButtonSkin==="blue",n={"pkt-modal__closeButton":!0,[`pkt-modal__closeButton--${this.closeButtonSkin}`]:!0},a={"pkt-btn":!0,[`pkt-btn--${o?"tertiary":"primary"}`]:!0,"pkt-btn--icon-only":!0,"pkt-btn--medium":!0};return i.x`
+      <dialog
+        class=${d.e(e)}
+        ${r.n(this.dialogRef)}
+        aria-labelledby="pkt-modal__headingText"
+        aria-describedby="pkt-modal__content"
+        @close=${u=>this.close(u,!0)}
+      >
+        <div class="pkt-modal__header">
+          <div class="pkt-modal__header-background"></div>
+          ${this.headingText?i.x`<h1 id="pkt-modal__headingText" class=${d.e(t)}>
+                ${this.headingText}
+              </h1>`:i.E}
+          ${this.hideCloseButton?i.E:i.x`<div class="${d.e(n)}">
+                <pkt-button
+                  @click=${u=>this.close(u)}
+                  class=${d.e(a)}
+                  aria-label="close"
+                  iconname="close"
+                  variant="icon-only"
+                >
+                </pkt-button>
+              </div>`}
+        </div>
+        <div class="pkt-modal__container">
+          <div
+            id="pkt-modal__content"
+            class=${d.e(s)}
+            ${r.n(this.defaultSlot)}
+          ></div>
+        </div>
+      </dialog>
+    `}};l([i.n({type:String,reflect:!0})],exports.PktModal.prototype,"headingText",2);l([i.n({type:Boolean,reflect:!0})],exports.PktModal.prototype,"removePadding",2);l([i.n({type:Boolean,reflect:!0})],exports.PktModal.prototype,"hideCloseButton",2);l([i.n({type:Boolean,reflect:!0})],exports.PktModal.prototype,"closeOnBackdropClick",2);l([i.n({type:String,reflect:!0})],exports.PktModal.prototype,"closeButtonSkin",2);l([i.n({type:String,reflect:!0})],exports.PktModal.prototype,"size",2);l([h.r()],exports.PktModal.prototype,"_isOpen",2);exports.PktModal=l([i.t("pkt-modal")],exports.PktModal);

package/dist/{modal-DnYn2Rlg.js → modal-CdgIOp8Q.js}

@@ -1,91 +1,48 @@
-import { e as c } from "./class-map-ChuDQU5C.js";
-import { P as f, x as p, E as k, n as r, a as g } from "./element-G8JoS0Lj.js";
-import { r as v } from "./state-gfUuUqVg.js";
-import { P as b } from "./pkt-slot-controller-D1DakVrU.js";
-import { e as m, n as h } from "./ref-cRTOoM4R.js";
-import "./icon-BJnwW0eh.js";
-const y = "pkt-modal", _ = !0, C = {
-  "background-click": {
-    description: "Event som trigges når bakgrunnen trykkes på"
-  },
-  close: {
-    description: "Event som trigges når meldingsboksen lukkes"
-  }
-}, B = {
-  headingText: {
-    name: "Heading text",
-    description: "Heading tekst på modalen",
-    type: "string"
-  },
+import { e as c } from "./class-map-D4tSZX70.js";
+import { P as f, E as h, x as p, n as d, a as v } from "./element-DiqKrDty.js";
+import { r as g } from "./state-CDwPbiQj.js";
+import { P as _ } from "./pkt-slot-controller-BtVLTZb7.js";
+import { e as m, n as k } from "./ref-B70YZNXm.js";
+import "./icon-BdY52BIt.js";
+const b = {
   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
   },
-  closeButtonSkin: {
-    name: "Stil på lukkeknappen",
-    description: "Stil på lukkeknappen",
-    type: [
-      "blue",
-      "yellow-filled"
-    ],
-    default: "blue"
-  },
   size: {
-    name: "Størrelse",
-    description: "Størrelsen på modalen",
-    type: [
-      "small",
-      "medium",
-      "large"
-    ],
     default: "medium"
   }
-}, w = {
-  default: {
-    description: "Innholdet i meldingen. Her tilbyr vi støtteklasser for å style 1-3 knapper i modalen."
-  }
 }, u = {
-  name: y,
-  "css-class": "pkt-modal",
-  isElements: _,
-  events: C,
-  props: B,
-  slots: w
+  props: b
 };
-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;
+var y = Object.defineProperty, C = Object.getOwnPropertyDescriptor, n = (t, e, o, s) => {
+  for (var i = s > 1 ? void 0 : s ? C(e, o) : e, r = t.length - 1, a; r >= 0; r--)
+    (a = t[r]) && (i = (s ? a(e, o, i) : a(i)) || i);
+  return s && i && y(e, o, i), i;
 };
-let i = class extends f {
+let l = 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 n;
+      var s;
       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 || (n = this.dialogRef.value) == null || n.close(), this.requestUpdate();
+      ), e || (s = this.dialogRef.value) == null || s.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 n;
-        this.dialogRef.value && ((n = this.dialogRef.value) == null || n.focus());
+        var s;
+        this.dialogRef.value && ((s = this.dialogRef.value) == null || s.focus());
       }), e && document.body.classList.add("pkt-modal--open"), this.dispatchEvent(
         new CustomEvent("showModal", { detail: { origin: t }, bubbles: !0, composed: !0 })
       ), this.requestUpdate();
-    }, this.slotController = new b(this, this.defaultSlot), this._isOpen = !1;
+    }, this.slotController = new _(this, this.defaultSlot), this._isOpen = !1;
   }
   async connectedCallback() {
     super.connectedCallback(), document.addEventListener("keydown", this.handleKeyDown), document.addEventListener("click", this.handleBackdropClick);
@@ -117,19 +74,19 @@ let i = class extends f {
     }, o = {
       "pkt-modal__content": !0,
       "pkt-txt-18-light": !0
-    }, n = this.closeButtonSkin === "blue", s = {
+    }, s = this.closeButtonSkin === "blue", i = {
       "pkt-modal__closeButton": !0,
       [`pkt-modal__closeButton--${this.closeButtonSkin}`]: !0
-    }, d = {
+    }, r = {
       "pkt-btn": !0,
-      [`pkt-btn--${n ? "tertiary" : "primary"}`]: !0,
+      [`pkt-btn--${s ? "tertiary" : "primary"}`]: !0,
       "pkt-btn--icon-only": !0,
       "pkt-btn--medium": !0
     };
     return p`
       <dialog
         class=${c(t)}
-        ${h(this.dialogRef)}
+        ${k(this.dialogRef)}
         aria-labelledby="pkt-modal__headingText"
         aria-describedby="pkt-modal__content"
         @close=${(a) => this.close(a, !0)}
@@ -138,11 +95,11 @@ let i = class extends f {
           <div class="pkt-modal__header-background"></div>
           ${this.headingText ? p`<h1 id="pkt-modal__headingText" class=${c(e)}>
                 ${this.headingText}
-              </h1>` : k}
-          ${this.hideCloseButton ? k : p`<div class="${c(s)}">
+              </h1>` : h}
+          ${this.hideCloseButton ? h : p`<div class="${c(i)}">
                 <pkt-button
                   @click=${(a) => this.close(a)}
-                  class=${c(d)}
+                  class=${c(r)}
                   aria-label="close"
                   iconname="close"
                   variant="icon-only"
@@ -154,37 +111,37 @@ let i = class extends f {
           <div
             id="pkt-modal__content"
             class=${c(o)}
-            ${h(this.defaultSlot)}
+            ${k(this.defaultSlot)}
           ></div>
         </div>
       </dialog>
     `;
   }
 };
-l([
-  r({ type: String, reflect: !0 })
-], i.prototype, "headingText", 2);
-l([
-  r({ type: Boolean, reflect: !0 })
-], i.prototype, "removePadding", 2);
-l([
-  r({ type: Boolean, reflect: !0 })
-], i.prototype, "hideCloseButton", 2);
-l([
-  r({ type: Boolean, reflect: !0 })
-], i.prototype, "closeOnBackdropClick", 2);
-l([
-  r({ type: String, reflect: !0 })
-], i.prototype, "closeButtonSkin", 2);
-l([
-  r({ type: String, reflect: !0 })
-], i.prototype, "size", 2);
-l([
-  v()
-], i.prototype, "_isOpen", 2);
-i = l([
-  g("pkt-modal")
-], i);
+n([
+  d({ type: String, reflect: !0 })
+], l.prototype, "headingText", 2);
+n([
+  d({ type: Boolean, reflect: !0 })
+], l.prototype, "removePadding", 2);
+n([
+  d({ type: Boolean, reflect: !0 })
+], l.prototype, "hideCloseButton", 2);
+n([
+  d({ type: Boolean, reflect: !0 })
+], l.prototype, "closeOnBackdropClick", 2);
+n([
+  d({ type: String, reflect: !0 })
+], l.prototype, "closeButtonSkin", 2);
+n([
+  d({ type: String, reflect: !0 })
+], l.prototype, "size", 2);
+n([
+  g()
+], l.prototype, "_isOpen", 2);
+l = n([
+  v("pkt-modal")
+], l);
 export {
-  i as P
+  l as P
 };