@oslokommune/punkt-elements 12.27.0 → 12.27.3

package/dist/alert.d.ts

@@ -1,6 +1,13 @@
 export { }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-icon': PktIcon;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/dist/calendar.d.ts

@@ -1,6 +1,13 @@
 export { }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-icon': PktIcon;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/dist/card.d.ts

@@ -1,6 +1,13 @@
 export { }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-icon': PktIcon;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/dist/datepicker.d.ts

@@ -1,6 +1,13 @@
 export { }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-icon': PktIcon;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/dist/helptext.d.ts

@@ -1,6 +1,13 @@
 export { }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-icon': PktIcon;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/dist/icon.d.ts

@@ -1,6 +1,13 @@
 export { }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-icon': PktIcon;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { PktIconName } from '@oslokommune/punkt-assets/dist/icons/icon';
 import { PropertyValues } from 'lit';
 import { ReactiveController } from 'lit';
 import { ReactiveControllerHost } from 'lit';
@@ -312,13 +313,13 @@ export declare class PktHelptext extends PktElement {
 
 export declare class PktIcon extends PktElement {
     path: string | undefined;
-    name: string;
+    name: PktIconName;
     private icon;
     private _updatedProps;
     connectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, value: string | null): Promise<void>;
     protected updated(_changedProperties: PropertyValues): Promise<void>;
-    protected getIcon(name?: string): Promise<void>;
+    protected getIcon(name?: PktIconName): Promise<void>;
     render(): TemplateResult<1>;
 }
 
@@ -647,6 +648,13 @@ export declare type TTagType = 'button' | 'reset' | 'submit';
 export { }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-icon': PktIcon;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/dist/input-wrapper.d.ts

@@ -1,6 +1,13 @@
 export { }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-icon': PktIcon;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/dist/link.d.ts

@@ -1,6 +1,13 @@
 export { }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-icon': PktIcon;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/dist/linkcard.d.ts

@@ -1,6 +1,13 @@
 export { }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-icon': PktIcon;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/dist/messagebox.d.ts

@@ -1,6 +1,13 @@
 export { }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-icon': PktIcon;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/dist/{modal-PKDnp91S.js → modal-8ATPiGdr.js}

@@ -1,8 +1,8 @@
 import { e as c } from "./class-map-CQzsZCwS.js";
-import { P as f, x as p, E as m, n as a, t as g } from "./element-BKrU5soj.js";
+import { P as f, x as p, E as k, n as d, t as g } from "./element-BKrU5soj.js";
 import { r as v } from "./state-C36ZmZgt.js";
 import { P as b } from "./pkt-slot-controller-Clbye6cM.js";
