typo3-typescript-sources 13.4.20

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

@@ -0,0 +1,172 @@
+/*
+ * 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, nothing, 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';
+import Severity from '@typo3/backend/severity';
+import { SeverityEnum } from '@typo3/backend/enum/severity';
+
+/**
+ * Module: @typo3/backend/element/progress-bar-element
+ * @internal
+ *
+ * @example
+ * <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
+ * + `severity` defines the visual severity of the progress bar, ignored in indeterminate state
+ * + `label` is an optional label describing the progress bar
+ */
+@customElement('typo3-backend-progress-bar')
+export class ProgressBarElement extends LitElement {
+  static override styles = css`
+    @keyframes progress-indeterminate {
+      0% {
+        inset-inline-start: -33%;
+      }
+
+      100% {
+        inset-inline-start: 100%;
+      }
+    }
+
+    :host {
+      --progress-bar-height: 4px;
+      --progress-bar-color-primary: var(--typo3-state-primary-border-color);
+      --progress-bar-color-success: var(--typo3-state-success-border-color);
+      --progress-bar-color-warning: var(--typo3-state-warning-border-color);
+      --progress-bar-color-danger: var(--typo3-state-danger-border-color);
+      --progress-bar-color-info: var(--typo3-state-info-border-color);
+      --progress-bar-color: var(--progress-bar-color-primary);
+      --progress-track-color: light-dark(var(--token-color-neutral-20), var(--token-color-neutral-80));
+      --progress-border-radius: var(--typo3-component-border-radius);
+      display: block;
+      width: 100%;
+      border-radius: var(--progress-border-radius);
+    }
+
+    .progress {
+      position: relative;
+      overflow: hidden;
+      height: var(--progress-bar-height);
+      border-radius: var(--progress-border-radius);
+    }
+
+    .value {
+      display: block;
+      width: 1px !important;
+      height: 1px !important;
+      padding: 0 !important;
+      margin: -1px !important;
+      overflow: hidden !important;
+      clip: rect(0, 0, 0, 0) !important;
+      white-space: nowrap !important;
+      border: 0 !important;
+    }
+
+    .track {
+      background: var(--progress-track-color);
+      inset: 0;
+    }
+
+    .bar {
+      background: var(--progress-bar-color);
+      transition: width 0.5s ease-in-out;
+
+      &.bar-success {
+        --progress-bar-color: var(--progress-bar-color-success);
+      }
+
+      &.bar-warning {
+        --progress-bar-color: var(--progress-bar-color-warning);
+      }
+
+      &.bar-danger {
+        --progress-bar-color: var(--progress-bar-color-danger);
+      }
+
+      &.bar-info {
+        --progress-bar-color: var(--progress-bar-color-info);
+      }
+
+      &.indeterminate {
+        animation-name: progress-indeterminate;
+        animation-duration: 3s;
+        animation-iteration-count: infinite;
+        animation-timing-function: linear;
+        width: 33%;
+        background-image: linear-gradient(to right, var(--progress-track-color) 0%, transparent 50%, var(--progress-track-color) 100%)
+      }
+    }
+
+    .track,
+    .bar {
+      position: absolute;
+      height: var(--progress-bar-height);
+    }
+
+    .label {
+      margin-top: .5rem;
+    }
+  `;
+
+  @property({ type: Number, reflect: true }) value: number|undefined = undefined;
+  @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;
+
+  protected override render(): TemplateResult {
+    const labelIdentifier = 'progress-label-' + (Math.random() + 1).toString(36).substring(2);
+    const isLabelDefined = this.label !== undefined && this.label;
+    const isIndeterminate = isNaN(this.value);
+    const classes = classMap({
+      bar: true,
+      ['bar-' + Severity.getCssClass(this.severity)]: !isIndeterminate && this.severity !== undefined,
+      indeterminate: isIndeterminate,
+    });
+    const styles = isIndeterminate ? nothing : styleMap({
+      width: (this.clamp(this.value, 0, this.max) / this.max * 100).toString() + '%',
+    });
+
+    return html`
+      <div class="progress-wrapper">
+        <div
+          role="progressbar"
+          class="progress"
+          aria-valuenow=${!isIndeterminate ? this.value : nothing}
+          aria-valuemin="0"
+          aria-valuemax=${this.max}
+          aria-describedby=${isLabelDefined ? labelIdentifier : nothing}
+        >
+          <div class="track"></div>
+          <div class=${classes} style=${styles}>
+            ${!isIndeterminate ? html`<span class="value">${this.value}%</span>` : nothing}
+          </div>
+        </div>
+        ${isLabelDefined ? html`<div class="label" id=${labelIdentifier}>${this.label}</div>` : nothing}
+      </div>
+    `;
+  }
+
+  private clamp(value: number, min: number, max: number): number {
+    return Math.min(max, Math.max(min, value));
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-progress-bar': ProgressBarElement;
+  }
+}

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

