@oslokommune/punkt-elements 12.36.2 → 12.37.0

package/CHANGELOG.md

@@ -5,6 +5,24 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [12.37.0](https://github.com/oslokommune/punkt/compare/12.36.2...12.37.0) (2025-05-05)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+* Ny komponent Consent - innstillinger for informasjonskapsler (#2467). 
+
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [12.36.2](https://github.com/oslokommune/punkt/compare/12.36.1...12.36.2) (2025-04-30)
 
 ### ⚠ BREAKING CHANGES

package/dist/consent-Baktq_-1.js

@@ -0,0 +1,161 @@
+import { P as k, x as l, n as a, a as h } from "./element-DjjF_tEh.js";
+import "./button-B6uRE7uT.js";
+import "./icon-Beoxup8E.js";
+const u = {
+  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"
+        }
+      }
+    }
+  }
+}, g = globalThis, p = g.__cookieEvents || {
+  events: {},
+  on(e, n) {
+    this.events[e] || (this.events[e] = []), this.events[e].push(n);
+  },
+  off(e, n) {
+    this.events[e] && (this.events[e] = this.events[e].filter((t) => t !== n));
+  },
+  once(e, n) {
+    const t = (s) => {
+      this.off(e, t), n(s);
+    };
+    this.on(e, t);
+  },
+  emit(e, n) {
+    this.events[e] && this.events[e].forEach((t) => t(n));
+  }
+};
+g.__cookieEvents = p;
+const m = p;
+var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, r = (e, n, t, s) => {
+  for (var o = s > 1 ? void 0 : s ? v(n, t) : n, c = e.length - 1, d; c >= 0; c--)
+    (d = e[c]) && (o = (s ? d(n, t, o) : d(o)) || o);
+  return s && o && f(n, t, o), o;
+};
+let i = class extends k {
+  constructor() {
+    super(), this.hotjarId = null, this.googleAnalyticsId = null, this.triggerType = "button", this.triggerText = null, this.i18nLanguage = "nb";
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.triggerText = this.triggerText || u.i18n[this.i18nLanguage].contentPresentation.buttons.settings, this.googleAnalyticsId && (window.googleAnalyticsId = this.googleAnalyticsId), this.hotjarId && (window.hotjarId = this.hotjarId), m.on("CookieManager.setCookie", (e) => {
+      this.emitCookieConsents(e);
+    });
+  }
+  emitCookieConsents(e) {
+    const t = JSON.parse(e.value).items.reduce((s, o) => (s[o.name] = o.consent, s), {});
+    this.dispatchEvent(
+      new CustomEvent("toggle-consent", {
+        detail: t,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  firstUpdated(e) {
+    if (!document.querySelector("#oslo-consent-script") && window.location.hostname !== "localhost") {
+      window.googleAnalyticsId = this.googleAnalyticsId, window.hotjarId = this.hotjarId;
+      const n = document.createElement("script");
+      n.src = "https://cdn.web.oslo.kommune.no/cb/cb-v1.0.0.js", n.id = "oslo-consent-script", n.onload = () => {
+        this.triggerInit();
+      }, document.head.appendChild(n);
+      const t = document.createElement("link");
+      t.href = "https://cdn.web.oslo.kommune.no/cb/cb-v1.0.0.css", t.type = "text/css", t.rel = "stylesheet", t.id = "oslo-consent-styles", document.head.appendChild(t);
+    }
+  }
+  triggerInit() {
+    window.document.dispatchEvent(
+      new Event("DOMContentLoaded", {
+        bubbles: !0,
+        cancelable: !0
+      })
+    ), window.cookieBanner.cookieConsent.validateConsentCookie().then((e) => {
+      if (e) {
+        const t = { value: window.cookieBanner.cookieConsent.getConsentCookie().items };
+        this.emitCookieConsents(t);
+      }
+    });
+  }
+  openModal(e) {
+    e.preventDefault(), window.cookieBanner.cookieConsent || this.triggerInit(), setTimeout(() => window.cookieBanner.openCookieModal());
+  }
+  render() {
+    return this.triggerType === "link" ? l`<a href="#" class="pkt-link" @click=${this.openModal}>${this.triggerText}</a>` : this.triggerType === "footerlink" ? l`<a href="#" class="pkt-footer__link" @click=${this.openModal}>
+        <pkt-icon name="chevron-right" class="pkt-footer__link-icon"></pkt-icon>
+        ${this.triggerText}
+      </a>` : this.triggerType === "icon" ? l`<pkt-button
+        skin="tertiary"
+        variant="icon-only"
+        iconName="cookie"
+        @click=${this.openModal}
+      >
+        >${this.triggerText}</pkt-button
+      >` : l`<pkt-button @click=${this.openModal}>${this.triggerText}</pkt-button>`;
+  }
+};
+r([
+  a({ type: String })
+], i.prototype, "hotjarId", 2);
+r([
+  a({ type: String })
+], i.prototype, "googleAnalyticsId", 2);
+r([
+  a({ type: String })
+], i.prototype, "triggerType", 2);
+r([
+  a({ type: String })
+], i.prototype, "triggerText", 2);
+r([
+  a({ type: String })
+], i.prototype, "i18nLanguage", 2);
+i = r([
+  h("pkt-consent")
+], i);
+export {
+  i as P
+};

package/dist/consent-jXR0vKAu.cjs

@@ -0,0 +1,11 @@
+"use strict";const s=require("./element-BSypUpzA.cjs");require("./button-BNdVIhUp.cjs");require("./icon-BnKGwYjj.cjs");const g={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"}}}}},c=globalThis,d=c.__cookieEvents||{events:{},on(t,e){this.events[t]||(this.events[t]=[]),this.events[t].push(e)},off(t,e){this.events[t]&&(this.events[t]=this.events[t].filter(n=>n!==e))},once(t,e){const n=o=>{this.off(t,n),e(o)};this.on(t,n)},emit(t,e){this.events[t]&&this.events[t].forEach(n=>n(e))}};c.__cookieEvents=d;const k=d;var p=Object.defineProperty,u=Object.getOwnPropertyDescriptor,a=(t,e,n,o)=>{for(var i=o>1?void 0:o?u(e,n):e,r=t.length-1,l;r>=0;r--)(l=t[r])&&(i=(o?l(e,n,i):l(i))||i);return o&&i&&p(e,n,i),i};exports.PktConsent=class extends s.PktElement{constructor(){super(),this.hotjarId=null,this.googleAnalyticsId=null,this.triggerType="button",this.triggerText=null,this.i18nLanguage="nb"}connectedCallback(){super.connectedCallback(),this.triggerText=this.triggerText||g.i18n[this.i18nLanguage].contentPresentation.buttons.settings,this.googleAnalyticsId&&(window.googleAnalyticsId=this.googleAnalyticsId),this.hotjarId&&(window.hotjarId=this.hotjarId),k.on("CookieManager.setCookie",e=>{this.emitCookieConsents(e)})}emitCookieConsents(e){const o=JSON.parse(e.value).items.reduce((i,r)=>(i[r.name]=r.consent,i),{});this.dispatchEvent(new CustomEvent("toggle-consent",{detail:o,bubbles:!0,composed:!0}))}firstUpdated(e){if(!document.querySelector("#oslo-consent-script")&&window.location.hostname!=="localhost"){window.googleAnalyticsId=this.googleAnalyticsId,window.hotjarId=this.hotjarId;const n=document.createElement("script");n.src="https://cdn.web.oslo.kommune.no/cb/cb-v1.0.0.js",n.id="oslo-consent-script",n.onload=()=>{this.triggerInit()},document.head.appendChild(n);const o=document.createElement("link");o.href="https://cdn.web.oslo.kommune.no/cb/cb-v1.0.0.css",o.type="text/css",o.rel="stylesheet",o.id="oslo-consent-styles",document.head.appendChild(o)}}triggerInit(){window.document.dispatchEvent(new Event("DOMContentLoaded",{bubbles:!0,cancelable:!0})),window.cookieBanner.cookieConsent.validateConsentCookie().then(e=>{if(e){const o={value:window.cookieBanner.cookieConsent.getConsentCookie().items};this.emitCookieConsents(o)}})}openModal(e){e.preventDefault(),window.cookieBanner.cookieConsent||this.triggerInit(),setTimeout(()=>window.cookieBanner.openCookieModal())}render(){return this.triggerType==="link"?s.x`<a href="#" class="pkt-link" @click=${this.openModal}>${this.triggerText}</a>`:this.triggerType==="footerlink"?s.x`<a href="#" class="pkt-footer__link" @click=${this.openModal}>
+        <pkt-icon name="chevron-right" class="pkt-footer__link-icon"></pkt-icon>
+        ${this.triggerText}
+      </a>`:this.triggerType==="icon"?s.x`<pkt-button
+        skin="tertiary"
+        variant="icon-only"
+        iconName="cookie"
+        @click=${this.openModal}
+      >
+        >${this.triggerText}</pkt-button
+      >`:s.x`<pkt-button @click=${this.openModal}>${this.triggerText}</pkt-button>`}};a([s.n({type:String})],exports.PktConsent.prototype,"hotjarId",2);a([s.n({type:String})],exports.PktConsent.prototype,"googleAnalyticsId",2);a([s.n({type:String})],exports.PktConsent.prototype,"triggerType",2);a([s.n({type:String})],exports.PktConsent.prototype,"triggerText",2);a([s.n({type:String})],exports.PktConsent.prototype,"i18nLanguage",2);exports.PktConsent=a([s.t("pkt-consent")],exports.PktConsent);

package/dist/consent.d.ts

@@ -0,0 +1 @@
+export { }

package/dist/index.d.ts

@@ -156,6 +156,13 @@ export declare interface IPktComboboxOption {
     value: string;
 }
 
+export declare interface IPktConsent {
+    hotjarId?: string | null;
+    googleAnalyticsId?: string | null;
+    triggerType?: 'button' | 'link' | 'footerlink' | 'icon' | null;
+    triggerText?: string | null;
+}
+
 export declare interface IPktHeading {
     size?: TPktHeadingSize;
     level?: TPktHeadingLevel;
@@ -552,6 +559,21 @@ export declare class PktComponent extends PktElement {
     private handleGreeting;
 }
 
+export declare class PktConsent extends PktElement<IPktConsent> implements IPktConsent {
+    hotjarId: string | null;
+    googleAnalyticsId: string | null;
+    triggerType: 'button' | 'link' | 'footerlink' | 'icon' | null;
+    triggerText: string | null;
+    i18nLanguage: string;
+    constructor();
+    connectedCallback(): void;
+    emitCookieConsents(consent: any): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    triggerInit(): void;
+    openModal(e: Event): void;
+    render(): TemplateResult<1>;
+}
+
 export declare class PktDatepicker extends PktInputElement {
     /**
      * Element attributes and properties
@@ -889,7 +911,7 @@ export declare class PktModal extends PktElement implements IPktModal {
     private handleBackdropClick;
     private isElementInViewport;
     close: (event: Event, bypassNativeClose?: boolean) => void;
-    showModal: (event: Event) => void;
+    showModal: (event?: Event | null) => void;
     render(): TemplateResult<1>;
 }
 

package/dist/{modal-B-varrJT.js → modal-DIwagdAc.js}

@@ -32,7 +32,7 @@ let l = class extends f {
       o && !this.isElementInViewport(o) && o.scrollIntoView({ behavior: "smooth", block: "nearest" }), this.dispatchEvent(
         new CustomEvent("close", { detail: { origin: t }, bubbles: !0, composed: !0 })
       ), e || (s = this.dialogRef.value) == null || s.close(), this.requestUpdate();
-    }, this.showModal = (t) => {
+    }, this.showModal = (t = null) => {
       var o;
       this._isOpen = !0, (o = this.dialogRef.value) == null || o.showModal();
       const e = document.querySelector(".pkt-modal");

package/dist/modal-OC0efchb.cjs

@@ -0,0 +1,33 @@
+"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-consent.cjs

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

package/dist/pkt-consent.js

@@ -0,0 +1,6 @@
+import { P as t } from "./consent-Baktq_-1.js";
+const o = t;
+export {
+  t as PktConsent,
+  o as default
+};

package/dist/pkt-index.cjs

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const k=require("./alert-DWIElKEZ.cjs"),l=require("./accordionitem-cvsySqgK.cjs"),P=require("./backlink-HHM21crL.cjs"),b=require("./button-BNdVIhUp.cjs"),p=require("./calendar-CYY42kN4.cjs"),m=require("./card-BDcr3PII.cjs"),g=require("./combobox-D9NKnao2.cjs"),h=require("./checkbox-CqatE-eX.cjs"),t=require("./element-BSypUpzA.cjs"),f=require("./pkt-slot-controller-plQxXRvV.cjs"),s=require("./ref-BvbyvXRH.cjs"),y=require("./class-map-DCyaICmy.cjs"),O=require("./datepicker-cR9MtXOh.cjs"),j=require("./helptext-CCnYxYA9.cjs"),q=require("./heading-CP3NaeWE.cjs"),x=require("./icon-BnKGwYjj.cjs"),C=require("./input-wrapper-Cn929YTV.cjs"),v=require("./link-CnibgS3c.cjs"),S=require("./linkcard-DPGX1kb1.cjs"),$=require("./loader-BN4q8pSl.cjs"),L=require("./messagebox-BWJr42m9.cjs"),_=require("./modal-cPcTJriW.cjs"),A=require("./progressbar-DiRfScnB.cjs"),d=require("./radiobutton-CIW0FvT8.cjs"),B=require("./tag-CgkUxA5D.cjs"),T=require("./textarea-qX4Inr1X.cjs"),I=require("./textinput-BlsgLNwW.cjs"),M=require("./select-BJziJVde.cjs");var R=Object.defineProperty,H=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?H(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&R(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new f.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="${y.e(e)}">
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("./alert-DWIElKEZ.cjs"),l=require("./accordionitem-cvsySqgK.cjs"),d=require("./backlink-HHM21crL.cjs"),b=require("./button-BNdVIhUp.cjs"),k=require("./calendar-CYY42kN4.cjs"),m=require("./card-BDcr3PII.cjs"),g=require("./combobox-D9NKnao2.cjs"),h=require("./consent-jXR0vKAu.cjs"),f=require("./checkbox-CqatE-eX.cjs"),t=require("./element-BSypUpzA.cjs"),y=require("./pkt-slot-controller-plQxXRvV.cjs"),s=require("./ref-BvbyvXRH.cjs"),O=require("./class-map-DCyaICmy.cjs"),j=require("./datepicker-cR9MtXOh.cjs"),q=require("./helptext-CCnYxYA9.cjs"),x=require("./heading-CP3NaeWE.cjs"),C=require("./icon-BnKGwYjj.cjs"),v=require("./input-wrapper-Cn929YTV.cjs"),S=require("./link-CnibgS3c.cjs"),$=require("./linkcard-DPGX1kb1.cjs"),L=require("./loader-BN4q8pSl.cjs"),_=require("./messagebox-BWJr42m9.cjs"),A=require("./modal-OC0efchb.cjs"),B=require("./progressbar-DiRfScnB.cjs"),p=require("./radiobutton-CIW0FvT8.cjs"),T=require("./tag-CgkUxA5D.cjs"),I=require("./textarea-qX4Inr1X.cjs"),M=require("./textinput-BlsgLNwW.cjs"),R=require("./select-BJziJVde.cjs");var H=Object.defineProperty,w=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?w(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&H(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new y.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="${O.e(e)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 
         <h2 class="pkt-txt-22">Innhold fra attributter og funksjoner</h2>
@@ -26,4 +26,4 @@
       <ul>
         ${e.map(r=>t.x`<li>${r}</li>`)}
       </ul>
-    `}doStuff(e){return e.reverse()}handleGreeting(){this.dispatchEvent(new CustomEvent("pkt-greeting",{detail:"Hei på deg!"}))}};o([t.n({type:String})],exports.PktComponent.prototype,"string",2);o([t.n({converter:p.csvToArray})],exports.PktComponent.prototype,"strings",2);o([t.n({type:Boolean})],exports.PktComponent.prototype,"darkmode",2);o([t.n({type:Array})],exports.PktComponent.prototype,"_list",2);exports.PktComponent=o([t.t("pkt-component")],exports.PktComponent);Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>k.PktAlert});exports.PktAccordion=l.PktAccordion;exports.PktAccordionItem=l.PktAccordionItem;Object.defineProperty(exports,"PktBackLink",{enumerable:!0,get:()=>P.PktBackLink});Object.defineProperty(exports,"PktButton",{enumerable:!0,get:()=>b.PktButton});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>p.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>m.PktCard});Object.defineProperty(exports,"PktCombobox",{enumerable:!0,get:()=>g.PktCombobox});Object.defineProperty(exports,"PktCheckbox",{enumerable:!0,get:()=>h.PktCheckbox});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>O.PktDatepicker});Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>j.PktHelptext});Object.defineProperty(exports,"PktHeading",{enumerable:!0,get:()=>q.PktHeading});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>x.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>C.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>v.PktLink});Object.defineProperty(exports,"PktLinkCard",{enumerable:!0,get:()=>S.PktLinkCard});Object.defineProperty(exports,"PktLoader",{enumerable:!0,get:()=>$.PktLoader});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>L.PktMessagebox});Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>_.PktModal});Object.defineProperty(exports,"PktProgressbar",{enumerable:!0,get:()=>A.PktProgressbar});Object.defineProperty(exports,"PktRadioButton",{enumerable:!0,get:()=>d.PktRadioButton});Object.defineProperty(exports,"PktRadiobutton",{enumerable:!0,get:()=>d.PktRadioButton});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>B.PktTag});Object.defineProperty(exports,"PktTextarea",{enumerable:!0,get:()=>T.PktTextarea});Object.defineProperty(exports,"PktTextinput",{enumerable:!0,get:()=>I.PktTextinput});Object.defineProperty(exports,"PktSelect",{enumerable:!0,get:()=>M.PktSelect});
+    `}doStuff(e){return e.reverse()}handleGreeting(){this.dispatchEvent(new CustomEvent("pkt-greeting",{detail:"Hei på deg!"}))}};o([t.n({type:String})],exports.PktComponent.prototype,"string",2);o([t.n({converter:k.csvToArray})],exports.PktComponent.prototype,"strings",2);o([t.n({type:Boolean})],exports.PktComponent.prototype,"darkmode",2);o([t.n({type:Array})],exports.PktComponent.prototype,"_list",2);exports.PktComponent=o([t.t("pkt-component")],exports.PktComponent);Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>P.PktAlert});exports.PktAccordion=l.PktAccordion;exports.PktAccordionItem=l.PktAccordionItem;Object.defineProperty(exports,"PktBackLink",{enumerable:!0,get:()=>d.PktBackLink});Object.defineProperty(exports,"PktButton",{enumerable:!0,get:()=>b.PktButton});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>k.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>m.PktCard});Object.defineProperty(exports,"PktCombobox",{enumerable:!0,get:()=>g.PktCombobox});Object.defineProperty(exports,"PktConsent",{enumerable:!0,get:()=>h.PktConsent});Object.defineProperty(exports,"PktCheckbox",{enumerable:!0,get:()=>f.PktCheckbox});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>j.PktDatepicker});Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>q.PktHelptext});Object.defineProperty(exports,"PktHeading",{enumerable:!0,get:()=>x.PktHeading});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>C.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>v.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>S.PktLink});Object.defineProperty(exports,"PktLinkCard",{enumerable:!0,get:()=>$.PktLinkCard});Object.defineProperty(exports,"PktLoader",{enumerable:!0,get:()=>L.PktLoader});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>_.PktMessagebox});Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>A.PktModal});Object.defineProperty(exports,"PktProgressbar",{enumerable:!0,get:()=>B.PktProgressbar});Object.defineProperty(exports,"PktRadioButton",{enumerable:!0,get:()=>p.PktRadioButton});Object.defineProperty(exports,"PktRadiobutton",{enumerable:!0,get:()=>p.PktRadioButton});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>T.PktTag});Object.defineProperty(exports,"PktTextarea",{enumerable:!0,get:()=>I.PktTextarea});Object.defineProperty(exports,"PktTextinput",{enumerable:!0,get:()=>M.PktTextinput});Object.defineProperty(exports,"PktSelect",{enumerable:!0,get:()=>R.PktSelect});

package/dist/pkt-index.js

@@ -6,33 +6,34 @@ import { c as f } from "./calendar-KDcOWD6V.js";
 import { P as D } from "./calendar-KDcOWD6V.js";
 import { P as G } from "./card-B5zTEmH1.js";
 import { P as K } from "./combobox-CELUAZxF.js";
-import { P as U } from "./checkbox-CyYfA2fu.js";
-import { P as h, t as k, x as P, n, a as c } from "./element-DjjF_tEh.js";
+import { P as U } from "./consent-Baktq_-1.js";
+import { P as q } from "./checkbox-CyYfA2fu.js";
+import { P as k, t as h, x as P, n, a as c } from "./element-DjjF_tEh.js";
 import { P as x } from "./pkt-slot-controller-DFrc5O93.js";
 import { e as m, n as d } from "./ref-iIffqQAI.js";
 import { e as u } from "./class-map-KyMqi0fa.js";
-import { P as q } from "./datepicker-CpkTwszH.js";
-import { P as F } from "./helptext-BLHAJ1aC.js";
-import { P as Q } from "./heading-BkC05ohM.js";
-import { P as X } from "./icon-Beoxup8E.js";
-import { P as Z } from "./input-wrapper-CeeNYbDA.js";
-import { P as et } from "./link-BYI8VNGd.js";
-import { P as ot } from "./linkcard--zuuAt_v.js";
-import { P as at } from "./loader-DgIiyYBl.js";
-import { P as it } from "./messagebox-cme5VbUM.js";
-import { P as lt } from "./modal-B-varrJT.js";
-import { P as mt } from "./progressbar-BKt_aj7f.js";
-import { P as ft, P as ht } from "./radiobutton-DtHuz7qn.js";
-import { P as ct } from "./tag-CGnj4c1Z.js";
-import { P as ut } from "./textarea-CiA4IzMs.js";
-import { P as vt } from "./textinput-CrxjZNEq.js";
-import { P as bt } from "./select-DbRLz-7l.js";
+import { P as F } from "./datepicker-CpkTwszH.js";
+import { P as Q } from "./helptext-BLHAJ1aC.js";
+import { P as X } from "./heading-BkC05ohM.js";
+import { P as Z } from "./icon-Beoxup8E.js";
+import { P as et } from "./input-wrapper-CeeNYbDA.js";
+import { P as ot } from "./link-BYI8VNGd.js";
+import { P as at } from "./linkcard--zuuAt_v.js";
+import { P as it } from "./loader-DgIiyYBl.js";
+import { P as lt } from "./messagebox-cme5VbUM.js";
+import { P as mt } from "./modal-DIwagdAc.js";
+import { P as ft } from "./progressbar-BKt_aj7f.js";
+import { P as ht, P as ct } from "./radiobutton-DtHuz7qn.js";
+import { P as ut } from "./tag-CGnj4c1Z.js";
+import { P as vt } from "./textarea-CiA4IzMs.js";
+import { P as bt } from "./textinput-CrxjZNEq.js";
+import { P as $t } from "./select-DbRLz-7l.js";
 var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (t, e, i, a) => {
   for (var r = a > 1 ? void 0 : a ? v(e, i) : e, p = t.length - 1, l; p >= 0; p--)
     (l = t[p]) && (r = (a ? l(e, i, r) : l(r)) || r);
   return a && r && g(e, i, r), r;
 };
-let o = class extends h {
+let o = class extends k {
   constructor() {
     super(), this.string = "", this.strings = [], this.darkmode = !1, this._list = [], this.defaultSlot = m(), this.namedSlot = m(), this.slotController = new x(this, this.defaultSlot, this.namedSlot);
   }
@@ -74,7 +75,7 @@ let o = class extends h {
 
         <h2 class="pkt-txt-22">Knapp som emitter en event</h2>
         <button type="button" @click=${() => this.handleGreeting()}>
-          Si ${k.example.hi}
+          Si ${h.example.hi}
         </button>
       </div>
     `;
