typo3-typescript-sources 13.4.20

package/install/renderable/clearable.ts

@@ -0,0 +1,113 @@
+/*
+ * 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!
+ */
+
+class Clearable {
+  constructor() {
+    if (typeof HTMLInputElement.prototype.clearable === 'function') {
+      return;
+    }
+
+    this.registerClearable();
+  }
+
+  private static createCloseButton(clearButtonTitle: string): HTMLButtonElement {
+    // The inlined markup represents the current generated markup from the
+    // icon api for the icon actions-close that can be found in the official
+    // icon repository and is registered in the backend icon api.
+    //
+    // It´s not possible to use/open the backend icon api without opening
+    // new possible vectors for attackers to sniff system information.
+    //
+    // When the icon definition of actions-close changes also the inline
+    // icon should be updated.
+    //
+    // https://github.com/typo3/typo3.icons
+    const closeIcon = `
+      <span class="t3js-icon icon icon-size-small icon-state-default icon-actions-close" data-identifier="actions-close">
+        <span class="icon-markup">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+            <g fill="currentColor">
+              <path d="M11.9 5.5 9.4 8l2.5 2.5c.2.2.2.5 0 .7l-.7.7c-.2.2-.5.2-.7 0L8 9.4l-2.5 2.5c-.2.2-.5.2-.7 0l-.7-.7c-.2-.2-.2-.5 0-.7L6.6 8 4.1 5.5c-.2-.2-.2-.5 0-.7l.7-.7c.2-.2.5-.2.7 0L8 6.6l2.5-2.5c.2-.2.5-.2.7 0l.7.7c.2.2.2.5 0 .7z"/>
+            </g>
+          </svg>
+        </span>
+      </span>
+    `;
+
+    const closeButton = document.createElement('button');
+    closeButton.type = 'button';
+    closeButton.tabIndex = -1;
+    closeButton.title = clearButtonTitle;
+    closeButton.ariaLabel = clearButtonTitle;
+    closeButton.innerHTML = closeIcon;
+    closeButton.style.visibility = 'hidden';
+    closeButton.classList.add('close');
+
+    return closeButton;
+  }
+
+  private registerClearable(): void {
+    HTMLInputElement.prototype.clearable = function(options: Options = {}): void {
+      if (this.dataset.clearable) {
+        // input field is already clearable, nothing to do here
+        return;
+      }
+
+      if (typeof options !== 'object') {
+        throw new Error('Passed options must be an object, ' + typeof options + ' given');
+      }
+
+      this.classList.add('form-control-clearable');
+
+      const wrap = document.createElement('div');
+      wrap.classList.add('form-control-clearable-wrapper');
+      this.parentNode.insertBefore(wrap, this);
+      wrap.appendChild(this);
+
+      let clearButtonTitle = 'Clear input';
+      if (this.dataset.clearableLabel) {
+        clearButtonTitle = this.dataset.clearableLabel;
+      } else if ('lang' in top.TYPO3 && top.TYPO3.lang['labels.inputfield.clearButton.title']) {
+        clearButtonTitle = top.TYPO3.lang['labels.inputfield.clearButton.title'];
+      }
+
+      const clearButton = Clearable.createCloseButton(clearButtonTitle);
+
+      const toggleClearButtonVisibility = (): void => {
+        clearButton.style.visibility = this.value.length === 0 ? 'hidden' : 'visible';
+      };
+
+      clearButton.addEventListener('click', (e: Event): void => {
+        e.preventDefault();
+
+        this.value = '';
+
+        if (typeof options.onClear === 'function') {
+          options.onClear(this);
+        }
+
+        this.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
+        toggleClearButtonVisibility();
+      });
+      wrap.appendChild(clearButton);
+
+      this.addEventListener('focus', toggleClearButtonVisibility);
+      this.addEventListener('keyup', toggleClearButtonVisibility);
+
+      toggleClearButtonVisibility();
+      this.dataset.clearable = 'true';
+    };
+  }
+}
+
+export default new Clearable();

package/install/renderable/flash-message.ts

