typo3-typescript-sources 14.3.4 → 14.3.6

package/.last-synced-tag

@@ -1 +1 @@
-v14.3.4
+v14.3.6

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.3.4`
+- **Current TYPO3 Version:** `v14.3.6`
 
 ## 🌿 Branches
 

package/backend/drag-uploader.ts

@@ -47,6 +47,8 @@ enum Mode {
   BROWSE = 'browse',
 }
 
+const uploadFinishedEventName = 'typo3:drag-uploader:upload-finished';
+
 /**
  * Properties of a file as returned from the AJAX action; essential, this is a serialized instance of
  * \TYPO3\CMS\Core\Resource\File plus some extra properties (see FileController::flattenResultDataValue())
@@ -208,6 +210,8 @@ export default class DragUploader {
     dropzoneCloseButton.addEventListener('click', this.hideDropzone);
     this.dropzone.append(dropzoneCloseButton);
 
+    document.addEventListener(uploadFinishedEventName, this.closeDropzone);
+
     // no filelist then create own progress table
     if (this.fileList === null) {
       this.fileList = document.createElement('table');
@@ -289,6 +293,18 @@ export default class DragUploader {
     this.dropzone.removeAttribute('hidden');
   }
 
+  public closeDropzone = (): void => {
+    this.dropzone.hidden = true;
+    this.dropzone.classList.remove('drop-status-ok');
+
+    if (this.irreObjectUid !== undefined) {
+      // Hide artificial file table in IRRE context
+      this.fileList.parentElement.hidden = true;
+    }
+    // User manually hides the dropzone, so we can reset the flag
+    this.manuallyTriggered = false;
+  };
+
   /**
    *
    * @param {Event} event
@@ -296,10 +312,7 @@ export default class DragUploader {
   public hideDropzone = (event: Event): void => {
     event.stopPropagation();
     event.preventDefault();
-    this.dropzone.setAttribute('hidden', 'hidden');
-    this.dropzone.classList.remove('drop-status-ok');
-    // User manually hides the dropzone, so we can reset the flag
-    this.manuallyTriggered = false;
+    this.closeDropzone();
   };
 
   /**
@@ -442,6 +455,8 @@ export default class DragUploader {
     if (this.queueLength > 0) {
       this.queueLength--;
       if (this.queueLength === 0) {
+        document.dispatchEvent(new CustomEvent(uploadFinishedEventName));
+
         const timeout: number = messages && messages.length ? 5000 : 0;
         if (timeout) {
           for (const flashMessage of messages) {
@@ -612,6 +627,8 @@ export default class DragUploader {
 
     modal.addEventListener('typo3-modal-hidden', () => {
       this.askForOverride = [];
+
+      document.dispatchEvent(new CustomEvent(uploadFinishedEventName));
     });
   }
 }

package/backend/element/editable-page-title.ts

@@ -211,9 +211,11 @@ export class EditablePageTitle extends LitElement {
     return this.editable && this.pageId > 0;
   }
 
-  private endEditing(): void {
+  private async endEditing(): Promise<void> {
     if (this.isEditable()) {
       this._isEditing = false;
+      await new Promise<void>((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
+      this.shadowRoot.querySelector<HTMLButtonElement>('button[data-action="edit"]')?.focus();
     }
   }
 

package/backend/element/status-indicator-element.ts

@@ -0,0 +1,93 @@
+/*
+ * 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 { customElement, property } from 'lit/decorators.js';
+import { html, LitElement, nothing, type TemplateResult } from 'lit';
+import { classMap, type ClassInfo } from 'lit/directives/class-map.js';
+
+// The first group are the base colours; the second group are semantic states
+// that map to one of those base colours in the stylesheet, so a recurring
+// domain concept looks identical wherever it appears in the backend. Keep the
+// semantic group small and curated rather than introducing new colours.
+export type StatusIndicatorState =
+  | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'notice' | 'default'
+  | 'active' | 'online' | 'running' | 'disabled';
+
+// A semantic state may also imply a motion modifier, so a single state carries
+// both the colour and the activity animation of the concept it names.
+const semanticMotion: Partial<Record<StatusIndicatorState, 'live' | 'loading'>> = {
+  online: 'live',
+  running: 'loading',
+};
+
+/**
+ * Module: @typo3/backend/element/status-indicator-element
+ *
+ * A small dot that flags the state of a record, task or interface element.
+ * Add the `live` attribute to signal that an element is active or live, or the
+ * `loading` attribute to signal an operation in progress. Provide a `label` to
+ * expose an accessible name (rendered as role="img" + aria-label) and a hover
+ * tooltip (via title); without it the indicator is purely decorative and hidden
+ * from assistive technology.
+ *
+ * The `state` accepts either a base colour (success, danger, …) or a semantic
+ * state (active, online, running, disabled) that resolves to one of those
+ * colours and may carry its own motion, so `state="running"` is already
+ * animated while `state="active"` is a plain dot.
+ *
+ * @example
+ * <typo3-backend-status-indicator state="success" label="Online"></typo3-backend-status-indicator>
+ * <typo3-backend-status-indicator state="success" live label="Live"></typo3-backend-status-indicator>
+ * <typo3-backend-status-indicator state="info" loading label="Loading"></typo3-backend-status-indicator>
+ * <typo3-backend-status-indicator state="running" label="Running"></typo3-backend-status-indicator>
+ */
+@customElement('typo3-backend-status-indicator')
+export class StatusIndicatorElement extends LitElement {
+  @property({ type: String }) state: StatusIndicatorState = 'default';
+  @property({ type: Boolean }) live: boolean = false;
+  @property({ type: Boolean }) loading: boolean = false;
+  @property({ type: String }) label: string = null;
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    return this;
+  }
+
+  protected override render(): TemplateResult {
+    const labelled = this.label !== null && this.label !== '';
+    return html`
+      <span
+        class=${classMap(this.getClasses())}
+        title=${labelled ? this.label : nothing}
+        role=${labelled ? 'img' : nothing}
+        aria-label=${labelled ? this.label : nothing}
+        aria-hidden=${labelled ? nothing : 'true'}
+      ></span>
+    `;
+  }
+
+  private getClasses(): ClassInfo {
+    const motion = semanticMotion[this.state];
+    return {
+      ['status-indicator']: true,
+      ['status-indicator-' + this.state]: true,
+      ['status-indicator-live']: this.live || motion === 'live',
+      ['status-indicator-loading']: this.loading || motion === 'loading',
+    };
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-status-indicator': StatusIndicatorElement;
+  }
+}

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

@@ -642,6 +642,13 @@ class InlineControlContainer extends HTMLElement {
           const recordContainer = this.getRecordContainer(objectId);
           this.removeUsed(recordContainer);
         }
+      }).catch((reason: Error): void => {
+        if (reason instanceof DOMException && reason.name === 'AbortError') {
+          // Request was aborted because the record was collapsed again before
+          // loading finished. Nothing to do, the abort handling already cleaned up.
+          return;
+        }
+        throw reason;
       });
 
       this.requestQueue[objectId] = ajaxRequest;

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) => `[id="${field.id}"]`);
+    const fieldsToListenOnList = Object.values(this.getAvailableFieldsForProposalGeneration()).map((field: HTMLElement) => field.dataset.slugSelector);
     const recreateButton: HTMLButtonElement = this.fullElement.querySelector(Selectors.recreateButton);
 
     // Listen on 'listenerFieldNames' for new pages. This is typically the 'title' field
@@ -217,12 +217,20 @@ class SlugElement {
   private getAvailableFieldsForProposalGeneration(): { [key: string]: HTMLElement } {
     const availableFields: { [key: string]: HTMLElement } = {};
     for (const [fieldName, selector] of Object.entries(this.fieldsToListenOn)) {
-      let field = document.querySelector('[data-formengine-input-name="' + selector + '"]') as HTMLElement;
-      if (field === null) {
+      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)
-        field = document.querySelector('[name="' + selector + '"]') as HTMLElement;
-      }
+        '[name="' + selector + '"]'
+      ];
+      let field: HTMLElement;
+      let usedSelector = '';
+      selectorCandidates.some((testSelector: string) => {
+        field = document.querySelector(testSelector) as HTMLElement;
+        usedSelector = testSelector;
+        return field !== null;
+      });
       if (field !== null) {
+        field.dataset.slugSelector = usedSelector;
         availableFields[fieldName] = field;
       }
     }

package/backend/form-engine/field-wizard/shortcut-validation.ts

@@ -0,0 +1,61 @@
+/*
+ * 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 DocumentService from '@typo3/core/document-service';
+import FormEngine from '@typo3/backend/form-engine';
+
+/**
+ * Client-side logic to toggle required state of "shortcut" based on "shortcut_mode".
+ *
+ * @internal
+ */
+class ShortcutValidation {
+  constructor() {
+    DocumentService.ready().then((): void => {
+      this.run();
+    });
+  }
+
+  private run(): void {
+    const shortcut = document.querySelector<HTMLInputElement>('[name$="[shortcut]"]');
+    const shortcut_mode = document.querySelector<HTMLInputElement>('[name$="[shortcut_mode]"]');
+    const form = shortcut?.closest<HTMLFormElement>('form');
+
+    if (!shortcut || !shortcut_mode || !form) {
+      return;
+    }
+
+    shortcut_mode.addEventListener('change', () => {
+      this.apply(shortcut, form, shortcut_mode);
+    });
+  }
+
+  private async apply(shortcut: HTMLInputElement, form: HTMLFormElement, shortcut_mode: HTMLInputElement): Promise<void> {
+    const isRequired = parseInt(shortcut_mode.value, 10) === 0;
+    const rules = JSON.parse(shortcut.dataset.formengineValidationRules || '[]');
+    const existingRequiredIndex = rules.findIndex((r: any) => r.type === 'required');
+
+    if (isRequired && existingRequiredIndex === -1) {
+      rules.push({ type: 'required' });
+    } else if (!isRequired && existingRequiredIndex !== -1) {
+      rules.splice(existingRequiredIndex, 1);
+    }
+
+    shortcut.dataset.formengineValidationRules = JSON.stringify(rules);
+    FormEngine.reinitialize();
+    FormEngine.Validation.initializeInputFields();
+    FormEngine.Validation.validate(form);
+  }
+}
+
+export default new ShortcutValidation();

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

@@ -62,6 +62,11 @@ export class AjaxDispatcher {
       return this.processResponse(await response.resolve());
     });
     sentRequest.catch((reason: Error): void => {
+      if (reason instanceof DOMException && reason.name === 'AbortError') {
+        // The request was deliberately aborted (e.g. a record was collapsed again
+        // before loading finished), this is not an error worth notifying about.
+        return;
+      }
       Notification.error('Error ' + reason.message);
     });
 

package/backend/image-manipulation.ts

@@ -385,7 +385,7 @@ class ImageManipulation {
         // Initialize current crop variant
         this.update(this.currentCropVariant);
       },
-      crop: this.cropMoveHandler.bind(this),
+      crop: this.cropMoveHandler,
       data: this.currentCropVariant.cropArea,
     }));
 

package/backend/layout-module/sticky-language-header.ts

@@ -0,0 +1,186 @@
+/*
+ * 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 { css, html, LitElement, type TemplateResult } from 'lit';
+import { customElement, query, state } from 'lit/decorators.js';
+import RegularEvent from '@typo3/core/event/regular-event';
+
+/**
+ * Module: @typo3/backend/layout-module/sticky-language-header
+ *
+ * Carries the header information of a language column twice: the default slot
+ * stays in the flow, the "sticky" slot holds a copy that is placed below the
+ * doc header, aligned with its column, for as long as the header itself is
+ * scrolled out of view. Without a "sticky" slot the element is inert.
+ */
+@customElement('typo3-backend-page-layout-sticky-language-header')
+export class PageLayoutStickyLanguageHeader extends LitElement {
+  static override styles = css`
+    /* the global border-box reset does not cross the shadow boundary */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
+    :host {
+      display: block;
+    }
+
+    .sticky {
+      display: flex;
+      align-items: center;
+      gap: .5rem;
+      position: fixed;
+      z-index: calc(var(--typo3-zindex-header) - 2);
+      padding: .5rem .75rem;
+      white-space: nowrap;
+      overflow: hidden;
+      pointer-events: none;
+      color: var(--typo3-component-color);
+      background-color: var(--typo3-component-bg);
+      border: var(--typo3-component-border-width) solid var(--typo3-component-border-color);
+      border-top: 0;
+      border-radius: 0 0 var(--pagemodule-grid-cell-border-radius) var(--pagemodule-grid-cell-border-radius);
+      box-shadow: var(--typo3-component-box-shadow-flyout);
+      opacity: 0;
+      /*
+       * The doc header is overlapped by a pixel: it ends on a fractional
+       * position, and two boxes meeting there round apart when they are
+       * rasterized, which lets the page show through the seam. Offset via top,
+       * a transform on a fixed element causes repaint artifacts.
+       */
+      top: calc(var(--sticky-top, 0px) - 1px - .5rem);
+      transition: opacity .2s ease-out, top .2s ease-out;
+    }
+
+    .sticky-active {
+      opacity: 1;
+      top: calc(var(--sticky-top, 0px) - 1px);
+    }
+
+    ::slotted([slot="sticky"]) {
+      display: flex;
+      align-items: center;
+      gap: .5rem;
+      min-width: 0;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .sticky {
+        transition: none;
+      }
+    }
+  `;
+
+  // how far the box shadow reaches beyond the border box
+  private static readonly shadowBleed: number = 64;
+
+  @state() protected active: boolean = false;
+
+  @query('.inline') private readonly inline: HTMLElement;
+  @query('.sticky') private readonly sticky: HTMLElement;
+
+  private scrollEvent: RegularEvent | null = null;
+  private resizeEvent: RegularEvent | null = null;
+  private ticking: boolean = false;
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    const sticky = this.querySelector(':scope > [slot="sticky"]');
+    if (sticky === null) {
+      return;
+    }
+    // the slot is rendered with [hidden] so it does not flash before the element
+    // is upgraded, and the global reset declares that one !important
+    sticky.removeAttribute('hidden');
+    this.scrollEvent = new RegularEvent('scroll', this.scheduleSync, true);
+    this.scrollEvent.bindTo(document);
+    this.resizeEvent = new RegularEvent('resize', this.scheduleSync);
+    this.resizeEvent.bindTo(window);
+  }
+
+  public override disconnectedCallback(): void {
+    this.scrollEvent?.release();
+    this.resizeEvent?.release();
+    this.scrollEvent = null;
+    this.resizeEvent = null;
+    super.disconnectedCallback();
+  }
+
+  protected override firstUpdated(): void {
+    this.scheduleSync();
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <div class="inline"><slot></slot></div>
+      <div class="sticky${this.active ? ' sticky-active' : ''}" aria-hidden="true">
+        <slot name="sticky"></slot>
+      </div>`;
+  }
+
+  private readonly scheduleSync = (): void => {
+    if (this.ticking) {
+      return;
+    }
+    this.ticking = true;
+    requestAnimationFrame((): void => {
+      this.ticking = false;
+      this.sync();
+    });
+  };
+
+  private sync(): void {
+    const container = this.closest('.t3-grid-container');
+    if (container === null || !this.inline || !this.sticky) {
+      return;
+    }
+    // the lower edge of the doc header in viewport coordinates, which is where the
+    // element is placed: whichever of its bars still reaches into the viewport wins,
+    // so it holds for a missing button bar and for a bar that wrapped into two rows
+    const topOffset: number = Math.max(0, ...Array.from(
+      this.ownerDocument.querySelectorAll('.module-docheader'),
+      (bar: Element): number => bar.getBoundingClientRect().bottom,
+    ));
+    const containerRect = container.getBoundingClientRect();
+    const inlineRect = this.inline.getBoundingClientRect();
+    this.active = inlineRect.bottom <= topOffset && containerRect.bottom > topOffset;
+    if (!this.active) {
+      return;
+    }
+    this.sticky.style.setProperty('--sticky-top', topOffset + 'px');
+    this.sticky.style.left = inlineRect.left + 'px';
+    this.sticky.style.width = inlineRect.width + 'px';
+    const cutStart = Math.max(0, containerRect.left - inlineRect.left);
+    const cutEnd = Math.max(0, inlineRect.right - containerRect.right);
+    if (cutStart > 0 || cutEnd > 0) {
+      // clip-path takes the border box as its reference, so the region has to reach
+      // beyond it on every side that is not cut, or the box shadow is clipped away too
+      const bleed = -PageLayoutStickyLanguageHeader.shadowBleed + 'px';
+      const start = cutStart > 0 ? cutStart + 'px' : bleed;
+      const end = cutEnd > 0 ? cutEnd + 'px' : bleed;
+      this.sticky.style.clipPath = `inset(${bleed} ${end} ${bleed} ${start})`;
+    } else {
+      this.sticky.style.clipPath = '';
+    }
+    this.sticky.style.visibility = cutStart < inlineRect.width && cutEnd < inlineRect.width ? '' : 'hidden';
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-page-layout-sticky-language-header': PageLayoutStickyLanguageHeader;
+  }
+}

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

