typo3-typescript-sources 13.4.20

package/backend/form-engine/element/abstract-sortable-select-items.ts

@@ -0,0 +1,186 @@
+/*
+ * 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 FormEngine from '@typo3/backend/form-engine';
+import FormEngineValidation from '@typo3/backend/form-engine-validation';
+import RegularEvent from '@typo3/core/event/regular-event';
+import { selector } from '@typo3/core/literals';
+
+export abstract class AbstractSortableSelectItems {
+
+  /**
+   * Moves currently selected options from a select field to the very top,
+   * can be multiple entries as well
+   *
+   * @param {HTMLSelectElement} fieldElement
+   */
+  private static moveOptionToTop(fieldElement: HTMLSelectElement): void {
+    Array.from(fieldElement.querySelectorAll(':checked')).reverse().forEach((optionEl: HTMLOptionElement): void => {
+      fieldElement.insertBefore(optionEl, fieldElement.firstElementChild);
+    });
+  }
+
+  /**
+   * Moves currently selected options from a select field as the very last entries
+   *
+   * @param {HTMLSelectElement} fieldElement
+   */
+  private static moveOptionToBottom(fieldElement: HTMLSelectElement): void {
+    fieldElement.querySelectorAll(':checked').forEach((optionEl: HTMLOptionElement): void => {
+      fieldElement.insertBefore(optionEl, null);
+    });
+  }
+
+  /**
+   * Moves currently selected options from a select field up by one position,
+   * can be multiple entries as well
+   *
+   * @param {HTMLSelectElement} fieldElement
+   */
+  private static moveOptionUp(fieldElement: HTMLSelectElement): void {
+    const allChildren = Array.from(fieldElement.children);
+    const selectedOptions = Array.from(fieldElement.querySelectorAll(':checked'));
+    for (const optionEl of selectedOptions) {
+      if (allChildren.indexOf(optionEl) === 0 && optionEl.previousElementSibling === null) {
+        break;
+      }
+
+      fieldElement.insertBefore(optionEl, optionEl.previousElementSibling);
+    }
+  }
+
+  /**
+   * Moves currently selected options from a select field up by one position,
+   * can be multiple entries as well
+   *
+   * @param {HTMLSelectElement} fieldElement
+   */
+  private static moveOptionDown(fieldElement: HTMLSelectElement): void {
+    const allChildren = Array.from(fieldElement.children).reverse();
+    const selectedOptions = Array.from(fieldElement.querySelectorAll(':checked')).reverse();
+    for (const optionEl of selectedOptions) {
+      if (allChildren.indexOf(optionEl) === 0 && optionEl.nextElementSibling === null) {
+        break;
+      }
+
+      fieldElement.insertBefore(optionEl, optionEl.nextElementSibling.nextElementSibling);
+    }
+  }
+
+  /**
+   * Removes currently selected options from a select field
+   *
+   * @param {HTMLSelectElement} fieldElement
+   * @param {HTMLSelectElement} availableFieldElement
+   */
+  private static removeOption(fieldElement: HTMLSelectElement, availableFieldElement: HTMLSelectElement): void {
+    const previousSelectIndex = fieldElement.selectedIndex;
+    fieldElement.querySelectorAll(':checked').forEach((option: HTMLOptionElement): void => {
+      const originalOption = <HTMLOptionElement>availableFieldElement.querySelector(selector`option[value="${option.value}"]`);
+      if (originalOption !== null) {
+        originalOption.classList.remove('hidden');
+        originalOption.disabled = false;
+        FormEngine.enableOptGroup(originalOption);
+      }
+      fieldElement.removeChild(option);
+    });
+
+    // set the next selected option to the previous sibling removed
+    fieldElement.selectedIndex = previousSelectIndex > 0 ? (previousSelectIndex - 1) : 0;
+  }
+
+  /**
+   * @param {HTMLSelectElement} fieldElement
+   */
+  protected registerSortableEventHandler = (fieldElement: HTMLSelectElement): void => {
+    this.registerKeyboardEventHandler(fieldElement);
+
+    const aside = fieldElement.closest('.form-wizards-wrap').querySelector('.form-wizards-item-aside');
+    if (aside === null) {
+      return;
+    }
+
+    aside.addEventListener('click', (e: Event): void => {
+      const target: HTMLButtonElement = (<Element>e.target).closest('.t3js-btn-option');
+      if (target === null) {
+        return;
+      }
+
+      e.preventDefault();
+
+      const relatedFieldName = target.dataset.fieldname;
+      const relatedField = FormEngine.getFieldElement(relatedFieldName).get(0) as HTMLSelectElement;
+      const relatedAvailableValuesField = FormEngine.getFieldElement(relatedFieldName,'_avail').get(0) as HTMLSelectElement;
+
+      if (target.classList.contains('t3js-btn-moveoption-top')) {
+        AbstractSortableSelectItems.moveOptionToTop(fieldElement);
+      } else if (target.classList.contains('t3js-btn-moveoption-up')) {
+        AbstractSortableSelectItems.moveOptionUp(fieldElement);
+      } else if (target.classList.contains('t3js-btn-moveoption-down')) {
+        AbstractSortableSelectItems.moveOptionDown(fieldElement);
+      } else if (target.classList.contains('t3js-btn-moveoption-bottom')) {
+        AbstractSortableSelectItems.moveOptionToBottom(fieldElement);
+      } else if (target.classList.contains('t3js-btn-removeoption')) {
+        AbstractSortableSelectItems.removeOption(
+          fieldElement,
+          relatedAvailableValuesField,
+        );
+      }
+
+      FormEngine.updateHiddenFieldValueFromSelect(fieldElement, relatedField);
+      FormEngineValidation.markFieldAsChanged(relatedAvailableValuesField);
+      FormEngineValidation.validateField(relatedAvailableValuesField);
+    });
+  };
+
+  /**
+   * @param {HTMLSelectElement} fieldElement
+   */
+  private readonly registerKeyboardEventHandler = (fieldElement: HTMLSelectElement): void => {
+    const relatedFieldName = fieldElement.dataset.formengineInputName;
+    const relatedField = FormEngine.getFieldElement(relatedFieldName).get(0) as HTMLSelectElement;
+    const relatedAvailableValuesField = FormEngine.getFieldElement(relatedFieldName,'_avail').get(0) as HTMLSelectElement;
+
+    new RegularEvent('keydown', (e: KeyboardEvent): void => {
+      if (e.code === 'Delete' || e.code === 'Backspace') {
+        e.preventDefault();
+        AbstractSortableSelectItems.removeOption(
+          fieldElement,
+          relatedAvailableValuesField,
+        );
+      }
+      if (e.code === 'ArrowUp' && e.altKey) {
+        e.preventDefault();
+        AbstractSortableSelectItems.moveOptionUp(fieldElement);
+      }
+      if (e.code === 'ArrowDown' && e.altKey) {
+        e.preventDefault();
+        AbstractSortableSelectItems.moveOptionDown(fieldElement);
+      }
+      if (e.code === 'ArrowUp' && e.altKey && e.shiftKey) {
+        e.preventDefault();
+        AbstractSortableSelectItems.moveOptionToTop(fieldElement);
+      }
+      if (e.code === 'ArrowDown' && e.altKey && e.shiftKey) {
+        e.preventDefault();
+        AbstractSortableSelectItems.moveOptionToBottom(fieldElement);
+      }
+      if (e.defaultPrevented) {
+        FormEngine.updateHiddenFieldValueFromSelect(fieldElement, relatedField);
+        FormEngineValidation.markFieldAsChanged(relatedAvailableValuesField);
+        FormEngineValidation.validateField(relatedAvailableValuesField);
+      }
+    }).bindTo(fieldElement);
+  };
+
+}