@@ -0,0 +1,64 @@
+/*
+ * 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 Severity from './severity';
+import { customElement, property } from 'lit/decorators';
+import { html, LitElement, nothing, type TemplateResult } from 'lit';
+
+/**
+ * Module: @typo3/install/module/flash-message
+ */
+@customElement('typo3-install-flashmessage')
+export class FlashMessage extends LitElement {
+  @property({ type: Number }) severity: number;
+  @property({ type: String }) subject: string;
+  @property({ type: String }) content: string;
+
+  public static create(severity: number, subject: string, content: string = ''): FlashMessage {
+    const isInIframe = window.location !== window.parent.location;
+    const doc = isInIframe ? window.parent.document : document;
+    const message = doc.createElement('typo3-install-flashmessage');
+    message.severity = severity;
+    message.subject = subject;
+
+    if (content) {
+      message.content = content;
+    }
+
+    return message;
+  }
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    // @todo Switch to Shadow DOM once Bootstrap CSS style can be applied correctly
+    return this;
+  }
+
+  protected override render(): TemplateResult {
+    let content: TemplateResult | symbol = nothing;
+    if (this.content) {
+      content = html`<p class="alert-message">${this.content}</p>`;
+    }
+    return html`
+      <div class="t3js-message alert alert-${Severity.getCssClass(this.severity)}">
+        <div class="alert-title">${this.subject}</div>
+        ${content}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-install-flashmessage': FlashMessage;
+  }
+}

package/install/renderable/info-box.ts

@@ -0,0 +1,66 @@
+/*
+ * 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 Severity from './severity';
+import { customElement, property } from 'lit/decorators';
+import { html, LitElement, nothing, type TemplateResult } from 'lit';
+
+/**
+ * Module: @typo3/install/module/info-box
+ */
+@customElement('typo3-install-infobox')
+export class InfoBox extends LitElement {
+  @property({ type: Number }) severity: number;
+  @property({ type: String }) subject: string;
+  @property({ type: String }) content: string;
+
+  public static create(severity: number, subject: string, content: string = ''): InfoBox {
+    const isInIframe = window.location !== window.parent.location;
+    const doc = isInIframe ? window.parent.document : document;
+    const infobox = doc.createElement('typo3-install-infobox');
+    infobox.severity = severity;
+    infobox.subject = subject;
+
+    if (content) {
+      infobox.content = content;
+    }
+
+    return infobox;
+  }
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    // @todo Switch to Shadow DOM once Bootstrap CSS style can be applied correctly
+    return this;
+  }
+
+  protected override render(): TemplateResult {
+    let content: TemplateResult | symbol = nothing;
+    if (this.content) {
+      content = html`<div class="callout-body">${this.content}</div>`;
+    }
+    return html`
+      <div class="t3js-infobox callout callout-sm callout-${Severity.getCssClass(this.severity)}">
+        <div class="callout-content">
+          <div class="callout-title">${this.subject}</div>
+          ${content}
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-install-infobox': InfoBox;
+  }
+}

package/install/renderable/language-packs.ts