-import { e as k, n as h } from "./ref-D5qG7OFB.js";
+import { e as m, n as h } from "./ref-D5qG7OFB.js";
 import "./icon-Bsb0MB2h.js";
 const y = "pkt-modal", _ = !0, C = {
   "background-click": {
@@ -48,7 +48,7 @@ const y = "pkt-modal", _ = !0, C = {
     ],
     default: "medium"
   }
-}, E = {
+}, w = {
   default: {
     description: "Innholdet i meldingen. Her tilbyr vi støtteklasser for å style 1-3 knapper i modalen."
   }
@@ -58,92 +58,91 @@ const y = "pkt-modal", _ = !0, C = {
   isElements: _,
   events: C,
   props: B,
-  slots: E
+  slots: w
 };
-var w = Object.defineProperty, S = Object.getOwnPropertyDescriptor, l = (e, t, o, n) => {
-  for (var s = n > 1 ? void 0 : n ? S(t, o) : t, d = e.length - 1, r; d >= 0; d--)
-    (r = e[d]) && (s = (n ? r(t, o, s) : r(s)) || s);
-  return n && s && w(t, o, s), s;
+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;
 };
 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 = k(), this.dialogRef = k(), this._isOpen = !1, this.close = (e, t = !1) => {
+    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;
-      this._isOpen = !1, t || (s = this.dialogRef.value) == null || s.close();
+      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: e }, bubbles: !0, composed: !0 })
-      ), document.querySelector(".pkt-modal") && document.body.classList.remove("pkt-modal--open"), this.requestUpdate();
-    }, this.showModal = (e) => {
+        new CustomEvent("close", { detail: { origin: t }, bubbles: !0, composed: !0 })
+      ), 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 t = document.querySelector(".pkt-modal");
+      const e = document.querySelector(".pkt-modal");
       requestAnimationFrame(() => {
-        var n;
-        this.dialogRef.value && ((n = this.dialogRef.value) == null || n.focus());
-      }), t && document.body.classList.add("pkt-modal--open"), this.dispatchEvent(
-        new CustomEvent("showModal", { detail: { origin: e }, bubbles: !0, composed: !0 })
+        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;
   }
   async connectedCallback() {
-    var e;
-    super.connectedCallback(), document.addEventListener("keydown", this.handleKeyDown.bind(this)), document.addEventListener("click", this.handleBackdropClick.bind(this)), (e = this.dialogRef.value) == null || e.addEventListener("submit", (t) => this.close(t, !0));
+    super.connectedCallback(), document.addEventListener("keydown", this.handleKeyDown), document.addEventListener("click", this.handleBackdropClick);
   }
   disconnectedCallback() {
-    var e;
-    super.disconnectedCallback(), document.removeEventListener("keydown", this.handleKeyDown.bind(this)), document.removeEventListener("click", this.handleBackdropClick.bind(this)), (e = this.dialogRef.value) == null || e.removeEventListener("submit", (t) => this.close(t, !0));
+    super.disconnectedCallback(), document.removeEventListener("keydown", this.handleKeyDown), document.removeEventListener("click", this.handleBackdropClick);
   }
   // P R I V A T E    M E T H O D S
