@oslokommune/punkt-elements 19.14.2 → 19.15.0

package/dist/{timepicker-wenCQ3LT.js → timepicker-CvdI7jDN.js}

@@ -5,7 +5,7 @@ import { n as c } from "./element-with-slot-CVmm0_IE.js";
 import "./icon-Bao96Zb8.js";
 import { t as l } from "./if-defined-O59_I-e-.js";
 import { n as u, t as d } from "./ref-y_5qv9vU.js";
-import { t as f } from "./input-element-CHSaC4Vl.js";
+import { t as f } from "./input-element-mTphzs9b.js";
 import { r as p } from "./input-wrapper-Bb6CZxmg.js";
 //#region ../../shared-utils/timepicker/time-utils.ts
 var m = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && parseInt(e.slice(3), 10) <= 59, h = (e) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "19.14.2",
+  "version": "19.15.0",
   "description": "Komponentbiblioteket til Punkt, designsystem for Oslo kommune",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo kommune",
@@ -84,5 +84,5 @@
   "engines": {
     "node": "^22.19.0 || ^24.0.0 || ^26.0.0"
   },
-  "gitHead": "6d0937b0b2b5c9257079680b17248ad702419c53"
+  "gitHead": "3d719ef8a2e368d08d6111be152f9a6c1b64da1e"
 }

package/src/components/combobox/combobox.selection.test.ts

@@ -302,6 +302,51 @@ describe('PktCombobox', () => {
     })
   })
 
