typo3-typescript-sources 14.3.7 → 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;
@@ -160,7 +160,7 @@ export class ColumnSelectorButton extends PseudoButtonLitElement {
           text: this.buttonOk,
           btnClass: 'btn-primary',
           name: 'update',
-          trigger: (e: Event, modal: ModalElement): void => this.processSelection(modal)
+          form: 'columnSelectorForm',
         }
       ],
       ajaxCallback: (): void => this.handleModalContentLoaded(modal)
@@ -198,7 +198,10 @@ export class ColumnSelectorButton extends PseudoButtonLitElement {
       return;
     }
     // Prevent the form from being submitted as the form data will be send via an ajax request
-    form.addEventListener('submit', (e: Event): void => { e.preventDefault(); });
+    form.addEventListener('submit', (e: Event): void => {
+      e.preventDefault();
+      this.processSelection(currentModal);
+    });
 
     const columns: NodeListOf<HTMLInputElement> = currentModal.querySelectorAll(Selectors.columnsSelector);
     const columnsFilter: HTMLInputElement = currentModal.querySelector(Selectors.columnsFilterSelector);
@@ -215,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);
       });
@@ -245,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();
 
@@ -258,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>> }>;
+  }
 }