[TASK] Rename @typo3/backend/new-content-element-wizard component

The component `@typo3/backend/new-content-element-wizard` is primarily
used to render a wizard-like UI for selecting a content element for
creation.
To make the component usable in other places as well, it get's renamed
to `@typo3/backend/new-record-wizard`.

Resolves: #103683
Releases: main
Change-Id: I9ad19d95fd0c8aa1efb60c335726dac57eb7c54c
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/83936
Reviewed-by: Andreas Kienast <a.fernandez@scripting-base.de>
Tested-by: Oliver Bartsch <bo@cedev.de>
Reviewed-by: Oliver Bartsch <bo@cedev.de>
Tested-by: core-ci <typo3@b13.com>
Tested-by: Andreas Kienast <a.fernandez@scripting-base.de>
Tested-by: Georg Ringer <georg.ringer@gmail.com>
Reviewed-by: Georg Ringer <georg.ringer@gmail.com>

Build/Sources/Sass/backend.scss

@@ -58,7 +58,7 @@
 @import "element/typo3-backend-draggable-resizable";
 @import "element/typo3-backend-editable-page-title";
 @import "element/typo3-backend-formengine-char-counter";
-@import "element/typo3-backend-new-content-element-wizard";
+@import "element/typo3-backend-new-record-wizard";
 @import "element/typo3-backend-security-csp-reports";
 @import "element/typo3-backend-security-sudo-mode";
 @import "element/typo3-backend-table-wizard";

Build/Sources/Sass/element/typo3-backend-new-record-wizard.scss

@@ -0,0 +1,7 @@
+//
+// CSS for custom element:
+// typo3-backend-new-record-wizard
+//
+typo3-backend-new-record-wizard {
+    @include lightmode;
+}

Build/Sources/TypeScript/backend/context-menu-actions.ts

@@ -21,7 +21,7 @@ import ModuleMenu from './module-menu';
 import Notification from '@typo3/backend/notification';
 import Viewport from './viewport';
 import { ModuleStateStorage } from './storage/module-state-storage';
-import '@typo3/backend/new-content-element-wizard';
+import '@typo3/backend/new-record-wizard';
 
 /**
  * @exports @typo3/backend/context-menu-actions

Build/Sources/TypeScript/backend/new-content-element-wizard-button.ts

@@ -15,7 +15,7 @@ import { customElement, property } from 'lit/decorators';
 import { html, css, LitElement, TemplateResult } from 'lit';
 import Modal from '@typo3/backend/modal';
 import { SeverityEnum } from '@typo3/backend/enum/severity';
-import '@typo3/backend/new-content-element-wizard';
+import '@typo3/backend/new-record-wizard';
 
 /**
  * Module: @typo3/backend/new-content-element-wizard-button

Build/Sources/TypeScript/backend/new-content-element-wizard.ts → Build/Sources/TypeScript/backend/new-record-wizard.ts

@@ -23,6 +23,8 @@ import Viewport from '@typo3/backend/viewport';
 import RegularEvent from '@typo3/core/event/regular-event';
 import { KeyTypesEnum } from '@typo3/backend/enum/key-types';
 
+type RequestType = 'location'|'ajax'|undefined;
+
 class Item {
   public visible: boolean = true;
 
@@ -32,7 +34,7 @@ class Item {
     public readonly description: string,
     public readonly icon: string,
     public readonly url: string,
-    public readonly requestType: string,
+    public readonly requestType: RequestType,
     public readonly defaultValues: Array<any>,
     public readonly saveAndClose: boolean
   ) { }
@@ -111,7 +113,7 @@ interface DataItemInterface {
   description: string;
   icon: string;
   url: string,
-  requestType: string | undefined,
+  requestType: RequestType,
   defaultValues: Array<any> | undefined,
   saveAndClose: boolean | undefined
 }
@@ -132,10 +134,10 @@ interface Message {
 }
 
 /**
- * Module: @typo3/backend/new-content-element-wizard
+ * Module: @typo3/backend/new-record-wizard
  */
