@oslokommune/punkt-elements 16.13.2 → 16.15.0

package/src/components/fileupload/fileupload.ts

@@ -0,0 +1,469 @@
+import { html } from 'lit'
+import { classMap } from 'lit/directives/class-map.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
+import { customElement, state } from 'lit/decorators.js'
+
+import { defaultFileUploadStrings } from 'shared-types'
+import { navigateCyclic, trapTabInside, type IFileAndTransfer } from 'shared-utils/fileupload'
+
+import '@/components/alert'
+import '@/components/icon'
+import '@/components/input-wrapper'
+import '@/components/modal'
+import '@/components/progressbar'
+import { PktFileUploadBase } from './fileupload-base'
+import {
+  createCommentOperation,
+  createRemoveOperation,
+  createRenameOperation,
+} from './fileupload-operations'
+import { renderFilenameQueueItem, renderThumbnailQueueItem } from './fileupload-renderers'
+import type {
+  FileItem,
+  IPktFileUpload,
+  TQueueItemOperation,
+  TQueueOperationContext,
+  TQueueOperationLabel,
+  TFileComment,
+  TFileTransfer,
+  TFileUploadItemRenderer,
+  TTransferCancelledDetail,
+  TTransferProgress,
+  TFileValidateDetail,
+  TFileValidator,
+  TUploadStrategy,
+} from './fileupload-types'
+export type {
+  FileItem,
+  IPktFileUpload,
+  TQueueItemOperation,
+  TQueueOperationContext,
+  TQueueOperationLabel,
+  TFileComment,
+  TFileTransfer,
+  TFileUploadItemRenderer,
+  TTransferCancelledDetail,
+  TTransferProgress,
+  TFileValidateDetail,
+  TFileValidator,
+  TUploadStrategy,
+}
+
+type FileImageFailureFlags = { thumbnail?: boolean; preview?: boolean }
+
+@customElement('pkt-fileupload')
+export class PktFileUpload extends PktFileUploadBase implements IPktFileUpload {
+  @state() private activeOperationByFileId: Record<string, string | undefined> = {}
+  @state() private isPreviewModalOpen = false
+  @state() private previewCurrentIndex = 0
+  @state() private failedImageFileIds: Record<string, FileImageFailureFlags> = {}
+
+  render() {
+    const content = this.renderContent()
+
+    if (!this.label) return content
+
+    return html`
+      <pkt-input-wrapper
+        .forId=${`${this.id}-input`}
+        .label=${this.label}
+        .helptext=${this.helptext}
+        ?disabled=${this.disabled}
+        ?hasError=${this.hasEffectiveError}
+        ?optionalTag=${this.optionalTag}
+        ?requiredTag=${this.requiredTag}
+        class=${classMap({
+          'pkt-fileupload-wrapper': true,
+          'pkt-fileupload-wrapper--full-width': this.fullwidth,
+        })}
+      >
+        ${content}
+      </pkt-input-wrapper>
+    `
+  }
+
+  private renderContent() {
+    const filesAndTransfers = this.getSortedFilesAndTransfers()
+    const previewableImages = this.getPreviewableImages(filesAndTransfers)
+    const supportedFormatsText = this.getSupportedFormatsText()
+    const helptextId = !this.label && this.helptext ? `${this.id}-helptext` : undefined
+    const errorId = this.hasEffectiveError ? `${this.id}-error` : undefined
+    const describedBy = [helptextId, errorId].filter(Boolean).join(' ') || undefined
+    const isThumbnailView = this.itemRenderer === 'thumbnail'
+    const dropZoneCopy = isThumbnailView
+      ? this.multiple
+        ? {
+            dragInactive: defaultFileUploadStrings.dropZoneDragMultipleThumbnail,
+            dragActive: defaultFileUploadStrings.dropZoneDragActiveMultipleThumbnail,
+            openFileDialog: defaultFileUploadStrings.dropZoneOpenFileDialogMultipleThumbnail,
+          }
+        : {
+            dragInactive: defaultFileUploadStrings.dropZoneDragSingleThumbnail,
+            dragActive: defaultFileUploadStrings.dropZoneDragActiveSingleThumbnail,
+            openFileDialog: defaultFileUploadStrings.dropZoneOpenFileDialogSingleThumbnail,
+          }
+      : this.multiple
+        ? {
+            dragInactive: defaultFileUploadStrings.dropZoneDragMultiple,
+            dragActive: defaultFileUploadStrings.dropZoneDragActiveMultiple,
+            openFileDialog: defaultFileUploadStrings.dropZoneOpenFileDialogMultiple,
+          }
+        : {
+            dragInactive: defaultFileUploadStrings.dropZoneDragSingle,
+            dragActive: defaultFileUploadStrings.dropZoneDragActiveSingle,
+            openFileDialog: defaultFileUploadStrings.dropZoneOpenFileDialogSingle,
+          }
+
+    return html`
+      <div
+        class=${classMap({
+          'pkt-fileupload': true,
+          'pkt-fileupload--full-width': this.fullwidth,
+          'pkt-fileupload--error': this.hasEffectiveError,
+          'pkt-fileupload--disabled': this.disabled,
+        })}
+        aria-disabled=${String(this.disabled)}
+        ?inert=${this.disabled}
+      >
+        <div class="pkt-sr-only" aria-live="polite" aria-atomic="true">
+          ${this.getSrUploadedMessage()}
+        </div>
+        <div class="pkt-sr-only" aria-live="assertive" aria-atomic="true">
+          ${this.getSrErrorsMessage()}
+        </div>
+        <div
+          class=${classMap({
+            'pkt-fileupload__drop-zone': true,
+            'pkt-fileupload__drop-zone--drag-active': this.isDragActive,
+            'pkt-fileupload__drop-zone--disabled': this.disabled,
+          })}
+          @dragover=${this.onDragOver}
+          @dragleave=${this.onDragLeave}
+          @drop=${this.onDrop}
+          @click=${this.onDropZoneClick}
+        >
+          <input
+            id=${`${this.id}-input`}
+            type="file"
+            name=${ifDefined(this.uploadStrategy === 'form' ? this.name : undefined)}
+            ?multiple=${this.multiple}
+            ?disabled=${this.disabled}
+            ?required=${this.required && this.uploadStrategy === 'form'}
+            accept=${this.getResolvedAcceptValue()}
+            aria-label=${ifDefined(
+              this.label ? undefined : this.multiple ? 'Velg filer' : 'Velg fil',
+            )}
+            aria-required=${ifDefined(this.required ? 'true' : undefined)}
+            aria-invalid=${ifDefined(this.hasEffectiveError ? 'true' : undefined)}
+            aria-describedby=${ifDefined(describedBy)}
+            @change=${this.onNativeFileChange}
+          />
+          ${this.uploadStrategy === 'custom'
+            ? filesAndTransfers.map(
+                (fileItem) =>
+                  html`<input type="hidden" name=${this.name} value=${fileItem.fileId} />`,
+              )
+            : null}
+          <div class="pkt-fileupload__drop-zone__placeholder">
+            <pkt-icon
+              name="attachment"
+              class="pkt-fileupload__drop-zone__placeholder__icon"
+              aria-hidden="true"
+            ></pkt-icon>
+            <p class="pkt-fileupload__drop-zone__placeholder__title">
+              ${this.isDragActive
+                ? `${dropZoneCopy.dragActive} ...`
+                : html`${dropZoneCopy.dragInactive}
+                    <button
+                      type="button"
+                      class="pkt-fileupload__drop-zone__placeholder__title__open-file-dialog"
+                      @click=${this.openFileDialog}
+                    >
+                      ${dropZoneCopy.openFileDialog}
+                    </button>`}
+            </p>
+            ${supportedFormatsText
+              ? html`<p class="pkt-fileupload__drop-zone__placeholder__formats">
+                  ${defaultFileUploadStrings.supportedFormatsPrefix} ${supportedFormatsText}
+                </p>`
+              : null}
+          </div>
+        </div>
+        ${this.hasEffectiveError
+          ? html`
+              <pkt-alert
+                skin="error"
+                role="alert"
+                aria-live="assertive"
+                compact
+                id=${`${this.id}-error`}
+                class="pkt-alert--error pkt-fileupload__error-alert"
+              >
+                ${this.effectiveErrorMessage}
+              </pkt-alert>
+            `
+          : null}
+        ${filesAndTransfers.length > 0
+          ? html`<ul class="pkt-fileupload__queue-display">
+              ${filesAndTransfers.map((file) => this.renderQueueItem(file, previewableImages))}
+            </ul>`
+          : null}
+        ${this.renderPreviewModal(previewableImages)}
+      </div>
+    `
+  }
+
+  private renderQueueItem(file: IFileAndTransfer, previewableImages: IFileAndTransfer[]) {
+    const fileSize = typeof file.file?.size === 'number' ? this.formatFileSize(file.file.size) : ''
+    const operations = this.getQueueItemOperations()
+
+    if (this.itemRenderer === 'thumbnail') {
+      const canOpenPreview = this.canOpenPreview(file)
+      const thumbnailUrl = this.failedImageFileIds[file.fileId]?.thumbnail
+        ? undefined
+        : this.getThumbnailUrl(file)
+      return renderThumbnailQueueItem({
+        file,
+        inputName: this.name,
+        disabled: this.disabled,
+        fileSize,
+        operations,
+        activeOperationId: this.activeOperationByFileId[file.fileId],
+        onActivateOperation: (fileId, operationId) => this.activateOperation(fileId, operationId),
+        onCloseOperation: (fileId) => this.closeOperation(fileId),
+        getFileAttribute: <T>(fileId: string, name: string) =>
+          this.getFileAttribute<T>(fileId, name),
+        setFileAttribute: (fileId: string, name: string, value: unknown) =>
+          this.setFileAttribute(fileId, name, value),
+        thumbnailUrl,
+        previewEnabled: this.enableImagePreview,
+        canOpenPreview,
+        transferProgress: file.progress,
+        transferErrorMessage: file.errorMessage,
+        transferShowProgress: file.showProgress,
+        transferLastProgress: file.lastProgress,
+        loadingText: 'Laster opp',
+        truncateTail: this.truncateTail,
+        onCancel: (fileId) => this.cancelTransfer(fileId),
+        onOpenPreview: (fileId) => this.openPreview(fileId, previewableImages),
+        onThumbnailImageError: (fileId) => this.markImageFailed(fileId, 'thumbnail'),
+      })
+    }
+
+    return renderFilenameQueueItem({
+      file,
+      inputName: this.name,
+      disabled: this.disabled,
+      fileSize,
+      operations,
+      activeOperationId: this.activeOperationByFileId[file.fileId],
+      onActivateOperation: (fileId, operationId) => this.activateOperation(fileId, operationId),
+      onCloseOperation: (fileId) => this.closeOperation(fileId),
+      getFileAttribute: <T>(fileId: string, name: string) => this.getFileAttribute<T>(fileId, name),
+      setFileAttribute: (fileId: string, name: string, value: unknown) =>
+        this.setFileAttribute(fileId, name, value),
+      transferProgress: file.progress,
+      transferErrorMessage: file.errorMessage,
+      transferShowProgress: file.showProgress,
+      transferLastProgress: file.lastProgress,
+      loadingText: 'Laster opp',
+      truncateTail: this.truncateTail,
+      onCancel: (fileId) => this.cancelTransfer(fileId),
+    })
+  }
+
+  private markImageFailed(fileId: string, kind: keyof FileImageFailureFlags): void {
+    this.failedImageFileIds = {
+      ...this.failedImageFileIds,
+      [fileId]: { ...this.failedImageFileIds[fileId], [kind]: true },
+    }
+  }
+
+  private getPreviewableImages(filesAndTransfers: IFileAndTransfer[]): IFileAndTransfer[] {
+    if (!this.enableImagePreview) return []
+    return filesAndTransfers.filter((item) => item.progress === 'done' && this.isImageFile(item))
+  }
+
+  private canOpenPreview(file: IFileAndTransfer): boolean {
+    return this.enableImagePreview && file.progress === 'done' && this.isImageFile(file)
+  }
+
+  private openPreview(fileId: string, previewableImages: IFileAndTransfer[]): void {
+    const index = previewableImages.findIndex((item) => item.fileId === fileId)
+    if (index < 0) return
+    this.previewCurrentIndex = index
+    this.isPreviewModalOpen = true
+    this.failedImageFileIds = {
+      ...this.failedImageFileIds,
+      [fileId]: { ...this.failedImageFileIds[fileId], preview: false },
+    }
+  }
+
+  private closePreview = (): void => {
+    this.isPreviewModalOpen = false
+  }
+
+  private navigatePreview(direction: 'prev' | 'next', previewableImages: IFileAndTransfer[]): void {
+    if (previewableImages.length === 0) return
+    this.previewCurrentIndex = navigateCyclic(
+      this.previewCurrentIndex,
+      direction,
+      previewableImages.length,
+    )
+  }
+
+  private onPreviewKeyDown = (
+    event: KeyboardEvent,
+    previewableImages: IFileAndTransfer[],
+  ): void => {
+    if (!this.isPreviewModalOpen) return
+    if (event.key === 'Tab') {
+      trapTabInside(event, event.currentTarget as HTMLElement | null)
+      return
+    }
+    switch (event.key) {
+      case 'ArrowLeft':
+        event.preventDefault()
+        this.navigatePreview('prev', previewableImages)
+        break
+      case 'ArrowRight':
+        event.preventDefault()
+        this.navigatePreview('next', previewableImages)
+        break
+      case 'Escape':
+        event.preventDefault()
+        this.closePreview()
+        break
+      default:
+        break
+    }
+  }
+
+  private renderPreviewModal(previewableImages: IFileAndTransfer[]) {
+    if (!this.enableImagePreview || previewableImages.length === 0) return null
+    const currentImage = previewableImages[this.previewCurrentIndex]
+    if (!currentImage) return null
+    const hasMultipleImages = previewableImages.length > 1
+    const imageUrl = this.getThumbnailUrl(currentImage)
+    const hasImage = !!imageUrl && !this.failedImageFileIds[currentImage.fileId]?.preview
+    const filename =
+      currentImage.attributes?.targetFilename || currentImage.file?.name || 'Forhåndsvisning'
+
+    return html`
+      <pkt-modal
+        .open=${this.isPreviewModalOpen}
+        .headingText=${filename}
+        closeOnBackdropClick
+        class="pkt-fileupload__image-preview-modal"
+        @close=${this.closePreview}
+        @keydown=${(event: KeyboardEvent) => this.onPreviewKeyDown(event, previewableImages)}
+      >
+        <div class="pkt-fileupload__image-preview">
+          ${hasMultipleImages
+            ? 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}`}
+                @click=${() => this.navigatePreview('prev', previewableImages)}
+              >
+                <pkt-icon
+                  class="pkt-btn__icon pkt-icon"
+                  name="chevron-thin-left"
+                  aria-hidden="true"
+                ></pkt-icon>
+                <span class="pkt-btn__text"></span>
+              </button>`
+            : null}
+
+          <div class="pkt-fileupload__image-preview__content">
+            ${hasImage
+              ? html`<img
+                  src=${imageUrl}
+                  alt=${`${filename} - ${this.previewCurrentIndex + 1} av ${previewableImages.length}`}
+                  class="pkt-fileupload__image-preview__image"
+                  @error=${() => this.markImageFailed(currentImage.fileId, 'preview')}
+                />`
+              : html`<pkt-icon
+                  name="picture"
+                  class="pkt-fileupload__queue-display__item__icon pkt-icon--medium"
+                  aria-hidden="true"
+                ></pkt-icon>`}
+          </div>
+
+          ${hasMultipleImages
+            ? html`<span class="pkt-fileupload__image-preview__counter">
+                ${this.previewCurrentIndex + 1} / ${previewableImages.length}
+              </span>`
+            : null}
+          ${hasMultipleImages
+            ? 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}`}
+                @click=${() => this.navigatePreview('next', previewableImages)}
+              >
+                <pkt-icon
+                  class="pkt-btn__icon pkt-icon"
+                  name="chevron-thin-right"
+                  aria-hidden="true"
+                ></pkt-icon>
+                <span class="pkt-btn__text"></span>
+              </button>`
+            : null}
+        </div>
+      </pkt-modal>
+    `
+  }
+
+  private getQueueItemOperations(): TQueueItemOperation[] {
+    const operations: TQueueItemOperation[] = []
+
+    if (this.renameFilesEnabled && this.itemRenderer !== 'thumbnail') {
+      operations.push(createRenameOperation())
+    }
+
+    if (this.addCommentsEnabled && this.itemRenderer !== 'thumbnail') {
+      operations.push(createCommentOperation())
+    }
+
+    operations.push(...this.extraOperations)
+    operations.push(createRemoveOperation((fileId) => this.removeFileItem(fileId)))
+
+    return operations
+  }
+
+  private activateOperation(fileId: string, operationId: string): void {
+    this.activeOperationByFileId = {
+      ...this.activeOperationByFileId,
+      [fileId]: operationId,
+    }
+  }
+
+  private closeOperation(fileId: string): void {
+    this.activeOperationByFileId = {
+      ...this.activeOperationByFileId,
+      [fileId]: undefined,
+    }
+  }
+
+  private getFileAttribute<T>(fileId: string, name: string): T | undefined {
+    const currentFile = this.getCurrentFiles().find((item) => item.fileId === fileId)
+    if (!currentFile) return undefined
+    return (currentFile.attributes?.[name] as T | undefined) ?? undefined
+  }
+
+  private setFileAttribute(fileId: string, name: string, value: unknown): void {
+    const currentFile = this.getCurrentFiles().find((item) => item.fileId === fileId)
+    if (!currentFile) return
+    const nextAttributes = {
+      ...currentFile.attributes,
+      [name]: value,
+    }
+    if (value === undefined) {
+      delete nextAttributes[name]
+    }
+    this.updateFileItem(fileId, {
+      attributes: nextAttributes,
+    })
+  }
+}