+  describe('Maxlength validity', () => {
+    const mount = async (props: string) => {
+      const container = await createCombobox(`id="test" name="test" label="Test" ${props}`)
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      combobox.options = getDefaultOptions()
+      await combobox.updateComplete
+      return combobox
+    }
+
+    test('is valid when the number of selected options is within maxlength', async () => {
+      const combobox = await mount('multiple maxlength="2"')
+      ;(combobox as any).toggleValue('apple')
+      await combobox.updateComplete
+      ;(combobox as any).toggleValue('banana')
+      await combobox.updateComplete
+
+      expect(combobox['_value']).toEqual(['apple', 'banana'])
+      expect(combobox.internals.validity.tooLong).toBe(false)
+      expect(combobox.internals.validity.valid).toBe(true)
+    })
+
+    test('is too long when more options are selected than maxlength', async () => {
+      const combobox = await mount('multiple maxlength="2"')
+      combobox.value = 'apple,banana,cherry'
+      await combobox.updateComplete
+
+      expect(combobox['_value']).toEqual(['apple', 'banana', 'cherry'])
+      expect(combobox.internals.validity.tooLong).toBe(true)
+    })
+
+    test('is too short when fewer options are selected than minlength', async () => {
+      const combobox = await mount('multiple minlength="2"')
+      ;(combobox as any).toggleValue('banana')
+      await combobox.updateComplete
+
+      expect(combobox.internals.validity.tooShort).toBe(true)
+
+      ;(combobox as any).toggleValue('cherry')
+      await combobox.updateComplete
+
+      expect(combobox.internals.validity.tooShort).toBe(false)
+      expect(combobox.internals.validity.valid).toBe(true)
+    })
+  })
+
   describe('Disabled options', () => {
     test('does not select disabled options', async () => {
       const optionsWithDisabled: IPktComboboxOption[] = [

package/src/components/datepicker/datepicker.selection.test.ts

@@ -110,6 +110,18 @@ describe('PktDatepicker', () => {
       expect(tags.length).toBeLessThanOrEqual(2)
     })
 
+    test('validates maxlength against the number of dates in multiple mode', async () => {
+      const container = await createDatepicker('multiple maxlength="2"')
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      datepicker.value = '2024-06-15,2024-06-20'
+      await datepicker.updateComplete
+
+      expect(datepicker.internals.validity.tooLong).toBe(false)
+      expect(datepicker.internals.validity.valid).toBe(true)
+    })
+
     test('sorts multiple dates chronologically', async () => {
       const unsortedDates = '2024-06-25,2024-06-15,2024-06-20'
       const container = await createDatepicker(`value="${unsortedDates}" multiple`)

package/src/components/modal/modal.test.ts

@@ -0,0 +1,141 @@
+import '@testing-library/jest-dom'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
+import { CustomElementFor } from '../../tests/component-registry'
+import type { IPktModal } from './modal'
+import './modal'
+
+expect.extend(toHaveNoViolations)
+
+export interface ModalTestConfig extends IPktModal, BaseTestConfig {}
+
+export const createModalTest = async (config: ModalTestConfig = {}) => {
+  const { container, element } = await createElementTest<
+    CustomElementFor<'pkt-modal'>,
+    ModalTestConfig
+  >('pkt-modal', config)
+
+  return {
+    container,
+    modal: element,
+    heading: element.querySelector('.pkt-modal__headingText'),
+  }
+}
+
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktModal', () => {
+  describe('heading icon', () => {
+    test('renders no icon by default', async () => {
+      const { heading } = await createModalTest({ headingText: 'Historikk' })
+      expect(heading).not.toHaveClass('pkt-modal__headingText--hasIcon')
+      expect(heading?.querySelector('pkt-icon')).toBeNull()
+    })
+
+    test('renders the icon before the heading text', async () => {
+      const { heading } = await createModalTest({
+        headingText: 'Historikk',
+        headingIconName: 'clock-history',
+      })
+      expect(heading).toHaveClass('pkt-modal__headingText--hasIcon')
+      const icon = heading?.firstElementChild
+      expect(icon?.tagName.toLowerCase()).toBe('pkt-icon')
+      expect(icon).toHaveClass('pkt-modal__headingIcon')
+      expect(icon).toHaveAttribute('name', 'clock-history')
+      expect(heading).toHaveTextContent('Historikk')
+    })
+
+    test('passes headingIconPath to the icon', async () => {
+      const customPath = 'https://custom-cdn.example.com/icons/'
+      const { modal } = await createModalTest({
+        headingText: 'Historikk',
+        headingIconName: 'clock-history',
+        headingIconPath: customPath,
+      })
+      expect(modal.headingIconPath).toBe(customPath)
+      const icon = modal.querySelector('.pkt-modal__headingIcon')
+      expect(icon).toHaveAttribute('path', customPath)
+    })
+
+    test('does not set the path attribute when headingIconPath is not provided', async () => {
+      const { modal } = await createModalTest({
+        headingText: 'Historikk',
+        headingIconName: 'clock-history',
+      })
+      const icon = modal.querySelector('.pkt-modal__headingIcon')
+      expect(icon).not.toHaveAttribute('path')
+    })
+
+    test('does not render the icon without headingText', async () => {
+      const { modal } = await createModalTest({ headingIconName: 'clock-history' })
+      expect(modal.querySelector('.pkt-modal__headingIcon')).toBeNull()
+    })
+
+    test('updates the icon when headingIconName changes', async () => {
+      const { modal } = await createModalTest({
+        headingText: 'Historikk',
+        headingIconName: 'clock-history',
+      })
+      modal.headingIconName = 'user'
+      await modal.updateComplete
+      expect(modal.querySelector('.pkt-modal__headingIcon')).toHaveAttribute('name', 'user')
+
+      modal.headingIconName = undefined
+      await modal.updateComplete
+      expect(modal.querySelector('.pkt-modal__headingIcon')).toBeNull()
+      expect(modal.querySelector('.pkt-modal__headingText')).not.toHaveClass(
+        'pkt-modal__headingText--hasIcon',
+      )
+    })
+
+    test('renders with no wcag errors with axe', async () => {
+      const { container } = await createModalTest({
+        headingText: 'Historikk',
+        headingIconName: 'clock-history',
+      })
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+
+  describe('ids', () => {
+    test('labels and describes the dialog with its own heading and content', async () => {
+      const { modal } = await createModalTest({ headingText: 'Historikk' })
+      const dialog = modal.querySelector('dialog')!
+      const heading = modal.querySelector('h1.pkt-modal__headingText')!
+      const content = modal.querySelector('.pkt-modal__content')!
+      expect(heading.id).toMatch(/^pkt-modal__headingText-/)
+      expect(content.id).toMatch(/^pkt-modal__content-/)
+      expect(dialog).toHaveAttribute('aria-labelledby', heading.id)
+      expect(dialog).toHaveAttribute('aria-describedby', content.id)
+    })
+
+    test('gives each modal on the page unique ids', async () => {
+      const { modal: first } = await createModalTest({ headingText: 'Første' })
+      const { modal: second } = await createModalTest({ headingText: 'Andre' })
+      const firstHeading = first.querySelector('h1')!
+      const secondHeading = second.querySelector('h1')!
+      expect(firstHeading.id).not.toBe(secondHeading.id)
+      expect(first.querySelector('dialog')).toHaveAttribute('aria-labelledby', firstHeading.id)
+      expect(second.querySelector('dialog')).toHaveAttribute('aria-labelledby', secondHeading.id)
+      expect(first.querySelector('dialog')!.getAttribute('aria-describedby')).not.toBe(
+        second.querySelector('dialog')!.getAttribute('aria-describedby'),
+      )
+    })
+
+    test('keeps the ids stable across re-renders', async () => {
+      const { modal } = await createModalTest({ headingText: 'Historikk' })
+      const before = modal.querySelector('h1')!.id
+      modal.headingText = 'Endret'
+      await modal.updateComplete
+      expect(modal.querySelector('h1')!.id).toBe(before)
+    })
+
+    test('omits aria-labelledby without headingText', async () => {
+      const { modal } = await createModalTest()
+      expect(modal.querySelector('dialog')).not.toHaveAttribute('aria-labelledby')
+    })
+  })
+})

package/src/components/modal/modal.ts

@@ -1,4 +1,5 @@
 import { classMap } from 'lit/directives/class-map.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
 import { customElement, property, state } from 'lit/decorators.js'
 import { html, nothing, PropertyValues } from 'lit'
 import { PktElementWithSlot } from '@/base-elements/element-with-slot'
@@ -11,6 +12,7 @@ import {
   setScrollLock,
   type ScrollLockToken,
 } from 'shared-utils/scroll-lock'
+import { uuidish } from 'shared-utils/utils'
 import specs from 'componentSpecs/modal.json'
 import '@/components/icon'
 
@@ -19,6 +21,8 @@ type ModalSize = TPktSize | 'fit-content'
 export interface IPktModal {
   open?: boolean
   headingText?: string
+  headingIconName?: string
+  headingIconPath?: string
   removePadding?: boolean
   hideCloseButton?: boolean
   closeOnBackdropClick?: boolean
@@ -33,6 +37,8 @@ export class PktModal extends PktElementWithSlot implements IPktModal {
   // Public properties
   @property({ type: Boolean, reflect: true }) open?: boolean = false
   @property({ type: String }) headingText?: string = ''
+  @property({ type: String }) headingIconName?: string
+  @property({ type: String }) headingIconPath?: string
   @property({ type: Boolean }) removePadding?: boolean = false
   @property({ type: Boolean }) hideCloseButton?: boolean = specs.props.hideCloseButton.default
   @property({ type: Boolean })
@@ -47,6 +53,10 @@ export class PktModal extends PktElementWithSlot implements IPktModal {
 
   private _scrollLockToken: ScrollLockToken = createScrollLockToken()
 
+  private readonly _idSuffix = uuidish()
+  private readonly _headingId = `pkt-modal__headingText-${this._idSuffix}`
+  private readonly _contentId = `pkt-modal__content-${this._idSuffix}`
+
   @state() _isOpen: boolean = false
 
   constructor() {
@@ -164,8 +174,17 @@ export class PktModal extends PktElementWithSlot implements IPktModal {
     const headingClasses = {
       'pkt-modal__headingText': true,
       'pkt-txt-24': true,
+      'pkt-modal__headingText--hasIcon': !!this.headingIconName,
     }
 
+    const headingIcon = this.headingIconName
+      ? html`<pkt-icon
+          class="pkt-modal__headingIcon"
+          name=${this.headingIconName}
+          path=${ifDefined(this.headingIconPath)}
+        ></pkt-icon>`
+      : nothing
+
     const contentClasses = {
       'pkt-modal__content': true,
       'pkt-txt-18-light': true,
@@ -181,8 +200,8 @@ export class PktModal extends PktElementWithSlot implements IPktModal {
       <dialog
         class=${classMap(classes)}
         ${ref(this.dialogRef)}
-        aria-labelledby=${this.headingText ? 'pkt-modal__headingText' : nothing}
-        aria-describedby="pkt-modal__content"
+        aria-labelledby=${this.headingText ? this._headingId : nothing}
+        aria-describedby=${this._contentId}
         @close=${(event: Event) => this.close(event, true)}
       >
         <div class="pkt-modal__wrapper">
@@ -190,8 +209,8 @@ export class PktModal extends PktElementWithSlot implements IPktModal {
             ? html`<div class="pkt-modal__header">
                 <div class="pkt-modal__header-background"></div>
                 ${this.headingText
-                  ? html`<h1 id="pkt-modal__headingText" class=${classMap(headingClasses)}>
-                      ${this.headingText}
+                  ? html`<h1 id=${this._headingId} class=${classMap(headingClasses)}>
+                      ${headingIcon}${this.headingText}
                     </h1>`
                   : html`<div class="pkt-modal__headingText"></div>`}
                 ${!this.hideCloseButton
@@ -211,7 +230,7 @@ export class PktModal extends PktElementWithSlot implements IPktModal {
               </div>`
             : nothing}
           <div class="pkt-modal__container">
-            <div id="pkt-modal__content" class=${classMap(contentClasses)}>
+            <div id=${this._contentId} class=${classMap(contentClasses)}>
               ${slotContent(this)}
             </div>
           </div>

package/dist/modal-BKeSXrzi.cjs

@@ -1,35 +0,0 @@
-const e=require("./element-C6WTyJFE.cjs"),t=require("./class-map-Bh6toDeV.cjs"),n=require("./element-with-slot-CcJPCLgn.cjs");require("./icon-jPhyZD1z.cjs");const r=require("./ref-CB7e9nMY.cjs"),i=require("./scroll-lock-B46ur0FF.cjs");var a={name:`pkt-modal`,react:`PktModal`,"css-class":`pkt-modal`,isElement:!0,isPureReact:!0,events:{"background-click":{description:`Event som trigges når bakgrunnen trykkes på`},close:{description:`Event som trigges når meldingsboksen lukkes`}},props:{open:{name:`Åpen`,description:`Deklarativ styring av modalens åpen/lukket-tilstand. Kan brukes i stedet for showModal()/close()-metodene.`,type:`boolean`,category:`tech`,default:!1},headingText:{name:`Heading text`,description:`Heading tekst på modalen`,type:`string`,category:`contents`},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`,category:`ui`,default:!1},closeOnBackdropClick:{name:`Lukk modalen når bakgrunnen trykkes på`,description:`Lukk modalen når bakgrunnen trykkes på`,type:`boolean`,category:`tech`,default:!1},closeButtonSkin:{name:`Stil på lukkeknappen`,description:`Stil på lukkeknappen`,type:[`blue`,`yellow-filled`],category:`ui`,default:`blue`},size:{name:`Størrelse`,description:`Størrelsen på modalen`,type:[`small`,`medium`,`large`,`fit-content`],category:`ui`,default:`medium`},variant:{name:`Variant`,description:`Standard dialog eller skuff`,type:[`dialog`,`drawer`],category:`ui`,default:`dialog`},drawerPosition:{name:`Skuffposisjon`,description:`Posisjonen til skuffen`,type:[`left`,`right`],category:`ui`,default:`right`},transparentBackdrop:{name:`Gjennomsiktig bakgrunn`,description:`Bakgrunnen er gjennomsiktig`,type:`boolean`,category:`ui`,default:!1},removePadding:{name:`Fjern padding`,description:`Fjerner paddingen rundt innholdet i modalen`,type:`boolean`,category:`ui`,default:!1}},slots:{default:{description:`Innholdet i meldingen. Her tilbyr vi støtteklasser for å style 1-3 knapper i modalen.`}}},o=class extends n.t{constructor(){super(),this.open=!1,this.headingText=``,this.removePadding=!1,this.hideCloseButton=a.props.hideCloseButton.default,this.closeOnBackdropClick=a.props.closeOnBackdropClick.default,this.closeButtonSkin=`blue`,this.size=a.props.size.default,this.variant=`dialog`,this.drawerPosition=`right`,this.transparentBackdrop=!1,this.dialogRef=r.t(),this._scrollLockToken=i.t(),this._isOpen=!1,this.close=(e,t=!1)=>{if(!this._isOpen)return;this._isOpen=!1,this.open=!1,i.n(this._scrollLockToken,!1);let 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||this.dialogRef.value?.close(),this.requestUpdate()},this.showModal=(e=null)=>{this._isOpen=!0,this.open=!0,this.dialogRef.value?.showModal(),i.n(this._scrollLockToken,!0),this.dispatchEvent(new CustomEvent(`showModal`,{detail:{origin:e},bubbles:!0,composed:!0})),this.requestUpdate()},this._isOpen=!1}async connectedCallback(){super.connectedCallback(),document.addEventListener(`keydown`,this.handleKeyDown.bind(this)),document.addEventListener(`click`,this.handleBackdropClick.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(`keydown`,this.handleKeyDown),document.removeEventListener(`click`,this.handleBackdropClick),i.n(this._scrollLockToken,!1)}updated(e){super.updated(e),e.has(`open`)&&(this.open&&!this._isOpen?this.showModal():!this.open&&this._isOpen&&this.close(new Event(`close`),!1))}async firstUpdated(e){super.firstUpdated(e),this.dialogRef.value&&!window.HTMLDialogElement&&!this.dialogRef.value.showModal&&(`document`in window&&`createElement`in document&&(await Promise.resolve().then(()=>require("./dialog-polyfill.esm-B-g35ove.cjs")).then(e=>e.default)).registerDialog(this.dialogRef.value),this.dialogRef.value.addEventListener(`close`,()=>{this.close(new Event(`close`),!0)}))}handleKeyDown(e){e.key===`Escape`&&this.close(e)}handleBackdropClick(e){this.closeOnBackdropClick&&e.target===this.dialogRef?.value&&this.close(e)}isElementInViewport(e){let 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(){let i={"pkt-modal":!0,"pkt-modal--removePadding":this.removePadding??!1,"pkt-modal--noHeadingText":this.headingText===``||this.headingText===void 0,"pkt-modal--noShadow":this.closeButtonSkin===`yellow-filled`,"pkt-modal--transparentBackdrop":this.transparentBackdrop??!1,[`pkt-modal--${this.size}`]:this.size!==void 0,[`pkt-modal__${this.variant}`]:this.variant!==void 0,[`pkt-modal__drawer--${this.drawerPosition}`]:this.variant===`drawer`},a={"pkt-modal__headingText":!0,"pkt-txt-24":!0},o={"pkt-modal__content":!0,"pkt-txt-18-light":!0},s=this.closeButtonSkin===`blue`,c={"pkt-modal__closeButton":!0,[`pkt-modal__closeButton--${this.closeButtonSkin}`]:!0};return e._`
-      <dialog
-        class=${t.t(i)}
-        ${r.n(this.dialogRef)}
-        aria-labelledby=${this.headingText?`pkt-modal__headingText`:e.h}
-        aria-describedby="pkt-modal__content"
-        @close=${e=>this.close(e,!0)}
-      >
-        <div class="pkt-modal__wrapper">
-          ${this.headingText||!this.hideCloseButton?e._`<div class="pkt-modal__header">
-                <div class="pkt-modal__header-background"></div>
-                ${this.headingText?e._`<h1 id="pkt-modal__headingText" class=${t.t(a)}>
-                      ${this.headingText}
-                    </h1>`:e._`<div class="pkt-modal__headingText"></div>`}
-                ${this.hideCloseButton?e._`<div class="pkt-modal__noCloseButton"></div>`:e._`<div class="${t.t(c)}">
-                      <pkt-button
-                        @click=${e=>this.close(e)}
-                        aria-label=${this.pktStrings.get(`generic`).close}
-                        iconname="close"
-                        variant="icon-only"
-                        size="medium"
-                        skin=${s?`tertiary`:`primary`}
-                      >
-                        ${this.pktStrings.get(`generic`).close}
-                      </pkt-button>
-                    </div>`}
-              </div>`:e.h}
-          <div class="pkt-modal__container">
-            <div id="pkt-modal__content" class=${t.t(o)}>
-              ${n.i(this)}
-            </div>
-          </div>
-        </div>
-      </dialog>
-    `}};e.n([e.u({type:Boolean,reflect:!0})],o.prototype,`open`,void 0),e.n([e.u({type:String})],o.prototype,`headingText`,void 0),e.n([e.u({type:Boolean})],o.prototype,`removePadding`,void 0),e.n([e.u({type:Boolean})],o.prototype,`hideCloseButton`,void 0),e.n([e.u({type:Boolean})],o.prototype,`closeOnBackdropClick`,void 0),e.n([e.u({type:String})],o.prototype,`closeButtonSkin`,void 0),e.n([e.u({type:String})],o.prototype,`size`,void 0),e.n([e.u({type:String})],o.prototype,`variant`,void 0),e.n([e.u({type:String})],o.prototype,`drawerPosition`,void 0),e.n([e.u({type:Boolean})],o.prototype,`transparentBackdrop`,void 0),e.n([e.l()],o.prototype,`_isOpen`,void 0);try{e.d(`pkt-modal`)(o)}catch{console.warn(`Forsøker å definere <pkt-modal>, men den er allerede definert`)}var s=o;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return s}});