typo3-typescript-sources 13.4.23 → 13.4.25

package/.last-synced-tag

@@ -1 +1 @@
-v13.4.23
+v13.4.25

package/README.md

@@ -16,7 +16,7 @@ npm install typo3-typescript-sources
 
 - **Original Repository:** [TYPO3/typo3](https://github.com/TYPO3/typo3)
 - **Source Path:** `Build/Sources/TypeScript/`
-- **Current TYPO3 Version:** `v13.4.23`
+- **Current TYPO3 Version:** `v13.4.25`
 
 ## 📝 License
 

package/backend/action-button/deferred-action.ts

@@ -18,8 +18,6 @@ import Icons from '../icons';
  * Action used when an operation execution time is unknown.
  */
 class DeferredAction extends AbstractAction {
-  protected override callback: () => Promise<void>;
-
   public async execute(el: HTMLAnchorElement|HTMLButtonElement): Promise<void> {
     el.dataset.actionLabel = el.innerText;
     el.classList.add('disabled');

package/backend/action-button/immediate-action.ts

@@ -17,8 +17,6 @@ import { AbstractAction } from './abstract-action';
  * Action used when an operation is executed immediately.
  */
 class ImmediateAction extends AbstractAction {
-  protected override callback: () => void;
-
   public execute(): Promise<void> {
     return this.executeCallback();
   }

package/backend/clipboard-panel.ts

@@ -12,10 +12,10 @@
  */
 
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators';
-import { until } from 'lit/directives/until';
-import { unsafeHTML } from 'lit/directives/unsafe-html';
-import { classMap } from 'lit/directives/class-map';
+import { customElement, property } from 'lit/decorators.js';
+import { until } from 'lit/directives/until.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { classMap } from 'lit/directives/class-map.js';
 import AjaxRequest from '@typo3/core/ajax/ajax-request';
 import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
 import Notification from '@typo3/backend/notification';

package/backend/code-editor/element/code-mirror-element.ts

@@ -12,7 +12,7 @@
  */
 
 import { LitElement, html, css, type TemplateResult } from 'lit';
-import { customElement, property, state } from 'lit/decorators';
+import { customElement, property, state } from 'lit/decorators.js';
 import {
   EditorView,
   lineNumbers,

package/backend/color-picker.ts

@@ -11,7 +11,7 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-import { customElement, property, query } from 'lit/decorators';
+import { customElement, property, query } from 'lit/decorators.js';
 import { css, html, LitElement, type TemplateResult } from 'lit';
 import Alwan from 'alwan';
 import RegularEvent from '@typo3/core/event/regular-event';
@@ -38,7 +38,6 @@ export class Typo3BackendColorPicker extends LitElement {
       height: var(--typo3-colorpicker-preview-height);
       top: 50%;
       inset-inline-start: var(--typo3-input-sm-padding-x);
-      z-index: 1;
       transform: translate(0, -50%);
       background: var(--typo3-bg-checkerboard-background-color);
       background-image: linear-gradient(45deg, var(--typo3-bg-checkerboard-background-image-color) 25%, transparent 25%), linear-gradient(135deg, var(--typo3-bg-checkerboard-background-image-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--typo3-bg-checkerboard-background-image-color) 75%), linear-gradient(135deg, transparent 75%, var(--typo3-bg-checkerboard-background-image-color) 75%);
@@ -59,7 +58,7 @@ export class Typo3BackendColorPicker extends LitElement {
 
   @property({ type: String }) color: string = '';
   @property({ type: Boolean }) opacity: boolean = false;
-  @property({ type: String }) swatches: string = '';
+  @property({ type: Array }) swatches: {label: string, color: string}[] = [];
 
   // Use a reference to the input slot element
   @query('slot') slotEl!: HTMLSlotElement;
@@ -83,7 +82,7 @@ export class Typo3BackendColorPicker extends LitElement {
         position: 'bottom-start',
         format: 'hex',
         opacity: this.opacity,
-        swatches: this.swatches ? this.swatches.split(';') : [],
+        swatches: this.swatches,
         preset: false,
         color: this.color,
       });
@@ -141,7 +140,7 @@ class LegacyColorPicker {
     }
 
     const colorPicker = document.createElement('typo3-backend-color-picker');
-    colorPicker.swatches = options.swatches?.join(';') ?? '';
+    colorPicker.swatches = options.swatches.map((swatch: string) => ({ color: swatch, label: swatch }));
     colorPicker.opacity = options.opacity ?? false;
     element.parentNode.insertBefore(colorPicker, element);
     colorPicker.appendChild(element);

package/backend/color-scheme-switch.ts

@@ -12,7 +12,7 @@
  */
 
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
-import { customElement, property, state } from 'lit/decorators';
+import { customElement, property, state } from 'lit/decorators.js';
 import AjaxRequest from '@typo3/core/ajax/ajax-request';
 import '@typo3/backend/element/icon-element';
 import type { ColorSchemeUpdateEventData, ColorScheme } from '@typo3/backend/user-settings-manager';

package/backend/column-selector-button.ts

@@ -11,7 +11,7 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 import { PseudoButtonLitElement } from '@typo3/backend/element/pseudo-button';
 import { SeverityEnum } from '@typo3/backend/enum/severity';
 import { default as Modal, type ModalElement } from '@typo3/backend/modal';

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';
+import { customElement, queryAll, state } from 'lit/decorators.js';
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
 import { delay } from '@typo3/core/lit-helper';
-import { styleMap } from 'lit/directives/style-map';
-import { unsafeHTML } from 'lit/directives/unsafe-html';
+import { styleMap } from 'lit/directives/style-map.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 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';
+import { customElement, property } from 'lit/decorators.js';
 import { PseudoButtonLitElement } from '@typo3/backend/element/pseudo-button';
 import Notification from '@typo3/backend/notification';
 import { lll } from '@typo3/core/lit-helper';

package/backend/drag-tooltip.ts

@@ -12,7 +12,7 @@
  */
 
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
-import { customElement, property, state } from 'lit/decorators';
+import { customElement, property, state } from 'lit/decorators.js';
 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/element/alert-element.ts

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

package/backend/element/dispatch-modal-button.ts

@@ -11,7 +11,7 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 import { PseudoButtonLitElement } from '@typo3/backend/element/pseudo-button';
 import Modal from '@typo3/backend/modal';
 import { SeverityEnum } from '@typo3/backend/enum/severity';

package/backend/element/draggable-resizable-element.ts

@@ -12,7 +12,7 @@
  */
 
 import { html, LitElement, type TemplateResult, type PropertyValues } from 'lit';
-import { customElement, property, state } from 'lit/decorators';
+import { customElement, property, state } from 'lit/decorators.js';
 import { Offset } from '@typo3/backend/offset';
 
 interface Position {

package/backend/element/editable-page-title.ts

@@ -12,7 +12,7 @@
  */
 
 import { html, css, LitElement, type TemplateResult, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators';
+import { customElement, property, state } from 'lit/decorators.js';
 import '@typo3/backend/element/icon-element';
 import AjaxDataHandler from '../ajax-data-handler';
 

package/backend/element/icon-element.ts

@@ -13,8 +13,8 @@
 
 import { html, LitElement, type TemplateResult, nothing } from 'lit';
 import { Task } from '@lit/task';
-import { customElement, property } from 'lit/decorators';
-import { unsafeHTML } from 'lit/directives/unsafe-html';
+import { customElement, property } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { Sizes, States, MarkupIdentifiers } from '../enum/icon-types';
 import Icons, { IconStyles } from '../icons';
 import '@typo3/backend/element/spinner-element';

package/backend/element/pagination.ts

@@ -11,11 +11,11 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 import { html, LitElement, type TemplateResult } from 'lit';
-import { range } from 'lit/directives/range';
-import { map } from 'lit/directives/map';
-import { classMap } from 'lit/directives/class-map';
+import { range } from 'lit/directives/range.js';
+import { map } from 'lit/directives/map.js';
+import { classMap } from 'lit/directives/class-map.js';
 
 @customElement('typo3-backend-pagination')
 export class PaginationElement extends LitElement {

package/backend/element/progress-bar-element.ts

@@ -12,8 +12,8 @@
  */
 
 import { css, html, LitElement, nothing, type TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators';
-import { classMap } from 'lit/directives/class-map';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import Severity from '@typo3/backend/severity';
 import { SeverityEnum } from '@typo3/backend/enum/severity';

package/backend/element/progress-tracker-element.ts

@@ -12,8 +12,8 @@
  */
 
 import { css, html, LitElement, nothing, type TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators';
-import { styleMap } from 'lit/directives/style-map';
+import { customElement, property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { lll } from '@typo3/core/lit-helper';
 
 export type Stage = string;

package/backend/element/pseudo-button.ts

@@ -11,7 +11,7 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import { html, css, LitElement, type TemplateResult } from 'lit';
 import { KeyTypesEnum } from '@typo3/backend/enum/key-types';
 

package/backend/element/spinner-element.ts

@@ -12,7 +12,7 @@
  */
 
 import { html, LitElement, type TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 import { Sizes } from '../enum/icon-types';
 import { IconStyles } from '@typo3/backend/icons';
 

package/backend/form-engine/element/extra/char-counter.ts

@@ -11,7 +11,7 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-import { customElement, property, state } from 'lit/decorators';
+import { customElement, property, state } from 'lit/decorators.js';
 import { html, LitElement, type TemplateResult } from 'lit';
 import { lll } from '@typo3/core/lit-helper';
 

package/backend/form-engine/element/online-media-form-element.ts

@@ -11,7 +11,7 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 import { LitElement, type TemplateResult, html } from 'lit';
 
 /**

package/backend/form-engine/element/select-tree-toolbar.ts

@@ -12,7 +12,7 @@
 */
 
 import { html, LitElement, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators';
+import { customElement } from 'lit/decorators.js';
 import { lll } from '@typo3/core/lit-helper';
 import type { SelectTree } from './select-tree';
 import type { TreeNodeInterface } from '../../tree/tree-node';

package/backend/form-engine/element/select-tree.ts

@@ -13,7 +13,7 @@
 
 import { html, type TemplateResult } from 'lit';
 import { Tree, type TreeSettings } from '@typo3/backend/tree/tree';
-import { customElement, state } from 'lit/decorators';
+import { customElement, state } from 'lit/decorators.js';
 import type { TreeNodeInterface } from '@typo3/backend/tree/tree-node';
 
 interface SelectTreeSettings extends TreeSettings {

package/backend/form-engine/element/suggest/result-container.ts

@@ -11,7 +11,7 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 import { css, html, LitElement, type TemplateResult } from 'lit';
 import { lll } from '@typo3/core/lit-helper';
 import './result-item';

package/backend/form-engine/element/suggest/result-item.ts

@@ -12,7 +12,7 @@
  */
 
 import { html, type TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 import { PseudoButtonLitElement } from '@typo3/backend/element/pseudo-button';
 import '@typo3/backend/element/icon-element';
 

package/backend/form-engine/element/table-wizard-element.ts

@@ -12,7 +12,7 @@
  */
 
 import { html, LitElement, type TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 import { lll } from '@typo3/core/lit-helper';
 import '@typo3/backend/element/icon-element';
 import Modal from '@typo3/backend/modal';

package/backend/grid-editor.ts

@@ -16,11 +16,11 @@ import { SeverityEnum } from './enum/severity';
 import 'bootstrap';
 import { default as Modal, type ModalElement } from '@typo3/backend/modal';
 import SecurityUtility from '@typo3/core/security-utility';
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
-import { classMap } from 'lit/directives/class-map';
-import { type StyleInfo, styleMap } from 'lit/directives/style-map';
-import { ref, type Ref, createRef } from 'lit/directives/ref';
+import { classMap } from 'lit/directives/class-map.js';
+import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
+import { ref, type Ref, createRef } from 'lit/directives/ref.js';
 import { CodeMirrorElement } from '@typo3/backend/code-editor/element/code-mirror-element';
 
 type Cell = { spanned: number, rowspan: number, colspan: number, name: string, colpos: string, column: number, identifier: string, slideMode: SlideModes };

package/backend/hotkeys/events.ts

@@ -0,0 +1,47 @@
+/*
+ * 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!
+ */
+
+export class HotkeyRequestedEvent extends Event {
+  static readonly eventName = 'typo3:hotkey:requested';
+
+  constructor(
+    public readonly keyboardEvent: KeyboardEvent,
+  ) {
+    super(HotkeyRequestedEvent.eventName, {
+      bubbles: true,
+      composed: true,
+      cancelable: false,
+    });
+  }
+}
+
+export class HotkeyDispatchedEvent extends Event {
+  static readonly eventName = 'typo3:hotkey:dispatched';
+
+  constructor(
+    public readonly keyboardEvent: KeyboardEvent,
+  ) {
+    super(HotkeyDispatchedEvent.eventName, {
+      bubbles: false,
+      composed: true,
+      cancelable: true,
+    });
+  }
+}
+
+declare global {
+  interface DocumentEventMap {
+    [HotkeyRequestedEvent.eventName]: HotkeyRequestedEvent,
+    [HotkeyDispatchedEvent.eventName]: HotkeyDispatchedEvent,
+  }
+}

package/backend/hotkeys/hotkey-storage.ts

@@ -11,15 +11,8 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-export type HotkeyStruct = {
-  modifiers: {
-    meta: boolean,
-    ctrl: boolean,
-    shift: boolean,
-    alt: boolean,
-  },
-  key: string
-};
+import type { HotkeyStruct } from '@typo3/backend/hotkeys/hotkey-struct';
+
 export type HotkeyHandler = (e: KeyboardEvent) => void;
 export type Options = {
   scope: string,
@@ -52,12 +45,4 @@ class HotkeyStorage {
   }
 }
 
-let hotkeysStorageInstance: HotkeyStorage;
-if (!top.TYPO3.HotkeyStorage) {
-  hotkeysStorageInstance = new HotkeyStorage();
-  top.TYPO3.HotkeyStorage = hotkeysStorageInstance;
-} else {
-  hotkeysStorageInstance = top.TYPO3.HotkeyStorage;
-}
-
-export default hotkeysStorageInstance;
+export default new HotkeyStorage();

package/backend/hotkeys/hotkey-struct.ts

@@ -0,0 +1,58 @@
+/*
+ * 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!
+ */
+
+enum ModifierKeys {
+  META = 'meta',
+  CTRL = 'control',
+  SHIFT = 'shift',
+  ALT = 'alt',
+}
+
+export class HotkeyStruct {
+  constructor(
+    public readonly ctrl: boolean,
+    public readonly meta: boolean,
+    public readonly alt: boolean,
+    public readonly shift: boolean,
+    public readonly key: string,
+  ) {
+  }
+
+
+  public static fromEvent(e: KeyboardEvent): HotkeyStruct {
+    return new HotkeyStruct(e.ctrlKey, e.metaKey, e.altKey, e.shiftKey, e.key.toLowerCase());
+  }
+
+  public static fromHotkey(hotkey: string[]): HotkeyStruct {
+    const nonModifierCodes = hotkey.filter((hotkeyPart: string) => !Object.values<string>(ModifierKeys).includes(hotkeyPart));
+    if (nonModifierCodes.length > 1) {
+      throw new Error('Cannot create HotkeyStruct with more than one non-modifier key, "' + nonModifierCodes.join('+') + '" given.');
+    }
+
+    return new HotkeyStruct(
+      hotkey.includes(ModifierKeys.CTRL),
+      hotkey.includes(ModifierKeys.META),
+      hotkey.includes(ModifierKeys.ALT),
+      hotkey.includes(ModifierKeys.SHIFT),
+      nonModifierCodes[0].toLowerCase()
+    );
+  }
+
+  public hasAnyModifier(): boolean {
+    return this.ctrl || this.meta || this.alt || this.shift;
+  }
+
+  public toString(): string {
+    return JSON.stringify(this);
+  }
+}

package/backend/hotkeys/negotiator.ts

@@ -0,0 +1,53 @@
+/*
+ * 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 { HotkeyDispatchedEvent, HotkeyRequestedEvent } from '@typo3/backend/hotkeys/events';
+
+/**
+ * Global handler that receives the `typo3:hotkey-requested` event dispatched by any `hotkeys` instance.
+ * When receiving such event, all available documents are fetched to dispatch `typo3:hotkey-dispatched` to each document
+ * until a responsible handler was found.
+ */
+class Negotiator {
+  constructor() {
+    this.registerEventHandler();
+  }
+
+  private registerEventHandler() {
+    document.addEventListener(HotkeyRequestedEvent.eventName, (e): void => {
+      const hotkeyDispatchedEvent = new HotkeyDispatchedEvent(e.keyboardEvent);
+
+      for (const windowDocument of this.collectDocuments()) {
+        if (windowDocument.dispatchEvent(hotkeyDispatchedEvent) === false) {
+          // Event has been canceled (= hotkey was found)
+          break;
+        }
+      }
+    });
+  }
+
+  private collectDocuments(): Document[] {
+    const documents: Document[] = [document];
+    for (let i = 0; i < window.frames.length; i++) {
+      try {
+        documents.push(window.frames[i].document);
+      } catch {
+        // Cross-origin frame, skip
+      }
+    }
+
+    return documents;
+  }
+}
+
+export default new Negotiator();