diff --git a/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Module/Iframe.ts b/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Module/Iframe.ts
index c3f167ef72b54b7f1378745ca0de24cf6f73d11a..4a5c4b670ec7ff207255faac4c6cd3790e807166 100644
--- a/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Module/Iframe.ts
+++ b/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Module/Iframe.ts
@@ -71,9 +71,9 @@ export class IframeModuleElement extends LitElement {
     }
   }
 
-  private registerUnloadHandler(iframe: HTMLIFrameElement): void {
+  private registerPagehideHandler(iframe: HTMLIFrameElement): void {
     try {
-      iframe.contentWindow.addEventListener('unload', (e: Event) => this._unload(e, iframe), { once: true});
+      iframe.contentWindow.addEventListener('pagehide', (e: Event) => this._pagehide(e, iframe), { once: true });
     } catch (e) {
       console.error('Failed to access contentWindow of module iframe – using a foreign origin?');
       throw e;
@@ -96,17 +96,17 @@ export class IframeModuleElement extends LitElement {
   private _loaded({target}: Event) {
     const iframe = <HTMLIFrameElement> target;
 
-    // The event handler for the "unload" event needs to be attached
+    // The event handler for the "pagehide" event needs to be attached
     // after every iframe load (for the current iframes's contentWindow).
-    this.registerUnloadHandler(iframe);
+    this.registerPagehideHandler(iframe);
 
     const state = this.retrieveModuleStateFromIFrame(iframe);
     this.dispatch('typo3-iframe-loaded', state);
   }
 
-  private _unload(e: Event, iframe: HTMLIFrameElement) {
+  private _pagehide(e: Event, iframe: HTMLIFrameElement) {
     // Asynchronous execution needed because the URL changes immediately after
-    // the `unload` event is dispatched, but has not been changed right now.
+    // the `pagehide` event is dispatched, but has not been changed right now.
     new Promise((resolve) => window.setTimeout(resolve, 0)).then(() => {
       if (iframe.contentWindow !== null) {
         this.dispatch('typo3-iframe-load', { url: iframe.contentWindow.location.href, title: null });
diff --git a/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/SvgTree.ts b/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/SvgTree.ts
index 93b400034980ebc6997f5f22e7fad78d7746eb66..58dc51aac3a2b9957dc286f7fbf19486ff3749ed 100644
--- a/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/SvgTree.ts
+++ b/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/SvgTree.ts
@@ -1328,7 +1328,7 @@ export class SvgTree extends LitElement {
   /**
    * If the svg-tree component is embedded in an iframe, and if the iframe src get changed by navigating to another url,
    * pending AjaxRequest will get cancelled by the browser, without letting us the opportunity to properly handle
-   * the thrown error. As a workaround, we register an unload event on the iframe's window,
+   * the thrown error. As a workaround, we register a pagehide event on the iframe's window,
    * and turn on the muteErrorNotifications flag.
    */
   private registerUnloadHandler(): void {
@@ -1338,7 +1338,7 @@ export class SvgTree extends LitElement {
         return
       }
       window.addEventListener(
-        'unload',
+        'pagehide',
         () => this.muteErrorNotifications = true,
         { once: true }
       );
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/FormEngine.js b/typo3/sysext/backend/Resources/Public/JavaScript/FormEngine.js
index 1e5fc049a8826627f04dcf3ecceaf99fdf20ee06..f65263219ef77b9ed593330b825806ae0e7b58bd 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/FormEngine.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/FormEngine.js
@@ -358,9 +358,7 @@ define(['jquery',
   FormEngine.initializeEvents = function() {
     if (top.TYPO3 && typeof top.TYPO3.Backend !== 'undefined') {
       top.TYPO3.Backend.consumerScope.attach(FormEngine);
-      $(window).on('unload', function() {
-        top.TYPO3.Backend.consumerScope.detach(FormEngine);
-      });
+      window.addEventListener('pagehide', () => top.TYPO3.Backend.consumerScope.detach(FormEngine), { once: true });
     }
     $(document).on('click', '.t3js-editform-close', function(e) {
         e.preventDefault();
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/Module/Iframe.js b/typo3/sysext/backend/Resources/Public/JavaScript/Module/Iframe.js
index 25993ca23151f3ca56fd405b873fc6484582cb4c..af99c59269fdb1b4820745743019fa8046ce5f8e 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/Module/Iframe.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/Module/Iframe.js
@@ -10,7 +10,7 @@
  *
  * The TYPO3 project - inspiring people to share!
  */
-var __decorate=this&&this.__decorate||function(e,t,o,n){var r,i=arguments.length,l=i<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,n);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(l=(i<3?r(l):i>3?r(t,o,l):r(t,o))||l);return i>3&&l&&Object.defineProperty(t,o,l),l};define(["require","exports","lit","lit/decorators","TYPO3/CMS/Core/lit-helper"],(function(e,t,o,n,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.IframeModuleElement=t.componentName=void 0,t.componentName="typo3-iframe-module";let i=class extends o.LitElement{constructor(){super(...arguments),this.endpoint=""}createRenderRoot(){return this}render(){return this.endpoint?o.html`
+var __decorate=this&&this.__decorate||function(e,t,o,n){var r,i=arguments.length,a=i<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,n);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(a=(i<3?r(a):i>3?r(t,o,a):r(t,o))||a);return i>3&&a&&Object.defineProperty(t,o,a),a};define(["require","exports","lit","lit/decorators","TYPO3/CMS/Core/lit-helper"],(function(e,t,o,n,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.IframeModuleElement=t.componentName=void 0,t.componentName="typo3-iframe-module";let i=class extends o.LitElement{constructor(){super(...arguments),this.endpoint=""}createRenderRoot(){return this}render(){return this.endpoint?o.html`
       <iframe
         src="${this.endpoint}"
         name="list_frame"
@@ -20,4 +20,4 @@ var __decorate=this&&this.__decorate||function(e,t,o,n){var r,i=arguments.length
         scrolling="no"
         @load="${this._loaded}"
       ></iframe>
-    `:o.html``}attributeChangedCallback(e,t,o){super.attributeChangedCallback(e,t,o),"endpoint"===e&&o===t&&this.iframe.setAttribute("src",o)}connectedCallback(){super.connectedCallback(),this.endpoint&&this.dispatch("typo3-iframe-load",{url:this.endpoint,title:null})}registerUnloadHandler(e){try{e.contentWindow.addEventListener("unload",t=>this._unload(t,e),{once:!0})}catch(e){throw console.error("Failed to access contentWindow of module iframe – using a foreign origin?"),e}}retrieveModuleStateFromIFrame(e){var t;try{return{url:e.contentWindow.location.href,title:e.contentDocument.title,module:null===(t=e.contentDocument.body.querySelector(".module[data-module-name]"))||void 0===t?void 0:t.getAttribute("data-module-name")}}catch(e){return console.error("Failed to access contentWindow of module iframe – using a foreign origin?"),{url:this.endpoint,title:null}}}_loaded({target:e}){const t=e;this.registerUnloadHandler(t);const o=this.retrieveModuleStateFromIFrame(t);this.dispatch("typo3-iframe-loaded",o)}_unload(e,t){new Promise(e=>window.setTimeout(e,0)).then(()=>{null!==t.contentWindow&&this.dispatch("typo3-iframe-load",{url:t.contentWindow.location.href,title:null})})}dispatch(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}};__decorate([(0,n.property)({type:String})],i.prototype,"endpoint",void 0),__decorate([(0,n.query)("iframe",!0)],i.prototype,"iframe",void 0),i=__decorate([(0,n.customElement)(t.componentName)],i),t.IframeModuleElement=i}));
\ No newline at end of file
+    `:o.html``}attributeChangedCallback(e,t,o){super.attributeChangedCallback(e,t,o),"endpoint"===e&&o===t&&this.iframe.setAttribute("src",o)}connectedCallback(){super.connectedCallback(),this.endpoint&&this.dispatch("typo3-iframe-load",{url:this.endpoint,title:null})}registerPagehideHandler(e){try{e.contentWindow.addEventListener("pagehide",t=>this._pagehide(t,e),{once:!0})}catch(e){throw console.error("Failed to access contentWindow of module iframe – using a foreign origin?"),e}}retrieveModuleStateFromIFrame(e){var t;try{return{url:e.contentWindow.location.href,title:e.contentDocument.title,module:null===(t=e.contentDocument.body.querySelector(".module[data-module-name]"))||void 0===t?void 0:t.getAttribute("data-module-name")}}catch(e){return console.error("Failed to access contentWindow of module iframe – using a foreign origin?"),{url:this.endpoint,title:null}}}_loaded({target:e}){const t=e;this.registerPagehideHandler(t);const o=this.retrieveModuleStateFromIFrame(t);this.dispatch("typo3-iframe-loaded",o)}_pagehide(e,t){new Promise(e=>window.setTimeout(e,0)).then(()=>{null!==t.contentWindow&&this.dispatch("typo3-iframe-load",{url:t.contentWindow.location.href,title:null})})}dispatch(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}};__decorate([(0,n.property)({type:String})],i.prototype,"endpoint",void 0),__decorate([(0,n.query)("iframe",!0)],i.prototype,"iframe",void 0),i=__decorate([(0,n.customElement)(t.componentName)],i),t.IframeModuleElement=i}));
\ No newline at end of file
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/SvgTree.js b/typo3/sysext/backend/Resources/Public/JavaScript/SvgTree.js
index b88f2e4eb82af48a9fb59cf896f96fd957d841d7..b6e2c775ad22b6b1ed284aa7b97f8dd9bd7f7862 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/SvgTree.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/SvgTree.js
@@ -27,7 +27,7 @@ var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,s,i)
         </g>
         <defs></defs>
       </svg>
-    `}firstUpdated(){this.svg=n.select(this.querySelector("svg")),this.container=n.select(this.querySelector(".nodes-wrapper")).attr("transform","translate("+this.settings.indentWidth/2+","+this.settings.nodeHeight/2+")"),this.nodesBgContainer=n.select(this.querySelector(".nodes-bg")),this.nodesActionsContainer=n.select(this.querySelector(".nodes-actions")),this.linksContainer=n.select(this.querySelector(".links")),this.nodesContainer=n.select(this.querySelector(".nodes")),this.doSetup(this.setup||{}),this.updateView()}updateView(){this.updateScrollPosition(),this.updateVisibleNodes(),this.settings.actions&&this.settings.actions.length&&this.nodesActionsContainer.attr("transform","translate("+(this.querySelector("svg").clientWidth-16-16*this.settings.actions.length)+",0)")}disableSelectedNodes(){this.getSelectedNodes().forEach(e=>{!0===e.checked&&(e.checked=!1)})}updateNodeActions(e){return this.settings.actions&&this.settings.actions.length?(this.nodesActionsContainer.selectAll(".node-action").selectChildren().remove(),e.enter().append("g").merge(e).attr("class","node-action").on("mouseover",(e,t)=>this.onMouseOverNode(t)).on("mouseout",(e,t)=>this.onMouseOutOfNode(t)).attr("data-state-id",this.getNodeStateIdentifier).attr("transform",this.getNodeActionTransform)):e.enter()}createIconAreaForAction(e,t){const s=e.append("svg").attr("class","node-icon-container").attr("height","20").attr("width","20").attr("x","0").attr("y","0");s.append("rect").attr("width","20").attr("height","20").attr("y","0").attr("x","0").attr("class","node-icon-click");s.append("svg").attr("height","16").attr("width","16").attr("y","2").attr("x","2").attr("class","node-icon-inner").append("use").attr("class","node-icon").attr("xlink:href","#icon-"+t)}isNodeSelectable(e){return!0}appendTextElement(e){return e.append("text").attr("dx",e=>this.textPosition+(e.locked?15:0)).attr("dy",5).attr("class","node-name").on("click",(e,t)=>this.selectNode(t,!0))}nodesUpdate(e){return(e=e.enter().append("g").attr("class","node").attr("id",e=>"identifier-"+e.stateIdentifier).attr("role","treeitem").attr("aria-owns",e=>e.hasChildren?"group-identifier-"+e.stateIdentifier:null).attr("aria-level",this.getNodeDepth).attr("aria-setsize",this.getNodeSetsize).attr("aria-posinset",this.getNodePositionInSet).attr("aria-expanded",e=>e.hasChildren?e.expanded:null).attr("transform",this.getNodeTransform).attr("data-state-id",this.getNodeStateIdentifier).attr("title",this.getNodeTitle).on("mouseover",(e,t)=>this.onMouseOverNode(t)).on("mouseout",(e,t)=>this.onMouseOutOfNode(t)).on("contextmenu",(e,t)=>{e.preventDefault(),this.dispatchEvent(new CustomEvent("typo3:svg-tree:node-context",{detail:{node:t}}))})).append("text").text(e=>e.readableRootline).attr("class","node-rootline").attr("dx",0).attr("dy",-15).attr("visibility",e=>e.readableRootline?"visible":"hidden"),e}getNodeIdentifier(e){return e.identifier}getNodeDepth(e){return e.depth}getNodeSetsize(e){return e.siblingsCount}getNodePositionInSet(e){return e.siblingsPosition}getNodeStateIdentifier(e){return e.stateIdentifier}getNodeLabel(e){let t=(e.prefix||"")+e.name+(e.suffix||"");const s=document.createElement("div");if(s.textContent=t,t=s.innerHTML,this.searchTerm){const e=new RegExp(this.searchTerm,"gi");t=t.replace(e,'<tspan class="node-highlight-text">$&</tspan>')}return t}getNodeByIdentifier(e){return this.nodes.find(t=>t.stateIdentifier===e)}getNodeBgClass(e,t,s){let i="node-bg",n=null,o=null;return"object"==typeof s&&(n=s.data()[t-1],o=s.data()[t+1]),e.checked&&(i+=" node-selected"),(n&&e.depth>n.depth||!n)&&(e.firstChild=!0,i+=" node-first-child"),(o&&e.depth>o.depth||!o)&&(e.lastChild=!0,i+=" node-last-child"),e.class&&(i+=" "+e.class),i}getNodeTitle(e){return e.tip?e.tip:"uid="+e.identifier}getChevronTransform(e){return e.expanded?"translate(16,0) rotate(90)":" rotate(0)"}getChevronColor(e){return e.expanded?"#000":"#8e8e8e"}getToggleVisibility(e){return e.hasChildren?"visible":"hidden"}getChevronClass(e){return"chevron "+(e.expanded?"expanded":"collapsed")}getLinkPath(e){const t=e.target.x,s=e.target.y,i=[];return i.push("M"+e.source.x+" "+e.source.y),i.push("V"+s),e.target.hasChildren?i.push("H"+(t-2)):i.push("H"+(t+this.settings.indentWidth/4-2)),i.join(" ")}getNodeTransform(e){return"translate("+(e.x||0)+","+(e.y||0)+")"}getNodeBgTransform(e){return"translate(-8, "+((e.y||0)-10)+")"}getNodeActionTransform(e){return"translate(-10, "+((e.y||0)-10)+")"}clickOnIcon(e){this.dispatchEvent(new CustomEvent("typo3:svg-tree:node-context",{detail:{node:e}}))}chevronClick(e){e.expanded?this.hideChildren(e):this.showChildren(e),this.prepareDataForVisibleNodes(),this.updateVisibleNodes()}enterSvgElements(e){if(this.settings.showIcons){const e=Object.values(this.icons).filter(e=>""!==e.icon&&null!==e.icon),t=this.iconsContainer.selectAll(".icon-def").data(e,e=>e.identifier);t.exit().remove(),t.enter().append("g").attr("class","icon-def").attr("id",e=>"icon-"+e.identifier).append(e=>{if(e.icon instanceof SVGElement)return e.icon;const t="<svg>"+e.icon+"</svg>";return(new DOMParser).parseFromString(t,"image/svg+xml").documentElement.firstChild})}const t=this.nodesUpdate(e);let s=t.append("g").attr("class","toggle").attr("visibility",this.getToggleVisibility).attr("transform","translate(-8, -8)").on("click",(e,t)=>this.chevronClick(t));if(s.append("path").style("opacity",0).attr("d","M 0 0 L 16 0 L 16 16 L 0 16 Z"),s.append("path").attr("class","chevron").attr("d","M 4 3 L 13 8 L 4 13 Z"),this.settings.showIcons){const e=t.append("svg").attr("class","node-icon-container").attr("title",this.getNodeTitle).attr("height","20").attr("width","20").attr("x","6").attr("y","-10").attr("data-bs-toggle","tooltip").on("click",(e,t)=>{e.preventDefault(),this.clickOnIcon(t)});e.append("rect").style("opacity",0).attr("width","20").attr("height","20").attr("y","0").attr("x","0").attr("class","node-icon-click");const s=e.append("svg").attr("height","16").attr("width","16").attr("y","2").attr("x","2").attr("class","node-icon-inner");s.append("use").attr("class","node-icon").attr("data-uid",this.getNodeIdentifier);s.append("svg").attr("height","11").attr("width","11").attr("y","5").attr("x","5").append("use").attr("class","node-icon-overlay");s.append("svg").attr("height","11").attr("width","11").attr("y","5").attr("x","5").append("use").attr("class","node-icon-locked")}return l.initialize('[data-bs-toggle="tooltip"]',this.tooltipOptions),this.appendTextElement(t),e.merge(t)}updateScrollPosition(){this.viewportHeight=this.getBoundingClientRect().height,this.scrollBottom=this.scrollTop+this.viewportHeight+this.viewportHeight/2,setTimeout(()=>{l.hide(document.querySelector(this.tooltipOptions.container).querySelectorAll(".bs-tooltip-end"))},this.tooltipOptions.delay)}onMouseOverNode(e){e.isOver=!0,this.hoveredNode=e;let t=this.svg.select('.nodes-bg .node-bg[data-state-id="'+e.stateIdentifier+'"]');t.size()&&t.classed("node-over",!0).attr("rx","3").attr("ry","3");let s=this.nodesActionsContainer.select('.node-action[data-state-id="'+e.stateIdentifier+'"]');s.size()&&(s.classed("node-action-over",!0),s.attr("fill",t.style("fill")))}onMouseOutOfNode(e){e.isOver=!1,this.hoveredNode=null;let t=this.svg.select('.nodes-bg .node-bg[data-state-id="'+e.stateIdentifier+'"]');t.size()&&t.classed("node-over node-alert",!1).attr("rx","0").attr("ry","0");let s=this.nodesActionsContainer.select('.node-action[data-state-id="'+e.stateIdentifier+'"]');s.size()&&s.classed("node-action-over",!1)}handleKeyboardInteraction(e){const t=e.target;let s=n.select(t).datum();if(-1===[a.KeyTypesEnum.ENTER,a.KeyTypesEnum.SPACE,a.KeyTypesEnum.END,a.KeyTypesEnum.HOME,a.KeyTypesEnum.LEFT,a.KeyTypesEnum.UP,a.KeyTypesEnum.RIGHT,a.KeyTypesEnum.DOWN].indexOf(e.keyCode))return;e.preventDefault();const i=t.parentNode;switch(e.keyCode){case a.KeyTypesEnum.END:this.scrollTop=this.lastElementChild.getBoundingClientRect().height+this.settings.nodeHeight-this.viewportHeight,i.scrollIntoView({behavior:"smooth",block:"end"}),this.updateVisibleNodes(),this.switchFocus(i.lastElementChild);break;case a.KeyTypesEnum.HOME:this.scrollTo({top:this.nodes[0].y,behavior:"smooth"}),this.prepareDataForVisibleNodes(),this.updateVisibleNodes(),this.switchFocus(i.firstElementChild);break;case a.KeyTypesEnum.LEFT:if(s.expanded)s.hasChildren&&(this.hideChildren(s),this.prepareDataForVisibleNodes(),this.updateVisibleNodes());else if(s.parents.length>0){let e=this.nodes[s.parents[0]];this.scrollNodeIntoVisibleArea(e,"up"),this.switchFocusNode(e)}break;case a.KeyTypesEnum.UP:this.scrollNodeIntoVisibleArea(s,"up"),this.switchFocus(t.previousSibling);break;case a.KeyTypesEnum.RIGHT:s.expanded?(this.scrollNodeIntoVisibleArea(s,"down"),this.switchFocus(t.nextSibling)):s.hasChildren&&(this.showChildren(s),this.prepareDataForVisibleNodes(),this.updateVisibleNodes(),this.switchFocus(t));break;case a.KeyTypesEnum.DOWN:this.scrollNodeIntoVisibleArea(s,"down"),this.switchFocus(t.nextSibling);break;case a.KeyTypesEnum.ENTER:case a.KeyTypesEnum.SPACE:this.selectNode(s,!0)}}scrollNodeIntoVisibleArea(e,t="up"){let s=this.scrollTop;if("up"===t&&s>e.y-this.settings.nodeHeight)s=e.y-this.settings.nodeHeight;else{if(!("down"===t&&s+this.viewportHeight<=e.y+3*this.settings.nodeHeight))return;s+=this.settings.nodeHeight}this.scrollTo({top:s,behavior:"smooth"}),this.updateVisibleNodes()}updateLinks(){const e=this.data.links.filter(e=>e.source.y<=this.scrollBottom&&e.target.y>=this.scrollTop-this.settings.nodeHeight).map(e=>(e.source.owns=e.source.owns||[],e.source.owns.push("identifier-"+e.target.stateIdentifier),e)),t=this.linksContainer.selectAll(".link").data(e);t.exit().remove(),t.enter().append("path").attr("class","link").attr("id",this.getGroupIdentifier).attr("role",e=>1===e.target.siblingsPosition&&e.source.owns.length>0?"group":null).attr("aria-owns",e=>1===e.target.siblingsPosition&&e.source.owns.length>0?e.source.owns.join(" "):null).merge(t).attr("d",e=>this.getLinkPath(e))}getGroupIdentifier(e){return 1===e.target.siblingsPosition?"group-identifier-"+e.source.stateIdentifier:null}registerUnloadHandler(){try{if(!window.frameElement)return;window.addEventListener("unload",()=>this.muteErrorNotifications=!0,{once:!0})}catch(e){console.error("Failed to check the existence of window.frameElement – using a foreign origin?")}}}__decorate([(0,i.property)({type:Object})],u.prototype,"setup",void 0),__decorate([(0,i.state)()],u.prototype,"settings",void 0),t.SvgTree=u;let g=class extends s.LitElement{constructor(){super(...arguments),this.tree=null,this.settings={searchInput:".search-input",filterTimeout:450}}createRenderRoot(){return this}firstUpdated(){const e=this.querySelector(this.settings.searchInput);e&&(new p.default("input",e=>{const t=e.target;this.tree.filter(t.value.trim())},this.settings.filterTimeout).bindTo(e),e.focus())}render(){return s.html`
+    `}firstUpdated(){this.svg=n.select(this.querySelector("svg")),this.container=n.select(this.querySelector(".nodes-wrapper")).attr("transform","translate("+this.settings.indentWidth/2+","+this.settings.nodeHeight/2+")"),this.nodesBgContainer=n.select(this.querySelector(".nodes-bg")),this.nodesActionsContainer=n.select(this.querySelector(".nodes-actions")),this.linksContainer=n.select(this.querySelector(".links")),this.nodesContainer=n.select(this.querySelector(".nodes")),this.doSetup(this.setup||{}),this.updateView()}updateView(){this.updateScrollPosition(),this.updateVisibleNodes(),this.settings.actions&&this.settings.actions.length&&this.nodesActionsContainer.attr("transform","translate("+(this.querySelector("svg").clientWidth-16-16*this.settings.actions.length)+",0)")}disableSelectedNodes(){this.getSelectedNodes().forEach(e=>{!0===e.checked&&(e.checked=!1)})}updateNodeActions(e){return this.settings.actions&&this.settings.actions.length?(this.nodesActionsContainer.selectAll(".node-action").selectChildren().remove(),e.enter().append("g").merge(e).attr("class","node-action").on("mouseover",(e,t)=>this.onMouseOverNode(t)).on("mouseout",(e,t)=>this.onMouseOutOfNode(t)).attr("data-state-id",this.getNodeStateIdentifier).attr("transform",this.getNodeActionTransform)):e.enter()}createIconAreaForAction(e,t){const s=e.append("svg").attr("class","node-icon-container").attr("height","20").attr("width","20").attr("x","0").attr("y","0");s.append("rect").attr("width","20").attr("height","20").attr("y","0").attr("x","0").attr("class","node-icon-click");s.append("svg").attr("height","16").attr("width","16").attr("y","2").attr("x","2").attr("class","node-icon-inner").append("use").attr("class","node-icon").attr("xlink:href","#icon-"+t)}isNodeSelectable(e){return!0}appendTextElement(e){return e.append("text").attr("dx",e=>this.textPosition+(e.locked?15:0)).attr("dy",5).attr("class","node-name").on("click",(e,t)=>this.selectNode(t,!0))}nodesUpdate(e){return(e=e.enter().append("g").attr("class","node").attr("id",e=>"identifier-"+e.stateIdentifier).attr("role","treeitem").attr("aria-owns",e=>e.hasChildren?"group-identifier-"+e.stateIdentifier:null).attr("aria-level",this.getNodeDepth).attr("aria-setsize",this.getNodeSetsize).attr("aria-posinset",this.getNodePositionInSet).attr("aria-expanded",e=>e.hasChildren?e.expanded:null).attr("transform",this.getNodeTransform).attr("data-state-id",this.getNodeStateIdentifier).attr("title",this.getNodeTitle).on("mouseover",(e,t)=>this.onMouseOverNode(t)).on("mouseout",(e,t)=>this.onMouseOutOfNode(t)).on("contextmenu",(e,t)=>{e.preventDefault(),this.dispatchEvent(new CustomEvent("typo3:svg-tree:node-context",{detail:{node:t}}))})).append("text").text(e=>e.readableRootline).attr("class","node-rootline").attr("dx",0).attr("dy",-15).attr("visibility",e=>e.readableRootline?"visible":"hidden"),e}getNodeIdentifier(e){return e.identifier}getNodeDepth(e){return e.depth}getNodeSetsize(e){return e.siblingsCount}getNodePositionInSet(e){return e.siblingsPosition}getNodeStateIdentifier(e){return e.stateIdentifier}getNodeLabel(e){let t=(e.prefix||"")+e.name+(e.suffix||"");const s=document.createElement("div");if(s.textContent=t,t=s.innerHTML,this.searchTerm){const e=new RegExp(this.searchTerm,"gi");t=t.replace(e,'<tspan class="node-highlight-text">$&</tspan>')}return t}getNodeByIdentifier(e){return this.nodes.find(t=>t.stateIdentifier===e)}getNodeBgClass(e,t,s){let i="node-bg",n=null,o=null;return"object"==typeof s&&(n=s.data()[t-1],o=s.data()[t+1]),e.checked&&(i+=" node-selected"),(n&&e.depth>n.depth||!n)&&(e.firstChild=!0,i+=" node-first-child"),(o&&e.depth>o.depth||!o)&&(e.lastChild=!0,i+=" node-last-child"),e.class&&(i+=" "+e.class),i}getNodeTitle(e){return e.tip?e.tip:"uid="+e.identifier}getChevronTransform(e){return e.expanded?"translate(16,0) rotate(90)":" rotate(0)"}getChevronColor(e){return e.expanded?"#000":"#8e8e8e"}getToggleVisibility(e){return e.hasChildren?"visible":"hidden"}getChevronClass(e){return"chevron "+(e.expanded?"expanded":"collapsed")}getLinkPath(e){const t=e.target.x,s=e.target.y,i=[];return i.push("M"+e.source.x+" "+e.source.y),i.push("V"+s),e.target.hasChildren?i.push("H"+(t-2)):i.push("H"+(t+this.settings.indentWidth/4-2)),i.join(" ")}getNodeTransform(e){return"translate("+(e.x||0)+","+(e.y||0)+")"}getNodeBgTransform(e){return"translate(-8, "+((e.y||0)-10)+")"}getNodeActionTransform(e){return"translate(-10, "+((e.y||0)-10)+")"}clickOnIcon(e){this.dispatchEvent(new CustomEvent("typo3:svg-tree:node-context",{detail:{node:e}}))}chevronClick(e){e.expanded?this.hideChildren(e):this.showChildren(e),this.prepareDataForVisibleNodes(),this.updateVisibleNodes()}enterSvgElements(e){if(this.settings.showIcons){const e=Object.values(this.icons).filter(e=>""!==e.icon&&null!==e.icon),t=this.iconsContainer.selectAll(".icon-def").data(e,e=>e.identifier);t.exit().remove(),t.enter().append("g").attr("class","icon-def").attr("id",e=>"icon-"+e.identifier).append(e=>{if(e.icon instanceof SVGElement)return e.icon;const t="<svg>"+e.icon+"</svg>";return(new DOMParser).parseFromString(t,"image/svg+xml").documentElement.firstChild})}const t=this.nodesUpdate(e);let s=t.append("g").attr("class","toggle").attr("visibility",this.getToggleVisibility).attr("transform","translate(-8, -8)").on("click",(e,t)=>this.chevronClick(t));if(s.append("path").style("opacity",0).attr("d","M 0 0 L 16 0 L 16 16 L 0 16 Z"),s.append("path").attr("class","chevron").attr("d","M 4 3 L 13 8 L 4 13 Z"),this.settings.showIcons){const e=t.append("svg").attr("class","node-icon-container").attr("title",this.getNodeTitle).attr("height","20").attr("width","20").attr("x","6").attr("y","-10").attr("data-bs-toggle","tooltip").on("click",(e,t)=>{e.preventDefault(),this.clickOnIcon(t)});e.append("rect").style("opacity",0).attr("width","20").attr("height","20").attr("y","0").attr("x","0").attr("class","node-icon-click");const s=e.append("svg").attr("height","16").attr("width","16").attr("y","2").attr("x","2").attr("class","node-icon-inner");s.append("use").attr("class","node-icon").attr("data-uid",this.getNodeIdentifier);s.append("svg").attr("height","11").attr("width","11").attr("y","5").attr("x","5").append("use").attr("class","node-icon-overlay");s.append("svg").attr("height","11").attr("width","11").attr("y","5").attr("x","5").append("use").attr("class","node-icon-locked")}return l.initialize('[data-bs-toggle="tooltip"]',this.tooltipOptions),this.appendTextElement(t),e.merge(t)}updateScrollPosition(){this.viewportHeight=this.getBoundingClientRect().height,this.scrollBottom=this.scrollTop+this.viewportHeight+this.viewportHeight/2,setTimeout(()=>{l.hide(document.querySelector(this.tooltipOptions.container).querySelectorAll(".bs-tooltip-end"))},this.tooltipOptions.delay)}onMouseOverNode(e){e.isOver=!0,this.hoveredNode=e;let t=this.svg.select('.nodes-bg .node-bg[data-state-id="'+e.stateIdentifier+'"]');t.size()&&t.classed("node-over",!0).attr("rx","3").attr("ry","3");let s=this.nodesActionsContainer.select('.node-action[data-state-id="'+e.stateIdentifier+'"]');s.size()&&(s.classed("node-action-over",!0),s.attr("fill",t.style("fill")))}onMouseOutOfNode(e){e.isOver=!1,this.hoveredNode=null;let t=this.svg.select('.nodes-bg .node-bg[data-state-id="'+e.stateIdentifier+'"]');t.size()&&t.classed("node-over node-alert",!1).attr("rx","0").attr("ry","0");let s=this.nodesActionsContainer.select('.node-action[data-state-id="'+e.stateIdentifier+'"]');s.size()&&s.classed("node-action-over",!1)}handleKeyboardInteraction(e){const t=e.target;let s=n.select(t).datum();if(-1===[a.KeyTypesEnum.ENTER,a.KeyTypesEnum.SPACE,a.KeyTypesEnum.END,a.KeyTypesEnum.HOME,a.KeyTypesEnum.LEFT,a.KeyTypesEnum.UP,a.KeyTypesEnum.RIGHT,a.KeyTypesEnum.DOWN].indexOf(e.keyCode))return;e.preventDefault();const i=t.parentNode;switch(e.keyCode){case a.KeyTypesEnum.END:this.scrollTop=this.lastElementChild.getBoundingClientRect().height+this.settings.nodeHeight-this.viewportHeight,i.scrollIntoView({behavior:"smooth",block:"end"}),this.updateVisibleNodes(),this.switchFocus(i.lastElementChild);break;case a.KeyTypesEnum.HOME:this.scrollTo({top:this.nodes[0].y,behavior:"smooth"}),this.prepareDataForVisibleNodes(),this.updateVisibleNodes(),this.switchFocus(i.firstElementChild);break;case a.KeyTypesEnum.LEFT:if(s.expanded)s.hasChildren&&(this.hideChildren(s),this.prepareDataForVisibleNodes(),this.updateVisibleNodes());else if(s.parents.length>0){let e=this.nodes[s.parents[0]];this.scrollNodeIntoVisibleArea(e,"up"),this.switchFocusNode(e)}break;case a.KeyTypesEnum.UP:this.scrollNodeIntoVisibleArea(s,"up"),this.switchFocus(t.previousSibling);break;case a.KeyTypesEnum.RIGHT:s.expanded?(this.scrollNodeIntoVisibleArea(s,"down"),this.switchFocus(t.nextSibling)):s.hasChildren&&(this.showChildren(s),this.prepareDataForVisibleNodes(),this.updateVisibleNodes(),this.switchFocus(t));break;case a.KeyTypesEnum.DOWN:this.scrollNodeIntoVisibleArea(s,"down"),this.switchFocus(t.nextSibling);break;case a.KeyTypesEnum.ENTER:case a.KeyTypesEnum.SPACE:this.selectNode(s,!0)}}scrollNodeIntoVisibleArea(e,t="up"){let s=this.scrollTop;if("up"===t&&s>e.y-this.settings.nodeHeight)s=e.y-this.settings.nodeHeight;else{if(!("down"===t&&s+this.viewportHeight<=e.y+3*this.settings.nodeHeight))return;s+=this.settings.nodeHeight}this.scrollTo({top:s,behavior:"smooth"}),this.updateVisibleNodes()}updateLinks(){const e=this.data.links.filter(e=>e.source.y<=this.scrollBottom&&e.target.y>=this.scrollTop-this.settings.nodeHeight).map(e=>(e.source.owns=e.source.owns||[],e.source.owns.push("identifier-"+e.target.stateIdentifier),e)),t=this.linksContainer.selectAll(".link").data(e);t.exit().remove(),t.enter().append("path").attr("class","link").attr("id",this.getGroupIdentifier).attr("role",e=>1===e.target.siblingsPosition&&e.source.owns.length>0?"group":null).attr("aria-owns",e=>1===e.target.siblingsPosition&&e.source.owns.length>0?e.source.owns.join(" "):null).merge(t).attr("d",e=>this.getLinkPath(e))}getGroupIdentifier(e){return 1===e.target.siblingsPosition?"group-identifier-"+e.source.stateIdentifier:null}registerUnloadHandler(){try{if(!window.frameElement)return;window.addEventListener("pagehide",()=>this.muteErrorNotifications=!0,{once:!0})}catch(e){console.error("Failed to check the existence of window.frameElement – using a foreign origin?")}}}__decorate([(0,i.property)({type:Object})],u.prototype,"setup",void 0),__decorate([(0,i.state)()],u.prototype,"settings",void 0),t.SvgTree=u;let g=class extends s.LitElement{constructor(){super(...arguments),this.tree=null,this.settings={searchInput:".search-input",filterTimeout:450}}createRenderRoot(){return this}firstUpdated(){const e=this.querySelector(this.settings.searchInput);e&&(new p.default("input",e=>{const t=e.target;this.tree.filter(t.value.trim())},this.settings.filterTimeout).bindTo(e),e.focus())}render(){return s.html`
       <div class="tree-toolbar">
         <div class="svg-toolbar__menu">
           <div class="svg-toolbar__search">