typo3-typescript-sources 13.4.26 → 14.0.0

package/backend/context-menu.ts

@@ -15,11 +15,11 @@ import { AjaxResponse } from '@typo3/core/ajax/ajax-response';
 import AjaxRequest from '@typo3/core/ajax/ajax-request';
 import ContextMenuActions from './context-menu-actions';
 import '@typo3/backend/element/spinner-element';
-import { customElement, queryAll, state } from 'lit/decorators.js';
+import { customElement, queryAll, state } from 'lit/decorators';
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
 import { delay } from '@typo3/core/lit-helper';
-import { styleMap } from 'lit/directives/style-map.js';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { styleMap } from 'lit/directives/style-map';
+import { unsafeHTML } from 'lit/directives/unsafe-html';
 import { Task, initialState } from '@lit/task';
 import Notification from '@typo3/backend/notification';
 

package/backend/copy-to-clipboard.ts

@@ -11,7 +11,7 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators';
 import { PseudoButtonLitElement } from '@typo3/backend/element/pseudo-button';
 import Notification from '@typo3/backend/notification';
 import { lll } from '@typo3/core/lit-helper';

package/backend/date-time-picker.ts

@@ -18,7 +18,7 @@ import ThrottleEvent from '@typo3/core/event/throttle-event';
 import type { PostValidationEvent } from '@typo3/backend/form-engine-validation';
 import '@typo3/backend/input/clearable';
 