package/backend/form-engine/element/category-element.ts

@@ -0,0 +1,160 @@
+/*
+* 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 DocumentService from '@typo3/core/document-service';
+import { selector } from '@typo3/core/literals';
+import { type SelectTree } from './select-tree';
+import { type SelectTreeToolbar } from './select-tree-toolbar';
+import '@typo3/backend/element/icon-element';
+import type { TreeNodeInterface } from '@typo3/backend/tree/tree-node';
+
+/**
+ * Module: @typo3/backend/form-engine/element/category-element
+ *
+ * Functionality for the category element (renders a tree view)
+ *
+ * @example
+ * <typo3-formengine-element-category recordFieldId="some-id" treeWrapperId="some-id">
+ *   ...
+ * </typo3-formengine-element-category>
+ *
+ * This is based on W3C custom elements ("web components") specification, see
+ * https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
+ */
+class CategoryElement extends HTMLElement {
+  private recordField: HTMLInputElement = null;
+  private treeWrapper: HTMLElement = null;
+  private tree: SelectTree = null;
+
+  public async connectedCallback(): Promise<void> {
+    if (this.tree !== null) {
+      // Element is already initialized, which means the component has been rendered before. Nothing to do here.
+      return;
+    }
+
+    await DocumentService.ready();
+    this.recordField = <HTMLInputElement>this.querySelector(selector`#${this.getAttribute('recordFieldId') || '' as string}`);
+    this.treeWrapper = <HTMLElement>this.querySelector(selector`#${this.getAttribute('treeWrapperId') || '' as string}`);
+
+    if (!this.recordField || !this.treeWrapper) {
+      return;
+    }
+
+    this.tree = document.createElement('typo3-backend-form-selecttree') as SelectTree;
+    this.tree.classList.add('tree-wrapper');
+    this.tree.setup = {
+      id: this.treeWrapper.id,
+      dataUrl: this.generateDataUrl(),
+      readOnlyMode: this.recordField.dataset.readOnly,
+      input: this.recordField,
+      exclusiveNodesIdentifiers: this.recordField.dataset.treeExclusiveKeys,
+      validation: JSON.parse(this.recordField.dataset.formengineValidationRules)[0],
+      expandUpToLevel: this.recordField.dataset.treeExpandUpToLevel,
+      unselectableElements: [] as Array<any>
+    };
+
+    this.treeWrapper.append(this.tree);
+    this.registerTreeEventListeners();
+  }
+
+  private registerTreeEventListeners(): void {
+    this.tree.addEventListener('typo3:tree:nodes-prepared', this.loadDataAfter);
+    this.tree.addEventListener('typo3:tree:node-selected', this.selectNode);
+    this.tree.addEventListener('tree:initialized', () => {
+      if (this.recordField.dataset.treeShowToolbar) {
+        const toolbarElement = document.createElement('typo3-backend-form-selecttree-toolbar') as SelectTreeToolbar;
+        toolbarElement.tree = this.tree;
+        this.tree.prepend(toolbarElement);
+      }
+    });
+  }
+
+  private generateDataUrl(): string {
+    return TYPO3.settings.ajaxUrls.record_tree_data + '&' + new URLSearchParams({
+      uid: this.recordField.dataset.uid,
+      command: this.recordField.dataset.command,
+      tableName: this.recordField.dataset.tablename,
+      fieldName: this.recordField.dataset.fieldname,
+      defaultValues: this.recordField.dataset.defaultvalues,
+      overrideValues: this.recordField.dataset.overridevalues,
+      recordTypeValue: this.recordField.dataset.recordtypevalue,
+      flexFormSheetName: this.recordField.dataset.flexformsheetname,
+      flexFormFieldName: this.recordField.dataset.flexformfieldname,
+      flexFormContainerName: this.recordField.dataset.flexformcontainername,
+      dataStructureIdentifier: this.recordField.dataset.datastructureidentifier,
+      flexFormContainerFieldName: this.recordField.dataset.flexformcontainerfieldname,
+      flexFormContainerIdentifier: this.recordField.dataset.flexformcontaineridentifier,
+      flexFormSectionContainerIsNew: this.recordField.dataset.flexformsectioncontainerisnew,
+    }).toString();
+  }
+
+  private readonly selectNode = (evt: CustomEvent) => {
+    const node = evt.detail.node as TreeNodeInterface;
+    this.updateAncestorsIndeterminateState(node);
+    // check all nodes again, to ensure correct display of __indeterminate state
+    this.calculateIndeterminate(this.tree.nodes);
+    this.saveCheckboxes();
+    this.tree.setup.input.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
+  };
+
+  /**
+   * Resets the node.__indeterminate for the whole tree.
+   * It's done once after loading data.
+   * Later __indeterminate state is updated just for the subset of nodes
+   */
+  private readonly loadDataAfter = (evt: CustomEvent) => {
+    this.tree.nodes = evt.detail.nodes.map((node: TreeNodeInterface) => {
+      node.__indeterminate = false;
+      return node;
+    });
+    this.calculateIndeterminate(this.tree.nodes);
+  };
+
+  /**
+   * Sets a comma-separated list of selected nodes identifiers to configured input
+   */
+  private readonly saveCheckboxes = (): void => {
+    this.recordField.value = this.tree.getSelectedNodes().map((node: TreeNodeInterface): string => node.identifier).join(',');
+  };
+
+  /**
+   * Updates the __indeterminate state for ancestors of the current node
+   */
+  private updateAncestorsIndeterminateState(node: TreeNodeInterface): void {
+    // foreach ancestor except node itself
+    let __indeterminate = false;
+    node.__treeParents.forEach((treeIdentifier: string) => {
+      const TreeNodeInterface = this.tree.getNodeByTreeIdentifier(treeIdentifier);
+      TreeNodeInterface.__indeterminate = (node.checked || node.__indeterminate || __indeterminate);
+      // check state for the next level
+      __indeterminate = (TreeNodeInterface.checked || TreeNodeInterface.__indeterminate || node.checked || node.__indeterminate);
+    });
+  }
+
+  /**
+   * Sets __indeterminate state for a subtree.
+   * It relays on the tree to have __indeterminate state reset beforehand.
+   */
+  private calculateIndeterminate(nodes: ReadonlyArray<TreeNodeInterface>): void {
+    nodes.forEach((node: TreeNodeInterface) => {
+      if ((node.checked || node.__indeterminate) && node.__treeParents && node.__treeParents.length > 0) {
+        node.__treeParents.forEach((treeParentIdentifier: string) => {
+          const TreeNodeInterface = this.tree.getNodeByTreeIdentifier(treeParentIdentifier);
+          TreeNodeInterface.__indeterminate = true;
+        });
+      }
+    });
+  }
+}
+
+window.customElements.define('typo3-formengine-element-category', CategoryElement);

