typo3-typescript-sources 14.2.0 → 14.3.1

package/backend/tree/tree.ts

@@ -87,6 +87,24 @@ export class TreeNodeMap<T extends TreeNodeInterface = TreeNodeInterface> {
   }
 }
 
+export class TreeFilterAppliedEvent extends CustomEvent<{searchTerm: string, resultCount: number}> {
+  static readonly eventName = 'typo3:tree:filter-applied';
+  constructor(searchTerm: string, resultCount: number) {
+    super(TreeFilterAppliedEvent.eventName, {
+      detail: { searchTerm, resultCount },
+      bubbles: true,
+      composed: true,
+    });
+  }
+}
+
+export class TreeFilterResetEvent extends Event {
+  static readonly eventName = 'typo3:tree:filter-reset';
+  constructor() {
+    super(TreeFilterResetEvent.eventName, { bubbles: true, composed: true });
+  }
+}
+
 export class Tree extends LitElement {
   @property({ type: Object }) setup?: {[keys: string]: any} = null;
   @state() settings: TreeSettings = {
@@ -474,22 +492,25 @@ export class Tree extends LitElement {
         }).then(() => {
           this.loading = false;
           this.currentFilterRequest = null;
+          this.dispatchEvent(new TreeFilterAppliedEvent(this.searchTerm, this.searchResults));
         });
     } else {
       // restore original state without filters
-      this.resetFilter();
-      this.loading = false;
+      this.resetFilter().then(() => {
+        this.loading = false;
+        this.dispatchEvent(new TreeFilterResetEvent());
+      });
     }
   }
 
-  public resetFilter(): void
+  public async resetFilter(): Promise<void>
   {
     this.searchTerm = '';
     this.searchResults = 0;
     if (this.unfilteredNodes.length > 0) {
       const currentlySelected = this.getSelectedNodes()[0];
       if (typeof currentlySelected === 'undefined') {
-        this.loadData();
+        await this.loadData();
         return;
       }
       this.nodeMap = new TreeNodeMap(this.enhanceNodes(JSON.parse(this.unfilteredNodes)));
@@ -499,10 +520,10 @@ export class Tree extends LitElement {
       if (currentlySelectedNode) {
         this.selectNode(currentlySelectedNode, false);
       } else {
-        this.loadData();
+        await this.loadData();
       }
     } else {
-      this.loadData();
+      await this.loadData();
     }
   }
 

package/dashboard/dashboard.ts

@@ -1578,7 +1578,4 @@ declare global {
 
     [newRecordWizardEventName]: CustomEvent<NewRecordWizardItemSelectedEventInterface>;
   }
-  interface FocusOptions {
-    focusVisible: boolean;
-  }
 }

package/form/backend/form-editor/inspector-component.ts

@@ -1821,10 +1821,10 @@ export function renderRequiredValidatorEditor(
         getCurrentlySelectedFormElement().set(propertyPath, propertyValue);
       }
     } else {
-      getPublisherSubscriber().publish('view/inspector/removeCollectionElement/perform', [validatorIdentifier, 'validators']);
       if (getUtility().isNonEmptyString(propertyPath)) {
         getCurrentlySelectedFormElement().unset(propertyPath);
       }
+      getPublisherSubscriber().publish('view/inspector/removeCollectionElement/perform', [validatorIdentifier, 'validators']);
       propertyData = getCurrentlySelectedFormElement().get(validationErrorMessagePropertyPath);
       if (getUtility().isUndefinedOrNull(propertyData)) { propertyData = []; }
       getCurrentlySelectedFormElement().set(validationErrorMessagePropertyPath, renewValidationErrorMessages(

package/form/backend/form-editor/stage-component.ts

@@ -583,7 +583,7 @@ function wireAbstractViewFormElementToolbarEventListeners(toolbar: HTMLElement,
   }
 
   qs('abstractViewToolbarRemoveElement')?.addEventListener('click', function() {
-    getViewModel().showRemoveFormElementModal();
+    getViewModel().showRemoveFormElementModal(formElement);
   });
 }
 
@@ -631,7 +631,7 @@ export function createAndAddAbstractViewFormElementToolbar(
     });
 
     toolbar.addEventListener('toolbar-remove-element', () => {
-      getViewModel().showRemoveFormElementModal();
+      getViewModel().showRemoveFormElementModal(formElement);
     });
   }
 
@@ -908,7 +908,7 @@ export function renderFormElementStageItem(formElement: FormElement, template: H
   });
 
   stageItem.addEventListener('toolbar-remove-element', () => {
-    getViewModel().showRemoveFormElementModal();
+    getViewModel().showRemoveFormElementModal(formElement);
   });
 
   template.replaceChildren(stageItem);

package/form/backend/form-manager/view-model.ts

