@oslokommune/punkt-elements 12.37.1 → 12.37.2

package/src/components/consent/consent.ts

@@ -73,7 +73,7 @@ export class PktConsent extends PktElement<IPktConsent> implements IPktConsent {
   protected firstUpdated(_changedProperties: PropertyValues): void {
     if (
       !document.querySelector('#oslo-consent-script') &&
-      window.location.hostname !== 'localhost'
+      window.location.hostname.toLowerCase().includes('oslo.kommune.no')
     ) {
       window.googleAnalyticsId = this.googleAnalyticsId
       window.hotjarId = this.hotjarId

package/src/components/modal/modal.ts

@@ -1,6 +1,6 @@
 import { classMap } from 'lit/directives/class-map.js'
 import { customElement, property, state } from 'lit/decorators.js'
-import { html, nothing } from 'lit'
+import { html, nothing, PropertyValues } from 'lit'
 import { PktElement } from '@/base-elements/element'
 import { PktSlotController } from '@/controllers/pkt-slot-controller'
 import { ref } from 'lit/directives/ref.js'
@@ -9,7 +9,6 @@ import { TPktSize } from '@/types/size'
 import specs from 'componentSpecs/modal.json'
 import '@/components/icon'
 
-// TODO: Exchange <button> here with <pkt-button> when it is available in pkt-elements
 export interface IPktModal {
   headingText?: string
   removePadding?: boolean
@@ -53,6 +52,19 @@ export class PktModal extends PktElement implements IPktModal {
     document.removeEventListener('click', this.handleBackdropClick)
   }
 
+  protected async firstUpdated(_changedProperties: PropertyValues): Promise<void> {
+    super.firstUpdated(_changedProperties)
+    if (this.dialogRef.value) {
+      if ('document' in window && 'createElement' in document) {
+        const dialogPolyfill = await import('dialog-polyfill').then((module) => module.default)
+        dialogPolyfill.registerDialog(this.dialogRef.value)
+      }
+      this.dialogRef.value.addEventListener('close', () => {
+        this.close(new Event('close'), true)
+      })
+    }
+  }
+
   // P R I V A T E    M E T H O D S
   private handleKeyDown(event: KeyboardEvent) {
     if (event.key === 'Escape') {

package/dist/modal-OC0efchb.cjs

@@ -1,33 +0,0 @@
-"use strict";const d=require("./class-map-DCyaICmy.cjs"),l=require("./element-BSypUpzA.cjs"),h=require("./state-B5KCNjEd.cjs"),k=require("./pkt-slot-controller-plQxXRvV.cjs"),r=require("./ref-BvbyvXRH.cjs");require("./icon-BnKGwYjj.cjs");const m={hideCloseButton:{default:!1},closeOnBackdropClick:{default:!1},size:{default:"medium"}},p={props:m};var f=Object.defineProperty,v=Object.getOwnPropertyDescriptor,i=(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 l.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=null)=>{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 l.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?l.x`<h1 id="pkt-modal__headingText" class=${d.e(t)}>
-                ${this.headingText}
-              </h1>`:l.E}
-          ${this.hideCloseButton?l.E:l.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>
-    `}};i([l.n({type:String,reflect:!0})],exports.PktModal.prototype,"headingText",2);i([l.n({type:Boolean,reflect:!0})],exports.PktModal.prototype,"removePadding",2);i([l.n({type:Boolean,reflect:!0})],exports.PktModal.prototype,"hideCloseButton",2);i([l.n({type:Boolean,reflect:!0})],exports.PktModal.prototype,"closeOnBackdropClick",2);i([l.n({type:String,reflect:!0})],exports.PktModal.prototype,"closeButtonSkin",2);i([l.n({type:String,reflect:!0})],exports.PktModal.prototype,"size",2);i([h.r()],exports.PktModal.prototype,"_isOpen",2);exports.PktModal=i([l.t("pkt-modal")],exports.PktModal);

package/dist/pkt-slot-controller-plQxXRvV.cjs

@@ -1 +0,0 @@
-"use strict";function a(i,s){return s.some(t=>t.value===i)}function n(i){return typeof i.hasAttribute=="function"&&i.hasAttribute("data-skip")}function r(i){return i.nodeName==="OPTION"||i.nodeName==="DATA"}function u(i,s){return i.nodeType===Node.ELEMENT_NODE&&!a(i,s)}function d(i){var s;return i.nodeType===Node.TEXT_NODE&&((s=i.nodeValue)==null?void 0:s.trim())!==""}class f{constructor(s,...t){this.nodes=[],this.filledSlots=new Set,this.skipOptions=!1,this.updatingSlots=!1,this.host=s,this.host.addController(this),this.slots=t,this.nodes=[],this.observer=new MutationObserver(o=>this.handleMutations(o)),this.contentObserver=new MutationObserver(o=>this.handleSlotMutations(o))}hostConnected(){this.updateNodes(),this.observer.observe(this.host,{childList:!0}),this.contentObserver.observe(this.host,{childList:!0,subtree:!0})}hostDisconnected(){this.observer.disconnect(),this.contentObserver.disconnect()}hostUpdated(){this.updateSlots()}updateNodes(){this.nodes=[],Array.from(this.host.childNodes).forEach(t=>{n(t)||r(t)&&this.skipOptions||(!a(t,this.slots)||d(t))&&this.nodes.push(t)})}updateSlots(){if(this.updatingSlots)return;this.updatingSlots=!0;const s=new Set;this.slots.forEach(t=>{if(!t.value)return;const o=t.value.getAttribute("name"),h=this.nodes.flatMap(l=>d(l)||l.getAttribute&&l.getAttribute("slot")==o&&!n(l)?l:[]).filter(l=>t.value&&!t.value.contains(l)&&!l.contains(t.value));if(h.length>0)if(s.add(o),typeof t.value.replaceChildren!="function"){for(;t.value.firstChild;)t.value.removeChild(t.value.firstChild);t.value.append(...h)}else t.value.replaceChildren(...h)}),(this.filledSlots.size!==s.size||![...this.filledSlots].every(t=>s.has(t)))&&(this.filledSlots=s,this.host.requestUpdate()),this.updatingSlots=!1}handleMutations(s){let t=!1;s.forEach(o=>{o.type==="childList"&&(o.addedNodes.forEach(e=>{n(e)||r(e)&&this.skipOptions||(u(e,this.slots)||d(e))&&(this.nodes.push(e),t=!0)}),o.removedNodes.forEach(e=>{n(e)||r(e)&&this.skipOptions||(this.nodes=this.nodes.filter(h=>h!==e),t=!0)}))}),t&&this.updateSlots()}handleSlotMutations(s){let t=!1;s.forEach(o=>{const e=o.target.parentElement;if(e!=null&&e.hasAttribute("slot")){const h=e.getAttribute("slot"),l=e.hasChildNodes();l&&!this.filledSlots.has(h)?(this.filledSlots.add(h),t=!0):!l&&this.filledSlots.has(h)&&(this.filledSlots.delete(h),t=!0)}}),t&&typeof this.host.updateSlots=="function"&&this.host.updateSlots(this.filledSlots)}}exports.PktSlotController=f;exports.isOptionElement=r;