typo3-typescript-sources 13.4.20

package/backend/url-link-handler.ts

@@ -0,0 +1,36 @@
+/*
+ * 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 LinkBrowser from './link-browser';
+import RegularEvent from '@typo3/core/event/regular-event';
+
+/**
+ * Module: @typo3/backend/url-link-handler
+ * @exports @typo3/backend/url-link-handler
+ * URL link interaction
+ */
+class UrlLinkHandler {
+  constructor() {
+    new RegularEvent('submit', (evt: MouseEvent, targetEl: HTMLElement): void => {
+      evt.preventDefault();
+      const inputField = targetEl.querySelector('[name="lurl"]') as HTMLInputElement;
+      const value = inputField.value.trim();
+      if (value === '') {
+        return;
+      }
+      LinkBrowser.finalizeFunction(value);
+    }).delegateTo(document, '#lurlform');
+  }
+}
+
+export default new UrlLinkHandler();

package/backend/user-pass-login.ts

@@ -0,0 +1,255 @@
+/*
+ * 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 Login from './login';
+import RegularEvent from '@typo3/core/event/regular-event';
+import DocumentService from '@typo3/core/document-service';
+
+/**
+ * Module: @typo3/backend/user-pass-login
+ * JavaScript module for the UsernamePasswordLoginProvider
+ * @exports @typo3/backend/user-pass-login
+ */
+class UserPassLogin {
+  protected options: any;
+
+  constructor() {
+    this.init();
+  }
+
+  private async init(): Promise<void> {
+    await DocumentService.ready();
+    this.options = {
+      usernameField: '.t3js-login-username-field',
+      passwordField: '.t3js-login-password-field',
+      copyrightLink: '.t3js-login-copyright-link',
+    };
+    const usernameField: HTMLInputElement = document.querySelector(this.options.usernameField);
+    const passwordField: HTMLInputElement = document.querySelector(this.options.passwordField);
+    const copyrightLink: HTMLInputElement = document.querySelector(this.options.copyrightLink);
+
+    // register submit handler
+    Login.options.submitHandler = this.resetPassword;
+
+    [usernameField, passwordField].forEach((field: HTMLInputElement) => new RegularEvent('keypress', this.showCapslockWarning).bindTo(field));
+    ['input', 'change'].forEach((eventName: string) => new RegularEvent(eventName, this.showPasswordToggle).bindTo(passwordField));
+    new RegularEvent('keydown', this.toggleCopyright).bindTo(copyrightLink);
+
+    // if the login screen is shown in the login_frameset window for re-login,
+    // then try to get the username of the current/former login from opening windows main frame:
+    if (parent.opener?.TYPO3?.configuration?.username) {
+      usernameField.value = parent.opener.TYPO3.configuration.username;
+    }
+
+    if (usernameField.value === '') {
+      usernameField.focus();
+    } else {
+      passwordField.focus();
+    }
+  }
+
+  /**
+   * Checks whether capslock is enabled (returns TRUE if enabled, false otherwise)
+   * thanks to http://24ways.org/2007/capturing-caps-lock
+   *
+   * @param {Event} e
+   * @returns {boolean}
+   */
+  private isCapslockEnabled(e: any): boolean {
+    const ev = e ? e : window.event;
+    if (!ev) {
+      return false;
+    }
+    // get key pressed
+    let pressedKeyAsciiCode = -1;
+    if (ev.which) {
+      pressedKeyAsciiCode = ev.which;
+    } else if (ev.keyCode) {
+      pressedKeyAsciiCode = ev.keyCode;
+    }
+    // get shift status
+    let shiftPressed = false;
+    if (ev.shiftKey) {
+      shiftPressed = ev.shiftKey;
+    } else if (ev.modifiers) {
+      /* tslint:disable:no-bitwise */
+      shiftPressed = !!(ev.modifiers & 4);
+    }
+    return (pressedKeyAsciiCode >= 65 && pressedKeyAsciiCode <= 90 && !shiftPressed)
+      || (pressedKeyAsciiCode >= 97 && pressedKeyAsciiCode <= 122 && shiftPressed);
+  }
+
+  /**
+   * Reset user password field to prevent it from being submitted
+   */
+  private readonly resetPassword = (): void => {
+    const passwordField: HTMLInputElement = document.querySelector(this.options.passwordField);
+    if (passwordField === null || passwordField.value === '') {
+      return;
+    }
+    const userIndent: HTMLInputElement = document.querySelector(Login.options.useridentField);
+    if (userIndent) {
+      userIndent.value = passwordField.value;
+    }
+    passwordField.value = '';
+  };
+
+  /**
+   * Toggle copyright
+   */
+  private readonly toggleCopyright = (event: KeyboardEvent): void => {
+    if (event.key === ' ') {
+      (event.target as HTMLLinkElement).click();
+    }
+  };
+
+  /**
+   * Capslock handling
+   */
+  private readonly attachCapslockWarning = (element: HTMLInputElement, label: string, message: string) => {
+    const targetContainer = element.closest('.input-group');
+    if (!targetContainer) {
+      return;
+    }
+
+    if (targetContainer.querySelector('.input-group-text-warning-capslock')) {
+      return;
+    }
+
+    const parentElement = element.parentElement;
+
+    // create icon
+    const warningIcon = `
+      <span class="icon icon-size-small icon-state-default">
+          <span class="icon-markup">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="m8 5.414 3.536 3.536.707-.707L8 4 3.757 8.243l.707.707L8 5.414zM4 11h8v1H4z"/></g></svg>
+          </span>
+      </span>
+    `;
+
+    // create message
+    const warningMessage = document.createElement('span');
+    warningMessage.classList.add('visually-hidden');
+    warningMessage.textContent = message;
+
+    // create element
+    const warningElement = document.createElement('span');
+    warningElement.classList.add('input-group-text', 'input-group-text-warning' ,'input-group-text-warning-capslock');
+    warningElement.role = 'status';
+    warningElement.innerHTML = warningIcon;
+    warningElement.title = label;
+    warningElement.appendChild(warningMessage);
+
+    if (parentElement.classList.contains('form-control-clearable-wrapper')) {
+      parentElement.insertAdjacentElement('afterend', warningElement);
+      return;
+    }
+
+    element.insertAdjacentElement('afterend', warningElement);
+  };
+
+  private readonly removeCapslockWarning = (element: HTMLInputElement) => {
+    const targetContainer = element.closest('.input-group');
+    if (!targetContainer) {
+      return;
+    }
+
+    const warningElement = targetContainer.querySelector('.input-group-text-warning-capslock');
+    if (!warningElement) {
+      return;
+    }
+
+    warningElement.remove();
+  };
+
+  private readonly showCapslockWarning = (event: Event): void => {
+    const targetElement = (event.target as HTMLInputElement);
+    const title = targetElement.dataset.capslockwarningTitle;
+    const message = targetElement.dataset.capslockwarningMessage;
+
+    if (this.isCapslockEnabled(event)) {
+      this.attachCapslockWarning(targetElement, title, message);
+    } else {
+      this.removeCapslockWarning(targetElement);
+    }
+  };
+
+  /**
+   * Password toggle handling
+   */
+  private readonly attachPasswordToggle = (element: HTMLInputElement) => {
+    const container = element.closest('.input-group');
+    if (!container) {
+      return;
+    }
+
+    if (container.querySelector('.t3js-login-toggle-password')) {
+      return;
+    }
+
+    // icon
+    const icon = `
+      <span class="icon icon-size-small icon-state-default">
+        <span class="icon-markup">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="M8.07 3C4.112 3 1 5.286 1 8s2.97 5 7 5c3.889 0 7-2.286 7-4.93C15 5.285 11.889 3.142 8.212 3h-.141Zm-.025 1.127c.141 0 .423.141.423.282s-.14.282-.423.282c-.845 0-1.69.704-1.69 1.55 0 .14-.141.282-.423.282-.282 0-.423-.141-.423-.282.141-1.127 1.268-2.114 2.536-2.114ZM2 8.03c0-1.298 1.017-2.591 2.647-3.312-.296.432-.296 1.01-.296 1.587 0 2.02 1.63 3.606 3.703 3.606 2.074 0 3.704-1.587 3.704-3.606 0-.577-.148-1.01-.296-1.443C12.943 5.582 14 6.875 14 8.029c-.148 2.02-2.841 3.924-6 3.971-3.36-.047-6-1.95-6-3.97Z"/></g></svg>
+        </span>
+      </span>
+    `;
+
+    // button
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.classList.add('btn', 'btn-default', 't3js-login-toggle-password');
+    button.ariaLabel = element.dataset.passwordtoggleLabel ?? '';
+    button.innerHTML = icon;
+
+    button.addEventListener('click', () => {
+      if (button.classList.contains('active')) {
+        button.classList.remove('active');
+        element.type = 'password';
+      } else {
+        button.classList.add('active');
+        element.type = 'text';
+      }
+    });
+
+    container.insertAdjacentElement('beforeend', button);
+  };
+
+  private readonly removePasswordToggle = (element: HTMLInputElement) => {
+    const container = element.closest('.input-group');
+    if (!container) {
+      return;
+    }
+
+    const button = container.querySelector('.t3js-login-toggle-password');
+    if (!button) {
+      return;
+    }
+
+    button.remove();
+    element.type = 'password';
+  };
+
+  private readonly showPasswordToggle = (event: Event): void => {
+    const passwordField: HTMLInputElement = (event.target as HTMLInputElement);
+    if (passwordField.value === '') {
+      this.removePasswordToggle(passwordField);
+      return;
+    } else {
+      this.attachPasswordToggle(passwordField);
+    }
+  };
+}
+
+export default new UserPassLogin();