@@ -0,0 +1,119 @@
+/*
+ * 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, nothing, type TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators';
+import { styleMap } from 'lit/directives/style-map';
+import { lll } from '@typo3/core/lit-helper';
+
+export type Stage = string;
+
+/**
+ * Module: @typo3/backend/element/progress-track-element
+ * @internal
+ *
+ * @example
+ * <typo3-backend-progress-tracker stages="[&quot;Stage 1&quot;,&quot;Stage 2&quot;,&quot;Stage 3&quot;,&quot;Stage 4&quot;]"></typo3-backend-progress-tracker>
+ */
+@customElement('typo3-backend-progress-tracker')
+export class ProgressTrackerElement extends LitElement {
+  static override styles = css`
+    :host {
+      --progress-tracker-margin: var(--typo3-spacing);
+      --progress-tracker-stage: 0;
+      --progress-tracker-stages: 0;
+      --progress-tracker-gap: .25rem;
+      --progress-tracker-bar-height: 6px;
+      --progress-tracker-bar-border-radius: 3px;
+      --progress-tracker-bar-bg: light-dark(var(--token-color-neutral-20), var(--token-color-neutral-80));
+      --progress-tracker-bar-progress-bg: var(--typo3-state-primary-border-color);
+
+      display: block;
+      width: 100%;
+      margin-bottom: var(--progress-tracker-margin);
+    }
+
+    .tracker {
+      position: relative;
+      display: grid;
+      gap: var(--progress-tracker-gap);
+      grid-template-columns: auto min-content;
+      grid-template-areas:
+        "stage step"
+        "bar   bar";
+    }
+
+    .tracker-stage {
+      grid-area: stage;
+    }
+
+    .tracker-step {
+      grid-area: step;
+      white-space: nowrap;
+    }
+
+    .tracker-bar {
+      grid-area: bar;
+      position: relative;
+      width: 100%;
+      height: var(--progress-tracker-bar-height);
+      border-radius: var(--progress-tracker-bar-border-radius);
+      background-color: var(--progress-tracker-bar-bg);
+    }
+
+    .tracker-bar:after {
+      content: '';
+      height: 100%;
+      width: calc(100% / var(--progress-tracker-stages) * var(--progress-tracker-stage));
+      display: block;
+      border-radius: inherit;
+      background-color: var(--progress-tracker-bar-progress-bg);
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      .tracker-bar:after {
+        transition: width 0.5s ease-in-out;
+      }
+    }
+  `;
+
+  @property({ attribute: 'stages', type: Array }) stages: Stage[] = [];
+  @property({ attribute: 'active', type: Number, reflect: true }) activeStage: number = 0;
+
+  protected override render(): TemplateResult | symbol {
+    if (this.stages.length < 2) {
+      return nothing;
+    }
+    this.activeStage = Math.min(Math.max(this.activeStage, this.stages.length > 0 ? 1 : 0), this.stages.length);
+    const currentStage = this.stages[this.activeStage - 1];
+
+    const styles = styleMap({
+      '--progress-tracker-stage': `${this.activeStage}`,
+      '--progress-tracker-stages': `${this.stages.length}`,
+    });
+
+    return html`
+      <div class="tracker" role="group" aria-describedby="tracker-details" style=${styles}>
+        <div class="tracker-stage" id="tracker-stage" aria-live="polite">${currentStage}</div>
+        <div class="tracker-step" id="tracker-details">${lll('progressTracker.steps', this.activeStage, this.stages.length) || `Step ${this.activeStage} of ${this.stages.length}`}</div>
+        <div class="tracker-bar" id="tracker-bar" aria-hidden="true"></div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-progress-tracker': ProgressTrackerElement;
+  }
+}

package/backend/element/pseudo-button.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 { property } from 'lit/decorators';
+import { html, css, LitElement, type TemplateResult } from 'lit';
+import { KeyTypesEnum } from '@typo3/backend/enum/key-types';
+
+/**
+ * @internal
+ */
+export abstract class PseudoButtonLitElement extends LitElement {
+  static override styles = [
+    css`:host { cursor: pointer; appearance: button; }`
+  ];
+
+  // eslint-disable-next-line lit/no-native-attributes
+  @property({ type: String, reflect: true }) override role: string = 'button';
+  @property({ type: String, reflect: true }) override tabIndex: number = 0;
+
+  public constructor() {
+    super();
+    this.addEventListener('click', (e: Event): void => {
+      e.preventDefault();
+      this.buttonActivated(e);
+    });
+    this.addEventListener('keydown', (e: KeyboardEvent): void => {
+      if (e.key === KeyTypesEnum.SPACE) {
+        e.preventDefault();
+      }
+      if (e.key === KeyTypesEnum.ENTER) {
+        e.preventDefault();
+        this.buttonActivated(e);
+      }
+    });
+    this.addEventListener('keyup', (e: KeyboardEvent): void => {
+      if (e.key === KeyTypesEnum.SPACE) {
+        e.preventDefault();
+        this.buttonActivated(e);
+      }
+    });
+  }
+
+  protected override render(): TemplateResult {
+    return html`<slot></slot>`;
+  }
+
+  protected abstract buttonActivated(e: Event): void | Promise<void>;
+}

package/backend/element/spinner-element.ts

@@ -0,0 +1,51 @@
+/*
+ * 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, LitElement, type TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators';
+import { Sizes } from '../enum/icon-types';
+import { IconStyles } from '@typo3/backend/icons';
+
+/**
+ * Module: @typo3/backend/element/spinner-element
+ *
+ * @example
+ * <typo3-backend-spinner size="small"></typo3-backend-spinner>
+ * + attribute size can be one of small, default, large or mega
+ */
+@customElement('typo3-backend-spinner')
+export class SpinnerElement extends LitElement {
+  static override styles = IconStyles.getStyles();
+
+  @property({ type: String }) size: Sizes = Sizes.default;
+
+  protected override render(): TemplateResult {
+    return html`
+      <span class="icon icon-size-${this.size} icon-state-default icon-spin">
+        <span class="icon-markup">
+          <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 16 16">
+            <g fill="currentColor">
+              <path d="M8 15c-3.86 0-7-3.141-7-7 0-3.86 3.14-7 7-7 3.859 0 7 3.14 7 7 0 3.859-3.141 7-7 7zM8 3C5.243 3 3 5.243 3 8s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" opacity=".3"/><path d="M14 9a1 1 0 0 1-1-1c0-2.757-2.243-5-5-5a1 1 0 0 1 0-2c3.859 0 7 3.14 7 7a1 1 0 0 1-1 1z"/>
+            </g>
+          </svg>
+        </span>
+      </span>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-spinner': SpinnerElement;
+  }
+}