@@ -27,8 +27,10 @@ export interface ResultItemInterface {
   defaultAction: ResultItemActionInterface;
   icon: Record<string, string>;
   language: ResultItemLanguageInterface | null;
+  thumbnailUrl: string | null;
   itemTitle: string;
   typeLabel: string;
+  properties: Record<string, string>;
   extraData: { [key: string]: any }
 }
 

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

@@ -32,12 +32,25 @@ export class ResultDetailContainer extends LitElement {
       return nothing;
     }
 
+    const propertyEntries = Object.entries(this.resultItem.properties ?? {});
+
     return html`
       <div class="livesearch-detail-preamble">
-        <typo3-backend-icon identifier="${this.resultItem.icon.identifier}" overlay="${this.resultItem.icon.overlay}" size="large"></typo3-backend-icon>
+        ${this.resultItem.thumbnailUrl
+    ? html`<div class="livesearch-detail-preamble-thumbnail"><img src="${this.resultItem.thumbnailUrl}" loading="lazy" alt=""></div>`
+    : html`<typo3-backend-icon identifier="${this.resultItem.icon.identifier}" overlay="${this.resultItem.icon.overlay}" size="large"></typo3-backend-icon>`
+}
         <h3>${this.resultItem.itemTitle}</h3>
         <p class="livesearch-detail-preamble-type">${this.resultItem.typeLabel}</p>
       </div>
+      ${propertyEntries.length > 0 ? html`
+        <dl class="livesearch-detail-properties">
+          ${propertyEntries.map(([label, value]: [string, string]) => html`
+            <dt>${label}</dt>
+            <dd>${value}</dd>
+          `)}
+        </dl>
+      ` : nothing}
       <typo3-backend-live-search-result-item-action-container .resultItem="${this.resultItem}"></typo3-backend-live-search-result-item-action-container>
     `;
   }

