/*
* 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{LitElement as v,html as m}from"lit";import{customElement as p}from"lit/decorators.js";import b from"@typo3/core/document-service.js";import h from"@typo3/backend/storage/browser-session.js";import y from"@typo3/backend/storage/client.js";import"@typo3/backend/element/icon-element.js";var A=function(l,t,e,s){var n=arguments.length,r=n<3?t:s===null?s=Object.getOwnPropertyDescriptor(t,e):s,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(l,t,e,s);else for(var i=l.length-1;i>=0;i--)(a=l[i])&&(r=(n<3?a(r):n>3?a(t,e,r):a(t,e))||r);return n>3&&r&&Object.defineProperty(t,e,r),r};class c extends CustomEvent{static{this.eventName="typo3:tab:show"}constructor(t){super(c.eventName,{bubbles:!0,cancelable:!0,detail:{relatedTarget:t}})}}class u extends CustomEvent{static{this.eventName="typo3:tab:shown"}constructor(t){super(u.eventName,{bubbles:!0,detail:{relatedTarget:t}})}}class o{static{this.idCounter=0}constructor(){document.addEventListener("click",t=>{const e=t.target?.closest('[data-typo3-tab], [data-bs-toggle="tab"]');e&&(t.preventDefault(),o.show(e))}),document.addEventListener("keydown",t=>{const e=t.target;if(!e.matches?.('[role="tab"]'))return;const s=e.closest('[role="tablist"]');if(!s)return;const n=Array.from(s.querySelectorAll('[role="tab"]:not([disabled])'));if(n.length<2)return;const r=getComputedStyle(s).direction==="rtl";let a=null;switch(t.key){case"ArrowLeft":a=n[(n.indexOf(e)-(r?-1:1)+n.length)%n.length];break;case"ArrowRight":a=n[(n.indexOf(e)+(r?-1:1)+n.length)%n.length];break;case"Home":a=n[0];break;case"End":a=n[n.length-1];break;default:return}t.preventDefault(),a.focus(),a.closest(".nav-item")?.scrollIntoView({behavior:"smooth",inline:"nearest",block:"nearest"})}),b.ready().then(()=>{o.initialize()})}static initialize(t=document){for(const e of t.querySelectorAll('[role="tablist"]'))for(const s of e.querySelectorAll('[role="tab"], [data-bs-toggle="tab"]')){const n=o.migrate(s),r=n.classList.contains("active");n.setAttribute("aria-selected",r?"true":"false"),n.setAttribute("tabindex",r?"0":"-1");const a=o.getPanel(n);n.id||(n.id=a?a.id+"-tab":"typo3-tab-"+ ++o.idCounter),a&&(n.setAttribute("aria-controls",a.id),a.setAttribute("aria-labelledby",n.id),a.setAttribute("role","tabpanel"))}}static show(t){const e=t.closest('[role="tablist"]');if(!e)return;o.initialize(e);const s=o.getPanel(t);if(!s||t.classList.contains("active"))return;const n=s.closest(".tab-content"),r=e.querySelector(":scope .nav-link.active")??null,a=new c(r);if(t.dispatchEvent(a),!a.defaultPrevented){if(e)for(const i of e.querySelectorAll(".nav-link.active"))i.classList.remove("active"),i.setAttribute("aria-selected","false"),i.setAttribute("tabindex","-1");if(n)for(const i of n.querySelectorAll(":scope > .tab-pane.active"))i.classList.remove("active");t.classList.add("active"),t.setAttribute("aria-selected","true"),t.setAttribute("tabindex","0"),s.classList.add("active"),t.dispatchEvent(new u(r))}}static getTargetIdentifier(t){return t.dataset.typo3Tab?.replace("#","")||null}static getPanel(t){const e=o.getTargetIdentifier(t);return e?document.getElementById(e):null}static migrate(t){if(t.dataset.typo3Tab)return t;const e=t.dataset.bsTarget||(t instanceof HTMLAnchorElement?t.getAttribute("href"):"")||"";if(t instanceof HTMLAnchorElement&&!e.startsWith("#"))return t;if(t instanceof HTMLAnchorElement){const s=document.createElement("button");s.type="button";for(const n of t.attributes)["href","data-bs-toggle","data-bs-target"].includes(n.name)||s.setAttribute(n.name,n.value);return s.innerHTML=t.innerHTML,s.setAttribute("data-typo3-tab",e),t.replaceWith(s),s}return t.setAttribute("data-typo3-tab",e),t.removeAttribute("data-bs-toggle"),t.removeAttribute("data-bs-target"),t}}class B{constructor(t){const e=document.createElement("typo3-backend-tab-scroller");t.parentNode instanceof d||(t.parentNode.insertBefore(e,t),e.appendChild(t))}}let d=class extends v{constructor(){super(),this.navTabs=null,this.handleScroll=()=>{this.updateArrows()},this.addEventListener(u.eventName,t=>{t.target.closest(".nav-item")?.scrollIntoView({container:"nearest",behavior:"smooth",inline:"nearest",block:"nearest"})}),new ResizeObserver(()=>{this.scrollActiveLinkIntoView(),this.updateArrows()}).observe(this)}connectedCallback(){super.connectedCallback(),this.createButtons(),this.initializeTabs(),this.updateArrows()}render(){return m``}createButtons(){this.startButton=document.createElement("button"),this.startButton.slot="start-button",this.startButton.type="button",this.startButton.className="nav-tabs-scroll nav-tabs-scroll-start",this.startButton.hidden=!0,this.startButton.setAttribute("aria-hidden","true"),this.startButton.setAttribute("tabindex","-1"),this.startButton.innerHTML='',this.endButton=document.createElement("button"),this.endButton.slot="end-button",this.endButton.type="button",this.endButton.className="nav-tabs-scroll nav-tabs-scroll-end",this.endButton.hidden=!0,this.endButton.setAttribute("aria-hidden","true"),this.endButton.setAttribute("tabindex","-1"),this.endButton.innerHTML='',this.startButton.addEventListener("click",()=>{const{navTabs:t}=this;if(t===null)return;const e=getComputedStyle(t).direction==="rtl";t.scrollBy({left:(e?1:-1)*t.clientWidth*.75,behavior:"smooth"})}),this.endButton.addEventListener("click",()=>{const{navTabs:t}=this;if(t===null)return;const e=getComputedStyle(t).direction==="rtl";t.scrollBy({left:(e?-1:1)*t.clientWidth*.75,behavior:"smooth"})}),this.appendChild(this.startButton),this.appendChild(this.endButton)}initializeTabs(){const t=this.querySelector(".nav-tabs");if(t===null){this.navTabs?.removeEventListener("scroll",this.handleScroll),this.navTabs=null;return}this.navTabs!==t&&(t.addEventListener("scroll",this.handleScroll,{passive:!0}),this.scrollActiveLinkIntoView(),this.navTabs=t)}scrollActiveLinkIntoView(){const t=this.querySelector(".nav-link.active");t&&t.closest(".nav-item")?.scrollIntoView({container:"nearest",behavior:"instant",inline:"nearest",block:"nearest"})}updateArrows(){const{navTabs:t}=this;if(t===null)return;const{scrollLeft:e,scrollWidth:s,clientWidth:n}=t,r=s>n,a=getComputedStyle(t).direction==="rtl",i=a?e>=0:e<=0,f=a?e<=-(s-n):e>=s-n-1;this.startButton.hidden=!r||i,this.endButton.hidden=!r||f}};d=A([p("typo3-backend-tab-scroller")],d);class L{constructor(){b.ready().then(()=>{document.querySelectorAll("[data-store-last-tab]").forEach(t=>{this.restore(t),t.addEventListener(c.eventName,e=>{this.store(e.currentTarget,e.target)})})}),y.unsetByPrefix("tabs-")}restore(t){const e=h.get(t.id);if(e){const s=t.querySelector('[data-typo3-tab="#'+e+'"]');s&&o.show(s)}}store(t,e){const s=e.dataset.typo3Tab?.replace("#","")??"";h.set(t.id,s)}}new o,new L,b.ready().then(()=>{document.querySelectorAll(".nav-tabs").forEach(l=>new B(l))});export{o as Tab,d as TabScrollerElement,c as TabShowEvent,u as TabShownEvent};