package/backend/element/thumbnail-element.ts

@@ -0,0 +1,80 @@
+/*
+ * 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, type TemplateResult } from 'lit';
+import { Task } from '@lit/task';
+import '@typo3/backend/element/spinner-element';
+import '@typo3/backend/element/icon-element';
+
+export const ThumbnailSize = {
+  default: 'default',
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+} as const;
+type ThumbnailSizeType = typeof ThumbnailSize[keyof typeof ThumbnailSize];
+
+@customElement('typo3-backend-thumbnail')
+export class ThumbnailElement extends LitElement {
+  @property({ type: String, reflect: true }) url: string;
+  @property({ type: String, reflect: true }) size: ThumbnailSizeType = ThumbnailSize.default;
+  @property({ type: Boolean, reflect: true }) keepAspectRatio: boolean = false;
+  @property({ type: Number, reflect: true }) width: number;
+  @property({ type: Number, reflect: true }) height: number;
+
+  private readonly thumbnailTask = new Task(this, {
+    task: async ([url, size, keepAspectRatio, width, height]: [string, ThumbnailSizeType, boolean, number, number]): Promise<TemplateResult> => {
+      const thumbnailUrl = new URL(url, window.origin);
+      thumbnailUrl.searchParams.set('size', size);
+      thumbnailUrl.searchParams.set('keepAspectRatio', keepAspectRatio ? '1' : '0');
+
+      const img = new Image();
+      img.src = thumbnailUrl.toString();
+
+      if (width > 0) {
+        img.width = width;
+      }
+
+      if (height > 0 && !keepAspectRatio) {
+        // Only set height if we do not want to keep the aspect ratio (image is being cropped)
+        img.height = height;
+      }
+
+      await new Promise<void>(((resolve, reject) => {
+        img.onload = () => resolve();
+        img.onerror = () => reject();
+      }));
+      return html`${img}`;
+    },
+    args: () => [this.url, this.size, this.keepAspectRatio, this.width, this.height]
+  });
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    return this;
+  }
+
+  protected override render(): TemplateResult | symbol {
+    return this.thumbnailTask.render({
+      pending: () => html`<typo3-backend-spinner size=${this.size}></typo3-backend-size>`,
+      complete: (markup) => html`${markup}`,
+      error: () => html`<typo3-backend-icon identifier="default-not-found" size="small"></typo3-backend-icon>`
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-thumbnail': ThumbnailElement;
+  }
+}

package/backend/element-browser.ts

@@ -0,0 +1,182 @@
+/*
+ * 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 { MessageUtility } from '@typo3/backend/utility/message-utility';
+import DocumentService from '@typo3/core/document-service';
+import Modal from '@typo3/backend/modal';
+
+interface RTESettings {
+  parameters: string;
+  configuration: string;
+}
+
+interface InlineSettings {
+  objectId: string;
+}
+
+declare global {
+  interface Document {
+    list_frame: Window;
+  }
+  interface Window {
+    editform: any;
+    content: any;
+  }
+}
+
+/**
+ * Module: @typo3/backend/element-browser
+ * @exports @typo3/backend/element-browser
+ * ElementBrowser communication with parent windows
+ */
+class ElementBrowser {
+  private opener: Window = null;
+  private fieldReference: string = '';
+  private readonly rte: RTESettings = {
+    parameters: '',
+    configuration: '',
+  };
+  private readonly irre: InlineSettings = {
+    objectId: '',
+  };
+
+  constructor() {
+    DocumentService.ready().then((): void => {
+      const data = document.body.dataset;
+      this.fieldReference = data.fieldReference;
+      this.rte.parameters = data.rteParameters;
+      this.rte.configuration = data.rteConfiguration;
+      this.irre.objectId = data.irreObjectId;
+    });
+  }
+
+  /**
+   * Returns the parent document object
+   */
+  public getParent(): Window | null {
+    const isInModalFrame = typeof window.frames !== 'undefined'
+      && typeof window.frames.frameElement !== 'undefined'
+      && window.frames.frameElement.classList.contains('t3js-modal-iframe');
+    const otherModalFrames = Array.from(top.frames || []).filter((item: Window) => {
+      try {
+        return typeof item.frameElement !== 'undefined'
+          && item.frameElement.classList.contains('t3js-modal-iframe')
+          && item.frameElement !== window.frames.frameElement;
+      } catch {
+        // browser extensions might inject their own frames, resulting in
+        // `DOMException: Permission denied to access property "document" on cross-origin object`
+        return false;
+      }
+    });
+
+    if (this.opener === null) {
+      // in case the current modal frame was triggered by another modal frame
+      // (which is NOT the parent element in the DOM)
+      if (isInModalFrame && otherModalFrames.length > 0) {
+        this.opener = otherModalFrames.pop();
+      } else if (
+        typeof window.parent !== 'undefined' &&
+        typeof window.parent.document.list_frame !== 'undefined' &&
+        window.parent.document.list_frame.parent.document.querySelector('.t3js-modal-iframe') !== null
+      ) {
+        this.opener = window.parent.document.list_frame;
+      } else if (
+        typeof window.parent !== 'undefined' &&
+        typeof window.parent.frames.list_frame !== 'undefined' &&
+        window.parent.frames.list_frame.parent.document.querySelector('.t3js-modal-iframe') !== null
+      ) {
+        this.opener = window.parent.frames.list_frame;
+      } else if (
+        typeof window.frames !== 'undefined' &&
+        typeof window.frames.frameElement !== 'undefined' &&
+        window.frames.frameElement !== null &&
+        window.frames.frameElement.classList.contains('t3js-modal-iframe')
+      ) {
+        this.opener = (<HTMLFrameElement>window.frames.frameElement).contentWindow.parent;
+      } else if (window.opener) {
+        this.opener = window.opener;
+      }
+    }
+
+    return this.opener;
+  }
+
+  public insertElement(
+    table: string,
+    uid: string,
+    title: string,
+    value: string,
+    close: boolean,
+  ): boolean {
+    // Call a check function in the opener window (e.g. for uniqueness handling):
+    if (this.irre.objectId) {
+      if (this.getParent()) {
+        const message = {
+          actionName: 'typo3:foreignRelation:insert',
+          objectGroup: this.irre.objectId,
+          table: table,
+          uid: uid,
+        };
+        MessageUtility.send(message, this.getParent());
+      } else {
+        alert('Error - reference to main window is not set properly!');
+        this.focusOpenerAndClose();
+      }
+
+      if (close) {
+        // // > After postMessage() is called, the MessageEvent will be dispatched only after all pending execution contexts have finished.
+        // // See: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#notes
+        setTimeout(() => this.focusOpenerAndClose(), 0);
+      }
+
+      return true;
+    }
+
+    if (this.fieldReference && !this.rte.parameters && !this.rte.configuration) {
+      this.addElement(title, value ? value : table + '_' + uid, close);
+    }
+    return false;
+  }
+
+  public focusOpenerAndClose = (): void => {
+    if (this.getParent()) {
+      this.getParent().focus();
+    }
+    Modal.dismiss();
+    close();
+  };
+
+
+  private addElement(label: string, value: string, close: boolean): void {
+    if (this.getParent()) {
+      const message = {
+        actionName: 'typo3:elementBrowser:elementAdded',
+        fieldName: this.fieldReference,
+        value: value,
+        label: label
+      };
+      MessageUtility.send(message, this.getParent());
+
+      if (close) {
+        // > After postMessage() is called, the MessageEvent will be dispatched only after all pending execution contexts have finished.
+        // See: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#notes
+        setTimeout(() => this.focusOpenerAndClose(), 0);
+      }
+    } else {
+      alert('Error - reference to main window is not set properly!');
+      this.focusOpenerAndClose();
+    }
+  }
+}
+
+export default new ElementBrowser();

package/backend/enum/data-transfer-types.ts

@@ -0,0 +1,21 @@
+/*
+ * 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!
+ */
+
+export enum DataTransferTypes {
+  treenode = 'application/x-typo3-treenode',
+  newTreenode = 'application/x-typo3-new-treenode+json',
+  pages = 'application/x-typo3-record-pages+json',
+  falResources = 'application/x-typo3-fal-resources+json',
+  dragTooltip = 'application/x-typo3-drag-tooltip+json',
+  content = 'application/x-typo3-content+json',
+}