typo3-typescript-sources 13.4.20

package/backend/color-picker.ts

@@ -0,0 +1,158 @@
+/*
+ * 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, query } from 'lit/decorators';
+import { css, html, LitElement, type TemplateResult } from 'lit';
+import Alwan from 'alwan';
+import RegularEvent from '@typo3/core/event/regular-event';
+import DocumentService from '@typo3/core/document-service';
+
+@customElement('typo3-backend-color-picker')
+export class Typo3BackendColorPicker extends LitElement {
+  static override styles = css`
+    :host {
+      display: inline-block;
+      position: relative;
+    }
+
+    .color-picker-preview {
+      --typo3-colorpicker-preview-width: 1.25rem;
+      --typo3-colorpicker-preview-height: 1.25rem;
+      --typo3-bg-checkerboard-pattern-size: calc(var(--typo3-colorpicker-preview-width) / 2);
+      --typo3-bg-checkerboard-background-color: light-dark(var(--token-color-neutral-10), var(--token-color-neutral-85));
+      --typo3-bg-checkerboard-background-image-color: light-dark(var(--token-color-neutral-0), var(--token-color-neutral-90));
+
+      display: block;
+      position: absolute;
+      width: var(--typo3-colorpicker-preview-width);
+      height: var(--typo3-colorpicker-preview-height);
+      top: 50%;
+      inset-inline-start: var(--typo3-input-sm-padding-x);
+      z-index: 1;
+      transform: translate(0, -50%);
+      background: var(--typo3-bg-checkerboard-background-color);
+      background-image: linear-gradient(45deg, var(--typo3-bg-checkerboard-background-image-color) 25%, transparent 25%), linear-gradient(135deg, var(--typo3-bg-checkerboard-background-image-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--typo3-bg-checkerboard-background-image-color) 75%), linear-gradient(135deg, transparent 75%, var(--typo3-bg-checkerboard-background-image-color) 75%);
+      background-position: 0 0, calc(var(--typo3-bg-checkerboard-pattern-size) / 2) 0, calc(var(--typo3-bg-checkerboard-pattern-size) / 2) calc(var(--typo3-bg-checkerboard-pattern-size) / 2 * -1), 0 calc(var(--typo3-bg-checkerboard-pattern-size) / 2);
+      background-size: var(--typo3-bg-checkerboard-pattern-size) var(--typo3-bg-checkerboard-pattern-size);
+      background-clip: padding-box;
+      border-radius: var(--typo3-component-border-radius);
+      pointer-events: none;
+    }
+
+    .color-picker-preview-color {
+      position: absolute;
+      inset: 0;
+      border-radius: 2px;
+      background-color: var(--color, transparent);
+    }
+    `;
+
+  @property({ type: String }) color: string = '';
+  @property({ type: Boolean }) opacity: boolean = false;
+  @property({ type: String }) swatches: string = '';
+
+  // Use a reference to the input slot element
+  @query('slot') slotEl!: HTMLSlotElement;
+
+  protected override async firstUpdated(): Promise<void> {
+    await DocumentService.ready();
+
+    const inputElement = this.getInputElement();
+    if (inputElement) {
+      if (!inputElement.value && this.color) {
+        inputElement.value = this.color;
+      } else {
+        this.color = inputElement.value;
+      }
+
+      if (inputElement.disabled || inputElement.readOnly) {
+        return;
+      }
+
+      const alwan = new Alwan(inputElement, {
+        position: 'bottom-start',
+        format: 'hex',
+        opacity: this.opacity,
+        swatches: this.swatches ? this.swatches.split(';') : [],
+        preset: false,
+        color: this.color,
+      });
+
+      alwan.on('color', (e): void => {
+        this.color = e.hex;
+        inputElement.value = this.color;
+        inputElement.dispatchEvent(new Event('blur'));
+      });
+
+      // input: react on user input
+      // change: react on indirect changes, e.g. a value picker
+      ['input', 'change'].forEach((eventName: string): void => {
+        new RegularEvent(eventName, (e: Event): void => {
+          const input = (e.target as HTMLInputElement);
+          this.color = input.value;
+          alwan.setColor(this.color);
+        }).bindTo(inputElement);
+      });
+    }
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <slot></slot>
+      <span style="--color: ${this.color}" class="color-picker-preview"><span class="color-picker-preview-color"></span></span>
+    `;
+  }
+
+  private getInputElement(): HTMLInputElement | null {
+    const assignedNodes = this.slotEl.assignedNodes();
+    for (const node of assignedNodes) {
+      if (node instanceof HTMLInputElement) {
+        return node;
+      }
+    }
+    console.warn('No input element found in the slot.');
+    return null;
+  }
+}
+
+interface LegacyColorPickerSettings {
+  swatches?: string[],
+  opacity?: boolean
+}
+
+
+class LegacyColorPicker {
+  /**
+   * Initialize the color picker for the given element
+   */
+  public initialize(element: HTMLInputElement, options: LegacyColorPickerSettings = {}): void {
+    if (element.parentElement instanceof Typo3BackendColorPicker) {
+      return;
+    }
+
+    const colorPicker = document.createElement('typo3-backend-color-picker');
+    colorPicker.swatches = options.swatches?.join(';') ?? '';
+    colorPicker.opacity = options.opacity ?? false;
+    element.parentNode.insertBefore(colorPicker, element);
+    colorPicker.appendChild(element);
+  }
+}
+
+export default new LegacyColorPicker();
+
+// Register the custom element
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-color-picker': Typo3BackendColorPicker;
+  }
+}

