typo3-typescript-sources 13.4.20

package/backend/settings/type/stringlist.ts

@@ -0,0 +1,87 @@
+/*
+ * 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, type TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators';
+import { BaseElement } from './base';
+import { live } from 'lit/directives/live.js';
+
+export const componentName = 'typo3-backend-settings-type-stringlist';
+
+@customElement(componentName)
+export class StringlistTypeElement extends BaseElement<string[]> {
+
+  @property({ type: Array }) override value: string[];
+
+  protected updateValue(value: string, index: number) {
+    const copy = [...this.value];
+    copy[index] = value;
+    this.value = copy;
+  }
+
+  protected addValue(index: number, value: string = '') {
+    this.value = this.value.toSpliced(index + 1, 0, value);
+  }
+
+  protected removeValue(index: number) {
+    this.value = this.value.toSpliced(index, 1);
+  }
+
+  protected renderItem(value: string, index: number): TemplateResult {
+    return html`
+      <tr>
+        <td width="99%">
+          <input
+            id=${`${this.formid}${index > 0 ? '-' + index : ''}`}
+            type="text"
+            class="form-control"
+            ?readonly=${this.readonly}
+            .value=${live(value)}
+            @change=${(e: InputEvent) => this.updateValue((e.target as HTMLInputElement).value, index)}
+          />
+        </td>
+        <td>
+          <div class="btn-group" role="group">
+            <button class="btn btn-default" type="button" ?disabled=${this.readonly} @click=${() => this.addValue(index)}>
+              <typo3-backend-icon identifier="actions-plus" size="small"></typo3-backend-icon>
+            </button>
+            <button class="btn btn-default" type="button" ?disabled=${this.readonly} @click=${() => this.removeValue(index)}>
+              <typo3-backend-icon identifier="actions-delete" size="small"></typo3-backend-icon>
+            </button>
+          </div>
+        </td>
+      </tr>
+    `;
+  }
+
+  protected override render(): TemplateResult {
+    const value = this.value || [];
+    return html`
+      <div class="form-control-wrap">
+        <div class="table-fit">
+          <table class="table table-hover">
+            <tbody>
+              ${value.map((v, i) => this.renderItem(v, i))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-settings-type-stringlist': StringlistTypeElement;
+  }
+}

package/backend/severity.ts

@@ -0,0 +1,88 @@
+/*
+ * 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 { SeverityEnum } from './enum/severity';
+
+/**
+ * Module: @typo3/backend/severity
+ * Severity for the TYPO3 backend
+ */
+export default class Severity {
+  public static notice: number = SeverityEnum.notice;
+  public static info: number = SeverityEnum.info;
+  public static ok: number = SeverityEnum.ok;
+  public static warning: number = SeverityEnum.warning;
+  public static error: number = SeverityEnum.error;
+
+  /**
+   * Gets the CSS class for the severity
+   *
+   * @param {SeverityEnum} severity
+   * @returns {string}
+   */
+  public static getCssClass(severity: SeverityEnum): string {
+    let severityClass: string;
+
+    switch (severity) {
+      case SeverityEnum.notice:
+        severityClass = 'notice';
+        break;
+      case SeverityEnum.ok:
+        severityClass = 'success';
+        break;
+      case SeverityEnum.warning:
+        severityClass = 'warning';
+        break;
+      case SeverityEnum.error:
+        severityClass = 'danger';
+        break;
+      case SeverityEnum.info:
+      default:
+        severityClass = 'info';
+    }
+
+    return severityClass;
+  }
+}
+
+let severityObject: Severity;
+try {
+  // fetch from opening window
+  if (window.opener && window.opener.TYPO3 && window.opener.TYPO3.Severity) {
+    severityObject = window.opener.TYPO3.Severity;
+  }
+
+  // fetch from parent
+  if (parent && parent.window.TYPO3 && parent.window.TYPO3.Severity) {
+    severityObject = parent.window.TYPO3.Severity;
+  }
+
+  // fetch object from outer frame
+  if (top && top.TYPO3 && top.TYPO3.Severity) {
+    severityObject = top.TYPO3.Severity;
+  }
+} catch {
+  // This only happens if the opener, parent or top is some other url (eg a local file)
+  // which loaded the current window. Then the browser's cross domain policy jumps in
+  // and raises an exception.
+  // For this case we are safe and we can create our global object below.
+}
+
+if (!severityObject) {
+  severityObject = Severity;
+
+  // attach to global frame
+  if (typeof TYPO3 !== 'undefined') {
+    TYPO3.Severity = severityObject;
+  }
+}

