@oslokommune/punkt-elements 19.3.0 → 19.3.1

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