-@customElement('typo3-backend-new-content-element-wizard')
-export class NewContentElementWizard extends LitElement {
+@customElement('typo3-backend-new-record-wizard')
+export class NewRecordWizard extends LitElement {
   static styles: CSSResult[] = [
     css`
       :host {
@@ -332,6 +334,8 @@ export class NewContentElementWizard extends LitElement {
       },
     }
   }) categories: Categories = new Categories([]);
+  @property({ type: String }) searchPlaceholder: string = 'newRecordWizard.filter.placeholder';
+  @property({ type: String }) searchNothingFoundLabel: string = 'newRecordWizard.filter.noResults';
   @property({ type: String, attribute: false }) selectedCategory: Category | null = null;
   @property({ type: String, attribute: false }) searchTerm: string = '';
   @property({ type: Array, attribute: false }) messages: Message[] = [];
@@ -364,7 +368,7 @@ export class NewContentElementWizard extends LitElement {
     this.messages = [];
     if (this.selectedCategory === null) {
       this.messages = [{
-        message: lll('newContentElement.filter.noResults'),
+        message: lll(this.searchNothingFoundLabel),
         severity: 'info'
       }];
     }
@@ -418,7 +422,7 @@ export class NewContentElementWizard extends LitElement {
           .value="${this.searchTerm}"
           @input="${(event: InputEvent): void => { this.filter((<HTMLInputElement>event.target).value); }}"
           @keydown="${(event: KeyboardEvent): void => { if (event.key === KeyTypesEnum.ESCAPE) { event.stopImmediatePropagation(); this.filter(''); } }}"
-          placeholder="${lll('newContentElement.filter.placeholder')}"
+          placeholder="${lll(this.searchPlaceholder)}"
         />
       </form>
     `;
@@ -544,6 +548,6 @@ export class NewContentElementWizard extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'typo3-backend-new-content-element-wizard': NewContentElementWizard;
+    'typo3-backend-new-record-wizard': NewRecordWizard;
   }
 }

typo3/sysext/backend/Resources/Private/Templates/NewContentElement/Wizard.html

@@ -7,7 +7,7 @@
     <h5>{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_misc.xlf:1_selectType')}</h5>
 </f:if>
 
-<typo3-backend-new-content-element-wizard categories="{categoriesJson}">
-</typo3-backend-new-content-element-wizard>
+<typo3-backend-new-record-wizard categories="{categoriesJson}" searchplaceholder="newContentElement.filter.placeholder" searchnothingfoundlabel="newContentElement.filter.noResults">
+</typo3-backend-new-record-wizard>
 
 </html>

typo3/sysext/backend/Resources/Public/Css/backend.css

@@ -3838,7 +3838,7 @@ typo3-backend-draggable-resizable #t3js-cropper-focus-area{width:100%;height:100
 typo3-backend-draggable-resizable .ui-resizable-handle{z-index:90}
 typo3-backend-editable-page-title{display:block;white-space:nowrap;text-overflow:ellipsis}
 typo3-backend-formengine-char-counter{inset-inline-start:0;position:absolute;top:100%;display:flex}
-typo3-backend-new-content-element-wizard{--typo3-component-color-scheme:var(--typo3-light-color-scheme);--typo3-component-color:var(--typo3-light-color);--typo3-component-primary-color:var(--typo3-light-primary-color);--typo3-component-match-highlight-color:var(--typo3-light-match-highlight-color);--typo3-component-match-highlight-bg:var(--typo3-light-match-highlight-bg);--typo3-component-bg:var(--typo3-light-bg);--typo3-component-border-color:var(--typo3-light-border-color);--typo3-component-link-color:var(--typo3-light-link-color);--typo3-component-link-hover-color:var(--typo3-light-link-hover-color);--typo3-component-hover-color:var(--typo3-light-hover-color);--typo3-component-hover-bg:var(--typo3-light-hover-bg);--typo3-component-hover-border-color:var(--typo3-light-hover-border-color);--typo3-component-focus-color:var(--typo3-light-focus-color);--typo3-component-focus-bg:var(--typo3-light-focus-bg);--typo3-component-focus-border-color:var(--typo3-light-focus-border-color);--typo3-component-active-color:var(--typo3-light-active-color);--typo3-component-active-bg:var(--typo3-light-active-bg);--typo3-component-active-border-color:var(--typo3-light-active-border-color);--typo3-component-disabled-color:var(--typo3-light-disabled-color);--typo3-component-disabled-bg:var(--typo3-light-disabled-bg);--typo3-component-disabled-border-color:var(--typo3-light-disabled-border-color)}
+typo3-backend-new-record-wizard{--typo3-component-color-scheme:var(--typo3-light-color-scheme);--typo3-component-color:var(--typo3-light-color);--typo3-component-primary-color:var(--typo3-light-primary-color);--typo3-component-match-highlight-color:var(--typo3-light-match-highlight-color);--typo3-component-match-highlight-bg:var(--typo3-light-match-highlight-bg);--typo3-component-bg:var(--typo3-light-bg);--typo3-component-border-color:var(--typo3-light-border-color);--typo3-component-link-color:var(--typo3-light-link-color);--typo3-component-link-hover-color:var(--typo3-light-link-hover-color);--typo3-component-hover-color:var(--typo3-light-hover-color);--typo3-component-hover-bg:var(--typo3-light-hover-bg);--typo3-component-hover-border-color:var(--typo3-light-hover-border-color);--typo3-component-focus-color:var(--typo3-light-focus-color);--typo3-component-focus-bg:var(--typo3-light-focus-bg);--typo3-component-focus-border-color:var(--typo3-light-focus-border-color);--typo3-component-active-color:var(--typo3-light-active-color);--typo3-component-active-bg:var(--typo3-light-active-bg);--typo3-component-active-border-color:var(--typo3-light-active-border-color);--typo3-component-disabled-color:var(--typo3-light-disabled-color);--typo3-component-disabled-bg:var(--typo3-light-disabled-bg);--typo3-component-disabled-border-color:var(--typo3-light-disabled-border-color)}
 typo3-backend-security-csp-reports .infolist-container{container-type:inline-size}
 typo3-backend-security-csp-reports .infolist{display:flex;gap:var(--typo3-spacing);flex-direction:column}
 typo3-backend-security-csp-reports .infolist-info{display:none}