package/backend/site-inline-actions.ts

@@ -0,0 +1,32 @@
+/*
+ * 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';
+
+/**
+ * Module: @typo3/backend/site-inline-actions
+ * Site configuration backend module FormEngine inline:
+ * Override inline 'create' and 'details' route to point to SiteInlineAjaxController
+ */
+class SiteInlineActions {
+
+  constructor() {
+    DocumentService.ready().then((): void => {
+      TYPO3.settings.ajaxUrls.record_inline_details = TYPO3.settings.ajaxUrls.site_configuration_inline_details;
+      TYPO3.settings.ajaxUrls.record_inline_create = TYPO3.settings.ajaxUrls.site_configuration_inline_create;
+    });
+  }
+
+}
+
+export default new SiteInlineActions();

package/backend/sortable-table.ts

@@ -0,0 +1,208 @@
+/*
+ * 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 Tablesort, { type TablesortOptions } from 'tablesort';
+import 'tablesort.dotsep';
+import 'tablesort.number';
+import { IconElement } from './element/icon-element';
+import { Sizes } from './enum/icon-types';
+
+class TablesortWithButtons extends Tablesort {
+  public init(el: HTMLTableElement, options: TablesortOptions) {
+    let firstRow: HTMLTableRowElement, defaultSort;
+
+    this.table = el;
+    this.thead = false;
+    this.options = options;
+
+    if (el.rows && el.rows.length > 0) {
+      if (el.tHead && el.tHead.rows.length > 0) {
+        for (let i = 0; i < el.tHead.rows.length; i++) {
+          if (el.tHead.rows[i].getAttribute('data-sort-method') === 'thead') {
+            firstRow = el.tHead.rows[i];
+            break;
+          }
+        }
+        if (!firstRow) {
+          firstRow = el.tHead.rows[el.tHead.rows.length - 1];
+        }
+        this.thead = true;
+      } else {
+        firstRow = el.rows[0];
+      }
+    }
+
+    if (!firstRow) {
+      return;
+    }
+
+    const onClick = (event: PointerEvent): void => {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      const direction = (event.currentTarget as HTMLButtonElement).dataset.sortDirection;
+      const target = (event.currentTarget as HTMLButtonElement).closest('th, td') as HTMLTableCellElement;
+
+      // Tablesort produces different results on sorting in the same direction twice
+      // when the sorting is not 100% clear and multiple cells have the same value.
+      // To avoid confusion we prevent resorting when the direction does not change.
+      if (this.current === target && this.current.ariaSort === direction) {
+        return;
+      }
+
+      // Tablesort only supports a toggle for sorting, so we set the current direction to the opposite.
+      // After that tablesort uses the correct direction for sorting.
+      target.ariaSort = (direction === 'ascending') ? 'descending' : 'ascending';
+
+      if (this.current && this.current !== target) {
+        this.current.removeAttribute('aria-sort');
+      }
+
+      this.current = target;
+      this.sortTable(target);
+    };
+
+    // Assume first row is the header and attach a click handler to each.
+    for (let i = 0; i < firstRow.cells.length; i++) {
+      const cell = firstRow.cells[i] as HTMLTableCellElement;
+      cell.setAttribute('role', 'columnheader');
+      if (cell.getAttribute('data-sort-method') !== 'none') {
+
+        // Create dropdown toggle
+        const toggle = document.createElement('button');
+        toggle.classList.add('dropdown-toggle', 'dropdown-toggle-link');
+        toggle.dataset.bsToggle = 'dropdown';
+        toggle.dataset.sortingToggle = 'true';
+        toggle.type = 'button';
+        toggle.ariaExpanded = 'false';
+        toggle.textContent = cell.textContent;
+        const icon = new IconElement();
+        icon.identifier = 'empty-empty';
+        icon.size = Sizes.small;
+        const iconWrapper = document.createElement('div');
+        iconWrapper.appendChild(icon);
+        toggle.appendChild(iconWrapper);
+        cell.replaceChildren(toggle);
+
+        // Create dropdown menu
+        const dropdown = document.createElement('div');
+        dropdown.classList.add('dropdown-menu');
+
+        const buttonSortAscTitle = top.TYPO3.lang['labels.sorting.asc'] || 'Sort ascending';
+        const buttonSortAsc = document.createElement('button');
+        buttonSortAsc.classList.add('dropdown-item');
+        buttonSortAsc.type = 'button';
+        buttonSortAsc.title = buttonSortAscTitle;
+        buttonSortAsc.ariaLabel = buttonSortAscTitle;
+        buttonSortAsc.dataset.sortDirection = 'ascending';
+        buttonSortAsc.addEventListener('click', onClick, false);
+        const buttonSortAscColumnWrap = document.createElement('span');
+        buttonSortAscColumnWrap.classList.add('dropdown-item-columns');
+        buttonSortAsc.appendChild(buttonSortAscColumnWrap);
+        const buttonSortAscColumnIconWrap = document.createElement('span');
+        buttonSortAscColumnIconWrap.classList.add('dropdown-item-column', 'dropdown-item-column-icon', 'text-primary');
+        buttonSortAscColumnWrap.appendChild(buttonSortAscColumnIconWrap);
+        const buttonSortAscColumnIcon = new IconElement();
+        buttonSortAscColumnIcon.identifier = 'empty-empty';
+        buttonSortAscColumnIcon.size = Sizes.small;
+        buttonSortAscColumnIconWrap.appendChild(buttonSortAscColumnIcon);
+        const buttonSortAscColumnTitleWrap = document.createElement('span');
+        buttonSortAscColumnTitleWrap.classList.add('dropdown-item-column', 'dropdown-item-column-title');
+        buttonSortAscColumnTitleWrap.textContent = buttonSortAscTitle;
+        buttonSortAscColumnWrap.appendChild(buttonSortAscColumnTitleWrap);
+        dropdown.appendChild(buttonSortAsc);
+
+        const buttonSortDescTitle = top.TYPO3.lang['labels.sorting.desc'] || 'Sort descending';
+        const buttonSortDesc = document.createElement('button');
+        buttonSortDesc.classList.add('dropdown-item');
+        buttonSortDesc.type = 'button';
+        buttonSortDesc.title = buttonSortDescTitle;
+        buttonSortDesc.ariaLabel = buttonSortDescTitle;
+        buttonSortDesc.dataset.sortDirection = 'descending';
+        buttonSortDesc.addEventListener('click', onClick, false);
+        const buttonSortDescColumnWrap = document.createElement('span');
+        buttonSortDescColumnWrap.classList.add('dropdown-item-columns');
+        buttonSortDesc.appendChild(buttonSortDescColumnWrap);
+        const buttonSortDescColumnIconWrap = document.createElement('span');
+        buttonSortDescColumnIconWrap.classList.add('dropdown-item-column', 'dropdown-item-column-icon', 'text-primary');
+        buttonSortDescColumnWrap.appendChild(buttonSortDescColumnIconWrap);
+        const buttonSortDescColumnIcon = new IconElement();
+        buttonSortDescColumnIcon.identifier = 'empty-empty';
+        buttonSortDescColumnIcon.size = Sizes.small;
+        buttonSortDescColumnIconWrap.appendChild(buttonSortDescColumnIcon);
+        const buttonSortDescColumnTitleWrap = document.createElement('span');
+        buttonSortDescColumnTitleWrap.classList.add('dropdown-item-column', 'dropdown-item-column-title');
+        buttonSortDescColumnTitleWrap.textContent = buttonSortDescTitle;
+        buttonSortDescColumnWrap.appendChild(buttonSortDescColumnTitleWrap);
+        dropdown.appendChild(buttonSortDesc);
+
+        cell.appendChild(dropdown);
+
+        if (cell.getAttribute('data-sort-default') !== null) {
+          defaultSort = cell;
+        }
+      }
+    }
+
+    if (defaultSort) {
+      this.current = defaultSort;
+      this.sortTable(defaultSort);
+    }
+  }
+}
+
+export default class SortableTable {
+  constructor(table: HTMLTableElement) {
+    table.addEventListener('afterSort', (event: CustomEvent) => {
+      const table = (event.target as HTMLTableElement);
+      const buttons = table.tHead.querySelectorAll('.dropdown-toggle[data-sorting-toggle]');
+      buttons.forEach((button) => {
+        const iconWrap = button.querySelector(':scope > div');
+        iconWrap.classList.remove('text-primary');
+        const icon = button.querySelector('typo3-backend-icon');
+        icon.identifier = 'empty-empty';
+        icon.classList.remove('text-primary');
+      });
+
+      const menuIcons = table.tHead.querySelectorAll('.dropdown-toggle[data-sorting-toggle] + .dropdown-menu typo3-backend-icon');
+      menuIcons.forEach((menuIcon: IconElement) => {
+        menuIcon.identifier = 'empty-empty';
+      });
+
+      const sortingCell = table.tHead.querySelector('th[aria-sort]') as HTMLTableCellElement;
+      const sortingButton = sortingCell.querySelector('.dropdown-toggle[data-sorting-toggle]');
+      const sortingIconWrap = sortingButton.querySelector(':scope > div');
+      sortingIconWrap.classList.add('text-primary');
+      const sortingIcon = sortingButton.querySelector('typo3-backend-icon');
+      const sortingDropdown = sortingCell.querySelector('.dropdown-menu');
+
+      if (sortingCell.ariaSort === 'ascending') {
+        sortingIcon.identifier = 'actions-sort-amount-up';
+      } else {
+        sortingIcon.identifier = 'actions-sort-amount-down';
+      }
+
+      const sortingButtons = sortingDropdown.querySelectorAll('.dropdown-item');
+      sortingButtons.forEach((button: HTMLButtonElement) => {
+        const sortingButtonDirection = button.dataset.sortDirection;
+        const sortingButtonIcon = button.querySelector('typo3-backend-icon');
+        if (sortingButtonDirection === sortingCell.ariaSort) {
+          sortingButtonIcon.identifier = 'actions-dot';
+        } else {
+          sortingButtonIcon.identifier = 'empty-empty';
+        }
+      });
+    });
+
+    new TablesortWithButtons(table);
+  }
+}

package/backend/storage/abstract-client-storage.ts

@@ -0,0 +1,76 @@
+/*
+ * 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!
+ */
+
+/**
+ * Module: @typo3/backend/storage/abstract-client-storage
+ * @exports @typo3/backend/storage/abstract-client-storage
+ */
+export default abstract class AbstractClientStorage {
+  protected keyPrefix: string = 't3-';
+  protected storage: Storage = null;
+
+  public get(key: string): string {
+    if (this.storage === null) {
+      return null;
+    }
+    return this.storage.getItem(this.keyPrefix + key);
+  }
+
+  public getByPrefix(prefix: string): Record<string, string> {
+    if (this.storage === null) {
+      return {};
+    }
+    const entries = Object.entries(this.storage)
+      .filter((item: [string, string]) => item[0].startsWith(this.keyPrefix + prefix))
+      .map((item: [string, string]) => {
+        return [item[0].substring(this.keyPrefix.length), item[1]];
+      });
+
+    return Object.fromEntries(entries);
+  }
+
+  public set(key: string, value: string): void {
+    if (this.storage !== null) {
+      this.storage.setItem(this.keyPrefix + key, value);
+    }
+  }
+
+  public unset(key: string): void {
+    if (this.storage !== null) {
+      this.storage.removeItem(this.keyPrefix + key);
+    }
+  }
+
+  public unsetByPrefix(prefix: string): void {
+    if (this.storage === null) {
+      return;
+    }
+    prefix = this.keyPrefix + prefix;
+    Object.keys(this.storage)
+      .filter((key: string) => key.startsWith(prefix))
+      .forEach((key: string) => this.storage.removeItem(key));
+  }
+
+  public clear(): void {
+    if (this.storage !== null) {
+      this.storage.clear();
+    }
+  }
+
+  public isset(key: string): boolean {
+    if (this.storage === null) {
+      return false;
+    }
+    return this.get(key) !== null;
+  }
+}