package/src/components/fileupload/index.ts

@@ -0,0 +1,34 @@
+import {
+  PktFileUpload,
+  type FileItem,
+  type IPktFileUpload,
+  type TFileComment,
+  type TQueueItemOperation,
+  type TQueueOperationContext,
+  type TQueueOperationLabel,
+  type TFileTransfer,
+  type TFileUploadItemRenderer,
+  type TTransferCancelledDetail,
+  type TTransferProgress,
+  type TFileValidateDetail,
+  type TFileValidator,
+  type TUploadStrategy,
+} from './fileupload'
+
+export { PktFileUpload }
+export type {
+  FileItem,
+  IPktFileUpload,
+  TFileComment,
+  TQueueItemOperation,
+  TQueueOperationContext,
+  TQueueOperationLabel,
+  TFileTransfer,
+  TFileUploadItemRenderer,
+  TTransferCancelledDetail,
+  TTransferProgress,
+  TFileValidateDetail,
+  TFileValidator,
+  TUploadStrategy,
+}
+export default PktFileUpload

package/src/components/index.ts

@@ -9,6 +9,7 @@ export { PktCard } from '@/components/card'
 export { PktCombobox } from './combobox'
 export { PktConsent } from './consent'
 export { PktCheckbox } from '@/components/checkbox'