package/backend/form-engine/element/color-element.ts

@@ -0,0 +1,81 @@
+/*
+ * 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 DocumentService from '@typo3/core/document-service';
+import RegularEvent from '@typo3/core/event/regular-event';
+import FormEngineValidation from '@typo3/backend/form-engine-validation';
+import { selector } from '@typo3/core/literals';
+import '@typo3/backend/color-picker';
+
+/**
+ * Module: @typo3/backend/form-engine/element/color-element
+ *
+ * Functionality for the color element
+ *
+ * @example
+ * <typo3-formengine-element-color recordFieldId="some-id">
+ *   ...
+ * </typo3-formengine-element-color>
+ *
+ * This is based on W3C custom elements ("web components") specification, see
+ * https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
+ */
+class ColorElement extends HTMLElement {
+  private element: HTMLInputElement = null;
+
+  public async connectedCallback(): Promise<void> {
+    if (this.element !== null) {
+      // Element is already initialized, which means the component has been rendered before. Nothing to do here.
+      return;
+    }
+
+    const recordFieldId = this.getAttribute('recordFieldId');
+    if (recordFieldId === null) {
+      return;
+    }
+
+    await DocumentService.ready();
+    this.element = this.querySelector<HTMLInputElement>(selector`#${recordFieldId}`);
+    if (!this.element) {
+      return;
+    }
+
+    this.registerEventHandler();
+  }
+
+  private registerEventHandler(): void {
+    const hiddenElement: HTMLInputElement|null = document.querySelector(selector`input[name="${this.element.dataset.formengineInputName}"]`);
+
+    new RegularEvent('blur', (e: Event): void => {
+      hiddenElement.value = (e.target as HTMLInputElement).value;
+      this.handleEvent(e);
+    }).bindTo(this.element);
+
+    new RegularEvent('formengine.cp.change', (e: Event): void => {
+      this.handleEvent(e);
+    }).bindTo(this.element);
+  }
+
+
+  private handleEvent(e: Event): void {
+    FormEngineValidation.validateField(e.target as HTMLInputElement);
+    FormEngineValidation.markFieldAsChanged(e.target as HTMLInputElement);
+
+    document.querySelectorAll('.module-docheader-bar .btn').forEach((btn: HTMLButtonElement): void => {
+      btn.classList.remove('disabled');
+      btn.disabled = false;
+    });
+  }
+}
+
+window.customElements.define('typo3-formengine-element-color', ColorElement);

