typo3-typescript-sources 13.4.20

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

@@ -0,0 +1,224 @@
+/*
+ * 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 '@typo3/backend/element/spinner-element';
+import LiveSearchConfigurator from '@typo3/backend/live-search/live-search-configurator';
+import { css, html, LitElement, type TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators';
+import { until } from 'lit/directives/until';
+import '../../provider/default-result-item';
+import { type Item, type ResultItemActionInterface, type ResultItemInterface } from './item';
+import type { InvokeActionEventData, RequestActionsEventData } from '@typo3/backend/live-search/element/result/result-container';
+
+type GroupedResultItems = { [key: string ]: ResultItemInterface[] };
+
+export const componentName = 'typo3-backend-live-search-result-item-container';
+
+@customElement('typo3-backend-live-search-result-item-container')
+export class ItemContainer extends LitElement {
+  @property({ type: Object, attribute: false }) results: ResultItemInterface[]|null = null;
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    this.addEventListener('scroll', this.onScroll);
+  }
+
+  public override disconnectedCallback(): void {
+    this.removeEventListener('scroll', this.onScroll);
+    super.disconnectedCallback();
+  }
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    // Avoid shadow DOM for Bootstrap CSS to be applied
+    return this;
+  }
+
+  protected override render(): TemplateResult {
+    const groupedResults: GroupedResultItems = {};
+    const filteredResults = this.results.filter((result: ResultItemInterface): boolean => result !== null);
+    if (filteredResults.length !== this.results.length) {
+      console.warn(
+        'The result set contained "null" values, indicating something went wrong while building the search results. Affected values were removed to no break the user interface.'
+      );
+    }
+    filteredResults.forEach((result: ResultItemInterface): void => {
+      if (!(result.typeLabel in groupedResults)) {
+        groupedResults[result.typeLabel] = [result];
+      } else {
+        groupedResults[result.typeLabel].push(result);
+      }
+    });
+
+    return html`<typo3-backend-live-search-result-list>
+      ${this.renderGroupedResults(groupedResults)}
+    </typo3-backend-live-search-result-list>`;
+  }
+
+  private renderGroupedResults(groupedResults: GroupedResultItems): TemplateResult {
+    const items = [];
+    for (const [type, results] of Object.entries(groupedResults)) {
+      const countElements = results.length;
+      items.push(html`<h6 class="livesearch-result-item-group-label">${type} (${countElements})</h6>`);
+      items.push(...results.map((result: ResultItemInterface) => html`${until(
+        this.renderResultItem(result),
+        html`<typo3-backend-spinner></typo3-backend-spinner>`
+      )}`));
+    }
+
+    return html`${items}`;
+  }
+
+  private async renderResultItem(resultItem: ResultItemInterface): Promise<TemplateResult> {
+    const renderers = LiveSearchConfigurator.getRenderers();
+    let innerResultItemComponent;
+
+    if (renderers[resultItem.provider] !== undefined) {
+      await import(renderers[resultItem.provider].module);
+      innerResultItemComponent = renderers[resultItem.provider].callback(resultItem);
+    } else {
+      innerResultItemComponent = html`<typo3-backend-live-search-result-item-default
+        title="${resultItem.typeLabel}: ${resultItem.itemTitle}"
+        .icon="${resultItem.icon}"
+        .itemTitle="${resultItem.itemTitle}"
+        .typeLabel="${resultItem.typeLabel}"
+        .extraData="${resultItem.extraData}">
+      </typo3-backend-live-search-result-item-default>`;
+    }
+
+    return html`<typo3-backend-live-search-result-item
+      .resultItem="${resultItem}"
+      @click="${() => this.invokeAction(resultItem, resultItem.actions[0])}"
+      @focus="${() => this.requestActions(resultItem)}">
+      ${innerResultItemComponent}
+    </typo3-backend-live-search-result-item>`;
+  }
+
+  private requestActions(resultItem: ResultItemInterface) {
+    this.parentElement.dispatchEvent(new CustomEvent<RequestActionsEventData>('livesearch:request-actions', {
+      detail: {
+        resultItem: resultItem
+      }
+    }));
+  }
+
+  private invokeAction(resultItem: ResultItemInterface, action: ResultItemActionInterface): void {
+    this.parentElement.dispatchEvent(new CustomEvent<InvokeActionEventData>('livesearch:invoke-action', {
+      detail: {
+        resultItem: resultItem,
+        action: action
+      }
+    }));
+  }
+
+  private onScroll(e: Event): void {
+    this.querySelectorAll('.livesearch-result-item-group-label').forEach((groupLabel: HTMLElement): void => {
+      groupLabel.classList.toggle('sticky', groupLabel.offsetTop <= (e.target as HTMLElement).scrollTop);
+    });
+  }
+}
+
+@customElement('typo3-backend-live-search-result-list')
+export class ResultList extends LitElement {
+  static override styles = css`
+    :host {
+      display: block;
+    }
+  `;
+
+  private parentContainer: HTMLElement;
+  private resultItemDetailContainer: HTMLElement;
+
+  public override connectedCallback(): void {
+    this.parentContainer = this.closest('typo3-backend-live-search-result-container');
+    this.resultItemDetailContainer = this.parentContainer.querySelector('typo3-backend-live-search-result-item-detail-container');
+
+    super.connectedCallback();
+    this.addEventListener('keydown', this.handleKeyDown);
+    this.addEventListener('keyup', this.handleKeyUp);
+  }
+
+  public override disconnectedCallback(): void {
+    this.removeEventListener('keydown', this.handleKeyDown);
+    this.removeEventListener('keyup', this.handleKeyUp);
+    super.disconnectedCallback();
+  }
+
+  protected override render(): TemplateResult {
+    return html`<slot></slot>`;
+  }
+
+  private handleKeyDown(e: KeyboardEvent): void {
+    if (!['ArrowDown', 'ArrowUp', 'ArrowRight'].includes(e.key)) {
+      return;
+    }
+
+    const expectedTagName = 'typo3-backend-live-search-result-item';
+    if (document.activeElement.tagName.toLowerCase() !== expectedTagName) {
+      return;
+    }
+
+    e.preventDefault();
+
+    let focusableCandidate;
+    if (e.key === 'ArrowDown') {
+      let nextSibling = document.activeElement.nextElementSibling;
+      while (nextSibling !== null && nextSibling.tagName.toLowerCase() !== expectedTagName) {
+        nextSibling = nextSibling.nextElementSibling;
+      }
+      focusableCandidate = nextSibling;
+    } else if (e.key === 'ArrowUp') {
+      let prevSibling = document.activeElement.previousElementSibling;
+      while (prevSibling !== null && prevSibling.tagName.toLowerCase() !== expectedTagName) {
+        prevSibling = prevSibling.previousElementSibling;
+      }
+      focusableCandidate = prevSibling;
+      if (focusableCandidate === null) {
+        // No possible candidate found, fall back to search input
+        focusableCandidate = (document.querySelector('typo3-backend-live-search').querySelector('input[type="search"]'));
+      }
+    } else if (e.key === 'ArrowRight') {
+      focusableCandidate = this.resultItemDetailContainer.querySelector('typo3-backend-live-search-result-item-action');
+    }
+
+    if (focusableCandidate !== null) {
+      (focusableCandidate as HTMLElement).focus();
+    }
+  }
+
+  private handleKeyUp(e: KeyboardEvent): void {
+    if (!['Enter', ' '].includes(e.key)) {
+      return;
+    }
+
+    e.preventDefault();
+
+    const resultItem = (e.target as Item).resultItem;
+    this.invokeAction(resultItem);
+  }
+
+  private invokeAction(item: ResultItemInterface): void {
+    this.parentContainer.dispatchEvent(new CustomEvent<InvokeActionEventData>('livesearch:invoke-action', {
+      detail: {
+        resultItem: item,
+        action: item.actions[0]
+      }
+    }));
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-live-search-result-item-container': ItemContainer;
+    'typo3-backend-live-search-result-list': ResultList;
+  }
+}

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

@@ -0,0 +1,74 @@
+/*
+ * 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 '@typo3/backend/element/icon-element';
+
+export interface ResultItemInterface {
+  provider: string;
+  actions: ResultItemActionInterface[];
+  icon: Record<string, string>;
+  itemTitle: string;
+  typeLabel: string;
+  extraData: { [key: string]: any }
+}
+
+export interface ResultItemActionInterface {
+  identifier: string;
+  icon: Record<string, string>;
+  label: string;
+  url: string;
+}
+
+@customElement('typo3-backend-live-search-result-item')
+export class Item extends LitElement {
+  @property({ type: Object, attribute: false }) resultItem: ResultItemInterface;
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+
+    if (!this.hasAttribute('tabindex')) {
+      this.setAttribute('tabindex', '0');
+    }
+
+    this.addEventListener('focus', this.onFocus);
+  }
+
+  public override disconnectedCallback(): void {
+    this.removeEventListener('focus', this.onFocus);
+
+    super.disconnectedCallback();
+  }
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    // Avoid shadow DOM for Bootstrap CSS to be applied
+    return this;
+  }
+
+  protected override render(): TemplateResult {
+    return html`<div class="livesearch-expand-action" @click="${(e: Event): void => { e.stopPropagation(); this.focus(); }}"><typo3-backend-icon identifier="actions-chevron-end" size="small"></typo3-backend-icon></div>`;
+  }
+
+  private onFocus(e: Event) {
+    const target = e.target as HTMLElement;
+    target.parentElement.querySelector('.active')?.classList.remove('active');
+    target.classList.add('active');
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-live-search-result-item': Item;
+  }
+}

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

@@ -0,0 +1,110 @@
+/*
+ * 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 LiveSearchConfigurator from '@typo3/backend/live-search/live-search-configurator';
+import Viewport from '@typo3/backend/viewport';
+import { customElement, property, query } from 'lit/decorators';
+import { html, LitElement, nothing, type TemplateResult } from 'lit';
+import { lll } from '@typo3/core/lit-helper';
+import { type ItemContainer } from './item/item-container';
+import { type ResultDetailContainer } from './result-detail-container';
+import type { ResultItemActionInterface, ResultItemInterface } from './item/item';
+import type { ChooseItemEventData } from '@typo3/backend/toolbar/live-search';
+
+export interface InvokeActionEventData {
+  resultItem: ResultItemInterface,
+  action: ResultItemActionInterface|null
+}
+
+export interface RequestActionsEventData {
+  resultItem: ResultItemInterface,
+}
+
+export const componentName = 'typo3-backend-live-search-result-container';
+
+@customElement('typo3-backend-live-search-result-container')
+export class ResultContainer extends LitElement {
+  @property({ type: Object }) results: ResultItemInterface[] | null = null;
+  @property({ type: Boolean, attribute: false }) loading: boolean = false;
+
+  @query('typo3-backend-live-search-result-item-container') itemContainer: ItemContainer;
+  @query('typo3-backend-live-search-result-item-detail-container') resultDetailContainer: ResultDetailContainer;
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+
+    this.addEventListener('livesearch:request-actions', this.onActionsRequested);
+    this.addEventListener('livesearch:invoke-action', this.onActionInvoked);
+  }
+
+  public override disconnectedCallback(): void {
+    this.removeEventListener('livesearch:request-actions', this.onActionsRequested);
+    this.removeEventListener('livesearch:invoke-action', this.onActionInvoked);
+
+    super.disconnectedCallback();
+  }
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    // Avoid shadow DOM for Bootstrap CSS to be applied
+    return this;
+  }
+
+  protected override render(): TemplateResult | symbol {
+    if (this.loading) {
+      return html`<div class="d-flex flex-fill align-items-center justify-content-center"><typo3-backend-spinner size="large"></typo3-backend-spinner></div>`;
+    }
+
+    if (this.results === null) {
+      return nothing;
+    }
+
+    if (this.results.length === 0) {
+      return html`<div class="alert alert-info">${lll('liveSearch_listEmptyText')}</div>`;
+    }
+
+    return html`
+      <typo3-backend-live-search-result-item-container .results="${this.results}"></typo3-backend-live-search-result-item-container>
+      <typo3-backend-live-search-result-item-detail-container></typo3-backend-live-search-result-item-detail-container>
+    `;
+  }
+
+  private onActionsRequested(e: CustomEvent<RequestActionsEventData>): void {
+    this.resultDetailContainer.resultItem = e.detail.resultItem;
+  }
+
+  private onActionInvoked(e: CustomEvent<InvokeActionEventData>): void {
+    const invokeHandlers = LiveSearchConfigurator.getInvokeHandlers();
+    const resultItem = e.detail.resultItem;
+    const action = e.detail.action;
+
+    if (action === undefined) {
+      return;
+    }
+
+    if (typeof invokeHandlers[resultItem.provider + '_' + action.identifier] === 'function') {
+      invokeHandlers[resultItem.provider + '_' + action.identifier](resultItem, action);
+    } else {
+      // Default handler to open the URL
+      Viewport.ContentContainer.setUrl(action.url);
+    }
+    this.dispatchEvent(new CustomEvent<ChooseItemEventData>('live-search:item-chosen', {
+      detail: { resultItem }
+    }));
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-live-search-result-container': ResultContainer;
+  }
+}

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

@@ -0,0 +1,50 @@
+/*
+ * 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, nothing, type TemplateResult } from 'lit';
+import './item/action/action-container';
+import type { ResultItemInterface } from './item/item';
+
+export const componentName = 'typo3-backend-live-search-result-item-detail-container';
+
+@customElement('typo3-backend-live-search-result-item-detail-container')
+export class ResultDetailContainer extends LitElement {
+  @property({ type: Object, attribute: false }) resultItem: ResultItemInterface|null = null;
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    // Avoid shadow DOM for Bootstrap CSS to be applied
+    return this;
+  }
+
+  protected override render(): TemplateResult | symbol {
+    if (this.resultItem === null) {
+      return nothing;
+    }
+
+    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>
+        <h3>${this.resultItem.itemTitle}</h3>
+        <p class="livesearch-detail-preamble-type">${this.resultItem.typeLabel}</p>
+      </div>
+      <typo3-backend-live-search-result-item-action-container .resultItem="${this.resultItem}"></typo3-backend-live-search-result-item-action-container>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-live-search-result-item-detail-container': ResultDetailContainer;
+  }
+}

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

@@ -0,0 +1,122 @@
+/*
+ * 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, nothing, type TemplateResult } from 'lit';
+import '@typo3/backend/element/icon-element';
+import type { SelectPageEventData } from '@typo3/backend/toolbar/live-search';
+
+export type Pagination = {
+  itemsPerPage: number,
+  currentPage: number,
+  firstPage: number,
+  lastPage: number,
+  allPageNumbers: number[],
+  previousPageNumber: number|null,
+  nextPageNumber: number|null,
+  hasMorePages: boolean,
+  hasLessPages: boolean,
+};
+
+@customElement('typo3-backend-live-search-result-pagination')
+export class ResultPagination extends LitElement {
+  @property({ type: Object }) pagination: Pagination|null = null;
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    // Avoid shadow DOM for Bootstrap CSS to be applied
+    return this;
+  }
+
+  protected override render(): TemplateResult | symbol {
+    if (this.pagination === null || this.pagination.allPageNumbers.length <= 1) {
+      return nothing;
+    }
+
+    return html`<nav>
+      <ul class="pagination">
+        <li class="page-item">
+          <typo3-backend-live-search-result-page class="page-link ${!this.pagination.previousPageNumber || this.pagination.previousPageNumber < this.pagination.firstPage ? 'disabled' : ''}" page="${this.pagination.previousPageNumber}" perPage="${this.pagination.itemsPerPage}">
+            <typo3-backend-icon identifier="actions-view-paging-previous" size="small"></typo3-backend-icon>
+          </typo3-backend-live-search-result-page>
+        </li>
+        ${!this.pagination.allPageNumbers.includes(this.pagination.firstPage) ? html`
+          <li class="page-item">
+            <typo3-backend-live-search-result-page class="page-link" page="${this.pagination.firstPage}" perPage="${this.pagination.itemsPerPage}">
+              ${this.pagination.firstPage}
+            </typo3-backend-live-search-result-page>
+          </li>` : nothing}
+        ${this.pagination.hasLessPages ? html`<li class="page-item disabled"><span class="page-link disabled">&hellip;</span></li>` : nothing}
+        ${this.pagination.allPageNumbers.map((page: number) => html`
+          <li class="page-item">
+            <typo3-backend-live-search-result-page page="${page}" perPage="${this.pagination.itemsPerPage}" class="page-link ${this.pagination.currentPage === page ? 'active' : ''}">${page}</typo3-backend-live-search-result-page>
+          </li>
+        `)}
+        ${this.pagination.hasMorePages ? html`<li class="page-item"><span class="page-link disabled">&hellip;</span></li>` : nothing}
+        ${!this.pagination.allPageNumbers.includes(this.pagination.lastPage) ? html`
+          <li class="page-item">
+            <typo3-backend-live-search-result-page class="page-link" page="${this.pagination.lastPage}" perPage="${this.pagination.itemsPerPage}">
+              ${this.pagination.lastPage}
+            </typo3-backend-live-search-result-page>
+          </li>` : nothing}
+        <li class="page-item">
+          <typo3-backend-live-search-result-page class="page-link ${!this.pagination.nextPageNumber || this.pagination.nextPageNumber > this.pagination.lastPage ? 'disabled' : ''}" page="${this.pagination.nextPageNumber}" perPage="${this.pagination.itemsPerPage}">
+            <typo3-backend-icon identifier="actions-view-paging-next" size="small"></typo3-backend-icon>
+          </typo3-backend-live-search-result-page>
+        </li>
+      </ul>
+    </nav>`;
+  }
+}
+
+@customElement('typo3-backend-live-search-result-page')
+export class ResultPaginationPage extends LitElement {
+  @property({ type: Number }) page: number;
+  @property({ type: Number }) perPage: number;
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+
+    this.addEventListener('click', this.dispatchPaginationEvent);
+  }
+
+  public override disconnectedCallback(): void {
+    this.removeEventListener('click', this.dispatchPaginationEvent);
+
+    super.disconnectedCallback();
+  }
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    // Avoid shadow DOM for Bootstrap CSS to be applied
+    return this;
+  }
+
+  protected override render(): symbol {
+    return nothing;
+  }
+
+  private dispatchPaginationEvent(): void {
+    const liveSearchContainer = this.closest('typo3-backend-live-search');
+    liveSearchContainer.dispatchEvent(new CustomEvent<SelectPageEventData>('livesearch:pagination-selected', {
+      detail: {
+        offset: (this.page - 1) * this.perPage,
+      }
+    }));
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-live-search-result-pagination': ResultPagination;
+    'typo3-backend-live-search-result-page': ResultPaginationPage;
+  }
+}

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

@@ -0,0 +1,70 @@
+/*
+ * 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 BrowserSession from '@typo3/backend/storage/browser-session';
+import type { InvokeOptionEventData } from '@typo3/backend/toolbar/live-search';
+
+@customElement('typo3-backend-live-search-option-item')
+export class SearchOptionItem extends LitElement {
+  @property({ type: Boolean }) active: boolean = false;
+  @property({ type: String }) optionId: string;
+  @property({ type: String }) optionName: string;
+  @property({ type: String }) optionLabel: string;
+
+  private parentContainer: HTMLElement;
+
+  public override connectedCallback(): void {
+    this.parentContainer = this.closest('typo3-backend-live-search');
+
+    super.connectedCallback();
+  }
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    // Avoid shadow DOM for Bootstrap CSS to be applied
+    return this;
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <div class="form-check">
+        <input type="checkbox" class="form-check-input" name="${this.optionName}[]" value="${this.optionId}" id="${this.optionId}" ?checked=${this.active} @input="${this.handleInput}">
+        <label class="form-check-label" for="${this.optionId}">
+          ${this.optionLabel}
+        </label>
+      </div>
+    `;
+  }
+
+  private getStorageKey(): string {
+    return `livesearch-option-${this.optionName}-${this.optionId}`;
+  }
+
+  private handleInput() {
+    this.active = !this.active;
+    this.parentContainer.dispatchEvent(new CustomEvent<InvokeOptionEventData>('typo3:live-search:option-invoked', {
+      detail: {
+        active: this.active
+      }
+    }));
+
+    BrowserSession.set(this.getStorageKey(), this.active ? '1' : '0');
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-live-search-option-item': SearchOptionItem;
+  }
+}