@oslokommune/punkt-elements 17.1.3 → 18.1.0

package/src/components/alert/alert.ts

@@ -3,9 +3,10 @@ import { customElement, property, state } from 'lit/decorators.js'
 import { html, nothing, PropertyValues } from 'lit'
 import { PktElementWithSlot } from '@/base-elements/element-with-slot'
 import { slotContent } from '@/directives/slot-content'
-import type { TAriaLive, TAlertSkin } from 'shared-types'
+import type { TAriaLive, TAlertSkin, TAlertSize } from 'shared-types'
 import { updateClassAttribute } from '@/utils/classutils'
-import specs from 'componentSpecs/alert.json'
+import { formatString } from 'shared-strings'
+import specs from 'componentSpecs/alert.spec'
 
 import '@/components/icon'
 import '@/components/button'
@@ -23,7 +24,7 @@ export interface IPktAlert {
    */
   compact?: boolean
   role?: string
-  size?: 'medium' | 'small' | 'xsmall'
+  size?: TAlertSize
 }
 export class PktAlert extends PktElementWithSlot implements IPktAlert {
   constructor() {
@@ -33,14 +34,20 @@ export class PktAlert extends PktElementWithSlot implements IPktAlert {
 
   // Properties
 
-  @property({ type: Boolean, reflect: false }) compact = specs.deprecated.compact.default
+  @property({ type: Boolean, reflect: false })
+  compact = specs.deprecated!.compact.default as boolean
   @property({ type: String, reflect: true }) title: string = ''
-  @property({ type: String, reflect: true }) skin: TAlertSkin = specs.props.skin
-    .default as TAlertSkin
-  @property({ type: String }) ariaLive: TAriaLive = specs.props.ariaLive.default as TAriaLive
+  @property({ type: String, reflect: true }) skin: TAlertSkin = (
+    specs.props!.skin as { default: TAlertSkin }
+  ).default
+  @property({ type: String }) ariaLive: TAriaLive = (
+    specs.props!.ariaLive as { default: TAriaLive }
+  ).default
   @property({ type: String, reflect: true, attribute: 'aria-live' })
   ariaLiveAttr: TAriaLive | null = null
-  @property({ type: Boolean, reflect: true }) closeAlert = specs.props.closeAlert.default
+  @property({ type: Boolean, reflect: true }) closeAlert = (
+    specs.props!.closeAlert as { default: boolean }
+  ).default
   @property({ type: String, reflect: true }) date: string | null = null
   @property({ type: String, reflect: true }) role: string = 'status'
   @property({ type: String, attribute: 'size' })
@@ -110,7 +117,7 @@ export class PktAlert extends PktElementWithSlot implements IPktAlert {
                     variant="icon-only"
                     @click=${this.close}
                   >
-                    <span class="sr-only">Lukk</span>
+                    <span class="sr-only">${this.pktStrings.get('generic').close}</span>
                   </pkt-button>
                 </div>
               `
@@ -120,7 +127,9 @@ export class PktAlert extends PktElementWithSlot implements IPktAlert {
           <div class="pkt-alert__text">${slotContent(this)}</div>
 
           ${this.date
-            ? html`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>`
+            ? html`<div class="pkt-alert__date">
+                ${formatString(this.pktStrings.get('alert').lastUpdated, { date: this.date })}
+              </div>`
             : nothing}
         </div>
       </div>

package/src/components/backlink/backlink.test.ts

@@ -9,7 +9,7 @@ expect.extend(toHaveNoViolations)
 export interface BacklinkTestConfig extends BaseTestConfig {
   href?: string
   text?: string
-  ariaLabel?: string
+  ariaLabel?: string | null
 }
 
 // Use shared framework
@@ -70,7 +70,7 @@ describe('PktBackLink', () => {
 
       expect(backlink.href).toBe('')
       expect(backlink.text).toBe('Forsiden')
-      expect(backlink.ariaLabel).toBe('')
+      expect(backlink.ariaLabel).toBe(null)
 
       const nav = backlink.querySelector('nav')
       const link = nav?.querySelector('a')
@@ -133,7 +133,7 @@ describe('PktBackLink', () => {
     test('uses default aria-label when none provided', async () => {
       const { backlink } = await createBacklinkTest()
 
-      expect(backlink.ariaLabel).toBe('')
+      expect(backlink.ariaLabel).toBe(null)
 
       const nav = backlink.querySelector('nav')
       expect(nav?.getAttribute('aria-label')).toBe('Gå tilbake til forrige side')

package/src/components/backlink/backlink.ts

@@ -2,21 +2,19 @@ import { PktElement } from '@/base-elements/element'
 import { html } from 'lit'
 import { property, customElement } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
+import type { IPktBackLinkBase } from 'shared-types'
 
 import '@/components/icon'
 
-export interface IPktBackLink {
-  href?: string
-  text?: string
-  ariaLabel?: string
-}
+export interface IPktBackLink extends IPktBackLinkBase {}
 
 export class PktBackLink extends PktElement<IPktBackLink> implements IPktBackLink {
   // Properties
 
   @property({ type: String }) href: string = ''
   @property({ type: String }) text: string = 'Forsiden'
-  @property({ type: String }) ariaLabel: string = ''
+  /** @deprecated Bruk `strings={{ backlink: { label: '…' } }}` eller `setPktStrings()`. */
+  @property({ type: String }) ariaLabel: string | null = null
 
   // Lifecycle
 
@@ -36,7 +34,7 @@ export class PktBackLink extends PktElement<IPktBackLink> implements IPktBackLin
   render() {
     return html`<nav
       class="pkt-back-link"
-      aria-label=${this.ariaLabel || 'Gå tilbake til forrige side'}
+      aria-label=${this.ariaLabel || this.pktStrings.get('backlink').label}
     >
       <a href=${ifDefined(this.href || '/')} class="pkt-link pkt-link--icon-left"
         ><pkt-icon

package/src/components/breadcrumbs/breadcrumbs.ts

@@ -1,22 +1,21 @@
 import { customElement, property } from 'lit/decorators.js'
 import { html, nothing } from 'lit'
 import { PktElement } from '@/base-elements/element'
+import type { IBreadcrumb, IPktBreadcrumbsBase } from 'shared-types'
 
 import '@/components/icon'
 
-export interface IBreadcrumbItem {
-  text: string
-  href: string
-}
+export type { IBreadcrumb }
 
-export interface IPktBreadcrumbs {
-  breadcrumbs: IBreadcrumbItem[]
-}
+/** @deprecated Use `IBreadcrumb`. */
+export type IBreadcrumbItem = IBreadcrumb
+
+export interface IPktBreadcrumbs extends IPktBreadcrumbsBase {}
 
 export class PktBreadcrumbs extends PktElement implements IPktBreadcrumbs {
-  @property({ type: Array }) breadcrumbs: IBreadcrumbItem[] = []
+  @property({ type: Array }) breadcrumbs: IBreadcrumb[] = []
 
-  private handleLinkClick(event: MouseEvent, item: IBreadcrumbItem, index: number) {
+  private handleLinkClick(event: MouseEvent, item: IBreadcrumb, index: number) {
     const navigateEvent = new CustomEvent('navigate', {
       detail: { item, index, originalEvent: event },
       bubbles: true,
@@ -39,7 +38,7 @@ export class PktBreadcrumbs extends PktElement implements IPktBreadcrumbs {
     const backLink = this.breadcrumbs[this.breadcrumbs.length - 2]
 
     return html`
-      <nav class="pkt-breadcrumbs" aria-label="brødsmulemeny">
+      <nav class="pkt-breadcrumbs" aria-label=${this.pktStrings.get('breadcrumbs').ariaLabel}>
         <ol class="pkt-breadcrumbs__list pkt-breadcrumbs--desktop">
           ${this.breadcrumbs.map((item, index) =>
             index === this.breadcrumbs.length - 1

package/src/components/breadcrumbs/index.ts

@@ -1,2 +1,2 @@
 export { PktBreadcrumbs } from './breadcrumbs'
-export type { IBreadcrumbItem, IPktBreadcrumbs } from './breadcrumbs'
+export type { IBreadcrumb, IBreadcrumbItem, IPktBreadcrumbs } from './breadcrumbs'

package/src/components/calendar/calendar.ts

@@ -95,12 +95,32 @@ export class PktCalendar extends PktElement {
   today: string | null = null
 
   // Localization strings
-  @property({ type: Array, attribute: 'day-strings' }) dayStrings: string[] = this.strings.dates.daysShort
-  @property({ type: Array, attribute: 'day-strings-long' }) dayStringsLong: string[] = this.strings.dates.days
-  @property({ type: Array, attribute: 'month-strings' }) monthStrings: string[] = this.strings.dates.months
-  @property({ type: String, attribute: 'week-string' }) weekString: string = this.strings.dates.week
-  @property({ type: String, attribute: 'prev-month-string' }) prevMonthString: string = this.strings.dates.prevMonth
-  @property({ type: String, attribute: 'next-month-string' }) nextMonthString: string = this.strings.dates.nextMonth
+  /** @deprecated Bruk `strings={{ dates: { daysShort: [...] } }}` eller `setPktStrings()`. */
+  @property({ type: Array, attribute: 'day-strings' }) dayStrings?: string[]
+  /** @deprecated Bruk `strings={{ dates: { days: [...] } }}` eller `setPktStrings()`. */
+  @property({ type: Array, attribute: 'day-strings-long' }) dayStringsLong?: string[]
+  /** @deprecated Bruk `strings={{ dates: { months: [...] } }}` eller `setPktStrings()`. */
+  @property({ type: Array, attribute: 'month-strings' }) monthStrings?: string[]
+  /** @deprecated Bruk `strings={{ dates: { week: '...' } }}` eller `setPktStrings()`. */
+  @property({ type: String, attribute: 'week-string' }) weekString?: string
+  /** @deprecated Bruk `strings={{ calendar: { prevMonth: '...' } }}` eller `setPktStrings()`. */
+  @property({ type: String, attribute: 'prev-month-string' }) prevMonthString?: string
+  /** @deprecated Bruk `strings={{ calendar: { nextMonth: '...' } }}` eller `setPktStrings()`. */
+  @property({ type: String, attribute: 'next-month-string' }) nextMonthString?: string
+
+  /** Datonavn og navigasjonstekster, med de utfasede enkeltpropene lagt oppå. */
+  protected get calendarStrings() {
+    const dates = this.pktStrings.get('dates')
+    const calendar = this.pktStrings.get('calendar')
+    return {
+      daysShort: this.dayStrings ?? dates.daysShort,
+      days: this.dayStringsLong ?? dates.days,
+      months: this.monthStrings ?? dates.months,
+      week: this.weekString ?? dates.week,
+      prevMonth: this.prevMonthString ?? calendar.prevMonth,
+      nextMonth: this.nextMonthString ?? calendar.nextMonth,
+    }
+  }
 
   // Internal state - selection tracking
   @property({ type: Array }) private _selected: Date[] = []
@@ -230,8 +250,7 @@ export class PktCalendar extends PktElement {
         }}
       >
         <nav class="pkt-cal-month-nav">
-          ${this.renderMonthNavButton('prev')}
-          ${this.renderMonthNav()}
+          ${this.renderMonthNavButton('prev')} ${this.renderMonthNav()}
           ${this.renderMonthNavButton('next')}
         </nav>
         <table
@@ -253,7 +272,8 @@ export class PktCalendar extends PktElement {
   private renderMonthNavButton(direction: 'prev' | 'next'): TemplateResult {
     const isPrev = direction === 'prev'
     const isAllowed = isPrev ? this.isPrevMonthAllowed() : this.isNextMonthAllowed()
-    const label = isPrev ? this.prevMonthString : this.nextMonthString
+    const { prevMonth, nextMonth } = this.calendarStrings
+    const label = isPrev ? prevMonth : nextMonth
     const iconName = isPrev ? 'chevron-thin-left' : 'chevron-thin-right'
     const className = isPrev ? 'pkt-calendar__prev-month' : 'pkt-calendar__next-month'
     const onClick = isPrev ? () => this.prevMonth() : () => this.nextMonth()
@@ -284,28 +304,32 @@ export class PktCalendar extends PktElement {
     const days: TemplateResult[] = []
 
     if (this.weeknumbers) {
-      days.push(html`<th><div class="pkt-calendar__week-number">${this.weekString}</div></th>`)
+      days.push(
+        html`<th><div class="pkt-calendar__week-number">${this.calendarStrings.week}</div></th>`,
+      )
     }
 
-    for (let i = 0; i < this.dayStrings.length; i++) {
+    const { days: dayNames, daysShort } = this.calendarStrings
+    for (let i = 0; i < daysShort.length; i++) {
       days.push(
         html`<th>
-          <div class="pkt-calendar__day-name" aria-label="${this.dayStringsLong[i]}">
-            ${this.dayStrings[i]}
-          </div>
+          <div class="pkt-calendar__day-name" aria-label="${dayNames[i]}">${daysShort[i]}</div>
         </th>`,
       )
     }
 
-    return html`<tr class="pkt-cal-week-row">${days}</tr>`
+    return html`<tr class="pkt-cal-week-row">
+      ${days}
+    </tr>`
   }
 
   private renderMonthNav(): TemplateResult {
+    const dates = this.pktStrings.get('dates')
     if (this.withcontrols) {
       return html`<div class="pkt-cal-month-picker">
-        <label for="${this.id}-monthnav" class="pkt-hide">${this.strings.dates.month}</label>
+        <label for="${this.id}-monthnav" class="pkt-hide">${dates.month}</label>
         <select
-          aria-label="${this.strings.dates.month}"
+          aria-label="${dates.month}"
           class="pkt-input pkt-input-compact"
           id="${this.id}-monthnav"
           @change=${(e: Event) => {
@@ -314,14 +338,14 @@ export class PktCalendar extends PktElement {
             this.changeMonth(this.year, parseInt(target.value))
           }}
         >
-          ${this.monthStrings.map(
+          ${this.calendarStrings.months.map(
             (month, index) =>
               html`<option value=${index} ?selected=${this.month === index}>${month}</option>`,
           )}
         </select>
-        <label for="${this.id}-yearnav" class="pkt-hide">${this.strings.dates.year}</label>
+        <label for="${this.id}-yearnav" class="pkt-hide">${dates.year}</label>
         <input
-          aria-label="${this.strings.dates.year}"
+          aria-label="${dates.year}"
           class="pkt-input pkt-cal-input-year pkt-input-compact"
           id="${this.id}-yearnav"
           type="number"
@@ -338,7 +362,7 @@ export class PktCalendar extends PktElement {
     }
 
     return html`<div class="pkt-txt-16-medium pkt-calendar__month-title" aria-live="polite">
-      ${this.monthStrings[this.month]} ${this.year}
+      ${this.calendarStrings.months[this.month]} ${this.year}
     </div>`
   }
 
@@ -393,10 +417,12 @@ export class PktCalendar extends PktElement {
 
   private getDayCellClasses(data: TDayViewData) {
     const { currentDateISO, isToday, isSelected } = data
-    const isRangeStart = this.range &&
+    const isRangeStart =
+      this.range &&
       (this.selected.length === 2 || this.rangeHovered !== null) &&
       currentDateISO === this.selected[0]
-    const isRangeEnd = this.range && this.selected.length === 2 && currentDateISO === this.selected[1]
+    const isRangeEnd =
+      this.range && this.selected.length === 2 && currentDateISO === this.selected[1]
 
     return {
       'pkt-cal-today': isToday,
@@ -412,10 +438,12 @@ export class PktCalendar extends PktElement {
 
   private getDayButtonClasses(data: TDayViewData) {
     const { currentDateISO, isToday, isSelected, isDisabled } = data
-    const isRangeStart = this.range &&
+    const isRangeStart =
+      this.range &&
       (this.selected.length === 2 || this.rangeHovered !== null) &&
       currentDateISO === this.selected[0]
-    const isRangeEnd = this.range && this.selected.length === 2 && currentDateISO === this.selected[1]
+    const isRangeEnd =
+      this.range && this.selected.length === 2 && currentDateISO === this.selected[1]
 
     return {
       'pkt-calendar__date': true,
@@ -489,7 +517,9 @@ export class PktCalendar extends PktElement {
   }
 
   private renderWeekRow(cells: TemplateResult[]): TemplateResult {
-    return html`<tr class="pkt-cal-week-row" role="row">${cells}</tr>`
+    return html`<tr class="pkt-cal-week-row" role="row">
+      ${cells}
+    </tr>`
   }
 
   private renderCalendarBody() {

package/src/components/checkbox/checkbox.test.ts

@@ -406,7 +406,6 @@ describe('PktCheckbox', () => {
       await checkbox.updateComplete
 
       expect(checkbox.optionalTag).toBe(true)
-      expect(checkbox.optionalText).toBe('Valgfritt')
 
       const optionalTag = checkbox.querySelector('.pkt-tag--blue-light')
       expect(optionalTag).toBeInTheDocument()
@@ -423,7 +422,6 @@ describe('PktCheckbox', () => {
       await checkbox.updateComplete
 
       expect(checkbox.requiredTag).toBe(true)
-      expect(checkbox.requiredText).toBe('Må fylles ut')
 
       const requiredTag = checkbox.querySelector('.pkt-tag--beige')
       expect(requiredTag).toBeInTheDocument()

package/src/components/checkbox/checkbox.ts

@@ -36,9 +36,11 @@ export class PktCheckbox extends PktInputElement<Props> {
   @property({ type: String, reflect: true }) type: string = 'checkbox'
   @property({ type: String }) tagText: string | null = null
   @property({ type: Boolean }) optionalTag: boolean = false
-  @property({ type: String }) optionalText: string = 'Valgfritt'
+  /** @deprecated Bruk `strings={{ forms: { optional: '…' } }}` eller `setPktStrings()`. */
+  @property({ type: String }) optionalText?: string
   @property({ type: Boolean }) requiredTag: boolean = false
-  @property({ type: String }) requiredText: string = 'Må fylles ut'
+  /** @deprecated Bruk `strings={{ forms: { required: '…' } }}` eller `setPktStrings()`. */
+  @property({ type: String }) requiredText?: string
 
   connectedCallback() {
     super.connectedCallback()
@@ -108,16 +110,18 @@ export class PktCheckbox extends PktInputElement<Props> {
 
     const tagClasses = 'pkt-tag pkt-tag--small pkt-tag--thin-text'
 
+    const formStrings = this.pktStrings.get('forms')
+
     const tags = () => {
       return html`
         ${this.tagText
           ? html`<span class=${tagClasses + ' pkt-tag--gray'}>${this.tagText}</span>`
           : nothing}
         ${this.optionalTag
-          ? html`<span class=${tagClasses + ' pkt-tag--blue-light'}>${this.optionalText}</span>`
+          ? html`<span class=${tagClasses + ' pkt-tag--blue-light'}>${this.optionalText ?? formStrings.optional}</span>`
           : nothing}
         ${this.requiredTag
-          ? html`<span class=${tagClasses + ' pkt-tag--beige'}>${this.requiredText}</span>`
+          ? html`<span class=${tagClasses + ' pkt-tag--beige'}>${this.requiredText ?? formStrings.required}</span>`
           : nothing}
       `
     }

package/src/components/combobox/combobox-base.ts

@@ -7,6 +7,7 @@ import specs from 'componentSpecs/combobox.json'
 
 import type { IPktComboboxOption, TPktComboboxTagPlacement } from './combobox-types'
 import PktListbox from '../listbox'
+import type { TComboboxMessageKey } from 'shared-utils/combobox'
 
 /**
  * Base class for PktCombobox.
@@ -42,7 +43,7 @@ export class ComboboxBase extends PktInputElement {
   @state() override _options: IPktComboboxOption[] = []
   @state() protected _value: string[] = []
   @state() protected _isOptionsOpen = false
-  @state() protected _userInfoMessage: string = ''
+  @state() protected _userInfoMessage: TComboboxMessageKey = ''
   @state() protected _addValueText: string | null = null
   @state() protected _maxIsReached: boolean = false
   @state() protected _search: string = ''

package/src/components/combobox/combobox-value.ts

@@ -3,6 +3,7 @@ import { findOptionByValue, isMaxSelectionReached } from 'shared-utils/combobox/
 import { getSingleValueForInput } from 'shared-utils/combobox/input-utils'
 import { selectionMutators } from './combobox-utils'
 import { ComboboxBase } from './combobox-base'
+import type { TComboboxMessageKey } from 'shared-utils/combobox'
 
 /**
  * Value management layer for PktCombobox.
@@ -27,7 +28,7 @@ export class ComboboxValue extends ComboboxBase {
 
     let shouldOptionsBeOpen: boolean = false
     let shouldResetInput: boolean = true
-    let userInfoMessage: string | null = ''
+    let userInfoMessage: TComboboxMessageKey = ''
     let searchValue: string | null = ''
 
     if (isDisabled) return
@@ -35,7 +36,7 @@ export class ComboboxValue extends ComboboxBase {
     // Not in option list and allowUserInput is true
     if (!isInOption && this.allowUserInput && !isEmpty) {
       this.addNewUserValue(value)
-      userInfoMessage = 'Ny verdi lagt til'
+      userInfoMessage = 'valueAdded'
       shouldOptionsBeOpen = isMultiple
     }
 
@@ -46,7 +47,7 @@ export class ComboboxValue extends ComboboxBase {
       }
       shouldResetInput = false
       shouldOptionsBeOpen = true
-      userInfoMessage = 'Ingen treff i søket'
+      userInfoMessage = 'noResults'
     }
 
     // Value is already selected — deselect it
@@ -85,7 +86,7 @@ export class ComboboxValue extends ComboboxBase {
 
     // Multi-select with max selections reached
     else if (isMultiple && isMaxItemsReached) {
-      userInfoMessage = 'Maks antall valg nådd'
+      userInfoMessage = 'maxSelected'
       shouldResetInput = false
       searchValue = value
     }
@@ -93,7 +94,7 @@ export class ComboboxValue extends ComboboxBase {
     // No matching condition — fallback
     else {
       isSingle && this.removeAllSelected()
-      userInfoMessage = 'Ingen gyldig verdi valgt'
+      userInfoMessage = 'noValidValue'
       shouldResetInput = false
       shouldOptionsBeOpen = true
       searchValue = value
@@ -121,7 +122,7 @@ export class ComboboxValue extends ComboboxBase {
     if (this._value.includes(value as string)) return
 
     if (this.multiple && isMaxSelectionReached(this._value.length, this.maxlength)) {
-      this._userInfoMessage = 'Maks antall valg nådd'
+      this._userInfoMessage = 'maxSelected'
       return
     }
 
@@ -152,7 +153,7 @@ export class ComboboxValue extends ComboboxBase {
   protected addAllOptions(): void {
     if (!this.multiple) return
     if (this.maxlength && this._options.length > this.maxlength) {
-      this._userInfoMessage = 'For mange valgt'
+      this._userInfoMessage = 'tooManySelected'
       return
     }
 
@@ -173,10 +174,10 @@ export class ComboboxValue extends ComboboxBase {
     this._search = input
 
     // If the typed value is already selected, don't toggle (which would deselect).
-    // Just reset the input and keep the "Verdien er allerede valgt" message.
+    // Just reset the input and keep the "alreadySelected" message.
     if (input && this._value.includes(input)) {
       this.resetComboboxInput(true)
-      this._userInfoMessage = 'Verdien er allerede valgt'
+      this._userInfoMessage = 'alreadySelected'
       return
     }
 

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

@@ -269,7 +269,11 @@ describe('PktCombobox', () => {
       ;(combobox as any).toggleValue('cherry')
       await combobox.updateComplete
 
-      expect(combobox['_userInfoMessage']).toBe('Maks antall valg nådd')
+      expect(combobox['_userInfoMessage']).toBe('maxSelected')
+      const listbox = container.querySelector('pkt-listbox') as HTMLElement & {
+        userMessage: string
+      }
+      expect(listbox.userMessage).toBe('Maks antall valg nådd')
     })
 
     test('allows deselection when at maxlength', async () => {

package/src/components/combobox/combobox.ts

@@ -281,6 +281,7 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
   render() {
     return html`
       <pkt-input-wrapper
+        .strings=${this.strings}
         .size=${this.inputSize}
         .label=${this.label}
         .helptext=${this.helptext}
@@ -371,7 +372,9 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
             ?allow-user-input=${this.allowUserInput && !this._maxIsReached}
             ?max-is-reached=${this._maxIsReached}
             .customUserInput=${ifDefined(this._addValueText)}
-            .userMessage=${this._userInfoMessage}
+            .userMessage=${this._userInfoMessage
+              ? this.pktStrings.get('combobox')[this._userInfoMessage]
+              : ''}
             @search=${this.handleSearch}
             @option-toggle=${this.handleOptionToggled}
             @select-all=${this.addAllOptions}

package/src/components/consent/strings.ts

@@ -1,125 +1 @@
-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',
-          },
-        },
-      },
-    },
-  ],
-}
+export { consentStrings } from 'shared-strings/consent'