typo3-typescript-sources 13.4.20

package/backend/form-engine/element/select-multiple-side-by-side-element.ts

@@ -0,0 +1,83 @@
+/*
+ * 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 { AbstractSortableSelectItems } from './abstract-sortable-select-items';
+import DocumentService from '@typo3/core/document-service';
+import FormEngine from '@typo3/backend/form-engine';
+import SelectBoxFilter from './extra/select-box-filter';
+import RegularEvent from '@typo3/core/event/regular-event';
+import Utility from '@typo3/backend/utility';
+
+class SelectMultipleSideBySideElement extends AbstractSortableSelectItems {
+  private selectedOptionsElement: HTMLSelectElement = null;
+  private availableOptionsElement: HTMLSelectElement = null;
+
+  constructor(selectedOptionsElementId: string, availableOptionsElementId: string) {
+    super();
+
+    DocumentService.ready().then((document: Document): void => {
+      this.selectedOptionsElement = <HTMLSelectElement>document.getElementById(selectedOptionsElementId);
+      this.availableOptionsElement = <HTMLSelectElement>document.getElementById(availableOptionsElementId);
+      if (this.selectedOptionsElement === null || this.availableOptionsElement === null) {
+        return;
+      }
+      this.registerEventHandler();
+    });
+  }
+
+  private registerEventHandler(): void {
+    this.registerSortableEventHandler(this.selectedOptionsElement);
+    this.registerKeyboardEvents();
+
+    this.availableOptionsElement.addEventListener('click', (e: Event): void => {
+      const el = <HTMLSelectElement>e.currentTarget;
+      this.handleOptionChecked(el);
+    });
+
+    // tslint:disable-next-line:no-unused-expression
+    new SelectBoxFilter(this.availableOptionsElement);
+  }
+
+  private handleOptionChecked(element: HTMLSelectElement): void {
+    const fieldName = element.dataset.relatedfieldname;
+    if (fieldName) {
+      const exclusiveValues = Utility.trimExplode(',', element.dataset?.exclusivevalues ?? '');
+      const selectedOptions = element.querySelectorAll('option:checked'); // Yep, :checked finds selected options
+      if (selectedOptions.length > 0) {
+        selectedOptions.forEach((optionElement: HTMLOptionElement): void => {
+          FormEngine.setSelectOptionFromExternalSource(
+            fieldName,
+            optionElement.value,
+            optionElement.textContent,
+            optionElement.getAttribute('title'),
+            exclusiveValues,
+            optionElement,
+          );
+        });
+      }
+    }
+  }
+
+  private registerKeyboardEvents(): void {
+    new RegularEvent('keydown', (e: KeyboardEvent): void => {
+      const el = <HTMLSelectElement>e.currentTarget;
+      if (e.code === 'Enter') {
+        e.preventDefault();
+        this.handleOptionChecked(el);
+      }
+    }).bindTo(this.availableOptionsElement);
+  }
+
+}
+
+export default SelectMultipleSideBySideElement;

package/backend/form-engine/element/select-single-element.ts

@@ -0,0 +1,82 @@
+/*
+ * 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';
+import DocumentService from '@typo3/core/document-service';
+import FormEngine, { type OnFieldChangeItem } from '@typo3/backend/form-engine';
+import { selector } from '@typo3/core/literals';
+
+interface SelectSingleElementOptions {
+  onChange?: OnFieldChangeItem[];
+}
+
+/**
+ * Module: @typo3/backend/form-engine/element/select-single-element
+ * Logic for SelectSingleElement
+ */
+class SelectSingleElement {
+  public initializeOnReady(selector: string, options: SelectSingleElementOptions): void {
+    DocumentService.ready().then(() => {
+      this.initialize(selector, options);
+    });
+  }
+
+  public initialize = (elementSelector: string, options: SelectSingleElementOptions): void => {
+    const selectElement: HTMLSelectElement = document.querySelector(elementSelector);
+    if (selectElement === null) {
+      return;
+    }
+    options = options || {};
+
+    new RegularEvent('change', (e: Event): void => {
+      const target = e.target as HTMLSelectElement;
+      const groupIconContainer: HTMLElement = target.parentElement.querySelector('.input-group-icon');
+
+      // Update prepended select icon
+      if (groupIconContainer !== null) {
+        groupIconContainer.innerHTML = (target.options[target.selectedIndex].dataset.icon);
+      }
+
+      const selectIcons: HTMLElement = target.closest('.t3js-formengine-field-item').querySelector('.t3js-forms-select-single-icons');
+      if (selectIcons !== null) {
+        const activeItem = selectIcons.querySelector('.form-wizard-icon-list-item button.active, .form-wizard-icon-list-item a.active');
+        if (activeItem !== null) {
+          activeItem.classList.remove('active');
+        }
+
+        const selectionIcon = selectIcons.querySelector(selector`[data-select-index="${target.selectedIndex.toString(10)}"]`);
+        if (selectionIcon !== null) {
+          selectionIcon.closest('.form-wizard-icon-list-item button, .form-wizard-icon-list-item a').classList.add('active');
+        }
+      }
+    }).bindTo(selectElement);
+
+    if (options.onChange instanceof Array) {
+      // hand `OnFieldChange` processing over to `FormEngine`
+      new RegularEvent('change', () => FormEngine.processOnFieldChange(options.onChange)).bindTo(selectElement);
+    }
+
+    new RegularEvent('click', (e: Event, target: HTMLAnchorElement): void => {
+      const currentActive = target.closest('.t3js-forms-select-single-icons').querySelector('.form-wizard-icon-list-item button.active, .form-wizard-icon-list-item a.active');
+      if (currentActive !== null) {
+        currentActive.classList.remove('active');
+      }
+
+      selectElement.selectedIndex = parseInt(target.dataset.selectIndex, 10);
+      selectElement.dispatchEvent(new Event('change'));
+      target.closest('.form-wizard-icon-list-item button, .form-wizard-icon-list-item a').classList.add('active');
+    }).delegateTo(selectElement.closest('.form-control-wrap'), '.t3js-forms-select-single-icons .form-wizard-icon-list-item button:not(.active), .t3js-forms-select-single-icons .form-wizard-icon-list-item a:not(.active)');
+  };
+}
+
+export default new SelectSingleElement();