package/backend/color-scheme-switch.ts

@@ -0,0 +1,179 @@
+/*
+ * 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, nothing, type TemplateResult } from 'lit';
+import { customElement, property, state } from 'lit/decorators';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import '@typo3/backend/element/icon-element';
+import type { ColorSchemeUpdateEventData, ColorScheme } from '@typo3/backend/user-settings-manager';
+
+interface ColorSchemeOption {
+  label: string,
+  icon: string,
+  value: ColorScheme,
+}
+
+@customElement('typo3-backend-color-scheme-switch')
+export class ColorSchemeSwitchElement extends LitElement {
+  @property({ type: String }) activeColorScheme: ColorScheme = null;
+  @property({ type: Array }) colorSchemes: ColorSchemeOption[] = null;
+  @property({ type: String }) toggleLabel: string;
+  @property({ type: String }) disabledLabel: string;
+
+  @state() advancedOptionsExpanded: boolean = false;
+  @state() autoDetect: ColorScheme|null = null;
+  @state() enabled: boolean|null = null;
+
+  private colorSchemeMql: MediaQueryList|null = null;
+  private forcedColorsMql: MediaQueryList|null = null;
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    this.colorSchemeMql = window.matchMedia('(prefers-color-scheme: dark)');
+    this.forcedColorsMql = window.matchMedia('(forced-colors: active)');
+    this.colorSchemeMediaQueryListener(this.colorSchemeMql);
+    this.forcedColorsMediaQueryListener(this.forcedColorsMql);
+    this.colorSchemeMql.addEventListener('change', this.colorSchemeMediaQueryListener);
+    this.forcedColorsMql.addEventListener('change', this.forcedColorsMediaQueryListener);
+  }
+
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.colorSchemeMql.removeEventListener('change', this.colorSchemeMediaQueryListener);
+    this.forcedColorsMql.removeEventListener('change', this.forcedColorsMediaQueryListener);
+    this.colorSchemeMql = null;
+    this.forcedColorsMql = null;
+  }
+
+  protected readonly colorSchemeMediaQueryListener = (mql: MediaQueryList|MediaQueryListEvent) => this.autoDetect = mql.matches ? 'dark' : 'light';
+
+  protected readonly forcedColorsMediaQueryListener = (mql: MediaQueryList|MediaQueryListEvent) => this.enabled = !mql.matches;
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    return this;
+  }
+
+  protected getRealColorScheme(): ColorScheme {
+    if (this.activeColorScheme === 'auto') {
+      return this.autoDetect ?? 'light';
+    }
+    return this.activeColorScheme ?? 'light';
+  }
+
+  protected override render(): TemplateResult | symbol {
+    return html`
+      <div class="btn-group">
+        <button
+            type="button"
+            class="btn btn-default"
+            title=${this.enabled ? this.toggleLabel : this.disabledLabel}
+            ?disabled=${!this.enabled}
+            @click=${(e: Event) => this.toggle(e)}
+        >
+          <typo3-backend-icon identifier=${this.getIcon(this.activeColorScheme ?? 'auto')} size="small"></typo3-backend-icon>
+          ${this.getLabel(this.getRealColorScheme())}
+          <typo3-backend-icon identifier="actions-exchange" size="small" style="margin-left: auto;"></typo3-backend-icon>
+        </button>
+
+        <button
+            type="button"
+            class="btn btn-default ${this.advancedOptionsExpanded ? 'active' : ''}"
+            aria-haspopup="true"
+            aria-expanded=${this.advancedOptionsExpanded ? 'true' : 'false'}
+            ?disabled=${!this.enabled}
+            @click=${(e: Event) => { e.stopPropagation(); this.advancedOptionsExpanded = !this.advancedOptionsExpanded; }}
+            >
+          <span class="visually-hidden">Show more options</span>
+          <typo3-backend-icon identifier=${this.advancedOptionsExpanded ? 'actions-chevron-up' : 'actions-chevron-down'} size="small"></typo3-backend-icon>
+        </button>
+      </div>
+      ${this.advancedOptionsExpanded === false ? nothing : html`
+        <ul class="dropdown-list">
+          ${this.colorSchemes.map(item => this.renderItem(item))}
+        </ul>
+      `}
+    `;
+  }
+
+  protected getIcon(colorScheme: ColorScheme): string {
+    return this.colorSchemes.find(cs => cs.value === colorScheme)?.icon ?? 'auto';
+  }
+
+  protected getLabel(colorScheme: ColorScheme): string {
+    return this.colorSchemes.find(cs => cs.value === colorScheme)?.label ?? '';
+  }
+
+  protected renderItem(colorScheme: ColorSchemeOption): TemplateResult | symbol {
+    return html`
+      <li>
+        <button class="dropdown-item" @click="${(e: Event) => this.handleClick(e, colorScheme.value)}" aria-current="${this.activeColorScheme === colorScheme.value ? 'true' : 'false'}">
+          <span class="dropdown-item-columns">
+            <span class="dropdown-item-column dropdown-item-column-icon" aria-hidden="true">
+              <typo3-backend-icon identifier="${colorScheme.icon}" size="small"></typo3-backend-icon>
+            </span>
+            <span class="dropdown-item-column dropdown-item-column-title">
+              ${colorScheme.label}
+              ${colorScheme.value === 'auto' ? html`<span class="dropdown-item-column-title-info">${this.getLabel(this.autoDetect)}</span>` : ''}
+            </span>
+            ${this.activeColorScheme === colorScheme.value ? html`
+              <span class="text-primary">
+                <typo3-backend-icon identifier="actions-dot" size="small"></typo3-backend-icon>
+              </span>
+            ` : html`
+              <typo3-backend-icon identifier="empty-empty" size="small"></typo3-backend-icon>
+            `}
+          </span>
+        </button>
+      </li>
+    `;
+  }
+
+  private async toggle(e: Event): Promise<void> {
+    e.preventDefault();
+    e.stopPropagation();
+    const currentColorScheme = this.getRealColorScheme();
+    let colorScheme: ColorScheme = currentColorScheme === 'dark' ? 'light' : 'dark';
+    if (colorScheme === this.autoDetect) {
+      // Set to auto if the user toggled to the
+      // OS default, that basically means user wants the color
+      // scheme to match the current system theme
+      colorScheme = 'auto';
+    }
+    this.triggerSchemeUpdate(colorScheme);
+    await this.persistSchemeUpdate(colorScheme);
+  }
+
+  private async handleClick(e: Event, value: ColorScheme): Promise<void> {
+    e.preventDefault();
+    e.stopPropagation();
+    this.triggerSchemeUpdate(value);
+    await this.persistSchemeUpdate(value);
+    this.advancedOptionsExpanded = false;
+  }
+
+  private async persistSchemeUpdate(colorScheme: ColorScheme) {
+    const url = new URL(TYPO3.settings.ajaxUrls.color_scheme_update, window.location.origin);
+
+    return await new AjaxRequest(url).post({ colorScheme });
+  }
+
+  private triggerSchemeUpdate(colorScheme: ColorScheme): void {
+    document.dispatchEvent(new CustomEvent<ColorSchemeUpdateEventData>('typo3:color-scheme:update', { detail: { colorScheme } }));
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-color-scheme-switch': ColorSchemeSwitchElement;
+  }
+}

package/backend/column-selector-button.ts

@@ -0,0 +1,302 @@
+/*
+ * 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 { PseudoButtonLitElement } from '@typo3/backend/element/pseudo-button';
+import { SeverityEnum } from '@typo3/backend/enum/severity';
+import { default as Modal, type ModalElement } from '@typo3/backend/modal';
+import { lll } from '@typo3/core/lit-helper';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+import Notification from '@typo3/backend/notification';
+
+enum Selectors {
+  columnsSelector = '.t3js-column-selector',
+  columnsContainerSelector = '.t3js-column-selector-container',
+  columnsFilterSelector = 'input[name="columns-filter"]',
+  columnsSelectorActionsSelector = '.t3js-column-selector-actions'
+}
+
+enum SelectorActions {
+  toggle = 'select-toggle',
+  all = 'select-all',
+  none = 'select-none'
+}
+
+/**
+ * Module: @typo3/backend/column-selector-button
+ *
+ * @example
+ * <typo3-backend-column-selector-button
+ *    class="btn btn-default"
+ *    data-url="/url/to/column/selector/form"
+ *    data-target="/url/to/go/after/column/selection"
+ *    data-title="Show columns"
+ *    data-button-ok="Update"
+ *    data-button-close="Cancel"
+ *    data-error-message="Error"
+ * >
+ *   Show columns
+ * </typo3-backend-column-selector-button>
+ */
+@customElement('typo3-backend-column-selector-button')
+export class ColumnSelectorButton extends PseudoButtonLitElement {
+  @property({ type: String, attribute: 'data-url' }) modalUrl: string;
+  @property({ type: String, attribute: 'data-target' }) modalTarget: string;
+  @property({ type: String, attribute: 'data-title' }) modalTitle: string = 'Show columns';
+  @property({ type: String, attribute: 'data-button-ok' }) buttonOk: string = lll('button.ok') || 'Update';
+  @property({ type: String, attribute: 'data-button-close' }) buttonClose: string = lll('button.close') || 'Close';
+  @property({ type: String, attribute: 'data-error-message' }) errorMessage: string = 'Could not update columns';
+
+  /**
+   * Toggle selector actions state (enabled or disabled) depending
+   * on the columns state (checked, unchecked, displayed or hidden)
+   *
+   * @param columns The columns
+   * @param selectAll The "select all" action button
+   * @param selectNone The "select none" action button
+   * @param initialize Whether this is the initialize call - don't check hidden
+   *                   state as all columns are displayed on initialization
+   * @private
+   */
+  private static toggleSelectorActions(
+    columns: NodeListOf<HTMLInputElement>,
+    selectAll: HTMLButtonElement,
+    selectNone: HTMLButtonElement,
+    initialize: boolean = false
+  ) {
+    selectAll.classList.add('disabled');
+    for (let i = 0; i < columns.length; i++) {
+      if (!columns[i].disabled
+        && !columns[i].checked
+        && (initialize || !ColumnSelectorButton.isColumnHidden(columns[i]))
+      ) {
+        selectAll.classList.remove('disabled');
+        break;
+      }
+    }
+    selectNone.classList.add('disabled');
+    for (let i = 0; i < columns.length; i++) {
+      if (!columns[i].disabled
+        && columns[i].checked
+        && (initialize || !ColumnSelectorButton.isColumnHidden(columns[i]))
+      ) {
+        selectNone.classList.remove('disabled');
+        break;
+      }
+    }
+  }
+
+  /**
+   * Check if the given column is hidden by looking at it's container element
+   *
+   * @param column The column to check for
+   * @private
+   */
+  private static isColumnHidden(column: HTMLInputElement): boolean {
+    return column.closest(Selectors.columnsContainerSelector)?.classList.contains('hidden');
+  }
+
+  /**
+   * Check each column if it matches the current search term.
+   * If not, hide its outer container to not break the grid.
+   *
+   * @param columnsFilter The columns filter
+   * @param columns The columns to check
+   * @private
+   */
+  private static filterColumns(columnsFilter: HTMLInputElement, columns: NodeListOf<HTMLInputElement>): void {
+    columns.forEach((column: HTMLInputElement) => {
+      const columnContainer: HTMLDivElement = column.closest(Selectors.columnsContainerSelector);
+      if (!column.disabled && columnContainer !== null) {
+        const filterValue: string = columnContainer.querySelector('.form-check-label')?.textContent;
+        if (filterValue && filterValue.length) {
+          columnContainer.classList.toggle(
+            'hidden',
+            columnsFilter.value !== '' && !RegExp(columnsFilter.value, 'i').test(
+              filterValue.trim().replace(/\[\]/g, '').replace(/\s+/g, ' ')
+            )
+          );
+        }
+      }
+    });
+  }
+
+  protected override buttonActivated(): void {
+    this.showColumnSelectorModal();
+  }
+
+  private showColumnSelectorModal(): void {
+    if (!this.modalUrl || !this.modalTarget) {
+      // Don't render modal in case no url or target is given
+      return;
+    }
+
+    const modal = Modal.advanced({
+      content: this.modalUrl,
+      title: this.modalTitle,
+      severity: SeverityEnum.notice,
+      size: Modal.sizes.medium,
+      type: Modal.types.ajax,
+      buttons: [
+        {
+          text: this.buttonClose,
+          active: true,
+          btnClass: 'btn-default',
+          name: 'cancel',
+          trigger: (e: Event, modal: ModalElement): void => modal.hideModal()
+        },
+        {
+          text: this.buttonOk,
+          btnClass: 'btn-primary',
+          name: 'update',
+          trigger: (e: Event, modal: ModalElement): void => this.processSelection(modal)
+        }
+      ],
+      ajaxCallback: (): void => this.handleModalContentLoaded(modal)
+    });
+  }
+
+  private processSelection(currentModal: HTMLElement): void {
+    const form: HTMLFormElement = currentModal.querySelector('form') as HTMLFormElement;
+    if (form === null) {
+      this.abortSelection();
+      return;
+    }
+    (new AjaxRequest(TYPO3.settings.ajaxUrls.show_columns))
+      .post(new FormData(form))
+      .then(async (response: AjaxResponse): Promise<void> => {
+        const data = await response.resolve();
+        if (data.success === true) {
+          // @todo This does not jump to the anchor (#t3-table-some_table) after the reload!!!
+          this.ownerDocument.location.href = this.modalTarget;
+          this.ownerDocument.location.reload();
+        } else {
+          Notification.error(data.message || 'No update was performed');
+        }
+        Modal.dismiss();
+      })
+      .catch(() => {
+        this.abortSelection();
+      });
+  }
+
+  private handleModalContentLoaded(currentModal: HTMLElement): void {
+    const form: HTMLFormElement = currentModal.querySelector('form') as HTMLFormElement;
+    if (form === null) {
+      // Early return if modal content does not include a form
+      return;
+    }
+    // Prevent the form from being submitted as the form data will be send via an ajax request
+    form.addEventListener('submit', (e: Event): void => { e.preventDefault(); });
+
+    const columns: NodeListOf<HTMLInputElement> = currentModal.querySelectorAll(Selectors.columnsSelector);
+    const columnsFilter: HTMLInputElement = currentModal.querySelector(Selectors.columnsFilterSelector);
+    const columnsSelectorActions: HTMLDivElement = currentModal.querySelector(Selectors.columnsSelectorActionsSelector);
+    const selectAll: HTMLButtonElement = columnsSelectorActions.querySelector('button[data-action="' + SelectorActions.all + '"]');
+    const selectNone: HTMLButtonElement = columnsSelectorActions.querySelector('button[data-action="' + SelectorActions.none + '"]');
+
+    if (!columns.length || columnsFilter === null || selectAll === null || selectNone === null) {
+      // Return in case required elements do not exist in the modal content
+      return;
+    }
+
+    // First initialize select-all / select-none buttons
+    ColumnSelectorButton.toggleSelectorActions(columns, selectAll, selectNone, true);
+
+    // Add event listener for each column to toggle the selector actions after change
+    columns.forEach((column: HTMLInputElement) => {
+      column.addEventListener('change', (): void => {
+        ColumnSelectorButton.toggleSelectorActions(columns, selectAll, selectNone);
+      });
+    });
+
+    // Add event listener for keydown event for the columns filter, so we
+    // can catch the "Escape" key, which would otherwise close the modal.
+    columnsFilter.addEventListener('keydown', (e: KeyboardEvent): void => {
+      const target = e.target as HTMLInputElement;
+      if (e.code === 'Escape') {
+        e.stopImmediatePropagation();
+        target.value = '';
+      }
+    });
+
+    // Add event listener for keydown event for the columns filter, allowing the "live filtering"
+    columnsFilter.addEventListener('keyup', (e: KeyboardEvent): void => {
+      ColumnSelectorButton.filterColumns(e.target as HTMLInputElement, columns);
+      ColumnSelectorButton.toggleSelectorActions(columns, selectAll, selectNone);
+    });
+
+    // Catch browser specific "search" event, triggered on clicking the "clear" button
+    columnsFilter.addEventListener('search', (e: Event): void => {
+      ColumnSelectorButton.filterColumns(e.target as HTMLInputElement, columns);
+      ColumnSelectorButton.toggleSelectorActions(columns, selectAll, selectNone);
+    });
+
+    // Add event listener for all columns select actions. querySelectorAll will return
+    // at least two actions (selectAll and selectNone) which we checked above already
+    columnsSelectorActions.querySelectorAll('button[data-action]').forEach((action: HTMLButtonElement) => {
+      action.addEventListener('click', (e: Event): void => {
+        e.preventDefault();
+
+        const target: HTMLButtonElement = e.currentTarget as HTMLButtonElement;
+        if (!target.dataset.action) {
+          // Return if we don't deal with a valid action (No action defined)
+          return;
+        }
+
+        // Perform requested action
+        switch (target.dataset.action) {
+          case SelectorActions.toggle:
+            columns.forEach((column: HTMLInputElement) => {
+              if (!column.disabled && !ColumnSelectorButton.isColumnHidden(column)) {
+                column.checked = !column.checked;
+              }
+            });
+            break;
+          case SelectorActions.all:
+            columns.forEach((column: HTMLInputElement) => {
+              if (!column.disabled && !ColumnSelectorButton.isColumnHidden(column)) {
+                column.checked = true;
+              }
+            });
+            break;
+          case SelectorActions.none:
+            columns.forEach((column: HTMLInputElement) => {
+              if (!column.disabled && !ColumnSelectorButton.isColumnHidden(column)) {
+                column.checked = false;
+              }
+            });
+            break;
+          default:
+            // Unknown action
+            Notification.warning('Unknown selector action');
+        }
+
+        // After performing the action always toggle selector actions
+        ColumnSelectorButton.toggleSelectorActions(columns, selectAll, selectNone);
+      });
+    });
+  }
+
+  private abortSelection(): void {
+    Notification.error(this.errorMessage);
+    Modal.dismiss();
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-column-selector-button': ColumnSelectorButton;
+  }
+}