typo3-typescript-sources 14.0.0 → 14.1.1

package/.last-synced-tag

@@ -1 +1 @@
-v14.0.0
+v14.1.1

package/README-TYPO3.md

@@ -1,7 +1,7 @@
 # TYPO3 CMS
 
 TYPO3 is an open source PHP based web content management system released
-under the GNU GPL. TYPO3 is copyright © 1999-2025 by Kasper Skårhøj.
+under the GNU GPL. TYPO3 is copyright © 1999-2026 by Kasper Skårhøj.
 
 This document provides a basic introduction to TYPO3.
 

package/README.md

@@ -16,7 +16,7 @@ npm install typo3-typescript-sources
 
 - **Original Repository:** [TYPO3/typo3](https://github.com/TYPO3/typo3)
 - **Source Path:** `Build/Sources/TypeScript/`
-- **Current TYPO3 Version:** `v14.0.0`
+- **Current TYPO3 Version:** `v14.1.1`
 
 ## 🌿 Branches
 

package/backend/clear-cache.ts

@@ -42,7 +42,7 @@ class ClearCache {
    * @return Promise<AjaxResponse>
    */
   private static sendClearCacheRequest(pageId: number): Promise<AjaxResponse> {
-    const request = new AjaxRequest(TYPO3.settings.ajaxUrls.web_list_clearpagecache).withQueryArguments({ id: pageId }).get({ cache: 'no-cache' });
+    const request = new AjaxRequest(TYPO3.settings.ajaxUrls.records_clearpagecache).withQueryArguments({ id: pageId }).get({ cache: 'no-cache' });
     request.then(async (response: AjaxResponse): Promise<void> => {
       const data = await response.resolve();
       if (data.success === true) {

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

@@ -929,7 +929,7 @@ export class TypoScriptStreamParserFactory {
         'web_func': B,
         'web_info': B,
         'web_layout': B,
-        'web_list': B,
+        'records': B,
         'web_ts': kw('web_ts'),
         'where': kw('where'),
         'width': kw('width'),

package/backend/context-menu-actions.ts

@@ -117,7 +117,7 @@ class ContextMenuActions {
 
   public static openListModule(table: string, uid: number, dataset: DOMStringMap): void {
     const pageId = table === 'pages' ? uid : dataset.pageUid;
-    ModuleMenu.App.showModule('web_list', 'id=' + pageId);
+    ModuleMenu.App.showModule('records', 'id=' + pageId);
   }
 
   public static pagesSort(table: string, uid: number, dataset: DOMStringMap): void {
@@ -127,6 +127,20 @@ class ContextMenuActions {
     }
   }
 
+  public static openSiteSettings(table: string, uid: number, dataset: DOMStringMap): void {
+    const siteSettingsUrl = dataset.siteSettingsUrl;
+    if (siteSettingsUrl) {
+      Viewport.ContentContainer.setUrl(siteSettingsUrl + '&returnUrl=' + ContextMenuActions.getReturnUrl());
+    }
+  }
+
+  public static openSiteConfiguration(table: string, uid: number, dataset: DOMStringMap): void {
+    const siteConfigurationUrl = dataset.siteConfigurationUrl;
+    if (siteConfigurationUrl) {
+      Viewport.ContentContainer.setUrl(siteConfigurationUrl + '&returnUrl=' + ContextMenuActions.getReturnUrl());
+    }
+  }
+
   public static pagesNewMultiple(table: string, uid: number, dataset: DOMStringMap): void {
     const pagesSortUrl = dataset.pagesNewMultipleUrl;
     if (pagesSortUrl) {
@@ -240,7 +254,7 @@ class ContextMenuActions {
    * Clear cache for given page uid
    */
   public static clearCache(table: string, uid: number): void {
-    (new AjaxRequest(TYPO3.settings.ajaxUrls.web_list_clearpagecache)).withQueryArguments({ id: uid }).get({ cache: 'no-cache' }).then(
+    (new AjaxRequest(TYPO3.settings.ajaxUrls.records_clearpagecache)).withQueryArguments({ id: uid }).get({ cache: 'no-cache' }).then(
       async (response: AjaxResponse): Promise<void> => {
         const data = await response.resolve();
         if (data.success === true) {

package/backend/date-time-picker.ts

@@ -12,6 +12,7 @@
  */
 
 import flatpickr from 'flatpickr';
+import Persistent from '@typo3/backend/storage/persistent';
 import ShortcutButtonsPlugin from 'shortcut-buttons-flatpickr';
 import { DateTime } from 'luxon';
 import ThrottleEvent from '@typo3/core/event/throttle-event';
@@ -63,6 +64,20 @@ class DateTimePicker {
     const scrollEvent = this.getScrollEvent();
     const options = this.getDateOptions(inputElement);
     options.locale = locale;
+
+    // Custom "first day of week" user preference
+    const dow = Persistent.get('dateTimeFirstDayOfWeek');
+
+    if (dow !== '') {
+      // stored number is 1-index based, convert to 0-index.
+      const dowNumber = parseInt(dow, 10) - 1;
+
+      // two entries need to be adjusted here for proper utilization
+      // in non-english localisations.
+      flatpickr.l10ns[locale].firstDayOfWeek = dowNumber;
+      flatpickr.l10ns.default.firstDayOfWeek = dowNumber;
+    }
+
     options.onOpen = [
       (): void => {
         scrollEvent.bindTo(document.querySelector('.t3js-module-body'));
@@ -251,6 +266,11 @@ class DateTimePicker {
         options.enableTime = true;
         options.noCalendar = true;
         break;
+      case 'datetimesec':
+        options.altFormat = format[0] + ' HH:mm:ss';
+        options.enableSeconds = true;
+        options.enableTime = true;
+        break;
       case 'year':
         options.altFormat = 'yyyy';
         break;

package/backend/drag-uploader.ts

@@ -16,7 +16,6 @@ import { DateTime } from 'luxon';
 import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
 import { SeverityEnum } from './enum/severity';
 import { MessageUtility } from './utility/message-utility';
-import NProgress from 'nprogress';
 import AjaxRequest from '@typo3/core/ajax/ajax-request';
 import { default as Modal, type ModalElement, Sizes as ModalSizes } from './modal';
 import Notification from './notification';
@@ -97,6 +96,7 @@ export default class DragUploader {
   private askForOverride: Array<FileConflict> = [];
 
   private percentagePerFile: number = 1;
+  private overallProgressBar: ProgressBarElement | null = null;
 
   private readonly body: HTMLElement;
   private readonly element: HTMLElement;
@@ -364,7 +364,9 @@ export default class DragUploader {
       this.fileList.closest('.filelist-main')?.querySelector('.t3-filelist-info-container')?.setAttribute('hidden', 'hidden');
     }
 
-    NProgress.start();
+    this.overallProgressBar = document.createElement('typo3-backend-progress-bar');
+    document.body.appendChild(this.overallProgressBar);
+    this.overallProgressBar.start();
     this.percentagePerFile = 1 / files.length;
 
     // Check for each file if is already exist before adding it to the queue
@@ -382,7 +384,9 @@ export default class DragUploader {
             uploaded: file,
             action: this.irreObjectUid ? Action.USE_EXISTING : this.defaultAction,
           });
-          NProgress.inc(this.percentagePerFile);
+          if (this.overallProgressBar) {
+            this.overallProgressBar.inc(this.percentagePerFile);
+          }
         } else {
           new FileQueueItem(this, file, Action.SKIP, this.fileList.dataset.mode === Mode.BROWSE ? Mode.BROWSE : Mode.MANAGE);
         }
@@ -392,7 +396,9 @@ export default class DragUploader {
 
     Promise.all(ajaxCalls).then((): void => {
       this.drawOverrideModal();
-      NProgress.done();
+      if (this.overallProgressBar) {
+        this.overallProgressBar.done();
+      }
     });
 
     this.fileInput.value = '';

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

@@ -11,7 +11,7 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-import { css, html, LitElement, nothing, type TemplateResult } from 'lit';
+import { css, html, LitElement, nothing, type PropertyValues, type TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators';
 import { classMap } from 'lit/directives/class-map';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -23,6 +23,7 @@ import { SeverityEnum } from '@typo3/backend/enum/severity';
  * @internal
  *
  * @example
+ * Instance usage:
  * <typo3-backend-progress-bar></typo3-backend-progress-bar>
  * + `value` can be any positive number value between and 0 and `max` or `undefined`. The latter will render an indeterminate state.
  * + `max` represents the upper value range
@@ -42,6 +43,15 @@ export class ProgressBarElement extends LitElement {
       }
     }
 
+    @keyframes fade-out {
+      from {
+        opacity: 1;
+      }
+      to {
+        opacity: 0;
+      }
+    }
+
     :host {
       --progress-bar-height: 4px;
       --progress-bar-color-primary: var(--typo3-state-primary-border-color);
@@ -57,6 +67,14 @@ export class ProgressBarElement extends LitElement {
       border-radius: var(--progress-border-radius);
     }
 
+    :host([hidden]) {
+      display: none;
+    }
+
+    :host([is-hiding]) {
+      animation: fade-out 0.3s ease-out forwards;
+    }
+
     .progress {
       position: relative;
       overflow: hidden;
@@ -126,6 +144,99 @@ export class ProgressBarElement extends LitElement {
   @property({ type: Number, reflect: true }) max: number = 100;
   @property({ type: Number, reflect: true }) severity: SeverityEnum|undefined = undefined;
   @property({ type: String, reflect: true }) label: string|undefined;
+  @property({ type: Boolean, reflect: true, attribute: 'hidden' }) isHidden: boolean = false;
+  @property({ type: Boolean, state: true }) isHiding: boolean = false;
+
+  /**
+   * Used to cancel pending done/hide operations when the progress bar is reused.
+   * This prevents race conditions where a previous done() call could remove the
+   * element while a new start() has already begun.
+   */
+  private abortController: AbortController = new AbortController();
+
+  /**
+   * Start the progress bar. Sets value to 0 by default or undefined for indeterminate mode.
+   *
+   * @param indeterminate If true, shows indeterminate loading animation
+   */
+  public start(indeterminate: boolean = false): void {
+    // Cancel any pending done/hide operations
+    this.abortController.abort();
+    this.abortController = new AbortController();
+
+    this.isHiding = false;
+    this.isHidden = false;
+    this.value = indeterminate ? undefined : 0;
+  }
+
+  /**
+   * Increment the progress bar by a specific amount (or auto-increment if no amount given).
+   *
+   * @param amount The amount to increment (default: 5)
+   */
+  public inc(amount: number = 5): void {
+    let currentValue = this.value ?? 0;
+    currentValue = this.clamp(currentValue + amount, 0, this.max);
+    this.value = currentValue >= this.max ? this.max : currentValue;
+  }
+
+  /**
+   * Complete the progress bar and automatically hide it after the bar animation completes.
+   */
+  public async done(): Promise<void> {
+    // Capture signal at start to detect if start() was called during async operations
+    const signal = this.abortController.signal;
+
+    const currentValue = this.value ?? 0;
+    if (currentValue >= this.max) {
+      this.hide();
+      return;
+    }
+
+    if (isNaN(this.value)) {
+      this.value = 0;
+    }
+
+    await this.updateComplete;
+    if (signal.aborted) {
+      return;
+    }
+
+    await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+    if (signal.aborted) {
+      return;
+    }
+
+    this.value = this.max;
+    await this.updateComplete;
+    if (signal.aborted) {
+      return;
+    }
+
+    const bar = this.shadowRoot.querySelector('.bar');
+    bar.addEventListener('transitionend', () => {
+      this.hide();
+    }, { once: true, signal });
+  }
+
+  /**
+   * Hide the progress bar with fade-out animation and remove from DOM.
+   */
+  public hide(): void {
+    this.isHiding = true;
+    this.addEventListener('animationend', () => {
+      this.remove();
+    }, { once: true, signal: this.abortController.signal });
+  }
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    this.updateHostClass();
+  }
+
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
+  }
 
   protected override render(): TemplateResult {
     const labelIdentifier = 'progress-label-' + (Math.random() + 1).toString(36).substring(2);
@@ -160,6 +271,21 @@ export class ProgressBarElement extends LitElement {
     `;
   }
 
+  protected override updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+    if (changedProperties.has('isHiding')) {
+      this.updateHostClass();
+    }
+  }
+
+  private updateHostClass(): void {
+    if (this.isHiding) {
+      this.setAttribute('is-hiding', '');
+    } else {
+      this.removeAttribute('is-hiding');
+    }
+  }
+
   private clamp(value: number, min: number, max: number): number {
     return Math.min(max, Math.max(min, value));
   }

package/backend/element/qrcode-element.ts

@@ -92,7 +92,7 @@ export class QrCodeElement extends LitElement {
             </select>
           </div>
           <div class="form-group">
-            <button type="submit" class="btn btn-default">${downloadLabel}</button>
+            <button type="submit" class="btn btn-primary">${downloadLabel}</button>
           </div>
         </div>
       </form>`;

package/backend/element/sidebar-toggle-element.ts

@@ -0,0 +1,110 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import { html, css, type TemplateResult } from 'lit';
+import { customElement, property, state } from 'lit/decorators';
+import { PseudoButtonLitElement } from './pseudo-button';
+import { ScaffoldState, ScaffoldSidebarToggleEvent } from '../viewport/scaffold-state';
+import '@typo3/backend/element/icon-element';
+
+/**
+ * Module: @typo3/backend/element/sidebar-toggle-element
+ *
+ * Sidebar toggle button that displays different icons and labels based on sidebar state.
+ *
+ * @example
+ * <typo3-backend-sidebar-toggle
+ *   label-collapse="Collapse sidebar"
+ *   label-expand="Expand sidebar"
+ * ></typo3-backend-sidebar-toggle>
+ */
+@customElement('typo3-backend-sidebar-toggle')
+export class SidebarToggleElement extends PseudoButtonLitElement {
+  static override styles = [
+    ...PseudoButtonLitElement.styles,
+    css`
+      :host {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        user-select: none;
+      }
+      :host([disabled]) {
+        pointer-events: none;
+        opacity: 0.5;
+        cursor: default;
+      }
+    `
+  ];
+
+  @property({ type: String, attribute: 'label-collapse' }) labelCollapse: string = 'Collapse sidebar';
+  @property({ type: String, attribute: 'label-expand' }) labelExpand: string = 'Expand sidebar';
+  @property({ type: Boolean, reflect: true }) disabled: boolean = false;
+
+  @state() private expanded: boolean = false;
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    this.expanded = ScaffoldState.isLargeScreen() ? ScaffoldState.isSidebarExpanded() : ScaffoldState.isSidebarVisible();
+    this.updateLabels();
+    document.addEventListener(ScaffoldSidebarToggleEvent.eventName, this.handleSidebarToggle as EventListener);
+  }
+
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    document.removeEventListener(ScaffoldSidebarToggleEvent.eventName, this.handleSidebarToggle as EventListener);
+  }
+
+  protected override updated(): void {
+    this.updateLabels();
+    this.updateDisabledState();
+  }
+
+  protected override render(): TemplateResult {
+    const iconIdentifier = this.expanded ? 'actions-menu-sidebar-collapsed' : 'actions-menu-sidebar-expanded';
+    const overlay = this.disabled ? 'overlay-readonly' : null;
+    return html`<typo3-backend-icon identifier="${iconIdentifier}" size="small" overlay="${overlay}"></typo3-backend-icon>`;
+  }
+
+  protected override buttonActivated(): void {
+    if (!this.disabled) {
+      ScaffoldState.toggleSidebar();
+    }
+  }
+
+  private readonly handleSidebarToggle = (event: ScaffoldSidebarToggleEvent): void => {
+    this.expanded = event.detail.expanded;
+  };
+
+  private updateLabels(): void {
+    const label = this.expanded ? this.labelCollapse : this.labelExpand;
+    this.title = label;
+    this.setAttribute('aria-label', label);
+  }
+
+  private updateDisabledState(): void {
+    if (this.disabled) {
+      this.setAttribute('aria-disabled', 'true');
+      this.tabIndex = -1;
+    } else {
+      this.removeAttribute('aria-disabled');
+      this.tabIndex = 0;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-sidebar-toggle': SidebarToggleElement;
+  }
+}

package/backend/enum/viewport/scaffold-identifier.ts

@@ -11,14 +11,34 @@
  * The TYPO3 project - inspiring people to share!
  */
 
+import { ContentNavigationSlotEnum, type ContentNavigation } from '@typo3/backend/viewport/content-navigation';
+
 export enum ScaffoldIdentifierEnum {
   scaffold = '.t3js-scaffold',
   header = '.t3js-scaffold-header',
-  moduleMenu = '.t3js-scaffold-modulemenu',
+  sidebar = '.t3js-scaffold-sidebar',
   content = '.t3js-scaffold-content',
-  contentModule = '.t3js-scaffold-content-module',
   contentModuleRouter = 'typo3-backend-module-router',
   contentModuleIframe = '.t3js-scaffold-content-module-iframe',
-  contentNavigation = '.t3js-scaffold-content-navigation',
-  contentNavigationDataComponent = '.t3js-scaffold-content-navigation [data-component]',
+}
+
+/**
+ * Helper to get scaffold content area elements scoped to the backend content navigation
+ */
+export class ScaffoldContentArea {
+  public static readonly selector = 'typo3-backend-content-navigation[identifier="backend"]';
+
+  public static getContentNavigation(): ContentNavigation | null {
+    return document.querySelector(this.selector) as ContentNavigation | null;
+  }
+
+  public static getNavigationContainer(): HTMLElement | null {
+    const container = this.getContentNavigation();
+    return container?.querySelector(`[slot="${ContentNavigationSlotEnum.navigation}"]`) ?? null;
+  }
+
+  public static getContentContainer(): HTMLElement | null {
+    const container = this.getContentNavigation();
+    return container?.querySelector(`[slot="${ContentNavigationSlotEnum.content}"]`) ?? null;
+  }
 }

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

@@ -13,7 +13,7 @@
 
 import { MessageUtility } from '../../utility/message-utility';
 import { AjaxDispatcher } from './../inline-relation/ajax-dispatcher';
-import NProgress from 'nprogress';
+import { ProgressBarElement } from '@typo3/backend/element/progress-bar-element';
 import Sortable from 'sortablejs';
 import FormEngine from '@typo3/backend/form-engine';
 import FormEngineValidation from '@typo3/backend/form-engine-validation';
@@ -59,7 +59,7 @@ interface RequestQueue {
 }
 
 interface ProgressQueue {
-  [key: string]: any;
+  [key: string]: ProgressBarElement;
 }
 
 interface Appearance {
@@ -369,7 +369,7 @@ class FilesControlContainer extends HTMLElement {
     const isLoaded = recordFieldsContainer !== null && !recordContainer.classList.contains(States.notLoaded);
 
     if (!isLoaded) {
-      const progress = this.getProgress(objectId, recordContainer.dataset.objectIdHash);
+      const progress = this.getProgress(objectId);
 
       if (!isLoading) {
         const ajaxRequest = this.ajaxDispatcher.newRequest(this.ajaxDispatcher.getEndpoint('file_reference_details'));
@@ -582,15 +582,15 @@ class FilesControlContainer extends HTMLElement {
     });
   }
 
-  private getProgress(objectId: string, objectIdHash: string): any {
-    const headerIdentifier = '#' + objectIdHash + '_header';
-    let progress: any;
+  private getProgress(objectId: string): ProgressBarElement {
+    let progress: ProgressBarElement;
 
     if (typeof this.progressQueue[objectId] !== 'undefined') {
       progress = this.progressQueue[objectId];
     } else {
-      progress = NProgress;
-      progress.configure({ parent: headerIdentifier, showSpinner: false });
+      progress = document.createElement('typo3-backend-progress-bar');
+      const panel = document.querySelector<HTMLElement>(selector`[data-object-id="${objectId}"]`);
+      panel.insertBefore(progress, panel.firstChild);
       this.progressQueue[objectId] = progress;
     }
 

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

@@ -14,7 +14,7 @@
 import { MessageUtility } from '../../utility/message-utility';
 import { AjaxDispatcher } from './../inline-relation/ajax-dispatcher';
 import DocumentService from '@typo3/core/document-service';
-import NProgress from 'nprogress';
+import { ProgressBarElement } from '@typo3/backend/element/progress-bar-element';
 import Sortable from 'sortablejs';
 import FormEngine from '@typo3/backend/form-engine';
 import FormEngineValidation from '@typo3/backend/form-engine-validation';
@@ -64,7 +64,7 @@ interface RequestQueue {
 }
 
 interface ProgressQueue {
-  [key: string]: any;
+  [key: string]: ProgressBarElement;
 }
 
 interface Appearance {
@@ -562,7 +562,7 @@ class InlineControlContainer {
     const isLoaded = recordFieldsContainer !== null && !recordContainer.classList.contains(States.notLoaded);
 
     if (!isLoaded) {
-      const progress = this.getProgress(objectId, recordContainer.dataset.objectIdHash);
+      const progress = this.getProgress(objectId);
 
       if (!isLoading) {
         const ajaxRequest = this.ajaxDispatcher.newRequest(this.ajaxDispatcher.getEndpoint('record_inline_details'));
@@ -804,19 +804,15 @@ class InlineControlContainer {
     });
   }
 
-  /**
-   * @param {string} objectId
-   * @param {string} objectIdHash
-   */
-  private getProgress(objectId: string, objectIdHash: string): any {
-    const headerIdentifier = '#' + objectIdHash + '_header';
-    let progress: any;
+  private getProgress(objectId: string): ProgressBarElement {
+    let progress: ProgressBarElement;
 
     if (typeof this.progressQueue[objectId] !== 'undefined') {
       progress = this.progressQueue[objectId];
     } else {
-      progress = NProgress;
-      progress.configure({ parent: headerIdentifier, showSpinner: false });
+      progress = document.createElement('typo3-backend-progress-bar');
+      const panel = InlineControlContainer.getInlineRecordContainer(objectId);
+      panel.insertBefore(progress, panel.firstChild);
       this.progressQueue[objectId] = progress;
     }
 

package/backend/form-engine/container/site-language-container.ts

@@ -13,7 +13,7 @@
 
 import { MessageUtility } from '../../utility/message-utility';
 import { AjaxDispatcher } from './../inline-relation/ajax-dispatcher';
-import NProgress from 'nprogress';
+import { ProgressBarElement } from '@typo3/backend/element/progress-bar-element';
 import FormEngine from '@typo3/backend/form-engine';
 import FormEngineValidation from '@typo3/backend/form-engine-validation';
 import { default as Modal, type ModalElement } from '@typo3/backend/modal';
@@ -51,7 +51,7 @@ interface RequestQueue {
 }
 
 interface ProgressQueue {
-  [key: string]: any;
+  [key: string]: ProgressBarElement;
 }
 
 interface UniqueDefinition {
@@ -345,7 +345,7 @@ class SiteLanguageContainer extends HTMLElement {
     const isLoaded = recordFieldsContainer !== null && !recordContainer.classList.contains(States.notLoaded);
 
     if (!isLoaded) {
-      const progress = this.getProgress(objectId, recordContainer.dataset.objectIdHash);
+      const progress = this.getProgress(objectId);
 
       if (!isLoading) {
         const ajaxRequest = this.ajaxDispatcher.newRequest(this.ajaxDispatcher.getEndpoint('site_configuration_inline_details'));
@@ -460,15 +460,15 @@ class SiteLanguageContainer extends HTMLElement {
     recordContainer.classList.add('form-irre-object--deleted');
   }
 
-  private getProgress(objectId: string, objectIdHash: string): any {
-    const headerIdentifier = '#' + objectIdHash + '_header';
-    let progress: any;
+  private getProgress(objectId: string): ProgressBarElement {
+    let progress: ProgressBarElement;
 
     if (typeof this.progressQueue[objectId] !== 'undefined') {
       progress = this.progressQueue[objectId];
     } else {
-      progress = NProgress;
-      progress.configure({ parent: headerIdentifier, showSpinner: false });
+      progress = document.createElement('typo3-backend-progress-bar');
+      const panel = SiteLanguageContainer.getInlineRecordContainer(objectId);
+      panel.insertBefore(progress, panel.firstChild);
       this.progressQueue[objectId] = progress;
     }
 

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

@@ -51,7 +51,6 @@ class CategoryElement extends HTMLElement {
     }
 
     this.tree = document.createElement('typo3-backend-form-selecttree') as SelectTree;
-    this.tree.classList.add('tree-wrapper');
     this.tree.setup = {
       id: this.treeWrapper.id,
       dataUrl: this.generateDataUrl(),

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

@@ -56,6 +56,10 @@ class SelectBoxFilter {
       this.filter((<HTMLInputElement>e.target).value);
     }).delegateTo(wizardsElement, Selectors.filterTextFieldSelector);
 
+    new RegularEvent('search', (e: Event): void => {
+      this.filter((<HTMLInputElement>e.target).value);
+    }).delegateTo(wizardsElement, Selectors.filterTextFieldSelector);
+
     new RegularEvent('change', (e: Event): void => {
       this.filter((<HTMLInputElement>e.target).value);
     }).delegateTo(wizardsElement, Selectors.filterSelectFieldSelector);