@@ -0,0 +1,304 @@
+/*
+ * 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, state } from 'lit/decorators';
+import { LitElement, type TemplateResult, html, nothing } from 'lit';
+import { classMap } from 'lit/directives/class-map';
+
+type Language = {
+  iso: string,
+  name: string,
+  active: boolean,
+  lastUpdate: string,
+  dependencies: string[]
+};
+
+type ExtensionPack = {
+  iso: string,
+  exists: boolean,
+  lastUpdate: string
+};
+
+type Extension = {
+  key: string,
+  title: string,
+  type: string,
+  icon: string,
+  packs: ExtensionPack[]
+};
+
+export type LanguagePacksGetDataResponse = {
+  languages: Language[],
+  extensions: Extension[],
+  activeLanguages: string[],
+  activeExtensions: string[],
+};
+
+export type ActivateLanguageEvent = {
+  iso: string,
+};
+export type DeactivateLanguageEvent = {
+  iso: string,
+};
+export type DownloadPacksEvent = {
+  iso?: string,
+  extension?: string
+};
+
+@customElement('typo3-install-language-matrix')
+export class LanguageMatrixElement extends LitElement {
+  @property({ type: Boolean }) configurationIsWritable: boolean = false;
+  @property({ type: Object }) data: LanguagePacksGetDataResponse | null = null;
+
+  @state()
+  private addLanguagesActive: boolean = false;
+
+  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`
+      <div>
+        <h2>Active languages</h2>
+        <div class="table-fit">
+          <table class="table table-striped">
+            <thead>
+              <tr>
+                <th>
+                  <div class="btn-group">
+                    ${this.globalActions()}
+                  </div>
+                </th>
+                <th>Locale</th>
+                <th>Dependencies</th>
+                <th>Last update</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${this.renderLanguages()}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    `;
+  }
+
+  private globalActions(): TemplateResult {
+    const updateButtonClasses = {
+      'btn': true,
+      'btn-default': true,
+      'update-all': true,
+      'disabled': !this.hasActiveLanguages()
+    };
+
+    return html`
+      ${this.configurationIsWritable ? html`
+        <button class="btn btn-default t3js-languagePacks-addLanguage-toggle"
+          @click=${() => this.addLanguagesActive = !this.addLanguagesActive}>
+          <typo3-backend-icon identifier=${this.addLanguagesActive ? 'actions-minus' : 'actions-plus'} size="small"></typo3-backend-icon>
+          Add language
+        </button>
+      ` : nothing}
+      <button class=${classMap(updateButtonClasses)} ?disabled=${!this.hasActiveLanguages()}
+        @click=${() => this.dispatchEvent(new CustomEvent<DownloadPacksEvent>('download-packs'))}>
+        <typo3-backend-icon identifier="actions-download" size="small"></typo3-backend-icon>
+        Update all
+      </button>
+    `;
+  }
+
+  private renderLanguageActions(language: Language): TemplateResult[] {
+    const actions: TemplateResult[] = [];
+    const { iso } = language;
+    const eventData = { detail: { iso } };
+
+    if (language.active) {
+      if (this.configurationIsWritable) {
+        actions.push(html`
+          <button class="btn btn-default" title="Deactivate"
+            @click=${() => this.dispatchEvent(new CustomEvent<DeactivateLanguageEvent>('deactivate-language', eventData))}>
+            <typo3-backend-icon identifier="actions-minus" size="small"></typo3-backend-icon>
+          </button>
+        `);
+      }
+
+      actions.push(html`
+        <button class="btn btn-default" title="Download language packs"
+          @click=${() => this.dispatchEvent(new CustomEvent<DownloadPacksEvent>('download-packs', eventData))}>
+          <typo3-backend-icon identifier="actions-download" size="small"></typo3-backend-icon>
+        </button>
+      `);
+    } else {
+      if (this.configurationIsWritable) {
+        actions.push(html`
+          <button class="btn btn-default" title="Activate"
+            @click=${() => this.dispatchEvent(new CustomEvent<ActivateLanguageEvent>('activate-language', eventData))}>
+            <typo3-backend-icon identifier="actions-plus" size="small"></typo3-backend-icon>
+          </button>
+        `);
+      }
+    }
+
+    return actions;
+  }
+
+  private renderLanguages(): TemplateResult[] {
+    return this.data.languages
+      .filter(language => this.addLanguagesActive ? !language.active : language.active)
+      .map(language => html`
+        <tr class=${classMap({ 't3-languagePacks-inactive': !language.active })}>
+          <td>
+            <div class="btn-group">
+              ${this.renderLanguageActions(language)}
+            </div>
+            ${language.name}
+          </td>
+          <td>${language.iso}</td>
+          <td>${language.dependencies.join(', ')}</td>
+          <td>${language.lastUpdate === null ? '' : language.lastUpdate}</td>
+        </tr>
+      `);
+  }
+
+  private hasActiveLanguages() {
+    return Array.isArray(this.data.activeLanguages) && this.data.activeLanguages.length;
+  }
+}
+
+@customElement('typo3-install-extension-matrix')
+export class ExtensionMatrixElement extends LitElement {
+  @property({ type: Object }) data: LanguagePacksGetDataResponse | 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 {
+    if (this.data.extensions.length === 0) {
+      return html`
+        <typo3-install-infobox
+          severity="0"
+          subject="Language packs have been found for every installed extension."
+          content="To download the latest changes, use the refresh button in the list above.">
+        </typo3-install-infobox>
+      `;
+    }
+
+    return html`
+      <div>
+        <h2>Translation status</h2>
+        <div class="table-fit">
+          <table class="table table-striped">
+            <thead>
+              <tr>
+                <th>Extension</th>
+                <th>Key</th>
+                ${this.headerActions()}
+            </thead>
+            <tbody>
+              ${this.renderExtensions()}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    `;
+  }
+
+  private headerActions(): TemplateResult[] {
+    return this.data.activeLanguages.map(activeLanguage => html`
+      <th>
+        <button class="btn btn-default" title="Download and update all language packs"
+          @click=${() => this.dispatchEvent(new CustomEvent<DownloadPacksEvent>('download-packs', { detail: { iso: activeLanguage } }))}>
+          <typo3-backend-icon identifier="actions-download" size="small"></typo3-backend-icon>
+          ${activeLanguage}
+        </button>
+      </th>
+    `);
+  }
+
+  private renderExtensions(): TemplateResult[] {
+    return this.data.extensions.map(extension => html`
+      <tr>
+        <td>
+          ${extension.icon ? html`
+            <img src="${extension.icon}" alt="${extension.title}" style="max-height: 16px; max-width: 16px;">
+          ` : nothing}
+          ${extension.title}
+        </td>
+        <td>${extension.key}</td>
+        ${this.renderExtensionActions(extension)}
+      </tr>
+    `);
+  }
+
+  private renderExtensionActions(extension: Extension): TemplateResult[] {
+    const cells: TemplateResult[] = [];
+
+    this.data.activeLanguages.forEach((language: string): void => {
+      let cell: TemplateResult | typeof nothing = nothing;
+
+      extension.packs.forEach((pack: ExtensionPack): void => {
+        if (pack.iso !== language) {
+          return;
+        }
+
+        let tooltip;
+        if (pack.exists !== true) {
+          if (pack.lastUpdate !== null) {
+            tooltip = 'No language pack available for ' + pack.iso + ' when tried at ' + pack.lastUpdate + '. Click to re-try.';
+          } else {
+            tooltip = 'Language pack not downloaded. Click to download';
+          }
+        } else if (pack.lastUpdate === null) {
+          tooltip = 'Downloaded. Click to renew';
+        } else {
+          tooltip = 'Language pack downloaded at ' + pack.lastUpdate + '. Click to renew';
+        }
+
+        const eventData = {
+          detail: {
+            iso: pack.iso,
+            extension: extension.key
+          }
+        };
+        cell = html`
+          <td>
+            <button class="btn btn-default" title=${tooltip}
+              @click=${() => this.dispatchEvent(new CustomEvent<DownloadPacksEvent>('download-packs', eventData))}>
+              <typo3-backend-icon identifier="actions-download" size="small"></typo3-backend-icon>
+            </button>
+          </td>
+        `;
+      });
+
+      // Render empty colum to avoid disturbed table build up if pack was not found for language.
+      if (cell === nothing) {
+        cell = html`<td></td>`;
+      }
+
+      cells.push(cell);
+    });
+
+    return cells;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-install-language-matrix': LanguageMatrixElement;
+    'typo3-install-extension-matrix': ExtensionMatrixElement;
+  }
+}

package/install/renderable/offset-group.ts

@@ -0,0 +1,38 @@
+import { LitElement, type TemplateResult, html } from 'lit';
+import { customElement, property } from 'lit/decorators';
+
+@customElement('typo3-install-offset-group')
+class OffsetGroupElement extends LitElement {
+  @property({ type: String }) offsetId: string | null = null;
+  @property({ type: Array }) values: string[] | 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`
+      <div class="form-multigroup-wrap">
+        <div class="form-multigroup-item">
+          <div class="input-group">
+            <div class="input-group-text">x</div>
+            <input id="${this.offsetId}_offset_x" class="form-control t3js-emconf-offsetfield" data-target="#${this.offsetId}" value="${this.values[0]?.trim()}"/>
+          </div>
+        </div>
+        <div class="form-multigroup-item">
+          <div class="input-group">
+            <div class="input-group-text">y</div>
+            <input id="${this.offsetId}_offset_y" class="form-control t3js-emconf-offsetfield" data-target="#${this.offsetId}" value="${this.values[1]?.trim()}"/>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-install-offset-group': OffsetGroupElement;
+  }
+}

package/install/renderable/severity.ts

@@ -0,0 +1,49 @@
+/*
+ * 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/install/module/severity
+ */
+class Severity {
+  public readonly loading: number = -3;
+  public readonly notice: number = -2;
+  public readonly info: number = -1;
+  public readonly ok: number = 0;
+  public readonly warning: number = 1;
+  public readonly error: number = 2;
+
+  public getCssClass(severity: number): string {
+    let severityClass;
+    switch (severity) {
+      case this.loading:
+      case this.notice:
+        severityClass = 'notice';
+        break;
+      case this.ok:
+        severityClass = 'success';
+        break;
+      case this.warning:
+        severityClass = 'warning';
+        break;
+      case this.error:
+        severityClass = 'danger';
+        break;
+      case this.info:
+      default:
+        severityClass = 'info';
+    }
+    return severityClass;
+  }
+}
+
+export default new Severity();

package/install/renderable/wrap-group.ts

@@ -0,0 +1,36 @@
+import { LitElement, type TemplateResult, html } from 'lit';
+import { customElement, property } from 'lit/decorators';
+
+@customElement('typo3-install-wrap-group')
+class WrapGroupElement extends LitElement {
+  @property({ type: String }) wrapId: string | null = null;
+  @property({ type: Array }) values: string[] | 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`
+      <div class="form-multigroup-wrap">
+        <div class="form-multigroup-item">
+          <div class="input-group">
+            <input id="${this.wrapId}_wrap_start" class="form-control t3js-emconf-wrapfield" data-target="#${this.wrapId}" value="${this.values[0].trim()}"/>
+          </div>
+        </div>
+        <div class="form-multigroup-item">
+          <div class="input-group">
+            <input id="${this.wrapId}_wrap_end" class="form-control t3js-emconf-wrapfield" data-target="#${this.wrapId}" value="${this.values[0].trim()}"/>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-install-wrap-group': WrapGroupElement;
+  }
+}