@oslokommune/punkt-elements 19.2.0 → 19.3.1

package/src/components/fileupload/fileupload-renderers.ts

@@ -10,7 +10,9 @@ import type {
   TQueueOperationContext,
   TTransferProgress,
 } from './fileupload-types'
-import { formatString, nb } from 'shared-strings'
+import { formatString, type TPktStrings } from 'shared-strings'
+
+type TFileuploadStrings = TPktStrings['fileupload']
 
 type TRenderQueueItemProps = {
   file: FileItem
@@ -24,7 +26,7 @@ type TRenderQueueItemProps = {
   transferErrorMessage?: string
   transferShowProgress?: boolean
   transferLastProgress?: number
-  loadingText?: string
+  strings: TFileuploadStrings
   operations: TQueueItemOperation[]
   activeOperationId?: string
   truncateTail?: number
@@ -70,9 +72,11 @@ const getProgressState = (progress: TTransferProgress): 'in-progress' | 'error'
   return 'idle'
 }
 
-const renderLoadingText = (loadingText?: string) =>
-  html`<span class="pkt-fileupload__queue-display__item__loading-text" aria-label="Laster opp fil"
-    >${loadingText ?? 'Laster opp...'}</span
+const renderLoadingText = (strings: TFileuploadStrings) =>
+  html`<span
+    class="pkt-fileupload__queue-display__item__loading-text"
+    aria-label=${strings.uploadingFile}
+    >${strings.uploading}</span
   >`
 
 const createOperationContext = ({
@@ -112,7 +116,7 @@ const renderTransferInProgress = ({
   disabled,
   transferProgress,
   transferShowProgress,
-  loadingText,
+  strings,
   truncateTail,
   onCancel,
   iconName = 'document-text',
@@ -122,7 +126,7 @@ const renderTransferInProgress = ({
   disabled: boolean
   transferProgress: number
   transferShowProgress?: boolean
-  loadingText?: string
+  strings: TFileuploadStrings
   truncateTail?: number
   onCancel: (fileId: string) => void
   iconName?: string
@@ -140,11 +144,11 @@ const renderTransferInProgress = ({
     <button
       type="button"
       class="pkt-fileupload__queue-display__item__cancel-button"
-      aria-label="Avbryt opplasting"
+      aria-label=${strings.cancelUpload}
       ?disabled=${disabled}
       @click=${() => onCancel(file.fileId)}
     >
-      Avbryt
+      ${strings.cancel}
     </button>
     ${showProgressBar
       ? html`
@@ -159,7 +163,7 @@ const renderTransferInProgress = ({
             >${Math.round(transferProgress * 100)}%</span
           >
         `
-      : renderLoadingText(loadingText)}
+      : renderLoadingText(strings)}
   `
 }
 
@@ -170,6 +174,7 @@ const renderTransferError = ({
   transferShowProgress,
   transferLastProgress,
   transferErrorMessage,
+  strings,
   truncateTail,
   onCancel,
 }: {
@@ -179,6 +184,7 @@ const renderTransferError = ({
   transferShowProgress?: boolean
   transferLastProgress?: number
   transferErrorMessage?: string
+  strings: TFileuploadStrings
   truncateTail?: number
   onCancel: (fileId: string) => void
 }) => {
@@ -196,11 +202,11 @@ const renderTransferError = ({
     <button
       type="button"
       class="pkt-fileupload__queue-display__item__cancel-button"
-      aria-label="Fjern fil som feilet under opplasting"
+      aria-label=${strings.removeFailedFile}
       ?disabled=${disabled}
       @click=${() => onCancel(file.fileId)}
     >
-      Fjern
+      ${strings.removeFailed}
     </button>
     ${showProgressError
       ? html`
@@ -424,6 +430,7 @@ const renderThumbnailIdleMain = ({
   previewEnabled,
   canOpenPreview,
   truncateTail,
+  strings,
   onOpenPreview,
   onThumbnailImageError,
 }: {
@@ -432,6 +439,7 @@ const renderThumbnailIdleMain = ({
   previewEnabled?: boolean
   canOpenPreview?: boolean
   truncateTail?: number
+  strings: TFileuploadStrings
   onOpenPreview?: (fileId: string) => void
   onThumbnailImageError?: (fileId: string) => void
 }) => {
@@ -450,7 +458,7 @@ const renderThumbnailIdleMain = ({
       <button
         type="button"
         class="pkt-fileupload__queue-display__item__thumbnail__image-wrapper pkt-btn pkt-btn--medium pkt-btn--secondary pkt-btn--label-only"
-        aria-label=${formatString(nb.fileupload.previewImage, { filename })}
+        aria-label=${formatString(strings.previewImage, { filename })}
         ?disabled=${!isInteractive}
         @click=${() => {
           if (!isInteractive || !onOpenPreview) return
@@ -500,7 +508,7 @@ export const renderFilenameQueueItem = ({
   transferErrorMessage,
   transferShowProgress,
   transferLastProgress,
-  loadingText,
+  strings,
   truncateTail,
   onCancel,
 }: TRenderQueueItemProps) => {
@@ -550,7 +558,7 @@ export const renderFilenameQueueItem = ({
             disabled,
             transferProgress: transferProgress as number,
             transferShowProgress,
-            loadingText,
+            strings,
             truncateTail,
             onCancel,
           })
@@ -562,6 +570,7 @@ export const renderFilenameQueueItem = ({
               transferShowProgress,
               transferLastProgress,
               transferErrorMessage,
+              strings,
               truncateTail,
               onCancel,
             })
@@ -638,7 +647,7 @@ export const renderThumbnailQueueItem = ({
   transferErrorMessage,
   transferShowProgress,
   transferLastProgress,
-  loadingText,
+  strings,
   truncateTail,
   onCancel,
   onOpenPreview,
@@ -690,7 +699,7 @@ export const renderThumbnailQueueItem = ({
             disabled,
             transferProgress: transferProgress as number,
             transferShowProgress,
-            loadingText,
+            strings,
             truncateTail,
             onCancel,
             iconName: 'picture',
@@ -703,6 +712,7 @@ export const renderThumbnailQueueItem = ({
               transferShowProgress,
               transferLastProgress,
               transferErrorMessage,
+              strings,
               truncateTail,
               onCancel,
             })
@@ -723,6 +733,7 @@ export const renderThumbnailQueueItem = ({
                 previewEnabled,
                 canOpenPreview,
                 truncateTail,
+                strings,
                 onOpenPreview,
                 onThumbnailImageError,
               })}

package/src/components/fileupload/fileupload.ts

@@ -4,6 +4,7 @@ import { ifDefined } from 'lit/directives/if-defined.js'
 import { customElement, state } from 'lit/decorators.js'
 
 import { navigateCyclic, trapTabInside, type IFileAndTransfer } from 'shared-utils/fileupload'
+import { formatString } from 'shared-strings'
 
 import '@/components/alert'
 import '@/components/icon'
@@ -161,7 +162,11 @@ export class PktFileUpload extends PktFileUploadBase implements IPktFileUpload {
             ?required=${this.required && this.uploadStrategy === 'form'}
             accept=${this.getResolvedAcceptValue()}
             aria-label=${ifDefined(
-              this.label ? undefined : this.multiple ? 'Velg filer' : 'Velg fil',
+              this.label
+                ? undefined
+                : this.multiple
+                  ? this.pktStrings.get('fileupload').openFileDialogLabelMultiple
+                  : this.pktStrings.get('fileupload').openFileDialogLabelSingle,
             )}
             aria-required=${ifDefined(this.required ? 'true' : undefined)}
             aria-invalid=${ifDefined(this.hasEffectiveError ? 'true' : undefined)}
@@ -231,6 +236,7 @@ export class PktFileUpload extends PktFileUploadBase implements IPktFileUpload {
   private renderQueueItem(file: IFileAndTransfer, previewableImages: IFileAndTransfer[]) {
     const fileSize = typeof file.file?.size === 'number' ? this.formatFileSize(file.file.size) : ''
     const operations = this.getQueueItemOperations()
+    const fileuploadStrings = this.pktStrings.get('fileupload')
 
     if (this.itemRenderer === 'thumbnail') {
       const canOpenPreview = this.canOpenPreview(file)
@@ -257,7 +263,7 @@ export class PktFileUpload extends PktFileUploadBase implements IPktFileUpload {
         transferErrorMessage: file.errorMessage,
         transferShowProgress: file.showProgress,
         transferLastProgress: file.lastProgress,
-        loadingText: 'Laster opp',
+        strings: fileuploadStrings,
         truncateTail: this.truncateTail,
         onCancel: (fileId) => this.cancelTransfer(fileId),
         onOpenPreview: (fileId) => this.openPreview(fileId, previewableImages),
@@ -281,7 +287,7 @@ export class PktFileUpload extends PktFileUploadBase implements IPktFileUpload {
       transferErrorMessage: file.errorMessage,
       transferShowProgress: file.showProgress,
       transferLastProgress: file.lastProgress,
-      loadingText: 'Laster opp',
+      strings: fileuploadStrings,
       truncateTail: this.truncateTail,
       onCancel: (fileId) => this.cancelTransfer(fileId),
     })
@@ -381,7 +387,10 @@ export class PktFileUpload extends PktFileUploadBase implements IPktFileUpload {
             ? html`<button
                 type="button"
                 class="pkt-fileupload__image-preview__nav pkt-fileupload__image-preview__nav--prev pkt-btn pkt-btn--medium pkt-btn--secondary pkt-btn--icon-only"
-                aria-label=${`Forrige bilde ${this.previewCurrentIndex} / ${previewableImages.length}`}
+                aria-label=${formatString(fileuploadStrings.previewPrevious, {
+                  index: this.previewCurrentIndex,
+                  total: previewableImages.length,
+                })}
                 @click=${() => this.navigatePreview('prev', previewableImages)}
               >
                 <pkt-icon
@@ -397,7 +406,11 @@ export class PktFileUpload extends PktFileUploadBase implements IPktFileUpload {
             ${hasImage
               ? html`<img
                   src=${imageUrl}
-                  alt=${`${filename} - ${this.previewCurrentIndex + 1} av ${previewableImages.length}`}
+                  alt=${formatString(fileuploadStrings.previewImageAlt, {
+                    filename,
+                    index: this.previewCurrentIndex + 1,
+                    total: previewableImages.length,
+                  })}
                   class="pkt-fileupload__image-preview__image"
                   @error=${() => this.markImageFailed(currentImage.fileId, 'preview')}
                 />`
@@ -417,7 +430,10 @@ export class PktFileUpload extends PktFileUploadBase implements IPktFileUpload {
             ? html`<button
                 type="button"
                 class="pkt-fileupload__image-preview__nav pkt-fileupload__image-preview__nav--next pkt-btn pkt-btn--medium pkt-btn--secondary pkt-btn--icon-only"
-                aria-label=${`Neste bilde ${this.previewCurrentIndex + 2} / ${previewableImages.length}`}
+                aria-label=${formatString(fileuploadStrings.previewNext, {
+                  index: this.previewCurrentIndex + 2,
+                  total: previewableImages.length,
+                })}
                 @click=${() => this.navigatePreview('next', previewableImages)}
               >
                 <pkt-icon
@@ -435,17 +451,18 @@ export class PktFileUpload extends PktFileUploadBase implements IPktFileUpload {
 
   private getQueueItemOperations(): TQueueItemOperation[] {
     const operations: TQueueItemOperation[] = []
+    const fileuploadStrings = this.pktStrings.get('fileupload')
 
     if (this.renameFilesEnabled && this.itemRenderer !== 'thumbnail') {
-      operations.push(createRenameOperation())
+      operations.push(createRenameOperation(fileuploadStrings))
     }
 
     if (this.addCommentsEnabled && this.itemRenderer !== 'thumbnail') {
-      operations.push(createCommentOperation())
+      operations.push(createCommentOperation(fileuploadStrings))
     }
 
     operations.push(...this.extraOperations)
-    operations.push(createRemoveOperation((fileId) => this.removeFileItem(fileId)))
+    operations.push(createRemoveOperation((fileId) => this.removeFileItem(fileId), fileuploadStrings))
 
     return operations
   }

package/src/components/header/header-global.ts

@@ -583,11 +583,12 @@ export class PktHeaderGlobal extends PktElement<IPktHeaderGlobal> implements IPk
                 locale=${this.locale}
                 open
                 mobile-breakpoint=${this.mobileBreakpoint}
+                .strings=${this.strings}
               ></pkt-header-menu>
             `
           : html`
               <nav class="pkt-header-menu pkt-header-menu--open">
-                <p class="pkt-header-menu__error">Kunne ikke laste meny.</p>
+                <p class="pkt-header-menu__error">${this.pktStrings.get('header').menuLoadError}</p>
               </nav>
             `}
       </div>

package/src/components/header/header-service.test.ts

@@ -443,6 +443,21 @@ describe('pkt-header-service', () => {
       expect(element.userMenu[0].title).toBe('Mine bookinger')
       expect(element.userMenu[1].title).toBe('Innstillinger')
     })
+
+    it('renders the icon for link items (#3675)', async () => {
+      const { element } = await createHeaderServiceTest({ 'service-name': 'Svc', 'opened-menu': 'user' })
+      element.user = { name: 'Aksel' }
+      element.userMenu = [{ title: 'Mine bookinger', iconName: 'heart', target: '/bookinger' }]
+      await element.updateComplete
+      await waitForNestedElements()
+
+      const link = element.querySelector('pkt-link[href="/bookinger"]') as HTMLElement & {
+        updateComplete: Promise<boolean>
+      }
+      await link.updateComplete
+      expect(link.getAttribute('iconname')).toBe('heart')
+      expect(link.querySelector('pkt-icon[name="heart"]')).toBeInTheDocument()
+    })
   })
 
   describe('events', () => {

package/src/components/header/header-user-menu.ts

@@ -79,7 +79,7 @@ export class PktHeaderUserMenu
     if (isLink) {
       return html`
         <pkt-link
-          icon-name=${item.iconName || nothing}
+          iconName=${item.iconName || nothing}
           href=${item.href}
           class="pkt-user-menu__link ${className || ''}"
         >

package/src/components/header-menu/header-menu.ts

@@ -175,7 +175,7 @@ export class PktHeaderMenu extends PktElement<IPktHeaderMenu> implements IPktHea
     if (this.loadState === 'loading') {
       return html`
         <nav aria-busy="true">
-          <p class="pkt-header-menu__loading">Laster meny…</p>
+          <p class="pkt-header-menu__loading">${this.pktStrings.get('header').menuLoading}</p>
         </nav>
       `
     }
@@ -183,7 +183,7 @@ export class PktHeaderMenu extends PktElement<IPktHeaderMenu> implements IPktHea
     if (this.loadState === 'error' || !this.localeData) {
       return html`
         <nav aria-hidden=${!this.open}>
-          <p class="pkt-header-menu__error">Kunne ikke laste meny.</p>
+          <p class="pkt-header-menu__error">${this.pktStrings.get('header').menuLoadError}</p>
         </nav>
       `
     }

package/src/components/listbox/listbox.ts

@@ -5,7 +5,7 @@ import { PktElement } from '@/base-elements/element'
 import { repeat } from 'lit/directives/repeat.js'
 import { classMap } from 'lit/directives/class-map.js'
 import type { IPktComboboxOption } from 'shared-types/combobox'
-import type { IPktStringsProps } from 'shared-strings'
+import { formatString, type IPktStringsProps } from 'shared-strings'
 import { uuidish } from 'shared-utils/utils'
 import { filterOptionsBySearch } from 'shared-utils/combobox/option-utils'
 import {
@@ -179,7 +179,7 @@ export class PktListbox extends PktElement<IPktListbox> implements IPktListbox {
         name="exclamation-mark-circle"
         size="large"
       ></pkt-icon>
-      Tom liste
+      ${this.pktStrings.get('listbox').empty}
     </div>`
   }
 
@@ -258,7 +258,9 @@ export class PktListbox extends PktElement<IPktListbox> implements IPktListbox {
             @keydown=${this.handleOptionKeydown}
           >
             <pkt-icon class="pkt-listbox__banner-icon" name="plus-sign" size="large"></pkt-icon>
-            Legg til "${this.customUserInput}"
+            ${formatString(this.pktStrings.get('listbox').addValue, {
+              value: this.customUserInput ?? '',
+            })}
           </div>
         `
       : nothing
@@ -270,7 +272,10 @@ export class PktListbox extends PktElement<IPktListbox> implements IPktListbox {
     return this.isMultiSelect && this._selectedOptions > 0 && this.maxLength > 0
       ? html`
           <div class="pkt-listbox__banner pkt-listbox__banner--maximum-reached">
-            ${this._selectedOptions} av maks ${this.maxLength} mulige er valgt.
+            ${formatString(this.pktStrings.get('listbox').maxReached, {
+              selected: this._selectedOptions,
+              max: this.maxLength,
+            })}
           </div>
         `
       : nothing

package/src/components/messagebox/messagebox.ts

@@ -60,7 +60,7 @@ export class PktMessagebox extends PktElementWithSlot implements IPktMessagebox
             <button
               @click=${this.close}
               class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
-              aria-label="Lukk"
+              aria-label=${this.pktStrings.get('generic').close}
             >
               <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
             </button>

package/src/components/modal/modal.ts

@@ -198,13 +198,13 @@ export class PktModal extends PktElementWithSlot implements IPktModal {
                   ? html`<div class="${classMap(closeButtonClasses)}">
                       <pkt-button
                         @click=${(event: Event) => this.close(event)}
-                        aria-label="close"
+                        aria-label=${this.pktStrings.get('generic').close}
                         iconname="close"
                         variant="icon-only"
                         size="medium"
                         skin=${isCloseButtonSkinDefault ? 'tertiary' : 'primary'}
                       >
-                        Lukk
+                        ${this.pktStrings.get('generic').close}
                       </pkt-button>
                     </div>`
                   : html`<div class="pkt-modal__noCloseButton"></div>`}

package/dist/checkbox-DlzVGBum.cjs

@@ -1,40 +0,0 @@
-const e=require("./element-CewjrA4g.cjs"),t=require("./class-map-B0FX3YsK.cjs"),n=require("./ref-HT6KRjxp.cjs"),r=require("./input-element-BdIWsDl-.cjs");var i=class extends r.t{constructor(...e){super(...e),this.inputRef=n.t(),this.value=``,this.checkHelptext=null,this.defaultChecked=!1,this.hasTile=!1,this.isSwitch=!1,this.labelPosition=`right`,this.hideLabel=!1,this.checked=null,this.indeterminate=!1,this.type=`checkbox`,this.tagText=null,this.optionalTag=!1,this.requiredTag=!1}connectedCallback(){super.connectedCallback()}attributeChangedCallback(e,t,n){e===`defaultChecked`&&!this.checked&&(this.checked=this.defaultChecked),e===`checked`&&(this.checked=this.checked===``||this.checked===`true`||this.checked===!0,this.inputRef.value&&(this.inputRef.value.checked=this.checked)),e===`indeterminate`&&(this.indeterminate=this.indeterminate===``||this.indeterminate===`true`||this.indeterminate===!0,this.inputRef.value&&(this.inputRef.value.indeterminate=this.indeterminate)),super.attributeChangedCallback(e,t,n)}firstUpdated(e){this.inputRef.value&&(this.inputRef.value.indeterminate=this.indeterminate===``||this.indeterminate===`true`||this.indeterminate===!0),super.firstUpdated(e)}willUpdate(e){super.willUpdate(e),e.has(`defaultChecked`)&&!this.checked&&(this.checked=this.defaultChecked)}updated(e){e.has(`checked`)&&this.inputRef.value&&(this.inputRef.value.checked=this.checked===``||this.checked===`true`||this.checked===!0),e.has(`indeterminate`)&&this.inputRef.value&&(this.inputRef.value.indeterminate=this.indeterminate===``||this.indeterminate===`true`||this.indeterminate===!0),super.updated(e)}render(){let r=t.t({"pkt-input-check__input":!0,"pkt-input-check__input--tile":this.hasTile,"pkt-input-check__input--tile-disabled":this.disabled&&this.hasTile}),i=t.t({"pkt-input-check__input-checkbox":!0,"pkt-input-check__input-checkbox--error":this.hasError}),a=t.t({"pkt-input-check__input-label":!0,"pkt-input-check__input-label--disabled":this.disabled,"pkt-input-check__input-label--left":this.labelPosition===`left`,"pkt-input-check__input-label--right":this.labelPosition===`right`,"pkt-sr-only":this.hideLabel}),o=`pkt-tag pkt-tag--small pkt-tag--thin-text`,s=this.pktStrings.get(`forms`),c=()=>e._`
-        ${this.tagText?e._`<span class=${o+` pkt-tag--gray`}>${this.tagText}</span>`:e.h}
-        ${this.optionalTag?e._`<span class=${o+` pkt-tag--blue-light`}
-                >${this.optionalText??s.optional}</span
-              >`:e.h}
-        ${this.requiredTag?e._`<span class=${o+` pkt-tag--beige`}
-                >${this.requiredText??s.required}</span
-              >`:e.h}
-      `,l=this.id+`-check-label`,u=this.id+`-check-helptext`,d=()=>e._`
-        <label class=${a} for=${this.id+`-internal`}>
-          <span id=${l}>${this.label} ${c()}</span>
-          ${this.checkHelptext?e._`<div id=${u} class="pkt-input-check__input-helptext">
-                  ${this.checkHelptext}
-                </div>`:e.h}
-        </label>
-      `;return e._`
-      <div class="pkt-input-check">
-        <div class=${r}>
-          ${this.labelPosition===`left`?d():e.h}
-          <input
-            id=${this.id+`-internal`}
-            class=${i}
-            type="checkbox"
-            ?disabled=${this.disabled}
-            name=${this.name+`-internal`}
-            ${n.n(this.inputRef)}
-            @change=${this.handleChange}
-            @input=${this.handleInput}
-            @click=${this.handleClick}
-            @blur=${this.onBlur}
-            @focus=${this.onFocus}
-            ?checked=${this.checked}
-            role=${this.isSwitch?`switch`:`checkbox`}
-            aria-labelledby=${this.label?l:e.h}
-            aria-describedby=${this.checkHelptext?u:e.h}
-          />
-          ${this.labelPosition===`right`?d():e.h}
-        </div>
-      </div>
-    `}handleInput(e){e.stopImmediatePropagation(),this.onInput()}handleClick(e){if(this.disabled)return e.preventDefault(),e.stopImmediatePropagation(),!1}handleChange(e){if(this.disabled)return e.preventDefault(),e.stopImmediatePropagation(),!1;this.toggleChecked(e)}toggleChecked(e){if(this.disabled){e.preventDefault(),e.stopImmediatePropagation();return}let t=e.target;if(t&&t.disabled){e.preventDefault(),e.stopImmediatePropagation();return}e.stopImmediatePropagation(),this.touched=!0,this.inputRef.value&&(this.checked=this.inputRef.value.matches(`:checked`),this.valueChecked(this.checked))}};e.n([e.u({type:String,reflect:!0})],i.prototype,`value`,void 0),e.n([e.u({type:String})],i.prototype,`checkHelptext`,void 0),e.n([e.u({type:Boolean})],i.prototype,`defaultChecked`,void 0),e.n([e.u({type:Boolean})],i.prototype,`hasTile`,void 0),e.n([e.u({type:Boolean})],i.prototype,`isSwitch`,void 0),e.n([e.u({type:String})],i.prototype,`labelPosition`,void 0),e.n([e.u({type:Boolean})],i.prototype,`hideLabel`,void 0),e.n([e.u({type:Boolean,reflect:!0})],i.prototype,`checked`,void 0),e.n([e.u({type:Boolean,reflect:!0})],i.prototype,`indeterminate`,void 0),e.n([e.u({type:String,reflect:!0})],i.prototype,`type`,void 0),e.n([e.u({type:String})],i.prototype,`tagText`,void 0),e.n([e.u({type:Boolean})],i.prototype,`optionalTag`,void 0),e.n([e.u({type:String})],i.prototype,`optionalText`,void 0),e.n([e.u({type:Boolean})],i.prototype,`requiredTag`,void 0),e.n([e.u({type:String})],i.prototype,`requiredText`,void 0);try{e.d(`pkt-checkbox`)(i)}catch{console.warn(`Forsøker å definere <pkt-checkbox>, men den er allerede definert`)}var a=i;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return a}});

package/dist/if-defined-CjRKmMQs.cjs

@@ -1 +0,0 @@
-const e=require("./element-CewjrA4g.cjs");var t=t=>t??e.h;Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return t}});