@oslokommune/punkt-elements 13.4.2 → 13.5.0

package/dist/pkt-index.js

@@ -2,8 +2,8 @@ import { P as A } from "./alert-B07oUpkq.js";
 import { P as B, a as E } from "./accordionitem-C9T3nlM0.js";
 import { P as O } from "./backlink-C2jbzu0U.js";
 import { P as T } from "./button-DhispFOY.js";
-import { c as f } from "./calendar-DevQhOup.js";
-import { P as D } from "./calendar-DevQhOup.js";
+import { c as f } from "./calendar-CJSxvwAq.js";
+import { P as D } from "./calendar-CJSxvwAq.js";
 import { P as G } from "./card-Dtw26f7i.js";
 import { P as K } from "./combobox-yE4aYhTi.js";
 import { P as U } from "./consent-BpcQFvbi.js";
@@ -12,7 +12,7 @@ import { P as k, t as h, x as P, n, a as c } from "./element-CgEWt74-.js";
 import { P as x } from "./pkt-slot-controller-BPGj-LC5.js";
 import { e as m, n as d } from "./ref-BBYSqgeW.js";
 import { e as u } from "./class-map-BpTj9gtz.js";
-import { P as F } from "./datepicker-CYOn3tRm.js";
+import { P as F } from "./datepicker-BJKJBoy_.js";
 import { P as Q } from "./helptext-B7eI0iBQ.js";
 import { P as X } from "./heading-D6jXE_Mz.js";
 import { P as Z } from "./icon-CC1js8eR.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "13.4.2",
+  "version": "13.5.0",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -37,7 +37,7 @@
   "devDependencies": {
     "@babel/preset-env": "^7.28.3",
     "@oslokommune/punkt-assets": "^13.3.1",
-    "@oslokommune/punkt-css": "^13.3.1",
+    "@oslokommune/punkt-css": "^13.5.0",
     "@testing-library/jest-dom": "^6.6.3",
     "jest": "^29.7.0",
     "jest-axe": "^9.0.0",
@@ -69,5 +69,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "b8dc1a2d10d756fb0fc6babb0f3b03b4d8eea95a"
+  "gitHead": "5838a97cda7abfca773d36181a7ebf47343880e4"
 }

package/src/components/calendar/calendar.accessibility.test.ts

@@ -0,0 +1,111 @@
+import '@testing-library/jest-dom'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { fireEvent } from '@testing-library/dom'
+
+expect.extend(toHaveNoViolations)
+
+import './calendar'
+import { PktCalendar } from './calendar'
+
+const waitForCustomElements = async () => {
+  await customElements.whenDefined('pkt-calendar')
+}
+
+// Helper function to create calendar markup
+const createCalendar = async (calendarProps = '') => {
+  const container = document.createElement('div')
+  container.innerHTML = `
+    <pkt-calendar ${calendarProps}></pkt-calendar>
+  `
+  document.body.appendChild(container)
+  await waitForCustomElements()
+  return container
+}
+
+// Cleanup after each test
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktCalendar', () => {
+  describe('Accessibility', () => {
+    test('has no accessibility violations', async () => {
+      const container = await createCalendar('withcontrols weeknumbers')
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      const results = await axe(calendar)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('has proper ARIA attributes', async () => {
+      const container = await createCalendar('withcontrols')
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      const calendarTable = calendar.querySelector('.pkt-calendar__body')
+      expect(calendarTable).toHaveAttribute('role', 'grid')
+
+      const dateButtons = calendar.querySelectorAll('.pkt-calendar__date')
+      dateButtons.forEach((button) => {
+        expect(button).toHaveAttribute('aria-pressed')
+        expect(button).toHaveAttribute('tabindex')
+      })
+    })
+
+    test('navigation buttons have proper labels', async () => {
+      const container = await createCalendar('withcontrols')
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      const prevButton = calendar.querySelector('.pkt-calendar__prev-month')
+      const nextButton = calendar.querySelector('.pkt-calendar__next-month')
+
+      expect(prevButton).toHaveAttribute('aria-label')
+      expect(nextButton).toHaveAttribute('aria-label')
+    })
+
+    test('date buttons have proper accessible names', async () => {
+      const container = await createCalendar()
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      const dateButtons = calendar.querySelectorAll('.pkt-calendar__date')
+      dateButtons.forEach((button) => {
+        expect(button).toHaveAttribute('aria-label')
+        expect(button.getAttribute('aria-label')).toBeTruthy()
+      })
+    })
+
+    test('selected dates have proper ARIA state', async () => {
+      const container = await createCalendar()
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      const firstDate = calendar.querySelector(
+        '.pkt-calendar__date:not(.pkt-calendar__date--disabled)',
+      )
+      fireEvent.click(firstDate!)
+      await calendar.updateComplete
+
+      expect(firstDate).toHaveAttribute('aria-pressed', 'true')
+    })
+
+    test('disabled dates have proper ARIA state', async () => {
+      const container = await createCalendar('excludeweekdays="0,6"')
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      const disabledDates = calendar.querySelectorAll('.pkt-calendar__date--disabled')
+      disabledDates.forEach((date) => {
+        expect(date).toHaveAttribute('disabled')
+      })
+    })
+  })
+})

