@oslokommune/punkt-elements 12.36.2 → 12.37.1

package/src/components/consent/consent.ts

@@ -0,0 +1,146 @@
+import { customElement, property } from 'lit/decorators.js'
+import { html, PropertyValues } from 'lit'
+import { PktElement } from '@/base-elements/element'
+import { consentStrings } from './strings'
+import { CookieEvents } from '@oslokommune/cookie-manager'
+import '../button'
+import '../icon'
+
+// Extend the Window interface to include googleAnalyticsId
+declare global {
+  interface Window {
+    googleAnalyticsId?: string | null
+    hotjarId?: string | null
+    cookieBanner?: any
+  }
+}
+
+export interface IPktConsent {
+  hotjarId?: string | null
+  googleAnalyticsId?: string | null
+  triggerType?: 'button' | 'link' | 'footerlink' | 'icon' | null
+  triggerText?: string | null
+}
+
+@customElement('pkt-consent')
+export class PktConsent extends PktElement<IPktConsent> implements IPktConsent {
+  @property({ type: String }) hotjarId: string | null = null
+  @property({ type: String }) googleAnalyticsId: string | null = null
+  @property({ type: String }) triggerType: 'button' | 'link' | 'footerlink' | 'icon' | null =
+    'button'
+  @property({ type: String }) triggerText: string | null = null
+  @property({ type: String }) i18nLanguage: string = 'nb'
+
+  constructor() {
+    super()
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.triggerText =
+      this.triggerText ||
+      consentStrings.i18n[this.i18nLanguage as keyof typeof consentStrings.i18n].contentPresentation
+        .buttons.settings
+
+    if (this.googleAnalyticsId) {
+      window.googleAnalyticsId = this.googleAnalyticsId
+    }
+    if (this.hotjarId) {
+      window.hotjarId = this.hotjarId
+    }
+
+    CookieEvents.on('CookieManager.setCookie', (consent: any) => {
+      this.emitCookieConsents(consent)
+    })
+  }
+
+  emitCookieConsents(consent: any) {
+    const consents = JSON.parse(consent.value)
+
+    const consentDetails = consents.items.reduce((acc: any, item: any) => {
+      acc[item.name] = item.consent
+      return acc
+    }, {})
+    this.dispatchEvent(
+      new CustomEvent('toggle-consent', {
+        detail: consentDetails,
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    if (
+      !document.querySelector('#oslo-consent-script') &&
+      window.location.hostname !== 'localhost'
+    ) {
+      window.googleAnalyticsId = this.googleAnalyticsId
+      window.hotjarId = this.hotjarId
+
+      const script = document.createElement('script')
+      script.src = 'https://cdn.web.oslo.kommune.no/cb/cb-v1.0.0.js'
+      script.id = 'oslo-consent-script'
+      script.onload = () => {
+        this.triggerInit()
+      }
+      document.head.appendChild(script)
+
+      const styles = document.createElement('link')
+      styles.href = 'https://cdn.web.oslo.kommune.no/cb/cb-v1.0.0.css'
+      styles.type = 'text/css'
+      styles.rel = 'stylesheet'
+      styles.id = 'oslo-consent-styles'
+      document.head.appendChild(styles)
+    }
+  }
+
+  triggerInit() {
+    // Slight hack since we can't access the right methods to do this “properly”
+    window.document.dispatchEvent(
+      new Event('DOMContentLoaded', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    )
+
+    window.cookieBanner.cookieConsent.validateConsentCookie().then((response: boolean) => {
+      if (response) {
+        const cookie = window.cookieBanner.cookieConsent.getConsentCookie()
+        const consents = { value: cookie.items }
+        this.emitCookieConsents(consents)
+      }
+    })
+  }
+
+  openModal(e: Event) {
+    e.preventDefault()
+    if (!window.cookieBanner.cookieConsent) {
+      this.triggerInit()
+    }
+    setTimeout(() => window.cookieBanner.openCookieModal())
+  }
+
+  render() {
+    if (this.triggerType === 'link') {
+      return html`<a href="#" class="pkt-link" @click=${this.openModal}>${this.triggerText}</a>`
+    }
+    if (this.triggerType === 'footerlink') {
+      return html`<a href="#" class="pkt-footer__link" @click=${this.openModal}>
+        <pkt-icon name="chevron-right" class="pkt-footer__link-icon"></pkt-icon>
+        ${this.triggerText}
+      </a>`
+    }
+    if (this.triggerType === 'icon') {
+      return html`<pkt-button
+        skin="tertiary"
+        variant="icon-only"
+        iconName="cookie"
+        @click=${this.openModal}
+      >
+        >${this.triggerText}</pkt-button
+      >`
+    }
+    return html`<pkt-button @click=${this.openModal}>${this.triggerText}</pkt-button>`
+  }
+}

package/src/components/consent/index.ts

@@ -0,0 +1,6 @@
+import { PktConsent } from './consent'
+import { IPktConsent } from './consent'
+
+export { PktConsent }
+export type { IPktConsent }
+export default PktConsent

package/src/components/consent/strings.ts

@@ -0,0 +1,125 @@
+export const consentStrings = {
+  i18n: {
+    nb: {
+      contentPresentation: {
+        title: 'Oslo kommune bruker informasjonskapsler',
+        description: [
+          'For at nettstedet skal fungere og være trygt, bruker Oslo kommune informasjonskapsler. Noen er teknisk nødvendige, mens andre sikrer ulik funksjonalitet.',
+          'Godtar du alle informasjonskapsler, tillater du også at vi samler inn data om statistikk og brukeradferd. Da hjelper du oss med å lage et bedre nettsted uten at du trenger å dele noe personlig informasjon med oss.',
+        ],
+        buttons: {
+          accept: 'Godta alle',
+          reject: 'Kun nødvendige',
+          settings: 'Innstillinger for informasjonskapsler',
+        },
+      },
+      contentSettings: {
+        title: 'Innstillinger for informasjonskapsler',
+        description: [
+          'Her kan du velge hvilke typer informasjonskapsler du vil tillate. Tillatelsen gjelder i 90 dager. Husk at nødvendige informasjonskapsler ikke kan velges bort.',
+          'Du kan når som helst endre innstillingene og finne mer informasjon nederst på nettstedet under «Innstillinger for informasjonskapsler» og «Personvern og informasjonskapsler».',
+        ],
+        buttons: {
+          back: 'Tilbake',
+          save: 'Lagre innstillinger',
+        },
+      },
+    },
+    en: {
+      contentPresentation: {
+        title: 'Before you visit Oslo kommune ...',
+        description: [
+          'This website uses cookies to make improvements. In this context, we need your consent to measure the traffic on the website in relation to statistics and feedback.',
+          'To read more about what we use cookies for, go to our privacy declaration which you will find at the bottom of our websites.',
+        ],
+        buttons: {
+          accept: 'Yes, I accept',
+          reject: 'Only necessary',
+          settings: 'Go to settings',
+        },
+      },
+      contentSettings: {
+        title: 'Her kan du aktivt velge mellom ulike informasjonskapsler',
+        description: [
+          'For å lese mer om hva vi bruker informasjonskapsler til gå til vår personvernserklering som du finner på våre nettsider',
+        ],
+        buttons: {
+          back: 'Back',
+          save: 'Save settings',
+        },
+      },
+    },
+  },
+  cookies: [
+    {
+      name: 'statistics',
+      defaultValue: null,
+      i18n: {
+        nb: {
+          title: 'Statistikk og analyse',
+          description:
+            'Jeg godtar at Oslo kommune bruker informasjonskapsler til å innhente data om statistikk og brukeradferd.',
+          buttons: {
+            yes: 'Ja',
+            no: 'Nei',
+          },
+        },
+        en: {
+          title: 'Statistics and analytics',
+          description: 'Select your preference for statistics and analytics',
+          buttons: {
+            yes: 'Yes',
+            no: 'No',
+          },
+        },
+      },
+    },
+    {
+      name: 'survey',
+      defaultValue: null,
+      i18n: {
+        nb: {
+          title: 'Skriftlige tilbakemeldinger',
+          description:
+            'Jeg godtar at Oslo kommune bruker informasjonskapsler til å vise responsfelt og registrere tilbakemeldinger.',
+          buttons: {
+            yes: 'Ja',
+            no: 'Nei',
+          },
+        },
+        en: {
+          title: 'Survey',
+          description: 'Select your preference for survey',
+          buttons: {
+            yes: 'Yes',
+            no: 'No',
+          },
+        },
+      },
+    },
+    {
+      name: 'functional',
+      defaultValue: true,
+      i18n: {
+        nb: {
+          title: 'Funksjonelle informasjonskapsler',
+          description:
+            'Jeg godtar at Oslo kommune bruker informasjonskapsler for å gjøre ulike funksjoner på nettstedet mulige (for eksempel skjemaer og barnehagevelger).',
+          buttons: {
+            yes: 'Ja',
+            no: 'Nei',
+          },
+        },
+        en: {
+          title: 'Functional cookies',
+          description:
+            'For the website to function optimally, we recommend that you accept these cookies',
+          buttons: {
+            yes: 'Yes',
+            no: 'No',
+          },
+        },
+      },
+    },
+  ],
+}

package/src/components/datepicker/datepicker.ts

@@ -205,13 +205,21 @@ export class PktDatepicker extends PktInputElement {
         }}
         ?disabled=${this.disabled}
         @keydown=${(e: KeyboardEvent) => {
-          if (e.key === ',' || e.key === 'Enter') {
+          if (e.key === ',') {
             this.inputRef.value?.blur()
           }
           if (e.key === 'Space' || e.key === ' ') {
             e.preventDefault()
             this.toggleCalendar(e)
           }
+          if (e.key === 'Enter') {
+            const form = this.internals.form as HTMLFormElement
+            if (form) {
+              form.requestSubmit()
+            } else {
+              this.inputRef.value?.blur()
+            }
+          }
         }}
         @input=${(e: Event) => {
           this.onInput()
@@ -260,13 +268,21 @@ export class PktDatepicker extends PktInputElement {
           this.showCalendar()
         }}
         @keydown=${(e: KeyboardEvent) => {
-          if (e.key === ',' || e.key === 'Enter') {
+          if (e.key === ',') {
             this.inputRef.value?.blur()
           }
           if (e.key === 'Space' || e.key === ' ') {
             e.preventDefault()
             this.toggleCalendar(e)
           }
+          if (e.key === 'Enter') {
+            const form = this.internals.form as HTMLFormElement
+            if (form) {
+              form.requestSubmit()
+            } else {
+              this.inputRefTo.value?.focus()
+            }
+          }
         }}
         @input=${(e: Event) => {
           this.onInput()
@@ -315,13 +331,21 @@ export class PktDatepicker extends PktInputElement {
           this.showCalendar()
         }}
         @keydown=${(e: KeyboardEvent) => {
-          if (e.key === ',' || e.key === 'Enter') {
+          if (e.key === ',') {
             this.inputRefTo.value?.blur()
           }
           if (e.key === 'Space' || e.key === ' ') {
             e.preventDefault()
             this.toggleCalendar(e)
           }
+          if (e.key === 'Enter') {
+            const form = this.internals.form as HTMLFormElement
+            if (form) {
+              form.requestSubmit()
+            } else {
+              this.inputRefTo.value?.blur()
+            }
+          }
         }}
         @input=${(e: Event) => {
           this.onInput()
@@ -399,7 +423,7 @@ export class PktDatepicker extends PktInputElement {
           }
         }}
         @keydown=${(e: KeyboardEvent) => {
-          if (e.key === ',' || e.key === 'Enter') {
+          if (e.key === ',') {
             e.preventDefault()
             this.addToSelected(e)
           }
@@ -407,6 +431,14 @@ export class PktDatepicker extends PktInputElement {
             e.preventDefault()
             this.toggleCalendar(e)
           }
+          if (e.key === 'Enter') {
+            const form = this.internals.form as HTMLFormElement
+            if (form) {
+              form.requestSubmit()
+            } else {
+              this.inputRef.value?.blur()
+            }
+          }
         }}
         @change=${(e: Event) => {
           e.stopImmediatePropagation()

package/src/components/index.ts

@@ -6,6 +6,7 @@ export { PktButton } from '@/components/button'
 export { PktCalendar } from '@/components/calendar'
 export { PktCard } from '@/components/card'
 export { PktCombobox } from './combobox'
+export { PktConsent } from './consent'
 export { PktCheckbox } from '@/components/checkbox'
 export { PktComponent } from '../base-elements/component-template.js'
 export { PktDatepicker } from '@/components/datepicker/datepicker.js'
@@ -65,3 +66,5 @@ export type { TSelectOption } from '@/components/select'
 export type { IPktBackLink } from '@/components/backlink'
 
 export type { IPktLoader, TPktLoaderVariant } from '@/components/loader'
+
+export type { IPktConsent } from '@/components/consent'

package/src/components/modal/modal.ts

@@ -97,7 +97,7 @@ export class PktModal extends PktElement implements IPktModal {
     this.requestUpdate()
   }
 
-  public showModal = (event: Event) => {
+  public showModal = (event: Event | null = null) => {
     this._isOpen = true
     this.dialogRef.value?.showModal()
     const modal = document.querySelector('.pkt-modal')

package/src/components/textinput/textinput.ts

@@ -152,6 +152,16 @@ export class PktTextinput extends PktInputElement<Props> {
               this.onBlur()
               e.stopImmediatePropagation()
             }}
+            @keydown=${(e: KeyboardEvent) => {
+              if (e.key === 'Enter') {
+                const form = this.internals.form as HTMLFormElement
+                if (form) {
+                  form.requestSubmit()
+                } else {
+                  this.inputRef.value?.blur()
+                }
+              }
+            }}
           />
           ${this.suffix
             ? html`<div class="pkt-input-suffix">

package/dist/input-element-C9ma8cdz.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("./element-BSypUpzA.cjs"),f=require("./state-B5KCNjEd.cjs"),c=require("./stringutils-CkVRq4jP.cjs"),y=require("./input-wrapper-EoSAbU-U.cjs");var m=Object.defineProperty,s=(o,t,r,n)=>{for(var a=void 0,l=o.length-1,h;l>=0;l--)(h=o[l])&&(a=h(t,r,a)||a);return a&&m(t,r,a),a};class i extends e.PktElement{constructor(){super(),this.defaultValue=null,this.disabled=!1,this.readonly=!1,this.required=!1,this.max=null,this.maxlength=null,this.min=null,this.minlength=null,this.ariaDescribedBy=null,this.ariaLabelledby=null,this.name="",this.pattern=null,this.placeholder=null,this.id=c.uuidish(),this.counter=!1,this.hasError=!1,this.inline=!1,this.hasFieldset=!1,this.optionalTag=!1,this.requiredTag=!1,this.skipForwardTestid=!1,this.useWrapper=!0,this.fullwidth=!1,this.counterMaxLength=0,this.errorMessage="",this.helptext="",this.helptextDropdown="",this.helptextDropdownButton=y.specs.props.helptextDropdownButton.default,this.label=null,this.optionalText=e.translations.forms.labels.optional,this.requiredText=e.translations.forms.labels.required,this.dataTestid="",this.touched=!1,this.internals=this.attachInternals()}static get formAssociated(){return!0}manageValidity(t){var r,n,a,l,h,u,p,d;t&&(this.required&&!this.value?this.internals.setValidity({valueMissing:!0},e.translations.forms.messages.required,t):(r=t.validity)!=null&&r.typeMismatch||(n=t.validity)!=null&&n.badInput?this.internals.setValidity({typeMismatch:!0},e.translations.forms.messages.invalid,t):(a=t.validity)!=null&&a.patternMismatch?this.internals.setValidity({patternMismatch:!0},e.translations.forms.messages.invalidPattern,t):(l=t.validity)!=null&&l.tooShort||this.minlength&&this.minlength>0&&this.value.length<this.minlength?this.internals.setValidity({tooShort:!0},e.translations.forms.messages.tooShort,t):(h=t.validity)!=null&&h.tooLong||this.maxlength&&this.maxlength>0&&this.value.length>this.maxlength?this.internals.setValidity({tooLong:!0},e.translations.forms.messages.tooLong,t):(u=t.validity)!=null&&u.rangeUnderflow?this.internals.setValidity({rangeUnderflow:!0},e.translations.forms.messages.rangeUnderflow,t):(p=t.validity)!=null&&p.rangeOverflow?this.internals.setValidity({rangeOverflow:!0},e.translations.forms.messages.rangeOverflow,t):(d=t.validity)!=null&&d.customError?this.internals.setValidity({customError:!0},t.validationMessage,t):this.internals.setValidity({}))}setFormValue(t){if(this.internals)if(Array.isArray(t)){const r=new FormData;t.forEach(n=>{r.append(this.name,n)}),this.internals.setFormValue(r)}else this.internals.setFormValue(t)}valueChecked(t){if(!this.touched)return;const r=this.internals.form||this.closest("form");r&&r.querySelectorAll(`pkt-radiobutton[name=${this.name}], input[type=radio][name=${this.name}]`).forEach(n=>{const a=n;a.name===this.name&&a.value!==this.value&&a.checked&&(a.checked=!1)}),typeof t=="string"?(this.checked=t==="true",this.internals.ariaChecked=t==="true"):typeof t=="boolean"&&(this.checked=t,this.internals.ariaChecked=t),this.checked?(this.internals.setFormValue(this.value||"on",this.value||"on"),this.internals.states.add("--checked")):(this.internals.setFormValue("",""),this.internals.states.delete("--checked")),this.dispatchEvent(new Event("change")),this.dispatchEvent(new CustomEvent("value-change",{detail:this.checked,bubbles:!0,composed:!0})),this.internals.reportValidity()}valueChanged(t,r){(r!==this.value||r!==this._value)&&(typeof t=="string"?((this.multiple||this.range)&&t.includes(",")&&(t=t.split(",")),this.value=t,this._value=Array.isArray(t)?t:[t]):Array.isArray(t)?(this.value=this.multiple||this.range?t:t[0],this._value=t):(this.value="",this._value=[]),(!this.value||this.value.length===0)&&r&&r.length!==0?this.clearInputValue():this.value&&this.value.toString()!==(r==null?void 0:r.toString())&&this.onChange(this.value),this.updateComplete.then(()=>this.requestUpdate()))}clearInputValue(){const t=this.multiple||this.range?[]:"";this.value=t,this.internals.setFormValue(t),this.dispatchEvent(new Event("change")),this.dispatchEvent(new CustomEvent("value-change",{detail:t,bubbles:!0,composed:!0}))}onFocus(){this.dispatchEvent(new FocusEvent("focus"))}onBlur(){this.dispatchEvent(new FocusEvent("blur"))}onInput(){this.dispatchEvent(new InputEvent("input"))}onChange(t){if(!this.touched){this.touched=!0,t&&this.setFormValue(t);return}typeof t!="string"&&!Array.isArray(t)||((this.range||this.multiple)&&!Array.isArray(t)&&t.includes(",")&&(t=t.split(",")),!this.multiple&&!this.range&&Array.isArray(t)&&(t=t[0]),this.setFormValue(t),this.manageValidity(this.inputRef.value),this.inputRefTo&&this.manageValidity(this.inputRefTo.value),this.dispatchEvent(new Event("change")),this.dispatchEvent(new CustomEvent("value-change",{detail:t,bubbles:!0,composed:!0})),this.internals.reportValidity())}updated(t){super.updated(t),t.has("dataTestid")&&this.dataTestid&&this.inputRef.value&&(this.skipForwardTestid?this.hasAttribute("data-testid")||this.setAttribute("data-testid",this.dataTestid):(this.inputRef.value.dataset.testid=this.dataTestid,this.removeAttribute("data-testid")))}firstUpdated(t){if(super.firstUpdated(t),this.value&&this.defaultValue!==null&&(this.defaultValue=this.value),this.defaultValue!==null&&!this.value&&this.valueChanged(this.defaultValue,null),this.defaultChecked&&(this.internals.ariaChecked=!0,this.checked=!0),this.required&&(this.internals.ariaRequired=!0),this.disabled&&(this.internals.ariaDisabled=!0),this.id&&!this.name&&(this.name=this.id),this.checked!==void 0){const r=this.checked===""||this.checked==="true"||this.checked===!0;this.internals.ariaChecked=r,this.internals.setFormValue(r?this.value||"on":"",r?this.value||"on":"")}else this.internals.setFormValue(this.value);this.inputRef&&this.inputRef.value&&(this.inputRef.value.setAttribute("form",""),this.manageValidity(this.inputRef.value)),this.inputRefTo&&this.inputRefTo.value&&(this.inputRefTo.value.setAttribute("form",""),this.manageValidity(this.inputRefTo.value))}}s([e.n()],i.prototype,"defaultValue");s([e.n({type:Boolean,reflect:!0})],i.prototype,"disabled");s([e.n({type:Boolean,reflect:!0})],i.prototype,"readonly");s([e.n({type:Boolean,reflect:!0})],i.prototype,"required");s([e.n({type:Number,reflect:!0})],i.prototype,"max");s([e.n({type:Number,reflect:!0})],i.prototype,"maxlength");s([e.n({type:Number,reflect:!0})],i.prototype,"min");s([e.n({type:Number,reflect:!0})],i.prototype,"minlength");s([e.n({type:String})],i.prototype,"ariaDescribedBy");s([e.n({type:String})],i.prototype,"ariaLabelledby");s([e.n({type:String,reflect:!0})],i.prototype,"name");s([e.n({type:String,reflect:!0})],i.prototype,"pattern");s([e.n({type:String,reflect:!0})],i.prototype,"placeholder");s([e.n({type:String,reflect:!0})],i.prototype,"id");s([e.n({type:Boolean})],i.prototype,"counter");s([e.n({type:Boolean})],i.prototype,"hasError");s([e.n({type:Boolean})],i.prototype,"inline");s([e.n({type:Boolean})],i.prototype,"hasFieldset");s([e.n({type:Boolean})],i.prototype,"optionalTag");s([e.n({type:Boolean})],i.prototype,"requiredTag");s([e.n({type:Boolean})],i.prototype,"skipForwardTestid");s([e.n({type:Boolean,reflect:!1})],i.prototype,"useWrapper");s([e.n({type:Boolean,reflect:!0})],i.prototype,"fullwidth");s([e.n({type:Number})],i.prototype,"counterMaxLength");s([e.n({type:String})],i.prototype,"errorMessage");s([e.n({type:String})],i.prototype,"helptext");s([e.n({type:String})],i.prototype,"helptextDropdown");s([e.n({type:String,reflect:!1})],i.prototype,"helptextDropdownButton");s([e.n({type:String})],i.prototype,"label");s([e.n({type:String,reflect:!1})],i.prototype,"optionalText");s([e.n({type:String,reflect:!1})],i.prototype,"requiredText");s([e.n({type:String,attribute:"data-testid"})],i.prototype,"dataTestid");s([f.r()],i.prototype,"touched");exports.PktInputElement=i;

package/dist/modal-cPcTJriW.cjs

@@ -1,33 +0,0 @@
-"use strict";const d=require("./class-map-DCyaICmy.cjs"),i=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,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);