typo3-typescript-sources 14.3.8 → 14.3.9

package/adminpanel/admin-panel.ts

@@ -37,23 +37,23 @@
 
     constructor() {
       this.adminPanel = document.querySelector(AdminPanelSelectors.adminPanelRole) as HTMLFormElement;
-      this.modules = (this.querySelectorAll(AdminPanelSelectors.moduleTriggerRole) as Element[]).map(
-        (moduleTrigger: HTMLElement) => {
+      this.modules = this.querySelectorAll(AdminPanelSelectors.moduleTriggerRole).map(
+        (moduleTrigger) => {
           const moduleParent = moduleTrigger.closest(AdminPanelSelectors.moduleParentClass);
           return new AdminPanelModule(this, moduleParent, moduleTrigger);
         },
       );
       this.popups = this.querySelectorAll(AdminPanelSelectors.popupTriggerRole).map(
-        (popupTrigger: HTMLElement) => new AdminPanelPopup(this, popupTrigger),
+        (popupTrigger) => new AdminPanelPopup(this, popupTrigger),
       );
       this.querySelectorAll(AdminPanelSelectors.panelTriggerRole).forEach(
-        (panelTrigger: HTMLElement) => {
+        (panelTrigger) => {
           const panelParent = panelTrigger.closest(AdminPanelSelectors.panelParentClass);
           new AdminPanelPanel(panelParent, panelTrigger);
         },
       );
       this.querySelectorAll(AdminPanelSelectors.contentSettingsTriggerRole).forEach(
-        (contentSettingTrigger: HTMLElement) => {
+        (contentSettingTrigger) => {
           const contentSettingElement = contentSettingTrigger
             .closest(AdminPanelSelectors.contentParentClass)
             .querySelector(AdminPanelSelectors.contentSettingsParentClass);
@@ -67,11 +67,11 @@
     }
 
     disableModules(): void {
-      this.modules.forEach((module: AdminPanelModule) => module.disable());
+      this.modules.forEach((module) => module.disable());
     }
 
     disablePopups(): void {
-      this.popups.forEach((popup: AdminPanelPopup) => popup.disable());
+      this.popups.forEach((popup) => popup.disable());
     }
 
     renderBackdrop(): void {
@@ -93,33 +93,33 @@
       }
     }
 
-    private querySelectorAll(selectors: string, subject: Element = null): Node[] {
+    private querySelectorAll<T extends HTMLElement = HTMLElement>(selectors: string, subject: Element = null): T[] {
       if (subject === null) {
-        return Array.from(document.querySelectorAll(selectors));
+        return Array.from(document.querySelectorAll<T>(selectors));
       }
-      return Array.from(subject.querySelectorAll(selectors));
+      return Array.from(subject.querySelectorAll<T>(selectors));
     }
 
     private initializeEvents(): void {
       this
         .querySelectorAll(AdminPanelSelectors.contentTabRole)
-        .forEach((tab: HTMLElement) => tab.addEventListener('click', this.switchTab.bind(this)));
+        .forEach((tab) => tab.addEventListener('click', this.switchTab.bind(this)));
       this
         .querySelectorAll(AdminPanelSelectors.zoomTarget)
-        .forEach((zoomTrigger: HTMLElement) => zoomTrigger.addEventListener('click', this.openZoom.bind(this)));
+        .forEach((zoomTrigger) => zoomTrigger.addEventListener('click', this.openZoom.bind(this)));
       this
         .querySelectorAll(AdminPanelSelectors.zoomClose)
-        .forEach((zoomTrigger: HTMLElement) => zoomTrigger.addEventListener('click', this.closeZoom.bind(this)));
+        .forEach((zoomTrigger) => zoomTrigger.addEventListener('click', this.closeZoom.bind(this)));
       this
         .querySelectorAll(AdminPanelSelectors.triggerRole)
-        .forEach((trigger: HTMLElement) => trigger.addEventListener('click', this.toggleAdminPanelState.bind(this)));
+        .forEach((trigger) => trigger.addEventListener('click', this.toggleAdminPanelState.bind(this)));
       this
         .querySelectorAll(AdminPanelSelectors.saveButtonRole)
-        .forEach((elm: HTMLElement) => elm.addEventListener('click', this.sendAdminPanelForm.bind(this)));
+        .forEach((elm) => elm.addEventListener('click', this.sendAdminPanelForm.bind(this)));
 
       this
         .querySelectorAll('[data-typo3-role=typo3-adminPanel-content-close]')
-        .forEach((elm: HTMLElement) => {
+        .forEach((elm) => {
           elm.addEventListener('click', () => {
             this.disableModules();
             this.removeBackdrop();
@@ -127,7 +127,7 @@
         });
       this
         .querySelectorAll('.typo3-adminPanel-table th, .typo3-adminPanel-table td')
-        .forEach((elm: HTMLElement) => {
+        .forEach((elm) => {
           elm.addEventListener('click', () => {
             elm.focus();
             try {
@@ -149,9 +149,9 @@
       const contentTabs = this.querySelectorAll(AdminPanelSelectors.contentTabRole, currentContent);
       const contentPanes = this.querySelectorAll(AdminPanelSelectors.contentPaneRole, currentContent);
 
-      contentTabs.forEach((element: HTMLElement) => element.classList.remove(activeTabClass));
+      contentTabs.forEach((element) => element.classList.remove(activeTabClass));
       currentTab.classList.add(activeTabClass);
-      contentPanes.forEach((element: HTMLElement) => element.classList.remove(activePaneClass));
+      contentPanes.forEach((element) => element.classList.remove(activePaneClass));
 
       const activePane = document.querySelector('[data-typo3-tab-id=' + currentTab.dataset.typo3TabTarget + ']');
       activePane.classList.add(activePaneClass);
@@ -196,7 +196,7 @@
      */
     private getCleanReloadUrl(): string {
       const urlParams: string[] = [];
-      location.search.substr(1).split('&').forEach((item: string): void => {
+      location.search.substr(1).split('&').forEach((item): void => {
         if (item && !item.includes('ADMCMD_')) {
           urlParams.push(item);
         }
@@ -208,12 +208,12 @@
 
     private addBackdropListener(): void {
       this.querySelectorAll('.' + AdminPanelClasses.backdrop)
-        .forEach((elm: HTMLElement) => {
+        .forEach((elm) => {
           elm.addEventListener('click', () => {
             this.removeBackdrop();
             this
               .querySelectorAll(AdminPanelSelectors.moduleTriggerRole)
-              .forEach((innerElm: HTMLElement) => {
+              .forEach((innerElm) => {
                 innerElm.closest(AdminPanelSelectors.moduleParentClass)
                   .classList.remove(AdminPanelClasses.activeModule);
               });

package/adminpanel/modules/cache.ts

@@ -1,11 +1,11 @@
 ((): void => {
   class AdminPanelCache {
-    private readonly buttons: NodeList;
+    private readonly buttons: NodeListOf<HTMLElement>;
 
     constructor() {
-      this.buttons = document.querySelectorAll('[data-typo3-role="clearCacheButton"]');
+      this.buttons = document.querySelectorAll<HTMLElement>('[data-typo3-role="clearCacheButton"]');
 
-      this.buttons.forEach((element: HTMLElement): void => {
+      this.buttons.forEach((element): void => {
         element.addEventListener('click', (): void => {
           const url = element.dataset.typo3AjaxUrl;
           const request = new XMLHttpRequest();

package/backend/action-dispatcher.ts

@@ -19,6 +19,11 @@ import documentService from '@typo3/core/document-service';
 import Utility from '@typo3/backend/utility';
 
 declare type ActionDispatchArgument = unknown;
+/**
+ * Delegates are invoked with arguments resolved from the DOM, so their concrete
+ * signature is only known to the registering side.
+ */
+declare type ActionDispatchDelegate = (...args: never[]) => void;
 
 /**
  * Module: @typo3/backend/action-dispatcher
@@ -33,7 +38,7 @@ declare type ActionDispatchArgument = unknown;
  *  data-dispatch-disabled>
  */
 class ActionDispatcher {
-  private delegates: {[key: string]: (...args: ActionDispatchArgument[]) => void} = {};
+  private delegates: Record<string, ActionDispatchDelegate> = {};
 
   public constructor() {
     this.createDelegates();
@@ -82,7 +87,7 @@ class ActionDispatcher {
     const action = target.dataset.dispatchAction;
     let args: ActionDispatchArgument[] = ActionDispatcher.resolveArguments(target);
     if (args instanceof Array) {
-      args = args.map((arg: string): ActionDispatchArgument => {
+      args = args.map((arg): ActionDispatchArgument => {
         switch (arg) {
           case '{$target}':
             return target;
@@ -94,7 +99,7 @@ class ActionDispatcher {
       });
     }
     if (this.delegates[action]) {
-      this.delegates[action].apply(null, args || []);
+      this.delegates[action].apply(null, (args || []) as never[]);
     }
   }
 }

package/backend/bookmark/bookmark-store.ts

@@ -159,10 +159,10 @@ class BookmarkStore {
     let bookmarks = await this.getBookmarks();
 
     if (options?.accessibleOnly) {
-      bookmarks = bookmarks.filter((b: Bookmark) => b.accessible);
+      bookmarks = bookmarks.filter((b) => b.accessible);
     }
     if (options?.groupId !== undefined) {
-      bookmarks = bookmarks.filter((b: Bookmark) => b.groupId === options.groupId);
+      bookmarks = bookmarks.filter((b) => b.groupId === options.groupId);
     }
     if (options?.limit !== undefined && options.limit > 0 && bookmarks.length > options.limit) {
       bookmarks = bookmarks.slice(0, options.limit);
@@ -178,8 +178,8 @@ class BookmarkStore {
       groupSortingMap.set(group.id, group.sorting);
     });
 
-    const groupIds = [...new Set(bookmarks.map((b: Bookmark) => b.groupId))];
-    const sortedBookmarkGroupIds = groupIds.sort((a: BookmarkGroupId, b: BookmarkGroupId) => {
+    const groupIds = [...new Set(bookmarks.map((b) => b.groupId))];
+    const sortedBookmarkGroupIds = groupIds.sort((a, b) => {
       // First sort by priority (lower values first)
       const priorityA = groupPriorityMap.get(a) ?? Number.MAX_SAFE_INTEGER;
       const priorityB = groupPriorityMap.get(b) ?? Number.MAX_SAFE_INTEGER;
@@ -195,7 +195,7 @@ class BookmarkStore {
     });
 
     for (const groupId of sortedBookmarkGroupIds) {
-      const groupBookmarks = bookmarks.filter((b: Bookmark) => b.groupId === groupId);
+      const groupBookmarks = bookmarks.filter((b) => b.groupId === groupId);
       if (groupBookmarks.length > 0) {
         grouped.set(groupId, groupBookmarks);
       }

package/backend/clipboard-panel.ts

@@ -105,7 +105,7 @@ export class ClipboardPanel extends LitElement {
               <div class="table-fit">
                 <table class="table">
                   <tbody>
-                    ${clipboardData.tabs.map((tab: ClipboardTab): TemplateResult => this.renderTab(tab, clipboardData))}
+                    ${clipboardData.tabs.map((tab): TemplateResult => this.renderTab(tab, clipboardData))}
                   </tbody>
                 </table>
               </div>
@@ -166,7 +166,7 @@ export class ClipboardPanel extends LitElement {
           `}
         </td>
       </tr>
-      ${clipboardData.current === tab.identifier && tab.items ? tab.items.map((tabItem: ClipboardTabItem): TemplateResult => this.renderTabItem(tabItem, tab.identifier, clipboardData)) : nothing}
+      ${clipboardData.current === tab.identifier && tab.items ? tab.items.map((tabItem): TemplateResult => this.renderTabItem(tabItem, tab.identifier, clipboardData)) : nothing}
     `;
   }
 

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

@@ -163,7 +163,7 @@ export class CodeMirrorElement extends LitElement {
       root: document.body
     };
     const observer = new IntersectionObserver((entries: IntersectionObserverEntry[]): void => {
-      entries.forEach((entry: IntersectionObserverEntry): void => {
+      entries.forEach((entry): void => {
         if (entry.intersectionRatio > 0) {
           observer.unobserve(entry.target);
           if (this.firstElementChild && this.firstElementChild.nodeName.toLowerCase() === 'textarea') {

package/backend/code-editor/language/typoscript.ts

@@ -90,7 +90,7 @@ export async function complete(context: CompletionContext): Promise<CompletionRe
   const completions = getCompletions(tokenValue, keywords);
   return {
     from: completionStart,
-    options: completions.map((result: string) => {
+    options: completions.map((result) => {
       return { label: result, type: 'keyword' };
     })
   };
@@ -129,7 +129,7 @@ function extractCodemirror5StyleLineTokens(lineCount: number, context: Completio
     // stream parser doesn't perform proper tokenization.
     // Insert content as null-type token into the lineToken array.
     if (lastToken < start) {
-      context.state.sliceDoc(lastToken, start).split(context.state.lineBreak).forEach((part: string) => {
+      context.state.sliceDoc(lastToken, start).split(context.state.lineBreak).forEach((part) => {
         if (part) {
           lineTokens[Math.min(lineNumber - 1, lineCount - 1)].push({ type: null, string: part, start: lastToken, end: lastToken + part.length });
           lineNumber++;
@@ -162,7 +162,7 @@ function tokenIsSubStringOfKeywords(token: string, keywords: string[]): boolean
 }
 
 function getCompletions(token: string, keywords: string[]) {
-  const found = new Set();
+  const found = new Set<string>();
 
   const maybeAdd = (str: string) => {
     if (str.lastIndexOf(token, 0) === 0 && !found.has(str)) {

package/backend/code-editor/stream-parser/typoscript.ts

@@ -8,8 +8,8 @@ type Keyword = {
 };
 
 type CombinatorReturnType = boolean | undefined;
-type CombinatorFunction = (type?: Type, value?: unknown) => CombinatorReturnType;
-type CombinatorLexFunction = ((type?: Type, value?: unknown) => CombinatorReturnType) & { lex: true };
+type CombinatorFunction = (type?: Type, value?: Value) => CombinatorReturnType;
+type CombinatorLexFunction = ((type?: Type, value?: Value) => CombinatorReturnType) & { lex: true };
 type CC = CombinatorFunction | CombinatorLexFunction;
 
 type CX = {

package/backend/color-picker.ts

@@ -107,7 +107,7 @@ export class Typo3BackendColorPicker extends LitElement {
 
     // input: react on user input
     // change: react on indirect changes, e.g. a value picker
-    ['input', 'change'].forEach((eventName: string): void => {
+    ['input', 'change'].forEach((eventName): void => {
       new RegularEvent(eventName, (e: Event): void => {
         const input = (e.target as HTMLInputElement);
         this.color = input.value;
@@ -151,7 +151,7 @@ class LegacyColorPicker {
     }
 
     const colorPicker = document.createElement('typo3-backend-color-picker');
-    colorPicker.swatches = options.swatches.map((swatch: string) => ({ color: swatch, label: swatch }));
+    colorPicker.swatches = options.swatches.map((swatch) => ({ color: swatch, label: swatch }));
     colorPicker.opacity = options.opacity ?? false;
     element.parentNode.insertBefore(colorPicker, element);
     colorPicker.appendChild(element);

package/backend/column-selector-button.ts

@@ -116,7 +116,7 @@ export class ColumnSelectorButton extends PseudoButtonLitElement {
    * @private
    */
   private static filterColumns(columnsFilter: HTMLInputElement, columns: NodeListOf<HTMLInputElement>): void {
-    columns.forEach((column: HTMLInputElement) => {
+    columns.forEach((column) => {
       const columnContainer: HTMLDivElement = column.closest(Selectors.columnsContainerSelector);
       if (!column.disabled && columnContainer !== null) {
         const filterValue: string = columnContainer.querySelector('.form-check-label')?.textContent;
@@ -218,7 +218,7 @@ export class ColumnSelectorButton extends PseudoButtonLitElement {
     ColumnSelectorButton.toggleSelectorActions(columns, selectAll, selectNone, true);
 
     // Add event listener for each column to toggle the selector actions after change
-    columns.forEach((column: HTMLInputElement) => {
+    columns.forEach((column) => {
       column.addEventListener('change', (): void => {
         ColumnSelectorButton.toggleSelectorActions(columns, selectAll, selectNone);
       });
@@ -248,7 +248,7 @@ export class ColumnSelectorButton extends PseudoButtonLitElement {
 
     // Add event listener for all columns select actions. querySelectorAll will return
     // at least two actions (selectAll and selectNone) which we checked above already
-    columnsSelectorActions.querySelectorAll('button[data-action]').forEach((action: HTMLButtonElement) => {
+    columnsSelectorActions.querySelectorAll<HTMLButtonElement>('button[data-action]').forEach((action) => {
       action.addEventListener('click', (e: Event): void => {
         e.preventDefault();
 
@@ -261,21 +261,21 @@ export class ColumnSelectorButton extends PseudoButtonLitElement {
         // Perform requested action
         switch (target.dataset.action) {
           case SelectorActions.toggle:
-            columns.forEach((column: HTMLInputElement) => {
+            columns.forEach((column) => {
               if (!column.disabled && !ColumnSelectorButton.isColumnHidden(column)) {
                 column.checked = !column.checked;
               }
             });
             break;
           case SelectorActions.all:
-            columns.forEach((column: HTMLInputElement) => {
+            columns.forEach((column) => {
               if (!column.disabled && !ColumnSelectorButton.isColumnHidden(column)) {
                 column.checked = true;
               }
             });
             break;
           case SelectorActions.none:
-            columns.forEach((column: HTMLInputElement) => {
+            columns.forEach((column) => {
               if (!column.disabled && !ColumnSelectorButton.isColumnHidden(column)) {
                 column.checked = false;
               }

package/backend/context-help.ts

@@ -32,8 +32,8 @@ class ContextHelp {
 
   public async initialize(): Promise<void> {
     await DocumentService.ready();
-    const elements = document.querySelectorAll(this.selector);
-    elements.forEach((element: HTMLElement): void => {
+    const elements = document.querySelectorAll<HTMLElement>(this.selector);
+    elements.forEach((element): void => {
       element.dataset.bsHtml = 'true';
       element.dataset.bsPlacement = this.placement;
       element.dataset.bsTrigger = this.trigger;
@@ -56,7 +56,7 @@ class ContextHelp {
 
     new RegularEvent('click', (e: Event): void => {
       const me = e.target as HTMLElement;
-      elements.forEach((element: HTMLElement): void => {
+      elements.forEach((element): void => {
         if (!element.isEqualNode(me)) {
           Popover.hide(element);
         }

package/backend/context-menu.ts

@@ -192,11 +192,11 @@ export class ContextMenuElement extends LitElement {
     onComplete: () => {
       this.focusFirstElement = true;
     },
-    onError: (error: Error|AjaxResponse) => {
+    onError: (error: unknown) => {
       if (error instanceof AjaxResponse) {
         Notification.error('', error.response.status + ' ' + error.response.statusText, 5);
       } else {
-        Notification.error('', error.message);
+        Notification.error('', (error as Error).message);
       }
     },
   });
@@ -551,7 +551,7 @@ export class ContextMenuElement extends LitElement {
 
   private getNodeByIdentifier(identifier: string): MenuItemInterface | null {
     const flattenedNodes = this.flattenMenuItems(this.nodes);
-    return flattenedNodes.find((node: MenuItemInterface) => {
+    return flattenedNodes.find((node) => {
       return this.getNodeIdentifier(node) === identifier;
     }) ?? null;
   }
@@ -748,4 +748,9 @@ declare global {
   interface HTMLElementTagNameMap {
     'typo3-backend-context-menu': ContextMenuElement;
   }
+
+  interface DocumentEventMap {
+    [ContextMenuEvent.open]: CustomEvent<ContextMenuEventDetail>;
+    [ContextMenuEvent.close]: CustomEvent<ContextMenuEventDetail>;
+  }
 }

package/backend/drag-tooltip.ts

@@ -144,15 +144,15 @@ export class DragToolTip extends LitElement implements DragTooltipMetadata {
       return;
     }
 
-    const propertyNames = [...changedProperties.keys()].filter(
-      (propName: keyof this) => (this.constructor as typeof ReactiveElement).elementProperties.get(propName).attribute !== false
+    const propertyNames = ([...changedProperties.keys()] as (keyof this)[]).filter(
+      (propName) => (this.constructor as typeof ReactiveElement).elementProperties.get(propName).attribute !== false
     );
 
     if (propertyNames.length === 0) {
       return;
     }
 
-    const newProperties = propertyNames.map((propName: keyof this) => [ propName, this[propName] ]);
+    const newProperties = propertyNames.map((propName) => [ propName, this[propName] ]);
     this.broadcast('changedProperties', Object.fromEntries(newProperties));
   }
 
@@ -212,7 +212,7 @@ export class DragToolTip extends LitElement implements DragTooltipMetadata {
 
   protected onBroadcastChangedProperties = (event: CustomEvent<{ payload: Partial<WritablePart<DragToolTip>> }>) => {
     const newProperties = event.detail.payload;
-    Object.keys(newProperties).forEach((key: keyof WritablePart<DragToolTip>) => {
+    (Object.keys(newProperties) as (keyof WritablePart<DragToolTip>)[]).forEach((key) => {
       (this[key] as unknown) = newProperties[key];
     });
     this.skipNextUpdateBroadcast = true;
@@ -282,4 +282,9 @@ declare global {
   interface HTMLElementTagNameMap {
     'typo3-backend-drag-tooltip': DragToolTip;
   }
+
+  interface DocumentEventMap {
+    'typo3:drag-tooltip:metadata-update': CustomEvent<DragTooltipMetadata>;
+    'typo3:drag-tooltip:changedProperties': CustomEvent<{ payload: Partial<WritablePart<DragToolTip>> }>;
+  }
 }

package/backend/drag-uploader.ts

@@ -258,7 +258,7 @@ export default class DragUploader {
             if (node.matches('.t3js-drag-uploader')) {
               new DragUploader(node);
             } else {
-              node.querySelectorAll('.t3js-drag-uploader').forEach((element: HTMLElement): void => {
+              node.querySelectorAll<HTMLElement>('.t3js-drag-uploader').forEach((element): void => {
                 new DragUploader(element);
               });
             }
@@ -269,7 +269,7 @@ export default class DragUploader {
     observer.observe(document, { childList: true, subtree: true });
 
     DocumentService.ready().then((): void => {
-      document.querySelectorAll('.t3js-drag-uploader').forEach((element: HTMLElement): void => {
+      document.querySelectorAll<HTMLElement>('.t3js-drag-uploader').forEach((element): void => {
         new DragUploader(element);
       });
     });
@@ -403,7 +403,7 @@ export default class DragUploader {
 
     // Check for each file if is already exist before adding it to the queue
     const ajaxCalls: Promise<void>[] = [];
-    validFiles.forEach((file: File) => {
+    validFiles.forEach((file) => {
       const request = new AjaxRequest(TYPO3.settings.ajaxUrls.file_exists).withQueryArguments({
         fileName: file.name,
         fileTarget: this.target,
@@ -606,7 +606,7 @@ export default class DragUploader {
           this.askForOverride[index].action = <Action>select.value;
         }
       } else {
-        modal.querySelectorAll('.t3js-actions').forEach((select: HTMLSelectElement) => select.disabled = false);
+        modal.querySelectorAll<HTMLSelectElement>('.t3js-actions').forEach((select) => select.disabled = false);
       }
     }).delegateTo(modal, '.t3js-actions-all');
 

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

@@ -94,22 +94,22 @@ export class DraggableResizableElement extends LitElement {
 
   public override connectedCallback(): void {
     super.connectedCallback();
-    this.pointerEventNames.pointerDown.forEach((name: string): void =>
-      document.addEventListener(name, this.handleStart, true));
-    this.pointerEventNames.pointerMove.forEach((name: string): void =>
-      document.addEventListener(name, this.handleUpdate, true));
-    this.pointerEventNames.pointerUp.forEach((name: string): void =>
-      document.addEventListener(name, this.handleFinish, true));
+    this.pointerEventNames.pointerDown.forEach((name): void =>
+      document.addEventListener(name, this.handleStart as EventListener, true));
+    this.pointerEventNames.pointerMove.forEach((name): void =>
+      document.addEventListener(name, this.handleUpdate as EventListener, true));
+    this.pointerEventNames.pointerUp.forEach((name): void =>
+      document.addEventListener(name, this.handleFinish as EventListener, true));
   }
 
   public override disconnectedCallback(): void {
     super.disconnectedCallback();
-    this.pointerEventNames.pointerDown.forEach((name: string): void =>
-      document.removeEventListener(name, this.handleStart, true));
-    this.pointerEventNames.pointerMove.forEach((name: string): void =>
-      document.removeEventListener(name, this.handleUpdate, true));
-    this.pointerEventNames.pointerUp.forEach((name: string): void =>
-      document.removeEventListener(name, this.handleFinish, true));
+    this.pointerEventNames.pointerDown.forEach((name): void =>
+      document.removeEventListener(name, this.handleStart as EventListener, true));
+    this.pointerEventNames.pointerMove.forEach((name): void =>
+      document.removeEventListener(name, this.handleUpdate as EventListener, true));
+    this.pointerEventNames.pointerUp.forEach((name): void =>
+      document.removeEventListener(name, this.handleFinish as EventListener, true));
   }
 
   protected override render(): TemplateResult {
@@ -246,4 +246,10 @@ declare global {
   interface HTMLElementTagNameMap {
     'typo3-backend-draggable-resizable': DraggableResizableElement;
   }
+
+  interface HTMLElementEventMap {
+    'draggable-resizable-started': DraggableResizableEvent;
+    'draggable-resizable-updated': DraggableResizableEvent;
+    'draggable-resizable-finished': DraggableResizableEvent;
+  }
 }

package/backend/element/icon-element.ts

@@ -48,10 +48,10 @@ export class IconElement extends LitElement {
   @property({ type: String }) raw?: string = null;
 
   private readonly iconTask = new Task(this, {
-    task: async ([identifier, size, overlay, state, markup]: [string, Sizes, States, string, MarkupIdentifiers], { signal }): Promise<string> => {
+    task: async ([identifier, size, overlay, state, markup], { signal }): Promise<string> => {
       return await Icons.getIcon(identifier, size, overlay, state, markup, signal);
     },
-    args: () => [this.identifier, this.size, this.overlay, this.state, this.markup]
+    args: () => [this.identifier, this.size, this.overlay, this.state, this.markup] as const
   });
 
   protected override render(): TemplateResult | symbol {

package/backend/element/thumbnail-element.ts

@@ -34,7 +34,7 @@ export class ThumbnailElement extends LitElement {
   @property({ type: Number, reflect: true }) height: number;
 
   private readonly thumbnailTask = new Task(this, {
-    task: async ([url, size, keepAspectRatio, width, height]: [string, ThumbnailSizeType, boolean, number, number]): Promise<TemplateResult> => {
+    task: async ([url, size, keepAspectRatio, width, height]): Promise<TemplateResult> => {
       const thumbnailUrl = new URL(url, window.origin);
       thumbnailUrl.searchParams.set('size', size);
       thumbnailUrl.searchParams.set('keepAspectRatio', keepAspectRatio ? '1' : '0');
@@ -60,7 +60,7 @@ export class ThumbnailElement extends LitElement {
       }));
       return html`${img}`;
     },
-    args: () => [this.url, this.size, this.keepAspectRatio, this.width, this.height]
+    args: () => [this.url, this.size, this.keepAspectRatio, this.width, this.height] as const
   });
 
   protected override createRenderRoot(): HTMLElement | ShadowRoot {

package/backend/element-browser.ts

@@ -79,7 +79,7 @@ class ElementBrowser {
     const isInModalFrame = typeof window.frames !== 'undefined'
       && typeof window.frames.frameElement !== 'undefined'
       && window.frames.frameElement.classList.contains('t3js-modal-iframe');
-    const otherModalFrames = Array.from(top.frames || []).filter((item: Window) => {
+    const otherModalFrames = Array.from(top.frames || []).filter((item) => {
       try {
         return typeof item.frameElement !== 'undefined'
           && item.frameElement.classList.contains('t3js-modal-iframe')

package/backend/event/consumer-scope.ts

@@ -33,14 +33,14 @@ class ConsumerScope {
 
   public detach(consumer: Consumable): void {
     this.consumers = this.consumers.filter(
-      (currentConsumer: Consumable) => currentConsumer !== consumer,
+      (currentConsumer) => currentConsumer !== consumer,
     );
   }
 
   public async invoke(request: InteractionRequest): Promise<void> {
     const promises: Promise<void>[] = [];
     this.consumers.forEach(
-      (consumer: Consumable) => {
+      (consumer) => {
         const promise: Promise<void> = consumer.consume.call(consumer, request);
         if (promise) {
           promises.push(promise);

package/backend/event/interaction-request-assignment.ts

@@ -20,5 +20,5 @@ export interface PromiseControls<T> {
 
 export interface InteractionRequestAssignment {
   request: InteractionRequest;
-  deferreds: PromiseControls<unknown>[];
+  deferreds: PromiseControls<never>[];
 }

package/backend/event/interaction-request-map.ts

@@ -17,7 +17,7 @@ import type { InteractionRequestAssignment, PromiseControls } from './interactio
 class InteractionRequestMap {
   private assignments: InteractionRequestAssignment[] = [];
 
-  public attachFor(request: InteractionRequest, deferred: PromiseControls<unknown>): void {
+  public attachFor(request: InteractionRequest, deferred: PromiseControls<never>): void {
     let targetAssignment: InteractionRequestAssignment = this.getFor(request);
     if (targetAssignment === null) {
       targetAssignment = { request, deferreds: [] };
@@ -29,14 +29,14 @@ class InteractionRequestMap {
   public detachFor(request: InteractionRequest): void {
     const targetAssignment = this.getFor(request);
     this.assignments = this.assignments.filter(
-      (assignment: InteractionRequestAssignment) => assignment === targetAssignment,
+      (assignment) => assignment === targetAssignment,
     );
   }
 
   public getFor(triggerEvent: InteractionRequest): InteractionRequestAssignment | null {
     let targetAssignment: InteractionRequestAssignment = null;
     this.assignments.some(
-      (assignment: InteractionRequestAssignment) => {
+      (assignment) => {
         if (assignment.request === triggerEvent) {
           targetAssignment = assignment;
           return true;

package/backend/form-engine/container/flex-form-container-container.ts

@@ -135,7 +135,7 @@ class FlexFormContainerContainer {
   }
 
   private registerPanelToggle(): void {
-    ['hide.bs.collapse', 'show.bs.collapse'].forEach((eventName: string): void => {
+    ['hide.bs.collapse', 'show.bs.collapse'].forEach((eventName): void => {
       new RegularEvent(eventName, (e: Event): void => {
         if (e.target !== this.containerContent) {
           return;
@@ -147,7 +147,7 @@ class FlexFormContainerContainer {
   }
 
   private registerPreviewUpdate(): void {
-    ['input', 'change'].forEach((eventName: string): void => {
+    ['input', 'change'].forEach((eventName): void => {
       new RegularEvent(eventName, (): void => {
         this.generatePreview();
       }).delegateTo(this.containerContent, 'input[type="text"], textarea');