package/src/components/calendar/calendar.constraints.test.ts

@@ -0,0 +1,110 @@
+import '@testing-library/jest-dom'
+import { parseISODateString } from '@/utils/dateutils'
+
+import './calendar'
+import { PktCalendar } from './calendar'
+
+const waitForCustomElements = async () => {
+  await customElements.whenDefined('pkt-calendar')
+}
+
+// Helper function to create calendar markup
+const createCalendar = async (calendarProps = '') => {
+  const container = document.createElement('div')
+  container.innerHTML = `
+    <pkt-calendar ${calendarProps}></pkt-calendar>
+  `
+  document.body.appendChild(container)
+  await waitForCustomElements()
+  return container
+}
+
+// Cleanup after each test
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktCalendar', () => {
+  describe('Date range functionality', () => {
+    test('handles earliest date property correctly', async () => {
+      const earliestDate = '2024-01-15'
+      // Set current month to January 2024 so we can see disabled dates before the 15th
+      const container = await createCalendar(`earliest="${earliestDate}" currentmonth="2024-01-01"`)
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      expect(calendar.earliest).toBe(earliestDate)
+
+      // Check that dates before earliest are disabled (dates 1-14 should be disabled)
+      const disabledDates = calendar.querySelectorAll('.pkt-calendar__date--disabled')
+      expect(disabledDates.length).toBeGreaterThan(0)
+    })
+
+    test('handles latest date property correctly', async () => {
+      const latestDate = '2024-12-15'
+      const container = await createCalendar(`latest="${latestDate}"`)
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      expect(calendar.latest).toBe(latestDate)
+    })
+
+    test('restricts selectable dates between earliest and latest', async () => {
+      // Set current month to June 2024 so we can see the date range restrictions
+      const container = await createCalendar(
+        'earliest="2024-06-10" latest="2024-06-20" currentmonth="2024-06-01"',
+      )
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      const enabledDates = calendar.querySelectorAll(
+        '.pkt-calendar__date:not(.pkt-calendar__date--disabled)',
+      )
+      const disabledDates = calendar.querySelectorAll('.pkt-calendar__date--disabled')
+
+      expect(enabledDates.length).toBeGreaterThan(0)
+      expect(disabledDates.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('Date exclusion functionality', () => {
+    test('excludes specific dates correctly', async () => {
+      const excludedDates = '2024-06-15,2024-06-20'
+      const container = await createCalendar(`excludedates="${excludedDates}"`)
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      expect(calendar.excludedates).toHaveLength(2)
+      expect(calendar.excludedates[0]).toEqual(parseISODateString('2024-06-15'))
+      expect(calendar.excludedates[1]).toEqual(parseISODateString('2024-06-20'))
+    })
+
+    test('excludes weekdays correctly', async () => {
+      // Exclude weekends (Saturday=6, Sunday=0)
+      const container = await createCalendar('excludeweekdays="0,6"')
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      expect(calendar.excludeweekdays).toEqual(['0', '6'])
+
+      // Check that weekend dates are disabled
+      const disabledDates = calendar.querySelectorAll('.pkt-calendar__date--disabled')
+      expect(disabledDates.length).toBeGreaterThan(0)
+    })
+
+    test('excludes both specific dates and weekdays', async () => {
+      const container = await createCalendar('excludedates="2024-06-15" excludeweekdays="0,6"')
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      expect(calendar.excludedates).toHaveLength(1)
+      expect(calendar.excludeweekdays).toEqual(['0', '6'])
+    })
+  })
+})

package/src/components/calendar/calendar.core.test.ts

@@ -0,0 +1,367 @@
+import '@testing-library/jest-dom'
+import { fireEvent } from '@testing-library/dom'
+import { parseISODateString } from '@/utils/dateutils'
+
+import './calendar'
+import { PktCalendar } from './calendar'
+
+const waitForCustomElements = async () => {
+  await customElements.whenDefined('pkt-calendar')
+}
+
+// Helper function to create calendar markup
+const createCalendar = async (calendarProps = '') => {
+  const container = document.createElement('div')
+  container.innerHTML = `
+    <pkt-calendar ${calendarProps}></pkt-calendar>
+  `
+  document.body.appendChild(container)
+  await waitForCustomElements()
+  return container
+}
+
+// Cleanup after each test
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktCalendar', () => {
+  describe('Rendering and basic functionality', () => {
+    test('renders without errors', async () => {
+      const container = await createCalendar()
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      expect(calendar).toBeInTheDocument()
+
+      await calendar.updateComplete
+      expect(calendar).toBeTruthy()
+    })
+
+    test('renders with correct structure', async () => {
+      const container = await createCalendar()
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      const calendarElement = calendar.querySelector('.pkt-calendar')
+      const calendarTable = calendar.querySelector('.pkt-cal-days')
+      const monthNav = calendar.querySelector('.pkt-cal-month-nav')
+
+      expect(calendarElement).toBeInTheDocument()
+      expect(calendarTable).toBeInTheDocument()
+      expect(monthNav).toBeInTheDocument()
+    })
+
+    test('renders month picker when withcontrols is true', async () => {
+      const container = await createCalendar('withcontrols')
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      // Navigation buttons should always be present
+      const prevButton = calendar.querySelector('.pkt-calendar__prev-month')
+      const nextButton = calendar.querySelector('.pkt-calendar__next-month')
+      expect(prevButton).toBeInTheDocument()
+      expect(nextButton).toBeInTheDocument()
+
+      // Should show month picker controls, not static title
+      const monthPicker = calendar.querySelector('.pkt-cal-month-picker')
+      const monthTitle = calendar.querySelector('.pkt-calendar__month-title')
+
+      expect(monthPicker).toBeInTheDocument()
+      expect(monthTitle).not.toBeInTheDocument()
+
+      // Should have month and year inputs
+      const monthSelect = monthPicker?.querySelector('select')
+      const yearInput = monthPicker?.querySelector('input[type="number"]')
+      expect(monthSelect).toBeInTheDocument()
+      expect(yearInput).toBeInTheDocument()
+    })
+
+    test('renders static month title when withcontrols is false', async () => {
+      const container = await createCalendar()
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      // Navigation buttons should always be present
+      const prevButton = calendar.querySelector('.pkt-calendar__prev-month')
+      const nextButton = calendar.querySelector('.pkt-calendar__next-month')
+      expect(prevButton).toBeInTheDocument()
+      expect(nextButton).toBeInTheDocument()
+
+      // Should show static month title, not controls
+      const monthTitle = calendar.querySelector('.pkt-calendar__month-title')
+      const monthPicker = calendar.querySelector('.pkt-cal-month-picker')
+
+      expect(monthTitle).toBeInTheDocument()
+      expect(monthPicker).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Properties and attributes', () => {
+    test('applies default properties correctly', async () => {
+      const container = await createCalendar()
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      expect(calendar.multiple).toBe(false)
+      expect(calendar.range).toBe(false)
+      expect(calendar.weeknumbers).toBe(false)
+      expect(calendar.withcontrols).toBe(false)
+      expect(calendar.selected).toEqual([])
+      expect(calendar.earliest).toBe(null)
+      expect(calendar.latest).toBe(null)
+    })
+
+    test('handles multiple property correctly', async () => {
+      const container = await createCalendar('multiple')
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      expect(calendar.multiple).toBe(true)
+    })
+
+    test('handles range property correctly', async () => {
+      const container = await createCalendar('range')
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      expect(calendar.range).toBe(true)
+    })
+
+    test('handles weeknumbers property correctly', async () => {
+      const container = await createCalendar('weeknumbers')
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      expect(calendar.weeknumbers).toBe(true)
+
+      const weekNumbers = calendar.querySelectorAll('.pkt-calendar__week-number')
+      expect(weekNumbers.length).toBeGreaterThan(0)
+    })
+
+    test('handles maxMultiple property correctly', async () => {
+      const container = await createCalendar('multiple maxMultiple="3"')
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      expect(calendar.maxMultiple).toBe(3)
+    })
+
+    test('handles currentmonth property correctly', async () => {
+      const testDate = '2024-03-15'
+      const container = await createCalendar(`currentmonth="${testDate}"`)
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      expect(calendar.currentmonth).toEqual(parseISODateString(testDate))
+    })
+  })
+
+  describe('Month navigation', () => {
+    it('should navigate to previous month when clicking previous button', async () => {
+      const calendar = document.createElement('pkt-calendar') as PktCalendar
+      document.body.appendChild(calendar)
+      await waitForCustomElements()
+
+      const navElement = calendar.querySelector('.pkt-cal-month-nav')
+      const prevButton = navElement?.querySelector('button')
+
+      expect(prevButton).toBeInTheDocument()
+
+      const initialMonth = calendar.currentmonth!.getMonth()
+      const initialYear = calendar.currentmonth!.getFullYear()
+      fireEvent.click(prevButton!)
+      await calendar.updateComplete
+
+      // Should go to previous month (or December of previous year if we're in January)
+      if (initialMonth === 0) {
+        expect(calendar.currentmonth!.getMonth()).toBe(11)
+        expect(calendar.currentmonth!.getFullYear()).toBe(initialYear - 1)
+      } else {
+        expect(calendar.currentmonth!.getMonth()).toBe(initialMonth - 1)
+        expect(calendar.currentmonth!.getFullYear()).toBe(initialYear)
+      }
+
+      document.body.removeChild(calendar)
+    })
+
+    it('should navigate to next month when clicking next button', async () => {
+      const calendar = document.createElement('pkt-calendar') as PktCalendar
+      document.body.appendChild(calendar)
+      await waitForCustomElements()
+
+      const navElement = calendar.querySelector('.pkt-cal-month-nav')
+      const buttons = navElement?.querySelectorAll('button')
+      const nextButton = buttons?.[1] // Second button is next
+
+      expect(nextButton).toBeInTheDocument()
+
+      const initialMonth = calendar.currentmonth!.getMonth()
+      const initialYear = calendar.currentmonth!.getFullYear()
+      fireEvent.click(nextButton!)
+      await calendar.updateComplete
+
+      // Should go to next month (or January of next year if we're in December)
+      if (initialMonth === 11) {
+        expect(calendar.currentmonth!.getMonth()).toBe(0)
+        expect(calendar.currentmonth!.getFullYear()).toBe(initialYear + 1)
+      } else {
+        expect(calendar.currentmonth!.getMonth()).toBe(initialMonth + 1)
+        expect(calendar.currentmonth!.getFullYear()).toBe(initialYear)
+      }
+
+      document.body.removeChild(calendar)
+    })
+
+    test('navigates to next month', async () => {
+      const container = await createCalendar('withcontrols currentmonth="2024-06-15"')
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      const nextButton = calendar.querySelector('.pkt-calendar__next-month')
+      expect(nextButton).toBeInTheDocument()
+
+      // With controls=true, check the month select dropdown instead of title
+      const monthSelect = calendar.querySelector(
+        '.pkt-cal-month-picker select',
+      ) as HTMLSelectElement
+      const initialMonth = monthSelect?.value
+
+      fireEvent.click(nextButton!)
+      await calendar.updateComplete
+
+      const newMonth = monthSelect?.value
+      expect(newMonth).not.toBe(initialMonth)
+    })
+
+    test('month navigation updates visible dates', async () => {
+      const container = await createCalendar('withcontrols currentmonth="2024-06-15"')
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      const initialDates = Array.from(calendar.querySelectorAll('.pkt-calendar__date')).map(
+        (el) => el.textContent,
+      )
+
+      const nextButton = calendar.querySelector('.pkt-calendar__next-month')
+      fireEvent.click(nextButton!)
+      await calendar.updateComplete
+
+      const newDates = Array.from(calendar.querySelectorAll('.pkt-calendar__date')).map(
+        (el) => el.textContent,
+      )
+      expect(newDates).not.toEqual(initialDates)
+    })
+  })
+
+  describe('Date formatting and localization', () => {
+    test('displays day names correctly', async () => {
+      const container = await createCalendar()
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      const dayHeaders = calendar.querySelectorAll('.pkt-calendar__day-name')
+      expect(dayHeaders.length).toBe(7)
+
+      // Check that day names are displayed
+      dayHeaders.forEach((header) => {
+        expect(header.textContent).toBeTruthy()
+        expect(header.textContent!.length).toBeGreaterThan(0)
+      })
+    })
+
+    test('displays month names correctly', async () => {
+      const container = await createCalendar('currentmonth="2024-06-15"')
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      const monthTitle = calendar.querySelector('.pkt-calendar__month-title')
+      expect(monthTitle).toBeInTheDocument()
+      expect(monthTitle?.textContent).toBeTruthy()
+    })
+
+    test('handles custom day strings', async () => {
+      const container = await createCalendar()
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+
+      // Set custom day strings
+      calendar.dayStrings = ['S', 'M', 'T', 'W', 'T', 'F', 'S']
+      await calendar.updateComplete
+
+      const dayHeaders = calendar.querySelectorAll('.pkt-calendar__day-name')
+      expect(dayHeaders[0].textContent?.trim()).toBe('S')
+      expect(dayHeaders[1].textContent?.trim()).toBe('M')
+    })
+
+    test('handles custom month strings', async () => {
+      const container = await createCalendar('withcontrols')
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+
+      // Set custom month strings
+      calendar.monthStrings = [
+        'Jan',
+        'Feb',
+        'Mar',
+        'Apr',
+        'May',
+        'Jun',
+        'Jul',
+        'Aug',
+        'Sep',
+        'Oct',
+        'Nov',
+        'Dec',
+      ]
+      await calendar.updateComplete
+
+      // When withcontrols=true, check the month select dropdown instead of title
+      const monthSelect = calendar.querySelector('.pkt-cal-month-picker select')
+      expect(monthSelect).toBeInTheDocument()
+
+      // Check that the custom month string appears in the dropdown options
+      const options = monthSelect?.querySelectorAll('option')
+      expect(options?.[0]?.textContent).toContain('Jan')
+    })
+  })
+
+  describe('Today highlighting', () => {
+    test('highlights today date', async () => {
+      const container = await createCalendar()
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      const todayDate = calendar.querySelector('.pkt-calendar__date--today')
+      expect(todayDate).toBeInTheDocument()
+    })
+
+    test('today date is selectable unless excluded', async () => {
+      const container = await createCalendar()
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      const todayDate = calendar.querySelector('.pkt-calendar__date--today')
+
+      if (todayDate && !todayDate.classList.contains('pkt-calendar__date--disabled')) {
+        fireEvent.click(todayDate)
+        await calendar.updateComplete
+        expect(todayDate).toHaveClass('pkt-calendar__date--selected')
+      }
+    })
+  })
+})