-const ISO8601_UTC = 'ISO8601_UTC';
+const ISO8601_LOCALTIME = 'ISO8601_LOCALTIME';
 
 interface FlatpickrInputElement extends HTMLInputElement {
   _flatpickr: flatpickr.Instance;
@@ -150,31 +150,25 @@ class DateTimePicker {
       // We configure a dummy dateFormat token and use luxon parsing/formatting
       // internally, as flatpickr cannot be configured to ignore timezones
       // (in order to behave similar to <input type=datetime-local>)
-      dateFormat: ISO8601_UTC,
+      dateFormat: ISO8601_LOCALTIME,
       defaultHour: now.getHours(),
       defaultMinute: now.getMinutes(),
       enableSeconds: false,
       enableTime: false,
       formatDate: (date: Date, format: string) => {
         const dt = DateTime.fromJSDate(date);
-        if (format === ISO8601_UTC) {
-          // JS dates are always encoded in localtime (flatpickr can only operate in localtime) and are now "intepreted" as UTC:
-          // We discard the intermediate local-time offset; that means the hours and minutes from localtime are rendered as-is
-          return dt.toUTC().plus(dt.offset * 60 * 1000).toISO({ suppressMilliseconds: true });
+        if (format === ISO8601_LOCALTIME) {
+          return dt.toISO({ suppressMilliseconds: true, includeOffset: false });
         }
         return dt.toFormat(format);
       },
       parseDate: (currentDateString: string, format: string): Date => {
-        if (format === ISO8601_UTC) {
-          const isoDt = DateTime.fromISO(currentDateString, { zone: 'utc' });
-          if (!isoDt.isValid) {
+        if (format === ISO8601_LOCALTIME) {
+          const localDate = DateTime.fromISO(currentDateString);
+          if (!localDate.isValid) {
             throw new Error('Invalid ISO8601 date: ' + currentDateString);
           }
-          const localDate = isoDt.toLocal();
-          // This is the reverse operation of the formatting in `formatDate`:
-          // We substract the localtime offset to generate a local-time JS Date instance,
-          // that will contain the same local-time hour/time values as the UTC input.
-          return localDate.minus(localDate.offset * 60 * 1000).toJSDate();
+          return localDate.toJSDate();
         }
         return DateTime.fromFormat(currentDateString, format).toJSDate();
       },
@@ -264,11 +258,11 @@ class DateTimePicker {
     }
 
     if (inputElement.dataset.dateMinDate !== undefined) {
-      options.minDate = options.parseDate(inputElement.dataset.dateMinDate, ISO8601_UTC);
+      options.minDate = options.parseDate(inputElement.dataset.dateMinDate, ISO8601_LOCALTIME);
       options.minDate.setSeconds(0);
     }
     if (inputElement.dataset.dateMaxDate !== undefined) {
-      options.maxDate = options.parseDate(inputElement.dataset.dateMaxDate, ISO8601_UTC);
+      options.maxDate = options.parseDate(inputElement.dataset.dateMaxDate, ISO8601_LOCALTIME);
       options.maxDate.setSeconds(59);
     }
 

package/backend/drag-tooltip.ts

@@ -12,7 +12,7 @@
  */
 
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators';
 import { BroadcastMessage } from '@typo3/backend/broadcast-message';
 import BroadcastService from '@typo3/backend/broadcast-service';
 import { DataTransferTypes } from '@typo3/backend/enum/data-transfer-types';

package/backend/drag-uploader.ts

@@ -28,6 +28,7 @@ import DomHelper from '@typo3/backend/utility/dom-helper';
 import { KeyTypesEnum } from '@typo3/backend/enum/key-types';
 import '@typo3/backend/element/progress-bar-element';
 import type { ProgressBarElement } from '@typo3/backend/element/progress-bar-element';
+import { FormatUtility } from '@typo3/backend/utility/format-utility';
 
 /**
  * Possible actions for conflicts w/ existing files
@@ -39,6 +40,11 @@ enum Action {
   USE_EXISTING = 'useExisting',
 }
 
+enum Mode {
+  MANAGE = 'manage',
+  BROWSE = 'browse',
+}
+
 /**
  * Properties of a file as returned from the AJAX action; essential, this is a serialized instance of
  * \TYPO3\CMS\Core\Resource\File plus some extra properties (see FileController::flattenResultDataValue())
@@ -80,7 +86,7 @@ export default class DragUploader {
   public filesExtensionsDisallowed: string;
   public fileDenyPattern: RegExp | null;
   public maxFileSize: number;
-  public trigger: HTMLElement;
+  public trigger: HTMLElement | null;
   public target: string;
   public reloadUrl: string;
   public manualTable: boolean;
@@ -111,13 +117,13 @@ export default class DragUploader {
   constructor(element: HTMLElement) {
     this.body = document.querySelector('body');
     this.element = element;
-    const hasTrigger = this.element.dataset.dropzoneTrigger !== undefined;
     this.trigger = document.querySelector(this.element.dataset.dropzoneTrigger);
     this.defaultAction = this.element.dataset.defaultAction as Action || Action.SKIP;
     this.dropzone = document.createElement('div');
     this.dropzone.classList.add('dropzone');
     this.dropzone.setAttribute('hidden', 'hidden');
     this.irreObjectUid = this.element.dataset.fileIrreObject;
+    this.manualTable = this.element.hasAttribute('data-manual-table');
 
     const dropZoneEscapedTarget = document.querySelector(this.element.dataset.dropzoneTarget);
     if (this.irreObjectUid && DomHelper.nextAll(dropZoneEscapedTarget).length !== 0) {
@@ -229,7 +235,7 @@ export default class DragUploader {
       }
     });
 
-    this.bindUploadButton(hasTrigger === true ? this.trigger : this.element);
+    this.bindUploadButton(this.trigger !== null ? this.trigger : this.element);
   }
 
   public static init(): void {
@@ -260,18 +266,6 @@ export default class DragUploader {
     });
   }
 
-  public static fileSizeAsString(size: number): string {
-    const sizeKB: number = size / 1024;
-    let str = '';
-
-    if (sizeKB > 1024) {
-      str = (sizeKB / 1024).toFixed(1) + ' MB';
-    } else {
-      str = sizeKB.toFixed(1) + ' KB';
-    }
-    return str;
-  }
-
   /**
    * @param {string} irreObject
    * @param {UploadedFile} file
@@ -390,7 +384,7 @@ export default class DragUploader {
           });
           NProgress.inc(this.percentagePerFile);
         } else {
-          new FileQueueItem(this, file, Action.SKIP);
+          new FileQueueItem(this, file, Action.SKIP, this.fileList.dataset.mode === Mode.BROWSE ? Mode.BROWSE : Mode.MANAGE);
         }
       });
       ajaxCalls.push(request);
@@ -500,11 +494,11 @@ export default class DragUploader {
     : this.askForOverride[i].original.icon}
           </td>
           <td>
-            ${this.askForOverride[i].original.name} (${DragUploader.fileSizeAsString(this.askForOverride[i].original.size)})<br />
+            ${this.askForOverride[i].original.name} (${FormatUtility.fileSizeAsString(this.askForOverride[i].original.size)})<br />
             ${DateTime.fromSeconds(this.askForOverride[i].original.mtime).toLocaleString(DateTime.DATETIME_MED)}
           </td>
           <td>
-            ${this.askForOverride[i].uploaded.name} (${DragUploader.fileSizeAsString(this.askForOverride[i].uploaded.size)})<br />
+            ${this.askForOverride[i].uploaded.name} (${FormatUtility.fileSizeAsString(this.askForOverride[i].uploaded.size)})<br />
             ${DateTime.fromMillis(this.askForOverride[i].uploaded.lastModified).toLocaleString(DateTime.DATETIME_MED)}
           </td>
           <td>
@@ -596,7 +590,7 @@ export default class DragUploader {
               fileInfo.original,
             );
           } else if (fileInfo.action !== Action.SKIP) {
-            new FileQueueItem(this, fileInfo.uploaded, fileInfo.action);
+            new FileQueueItem(this, fileInfo.uploaded, fileInfo.action, this.fileList.dataset.mode === Mode.BROWSE ? Mode.BROWSE : Mode.MANAGE);
           }
         }
         this.askForOverride = [];
@@ -612,6 +606,7 @@ export default class DragUploader {
 
 class FileQueueItem {
   private readonly row: HTMLElement;
+  private readonly mode: Mode;
   private readonly progress: HTMLElement;
   private readonly file: File;
   private readonly override: Action;
@@ -621,10 +616,11 @@ class FileQueueItem {
   private readonly progressBar: ProgressBarElement;
   private readonly dragUploader: DragUploader;
 
-  constructor(dragUploader: DragUploader, file: File, override: Action) {
+  constructor(dragUploader: DragUploader, file: File, override: Action, mode: Mode) {
     this.dragUploader = dragUploader;
     this.file = file;
     this.override = override;
+    this.mode = mode;
 
     this.row = document.createElement('tr');
     this.row.classList.add('upload-queue-item');
@@ -676,7 +672,7 @@ class FileQueueItem {
     if (this.dragUploader.maxFileSize > 0 && this.file.size > this.dragUploader.maxFileSize) {
       this.updateMessage(TYPO3.lang['file_upload.maxFileSizeExceeded']
         .replace(/\{0\}/g, this.file.name)
-        .replace(/\{1\}/g, DragUploader.fileSizeAsString(this.dragUploader.maxFileSize)));
+        .replace(/\{1\}/g, FormatUtility.fileSizeAsString(this.dragUploader.maxFileSize)));
       this.progressBar.value = 100;
       this.progressBar.severity = SeverityEnum.error;
 
@@ -695,7 +691,7 @@ class FileQueueItem {
       this.progressBar.value = 100;
       this.progressBar.severity = SeverityEnum.error;
     } else {
-      this.updateMessage('- ' + DragUploader.fileSizeAsString(this.file.size));
+      this.updateMessage('- ' + FormatUtility.fileSizeAsString(this.file.size));
 
       const formData = new FormData();
       formData.append('data[upload][1][target]', this.dragUploader.target);
@@ -865,24 +861,26 @@ class FileQueueItem {
     this.row.append(fileExtColumn);
 
     const fileSizeColumn = document.createElement('td');
-    fileSizeColumn.textContent = DragUploader.fileSizeAsString(fileInfo.size);
+    fileSizeColumn.textContent = FormatUtility.fileSizeAsString(fileInfo.size);
     this.row.append(fileSizeColumn);
 
-    let permissions = '';
-    if (fileInfo.permissions.read) {
-      permissions += '<strong class="text-danger">' + TYPO3.lang['permissions.read'] + '</strong>';
-    }
-    if (fileInfo.permissions.write) {
-      permissions += '<strong class="text-danger">' + TYPO3.lang['permissions.write'] + '</strong>';
-    }
+    if (this.mode === Mode.MANAGE) {
+      let permissions = '';
+      if (fileInfo.permissions.read) {
+        permissions += '<strong class="text-danger">' + TYPO3.lang['permissions.read'] + '</strong>';
+      }
+      if (fileInfo.permissions.write) {
+        permissions += '<strong class="text-danger">' + TYPO3.lang['permissions.write'] + '</strong>';
+      }
 
-    const permissionsColumn = document.createElement('td');
-    permissionsColumn.innerHTML = permissions;
-    this.row.append(permissionsColumn);
+      const permissionsColumn = document.createElement('td');
+      permissionsColumn.innerHTML = permissions;
+      this.row.append(permissionsColumn);
 
-    const emptyColumn = document.createElement('td');
-    emptyColumn.textContent = '-';
-    this.row.append(emptyColumn);
+      const emptyColumn = document.createElement('td');
+      emptyColumn.textContent = '-';
+      this.row.append(emptyColumn);
+    }
 
     // add spacing cells when more columns are displayed (column selector)
     for (let i = this.row.querySelectorAll('td').length; i < this.dragUploader.fileListColumnCount; i++) {

package/backend/element/alert-element.ts

@@ -11,9 +11,9 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators';
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
-import { classMap, type ClassInfo } from 'lit/directives/class-map.js';
+import { classMap, type ClassInfo } from 'lit/directives/class-map';
 import { SeverityEnum } from '@typo3/backend/enum/severity';
 import Severity from '../severity';
 import '@typo3/backend/element/icon-element';

package/backend/element/breadcrumb.ts

@@ -0,0 +1,306 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import { html, LitElement, type TemplateResult, render, type PropertyValues, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators';
+import { classMap } from 'lit/directives/class-map';
+import '@typo3/backend/element/icon-element';
+import 'bootstrap'; // for data-bs-toggle="dropdown"
+
+interface BreadcrumbNodeInterface {
+  identifier: string;
+  label: string;
+  icon: string|null;
+  iconOverlay: string|null;
+  url: string|null;
+  forceShowIcon: boolean;
+  // calculated properties
+  __width?: number;
+}
+
+/**
+ * Module: @typo3/backend/element/breadcrumb
+ *
+ * @example
+ * <typo3-breadcrumb
+ *    nodes='[
+ *      {
+ *        "identifier": "12",
+ *        "type": "page",
+ *        "label": "Title",
+ *        "icon": "icon-identifier",
+ *        "iconOverlay": "icon-overlay-identifier",
+ *      }
+ *    ]'
+ * ></typo3-breadcrumb>
+ *
+ * @internal this is subject to change
+ */
+@customElement('typo3-breadcrumb')
+export class Breadcrumb extends LitElement
+{
+  @property({ type: Array }) nodes: BreadcrumbNodeInterface[] = [];
+  @property({ type: Boolean }) alignRight: boolean = false;
+  @property({ type: String }) label: string = 'Breadcrumb';
+  private identifier: string;
+  private collapsedNodes: BreadcrumbNodeInterface[] = [];
+  private resizeObserver!: ResizeObserver;
+  private dropdownButtonWidth: number | null = null;
+  private measurementContainer: HTMLElement | null = null;
+
+  public override connectedCallback()
+  {
+    super.connectedCallback();
+    this.identifier = Date.now().toString(36) + Math.random().toString(36).slice(2);
+    this.resizeObserver = new ResizeObserver(() => this.adjustBreadcrumb());
+    this.resizeObserver.observe(this);
+  }
+
+  public override disconnectedCallback()
+  {
+    this.resizeObserver.disconnect();
+    super.disconnectedCallback();
+  }
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    return this;
+  }
+
+  protected override async willUpdate(changedProperties: PropertyValues) {
+    if (changedProperties.has('nodes')) {
+      await this.createMeasurementContainer();
+      await this.measureDropdownToggle();
+      await this.measureNodeWidths();
+    }
+  }
+
+  protected override render(): TemplateResult
+  {
+    const visibleNodes = this.nodes.filter(
+      (node) => !this.collapsedNodes.includes(node)
+    );
+
+    return html`
+      <nav class="breadcrumb breadcrumb-collapsible${this.alignRight ? ' breadcrumb-right' : ''}" aria-label="${this.label}">
+        ${this.collapsedNodes.length > 0 ? html`
+          <div class="breadcrumb-item dropdown" role="presentation">
+            ${this.renderDropdownToggle()}
+            <div class="dropdown-menu">
+              ${this.collapsedNodes.map((node) => this.renderDropdownItem(node))}
+            </div>
+          </div>
+        ` : null}
+        ${visibleNodes.map((node) => { /* eslint-disable @stylistic/indent */
+          const classes = classMap({ 'breadcrumb-item': true, 'breadcrumb-item-first': this.isFirstNode(node), 'breadcrumb-item-last': this.isLastNode(node) });
+          return html`<div class=${classes} role="presentation">${this.renderBreadcrumbElement(node)}</div>`;
+        })}
+      </nav>
+    `;
+  }
+
+  private async createMeasurementContainer(): Promise<void>
+  {
+    if (this.measurementContainer === null) {
+      this.measurementContainer = document.createElement('div');
+      this.measurementContainer.classList.add('breadcrumb-measurement');
+      this.measurementContainer.ariaHidden = 'true';
+      this.measurementContainer.style.position = 'absolute';
+      this.measurementContainer.style.visibility = 'hidden';
+      this.measurementContainer.style.pointerEvents = 'none';
+      this.measurementContainer.style.width = 'auto';
+      this.measurementContainer.style.whiteSpace = 'nowrap';
+      this.renderRoot.appendChild(this.measurementContainer);
+    }
+  }
+
+  private async measureDropdownToggle(): Promise<void>
+  {
+    if (this.dropdownButtonWidth === null) {
+      const toggleTemplate = html`<div class="breadcrumb-item dropdown">${this.renderDropdownToggle()}</div>`;
+      render(toggleTemplate, this.measurementContainer!);
+      const toggleElement = this.measurementContainer!.querySelector('div');
+      this.dropdownButtonWidth = toggleElement?.offsetWidth ?? 0;
+      render(nothing, this.measurementContainer);
+    }
+  }
+
+  private async measureNodeWidths(): Promise<void>
+  {
+    const originalNodes = this.nodes;
+    const updatedNodes = this.nodes.map(node => {
+      // Skip nodes that already have a width
+      if (node.__width) {
+        return node;
+      }
+
+      const template = html`
+        <div
+          class=${classMap({ 'breadcrumb-item': true, 'breadcrumb-item-first': this.isFirstNode(node), 'breadcrumb-item-last': this.isLastNode(node) })}
+          role="presentation"
+        >
+          ${this.renderBreadcrumbElement(node)}
+        </div>
+      `;
+      render(template, this.measurementContainer!);
+      const element = this.measurementContainer!.querySelector('div');
+      const width = element?.offsetWidth ?? 0;
+      render(nothing, this.measurementContainer);
+
+      return { ...node, __width: width };
+    });
+
+    const hasChanged = !this.areNodeCollectionsEqual(originalNodes, updatedNodes);
+    if (hasChanged) {
+      this.nodes = updatedNodes;
+    }
+  }
+
+  private async adjustBreadcrumb(): Promise<void>
+  {
+    const breadcrumbContainer = this.renderRoot?.querySelector('.breadcrumb');
+    if (!breadcrumbContainer) {
+      return;
+    }
+
+    this.collapsedNodes = [];
+    const lastNode = this.nodes[this.nodes.length - 1];
+    let totalWidth = lastNode?.__width || 0;
+
+    for (const node of this.nodes.slice(0, -1).reverse()) {
+      if (breadcrumbContainer.clientWidth > (totalWidth + this.dropdownButtonWidth + node.__width)) {
+        totalWidth += node.__width;
+      } else {
+        this.collapsedNodes.push(node);
+      }
+    }
+
+    this.collapsedNodes.reverse();
+    this.requestUpdate();
+  }
+
+  private renderDropdownToggle(): TemplateResult
+  {
+    return html`
+      <button
+        type="button"
+        id="breadcrumb-toggle-${this.identifier}"
+        class="breadcrumb-element"
+        aria-haspopup="true"
+        aria-expanded="false"
+        data-bs-toggle="dropdown"
+      >
+        ...
+      </button>
+    `;
+  }
+
+  private renderDropdownItem(node: BreadcrumbNodeInterface): TemplateResult|null
+  {
+    return node.url !== null ? html`
+      <button
+        type="button"
+        class="dropdown-item"
+        title="${node.label}"
+        @click=${(e: Event) => this.triggerAction(e, node)}
+      >
+          ${this.renderIcon(node)}
+          <span class="dropdown-item-label">${node.label}</span>
+      </button>
+    ` : html`
+      <div
+        class="dropdown-item"
+        title="${node.label}"
+      >
+          ${this.renderIcon(node)}
+          <span class="dropdown-item-label">${node.label}</span>
+      </div>
+    `;
+  }
+
+  private renderBreadcrumbElement(node: BreadcrumbNodeInterface): TemplateResult|null
+  {
+    return node.url !== null ? html`
+      <button
+        type="button"
+        class="breadcrumb-element"
+        title="${node.label}"
+        aria-current=${this.isLastNode(node) ? 'page' : 'false'}
+        @click=${(e: Event) => this.triggerAction(e, node)}
+      >
+        ${node.forceShowIcon || this.isLastNode(node) ? this.renderIcon(node) : nothing}
+        <span class="breadcrumb-element-label">${node.label}</span>
+      </button>
+    ` : html `
+      <div
+        class="breadcrumb-element"
+        title="${node.label}"
+        aria-current=${this.isLastNode(node) ? 'page' : 'false'}
+      >
+        ${this.isLastNode(node) ? this.renderIcon(node) : nothing}
+        <span class="breadcrumb-element-label">${node.label}</span>
+      </div>
+    `;
+  }
+
+  private renderIcon(node: BreadcrumbNodeInterface): TemplateResult|null
+  {
+    return node.icon
+      ? html`
+          <typo3-backend-icon
+            identifier="${node.icon}"
+            overlay="${node.iconOverlay}"
+            size="small"
+          ></typo3-backend-icon>
+        `
+      : null;
+  }
+
+  private triggerAction(e: Event, node: BreadcrumbNodeInterface): void
+  {
+    import('@typo3/backend/viewport').then(({ default: Viewport }): void => {
+      Viewport.ContentContainer.setUrl(node.url);
+    });
+  }
+
+  private isFirstNode(node: BreadcrumbNodeInterface) {
+    return this.nodes[0] === node;
+  }
+
+  private isLastNode(node: BreadcrumbNodeInterface) {
+    return this.nodes[this.nodes.length - 1] === node;
+  }
+
+  private areNodeCollectionsEqual(nodes: BreadcrumbNodeInterface[], newNodes: BreadcrumbNodeInterface[]): boolean
+  {
+    if (newNodes.length !== nodes.length){
+      return false;
+    }
+
+    for (let i = 0; i < newNodes.length; i++) {
+      if (!this.areNodesEqual(nodes[i], newNodes[i])) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  private areNodesEqual(nodeA: BreadcrumbNodeInterface, nodeB: BreadcrumbNodeInterface): boolean
+  {
+    return nodeA.identifier === nodeB.identifier &&
+           nodeA.label === nodeB.label &&
+           nodeA.icon === nodeB.icon &&
+           nodeA.iconOverlay === nodeB.iconOverlay &&
+           nodeA.__width === nodeB.__width;
+  }
+}