package/backend/user-settings-manager.ts

@@ -0,0 +1,189 @@
+/*
+ * 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 { BroadcastMessage, type BroadcastEvent } from '@typo3/backend/broadcast-message';
+import BroadcastService from '@typo3/backend/broadcast-service';
+
+enum Identifier {
+  colorSchemeSwitch = 'typo3-backend-color-scheme-switch',
+}
+
+export type ColorScheme = 'auto' | 'light' | 'dark';
+export type Theme = 'modern' | 'classic';
+export type TitleFormat = 'titleFirst' | 'sitenameFirst';
+export type Direction = 'rtl' | null;
+
+// Event for typo3:color-scheme:update and typo3:color-scheme:broadcast
+export interface ColorSchemeUpdateEventData {
+  colorScheme: ColorScheme;
+}
+
+// Event for typo3:theme:update and typo3:theme:broadcast
+export interface ThemeUpdateEventData {
+  theme: Theme;
+}
+
+// Event for typo3:title-format:update and typo3:title-format:broadcast
+export interface TitleFormatUpdateEventData {
+  format: TitleFormat;
+}
+
+// Event for typo3:backend-language:update and typo3:backend-language:broadcast
+export interface BackendLanguageUpdateEventData {
+  language: string;
+  direction: Direction;
+}
+
+class UserSettingsManager {
+  constructor() {
+    // triggered by
+    //  * <typo3-backend-color-scheme-switch> (topbar) or
+    //  * User setup module (via BackendUtility::setUpdateSignal('updateColorScheme', …))
+    document.addEventListener('typo3:color-scheme:update', e => this.onColorSchemeUpdate(e.detail));
+    //  triggered by user setup module (via BackendUtility::setUpdateSignal('updateColorScheme', …))
+    document.addEventListener('typo3:theme:update', e => this.onThemeUpdate(e.detail));
+    //  triggered by user setup module (via BackendUtility::setUpdateSignal('updateTitleFormat', …))
+    document.addEventListener('typo3:title-format:update', e => this.onTitleFormatUpdate(e.detail));
+    //  triggered by user setup module (via BackendUtility::setUpdateSignal('updateBackendLanguage', …))
+    document.addEventListener('typo3:backend-language:update', e => this.onBackendLanguageFormatUpdate(e.detail));
+
+    // broadcast message by other instances
+    document.addEventListener('typo3:color-scheme:broadcast', e => this.activateColorScheme(e.detail.payload.colorScheme));
+    document.addEventListener('typo3:theme:broadcast', e => this.activateTheme(e.detail.payload.theme));
+    document.addEventListener('typo3:title-format:broadcast', e => this.activateTitleFormat(e.detail.payload.format));
+    document.addEventListener('typo3:backend-language:broadcast', e => this.updateBackendLanguage(e.detail.payload.language, e.detail.payload.direction));
+  }
+
+  private onColorSchemeUpdate(data: ColorSchemeUpdateEventData) {
+    const { colorScheme } = data;
+    this.activateColorScheme(colorScheme);
+
+    // broadcast to other instances
+    BroadcastService.post(new BroadcastMessage<ColorSchemeUpdateEventData>('color-scheme', 'broadcast', { colorScheme }));
+  }
+
+  private onThemeUpdate(data: ThemeUpdateEventData) {
+    const { theme } = data;
+    this.activateTheme(theme);
+
+    // broadcast to other instances
+    BroadcastService.post(new BroadcastMessage<ThemeUpdateEventData>('theme', 'broadcast', { theme }));
+  }
+
+  private onTitleFormatUpdate(data: TitleFormatUpdateEventData) {
+    const { format } = data;
+    this.activateTitleFormat(format);
+
+    // broadcast to other instances
+    BroadcastService.post(new BroadcastMessage<TitleFormatUpdateEventData>('title-format', 'broadcast', { format }));
+  }
+
+  private onBackendLanguageFormatUpdate(data: BackendLanguageUpdateEventData) {
+    const { language, direction } = data;
+    this.updateBackendLanguage(language, direction);
+
+    // broadcast to other instances
+    BroadcastService.post(new BroadcastMessage<BackendLanguageUpdateEventData>('language-update', 'broadcast', { language, direction }));
+  }
+
+  private activateColorScheme(colorScheme: ColorScheme) {
+    const colorSchemeSwitch = document.querySelector(Identifier.colorSchemeSwitch);
+    if (colorSchemeSwitch) {
+      colorSchemeSwitch.activeColorScheme = colorScheme;
+    }
+    this.setStyleChangingDocumentAttribute('data-color-scheme', colorScheme);
+  }
+
+  private activateTheme(theme: Theme) {
+    this.setStyleChangingDocumentAttribute('data-theme', theme);
+  }
+
+  private activateTitleFormat(format: TitleFormat) {
+    if (format === 'sitenameFirst') {
+      document.querySelector('typo3-backend-module-router')?.setAttribute('sitename-first', '');
+    } else {
+      document.querySelector('typo3-backend-module-router')?.removeAttribute('sitename-first');
+    }
+  }
+
+  private updateBackendLanguage(language: string, direction: Direction): void {
+    const rootEl = document.documentElement;
+    const frame = window.frames.list_frame?.document.documentElement;
+
+    rootEl.setAttribute('lang', language);
+    frame?.setAttribute('lang', language);
+    if (direction !== null) {
+      rootEl.setAttribute('dir', direction);
+      frame?.setAttribute('dir', direction);
+    } else {
+      rootEl.removeAttribute('dir');
+      frame?.removeAttribute('dir');
+    }
+  }
+
+  private async setStyleChangingDocumentAttribute(attributeName: string, attributeValue: string) {
+    const rootEl = document.documentElement;
+    const frame = window.frames.list_frame?.document.documentElement;
+
+    const action = () => {
+      rootEl.classList.add('t3js-disable-transitions');
+      frame?.classList.add('t3js-disable-transitions');
+
+      rootEl.setAttribute(attributeName, attributeValue);
+      frame?.setAttribute(attributeName, attributeValue);
+    };
+
+    const cleanup = () => {
+      rootEl.classList.remove('t3js-disable-transitions');
+      frame?.classList.remove('t3js-disable-transitions');
+    };
+
+
+    if (
+      window.matchMedia('(prefers-reduced-motion: reduce)').matches ||
+      // The fallback condition in the next line (currently needed for firefox) can be removed
+      // once view transitions enter baseline "Widely available":
+      // https://webstatus.dev/features/view-transitions?q=view+transition
+      !('startViewTransition' in document) || typeof document.startViewTransition !== 'function'
+    ) {
+      action();
+
+      // await animation frame in order for the transition disable to be
+      // considered by the time the change-transitions are being started.
+      await new Promise(resolve => requestAnimationFrame(resolve));
+      if (frame) {
+        await new Promise(resolve => window.frames.list_frame.requestAnimationFrame(resolve));
+      }
+      cleanup();
+      return;
+    }
+
+    await document.startViewTransition(action).finished;
+    cleanup();
+  }
+}
+
+export default new UserSettingsManager();
+
+declare global {
+  interface DocumentEventMap {
+    'typo3:color-scheme:update': CustomEvent<ColorSchemeUpdateEventData>;
+    'typo3:color-scheme:broadcast': BroadcastEvent<ColorSchemeUpdateEventData>;
+    'typo3:theme:update': CustomEvent<ThemeUpdateEventData>;
+    'typo3:theme:broadcast': BroadcastEvent<ThemeUpdateEventData>;
+    'typo3:title-format:update': CustomEvent<TitleFormatUpdateEventData>;
+    'typo3:title-format:broadcast': BroadcastEvent<TitleFormatUpdateEventData>;
+    'typo3:backend-language:update': CustomEvent<BackendLanguageUpdateEventData>;
+    'typo3:backend-language:broadcast': BroadcastEvent<BackendLanguageUpdateEventData>;
+  }
+}

package/backend/utility/collapse-state-persister.ts

@@ -0,0 +1,205 @@
+/*
+ * 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 Client from '@typo3/backend/storage/client';
+import DocumentService from '@typo3/core/document-service';
+import RegularEvent from '@typo3/core/event/regular-event';
+
+/**
+ * Utility class to store a collapsible state in the localStorage and to re-apply states.
+ * It uses the collapsible id to store the keys, which must be unique.
+ *
+ * Trigger state persisting by adding 'data-persist-collapse-state="true"' to a collapsible element.
+ *
+ * To improve performance when dealing with bigger trees:
+ *   * A 'data-persist-collapse-state-suffix="some-suffix"' on each collapsible element can be defined: This
+ *     specifies a local storage key instead of "general", states are then stored in this key. This is useful
+ *     when bigger tree states are stored, moving them to a dedicated local storage key. Default is suffix "global".
+ *   * A 'data-persist-collapse-state-if-state="shown"' (allowed values "shown" and "hidden"):
+ *     Usually, both "collapsed" and "shown" states are stored in local storage. However, when a tree is rendered
+ *     "hidden" or "shown" by default from Fluid, we only need the "opposite" state in local storage. It is good practice
+ *     to set this to safe local storage space.
+ *
+ * When dealing with bigger treas, some of them may be search-aware: This is related to 'collapse-state-search.ts',
+ * which expands search matches in a tree. We usually do not want to persist collapse / expand state when a search is
+ * performed, since this is done by the search javascript. Instead, we want to go back to the previous expand/collapse
+ * state when a search value is cleared. To do this, an expand/collapse field can set 'data-persist-collapse-state-not-if-search="true"',
+ * which will suppress storing expand/collapse state from/to local storage if a search value is given.
+ * When the search value is cleared (empty string), the current expand/collapse state are applied again due to
+ * a submit event fired by 'collapse-state-search.ts', so this state class can re-create the expand/collapse state before
+ * a search keyword has been given. A search input field needs the attribute 'data-persist-collapse-search-key="some-search-key"'
+ * which points to the local storage key of the search term, plus class "t3js-collapse-search-term" to trigger all this search magic.
+ *
+ * @internal
+ */
+type PersistStateObject = { [key: string]: boolean };
+
+export class CollapseStatePersister {
+  private readonly localStorageKey: string = 'collapse-states-';
+  private readonly localStorageKeyDefaultSuffix: string = 'general';
+  private readonly searchValueSelector: string = '.t3js-collapse-search-term';
+  private searchField: HTMLInputElement|null = null;
+  private searchForm: HTMLFormElement|null = null;
+
+  private readonly stateCache: Map<string, PersistStateObject>;
+
+  public constructor() {
+    this.stateCache = new Map();
+
+    DocumentService.ready().then((): void => {
+      this.searchField = document.querySelector(this.searchValueSelector);
+      if (this.searchField !== null) {
+        this.searchForm = this.searchField.closest('form');
+        this.searchField.value = Client.get(this.searchField.dataset.persistCollapseSearchKey) ?? '';
+      }
+      this.registerEventListener();
+      this.recoverStates();
+    });
+  }
+
+  private registerEventListener(): void {
+    const delegateEventTo: string = '.collapse[data-persist-collapse-state="true"]';
+
+    new RegularEvent('show.bs.collapse', (e: Event): void => {
+      const element: HTMLElement = e.target as HTMLElement;
+      if (element.dataset.persistCollapseState === 'true'
+        && ((this.searchField !== null && this.searchField.value === '') || element.dataset.persistCollapseStateNotIfSearch === undefined)
+      ) {
+        // Persist state only, if there is no search input field, or no search is performed
+        this.toStorage(element, true);
+      }
+    }).delegateTo(document, delegateEventTo);
+
+    new RegularEvent('hide.bs.collapse', (e: Event): void => {
+      const element: HTMLElement = e.target as HTMLElement;
+      if (element.dataset.persistCollapseState === 'true'
+        && ((this.searchField !== null && this.searchField.value === '') || element.dataset.persistCollapseStateNotIfSearch === undefined)
+      ) {
+        // Persist state only, if there is no search input field, or no search is performed
+        this.toStorage(element, false);
+      }
+    }).delegateTo(document, delegateEventTo);
+
+    if (this.searchForm !== null) {
+      new RegularEvent('submit', (e: SubmitEvent): void => {
+        e.preventDefault();
+        if (this.searchField !== null && this.searchField.value === '') {
+          this.recoverStates();
+        }
+      }).bindTo(this.searchForm);
+    }
+  }
+
+  private recoverStates(): void {
+    const collapseStateElements: NodeListOf<HTMLElement>|null = document.querySelectorAll('.collapse[data-persist-collapse-state="true"]');
+    collapseStateElements.forEach((element: HTMLElement) => {
+      const suffix: string = element.dataset.persistCollapseStateSuffix ?? this.localStorageKeyDefaultSuffix;
+      const currentStates = this.fromStorage(suffix);
+      const id: string = element.id;
+      if (id === '' || !this.shallRecoverState(element)) {
+        return;
+      }
+      const storeExpandedState = (element.dataset.persistCollapseStateIfState ?? 'shown') === 'shown';
+      const storeHiddenState = (element.dataset.persistCollapseStateIfState ?? 'hidden') === 'hidden';
+      const isExpanded = element.classList.contains('show');
+      if (storeExpandedState === true) {
+        // We're not using BootstrapCollapse.getOrCreateInstance() since this is too slow when
+        // dealing with many elements like with System > Configuration with TCA tree.
+        if (currentStates[id] === true) {
+          if (!isExpanded) {
+            const toggle: HTMLElement = document.querySelector('[data-bs-target="#' + id + '"]');
+            toggle.classList.remove('collapsed');
+            toggle.setAttribute('aria-expanded', 'true');
+            element.classList.add('show');
+          }
+        } else {
+          if (isExpanded) {
+            const toggle: HTMLElement = document.querySelector('[data-bs-target="#' + id + '"]');
+            toggle.classList.add('collapsed');
+            toggle.setAttribute('aria-expanded', 'false');
+            element.classList.remove('show');
+          }
+        }
+      }
+      if (storeHiddenState === true) {
+        if (currentStates[id] === false) {
+          if (isExpanded) {
+            const toggle: HTMLElement = document.querySelector('[data-bs-target="#' + id + '"]');
+            toggle.classList.add('collapsed');
+            toggle.setAttribute('aria-expanded', 'false');
+            element.classList.remove('show');
+          }
+        } else {
+          if (!isExpanded) {
+            const toggle: HTMLElement = document.querySelector('[data-bs-target="#' + id + '"]');
+            toggle.classList.remove('collapsed');
+            toggle.setAttribute('aria-expanded', 'true');
+            element.classList.add('show');
+          }
+        }
+      }
+    });
+  }
+
+  private shallRecoverState(element: HTMLElement): boolean {
+    if (element.dataset.persistCollapseStateNotIfSearch === undefined
+      || element.dataset.persistCollapseStateNotIfSearch === 'false'
+    ) {
+      return true;
+    }
+    return this.searchField !== null && this.searchField.value === '';
+  }
+
+  private fromStorage(suffix: string): PersistStateObject {
+    let result;
+    if (this.stateCache.has(this.localStorageKey + suffix)) {
+      result = this.stateCache.get(this.localStorageKey + suffix);
+    } else {
+      const currentStates = Client.get(this.localStorageKey + suffix);
+      result = currentStates !== null ? JSON.parse(currentStates) : {};
+      this.stateCache.set(this.localStorageKey + suffix, result);
+    }
+    return result;
+  }
+
+  private toStorage(element: HTMLElement, expanded: boolean) {
+    const key = element.id;
+    const suffix = element.dataset.persistCollapseStateSuffix ?? this.localStorageKeyDefaultSuffix;
+    const currentStates = this.fromStorage(suffix);
+    const storeExpandedState = (element.dataset.persistCollapseStateIfState ?? 'shown') === 'shown';
+    const storeHiddenState = (element.dataset.persistCollapseStateIfState ?? 'hidden') === 'hidden';
+    if (expanded === true && storeExpandedState === true && currentStates[key] !== true) {
+      currentStates[key] = true;
+      this.updateStates(this.localStorageKey + suffix, currentStates);
+    }
+    if (expanded === true && storeHiddenState === true && currentStates[key] === false) {
+      delete currentStates[key];
+      this.updateStates(this.localStorageKey + suffix, currentStates);
+    }
+    if (expanded === false && storeHiddenState === true && currentStates[key] !== false) {
+      currentStates[key] = false;
+      this.updateStates(this.localStorageKey + suffix, currentStates);
+    }
+    if (expanded === false && storeExpandedState === true && currentStates[key] === true) {
+      delete currentStates[key];
+      this.updateStates(this.localStorageKey + suffix, currentStates);
+    }
+  }
+
+  private updateStates(key: string, currentStates: PersistStateObject) {
+    Client.set(key, JSON.stringify(currentStates));
+    this.stateCache.set(key, currentStates);
+  }
+}
+
+export default new CollapseStatePersister();