package/backend/form-engine/element/select-tree-element.ts

@@ -0,0 +1,148 @@
+/*
+* 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 { type SelectTree } from './select-tree';
+import { type SelectTreeToolbar } from './select-tree-toolbar';
+import '@typo3/backend/element/icon-element';
+import DocumentService from '@typo3/core/document-service';
+import FormEngine, { type OnFieldChangeItem } from '@typo3/backend/form-engine';
+import type { TreeNodeInterface } from '@typo3/backend/tree/tree-node';
+
+export class SelectTreeElement {
+  private recordField: HTMLInputElement = null;
+  private tree: SelectTree = null;
+
+  constructor(treeWrapperId: string, treeRecordFieldId: string, callback?: () => void, onFieldChangeItems?: OnFieldChangeItem[]) {
+    if (callback instanceof Function) {
+      throw new Error('Function `callback` is not supported anymore since TYPO3 v12.0');
+    }
+
+    DocumentService.ready().then((): void => {
+      this.initialize(treeWrapperId, treeRecordFieldId, onFieldChangeItems);
+    });
+  }
+
+  private initialize(treeWrapperId: string, treeRecordFieldId: string, onFieldChangeItems?: OnFieldChangeItem[]): void {
+    this.recordField = <HTMLInputElement>document.getElementById(treeRecordFieldId);
+    const treeWrapper = <HTMLElement>document.getElementById(treeWrapperId);
+    this.tree = document.createElement('typo3-backend-form-selecttree') as SelectTree;
+    this.tree.classList.add('tree-wrapper');
+    this.tree.addEventListener('typo3:tree:nodes-prepared', this.loadDataAfter);
+    this.tree.addEventListener('typo3:tree:node-selected', this.selectNode);
+
+    if (onFieldChangeItems instanceof Array) {
+      this.tree.addEventListener('typo3:tree:node-selected', () => { FormEngine.processOnFieldChange(onFieldChangeItems); } );
+    }
+
+    const settings = {
+      id: treeWrapperId,
+      dataUrl: this.generateRequestUrl(),
+      readOnlyMode: parseInt(this.recordField.dataset.readOnly, 10) === 1,
+      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.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);
+      }
+    });
+    this.tree.setup = settings;
+    treeWrapper.append(this.tree);
+  }
+
+  private generateRequestUrl(): string {
+    const params = {
+      tableName: this.recordField.dataset.tablename,
+      fieldName: this.recordField.dataset.fieldname,
+      uid: this.recordField.dataset.uid,
+      defaultValues: this.recordField.dataset.defaultvalues,
+      overrideValues: this.recordField.dataset.overridevalues,
+      recordTypeValue: this.recordField.dataset.recordtypevalue,
+      dataStructureIdentifier: this.recordField.dataset.datastructureidentifier,
+      flexFormSheetName: this.recordField.dataset.flexformsheetname,
+      flexFormFieldName: this.recordField.dataset.flexformfieldname,
+      flexFormContainerName: this.recordField.dataset.flexformcontainername,
+      flexFormContainerIdentifier: this.recordField.dataset.flexformcontaineridentifier,
+      flexFormContainerFieldName: this.recordField.dataset.flexformcontainerfieldname,
+      flexFormSectionContainerIsNew: this.recordField.dataset.flexformsectioncontainerisnew,
+      command: this.recordField.dataset.command,
+    };
+    return TYPO3.settings.ajaxUrls.record_tree_data + '&' + new URLSearchParams(params).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 => {
+    if (typeof this.recordField === 'undefined') {
+      return;
+    }
+    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((treeParentIdentifier: string) => {
+      const TreeNodeInterface = this.tree.getNodeByTreeIdentifier(treeParentIdentifier);
+      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;
+        });
+      }
+    });
+  }
+}

package/backend/form-engine/element/select-tree-toolbar.ts

@@ -0,0 +1,118 @@
+/*
+* This file is part of the TYPO3 CMS project.
+*
+* It is free software; you can redistribute it and/or modify it under
+* the terms of the GNU General Public License, either version 2
+* of the License, or any later version.
+*
+* For the full copyright and license information, please read the
+* LICENSE.txt file that was distributed with this source code.
+*
+* The TYPO3 project - inspiring people to share!
+*/
+
+import { html, LitElement, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators';
+import { lll } from '@typo3/core/lit-helper';
+import type { SelectTree } from './select-tree';
+import type { TreeNodeInterface } from '../../tree/tree-node';
+
+@customElement('typo3-backend-form-selecttree-toolbar')
+export class SelectTreeToolbar extends LitElement {
+  public tree: SelectTree;
+  private readonly settings = {
+    collapseAllBtn: 'collapse-all-btn',
+    expandAllBtn: 'expand-all-btn',
+    searchInput: 'search-input',
+    toggleHideUnchecked: 'hide-unchecked-btn'
+  };
+
+  /**
+   * State of the hide unchecked toggle button
+   *
+   * @type {boolean}
+   */
+  private hideUncheckedState: boolean = false;
+
+  // disable shadow dom for now
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    return this;
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <div class="tree-toolbar btn-toolbar">
+        <div class="input-group">
+          <span class="input-group-text input-group-icon filter">
+            <typo3-backend-icon identifier="actions-filter" size="small"></typo3-backend-icon>
+          </span>
+          <input type="search" class="form-control ${this.settings.searchInput}" placeholder="${lll('tcatree.findItem')}" @input="${(evt: InputEvent) => this.filter(evt)}">
+        </div>
+        <div class="btn-group">
+          <button type="button" class="btn btn-default ${this.settings.expandAllBtn}" title="${lll('tcatree.expandAll')}" @click="${() => this.expandAll()}">
+            <typo3-backend-icon identifier="apps-pagetree-category-expand-all" size="small"></typo3-backend-icon>
+          </button>
+          <button type="button" class="btn btn-default ${this.settings.collapseAllBtn}" title="${lll('tcatree.collapseAll')}" @click="${(evt: MouseEvent) => this.collapseAll(evt)}">
+            <typo3-backend-icon identifier="apps-pagetree-category-collapse-all" size="small"></typo3-backend-icon>
+          </button>
+          <button type="button" class="btn btn-default ${this.settings.toggleHideUnchecked}" title="${lll('tcatree.toggleHideUnchecked')}" @click="${() => this.toggleHideUnchecked()}">
+            <typo3-backend-icon identifier="apps-pagetree-category-toggle-hide-checked" size="small"></typo3-backend-icon>
+          </button>
+        </div>
+      </div>
+    `;
+  }
+
+  /**
+   * Collapse children of root node
+   */
+  private collapseAll(evt: MouseEvent): void {
+    evt.preventDefault();
+    // Only collapse nodes that aren't on the root level
+    this.tree.nodes.forEach((node: TreeNodeInterface) => {
+      if (node.__parents.length) {
+        this.tree.hideChildren(node);
+      }
+    });
+  }
+
+
+  /**
+   * Expand all nodes
+   */
+  private expandAll() {
+    this.tree.expandAll();
+  }
+
+  private filter(event: InputEvent): void {
+    const inputEl = <HTMLInputElement>event.target;
+    this.tree.filter(inputEl.value.trim());
+  }
+
+  /**
+   * Show only checked items
+   */
+  private toggleHideUnchecked(): void {
+    this.hideUncheckedState = !this.hideUncheckedState;
+    if (this.hideUncheckedState) {
+      this.tree.nodes.forEach((node: any) => {
+        if (node.checked) {
+          this.tree.showParents(node);
+          node.expanded = true;
+          node.__hidden = false;
+        } else {
+          node.expanded = false;
+          node.__hidden = true;
+        }
+      });
+    } else {
+      this.tree.nodes.forEach((node: any) => node.__hidden = false);
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-form-selecttree-toolbar': SelectTreeToolbar;
+  }
+}

package/backend/form-engine/element/select-tree.ts

@@ -0,0 +1,210 @@
+/*
+ * 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, type TemplateResult } from 'lit';
+import { Tree, type TreeSettings } from '@typo3/backend/tree/tree';
+import { customElement, state } from 'lit/decorators';
+import type { TreeNodeInterface } from '@typo3/backend/tree/tree-node';
+
+interface SelectTreeSettings extends TreeSettings {
+  exclusiveNodesIdentifiers: '';
+  validation: {[keys: string]: any};
+  unselectableElements: Array<any>,
+  readOnlyMode: false
+}
+
+@customElement('typo3-backend-form-selecttree')
+export class SelectTree extends Tree
+{
+  @state() override settings: SelectTreeSettings = {
+    unselectableElements: [],
+    exclusiveNodesIdentifiers: '',
+    validation: {},
+    readOnlyMode: false,
+    showIcons: true,
+    width: 300,
+    dataUrl: '',
+    defaultProperties: {},
+    expandUpToLevel: null as any,
+  };
+
+  /**
+   * Exclusive node which is currently selected
+   */
+  @state() exclusiveSelectedNode: TreeNodeInterface = null;
+
+  constructor() {
+    super();
+    this.addEventListener('typo3:tree:nodes-prepared', this.prepareLoadedNodes);
+  }
+
+  /**
+   * Expand all nodes and refresh view
+   */
+  public expandAll(): void {
+    this.nodes.forEach((node: TreeNodeInterface) => { this.showChildren(node); });
+  }
+
+  /**
+   * Node selection logic (triggered by different events) to select multiple
+   * nodes (unlike SVG Tree itself).
+   */
+  public override selectNode(node: TreeNodeInterface, propagate: boolean = true): void {
+    if (!this.isNodeSelectable(node)) {
+      return;
+    }
+
+    const checked = node.checked;
+    this.handleExclusiveNodeSelection(node);
+
+    if (this.settings.validation && this.settings.validation.maxItems) {
+      if (!checked && this.getSelectedNodes().length >= this.settings.validation.maxItems) {
+        return;
+      }
+    }
+
+    node.checked = !checked;
+    this.dispatchEvent(new CustomEvent('typo3:tree:node-selected', { detail: { node: node, propagate: propagate } }));
+  }
+
+  public override filter(searchTerm?: string|null): void {
+    const results: TreeNodeInterface[] = [];
+    this.searchTerm = searchTerm;
+    if (this.nodes.length) {
+      this.nodes[0].__expanded = false;
+    }
+    const firstNode = this.nodes[0];
+    const regex = new RegExp(searchTerm, 'i');
+
+    this.nodes.forEach((node: any) => {
+      // skip the root node in searches
+      if (node === firstNode) {
+        return;
+      }
+
+      node.__expanded = false;
+      node.__hidden = true;
+
+      if (regex.test(node.name)) {
+        results.push(node);
+      }
+    });
+
+    results.forEach((node) => {
+      node.__hidden = false;
+      this.showParents(node);
+    });
+
+    // filter for children of results and show them
+    const children = this.nodes.filter(node => results.some(result => node.__parents.includes(result.identifier)));
+    children.forEach((child) => {
+      child.__hidden = false;
+    });
+  }
+
+  /**
+   * Finds and show all parents of node
+   */
+  public showParents(node: any): void {
+    if (node.__parents.length === 0) {
+      return;
+    }
+    const parent = this.nodes.find((searchNode) => searchNode.identifier === node.__parents.at(-1));
+    parent.__hidden = false;
+    parent.__expanded = true;
+    this.showParents(parent);
+  }
+
+  /**
+   * Check whether node can be selected.
+   * In some cases (e.g. selecting a parent) it should not be possible to select
+   * element (as it's own parent).
+   */
+  protected override isNodeSelectable(node: TreeNodeInterface): boolean {
+    return !this.settings.readOnlyMode && this.settings.unselectableElements.indexOf(node.identifier) === -1;
+  }
+
+  /**
+   * Add checkbox before the icon
+   */
+  protected override createNodeContent(node: TreeNodeInterface): TemplateResult {
+    return html`
+      ${this.renderCheckbox(node)}
+      ${super.createNodeContent(node)}
+    `;
+  }
+
+  /**
+   * Adds svg elements for checkbox rendering.
+   */
+  private renderCheckbox(node: TreeNodeInterface): TemplateResult {
+    const checked = Boolean(node.checked);
+
+    let icon = 'actions-square';
+    if (!this.isNodeSelectable(node) && !checked) {
+      icon = 'actions-minus-circle';
+    } else if (node.checked) {
+      icon = 'actions-check-square';
+    } else if (node.__indeterminate && !checked) {
+      icon = 'actions-minus-square';
+    }
+
+    return html`
+      <span class="node-select">
+        <typo3-backend-icon identifier="${icon}" size="small"></typo3-backend-icon>
+      </span>
+    `;
+  }
+
+  /**
+   * Check if a node has all information to be used.
+   */
+  private prepareLoadedNodes(evt: CustomEvent): void {
+    const nodes = evt.detail.nodes as Array<TreeNodeInterface>;
+    evt.detail.nodes = nodes.map((node: TreeNodeInterface) => {
+      if (node.selectable === false) {
+        this.settings.unselectableElements.push(node.identifier);
+      }
+      return node;
+    });
+  }
+
+  /**
+   * Handle exclusive nodes functionality
+   * If a node is one of the exclusiveNodesIdentifiers list,
+   * all other nodes has to be unselected before selecting this node.
+   *
+   * @param {Node} node
+   */
+  private handleExclusiveNodeSelection(node: TreeNodeInterface): void {
+    const exclusiveKeys = this.settings.exclusiveNodesIdentifiers.split(',');
+    if (this.settings.exclusiveNodesIdentifiers.length && node.checked === false) {
+      if (exclusiveKeys.indexOf('' + node.identifier) > -1) {
+        // this key is exclusive, so uncheck all others
+        this.resetSelectedNodes();
+        this.exclusiveSelectedNode = node;
+      } else if (exclusiveKeys.indexOf('' + node.identifier) === -1 && this.exclusiveSelectedNode) {
+
+        // current node is not exclusive, but other exclusive node is already selected
+        this.exclusiveSelectedNode.checked = false;
+        this.exclusiveSelectedNode = null;
+      }
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-form-selecttree': SelectTree;
+  }
+}