@@ -39,19 +39,21 @@ enum Identifiers {
 }
 
 function newFormSetup(formManagerApp: FormManager): void {
-  const newFormModalTrigger: HTMLElement = document.querySelector<HTMLElement>(Identifiers.newFormModalTrigger);
-  newFormModalTrigger.addEventListener('click', async (): Promise<void> => {
-    await topLevelModuleImport('@typo3/form/backend/form-wizard/form-wizard.js');
-    const content = html`<typo3-backend-form-wizard .formManager="${formManagerApp}"
-    ></typo3-backend-form-wizard>`;
-
-    Modal.advanced({
-      title: formManagerLabels.get('formManager.newFormWizard.step1.title'),
-      content: content,
-      severity: SeverityEnum.notice,
-      size: Modal.sizes.medium,
-      staticBackdrop: true,
-      buttons: []
+  document.querySelectorAll<HTMLElement>(Identifiers.newFormModalTrigger).forEach((element: HTMLElement): void => {
+    element.addEventListener('click', async (e: Event): Promise<void> => {
+      e.preventDefault();
+      await topLevelModuleImport('@typo3/form/backend/form-wizard/form-wizard.js');
+      const content = html`<typo3-backend-form-wizard .formManager="${formManagerApp}"
+      ></typo3-backend-form-wizard>`;
+
+      Modal.advanced({
+        title: formManagerLabels.get('formManager.newFormWizard.step1.title'),
+        content: content,
+        severity: SeverityEnum.notice,
+        size: Modal.sizes.medium,
+        staticBackdrop: true,
+        buttons: []
+      });
     });
   });
 }

package/linkvalidator/linkvalidator.ts

@@ -13,22 +13,17 @@
 
 import DocumentService from '@typo3/core/document-service';
 import Notification from '@typo3/backend/notification';
+import { ProgressBarElement } from '@typo3/backend/element/progress-bar-element';
 import RegularEvent from '@typo3/core/event/regular-event';
 import SortableTable from '@typo3/backend/sortable-table';
 
 enum Selectors {
-  // Check
-  linktypesSelectorCheck = '.t3js-linkvalidator-settings input[type="checkbox"].options-by-type-check',
   actionButtonSelectorCheck = '.t3js-linkvalidator-action-button-check',
-
-  // Report
-  toggleAllLinktypesSelectorReport = '.t3js-linkvalidator-settings input[type="checkbox"].options-by-type-toggle-all-report',
-  linktypesSelectorReport = '.t3js-linkvalidator-settings input[type="checkbox"].options-by-type-report',
-  actionButtonSelectorReport = '.t3js-linkvalidator-action-button-report'
+  actionButtonSelectorReport = '.t3js-linkvalidator-action-button-report',
+  reportTable = '.t3js-linkvalidator-report-table',
 }
 
 enum Identifier {
-  toggleAllLinktypesIdReport = 'options-by-type-toggle-all-report',
   brokenLinksTableIdReport = 'typo3-broken-links-table'
 }
 
@@ -36,6 +31,8 @@ enum Identifier {
  * Module: @typo3/linkvalidator/linkvalidator
  */
 class Linkvalidator {
+  private progressBar: ProgressBarElement | null = null;
+
   constructor() {
     DocumentService.ready().then((): void => {
       const linkList = document.getElementById(Identifier.brokenLinksTableIdReport);
@@ -49,51 +46,21 @@ class Linkvalidator {
     this.initializeEvents();
   }
 
-  private static allCheckBoxesAreChecked(checkBoxes: NodeListOf<HTMLInputElement>): boolean {
-    const checkboxArray = Array.from(checkBoxes);
-    return checkBoxes.length === checkboxArray.filter((checkBox: HTMLInputElement) => checkBox.checked).length;
-  }
-
-  private toggleActionButtonReport(): void {
-    document.querySelector(Selectors.actionButtonSelectorReport)?.toggleAttribute(
-      'disabled',
-      !document.querySelectorAll('input[type="checkbox"]:checked').length
-    );
-  }
-
-  /**
-   * Enables the "Toggle all" checkbox on document load if all child checkboxes are checked
-   */
-  private toggleTriggerCheckBoxReport(): void {
-    const checkBoxes: NodeListOf<HTMLInputElement> = document.querySelectorAll(Selectors.linktypesSelectorReport);
-    (document.getElementById(Identifier.toggleAllLinktypesIdReport) as HTMLInputElement).checked = Linkvalidator.allCheckBoxesAreChecked(checkBoxes);
+  private getProgress(): ProgressBarElement {
+    if (!this.progressBar || !this.progressBar.isConnected) {
+      this.progressBar = document.createElement('typo3-backend-progress-bar');
+      document.querySelector(Selectors.reportTable).prepend(this.progressBar);
+    }
+    return this.progressBar;
   }
 
   private initializeEvents(): void {
-    // toggleAll (checkboxes): on change
-    new RegularEvent('change', (e: Event, currentTarget: HTMLInputElement): void => {
-      const checkBoxes: NodeListOf<HTMLInputElement> = document.querySelectorAll(Selectors.linktypesSelectorReport);
-      const checkIt = !Linkvalidator.allCheckBoxesAreChecked(checkBoxes);
-
-      checkBoxes.forEach((checkBox: HTMLInputElement): void => {
-        checkBox.checked = checkIt;
-      });
-      currentTarget.checked = checkIt;
-      this.toggleActionButtonReport();
-    }).delegateTo(document, Selectors.toggleAllLinktypesSelectorReport);
-
-    // toggle (checkbox): on change
-    new RegularEvent('change', (): void => {
-      this.toggleTriggerCheckBoxReport();
-      this.toggleActionButtonReport();
-    }).delegateTo(document, Selectors.linktypesSelectorReport);
-
     new RegularEvent('click', (e: PointerEvent, actionButton: HTMLInputElement): void => {
       Notification.success(actionButton.dataset.notificationMessage || 'Event triggered', '', 2);
     }).delegateTo(document, Selectors.actionButtonSelectorCheck);
 
-    new RegularEvent('click', (e: PointerEvent, actionButton: HTMLInputElement): void => {
-      Notification.success(actionButton.dataset.notificationMessage || 'Event triggered', '', 2);
+    new RegularEvent('click', (): void => {
+      this.getProgress().start();
     }).delegateTo(document, Selectors.actionButtonSelectorReport);
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "typo3-typescript-sources",
-  "version": "14.2.0",
+  "version": "14.3.1",
   "description": "TYPO3 Core TypeScript Sources - Extracted from TYPO3/typo3 repository",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,7 +28,7 @@
   },
   "typo3": {
     "sourceRepository": "https://github.com/TYPO3/typo3",
-    "sourceTag": "v14.2.0",
+    "sourceTag": "v14.3.1",
     "sourcePath": "Build/Sources/TypeScript"
   }
 }

package/workspaces/renderable/record-table.ts

@@ -89,7 +89,7 @@ export class RecordTableElement extends LitElement {
           <thead>
           <tr>
             <th>
-              <div class="btn-group dropdown">
+              <div class="dropdown">
                 <button type="button" class="dropdown-toggle dropdown-toggle-link t3js-multi-record-selection-check-actions-toggle" data-bs-toggle="dropdown" data-bs-boundary="window" aria-expanded="false" aria-label="${coreLabels.get('labels.openSelectionOptions')}">
                   <typo3-backend-icon identifier="actions-selection" size="small"></typo3-backend-icon>
                 </button>

package/backend/page-actions.ts

@@ -1,91 +0,0 @@
-/*
- * 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 PersistentStorage from './storage/persistent';
-
-enum IdentifierEnum {
-  hiddenElements = '.t3js-hidden-record',
-}
-
-/**
- * Module: @typo3/backend/page-actions
- * JavaScript implementations for page actions
- */
-class PageActions {
-  constructor() {
-    DocumentService.ready().then((): void => {
-      const pageLayoutToggleShowHidden = document.getElementById('pageLayoutToggleShowHidden') as HTMLButtonElement|null;
-      if (pageLayoutToggleShowHidden !== null) {
-        new RegularEvent('click', this.toggleContentElementVisibility).bindTo(pageLayoutToggleShowHidden);
-      }
-    });
-  }
-
-  /**
-   * Toggles the "Show hidden content elements"
-   */
-  private toggleContentElementVisibility(e: Event): void {
-    const me = e.target as HTMLButtonElement;
-    const hiddenElements = document.querySelectorAll(IdentifierEnum.hiddenElements) as NodeListOf<HTMLElement>;
-    const show = me.dataset.dropdowntoggleStatus !== 'active';
-    me.disabled = true;
-
-    for (const hiddenElement of hiddenElements) {
-      hiddenElement.style.display = 'flow-root';
-      const scrollHeight = hiddenElement.scrollHeight;
-
-      // Always set `overflow: clip` after storing scrollHeight
-      // * For hidden state `height: 0px` is already set.
-      // * For visible state setting `overflow: clip` is fine anyway.
-      hiddenElement.style.overflow = 'clip';
-
-      if (!show) {
-        // * Invisible elements must not be accessible/focusable by keyboard.
-        // * Spacing between content elements is kept uniform by collapsed margins,
-        //   hidden elements have a height of 0 and the margins of the surrounding elements
-        //   cannot collapse, causing a visual gap.
-        // Therefore do not display the element at all by setting `display: none`.
-        hiddenElement.addEventListener('transitionend', (): void => {
-          hiddenElement.style.display = 'none';
-          hiddenElement.style.overflow = '';
-        }, { once: true });
-
-        // We use requestAnimationFrame() as we have to set the container's height at first before resizing to
-        // collapsed-element-height. This results in a smooth animation.
-        requestAnimationFrame(function() {
-          hiddenElement.style.height = scrollHeight + 'px';
-          requestAnimationFrame(function() {
-            hiddenElement.style.height = 0 + 'px';
-          });
-        });
-      } else {
-        hiddenElement.addEventListener('transitionend', (): void => {
-          hiddenElement.style.display = '';
-          hiddenElement.style.overflow = '';
-          hiddenElement.style.height = '';
-        }, { once: true });
-
-        hiddenElement.style.height = scrollHeight + 'px';
-      }
-    }
-
-    me.dataset.dropdowntoggleStatus = show ? 'active' : 'inactive';
-    PersistentStorage.set('moduleData.web_layout.showHidden', show ? '1' : '0').then((): void => {
-      me.disabled = false;
-    });
-  }
-}
-
-export default new PageActions();