package/backend/module-docheader.ts

@@ -0,0 +1,58 @@
+/*
+ * 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 DocumentService from '@typo3/core/document-service';
+
+enum Selectors {
+  wrapper = '.module-docheader-wrapper',
+  navigation = '.t3js-module-docheader-navigation',
+}
+
+/**
+ * Module: @typo3/backend/module-docheader
+ *
+ * Publishes the measured docheader heights as CSS custom properties, because
+ * both bars wrap and the stylesheet cannot know how much of it stays pinned.
+ */
+class ModuleDocHeader {
+  private readonly resizeObserver: ResizeObserver;
+  private wrapper: HTMLElement | null = null;
+  private navigation: HTMLElement | null = null;
+
+  constructor() {
+    this.resizeObserver = new ResizeObserver((): void => this.publish());
+    DocumentService.ready().then((): void => this.observe());
+  }
+
+  private observe(): void {
+    this.wrapper = document.querySelector(Selectors.wrapper);
+    if (this.wrapper === null) {
+      return;
+    }
+
+    this.navigation = this.wrapper.querySelector(Selectors.navigation);
+    // observing delivers an initial record, which is what publishes the first values
+    this.resizeObserver.observe(this.wrapper);
+    if (this.navigation !== null) {
+      this.resizeObserver.observe(this.navigation);
+    }
+  }
+
+  private publish(): void {
+    const style = document.documentElement.style;
+    style.setProperty('--module-docheader-height', `${this.wrapper.getBoundingClientRect().height}px`);
+    style.setProperty('--module-docheader-navigation-height', `${this.navigation?.getBoundingClientRect().height ?? 0}px`);
+  }
+}
+
+export default new ModuleDocHeader();

