typo3-typescript-sources 13.4.20

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

@@ -0,0 +1,306 @@
+/*
+ * 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, css, LitElement, type TemplateResult, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators';
+import '@typo3/backend/element/icon-element';
+import AjaxDataHandler from '../ajax-data-handler';
+
+@customElement('typo3-backend-editable-page-title')
+export class EditablePageTitle extends LitElement {
+  static override styles = css`
+    :host {
+      display: block;
+      --input-border-color: #bebebe;
+      --input-hover-border-color: #bebebe;
+      --input-focus-border-color: #bebebe;
+      --button-border-radius: 2px;
+      --button-color: inherit;
+      --button-bg: transparent;
+      --button-border-color: transparent;
+      --button-hover-color: inherit;
+      --button-hover-bg: #cacaca;
+      --button-hover-border-color: #bebebe;
+      --button-focus-color: inherit;
+      --button-focus-bg: #cacaca;
+      --button-focus-border-color: #bebebe;
+    }
+
+    h1 {
+      display: block;
+      font-weight: inherit;
+      font-size: inherit;
+      font-family: inherit;
+      line-height: inherit;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      padding: 1px 0;
+      margin: 0;
+    }
+
+    input {
+      outline: none;
+      background: transparent;
+      font-weight: inherit;
+      font-size: inherit;
+      font-family: inherit;
+      line-height: inherit;
+      padding: 0;
+      border: 0;
+      border-top: 1px solid transparent;
+      border-bottom: 1px dashed var(--input-border-color);
+      margin: 0;
+      width: 100%;
+      outline-offset: 0;
+    }
+
+    input:hover {
+      --input-border-color: var(--input-hover-border-color);
+    }
+
+    input:focus {
+      --input-border-color: var(--input-focus-border-color);
+    }
+
+    input:focus-visible {
+      outline: .25rem solid color-mix(in srgb, var(--input-border-color), transparent 25%);
+    }
+
+    .wrapper {
+      position: relative;
+      margin: -1px 0;
+    }
+
+    div.wrapper {
+      padding-inline-end: 1.5em;
+    }
+
+    form.wrapper {
+      padding-inline-end: 2.5em;
+    }
+
+    button {
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: inherit;
+      line-height: inherit;
+      border: 0;
+      padding: 0;
+      height: 100%;
+      width: 1em;
+      position: absolute;
+      top: 0;
+      border-radius: var(--button-border-radius);
+      overflow: hidden;
+      outline: none;
+      color: var(--button-color);
+      background: var(--button-bg);
+      border: 1px solid var(--button-border-color);
+      opacity: .3;
+      outline-offset: 0;
+      transition: all .2s ease-in-out;
+    }
+
+    button:hover {
+      opacity: 1;
+      --button-color: var(--button-hover-color);
+      --button-bg: var(--button-hover-bg);
+      --button-border-color: var(--button-hover-border-color);
+    }
+
+    button:focus {
+      opacity: 1;
+      --button-color: var(--button-focus-color);
+      --button-bg: var(--button-focus-bg);
+      --button-border-color: var(--button-focus-border-color);
+    }
+
+    button:focus-visible {
+      outline: .25rem solid color-mix(in srgb, var(--button-border-color), transparent 25%);
+    }
+
+    button[data-action="edit"] {
+      inset-inline-end: 0;
+    }
+
+    button[data-action="save"] {
+      inset-inline-end: calc(1em + 2px);
+    }
+
+    button[data-action="close"] {
+      inset-inline-end: 0;
+    }
+
+    .screen-reader {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0,0,0,0);
+      white-space: nowrap;
+      border: 0
+    }
+    `;
+  @property({ type: String }) pageTitle: string = '';
+  @property({ type: Number }) pageId: number = 0;
+  @property({ type: Number }) localizedPageId: number = 0;
+  @property({ type: Boolean }) editable: boolean = false;
+  @state() _isEditing: boolean = false;
+  @state() _isSubmitting: boolean = false;
+
+  protected labels: Record<string, string> = {
+    input: TYPO3?.lang?.['editablePageTitle.input.field.label'] || 'Field',
+    edit: TYPO3?.lang?.['editablePageTitle.button.edit.label'] || 'Edit',
+    save: TYPO3?.lang?.['editablePageTitle.button.save.label'] || 'Save',
+    cancel: TYPO3?.lang?.['editablePageTitle.button.cancel.label'] || 'Cancel',
+  };
+
+  async startEditing(): Promise<void> {
+    if (this.isEditable()) {
+      this._isEditing = true;
+      await this.updateComplete;
+      this.shadowRoot.querySelector('input')?.focus();
+    }
+  }
+
+  protected override render(): TemplateResult | symbol {
+    if (this.pageTitle === '') {
+      return nothing;
+    }
+
+    if (!this.isEditable()) {
+      return html`<div class="wrapper"><h1>${this.pageTitle}</h1></div>`;
+    }
+
+    let content;
+    if (!this._isEditing) {
+      content = html`
+        <div class="wrapper">
+          <h1 @dblclick="${(): void => { this.startEditing(); }}">${this.pageTitle}</h1>
+          ${this.composeEditButton()}
+        </div>`;
+    } else {
+      content = this.composeEditForm();
+    }
+
+    return content;
+  }
+
+  private isEditable(): boolean {
+    return this.editable && this.pageId > 0;
+  }
+
+  private endEditing(): void {
+    if (this.isEditable()) {
+      this._isEditing = false;
+    }
+  }
+
+  private updatePageTitle(e: SubmitEvent): void {
+    e.preventDefault();
+
+    const formData = new FormData(e.target as HTMLFormElement);
+    const submittedData = Object.fromEntries(formData);
+    const newPageTitle = submittedData.newPageTitle.toString();
+
+    if (this.pageTitle === newPageTitle) {
+      // Page title didn't change, no need to update anything
+      this.endEditing();
+      return;
+    }
+
+    this._isSubmitting = true;
+
+    let recordUid = this.pageId;
+    if (this.localizedPageId > 0) {
+      recordUid = this.localizedPageId;
+    }
+
+    const parameters = {
+      data: {
+        pages: {
+          [recordUid]: {
+            title: newPageTitle
+          }
+        }
+      }
+    };
+
+    AjaxDataHandler.process(parameters).then((): void => {
+      this.pageTitle = newPageTitle;
+      top.document.dispatchEvent(new CustomEvent('typo3:pagetree:refresh'));
+    }).finally((): void => {
+      this.endEditing();
+      this._isSubmitting = false;
+    });
+  }
+
+  private composeEditButton(): TemplateResult {
+    return html`
+      <button
+        data-action="edit"
+        type="button"
+        title="${this.labels.edit}"
+        @click="${(): void => { this.startEditing(); }}"
+      >
+        <typo3-backend-icon identifier="actions-open" size="small"></typo3-backend-icon>
+        <span class="screen-reader">${this.labels.edit}</span>
+      </button>`;
+  }
+
+  private composeEditForm(): TemplateResult {
+    return html`
+      <form class="wrapper" @submit="${ this.updatePageTitle }">
+        <label class="screen-reader" for="input">${this.labels.input}</label>
+        <input
+          autocomplete="off"
+          id="input"
+          name="newPageTitle"
+          required
+          value="${this.pageTitle}"
+          ?disabled="${this._isSubmitting}"
+          @keydown="${(e: KeyboardEvent): void => { if (e.key === 'Escape') { this.endEditing(); } }}"
+        >
+        <button
+          data-action="save"
+          type="submit"
+          title="${this.labels.save}"
+          ?disabled="${this._isSubmitting}"
+        >
+          <typo3-backend-icon identifier="actions-check" size="small"></typo3-backend-icon>
+          <span class="screen-reader">${this.labels.save}</span>
+        </button>
+        <button
+          data-action="close"
+          type="button"
+          title="${this.labels.cancel}"
+          ?disabled="${this._isSubmitting}"
+          @click="${(): void => { this.endEditing(); }}"
+        >
+          <typo3-backend-icon identifier="actions-close" size="small"></typo3-backend-icon>
+          <span class="screen-reader">${this.labels.cancel}</span>
+        </button>
+      </form>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-editable-page-title': EditablePageTitle;
+  }
+}

package/backend/element/icon-element.ts

@@ -0,0 +1,84 @@
+/*
+ * 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, nothing } from 'lit';
+import { Task } from '@lit/task';
+import { customElement, property } from 'lit/decorators';
+import { unsafeHTML } from 'lit/directives/unsafe-html';
+import { Sizes, States, MarkupIdentifiers } from '../enum/icon-types';
+import Icons, { IconStyles } from '../icons';
+import '@typo3/backend/element/spinner-element';
+
+/**
+ * Module: @typo3/backend/element/icon-element
+ *
+ * @example
+ * <typo3-backend-icon identifier="data-view-page" size="small"></typo3-backend-icon>
+ */
+@customElement('typo3-backend-icon')
+export class IconElement extends LitElement {
+  static override styles = IconStyles.getStyles();
+
+  @property({ type: String, reflect: true }) identifier: string;
+  @property({ type: String, reflect: true }) size: Sizes = Sizes.default;
+  @property({ type: String }) state: States = States.default;
+  @property({ type: String }) overlay: string = null;
+  @property({ type: String }) markup: MarkupIdentifiers = MarkupIdentifiers.inline;
+
+  /**
+   * @internal Usage of `raw` attribute is discouraged due to security implications.
+   *
+   * The `raw` attribute value will be rendered unescaped into DOM as raw html (.innerHTML = raw).
+   * That means it is the responsibility of the callee to ensure the HTML string does not contain
+   * user supplied strings.
+   * This attribute should therefore only be used to preserve backwards compatibility,
+   * and must not be used in new code or with user supplied strings.
+   * Use `identifier` attribute if ever possible instead.
+   */
+  @property({ type: String }) raw?: string = null;
+
+  private readonly iconTask = new Task(this, {
+    task: async ([identifier, size, overlay, state, markup]: [string, Sizes, States, string, MarkupIdentifiers], { signal }): Promise<string> => {
+      return await Icons.getIcon(identifier, size, overlay, state, markup, signal);
+    },
+    args: () => [this.identifier, this.size, this.overlay, this.state, this.markup]
+  });
+
+  protected override render(): TemplateResult | symbol {
+    if (this.raw) {
+      return html`${unsafeHTML(this.raw)}`;
+    }
+
+    if (!this.identifier) {
+      return nothing;
+    }
+
+    return this.iconTask.render({
+      pending: () => html`<typo3-backend-spinner size=${this.size}></typo3-backend-size>`,
+      complete: (markup) => html`${unsafeHTML(markup)}`,
+      error: () => html`
+        <span class="t3js-icon icon icon-size-${this.size} icon-state-${this.state} icon-default-not-found" data-identifier="default-not-found" aria-hidden="true">
+	        <span class="icon-markup">
+            <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 16 16"><g><path fill="#CD201F" d="m11 12 3-2v6H2v-6l3 2 3-2 3 2z"/><path fill="#212121" d="m8 10.3 2.86 1.91.14.09.14-.09 2.61-1.74v5.28H2.25v-5.28l2.61 1.74.14.09.14-.09L8 10.3m6-.3-3 2-3-2-3 2-3-2v6h12v-6z" opacity=".2"/><path fill="#CD201F" d="M14 4v4l-3 2-3-2-3 2-3-2V0h8l4 4z"/><path fill="#212121" d="M13.75 7.87 11 9.7 8.14 7.79 8 7.7l-.14.09L5 9.7 2.25 7.87V.25H10V0H2v8l3 2 3-2 3 2 3-2V4h-.25z" opacity=".2"/><path fill="#FFF" d="M14 4h-4V0l4 4z" opacity=".3"/><path fill="#212121" d="m14 8-4-4h4v4z" opacity=".3"/></g></svg>
+	        </span>
+        </span>
+      `
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-icon': IconElement;
+  }
+}

package/backend/element/immediate-action-element.ts

@@ -0,0 +1,89 @@
+/*
+ * 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 Utility from '@typo3/backend/utility';
+import { EventDispatcher } from '@typo3/backend/event/event-dispatcher';
+
+/**
+ * Module: @typo3/backend/element/immediate-action-element
+ *
+ * @example
+ * <typo3-immediate-action action="TYPO3.ModuleMenu.App.refreshMenu"></typo3-immediate-action>
+ *
+ * This is based on W3C custom elements ("web components") specification, see
+ * https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
+ */
+export class ImmediateActionElement extends HTMLElement {
+  private action: string;
+  private args: any[] = [];
+
+  /**
+   * Observed attributes handled by `attributeChangedCallback`.
+   */
+  public static get observedAttributes(): string[] {
+    return ['action', 'args', 'args-list'];
+  }
+
+  private static async getDelegate(action: string): Promise<(...args: any[]) => void> {
+    switch (action) {
+      case 'TYPO3.ModuleMenu.App.refreshMenu':
+        const { default: moduleMenuApp } = await import('@typo3/backend/module-menu');
+        return moduleMenuApp.App.refreshMenu.bind(moduleMenuApp.App);
+      case 'TYPO3.Backend.Topbar.refresh':
+        const { default: viewportObject } = await import('@typo3/backend/viewport');
+        return viewportObject.Topbar.refresh.bind(viewportObject.Topbar);
+      case 'TYPO3.WindowManager.localOpen':
+        const { default: windowManager } = await import('@typo3/backend/window-manager');
+        return windowManager.localOpen.bind(windowManager);
+      case 'TYPO3.Backend.Storage.ModuleStateStorage.update':
+        return (await import('@typo3/backend/storage/module-state-storage')).ModuleStateStorage.update;
+      case 'TYPO3.Backend.Storage.ModuleStateStorage.updateWithCurrentMount':
+        return (await import('@typo3/backend/storage/module-state-storage')).ModuleStateStorage.updateWithCurrentMount;
+      case 'TYPO3.Backend.Event.EventDispatcher.dispatchCustomEvent':
+        return EventDispatcher.dispatchCustomEvent;
+      default:
+        throw Error('Unknown action "' + action + '"');
+    }
+  }
+
+  /**
+   * Custom element life-cycle callback initializing attributes.
+   */
+  public attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
+    if (name === 'action') {
+      this.action = newValue;
+    } else if (name === 'args') {
+      // `&quot;` is the only literal of a PHP `json_encode` that needs to be substituted
+      // all other payload values are expected to be serialized to unicode literals
+      const json = newValue.replace(/&quot;/g, '"');
+      const args = JSON.parse(json);
+      this.args = args instanceof Array ? Utility.trimItems(args) : [];
+    } else if (name === 'args-list') {
+      const args = newValue.split(',');
+      this.args = Utility.trimItems(args);
+    }
+  }
+
+  /**
+   * Custom element life-cycle callback triggered when element
+   * becomes available in document ("connected to DOM").
+   */
+  public connectedCallback(): void {
+    if (!this.action) {
+      throw new Error('Missing mandatory action attribute');
+    }
+    ImmediateActionElement.getDelegate(this.action).then((callback): void => callback(...this.args));
+  }
+}
+
+window.customElements.define('typo3-immediate-action', ImmediateActionElement);

package/backend/element/pagination.ts

@@ -0,0 +1,59 @@
+/*
+ * 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';
+import { html, LitElement, type TemplateResult } from 'lit';
+import { range } from 'lit/directives/range';
+import { map } from 'lit/directives/map';
+import { classMap } from 'lit/directives/class-map';
+
+@customElement('typo3-backend-pagination')
+export class PaginationElement extends LitElement {
+  @property({ type: Object })
+  public paging: Record<string, number> | null = null;
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    // @todo Switch to Shadow DOM once Bootstrap CSS style can be applied correctly
+    return this;
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <ul class="pagination">
+        <li class=${classMap({ 'page-item': true, disabled: this.paging.currentPage === 1 })}>
+          <button type="button" class="page-link" data-action="previous" ?disabled=${this.paging.currentPage === 1}>
+            <typo3-backend-icon identifier="actions-view-paging-previous" size="small"></typo3-backend-icon>
+          </button>
+        </li>
+        ${map(range(1, this.paging.totalPages + 1), (page) => html`
+          <li class=${classMap({ 'page-item': true, active: this.paging.currentPage === page })}>
+            <button type="button" class="page-link" data-action="page" data-page=${page}>
+              <span>${page}</span>
+            </button>
+          </li>
+        `)}
+        <li class=${classMap({ 'page-item': true, disabled: this.paging.currentPage === this.paging.totalPages })}>
+          <button type="button" class="page-link" data-action="next" ?disabled=${this.paging.currentPage === this.paging.totalPages}>
+            <typo3-backend-icon identifier="actions-view-paging-next" size="small"></typo3-backend-icon>
+          </button>
+        </li>
+      </ul>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-pagination': PaginationElement;
+  }
+}