@@ -126,24 +127,25 @@ export {
   T as PktButton,
   D as PktCalendar,
   G as PktCard,
-  U as PktCheckbox,
+  q as PktCheckbox,
   K as PktCombobox,
   o as PktComponent,
-  q as PktDatepicker,
-  Q as PktHeading,
-  F as PktHelptext,
-  X as PktIcon,
-  Z as PktInputWrapper,
-  et as PktLink,
-  ot as PktLinkCard,
-  at as PktLoader,
-  it as PktMessagebox,
-  lt as PktModal,
-  mt as PktProgressbar,
-  ft as PktRadioButton,
-  ht as PktRadiobutton,
-  bt as PktSelect,
-  ct as PktTag,
-  ut as PktTextarea,
-  vt as PktTextinput
+  U as PktConsent,
+  F as PktDatepicker,
+  X as PktHeading,
+  Q as PktHelptext,
+  Z as PktIcon,
+  et as PktInputWrapper,
+  ot as PktLink,
+  at as PktLinkCard,
+  it as PktLoader,
+  lt as PktMessagebox,
+  mt as PktModal,
+  ft as PktProgressbar,
+  ht as PktRadioButton,
+  ct as PktRadiobutton,
+  $t as PktSelect,
+  ut as PktTag,
+  vt as PktTextarea,
+  bt as PktTextinput
 };

package/dist/pkt-modal.cjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.36.2",
+  "version": "12.37.0",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -23,14 +23,15 @@
   "dependencies": {
     "@date-fns/tz": "^1.2.0",
     "@lit-labs/router": "^0.1.3",
+    "@oslokommune/cookie-manager": "^1.1.0",
     "date-fns": "^4.1.0",
     "lit": "^3.3.0",
     "react-dom": ">=18.2.22",
     "urlpattern-polyfill": "^10.0.0"
   },
   "devDependencies": {
-    "@oslokommune/punkt-assets": "^12.34.4",
-    "@oslokommune/punkt-css": "^12.36.0",
+    "@oslokommune/punkt-assets": "^12.37.0",
+    "@oslokommune/punkt-css": "^12.37.0",
     "sass": "^1.78.0",
     "typescript": "^5.6.2",
     "vite": "^5.4.18",
@@ -57,5 +58,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "1e3fb63fe624f75fea89a821a5ce09505c62d71a"
+  "gitHead": "119c31d1536757ed597224baa05966cf8bca5ecc"
 }

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/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/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);