package/backend/page-wizard/steps/position-step.ts

@@ -80,6 +80,7 @@ export class PositionStep implements WizardStepInterface, WizardStepValueInterfa
         .activePageId="${currentValue?.pageUid}"
         .insertPosition="${currentValue?.insertPosition}"
         @typo3:page-position-select-tree:insert-position-change=${(event: CustomEvent) => this.handleInsertPositionChange(event)}
+        @typo3:page-position-select-tree:insert-position-confirm=${() => this.handleInsertPositionConfirm()}
       >
       </typo3-backend-component-page-position-select>
     `;
@@ -141,6 +142,10 @@ export class PositionStep implements WizardStepInterface, WizardStepValueInterfa
     });
   }
 
+  private handleInsertPositionConfirm(): void {
+    this.context.dispatchAutoAdvance();
+  }
+
   private initSummaryTask(): void {
     this.summaryTask = new Task(this.context.wizard, {
       task: async ([pageUid]: [number]): Promise<PageDetail> => {

package/backend/settings/type/stringlist.ts

@@ -66,6 +66,13 @@ export class StringlistTypeElement extends BaseElement<string[]> {
 
   protected override render(): TemplateResult {
     const value = this.value || [];
+    if (value.length === 0) {
+      return html`
+        <button id=${this.formid} class="btn btn-default" type="button" ?disabled=${this.readonly} @click=${() => this.addValue(0)}>
+          <typo3-backend-icon identifier="actions-plus" size="small"></typo3-backend-icon>
+        </button>
+      `;
+    }
     return html`
       <div class="form-control-wrap">
         <div class="table-fit">