package/backend/form-engine/element/datetime-element.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 DocumentService from '@typo3/core/document-service';
+import FormEngineValidation from '@typo3/backend/form-engine-validation';
+import RegularEvent from '@typo3/core/event/regular-event';
+
+/**
+ * Module: @typo3/backend/form-engine/element/datetime-element
+ *
+ * Functionality for the datetime element
+ *
+ * @example
+ * <typo3-formengine-element-datetime recordFieldId="some-id">
+ *   ...
+ * </typo3-formengine-element-datetime>
+ *
+ * This is based on W3C custom elements ("web components") specification, see
+ * https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
+ */
+class DatetimeElement extends HTMLElement {
+  private element: HTMLInputElement = null;
+
+  public async connectedCallback(): Promise<void> {
+    if (this.element !== null) {
+      // Element is already initialized, which means the component has been rendered before. Nothing to do here.
+      return;
+    }
+
+    await DocumentService.ready();
+    this.element = document.getElementById((this.getAttribute('recordFieldId') || '' as string)) as HTMLInputElement;
+
+    if (!this.element) {
+      return;
+    }
+
+    this.registerEventHandler();
+    import('../../date-time-picker').then(({ default: DateTimePicker }): void => {
+      DateTimePicker.initialize(this.element);
+    });
+  }
+
+  private registerEventHandler(): void {
+    new RegularEvent('formengine.dp.change', (e: CustomEvent): void => {
+      FormEngineValidation.validateField(e.target as HTMLInputElement);
+      FormEngineValidation.markFieldAsChanged(e.target as HTMLInputElement);
+
+      document.querySelectorAll('.module-docheader-bar .btn').forEach((btn: HTMLButtonElement): void => {
+        btn.classList.remove('disabled');
+        btn.disabled = false;
+      });
+    }).bindTo(this.element);
+  }
+}
+
+window.customElements.define('typo3-formengine-element-datetime', DatetimeElement);