-  handleKeyDown(e) {
-    e.key === "Escape" && this.close(e);
+  handleKeyDown(t) {
+    t.key === "Escape" && this.close(t);
   }
-  handleBackdropClick(e) {
-    var t;
-    this.closeOnBackdropClick && e.target === ((t = this.dialogRef) == null ? void 0 : t.value) && this.close(e);
+  handleBackdropClick(t) {
+    var e;
+    this.closeOnBackdropClick && t.target === ((e = this.dialogRef) == null ? void 0 : e.value) && this.close(t);
   }
-  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);
+  isElementInViewport(t) {
+    const e = t.getBoundingClientRect();
+    return e.top >= 0 && e.left >= 0 && e.bottom <= (window.innerHeight || document.documentElement.clientHeight) && e.right <= (window.innerWidth || document.documentElement.clientWidth);
   }
   render() {
-    const e = {
+    const t = {
       "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 = {
+    }, e = {
       "pkt-modal__headingText": !0,
       "pkt-txt-24": !0
     }, o = {
       "pkt-modal__content": !0,
       "pkt-txt-18-light": !0
-    }, n = this.closeButtonSkin === "blue", s = {
+    }, s = this.closeButtonSkin === "blue", n = {
       "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(e)}
-        aria-modal=${this._isOpen}
+        class=${c(t)}
         ${h(this.dialogRef)}
         aria-labelledby="pkt-modal__headingText"
         aria-describedby="pkt-modal__content"
+        @close=${(a) => this.close(a, !0)}
       >
         <div class="pkt-modal__header">
           <div class="pkt-modal__header-background"></div>
-          ${this.headingText ? p`<h1 id="pkt-modal__headingText" class=${c(t)}>
+          ${this.headingText ? p`<h1 id="pkt-modal__headingText" class=${c(e)}>
                 ${this.headingText}
-              </h1>` : m}
-          ${this.hideCloseButton ? m : p`<div class="${c(s)}">
+              </h1>` : k}
+          ${this.hideCloseButton ? k : p`<div class="${c(n)}">
                 <button
-                  @click=${(r) => this.close(r)}
-                  class=${c(d)}
+                  @click=${(a) => this.close(a)}
+                  class=${c(r)}
                   aria-label="close"
                 >
                   <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
@@ -162,22 +161,22 @@ let i = class extends f {
   }
 };
 l([
-  a({ type: String, reflect: !0 })
+  d({ type: String, reflect: !0 })
 ], i.prototype, "headingText", 2);
 l([
-  a({ type: Boolean, reflect: !0 })
+  d({ type: Boolean, reflect: !0 })
 ], i.prototype, "removePadding", 2);
 l([
-  a({ type: Boolean, reflect: !0 })
+  d({ type: Boolean, reflect: !0 })
 ], i.prototype, "hideCloseButton", 2);
 l([
-  a({ type: Boolean, reflect: !0 })
+  d({ type: Boolean, reflect: !0 })
 ], i.prototype, "closeOnBackdropClick", 2);
 l([
-  a({ type: String, reflect: !0 })
+  d({ type: String, reflect: !0 })
 ], i.prototype, "closeButtonSkin", 2);
 l([
-  a({ type: String, reflect: !0 })
+  d({ type: String, reflect: !0 })
 ], i.prototype, "size", 2);
 l([
   v()

package/dist/modal-KxnVxEio.cjs

@@ -0,0 +1,32 @@
+"use strict";const d=require("./class-map-aeZWY44S.cjs"),s=require("./element-B0UgldHm.cjs"),k=require("./state-CG-binsl.cjs"),m=require("./pkt-slot-controller-Oc32unDk.cjs"),r=require("./ref-DDYBJ4EB.cjs");require("./icon-PWn7rnfg.cjs");const h="pkt-modal",g=!0,f={"background-click":{description:"Event som trigges når bakgrunnen trykkes på"},close:{description:"Event som trigges når meldingsboksen lukkes"}},v={headingText:{name:"Heading text",description:"Heading tekst på modalen",type:"string"},hideCloseButton:{name:"Gjem 'Lukk'-knapp",description:"Gjemmer lukkeknappen. Dersom denne er satt til true, vil ikke lukkeknappen vises, og dermed er det viktig at man tilbyr en annen måte som f.eks. en knapp for å lukke modalen på.",type:"boolean",default:!1},closeOnBackdropClick:{name:"Lukk modalen når bakgrunnen trykkes på",description:"Lukk modalen når bakgrunnen trykkes på",type:"boolean",default:!1},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"}},b={default:{description:"Innholdet i meldingen. Her tilbyr vi støtteklasser for å style 1-3 knapper i modalen."}},u={name:h,"css-class":"pkt-modal",isElements:g,events:f,props:v,slots:b};var y=Object.defineProperty,_=Object.getOwnPropertyDescriptor,l=(c,e,t,n)=>{for(var o=n>1?void 0:n?_(e,t):e,i=c.length-1,a;i>=0;i--)(a=c[i])&&(o=(n?a(e,t,o):a(o))||o);return n&&o&&y(e,t,o),o};exports.PktModal=class extends s.PktElement{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=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 n=document.activeElement;n&&!this.isElementInViewport(n)&&n.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 n;this._isOpen=!0,(n=this.dialogRef.value)==null||n.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 m.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},n={"pkt-modal__content":!0,"pkt-txt-18-light":!0},o=this.closeButtonSkin==="blue",i={"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 s.x`
+      <dialog
+        class=${d.e(e)}
+        ${r.n(this.dialogRef)}
+        aria-labelledby="pkt-modal__headingText"
+        aria-describedby="pkt-modal__content"
+        @close=${p=>this.close(p,!0)}
+      >
+        <div class="pkt-modal__header">
+          <div class="pkt-modal__header-background"></div>
+          ${this.headingText?s.x`<h1 id="pkt-modal__headingText" class=${d.e(t)}>
+                ${this.headingText}
+              </h1>`:s.E}
+          ${this.hideCloseButton?s.E:s.x`<div class="${d.e(i)}">
+                <button
+                  @click=${p=>this.close(p)}
+                  class=${d.e(a)}
+                  aria-label="close"
+                >
+                  <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
+                </button>
+              </div>`}
+        </div>
+        <div class="pkt-modal__container">
+          <div
+            id="pkt-modal__content"
+            class=${d.e(n)}
+            ${r.n(this.defaultSlot)}
+          ></div>
+        </div>
+      </dialog>
+    `}};l([s.n({type:String,reflect:!0})],exports.PktModal.prototype,"headingText",2);l([s.n({type:Boolean,reflect:!0})],exports.PktModal.prototype,"removePadding",2);l([s.n({type:Boolean,reflect:!0})],exports.PktModal.prototype,"hideCloseButton",2);l([s.n({type:Boolean,reflect:!0})],exports.PktModal.prototype,"closeOnBackdropClick",2);l([s.n({type:String,reflect:!0})],exports.PktModal.prototype,"closeButtonSkin",2);l([s.n({type:String,reflect:!0})],exports.PktModal.prototype,"size",2);l([k.r()],exports.PktModal.prototype,"_isOpen",2);exports.PktModal=l([s.t("pkt-modal")],exports.PktModal);

package/dist/modal.d.ts

@@ -1,6 +1,13 @@
 export { }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-icon': PktIcon;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/dist/pkt-index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./alert-uNzcOJR9.cjs"),p=require("./calendar-CPEJ1enc.cjs"),d=require("./card-BaxqXP-k.cjs"),t=require("./element-B0UgldHm.cjs"),P=require("./pkt-slot-controller-Oc32unDk.cjs"),i=require("./ref-DDYBJ4EB.cjs"),k=require("./class-map-aeZWY44S.cjs"),b=require("./datepicker-BC0e34ws.cjs"),g=require("./helptext-xUdEGuNQ.cjs"),m=require("./icon-PWn7rnfg.cjs"),h=require("./input-wrapper-DeCY6nta.cjs"),f=require("./link-I_LKEBVK.cjs"),y=require("./linkcard-ClXGVwdJ.cjs"),v=require("./messagebox-CC3j63Wp.cjs"),x=require("./modal-BkchlKkL.cjs"),C=require("./progressbar-CkaLjQYa.cjs"),O=require("./radiobutton-HmicLshI.cjs"),j=require("./tag-DGywzHJ5.cjs"),q=require("./textarea-WWRAA1LV.cjs"),S=require("./textinput-CE5AzOur.cjs"),$=require("./select-DFlu7Eq6.cjs");var _=Object.defineProperty,T=Object.getOwnPropertyDescriptor,o=(a,e,r,s)=>{for(var n=s>1?void 0:s?T(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&&_(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 P.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 c=require("./alert-uNzcOJR9.cjs"),p=require("./calendar-CPEJ1enc.cjs"),d=require("./card-BaxqXP-k.cjs"),t=require("./element-B0UgldHm.cjs"),P=require("./pkt-slot-controller-Oc32unDk.cjs"),i=require("./ref-DDYBJ4EB.cjs"),k=require("./class-map-aeZWY44S.cjs"),b=require("./datepicker-BC0e34ws.cjs"),g=require("./helptext-xUdEGuNQ.cjs"),m=require("./icon-PWn7rnfg.cjs"),h=require("./input-wrapper-DeCY6nta.cjs"),f=require("./link-I_LKEBVK.cjs"),y=require("./linkcard-ClXGVwdJ.cjs"),v=require("./messagebox-CC3j63Wp.cjs"),x=require("./modal-KxnVxEio.cjs"),C=require("./progressbar-CkaLjQYa.cjs"),O=require("./radiobutton-HmicLshI.cjs"),j=require("./tag-DGywzHJ5.cjs"),q=require("./textarea-WWRAA1LV.cjs"),S=require("./textinput-CE5AzOur.cjs"),$=require("./select-DFlu7Eq6.cjs");var _=Object.defineProperty,T=Object.getOwnPropertyDescriptor,o=(a,e,r,s)=>{for(var n=s>1?void 0:s?T(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&&_(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 P.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="${k.e(e)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 

package/dist/pkt-index.js

@@ -13,7 +13,7 @@ import { P as M } from "./input-wrapper-Df18_PvD.js";
 import { P as N } from "./link-0N9wG5l8.js";
 import { P as W } from "./linkcard-BJeRbpq_.js";
 import { P as z } from "./messagebox-C5M56R8f.js";
-import { P as J } from "./modal-PKDnp91S.js";
+import { P as J } from "./modal-8ATPiGdr.js";
 import { P as V } from "./progressbar-DETyIwXf.js";
 import { P as Y } from "./radiobutton-BhQCBJ0I.js";
 import { P as tt } from "./tag-W9Lf1doW.js";

package/dist/pkt-modal.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./modal-BkchlKkL.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-KxnVxEio.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-PKDnp91S.js";
+import { P as a } from "./modal-8ATPiGdr.js";
 const t = a;
 export {
   a as PktModal,

package/dist/progressbar.d.ts

@@ -1,6 +1,13 @@
 export { }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-icon': PktIcon;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/dist/radiobutton.d.ts

@@ -1,6 +1,13 @@
 export { }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-icon': PktIcon;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/dist/select.d.ts

@@ -1,6 +1,13 @@
 export { }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-icon': PktIcon;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/dist/tag.d.ts

@@ -1,6 +1,13 @@
 export { }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-icon': PktIcon;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/dist/textarea.d.ts

@@ -1,6 +1,13 @@
 export { }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-icon': PktIcon;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/dist/textinput.d.ts

@@ -1,6 +1,13 @@
 export { }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-icon': PktIcon;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.27.0",
+  "version": "12.27.3",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -29,8 +29,8 @@
     "urlpattern-polyfill": "^10.0.0"
   },
   "devDependencies": {
-    "@oslokommune/punkt-assets": "^12.23.0",
-    "@oslokommune/punkt-css": "^12.27.0",
+    "@oslokommune/punkt-assets": "^12.27.1",
+    "@oslokommune/punkt-css": "^12.27.1",
     "sass": "^1.78.0",
     "typescript": "^5.6.2",
     "vite": "^5.4.4",
@@ -57,5 +57,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "3f9b61a0e5d35866d6bc44088e4793798632d0e0"
+  "gitHead": "a022d4e96f1e77e5284d04166f680d6952d3ae1d"
 }

package/src/components/icon/icon.ts

@@ -1,4 +1,5 @@
 import { PktElement } from '@/base-elements/element'
+import { PktIconName } from '@oslokommune/punkt-assets/dist/icons/icon'
 import { html, PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
@@ -12,7 +13,7 @@ const errorSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></
 const dlStatus: { [key: string]: string } = {}
 
 const downloadIconOrGetFromCache = async (
-  name: string,
+  name: PktIconName,
   path: string | undefined,
 ): Promise<string | null> => {
   let i = 0
@@ -55,7 +56,7 @@ export class PktIcon extends PktElement {
   path: string | undefined = window.pktIconPath
 
   @property({ type: String, reflect: true })
-  name: string = ''
+  name: PktIconName = ''
 
   @property({ type: SVGElement })
   private icon: any = unsafeSVG(errorSvg)
@@ -79,7 +80,7 @@ export class PktIcon extends PktElement {
     }
   }
 
-  protected async getIcon(name = '') {
+  protected async getIcon(name: PktIconName = '') {
     if (this._updatedProps.length > 0) {
       if (!this.path) this.path === window.pktIconPath
       this.icon = unsafeSVG(
@@ -97,3 +98,9 @@ export class PktIcon extends PktElement {
     return html`${this.name && this.icon}`
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'pkt-icon': PktIcon
+  }
+}

package/src/components/modal/modal.ts

@@ -43,16 +43,14 @@ export class PktModal extends PktElement implements IPktModal {
 
   async connectedCallback(): Promise<void> {
     super.connectedCallback()
-    document.addEventListener('keydown', this.handleKeyDown.bind(this))
-    document.addEventListener('click', this.handleBackdropClick.bind(this))
-    this.dialogRef.value?.addEventListener('submit', (e) => this.close(e, true))
+    document.addEventListener('keydown', this.handleKeyDown)
+    document.addEventListener('click', this.handleBackdropClick)
   }
 
   disconnectedCallback(): void {
     super.disconnectedCallback()
-    document.removeEventListener('keydown', this.handleKeyDown.bind(this))
-    document.removeEventListener('click', this.handleBackdropClick.bind(this))
-    this.dialogRef.value?.removeEventListener('submit', (e) => this.close(e, true))
+    document.removeEventListener('keydown', this.handleKeyDown)
+    document.removeEventListener('click', this.handleBackdropClick)
   }
 
   // P R I V A T E    M E T H O D S
@@ -80,8 +78,10 @@ export class PktModal extends PktElement implements IPktModal {
 
   // P U B L I C    M E T H O D S
   public close = (event: Event, bypassNativeClose: boolean = false) => {
+    if (!this._isOpen) return
     this._isOpen = false
-    if (!bypassNativeClose) this.dialogRef.value?.close()
+
+    document.body.classList.remove('pkt-modal--open')
 
     // Scroll to the opener element if it's not in the viewport
     const openerElement = document.activeElement as HTMLElement
@@ -92,11 +92,8 @@ export class PktModal extends PktElement implements IPktModal {
     this.dispatchEvent(
       new CustomEvent('close', { detail: { origin: event }, bubbles: true, composed: true }),
     )
+    if (!bypassNativeClose) this.dialogRef.value?.close()
 
-    const modal = document.querySelector('.pkt-modal')
-    if (modal) {
-      document.body.classList.remove('pkt-modal--open')
-    }
     this.requestUpdate()
   }
 
@@ -155,10 +152,10 @@ export class PktModal extends PktElement implements IPktModal {
     return html`
       <dialog
         class=${classMap(classes)}
-        aria-modal=${this._isOpen}
         ${ref(this.dialogRef)}
         aria-labelledby="pkt-modal__headingText"
         aria-describedby="pkt-modal__content"
+        @close=${(event: Event) => this.close(event, true)}
       >
         <div class="pkt-modal__header">
           <div class="pkt-modal__header-background"></div>

package/dist/modal-BkchlKkL.cjs

@@ -1,32 +0,0 @@
-"use strict";const d=require("./class-map-aeZWY44S.cjs"),s=require("./element-B0UgldHm.cjs"),k=require("./state-CG-binsl.cjs"),m=require("./pkt-slot-controller-Oc32unDk.cjs"),r=require("./ref-DDYBJ4EB.cjs");require("./icon-PWn7rnfg.cjs");const h="pkt-modal",g=!0,f={"background-click":{description:"Event som trigges når bakgrunnen trykkes på"},close:{description:"Event som trigges når meldingsboksen lukkes"}},v={headingText:{name:"Heading text",description:"Heading tekst på modalen",type:"string"},hideCloseButton:{name:"Gjem 'Lukk'-knapp",description:"Gjemmer lukkeknappen. Dersom denne er satt til true, vil ikke lukkeknappen vises, og dermed er det viktig at man tilbyr en annen måte som f.eks. en knapp for å lukke modalen på.",type:"boolean",default:!1},closeOnBackdropClick:{name:"Lukk modalen når bakgrunnen trykkes på",description:"Lukk modalen når bakgrunnen trykkes på",type:"boolean",default:!1},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"}},b={default:{description:"Innholdet i meldingen. Her tilbyr vi støtteklasser for å style 1-3 knapper i modalen."}},p={name:h,"css-class":"pkt-modal",isElements:g,events:f,props:v,slots:b};var y=Object.defineProperty,_=Object.getOwnPropertyDescriptor,l=(c,e,t,o)=>{for(var n=o>1?void 0:o?_(e,t):e,i=c.length-1,a;i>=0;i--)(a=c[i])&&(n=(o?a(e,t,n):a(n))||n);return o&&n&&y(e,t,n),n};exports.PktModal=class extends s.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 i;this._isOpen=!1,t||(i=this.dialogRef.value)==null||i.close();const o=document.activeElement;o&&!this.isElementInViewport(o)&&o.scrollIntoView({behavior:"smooth",block:"nearest"}),this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0,composed:!0})),document.querySelector(".pkt-modal")&&document.body.classList.remove("pkt-modal--open"),this.requestUpdate()},this.showModal=e=>{var o;this._isOpen=!0,(o=this.dialogRef.value)==null||o.showModal();const t=document.querySelector(".pkt-modal");requestAnimationFrame(()=>{var n;this.dialogRef.value&&((n=this.dialogRef.value)==null||n.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 m.PktSlotController(this,this.defaultSlot),this._isOpen=!1}async connectedCallback(){var e;super.connectedCallback(),document.addEventListener("keydown",this.handleKeyDown.bind(this)),document.addEventListener("click",this.handleBackdropClick.bind(this)),(e=this.dialogRef.value)==null||e.addEventListener("submit",t=>this.close(t,!0))}disconnectedCallback(){var e;super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeyDown.bind(this)),document.removeEventListener("click",this.handleBackdropClick.bind(this)),(e=this.dialogRef.value)==null||e.removeEventListener("submit",t=>this.close(t,!0))}handleKeyDown(e){e.key==="Escape"&&this.close(e)}handleBackdropClick(e){var t;this.closeOnBackdropClick&&e.target===((t=this.dialogRef)==null?void 0:t.value)&&this.close(e)}isElementInViewport(e){const t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}render(){const e={"pkt-modal":!0,"pkt-modal--removePadding":this.removePadding??!1,"pkt-modal--noHeadingText":this.headingText===""||this.headingText===void 0,[`pkt-modal--${this.size}`]:this.size!==void 0},t={"pkt-modal__headingText":!0,"pkt-txt-24":!0},o={"pkt-modal__content":!0,"pkt-txt-18-light":!0},n=this.closeButtonSkin==="blue",i={"pkt-modal__closeButton":!0,[`pkt-modal__closeButton--${this.closeButtonSkin}`]:!0},a={"pkt-btn":!0,[`pkt-btn--${n?"tertiary":"primary"}`]:!0,"pkt-btn--icon-only":!0,"pkt-btn--medium":!0};return s.x`
-      <dialog
-        class=${d.e(e)}
-        aria-modal=${this._isOpen}
-        ${r.n(this.dialogRef)}
-        aria-labelledby="pkt-modal__headingText"
-        aria-describedby="pkt-modal__content"
-      >
-        <div class="pkt-modal__header">
-          <div class="pkt-modal__header-background"></div>
-          ${this.headingText?s.x`<h1 id="pkt-modal__headingText" class=${d.e(t)}>
-                ${this.headingText}
-              </h1>`:s.E}
-          ${this.hideCloseButton?s.E:s.x`<div class="${d.e(i)}">
-                <button
-                  @click=${u=>this.close(u)}
-                  class=${d.e(a)}
-                  aria-label="close"
-                >
-                  <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
-                </button>
-              </div>`}
-        </div>
-        <div class="pkt-modal__container">
-          <div
-            id="pkt-modal__content"
-            class=${d.e(o)}
-            ${r.n(this.defaultSlot)}
-          ></div>
-        </div>
-      </dialog>
-    `}};l([s.n({type:String,reflect:!0})],exports.PktModal.prototype,"headingText",2);l([s.n({type:Boolean,reflect:!0})],exports.PktModal.prototype,"removePadding",2);l([s.n({type:Boolean,reflect:!0})],exports.PktModal.prototype,"hideCloseButton",2);l([s.n({type:Boolean,reflect:!0})],exports.PktModal.prototype,"closeOnBackdropClick",2);l([s.n({type:String,reflect:!0})],exports.PktModal.prototype,"closeButtonSkin",2);l([s.n({type:String,reflect:!0})],exports.PktModal.prototype,"size",2);l([k.r()],exports.PktModal.prototype,"_isOpen",2);exports.PktModal=l([s.t("pkt-modal")],exports.PktModal);