typo3-typescript-sources 14.3.8 → 14.3.9

package/backend/image-manipulation.ts

@@ -280,7 +280,7 @@ class ImageManipulation {
     /**
      * Assign EventListener to cropVariantTriggers
      */
-    this.cropVariantTriggers.forEach((el: HTMLElement) =>
+    this.cropVariantTriggers.forEach((el) =>
       el.addEventListener('click', (e: Event): void => {
         /**
          * Is the current cropVariantTrigger is active, bail out.
@@ -341,8 +341,8 @@ class ImageManipulation {
       new RegularEvent('click', (): void => this.openPreview(this.data))
         .delegateTo(this.currentModal, 'button[name=preview]');
     } else {
-      this.currentModal.querySelectorAll('button[name=preview]')
-        .forEach((previewButton: HTMLElement) => previewButton.style.display = 'none');
+      this.currentModal.querySelectorAll<HTMLElement>('button[name=preview]')
+        .forEach((previewButton) => previewButton.style.display = 'none');
     }
 
     /**
@@ -400,8 +400,8 @@ class ImageManipulation {
           this.syncEnabled = target.checked;
           BrowserSession.set('sync-active-' + imageUid, this.syncEnabled ? 'true' : 'false');
           if (this.syncEnabled) {
-            this.currentModal.querySelectorAll('.panel-button[data-exclude-from-sync="true"]')
-              .forEach((e: HTMLElement) => e.setAttribute('disabled', 'disabled'));
+            this.currentModal.querySelectorAll<HTMLElement>('.panel-button[data-exclude-from-sync="true"]')
+              .forEach((e) => e.setAttribute('disabled', 'disabled'));
 
             // if the currently selected crop variant is now disabled, open the first available one.
             const isDisabled = this.currentModal.querySelector('.panel-button[data-crop-variant-id="' + this.currentCropVariant.id + '"][data-exclude-from-sync="true"]') !== null;
@@ -412,8 +412,8 @@ class ImageManipulation {
               }
             }
           } else {
-            this.currentModal.querySelectorAll('.panel-button[data-exclude-from-sync]')
-              .forEach((e: HTMLElement) => e.removeAttribute('disabled'));
+            this.currentModal.querySelectorAll<HTMLElement>('.panel-button[data-exclude-from-sync]')
+              .forEach((e) => e.removeAttribute('disabled'));
           }
         }
       ).delegateTo(this.currentModal, '#sync-crop-variants');
@@ -446,7 +446,7 @@ class ImageManipulation {
     this.imageOriginalSizeFactor = parseInt(image.dataset.originalWidth, 10) / imageData.naturalWidth;
 
     // iterate over the crop variants and set up their respective preview
-    this.cropVariantTriggers.forEach((elem: HTMLElement): void => {
+    this.cropVariantTriggers.forEach((elem): void => {
       const cropVariantId: string = elem.dataset.cropVariantId;
       const cropArea: Area = this.convertRelativeToAbsoluteCropArea(
         this.data[cropVariantId].cropArea,
@@ -507,9 +507,9 @@ class ImageManipulation {
 
     if (this.syncAvailable && this.syncEnabled) {
       const data = this.data;
-      Object.keys(this.data).forEach((cropVariant: string): void => {
+      Object.keys(this.data).forEach((cropVariant): void => {
         let trigger: HTMLElement = null;
-        this.cropVariantTriggers.forEach((e: HTMLElement) => {
+        this.cropVariantTriggers.forEach((e) => {
           if (e.dataset.cropVariantId === cropVariant) {
             trigger = e;
           }
@@ -540,9 +540,9 @@ class ImageManipulation {
 
     if (this.syncAvailable && this.syncEnabled) {
       const data = this.data;
-      Object.keys(this.data).forEach((cropVariant: string): void => {
+      Object.keys(this.data).forEach((cropVariant): void => {
         let trigger: HTMLElement = null;
-        this.cropVariantTriggers.forEach((e: HTMLElement) => {
+        this.cropVariantTriggers.forEach((e) => {
           if (e.dataset.cropVariantId === cropVariant) {
             trigger = e;
           }
@@ -579,8 +579,8 @@ class ImageManipulation {
     this.setAspectRatio(selectedRatio);
     this.setCropArea(temp.cropArea);
     this.currentCropVariant = Object.assign({}, temp, cropVariant);
-    this.cropBox?.querySelectorAll(this.coverAreaSelector)?.forEach((el: HTMLElement) => el.remove());
-    this.cropBox?.querySelectorAll(this.focusAreaSelector)?.forEach((el: HTMLElement) => el.remove());
+    this.cropBox?.querySelectorAll<HTMLElement>(this.coverAreaSelector)?.forEach((el) => el.remove());
+    this.cropBox?.querySelectorAll<HTMLElement>(this.focusAreaSelector)?.forEach((el) => el.remove());
 
     // check if new cropVariant has focusArea
     if (cropVariant.focusArea) {
@@ -655,7 +655,7 @@ class ImageManipulation {
    * @param {Array<Area>} coverAreas - An array of areas to construct the cover area elements from
    */
   private initCoverAreas(container: HTMLElement, coverAreas: Area[]): void {
-    coverAreas.forEach((coverArea: Area): void => {
+    coverAreas.forEach((coverArea): void => {
       const styles = {
         height: ImageManipulation.toCssPercent(coverArea.height),
         left: ImageManipulation.toCssPercent(coverArea.x),
@@ -782,7 +782,7 @@ class ImageManipulation {
       return false;
     }
     return coverAreas
-      .some((coverArea: Area): boolean => {
+      .some((coverArea): boolean => {
         return focusArea.x < coverArea.x + coverArea.width
           && coverArea.x < focusArea.x + focusArea.width
           && focusArea.y < coverArea.y + coverArea.height
@@ -831,7 +831,7 @@ class ImageManipulation {
     const imageData: Cropper.ImageData = this.cropper.getImageData();
 
     // iterate over the crop variants and set up their respective preview
-    Object.keys(data).forEach((cropVariantId: string) => {
+    Object.keys(data).forEach((cropVariantId) => {
       const cropVariant: CropVariant = data[cropVariantId];
       const cropData: Area = this.convertRelativeToAbsoluteCropArea(cropVariant.cropArea, imageData);
 
@@ -956,8 +956,8 @@ class ImageManipulation {
 
   private renderElements(template: TemplateResult, target: HTMLElement, selector?: string): HTMLElement|null {
     const nodes = renderNodes(template);
-    const elements = Array.from(nodes).filter((node: Node): boolean => node instanceof HTMLElement);
-    elements.forEach((element: HTMLElement) => target.appendChild(element));
+    const elements = Array.from(nodes).filter((node): node is HTMLElement => node instanceof HTMLElement);
+    elements.forEach((element) => target.appendChild(element));
     return selector ? target.querySelector(selector) : null;
   }
 }

package/backend/layout-module/drag-drop.ts

@@ -314,9 +314,9 @@ class DragDrop {
       iconIdentifier = contentElementIcon.dataset.identifier;
     }
 
-    const contentImagePreviews = contentElement.querySelectorAll('.preview-thumbnails-element-image img');
+    const contentImagePreviews = contentElement.querySelectorAll<HTMLImageElement>('.preview-thumbnails-element-image img');
     if (contentImagePreviews.length > 0) {
-      contentImagePreviews.forEach((image: HTMLImageElement): void => {
+      contentImagePreviews.forEach((image): void => {
         thumbnails.push({
           src: image.src,
           height: image.height,
@@ -343,7 +343,7 @@ class DragDrop {
   }
 
   protected showDropZones(): void {
-    document.querySelectorAll(Identifiers.dropZone).forEach((element: HTMLElement): void => {
+    document.querySelectorAll<HTMLElement>(Identifiers.dropZone).forEach((element): void => {
       if (!isContentTypeAllowedInColumn(this.draggedContentType, element.closest('[data-colpos]'))) {
         return;
       }
@@ -357,7 +357,7 @@ class DragDrop {
   }
 
   protected hideDropZones(): void {
-    document.querySelectorAll(Identifiers.dropZone).forEach((element: HTMLElement): void => {
+    document.querySelectorAll<HTMLElement>(Identifiers.dropZone).forEach((element): void => {
       element.hidden = true;
       const addContentButton = element.parentElement.querySelector(Identifiers.addContent) as HTMLElement;
       if (addContentButton !== null) {

package/backend/layout-module/paste.ts

@@ -99,7 +99,7 @@ class Paste {
    */
   private activatePasteIcons(): void {
     if (this.pasteAfterLinkTemplate && this.pasteIntoLinkTemplate) {
-      document.querySelectorAll('.t3js-page-new-ce').forEach((el: HTMLElement): void => {
+      document.querySelectorAll<HTMLElement>('.t3js-page-new-ce').forEach((el): void => {
         if (!isContentTypeAllowedForTarget(this.itemOnClipboardCType, el)) {
           return;
         }

package/backend/live-search/element/result/item/action/action-container.ts

@@ -31,7 +31,7 @@ export class ActionContainer extends LitElement {
 
   protected override render(): TemplateResult {
     return html`<typo3-backend-live-search-result-action-list>
-      ${this.resultItem.actions.map((action: ResultItemActionInterface) => this.renderActionItem(this.resultItem, action))}
+      ${this.resultItem.actions.map((action) => this.renderActionItem(this.resultItem, action))}
     </typo3-backend-live-search-result-action-list>`;
   }
 

package/backend/live-search/element/result/item/item-container.ts

@@ -45,13 +45,13 @@ export class ItemContainer extends LitElement {
 
   protected override render(): TemplateResult {
     const groupedResults: GroupedResultItems = {};
-    const filteredResults = this.results.filter((result: ResultItemInterface): boolean => result !== null);
+    const filteredResults = this.results.filter((result): boolean => result !== null);
     if (filteredResults.length !== this.results.length) {
       console.warn(
         'The result set contained "null" values, indicating something went wrong while building the search results. Affected values were removed to no break the user interface.'
       );
     }
-    filteredResults.forEach((result: ResultItemInterface): void => {
+    filteredResults.forEach((result): void => {
       if (!(result.typeLabel in groupedResults)) {
         groupedResults[result.typeLabel] = [result];
       } else {
@@ -69,7 +69,7 @@ export class ItemContainer extends LitElement {
     for (const [type, results] of Object.entries(groupedResults)) {
       const countElements = results.length;
       items.push(html`<h6 class="livesearch-result-item-group-label">${type} (${countElements})</h6>`);
-      items.push(...results.map((result: ResultItemInterface) => html`${until(
+      items.push(...results.map((result) => html`${until(
         this.renderResultItem(result),
         html`<typo3-backend-spinner></typo3-backend-spinner>`
       )}`));
@@ -122,7 +122,7 @@ export class ItemContainer extends LitElement {
   }
 
   private onScroll(e: Event): void {
-    this.querySelectorAll('.livesearch-result-item-group-label').forEach((groupLabel: HTMLElement): void => {
+    this.querySelectorAll<HTMLElement>('.livesearch-result-item-group-label').forEach((groupLabel): void => {
       groupLabel.classList.toggle('sticky', groupLabel.offsetTop <= (e.target as HTMLElement).scrollTop);
     });
   }

package/backend/live-search/element/result/result-container.ts

@@ -112,4 +112,9 @@ declare global {
   interface HTMLElementTagNameMap {
     'typo3-backend-live-search-result-container': ResultContainer;
   }
+
+  interface HTMLElementEventMap {
+    'livesearch:request-actions': CustomEvent<RequestActionsEventData>;
+    'livesearch:invoke-action': CustomEvent<InvokeActionEventData>;
+  }
 }

package/backend/live-search/element/result/result-pagination.ts

@@ -57,7 +57,7 @@ export class ResultPagination extends LitElement {
             </typo3-backend-live-search-result-page>
           </li>` : nothing}
         ${this.pagination.hasLessPages ? html`<li class="page-item disabled"><span class="page-link disabled">&hellip;</span></li>` : nothing}
-        ${this.pagination.allPageNumbers.map((page: number) => html`
+        ${this.pagination.allPageNumbers.map((page) => html`
           <li class="page-item">
             <typo3-backend-live-search-result-page page="${page}" perPage="${this.pagination.itemsPerPage}" class="page-link ${this.pagination.currentPage === page ? 'active' : ''}">${page}</typo3-backend-live-search-result-page>
           </li>

package/backend/live-search/live-search.ts

@@ -187,7 +187,7 @@ class LiveSearch {
      *   // do stuff here
      * });
      */
-    ['modal-loaded', 'typo3-modal-shown'].forEach((eventToListenOn: string) => {
+    ['modal-loaded', 'typo3-modal-shown'].forEach((eventToListenOn) => {
       modal.addEventListener(eventToListenOn, () => {
         const searchField = modal.querySelector('input[type="search"]') as HTMLInputElement|null;
         if (searchField !== null) {
@@ -200,7 +200,7 @@ class LiveSearch {
 
   private composeSearchOptions(searchOptions: SearchOption[]): { [key: string]: string[] } {
     const composedSearchOptions: { [key: string]: string[] } = {};
-    searchOptions.forEach((searchOption: SearchOption): void => {
+    searchOptions.forEach((searchOption): void => {
       if (composedSearchOptions[searchOption.key] === undefined) {
         composedSearchOptions[searchOption.key] = [];
       }

package/backend/localization/label-provider.ts

@@ -129,8 +129,8 @@ function createFormatter(label: string): IntlMessageFormat {
 }
 
 const formatters: Formatters = {
-  getNumberFormat: memoize('number', (locale, opts) => new Intl.NumberFormat(locale, opts)),
-  getDateTimeFormat: memoize('datetime', (locale, opts) => {
+  getNumberFormat: memoize('number', (locale?: string | string[], opts?: Intl.NumberFormatOptions) => new Intl.NumberFormat(locale, opts)),
+  getDateTimeFormat: memoize('datetime', (locale?: Intl.LocalesArgument, opts?: Intl.DateTimeFormatOptions) => {
     const { dateStyle, timeStyle, timeZone } = opts;
 
     // Apply configured TYPO3 date format to the "medium" preset
@@ -152,10 +152,10 @@ const formatters: Formatters = {
 
     return new Intl.DateTimeFormat(locale, { dateStyle, timeStyle, timeZone });
   }),
-  getPluralRules: memoize('date', (locale, opts) => new Intl.PluralRules(locale, opts)),
+  getPluralRules: memoize('date', (locale?: Intl.LocalesArgument, opts?: Intl.PluralRulesOptions) => new Intl.PluralRules(locale, opts)),
 };
 
-type Factory = (...args: unknown[]) => object;
+type Factory = (...args: never[]) => object;
 const cache: Record<string, object> = {};
 /**
  * Cache the (object) result of a factory function,

package/backend/localization/localization-wizard.ts

@@ -48,7 +48,7 @@ export interface LocalizationDataStore extends DataStore {
 type LocalizationDataStoreKey = keyof LocalizationDataStore;
 
 export interface LocalizationContext {
-  wizard: Wizard;
+  wizard: Wizard<LocalizationDataStore>;
   targetLanguage: number;
   recordType: string;
   recordUid: number;
@@ -72,13 +72,13 @@ export class LocalizationWizard extends LitElement {
   @property({ type: Number, attribute: 'record-uid' }) recordUid: number;
   @property({ type: Number, attribute: 'target-language' }) targetLanguage?: number;
 
-  @query('typo3-backend-wizard') wizard!: Wizard;
+  @query('typo3-backend-wizard') wizard!: Wizard<LocalizationDataStore>;
 
   @state() steps: WizardStepInterface[] = [];
   @state() submissionService: SubmissionServiceInterface;
 
   protected readonly recordInfoTask = new Task(this, {
-    task: async ([recordType, recordUid]: [string, number]): Promise<RecordInfo> => {
+    task: async ([recordType, recordUid]): Promise<RecordInfo> => {
       try {
         const response = await new AjaxRequest(TYPO3.settings.ajaxUrls.wizard_localization_get_record).withQueryArguments({
           recordType: recordType,
@@ -97,7 +97,7 @@ export class LocalizationWizard extends LitElement {
         throw error;
       }
     },
-    args: () => [this.recordType, this.recordUid],
+    args: () => [this.recordType, this.recordUid] as const,
   });
 
   override connectedCallback() {

package/backend/localization/steps/content-record-selection-step.ts

@@ -72,7 +72,7 @@ export class ContentRecordSelectionStep implements WizardStepInterface, WizardSt
 
   constructor(private readonly context: LocalizationContext) {
     this.task = new Task(this.context.wizard, {
-      task: async ([pageUid, targetLanguage, sourceLanguage]: [number, number, number]): Promise<PageRecordSelection> => {
+      task: async ([pageUid, targetLanguage, sourceLanguage]): Promise<PageRecordSelection> => {
         const response = await new AjaxRequest(TYPO3.settings.ajaxUrls.wizard_localization_get_content).withQueryArguments({
           pageUid: pageUid,
           targetLanguage: targetLanguage,
@@ -82,7 +82,7 @@ export class ContentRecordSelectionStep implements WizardStepInterface, WizardSt
 
         return result;
       },
-      args: () => [this.context.recordUid, this.context.getStoreData('targetLanguage'), this.context.getStoreData('sourceLanguage')],
+      args: () => [this.context.recordUid, this.context.getStoreData('targetLanguage'), this.context.getStoreData('sourceLanguage')] as const,
       autoRun: false
     });
   }
@@ -194,9 +194,9 @@ export class ContentRecordSelectionStep implements WizardStepInterface, WizardSt
     const records: ContentRecord[] = [];
 
     if (this.task.value) {
-      this.task.value.layout.rows.forEach((row: LayoutRow) => {
-        row.columns.forEach((column: LayoutColumn) => {
-          column.records.forEach((record: ContentRecord) => {
+      this.task.value.layout.rows.forEach((row) => {
+        row.columns.forEach((column) => {
+          column.records.forEach((record) => {
             if (selectedUids.includes(record.uid)) {
               records.push(record);
             }
@@ -355,9 +355,9 @@ export class ContentRecordSelectionStep implements WizardStepInterface, WizardSt
 
   private getAllRecordUids(layout: BackendLayoutStructure): number[] {
     const allUids: number[] = [];
-    layout.rows.forEach((row: LayoutRow) => {
-      row.columns.forEach((column: LayoutColumn) => {
-        column.records.forEach((record: ContentRecord) => {
+    layout.rows.forEach((row) => {
+      row.columns.forEach((column) => {
+        column.records.forEach((record) => {
           allUids.push(record.uid);
         });
       });

package/backend/localization/steps/handler-selection-step.ts

@@ -40,7 +40,7 @@ export class HandlerSelectionStep implements WizardStepInterface, WizardStepValu
 
   constructor(private readonly context: LocalizationContext) {
     this.task = new Task(this.context.wizard, {
-      task: async ([recordType, recordUid, sourceLanguage, targetLanguage, mode]: [string, number, number | null, number | null, string | null]): Promise<LocalizationHandler[]> => {
+      task: async ([recordType, recordUid, sourceLanguage, targetLanguage, mode]): Promise<LocalizationHandler[]> => {
         if (sourceLanguage == null || targetLanguage == null || mode == null) {
           return [];
         }
@@ -58,7 +58,7 @@ export class HandlerSelectionStep implements WizardStepInterface, WizardStepValu
 
         return handlers;
       },
-      args: () => [this.context.recordType, this.context.recordUid, this.context.getStoreData('sourceLanguage'), this.context.getStoreData('targetLanguage'), this.context.getStoreData('localizationMode')],
+      args: () => [this.context.recordType, this.context.recordUid, this.context.getStoreData('sourceLanguage'), this.context.getStoreData('targetLanguage'), this.context.getStoreData('localizationMode')] as const,
       autoRun: false
     });
   }
@@ -114,7 +114,7 @@ export class HandlerSelectionStep implements WizardStepInterface, WizardStepValu
             <h2 class="h4">${localizationWizardLabels.get('step.handler_selection.headline')}</h2>
             <p>${localizationWizardLabels.get('step.handler_selection.description')}</p>
             <div class="form-check-card-container">
-              ${handlers.map((handler: LocalizationHandler) => this.renderHandlerOption(handler))}
+              ${handlers.map((handler) => this.renderHandlerOption(handler))}
             </div>
           </div>
         `;
@@ -147,7 +147,7 @@ export class HandlerSelectionStep implements WizardStepInterface, WizardStepValu
       return [];
     }
 
-    const handler = this.task.value.find((h: LocalizationHandler) => h.identifier === selectedHandler);
+    const handler = this.task.value.find((h) => h.identifier === selectedHandler);
     if (!handler) {
       return [];
     }

package/backend/localization/steps/mode-step.ts

@@ -41,7 +41,7 @@ export class ModeStep implements WizardStepInterface, WizardStepValueInterface,
 
   constructor(private readonly context: LocalizationContext) {
     this.task = new Task(this.context.wizard, {
-      task: async ([recordType, recordUid, targetLanguage, sourceLanguage]: [string, number, number | null, number | null]): Promise<LocalizationMode[]> => {
+      task: async ([recordType, recordUid, targetLanguage, sourceLanguage]): Promise<LocalizationMode[]> => {
         if (targetLanguage == null || sourceLanguage == null) {
           return [];
         }
@@ -56,7 +56,7 @@ export class ModeStep implements WizardStepInterface, WizardStepValueInterface,
 
         return modes;
       },
-      args: () => [this.context.recordType, this.context.recordUid, this.context.getStoreData('targetLanguage'), this.context.getStoreData('sourceLanguage')],
+      args: () => [this.context.recordType, this.context.recordUid, this.context.getStoreData('targetLanguage'), this.context.getStoreData('sourceLanguage')] as const,
       autoRun: false
     });
   }
@@ -110,7 +110,7 @@ export class ModeStep implements WizardStepInterface, WizardStepValueInterface,
           content = html`
             <p>${localizationWizardLabels.get('step.modes.description')}</p>
             <div class="form-check-card-container">
-              ${modes.map((mode: LocalizationMode) => html`
+              ${modes.map((mode) => html`
                 <div class="form-check form-check-type-card">
                   <input
                     class="form-check-input"
@@ -171,7 +171,7 @@ export class ModeStep implements WizardStepInterface, WizardStepValueInterface,
       return [];
     }
 
-    const mode = this.task.value.find((m: LocalizationMode) => m.key === selectedMode);
+    const mode = this.task.value.find((m) => m.key === selectedMode);
     if (!mode) {
       return [];
     }

package/backend/localization/steps/source-language-step.ts

@@ -33,7 +33,7 @@ export class SourceLanguageStep implements WizardStepInterface, WizardStepValueI
 
   constructor(private readonly context: LocalizationContext) {
     this.task = new Task(this.context.wizard, {
-      task: async ([recordType, recordUid, targetLanguageId]: [string, number, number | null]): Promise<LocalizationLanguageRecord[]> => {
+      task: async ([recordType, recordUid, targetLanguageId]): Promise<LocalizationLanguageRecord[]> => {
         if (targetLanguageId == null) {
           return [];
         }
@@ -47,7 +47,7 @@ export class SourceLanguageStep implements WizardStepInterface, WizardStepValueI
 
         return sourceLanguages;
       },
-      args: () => [this.context.recordType, this.context.recordUid, this.context.getStoreData('targetLanguage')],
+      args: () => [this.context.recordType, this.context.recordUid, this.context.getStoreData('targetLanguage')] as const,
       autoRun: false
     });
   }
@@ -108,7 +108,7 @@ export class SourceLanguageStep implements WizardStepInterface, WizardStepValueI
             <h2 class="h4">${localizationWizardLabels.get('step.source_language.headline')}</h2>
             <p>${localizationWizardLabels.get('step.source_language.description')}</p>
             <div class="form-check-card-container">
-              ${languages.map((language: LocalizationLanguageRecord) => html`
+              ${languages.map((language) => html`
                 <div class="form-check form-check-type-card">
                   <input
                     class="form-check-input"
@@ -159,7 +159,7 @@ export class SourceLanguageStep implements WizardStepInterface, WizardStepValueI
       return [];
     }
 
-    const selectedLanguage = this.task.value.find((lang: LocalizationLanguageRecord) => lang.uid === selectedSourceLanguage);
+    const selectedLanguage = this.task.value.find((lang) => lang.uid === selectedSourceLanguage);
     if (!selectedLanguage) {
       return [];
     }

package/backend/localization/steps/target-language-step.ts

@@ -36,7 +36,7 @@ export class TargetLanguageStep implements WizardStepInterface, WizardStepValueI
 
   constructor(private readonly context: LocalizationContext) {
     this.task = new Task(this.context.wizard, {
-      task: async ([recordType, recordUid]: [string, number]): Promise<LocalizationLanguageRecord[]> => {
+      task: async ([recordType, recordUid]): Promise<LocalizationLanguageRecord[]> => {
         const response = await new AjaxRequest(TYPO3.settings.ajaxUrls.wizard_localization_get_targets).withQueryArguments({
           recordType: recordType,
           recordUid: recordUid,
@@ -51,7 +51,7 @@ export class TargetLanguageStep implements WizardStepInterface, WizardStepValueI
 
         return targetLanguages;
       },
-      args: () => [this.context.recordType, this.context.recordUid],
+      args: () => [this.context.recordType, this.context.recordUid] as const,
       autoRun: false
     });
   }
@@ -120,7 +120,7 @@ export class TargetLanguageStep implements WizardStepInterface, WizardStepValueI
             <h2 class="h4">${localizationWizardLabels.get('step.target_language.headline')}</h2>
             <p>${localizationWizardLabels.get('step.target_language.description')}</p>
             <div class="form-check-card-container">
-              ${languages.map((language: LocalizationLanguageRecord) => html`
+              ${languages.map((language) => html`
                 <div class="form-check form-check-type-card">
                   <input
                     class="form-check-input"
@@ -171,7 +171,7 @@ export class TargetLanguageStep implements WizardStepInterface, WizardStepValueI
       return [];
     }
 
-    const selectedLanguage = this.task.value.find((lang: LocalizationLanguageRecord) => lang.uid === selectedTargetLanguage);
+    const selectedLanguage = this.task.value.find((lang) => lang.uid === selectedTargetLanguage);
     if (!selectedLanguage) {
       return [];
     }

package/backend/login.ts

@@ -117,7 +117,7 @@ class BackendLogin {
         const result = await response.resolve('application/json') as PreflightResponse;
         if (result.capabilities.referrer !== true) {
           document.querySelectorAll(this.options.errorNoReferrer)
-            .forEach((element: HTMLElement): void => element.classList.remove('hidden'));
+            .forEach((element): void => element.classList.remove('hidden'));
         }
       });
   }
@@ -186,7 +186,7 @@ class BackendLogin {
     }
 
     (document.querySelectorAll('.t3js-clearable') as NodeListOf<HTMLInputElement>).forEach(
-      (clearableField: HTMLInputElement) => clearableField.clearable(),
+      (clearableField) => clearableField.clearable(),
     );
 
     const passwordField: HTMLInputElement = document.querySelector(this.options.passwordField);

package/backend/module/iframe.ts

@@ -122,4 +122,14 @@ declare global {
   interface HTMLElementTagNameMap {
     'typo3-iframe-module': IframeModuleElement;
   }
+
+  interface HTMLElementEventMap {
+    'typo3-iframe-load': CustomEvent<ModuleState>;
+    'typo3-iframe-loaded': CustomEvent<ModuleState>;
+  }
+
+  interface DocumentEventMap {
+    'typo3-iframe-load': CustomEvent<ModuleState>;
+    'typo3-iframe-loaded': CustomEvent<ModuleState>;
+  }
 }

package/backend/module/router.ts

@@ -266,4 +266,14 @@ declare global {
   interface HTMLElementTagNameMap {
     'typo3-backend-module-router': ModuleRouter;
   }
+
+  interface HTMLElementEventMap {
+    'typo3-module-load': CustomEvent<ModuleState>;
+    'typo3-module-loaded': CustomEvent<ModuleState>;
+  }
+
+  interface DocumentEventMap {
+    'typo3-module-load': CustomEvent<ModuleState>;
+    'typo3-module-loaded': CustomEvent<ModuleState>;
+  }
 }

package/backend/module-menu.ts

@@ -160,7 +160,7 @@ class ModuleMenu {
 
   private static highlightModule(identifier: string): void {
     const menu = document.querySelector(ModuleMenuSelector.menu);
-    menu.querySelectorAll(ModuleMenuSelector.item).forEach((element: Element) => {
+    menu.querySelectorAll(ModuleMenuSelector.item).forEach((element) => {
       element.classList.remove('modulemenu-action-active');
       element.removeAttribute('aria-current');
     });
@@ -171,8 +171,8 @@ class ModuleMenu {
 
   private static highlightModuleMenuItem(module: Module, current: boolean = true): void {
     const menu = document.querySelector(ModuleMenuSelector.menu);
-    const menuElements = menu.querySelectorAll(ModuleMenuSelector.item + selector`[data-modulemenu-identifier="${module.name}"]`);
-    menuElements.forEach((element: HTMLElement) => {
+    const menuElements = menu.querySelectorAll<HTMLElement>(ModuleMenuSelector.item + selector`[data-modulemenu-identifier="${module.name}"]`);
+    menuElements.forEach((element) => {
       element.classList.add('modulemenu-action-active');
       if (current) {
         element.setAttribute('aria-current', 'location');

package/backend/multi-record-selection-action.ts

@@ -33,7 +33,7 @@ export class MultiRecordSelectionAction {
   {
     // Evaluate all checked records and if valid, add their uid to the list
     const entityIdentifiers: Array<string> = [];
-    eventDetails.checkboxes.forEach((checkbox: HTMLInputElement): void => {
+    eventDetails.checkboxes.forEach((checkbox): void => {
       const checkboxContainer: HTMLElement = checkbox.closest(MultiRecordSelectionSelectors.elementSelector);
       if (checkboxContainer !== null && checkboxContainer.dataset[eventDetails.configuration.idField]) {
         entityIdentifiers.push(checkboxContainer.dataset[eventDetails.configuration.idField]);

package/backend/multi-record-selection-delete-action.ts

@@ -85,7 +85,7 @@ class MultiRecordSelectionDeleteAction {
             try {
               const result = await AjaxDataHandler.process({
                 cmd: {
-                  [tableName]: Object.fromEntries(entityIdentifiers.map((identifier: string): [string, DatahandlerCommand] => [
+                  [tableName]: Object.fromEntries(entityIdentifiers.map((identifier): [string, DatahandlerCommand] => [
                     identifier, { delete: 1 }
                   ]))
                 }