package/backend/storage/browser-session.ts

@@ -0,0 +1,28 @@
+/*
+ * 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 AbstractClientStorage from './abstract-client-storage';
+
+/**
+ * Module: @typo3/backend/storage/browser-session
+ * Wrapper for sessionStorage
+ * @exports @typo3/backend/storage/browser-session
+ */
+class BrowserSession extends AbstractClientStorage {
+  public constructor() {
+    super();
+    this.storage = sessionStorage;
+  }
+}
+
+export default new BrowserSession();

package/backend/storage/client.ts

@@ -0,0 +1,28 @@
+/*
+ * 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 AbstractClientStorage from './abstract-client-storage';
+
+/**
+ * Module: @typo3/backend/storage/client
+ * Wrapper for localStorage
+ * @exports @typo3/backend/storage/client
+ */
+class Client extends AbstractClientStorage {
+  public constructor() {
+    super();
+    this.storage = localStorage;
+  }
+}
+
+export default new Client();

package/backend/storage/module-state-storage.ts

@@ -0,0 +1,118 @@
+/*
+ * 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!
+ */
+
+interface CurrentState {
+  identifier: string;
+  treeIdentifier: string|null;
+}
+
+export interface ModuleStateUpdateEvent {
+  state: CurrentState;
+  oldState: CurrentState;
+}
+
+/**
+ * Module State previous known as `fsMod` with the previous description:
+ *
+ * > Used in main modules with a frameset for submodules to keep the ID
+ * > between modules Typically that is set by something like this in a
+ * > Web>* sub module
+ *
+ * @exports @typo3/backend/storage/module-state-storage
+ */
+export class ModuleStateStorage {
+  private static readonly prefix = 't3-module-state-';
+
+  public static update(module: string, identifier: string|number): CurrentState
+  {
+    if (typeof identifier === 'number') {
+      identifier = identifier.toString(10);
+    } else if (typeof identifier !== 'string') {
+      throw new SyntaxError('identifier must be of type string');
+    }
+
+    const oldState = ModuleStateStorage.current(module);
+    const treeIdentifier = identifier === oldState.identifier ? oldState.treeIdentifier : null;
+    const state = { identifier, treeIdentifier };
+
+    ModuleStateStorage.commit(module, 'update', state);
+    return state;
+  }
+
+  public static updateWithTreeIdentifier(module: string, identifier: string|number, treeIdentifier: string|number): CurrentState
+  {
+    if (typeof identifier === 'number') {
+      identifier = identifier.toString(10);
+    } else if (typeof identifier !== 'string') {
+      throw new SyntaxError('identifier must be of type string');
+    }
+
+    if (typeof treeIdentifier === 'number') {
+      treeIdentifier = treeIdentifier.toString(10);
+    } else if (typeof treeIdentifier !== 'string') {
+      throw new SyntaxError('treeIdentifier must be of type string');
+    }
+
+    const state = { identifier, treeIdentifier };
+    ModuleStateStorage.commit(module, 'update-with-tree-identifier', state);
+    return state;
+  }
+
+  public static updateWithCurrentMount(module: string, identifier: string|number)
+  {
+    ModuleStateStorage.update(module, identifier);
+  }
+
+  public static current(module: string): CurrentState {
+    const state = {
+      ...ModuleStateStorage.getInitialState(),
+      ...(ModuleStateStorage.fetch(module) ?? {}),
+    };
+    return state;
+  }
+
+  public static purge(): void
+  {
+    Object.keys(sessionStorage)
+      .filter((key: string) => key.startsWith(ModuleStateStorage.prefix))
+      .forEach((key: string) => sessionStorage.removeItem(key));
+  }
+
+  private static fetch(module: string): CurrentState|null {
+    const data = sessionStorage.getItem(ModuleStateStorage.prefix + module);
+    if (data === null) {
+      return null;
+    }
+    return JSON.parse(data);
+  }
+
+  private static async commit(module: string, mode: string, state: CurrentState) {
+    const oldState = ModuleStateStorage.current(module);
+    sessionStorage.setItem(ModuleStateStorage.prefix + module, JSON.stringify(state));
+
+    top.document.dispatchEvent(new CustomEvent<ModuleStateUpdateEvent>('typo3:module-state-storage:' + mode + ':' + module, {
+      detail: {
+        state,
+        oldState,
+      }
+    }));
+  }
+
+  private static getInitialState(): CurrentState
+  {
+    return { identifier: '', treeIdentifier: null };
+  }
+}
+
+// exposing `ModuleStateStorage`
+window.ModuleStateStorage = ModuleStateStorage;