typo3-typescript-sources 14.3.8 → 14.3.9

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

@@ -98,7 +98,7 @@ class FlexFormSectionContainer {
 
   private readonly updateSorting = (e: Sortable.SortableEvent): void => {
     const actionFields: NodeListOf<HTMLInputElement> = this.container.querySelectorAll(Selectors.actionFieldSelector);
-    actionFields.forEach((element: HTMLInputElement, key: number): void => {
+    actionFields.forEach((element, key): void => {
       element.value = key.toString();
     });
 

package/backend/form-engine/container/inline-control-container.ts

@@ -161,7 +161,7 @@ class InlineControlContainer extends HTMLElement {
   }
 
   private static getValuesFromHashMap(hashmap: UniqueDefinitionCollection): Array<any> {
-    return Object.keys(hashmap).map((key: string) => hashmap[key]);
+    return Object.keys(hashmap).map((key) => hashmap[key]);
   }
 
   private static selectOptionValueExists(selectElement: HTMLSelectElement, value: string): boolean {
@@ -449,10 +449,10 @@ class InlineControlContainer extends HTMLElement {
    * @param {string} afterUid
    */
   private async importRecord(params: Array<any>, afterUid?: string): Promise<void> {
-    return this.ajaxDispatcher.send(
+    return this.ajaxDispatcher.send<InlineResponseInterface>(
       this.ajaxDispatcher.newRequest(this.ajaxDispatcher.getEndpoint(this.endpoints.create)),
       params,
-    ).then(async (response: InlineResponseInterface): Promise<void> => {
+    ).then(async (response): Promise<void> => {
       if (this.isBelowMax()) {
         this.createRecord(
           response.compilerInput.uid,
@@ -553,10 +553,10 @@ class InlineControlContainer extends HTMLElement {
         return;
       }
 
-      this.ajaxDispatcher.send(
+      this.ajaxDispatcher.send<InlineResponseInterface>(
         this.ajaxDispatcher.newRequest(this.ajaxDispatcher.getEndpoint(this.endpoints.synchronizelocalize)),
         [this.objectGroup, targetElement.dataset.type],
-      ).then(async (response: InlineResponseInterface): Promise<void> => {
+      ).then(async (response): Promise<void> => {
         this.recordsContainer.insertAdjacentHTML('beforeend', response.data);
 
         const objectIdPrefix = this.objectGroup + Separators.structureSeparator;
@@ -617,9 +617,9 @@ class InlineControlContainer extends HTMLElement {
 
     if (!isLoading) {
       const ajaxRequest = this.ajaxDispatcher.newRequest(this.ajaxDispatcher.getEndpoint(this.endpoints.details));
-      const request = this.ajaxDispatcher.send(ajaxRequest, [objectId]);
+      const request = this.ajaxDispatcher.send<InlineResponseInterface>(ajaxRequest, [objectId]);
 
-      request.then(async (response: InlineResponseInterface): Promise<void> => {
+      request.then(async (response): Promise<void> => {
         delete this.requestQueue[objectId];
         delete this.progressQueue[objectId];
 
@@ -762,7 +762,7 @@ class InlineControlContainer extends HTMLElement {
     const currentRecordContainer = this.getRecordContainer(objectId);
     const recordUid = currentRecordContainer.dataset.objectUid;
     const recordListContainer = this.recordsContainer;
-    const records = Array.from(recordListContainer.children).map((child: HTMLElement) => child.dataset.objectUid);
+    const records = Array.from(recordListContainer.children as HTMLCollectionOf<HTMLElement>).map((child) => child.dataset.objectUid);
     const position = records.indexOf(recordUid);
     let isChanged = false;
 
@@ -795,8 +795,8 @@ class InlineControlContainer extends HTMLElement {
     }
 
     const recordListContainer = this.recordsContainer;
-    const records = Array.from(recordListContainer.querySelectorAll(selector`[data-object-parent-group="${this.objectGroup}"][data-placeholder-record="0"]`))
-      .map((child: HTMLElement) => child.dataset.objectUid);
+    const records = Array.from(recordListContainer.querySelectorAll<HTMLElement>(selector`[data-object-parent-group="${this.objectGroup}"][data-placeholder-record="0"]`))
+      .map((child) => child.dataset.objectUid);
 
     (<HTMLInputElement>formField).value = records.join(',');
     FormEngine.markFieldAsChanged(formField);
@@ -841,12 +841,12 @@ class InlineControlContainer extends HTMLElement {
    * @param {boolean} visible
    */
   private toggleContainerControls(visible: boolean): void {
-    const controlContainer = this.querySelectorAll(
+    const controlContainer = this.querySelectorAll<HTMLElement>(
       ':scope > ' + Selectors.controlContainer
     );
-    controlContainer.forEach((container: HTMLElement): void => {
+    controlContainer.forEach((container): void => {
       const controlContainerButtons = container.querySelectorAll<HTMLButtonElement | HTMLAnchorElement>('button, a');
-      controlContainerButtons.forEach((button: HTMLButtonElement | HTMLAnchorElement): void => {
+      controlContainerButtons.forEach((button): void => {
         button.hidden = !visible;
       });
     });
@@ -912,7 +912,7 @@ class InlineControlContainer extends HTMLElement {
       return;
     }
 
-    records.forEach((recordUid: string, index: number): void => {
+    records.forEach((recordUid, index): void => {
       const recordContainer = this.getRecordContainer(objectId + Separators.structureSeparator + recordUid);
       if (recordContainer === null) {
         return;

package/backend/form-engine/element/abstract-sortable-select-items.ts

@@ -25,7 +25,7 @@ export abstract class AbstractSortableSelectItems {
    * @param {HTMLSelectElement} fieldElement
    */
   private static moveOptionToTop(fieldElement: HTMLSelectElement): void {
-    Array.from(fieldElement.querySelectorAll(':checked')).reverse().forEach((optionEl: HTMLOptionElement): void => {
+    Array.from(fieldElement.querySelectorAll<HTMLOptionElement>(':checked')).reverse().forEach((optionEl): void => {
       fieldElement.insertBefore(optionEl, fieldElement.firstElementChild);
     });
   }
@@ -36,7 +36,7 @@ export abstract class AbstractSortableSelectItems {
    * @param {HTMLSelectElement} fieldElement
    */
   private static moveOptionToBottom(fieldElement: HTMLSelectElement): void {
-    fieldElement.querySelectorAll(':checked').forEach((optionEl: HTMLOptionElement): void => {
+    fieldElement.querySelectorAll<HTMLOptionElement>(':checked').forEach((optionEl): void => {
       fieldElement.insertBefore(optionEl, null);
     });
   }
@@ -85,7 +85,7 @@ export abstract class AbstractSortableSelectItems {
    */
   private static removeOption(fieldElement: HTMLSelectElement, availableFieldElement: HTMLSelectElement): void {
     const previousSelectIndex = fieldElement.selectedIndex;
-    fieldElement.querySelectorAll(':checked').forEach((option: HTMLOptionElement): void => {
+    fieldElement.querySelectorAll<HTMLOptionElement>(':checked').forEach((option): void => {
       const originalOption = <HTMLOptionElement>availableFieldElement.querySelector(selector`option[value="${option.value}"]`);
       if (originalOption !== null) {
         originalOption.classList.remove('hidden');

package/backend/form-engine/element/color-element.ts

@@ -72,7 +72,7 @@ class ColorElement extends HTMLElement {
     FormEngineValidation.validateField(e.target as HTMLInputElement);
     FormEngine.markFieldAsChanged(e.target as HTMLInputElement);
 
-    document.querySelectorAll('.module-docheader-bar .btn').forEach((btn: HTMLButtonElement): void => {
+    document.querySelectorAll<HTMLButtonElement>('.module-docheader-bar .btn').forEach((btn): void => {
       btn.classList.remove('disabled');
       btn.disabled = false;
     });

package/backend/form-engine/element/datetime-element.ts

@@ -56,7 +56,7 @@ class DatetimeElement extends HTMLElement {
       FormEngineValidation.validateField(e.target as HTMLInputElement);
       FormEngine.markFieldAsChanged(e.target as HTMLInputElement);
 
-      document.querySelectorAll('.module-docheader-bar .btn').forEach((btn: HTMLButtonElement): void => {
+      document.querySelectorAll<HTMLButtonElement>('.module-docheader-bar .btn').forEach((btn): void => {
         btn.classList.remove('disabled');
         btn.disabled = false;
       });

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

@@ -73,11 +73,11 @@ export class CharCounter extends LitElement {
     this.targetElement.removeEventListener('blur', this.onBlur);
   }
 
-  private readonly onInput = (e: InputEvent): void => {
+  private readonly onInput = (e: Event): void => {
     this.determineRemainingCharacters(e.target as HTMLInputElement|HTMLTextAreaElement);
   };
 
-  private readonly onFocus = (e: FocusEvent): void => {
+  private readonly onFocus = (e: Event): void => {
     this.determineRemainingCharacters(e.target as HTMLInputElement|HTMLTextAreaElement);
     this.hidden = false;
   };

package/backend/form-engine/element/extra/select-box-filter.ts

@@ -82,7 +82,7 @@ class SelectBoxFilter {
     // A plain substring match, no RegExp involved, therefore nothing to escape either
     const foldedFilterText = TextNormalizer.foldCaseAndDiacritics(TextNormalizer.normalizeInvisibleCharacters(filterText));
 
-    this.availableOptions.forEach((option: HTMLOptionElement, index: number): void => {
+    this.availableOptions.forEach((option, index): void => {
       option.hidden = filterText.length > 0 && !this.foldedLabels[index].includes(foldedFilterText);
       SelectBoxFilter.toggleOptGroup(option);
     });

package/backend/form-engine/element/mfa-info-element.ts

@@ -71,7 +71,7 @@ class MfaInfoElement {
       this.prepareDeactivateRequest(this.deactivteMfaButton);
     }).bindTo(this.deactivteMfaButton);
 
-    this.deactivteProviderButtons.forEach((buttonElement: HTMLButtonElement): void => {
+    this.deactivteProviderButtons.forEach((buttonElement): void => {
       new RegularEvent('click', (e: Event): void => {
         e.preventDefault();
         this.prepareDeactivateRequest(buttonElement);
@@ -120,7 +120,7 @@ class MfaInfoElement {
     }).then(async (response: AjaxResponse): Promise<void> => {
       const data: Response = await response.resolve();
       if (data.status.length > 0) {
-        data.status.forEach((status: Status): void => {
+        data.status.forEach((status): void => {
           if (data.success) {
             Notification.success(status.title, status.message);
           } else {

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

@@ -36,7 +36,7 @@ export class OnlineMediaFormElement extends LitElement {
           <div class="form-text">
             ${this.allowedExtensionsHelpText}<br>
             <ul class="badge-list">
-            ${this.allowedExtensions.split(',').map((ext: string) => html`
+            ${this.allowedExtensions.split(',').map((ext) => html`
               <li><span class="badge badge-secondary">${ext.trim().toLowerCase()}</span></li>
             `)}
             </ul>
@@ -62,4 +62,8 @@ declare global {
   interface HTMLElementTagNameMap {
     'typo3-backend-formengine-online-media-form': OnlineMediaFormElement;
   }
+
+  interface HTMLElementEventMap {
+    'typo3:formengine:online-media-added': CustomEvent<{ file: number }>;
+  }
 }

package/backend/form-engine/element/select-multiple-side-by-side-element.ts

@@ -52,9 +52,9 @@ class SelectMultipleSideBySideElement extends AbstractSortableSelectItems {
     const fieldName = element.dataset.relatedfieldname;
     if (fieldName) {
       const exclusiveValues = Utility.trimExplode(',', element.dataset?.exclusivevalues ?? '');
-      const selectedOptions = element.querySelectorAll('option:checked'); // Yep, :checked finds selected options
+      const selectedOptions = element.querySelectorAll<HTMLOptionElement>('option:checked'); // Yep, :checked finds selected options
       if (selectedOptions.length > 0) {
-        selectedOptions.forEach((optionElement: HTMLOptionElement): void => {
+        selectedOptions.forEach((optionElement): void => {
           FormEngine.setSelectOptionFromExternalSource(
             fieldName,
             optionElement.value,

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

@@ -65,7 +65,7 @@ export class SelectTree extends Tree
    * Expand all nodes and refresh view
    */
   public expandAll(): void {
-    this.nodes.forEach((node: TreeNodeInterface) => { this.showChildren(node); });
+    this.nodes.forEach((node) => { this.showChildren(node); });
   }
 
   /**
@@ -105,7 +105,7 @@ export class SelectTree extends Tree
     // A plain substring match, no RegExp involved, therefore nothing to escape either
     const foldedSearchTerm = SelectTree.fold(searchTerm ?? '');
 
-    this.nodes.forEach((node: any) => {
+    this.nodes.forEach((node) => {
       // skip the root node in searches
       if (node === firstNode) {
         return;
@@ -190,7 +190,7 @@ export class SelectTree extends Tree
    */
   private prepareLoadedNodes(evt: CustomEvent): void {
     const nodes = evt.detail.nodes as Array<TreeNodeInterface>;
-    evt.detail.nodes = nodes.map((node: TreeNodeInterface) => {
+    evt.detail.nodes = nodes.map((node) => {
       if (node.selectable === false) {
         this.settings.unselectableElements.push(node.identifier);
       }

package/backend/form-engine/element/slug-element.ts

@@ -88,7 +88,7 @@ class SlugElement {
   }
 
   private registerEvents(): void {
-    const fieldsToListenOnList = Object.values(this.getAvailableFieldsForProposalGeneration()).map((field: HTMLElement) => field.dataset.slugSelector);
+    const fieldsToListenOnList = Object.values(this.getAvailableFieldsForProposalGeneration()).map((field) => field.dataset.slugSelector);
     const recreateButton: HTMLButtonElement = this.fullElement.querySelector(Selectors.recreateButton);
 
     // Listen on 'listenerFieldNames' for new pages. This is typically the 'title' field
@@ -158,7 +158,7 @@ class SlugElement {
   private sendSlugProposal(mode: ProposalModes): void {
     const input: Record<string, string> = {};
     if (mode === ProposalModes.AUTO || mode === ProposalModes.RECREATE) {
-      Object.entries(this.getAvailableFieldsForProposalGeneration()).forEach((entry: [fieldName: string, field: HTMLInputElement|HTMLSelectElement]) => {
+      Object.entries(this.getAvailableFieldsForProposalGeneration()).forEach((entry) => {
         input[entry[0]] = entry[1].value;
       });
       if (this.options.includeUidInValues === true) {
@@ -214,18 +214,18 @@ class SlugElement {
    *
    * @return Record<string, string>
    */
-  private getAvailableFieldsForProposalGeneration(): { [key: string]: HTMLElement } {
-    const availableFields: { [key: string]: HTMLElement } = {};
+  private getAvailableFieldsForProposalGeneration(): { [key: string]: HTMLInputElement|HTMLSelectElement } {
+    const availableFields: { [key: string]: HTMLInputElement|HTMLSelectElement } = {};
     for (const [fieldName, selector] of Object.entries(this.fieldsToListenOn)) {
       const selectorCandidates = [
         '[data-formengine-input-name="' + selector + '"]',
         // Also check for fields, which do not point to a hidden input field (e.g. "input type=hidden", readOnly, or select fields)
         '[name="' + selector + '"]'
       ];
-      let field: HTMLElement;
+      let field: HTMLInputElement|HTMLSelectElement;
       let usedSelector = '';
-      selectorCandidates.some((testSelector: string) => {
-        field = document.querySelector(testSelector) as HTMLElement;
+      selectorCandidates.some((testSelector) => {
+        field = document.querySelector<HTMLInputElement|HTMLSelectElement>(testSelector);
         usedSelector = testSelector;
         return field !== null;
       });

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

@@ -44,7 +44,7 @@ export class ResultContainer extends LitElement {
       if (this.results.length === 0) {
         content = html`<div class="alert alert-info">${labels.get('search.no_records_found')}</div>`;
       } else {
-        content = html`${this.results.map((result: ResultItemInterface) => this.renderResultItem(result))}`;
+        content = html`${this.results.map((result) => this.renderResultItem(result))}`;
       }
     }
 

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

@@ -73,7 +73,7 @@ export class TableWizardElement extends LitElement {
     const textarea: HTMLTextAreaElement = document.querySelector(this.selectorData);
     const table: string[][] = [];
 
-    textarea.value.split('\n').forEach((row: string) => {
+    textarea.value.split('\n').forEach((row) => {
       if (row !== '') {
         if(this.enclosure) {
           row = row.replace(new RegExp(this.enclosure, 'g'), '');
@@ -167,7 +167,7 @@ export class TableWizardElement extends LitElement {
 
   private renderTemplate(): TemplateResult {
     this.provideMinimalTable();
-    const colIndexes = Object.keys(this.firstRow).map((item: string) => parseInt(item, 10));
+    const colIndexes = Object.keys(this.firstRow).map((item) => parseInt(item, 10));
     const lastColIndex = colIndexes[colIndexes.length - 1];
     const lastRowIndex = this.table.length - 1;
 
@@ -176,7 +176,7 @@ export class TableWizardElement extends LitElement {
         <table class="table table-center">
           <thead>
             <th>${this.renderTypeButton()}</th>
-            ${colIndexes.map((colIndex: number) => html`
+            ${colIndexes.map((colIndex) => html`
             <th>${this.renderColButtons(colIndex, lastColIndex)}</th>
             `)}
           </thead>
@@ -184,7 +184,7 @@ export class TableWizardElement extends LitElement {
             ${this.table.map((row: string[], rowIndex: number) => html`
             <tr>
               <td>${this.renderRowButtons(rowIndex, lastRowIndex)}</td>
-              ${row.map((value: string, colIndex: number) => html`
+              ${row.map((value, colIndex) => html`
               <td>${this.renderDataElement(value, rowIndex, colIndex)}</td>
               `)}
             </tr>

package/backend/form-engine/inline-relation/ajax-dispatcher.ts

@@ -57,9 +57,9 @@ export class AjaxDispatcher {
     throw 'Undefined endpoint for route "' + routeName + '"';
   }
 
-  public send(request: AjaxRequest, params: Array<string>): Promise<AjaxDispatcherResponse> {
-    const sentRequest = request.post(this.createRequestBody(params)).then(async (response: AjaxResponse): Promise<AjaxDispatcherResponse> => {
-      return this.processResponse(await response.resolve());
+  public send<T extends AjaxDispatcherResponse = AjaxDispatcherResponse>(request: AjaxRequest, params: Array<string>): Promise<T> {
+    const sentRequest = request.post(this.createRequestBody(params)).then(async (response: AjaxResponse): Promise<T> => {
+      return this.processResponse(await response.resolve()) as T;
     });
     sentRequest.catch((reason: Error): void => {
       if (reason instanceof DOMException && reason.name === 'AbortError') {

package/backend/form-engine-validation.ts

@@ -65,7 +65,7 @@ export default class FormEngineValidation {
    */
   public static initialize(formEngine: typeof FormEngine): void {
     formEngineInstance = formEngine;
-    formEngineInstance.formElement.querySelectorAll('.' + FormEngineValidation.errorClass).forEach((e: HTMLElement) => e.classList.remove(FormEngineValidation.errorClass));
+    formEngineInstance.formElement.querySelectorAll<HTMLElement>('.' + FormEngineValidation.errorClass).forEach((e) => e.classList.remove(FormEngineValidation.errorClass));
 
     // Initialize input fields
     FormEngineValidation.initializeInputFields();
@@ -91,7 +91,7 @@ export default class FormEngineValidation {
    * Initialize all input fields
    */
   public static initializeInputFields(): void {
-    formEngineInstance.formElement.querySelectorAll(FormEngineValidation.inputSelector).forEach((visibleField: FormEngineFieldElement): void => {
+    formEngineInstance.formElement.querySelectorAll<FormEngineFieldElement>(FormEngineValidation.inputSelector).forEach((visibleField): void => {
       // ignore fields which already have been initialized
       if ('formengineInputInitialized' in visibleField.dataset) {
         return;
@@ -500,7 +500,7 @@ export default class FormEngineValidation {
    */
   public static validate(section?: Element): void {
     if (typeof section === 'undefined' || section instanceof Document) {
-      formEngineInstance.formElement.querySelectorAll(FormEngineValidation.markerSelector + ', [role="tablist"] > .nav-item').forEach((tabMenuItem: HTMLElement): void => {
+      formEngineInstance.formElement.querySelectorAll<HTMLElement>(FormEngineValidation.markerSelector + ', [role="tablist"] > .nav-item').forEach((tabMenuItem): void => {
         tabMenuItem.classList.remove(FormEngineValidation.validationErrorClass);
       });
     }
@@ -568,8 +568,8 @@ export default class FormEngineValidation {
    * Find tab by field and mark it as has-validation-error
    */
   public static markParentTab(element: FormEngineFieldElement, isValid: boolean): void {
-    const panes = DomHelper.parents(element, '.tab-pane');
-    panes.forEach((pane: HTMLElement): void => {
+    const panes = DomHelper.parents<HTMLElement>(element, '.tab-pane');
+    panes.forEach((pane): void => {
       if (isValid) {
         // If incoming element is valid, check for errors in the same sheet
         isValid = pane.querySelector('.has-error') === null;
@@ -631,3 +631,9 @@ export default class FormEngineValidation {
     });
   }
 }
+
+declare global {
+  interface HTMLElementEventMap {
+    't3-formengine-postfieldvalidation': CustomEvent<PostValidationEvent>;
+  }
+}

package/backend/form-engine.ts

@@ -65,7 +65,7 @@ const enum FormAction {
   saveAndAddRecord = '_savedokaddrecord',
 }
 
-type OnChangeFieldHandlerCallback = (data: object, e: Event) => void;
+type OnChangeFieldHandlerCallback = (data: never, e: Event) => void;
 type PreviewActionCallback = (targetName: string, previewUrl: string, $actionElement: JQuery, modal: ModalElement) => void;
 type NewActionCallback = (targetName: string, $actionElement: JQuery) => void;
 type DuplicateActionCallback = (targetName: string, $actionElement: JQuery) => void;
@@ -236,7 +236,7 @@ export default (function() {
     return Modal.advanced({
       type: Modal.types.iframe,
       content: FormEngine.browserUrl + '&' + (new URLSearchParams(queryParams)).toString(),
-      size: Modal.sizes.large
+      size: Modal.sizes.full
     });
   };
 
@@ -318,7 +318,7 @@ export default (function() {
         }
 
         if (reenableOptions && typeof optionEl !== 'undefined') {
-          optionEl.closest('select').querySelectorAll('[disabled]').forEach(function (disabledOption: HTMLOptionElement) {
+          optionEl.closest('select').querySelectorAll<HTMLOptionElement>('[disabled]').forEach(function (disabledOption) {
             disabledOption.classList.remove('hidden');
             disabledOption.disabled = false;
             FormEngine.enableOptGroup(disabledOption);
@@ -394,7 +394,7 @@ export default (function() {
    * @param {HTMLElement} originalFieldEl the hidden form field
    */
   FormEngine.updateHiddenFieldValueFromSelect = function(selectFieldEl: HTMLSelectElement, originalFieldEl: HTMLSelectElement): void {
-    const selectedValues: string[] = Array.from(selectFieldEl.options).map((el: HTMLOptionElement) => el.value);
+    const selectedValues: string[] = Array.from(selectFieldEl.options).map((el) => el.value);
 
     // make a comma separated list, if it is a multi-select
     // set the values to the final hidden field
@@ -672,8 +672,8 @@ export default (function() {
       }
     };
 
-    const minlengthElements = document.querySelectorAll('[minlength]:not([data-input-type="datetimepicker"]):not(.t3js-charcounter-min-initialized)');
-    minlengthElements.forEach((field: HTMLInputElement|HTMLTextAreaElement) => {
+    const minlengthElements = document.querySelectorAll<HTMLInputElement|HTMLTextAreaElement>('[minlength]:not([data-input-type="datetimepicker"]):not(.t3js-charcounter-min-initialized)');
+    minlengthElements.forEach((field) => {
       field.addEventListener('focus', (event) => {
         const minCharacterCountLeft = FormEngine.getMinCharacterLeftCount(field);
         if (minCharacterCountLeft > 0) {
@@ -720,7 +720,7 @@ export default (function() {
    * Initialize input / text field "null" checkbox CSS overlay if no placeholder is set.
    */
   FormEngine.initializeNullNoPlaceholderCheckboxes = function(): void {
-    document.querySelectorAll('.t3-form-field-eval-null-checkbox').forEach((el: HTMLElement) => {
+    document.querySelectorAll<HTMLElement>('.t3-form-field-eval-null-checkbox').forEach((el) => {
       // Add disabled class to "t3js-formengine-field-item" if the null checkbox is NOT set,
       // This activates a CSS overlay "disabling" the input field and everything around.
       const checkbox = el.querySelector('input[type="checkbox"]') as HTMLInputElement;
@@ -735,7 +735,7 @@ export default (function() {
    * Initialize input / text field "null" checkbox placeholder / real field if placeholder is set.
    */
   FormEngine.initializeNullWithPlaceholderCheckboxes = function(): void {
-    document.querySelectorAll('.t3js-form-field-eval-null-placeholder-checkbox').forEach((el: HTMLElement) => {
+    document.querySelectorAll<HTMLElement>('.t3js-form-field-eval-null-placeholder-checkbox').forEach((el) => {
       FormEngine.toggleCheckboxField(el.querySelector('input[type="checkbox"]'), false);
     });
   };
@@ -787,7 +787,7 @@ export default (function() {
    * Disable the input field on load if localization state selector is set to "parent" or "source"
    */
   FormEngine.initializeLocalizationStateSelector = function(): void {
-    document.querySelectorAll('.t3js-l10n-state-container').forEach((el: HTMLElement) => {
+    document.querySelectorAll<HTMLElement>('.t3js-l10n-state-container').forEach((el) => {
       const input = el.closest('.t3js-formengine-field-item')?.querySelector('[data-formengine-input-name]') as HTMLInputElement|null;
       if (input === undefined || input === null) {
         return;
@@ -1011,7 +1011,7 @@ export default (function() {
     items.forEach((item) => {
       const handler = onFieldChangeHandlers.get(item.name);
       if (handler instanceof Function) {
-        handler.call(null, item.data || null, evt);
+        handler.call(null, (item.data || null) as never, evt);
       }
     });
   };
@@ -1160,7 +1160,7 @@ export default (function() {
       }
     }
     const contentElement = document.createElement('p');
-    contentStrings.forEach((item: string, i: number): void => {
+    contentStrings.forEach((item, i): void => {
       contentElement.append(item);
       if (i !== contentStrings.length - 1) {
         contentElement.append(document.createElement('br'));

package/backend/global-event-handler.ts

@@ -228,7 +228,7 @@ class GlobalEventHandler {
   private assignHTMLFormChildElementValue(element: HTMLElement, value: string): void {
     const type: string = element.getAttribute('type');
     if (element instanceof HTMLSelectElement) {
-      Array.from(element.options).some((option: HTMLOptionElement, index: number) => {
+      Array.from(element.options).some((option, index) => {
         if (option.value === value) {
           element.selectedIndex = index;
           return true;

package/backend/hotkeys/hotkey-struct.ts

@@ -34,7 +34,7 @@ export class HotkeyStruct {
   }
 
   public static fromHotkey(hotkey: string[]): HotkeyStruct {
-    const nonModifierCodes = hotkey.filter((hotkeyPart: string) => !Object.values<string>(ModifierKeys).includes(hotkeyPart));
+    const nonModifierCodes = hotkey.filter((hotkeyPart) => !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.');
     }

package/backend/hotkeys.ts

@@ -60,12 +60,12 @@ class Hotkeys {
   }
 
   public register(hotkey: Hotkey, handler: (e: KeyboardEvent) => void, options: Partial<Options> = {}): void {
-    if (hotkey.filter((hotkeyPart: string) => !Object.values<string>(ModifierKeys).includes(hotkeyPart)).length === 0) {
+    if (hotkey.filter((hotkeyPart) => !Object.values<string>(ModifierKeys).includes(hotkeyPart)).length === 0) {
       throw new Error('Attempted to register hotkey "' + hotkey.join('+') + '" without a non-modifier key.');
     }
 
     // Normalize trigger
-    hotkey = hotkey.map((h: string) => h.toLowerCase());
+    hotkey = hotkey.map((h) => h.toLowerCase());
 
     const mergedConfiguration: Options = { ...this.defaultOptions, ...options };
     if (!this.scopedHotkeyMap.has(mergedConfiguration.scope)) {
@@ -161,7 +161,7 @@ class Hotkeys {
     }
 
     // The standard requires to have modifier keys to be at first
-    parts.sort((a: string, b: string): number => {
+    parts.sort((a, b): number => {
       const aIsModifierKey = Object.values<string>(ModifierKeys).includes(a);
       const bIsModifierKey = Object.values<string>(ModifierKeys).includes(b);