+export { PktFileUpload } from '@/components/fileupload'
 export { PktDateTags } from '@/components/datepicker/date-tags.js'
 export { PktDatepicker } from '@/components/datepicker/datepicker.js'
 export { PktHeader, PktHeaderService, PktHeaderUserMenu } from '@/components/header'
@@ -88,5 +89,20 @@ export type { IPktBreadcrumbs, IBreadcrumbItem } from '@/components/breadcrumbs'
 export type { IPktLoader, TPktLoaderVariant } from '@/components/loader'
 
 export type { IPktConsent } from '@/components/consent'
+export type {
+  FileItem,
+  IPktFileUpload,
+  TFileComment,
+  TQueueItemOperation,
+  TQueueOperationContext,
+  TQueueOperationLabel,
+  TFileTransfer,
+  TFileUploadItemRenderer,
+  TTransferCancelledDetail,
+  TTransferProgress,
+  TFileValidateDetail,
+  TFileValidator,
+  TUploadStrategy,
+} from '@/components/fileupload'
 
 export type { IPktTimepicker } from '@/components/timepicker'

package/src/components/input-wrapper/input-wrapper.ts

@@ -7,8 +7,8 @@ import { classMap } from 'lit/directives/class-map.js'
 import { customElement, property } from 'lit/decorators.js'
 import { ElementProps } from '@/types/typeUtils'
 import { uuidish } from 'shared-utils/utils'
-import { booleanishConverter } from 'shared-types'
-import type { Booleanish } from 'shared-types'
+import { booleanishConverter, type Booleanish } from 'shared-types'
+import { FocusModalityController } from '@/controllers/focus-modality-controller'
 import specs from 'componentSpecs/input-wrapper.json'
 import '@/components/helptext'
 import '@/components/icon'
@@ -74,6 +74,12 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
     super.updated(changedProperties)
   }
 
+  // Speiler navigeringsmodus til den interne pkt-inputwrapper-div-en som
+  // data-navtype="pointer" (eller fjerner attributtet) så CSS kan skille
+  // dempet fokus (klikk) fra kraftig fokus (tab). Controlleren registrerer
+  // seg selv på hosten i konstruktøren, så vi trenger ikke beholde referansen.
+  focusModality = new FocusModalityController(this, '.pkt-inputwrapper')
+
   render() {
     const classes = {
       'pkt-inputwrapper': true,
@@ -148,7 +154,8 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
           @toggleHelpText=${(e: CustomEvent) => {
             this.toggleDropdown(e)
           }}
-        >${slotContent(this, 'helptext')}</pkt-helptext>
+          >${slotContent(this, 'helptext')}</pkt-helptext
+        >
       `
     }