package/backend/form-engine/element/extra/char-counter.ts

@@ -0,0 +1,112 @@
+/*
+ * 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 { html, LitElement, type TemplateResult } from 'lit';
+import { lll } from '@typo3/core/lit-helper';
+
+@customElement('typo3-backend-formengine-char-counter')
+export class CharCounter extends LitElement {
+  @property() target: string;
+  @state() private remainingCharacters: number = 0;
+
+  private targetElement: HTMLInputElement|HTMLTextAreaElement = null;
+  private readonly threshold = 15;
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    this.registerCallbacks();
+
+    this.hidden = true;
+  }
+
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeCallbacks();
+  }
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    return this;
+  }
+
+  protected override updated(changedProperties: Map<string, any>): void {
+    if (changedProperties.has('target')) {
+      this.removeCallbacks();
+      this.targetElement = document.querySelector(this.target);
+      this.registerCallbacks();
+    }
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <span class="form-hint form-hint--${this.determineCounterClass()}">
+        ${lll(('FormEngine.remainingCharacters')).replace('{0}', this.remainingCharacters.toString(10))}
+      </span>
+    `;
+  }
+
+  private registerCallbacks(): void {
+    if (this.targetElement === null) {
+      return;
+    }
+    this.targetElement.addEventListener('input', this.onInput);
+    this.targetElement.addEventListener('focus', this.onFocus);
+    this.targetElement.addEventListener('blur', this.onBlur);
+  }
+
+  private removeCallbacks(): void {
+    if (this.targetElement === null) {
+      return;
+    }
+    this.targetElement.removeEventListener('input', this.onInput);
+    this.targetElement.removeEventListener('focus', this.onFocus);
+    this.targetElement.removeEventListener('blur', this.onBlur);
+  }
+
+  private readonly onInput = (e: InputEvent): void => {
+    this.determineRemainingCharacters(e.target as HTMLInputElement|HTMLTextAreaElement);
+  };
+
+  private readonly onFocus = (e: FocusEvent): void => {
+    this.determineRemainingCharacters(e.target as HTMLInputElement|HTMLTextAreaElement);
+    this.hidden = false;
+  };
+
+  private readonly onBlur = (): void => {
+    this.hidden = true;
+  };
+
+  private determineRemainingCharacters(field: HTMLInputElement|HTMLTextAreaElement): void {
+    const fieldText = field.value;
+    const currentFieldLength = fieldText.length;
+    const numberOfLineBreaks = (fieldText.match(/\n/g) || []).length;
+
+    this.remainingCharacters = this.targetElement.maxLength - currentFieldLength - numberOfLineBreaks;
+  }
+
+  private determineCounterClass(): string {
+    if (this.remainingCharacters < this.threshold) {
+      return 'danger';
+    }
+    if (this.remainingCharacters < this.threshold * 2) {
+      return 'warning';
+    }
+    return 'info';
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-formengine-char-counter': CharCounter;
+  }
+}

package/backend/form-engine/element/extra/select-box-filter.ts

@@ -0,0 +1,85 @@
+/*
+ * 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 RegularEvent from '@typo3/core/event/regular-event';
+
+enum Selectors {
+  fieldContainerSelector = '.t3js-formengine-field-group',
+  filterTextFieldSelector = '.t3js-formengine-multiselect-filter-textfield',
+  filterSelectFieldSelector = '.t3js-formengine-multiselect-filter-dropdown',
+}
+
+/**
+ * Select field filter functions, see TCA option "multiSelectFilterItems"
+ */
+class SelectBoxFilter {
+  private readonly selectElement: HTMLSelectElement = null;
+  private availableOptions: NodeListOf<HTMLOptionElement> = null;
+
+  constructor(selectElement: HTMLSelectElement) {
+    this.selectElement = selectElement;
+
+    this.initializeEvents();
+  }
+
+  private static toggleOptGroup(option: HTMLOptionElement): void {
+    const optGroup = <HTMLOptGroupElement>option.parentElement;
+    if (!(optGroup instanceof HTMLOptGroupElement)) {
+      return;
+    }
+    if (optGroup.querySelectorAll('option:not([hidden]):not([disabled]):not(.hidden)').length === 0) {
+      optGroup.hidden = true;
+    } else {
+      optGroup.hidden = false;
+      optGroup.disabled = false;
+      optGroup.classList.remove('hidden');
+    }
+  }
+
+  private initializeEvents(): void {
+    const wizardsElement = this.selectElement.closest('.form-wizards-wrap');
+    if (wizardsElement === null) {
+      return;
+    }
+
+    new RegularEvent('input', (e: Event): void => {
+      this.filter((<HTMLInputElement>e.target).value);
+    }).delegateTo(wizardsElement, Selectors.filterTextFieldSelector);
+
+    new RegularEvent('change', (e: Event): void => {
+      this.filter((<HTMLInputElement>e.target).value);
+    }).delegateTo(wizardsElement, Selectors.filterSelectFieldSelector);
+  }
+
+  /**
+   * Filter the actual items
+   *
+   * @param {string} filterText
+   */
+  private filter(filterText: string): void {
+    if (this.availableOptions === null) {
+      this.availableOptions = this.selectElement.querySelectorAll('option');
+    }
+
+    // Escape filter text to prevent RegExp() exceptions
+    const escapedFilterText = filterText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+    const matchFilter = new RegExp(escapedFilterText, 'i');
+    this.availableOptions.forEach((option: HTMLOptionElement): void => {
+      option.hidden = filterText.length > 0 && option.textContent.match(matchFilter) === null;
+      SelectBoxFilter.toggleOptGroup(option);
+    });
+  }
+}
+
+export default SelectBoxFilter;