typo3-typescript-sources 13.4.24 → 13.4.26

package/backend/hotkeys.ts

@@ -11,8 +11,10 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-import HotkeyStorage, { type ScopedHotkeyMap, type HotkeyStruct, type Options, type HotkeySetup } from '@typo3/backend/hotkeys/hotkey-storage';
+import HotkeyStorage, { type ScopedHotkeyMap, type Options, type HotkeySetup } from '@typo3/backend/hotkeys/hotkey-storage';
 import RegularEvent from '@typo3/core/event/regular-event';
+import { HotkeyStruct } from '@typo3/backend/hotkeys/hotkey-struct';
+import { HotkeyDispatchedEvent, HotkeyRequestedEvent } from '@typo3/backend/hotkeys/events';
 
 export enum ModifierKeys {
   META = 'meta',
@@ -70,10 +72,9 @@ class Hotkeys {
       this.scopedHotkeyMap.set(mergedConfiguration.scope, new Map());
     }
 
-    let ariaKeyShortcut = this.composeAriaKeyShortcut(hotkey);
     const hotkeyMap = this.scopedHotkeyMap.get(mergedConfiguration.scope);
-    const hotkeyStruct = this.createHotkeyStructFromTrigger(hotkey);
-    const encodedHotkeyStruct = JSON.stringify(hotkeyStruct);
+    const hotkeyStruct = HotkeyStruct.fromHotkey(hotkey);
+    const encodedHotkeyStruct = hotkeyStruct.toString();
 
     if (hotkeyMap.has(encodedHotkeyStruct)) {
       const setup = hotkeyMap.get(encodedHotkeyStruct);
@@ -87,6 +88,7 @@ class Hotkeys {
 
     if (mergedConfiguration.bindElement instanceof Element) {
       const existingAriaAttribute = mergedConfiguration.bindElement.getAttribute('aria-keyshortcuts');
+      let ariaKeyShortcut = this.composeAriaKeyShortcut(hotkey);
       if (existingAriaAttribute !== null && !existingAriaAttribute.includes(ariaKeyShortcut)) {
         // Element already has `aria-keyshortcuts`, append composed shortcut
         ariaKeyShortcut = existingAriaAttribute + ' ' + ariaKeyShortcut;
@@ -97,31 +99,39 @@ class Hotkeys {
 
   private registerEventHandler(): void {
     new RegularEvent('keydown', (e: KeyboardEvent): void => {
-      const hotkeySetup = this.findHotkeySetup(e);
-      if (hotkeySetup === null) {
-        return;
+      const hotkeyStruct = HotkeyStruct.fromEvent(e);
+      if (hotkeyStruct.hasAnyModifier()) {
+        top.document.dispatchEvent(new HotkeyRequestedEvent(e));
       }
+    }).bindTo(document);
 
-      if (e.repeat && !hotkeySetup.options.allowRepeat) {
-        return;
-      }
+    new RegularEvent(HotkeyDispatchedEvent.eventName, (e: HotkeyDispatchedEvent): void => {
+      const { keyboardEvent } = e;
+      const hotkeySetup = this.findHotkeySetup(keyboardEvent);
+      if (hotkeySetup !== null) {
+        e.preventDefault();
 
-      if (!hotkeySetup.options.allowOnEditables) {
-        const target = e.target as HTMLElement;
-        if (target.isContentEditable || (['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName) && !(e.target as HTMLInputElement|HTMLTextAreaElement).readOnly)) {
+        if (keyboardEvent.repeat && !hotkeySetup.options.allowRepeat) {
           return;
         }
-      }
 
-      hotkeySetup.handler(e);
+        if (!hotkeySetup.options.allowOnEditables) {
+          const target = keyboardEvent.target as HTMLElement;
+          if (target.isContentEditable || (['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName) && !(keyboardEvent.target as HTMLInputElement|HTMLTextAreaElement).readOnly)) {
+            return;
+          }
+        }
+
+        hotkeySetup.handler(keyboardEvent);
+      }
     }).bindTo(document);
   }
 
   private findHotkeySetup(e: KeyboardEvent): HotkeySetup|undefined {
     // We always consider the global "all" scope first to avoid overriding global hotkeys
     const scopes: string[] = [...new Set(['all', HotkeyStorage.activeScope])];
-    const hotkeyStruct = this.createHotkeyStructFromEvent(e);
-    const encodedHotkeyStruct = JSON.stringify(hotkeyStruct);
+    const hotkeyStruct = HotkeyStruct.fromEvent(e);
+    const encodedHotkeyStruct = hotkeyStruct.toString();
 
     for (const scope of scopes) {
       const hotkeyMap = this.scopedHotkeyMap.get(scope);
@@ -133,35 +143,6 @@ class Hotkeys {
     return null;
   }
 
-  private createHotkeyStructFromTrigger(hotkey: Hotkey): HotkeyStruct {
-    const nonModifierCodes = hotkey.filter((hotkeyPart: string) => !Object.values<string>(ModifierKeys).includes(hotkeyPart));
-    if (nonModifierCodes.length > 1) {
-      throw new Error('Cannot register hotkey with more than one non-modifier key, "' + nonModifierCodes.join('+') + '" given.');
-    }
-
-    return {
-      modifiers: {
-        meta: hotkey.includes(ModifierKeys.META),
-        ctrl: hotkey.includes(ModifierKeys.CTRL),
-        shift: hotkey.includes(ModifierKeys.SHIFT),
-        alt: hotkey.includes(ModifierKeys.ALT),
-      },
-      key: nonModifierCodes[0].toLowerCase(),
-    };
-  }
-
-  private createHotkeyStructFromEvent(e: KeyboardEvent): HotkeyStruct {
-    return {
-      modifiers: {
-        meta: e.metaKey,
-        ctrl: e.ctrlKey,
-        shift: e.shiftKey,
-        alt: e.altKey,
-      },
-      key: e.key?.toLowerCase(),
-    };
-  }
-
   /**
    * Composes a string for use with `aria-keyshortcuts`
    * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-keyshortcuts

package/backend/image-manipulation.ts

@@ -12,8 +12,8 @@
  */
 
 import { html, type TemplateResult } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html';
-import { styleMap } from 'lit/directives/style-map';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
 import AjaxRequest from '@typo3/core/ajax/ajax-request';
 import RegularEvent from '@typo3/core/event/regular-event';

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

@@ -11,7 +11,7 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-import { customElement } from 'lit/decorators';
+import { customElement } from 'lit/decorators.js';
 import { LitElement } from 'lit';
 
 /**

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

@@ -11,7 +11,7 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
 import { markdown } from '@typo3/core/directive/markdown';
 import '@typo3/backend/element/icon-element';

package/backend/live-search/element/provider/default-result-item.ts

@@ -11,7 +11,7 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
 import '@typo3/backend/element/icon-element';
 import { lll } from '@typo3/core/lit-helper';

package/backend/live-search/element/provider/page-provider-result-item.ts

@@ -11,7 +11,7 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
 import '@typo3/backend/element/icon-element';
 import { lll } from '@typo3/core/lit-helper';

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

@@ -12,7 +12,7 @@
  */
 
 import DocumentService from '@typo3/core/document-service';
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 import { css, html, LitElement, type TemplateResult } from 'lit';
 import { type Action } from './action';
 import type { ResultItemActionInterface, ResultItemInterface } from '../item';

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

@@ -11,8 +11,8 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-import { customElement, property } from 'lit/decorators';
-import { ifDefined } from 'lit/directives/if-defined';
+import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { html, LitElement, type TemplateResult } from 'lit';
 import '@typo3/backend/element/icon-element';
 import type { ResultItemActionInterface, ResultItemInterface } from '../item';

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

@@ -14,8 +14,8 @@
 import '@typo3/backend/element/spinner-element';
 import LiveSearchConfigurator from '@typo3/backend/live-search/live-search-configurator';
 import { css, html, LitElement, type TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators';
-import { until } from 'lit/directives/until';
+import { customElement, property } from 'lit/decorators.js';
+import { until } from 'lit/directives/until.js';
 import '../../provider/default-result-item';
 import { type Item, type ResultItemActionInterface, type ResultItemInterface } from './item';
 import type { InvokeActionEventData, RequestActionsEventData } from '@typo3/backend/live-search/element/result/result-container';

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

@@ -11,7 +11,7 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 import { html, LitElement, type TemplateResult } from 'lit';
 import '@typo3/backend/element/icon-element';
 

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

@@ -13,7 +13,7 @@
 
 import LiveSearchConfigurator from '@typo3/backend/live-search/live-search-configurator';
 import Viewport from '@typo3/backend/viewport';
-import { customElement, property, query } from 'lit/decorators';
+import { customElement, property, query } from 'lit/decorators.js';
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
 import { lll } from '@typo3/core/lit-helper';
 import { type ItemContainer } from './item/item-container';
@@ -35,6 +35,7 @@ export const componentName = 'typo3-backend-live-search-result-container';
 @customElement('typo3-backend-live-search-result-container')
 export class ResultContainer extends LitElement {
   @property({ type: Object }) results: ResultItemInterface[] | null = null;
+  @property({ type: Boolean, attribute: false }) hasErrors: boolean = false;
   @property({ type: Boolean, attribute: false }) loading: boolean = false;
 
   @query('typo3-backend-live-search-result-item-container') itemContainer: ItemContainer;
@@ -64,6 +65,10 @@ export class ResultContainer extends LitElement {
       return html`<div class="d-flex flex-fill align-items-center justify-content-center"><typo3-backend-spinner size="large"></typo3-backend-spinner></div>`;
     }
 
+    if (this.hasErrors) {
+      return html`<div class="alert alert-danger">${lll('liveSearch_hasErrors')}</div>`;
+    }
+
     if (this.results === null) {
       return nothing;
     }

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

@@ -11,7 +11,7 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
 import './item/action/action-container';
 import type { ResultItemInterface } from './item/item';

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

@@ -11,7 +11,7 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
 import '@typo3/backend/element/icon-element';
 import type { SelectPageEventData } from '@typo3/backend/toolbar/live-search';

package/backend/live-search/element/search-option-item.ts

@@ -11,7 +11,7 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 import { html, LitElement, type TemplateResult } from 'lit';
 import BrowserSession from '@typo3/backend/storage/browser-session';
 import type { InvokeOptionEventData } from '@typo3/backend/toolbar/live-search';

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

@@ -1,6 +1,3 @@
-import { BroadcastMessage } from '@typo3/backend/broadcast-message';
-import BroadcastService from '@typo3/backend/broadcast-service';
-import Modal from '../modal';
 import Hotkeys from '@typo3/backend/hotkeys';
 import DocumentService from '@typo3/core/document-service';
 
@@ -8,19 +5,9 @@ class LiveSearchShortcut {
   public constructor() {
     DocumentService.ready().then((): void => {
       Hotkeys.register([Hotkeys.normalizedCtrlModifierKey, 'k'], (e: KeyboardEvent): void => {
-        if (Modal.currentModal) {
-          // A modal window is already active, keep default behavior of browser
-          return;
-        }
-
         e.preventDefault();
 
-        document.dispatchEvent(new CustomEvent('typo3:live-search:trigger-open'));
-        BroadcastService.post(new BroadcastMessage(
-          'live-search',
-          'trigger-open',
-          {}
-        ));
+        top.document.dispatchEvent(new CustomEvent('typo3:live-search:trigger-open'));
       }, { allowOnEditables: true /* @todo: bindElement cannot be used at the moment as the suitable element exists twice! */ });
     });
   }

package/backend/login-refresh.ts

@@ -12,7 +12,7 @@
  */
 
 import { html, LitElement, type TemplateResult } from 'lit';
-import { customElement, state } from 'lit/decorators';
+import { customElement, state } from 'lit/decorators.js';
 import Modal, { type ModalElement, Styles, Sizes } from '@typo3/backend/modal';
 import { SeverityEnum } from './enum/severity';
 import AjaxRequest from '@typo3/core/ajax/ajax-request';

package/backend/modal.ts

@@ -13,11 +13,11 @@
 
 import { Modal as BootstrapModal } from 'bootstrap';
 import { html, nothing, LitElement, type TemplateResult, type PropertyValues } from 'lit';
-import { customElement, property, state } from 'lit/decorators';
-import { unsafeHTML } from 'lit/directives/unsafe-html';
-import { classMap, type ClassInfo } from 'lit/directives/class-map';
-import { styleMap, type StyleInfo } from 'lit/directives/style-map';
-import { ifDefined } from 'lit/directives/if-defined';
+import { customElement, property, state } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { classMap, type ClassInfo } from 'lit/directives/class-map.js';
+import { styleMap, type StyleInfo } from 'lit/directives/style-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { classesArrayToClassInfo } from '@typo3/core/lit-helper';
 import RegularEvent from '@typo3/core/event/regular-event';
 import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
@@ -173,7 +173,7 @@ export class ModalElement extends LitElement {
                       ${this.hideCloseButton ? nothing : html`
                           <button class="t3js-modal-close close" @click=${() => this.bootstrapModal.hide()}>
                               <typo3-backend-icon identifier="actions-close" size="small"></typo3-backend-icon>
-                              <span class="visually-hidden">${TYPO3?.lang?.['button.close'] || 'Close'} ${this.modalTitle}</span>
+                              <span class="visually-hidden">${(TYPO3?.lang?.['button.close'] || 'Close') + ' ' + this.modalTitle}</span>
                           </button>
                       `}
                   </div>

package/backend/module/iframe.ts

@@ -12,7 +12,7 @@
  */
 
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
-import { customElement, property, query } from 'lit/decorators';
+import { customElement, property, query } from 'lit/decorators.js';
 import { lll } from '@typo3/core/lit-helper';
 import type { ModuleState } from '../module';
 

package/backend/module/router.ts

@@ -12,7 +12,7 @@
  */
 
 import { html, css, LitElement, type TemplateResult, type HasChanged } from 'lit';
-import { customElement, property, query } from 'lit/decorators';
+import { customElement, property, query } from 'lit/decorators.js';
 import { ModuleUtility, type ModuleState } from '@typo3/backend/module';
 
 const IFRAME_COMPONENT = '@typo3/backend/module/iframe';

package/backend/new-content-element-wizard-button.ts

@@ -11,7 +11,7 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 import { PseudoButtonLitElement } from '@typo3/backend/element/pseudo-button';
 import Modal from '@typo3/backend/modal';
 import { SeverityEnum } from '@typo3/backend/enum/severity';

package/backend/new-record-wizard.ts

@@ -11,7 +11,7 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 import { html, css, LitElement, type CSSResult, type TemplateResult, nothing } from 'lit';
 import Modal from '@typo3/backend/modal';
 import '@typo3/backend/element/icon-element';

package/backend/notification.ts

@@ -12,9 +12,9 @@
  */
 
 import { LitElement, html, type TemplateResult } from 'lit';
-import { customElement, property, state } from 'lit/decorators';
-import { classMap } from 'lit/directives/class-map';
-import { ifDefined } from 'lit/directives/if-defined';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import type { AbstractAction } from './action-button/abstract-action';
 import { SeverityEnum } from './enum/severity';
 import Severity from './severity';

package/backend/pagetsconfig/pagetsconfig-includes.ts

@@ -15,7 +15,7 @@ import DocumentService from '@typo3/core/document-service';
 import { default as Modal } from '@typo3/backend/modal';
 import { topLevelModuleImport } from '@typo3/backend/utility/top-level-module-import';
 import { html, type TemplateResult } from 'lit';
-import { until } from 'lit/directives/until';
+import { until } from 'lit/directives/until.js';
 import AjaxRequest from '@typo3/core/ajax/ajax-request';
 import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
 import type { JavaScriptItemPayload } from '@typo3/core/java-script-item-processor';

package/backend/record-download-button.ts

@@ -11,7 +11,7 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 import { PseudoButtonLitElement } from '@typo3/backend/element/pseudo-button';
 import { SeverityEnum } from '@typo3/backend/enum/severity';
 import Severity from '@typo3/backend/severity';

package/backend/security/element/csp-reports.ts

@@ -11,9 +11,9 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-import { customElement, property, state } from 'lit/decorators';
+import { customElement, property, state } from 'lit/decorators.js';
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
-import { classMap } from 'lit/directives/class-map';
+import { classMap } from 'lit/directives/class-map.js';
 import AjaxRequest from '@typo3/core/ajax/ajax-request';
 import RegularEvent from '@typo3/core/event/regular-event';
 import { lll } from '@typo3/core/lit-helper';

package/backend/security/element/sudo-mode.ts

@@ -11,7 +11,7 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-import { customElement, property, query, state } from 'lit/decorators';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { html, LitElement, nothing, type PropertyValues, type TemplateResult } from 'lit';
 import AjaxRequest from '@typo3/core/ajax/ajax-request';
 import { AjaxResponse } from '@typo3/core/ajax/ajax-response';

package/backend/settings/editor/editable-setting.ts

@@ -12,7 +12,7 @@
  */
 
 import { html, LitElement, type TemplateResult, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators';
+import { customElement, property, state } from 'lit/decorators.js';
 import { until } from 'lit/directives/until.js';
 import '@typo3/backend/element/icon-element';
 import { copyToClipboard } from '@typo3/backend/copy-to-clipboard';

package/backend/settings/editor.ts

@@ -12,7 +12,7 @@
  */
 
 import { html, LitElement, type TemplateResult, nothing, type PropertyValues } from 'lit';
-import { customElement, property, state } from 'lit/decorators';
+import { customElement, property, state } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
 import '@typo3/backend/element/spinner-element';
 import '@typo3/backend/element/icon-element';

package/backend/settings/type/base.ts

@@ -16,7 +16,7 @@
 
 import { LitElement, type PropertyDeclaration, type ReactiveElement } from 'lit';
 import { defaultConverter } from '@lit/reactive-element';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 
 export const internals = Symbol('internals');
 const privateInternals = Symbol('privateInternals');

package/backend/settings/type/bool.ts

@@ -12,7 +12,7 @@
  */
 
 import { html, type TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 import { BaseElement } from './base';
 
 export const componentName = 'typo3-backend-settings-type-bool';

package/backend/settings/type/color.ts

@@ -12,7 +12,7 @@
  */
 
 import { html, type TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 import { BaseElement } from './base';
 import '@typo3/backend/color-picker';
 import RegularEvent from '@typo3/core/event/regular-event';

package/backend/settings/type/int.ts

@@ -12,8 +12,8 @@
  */
 
 import { html, nothing, type TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators';
-import { live } from 'lit/directives/live';
+import { customElement, property } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
 import { BaseElement } from './base';
 
 export const componentName = 'typo3-backend-settings-type-int';

package/backend/settings/type/number.ts

@@ -12,8 +12,8 @@
  */
 
 import { html, nothing, type TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators';
-import { live } from 'lit/directives/live';
+import { customElement, property } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
 import { BaseElement } from './base';
 
 export const componentName = 'typo3-backend-settings-type-number';

package/backend/settings/type/page.ts

@@ -12,7 +12,7 @@
  */
 
 import { html, nothing, type TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 import { lll } from '@typo3/core/lit-helper';
 import { MessageUtility } from '@typo3/backend/utility/message-utility';
 import { BaseElement } from './base';

package/backend/settings/type/string.ts

@@ -12,8 +12,8 @@
  */
 
 import { html, nothing, type TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators';
-import { live } from 'lit/directives/live';
+import { customElement, property } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
 import { BaseElement } from './base';
 
 export const componentName = 'typo3-backend-settings-type-string';

package/backend/settings/type/stringlist.ts

@@ -12,7 +12,7 @@
  */
 
 import { html, type TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 import { BaseElement } from './base';
 import { live } from 'lit/directives/live.js';
 

package/backend/switch-user.ts

@@ -12,7 +12,7 @@
  */
 
 import { PseudoButtonLitElement } from '@typo3/backend/element/pseudo-button';
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 import AjaxRequest from '@typo3/core/ajax/ajax-request';
 import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
 import Notification from '@typo3/backend/notification';

package/backend/toolbar/live-search.ts

@@ -223,7 +223,7 @@ class LiveSearch {
     const query = formData.get('query').toString();
 
     if (query === '') {
-      this.updateSearchResults(null);
+      this.updateSearchResults();
     } else {
       const searchResultContainer = document.querySelector(resultContainerComponentName) as ResultContainer;
       const paginationElement: ResultPagination = document.querySelector('typo3-backend-live-search-result-pagination');
@@ -238,6 +238,7 @@ class LiveSearch {
         this.currentSearchRequest = null;
         this.updateSearchResults(json);
       } catch (err: unknown) {
+        this.updateSearchResults(null, true);
         if (err instanceof DOMException && err.name === 'AbortError') {
           // Request has been aborted, do not flood the error console
           return;
@@ -261,10 +262,11 @@ class LiveSearch {
     firstSearchResultItem?.focus();
   }
 
-  private updateSearchResults(response: SearchResponse): void {
+  private updateSearchResults(response: SearchResponse = null, hasErrors: boolean = false): void {
     const searchResultContainer: ResultContainer = document.querySelector('typo3-backend-live-search-result-container');
     searchResultContainer.results = response?.results ?? null;
     searchResultContainer.loading = false;
+    searchResultContainer.hasErrors = hasErrors;
 
     this.updatePagination(response?.pagination ?? null);
   }

package/backend/tree/file-storage-browser.ts

@@ -12,7 +12,7 @@
  */
 
 import { html, LitElement, type TemplateResult } from 'lit';
-import { customElement, query } from 'lit/decorators';
+import { customElement, query } from 'lit/decorators.js';
 import AjaxRequest from '@typo3/core/ajax/ajax-request';
 import { type TreeToolbar } from '@typo3/backend/tree/tree-toolbar';
 import ElementBrowser from '@typo3/backend/element-browser';

package/backend/tree/file-storage-tree-container.ts

@@ -12,7 +12,7 @@
  */
 
 import { html, LitElement, type TemplateResult } from 'lit';
-import { customElement, query } from 'lit/decorators';
+import { customElement, query } from 'lit/decorators.js';
 import '@typo3/backend/element/icon-element';
 import { SeverityEnum } from '@typo3/backend/enum/severity';
 import '@typo3/backend/tree/tree-toolbar';

package/backend/tree/page-browser.ts

@@ -12,8 +12,8 @@
  */
 
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
-import { customElement, property, query } from 'lit/decorators';
-import { until } from 'lit/directives/until';
+import { customElement, property, query } from 'lit/decorators.js';
+import { until } from 'lit/directives/until.js';
 import { lll } from '@typo3/core/lit-helper';
 import { PageTree } from '@typo3/backend/tree/page-tree';
 import AjaxRequest from '@typo3/core/ajax/ajax-request';