https://www.eu-gleichbehandlungsstelle.de/_assets/9da1c2a6d746389c…/public/chunks/tab-collection-CeiywZb9.js

1import{i as t,g as a,_ as i,b as e,A as s,e as r}from"./pp-accordion-CA6w9In6.js";import{w as n,T as o}from"./pp-highcharts-D5Crk9o0.js";import"./pp-facet-dropdown-FY1eeaHH.js";class h extends t{static get properties(){return{tabGroupId:{type:String,attribute:"tab-group-id"},activeItem:{type:Number,attribute:"active-item"},a11yNavLabel:{type:String,attribute:"a11y-nav-label"},additionalLabel:{type:String,attribute:"additional-label"},theme:{type:String},variant:{type:String}}}bootstrapTab;constructor(){super(),this.variant="tabs",this._children=a(this,["pp-text-inline","html-collection"]),this.itemCount=this._children?.["html-collection"].children.length}async firstUpdated(){const{default:t}=await i(async()=>{const{default:t}=await import("./tab-aYvyS17u.js").then(t=>t.t);return{default:t}},[],import.meta.url);this.bootstrapTab=t,this.boundPopStateHandler=this._handlePopStateEvent.bind(this),window.addEventListener(n,this.boundPopStateHandler);this.renderRoot.querySelectorAll(".js-tab").forEach(t=>{t.addEventListener("shown.bs.tab",this.dispatchChangeEvent)}),this.setActiveClass(),this._handlePopStateEvent(),this.setActiveTab()}dispatchChangeEvent(){window.dispatchEvent(new Event(o))}_handlePopStateEvent(){const t=this.renderRoot.getElementsByClassName("js-tab active")[0].id;if(window.location.hash!==`#${t}`&&""!==window.location.hash){const a=this.renderRoot.querySelector(`#${window.location.hash.substring(1)}`);this.bootstrapTab.getOrCreateInstance(a).show(),setTimeout(()=>{const a=this.renderRoot.querySelector(`#${t}`).getBoundingClientRect();window.scrollTo(0,a.top+window.scrollY-140)},0)}}get setAdditionalLabel(){return this.additionalLabel?e`<span class="hidden md:inline">${this.additionalLabel}</span>`:s}get tabHeadingList(){return e`
2                <div class="js-tab-navigation s-tab-navigation nav nav-tabs flex ${r(this.headingClasses)} border-none" id="${this.tabGroupId}-navitems" role="tablist" aria-label="${this.a11yNavLabel}">
3                    ${this._children["pp-text-inline"].map((t,a)=>e`
4                        <div class="${r(this.growAndBorderClasses)} group text-center">
5                            <button type="button" class="js-tab ${r(this.buttonClasses)} text-center typ-menu h-full text-static-1 hover:underline focus:underline bg-static-9 focus:outline focus:outline-static-1 focus:-outline-offset-2 focus:outline-2" 
6                                id="${this.tabGroupId}-tab-header-${a}"
7                                data-bs-toggle="tab"
8                                role="tab"  
9                                data-bs-target="#${this.tabGroupId}-tab-content-${a}"
10                                aria-controls="${this.tabGroupId}-tab-content-${a}">
11                                  ${t} ${this.setAdditionalLabel}
12                            </button>
13                        </div>
14                    `)}
15                </div>
16        `}setActiveClass(){this.querySelector(".js-tab-content:first-child").classList.add("active","show");this.querySelector(".js-tab:first-child").classList.add("active")}setActiveTab(){const t=this.querySelector(`.js-tab-navigation div:nth-child(${this.activeItem}) .js-tab`),a=this.querySelector(".js-tab-navigation div:nth-child(1) .js-tab");if(this.activeItem<=this.itemCount){this.bootstrapTab.getOrCreateInstance(t).show()}else if(this.activeItem>this.itemCount){this.bootstrapTab.getOrCreateInstance(a).show()}this.dispatchChangeEvent()}get contentClasses(){return{"px-15":"primary"===this.theme&&"tabs"===this.variant,"pt-20":"primary"===this.theme&&"tabs"===this.variant,"pb-24":"primary"===this.theme&&"tabs"===this.variant,"pb-40":"primary"===this.theme&&"tabs"===this.variant,"lg:p-40":"primary"===this.theme&&"tabs"===this.variant,"rounded-br-64":"primary"===this.theme&&"tabs"===this.variant,"border-r-6":"primary"===this.theme&&"tabs"===this.variant,"border-l-6":"primary"===this.theme&&"tabs"===this.variant,"border-b-6":"primary"===this.theme&&"tabs"===this.variant,"border-static-8":"primary"===this.theme&&"tabs"===this.variant,"bg-static-8":"primary"===this.theme&&"tabs"===this.variant,"pt-24":"primary"===this.theme&&"pills"===this.variant,"py-20":"secondary"===this.theme&&"pills"===this.variant,"flex-col":"pills"===this.variant,"md:flex-row":"pills"===this.variant}}

16get positioningAndBackgroundClasses(){return{"bg-static-8":"secondary"===this.theme,"mx-breakout":"secondary"===this.theme,"w-screen":"secondary"===this.theme,relative:"secondary"===this.theme}}get headingClasses(){return{"flex-nowrap":"tabs"===this.variant,"items-stretch":"tabs"===this.variant,"justify-center":"pills"===this.variant,"gap-20":"pills"===this.variant,"mb-24":"pills"===this.variant&&"secondary"===this.theme}}get growAndBorderClasses(){return{"flex-grow":"tabs"===this.variant,"border-static-22":"tabs"===this.variant,"border-l-2":"tabs"===this.variant,"first:border-l-0":"tabs"===this.variant,"[&_.active]:bg-static-8":"tabs"===this.variant,"[&_.active]:border-static-8":"tabs"===this.variant}}get buttonClasses(){return{"px-15":"primary"===this.theme&&"tabs"===this.variant,"px-40":"secondary"===this.theme&&"tabs"===this.variant,"py-24":"tabs"===this.variant,"w-full":"tabs"===this.variant,"border-static-22":"tabs"===this.variant,"border-t-2":"tabs"===this.variant,"md:border-t-6":"tabs"===this.variant,"md:group-first:border-static-22":"tabs"===this.variant,"md:group-first:border-l-6":"tabs"===this.variant,"md:group-first:[&.active]:border-static-8":"tabs"===this.variant,"md:group-last:border-r-6":"tabs"===this.variant,"py-8":"pills"===this.variant,"px-16":"pills"===this.variant,"rounded-full":"pills"===this.variant,"[&.active]:bg-static-1":"pills"===this.variant,"[&.active]:text-text-2":"pills"===this.variant}}get tabContent(){return e`
17            ${[...this._children?.["html-collection"].children].map((t,a)=>e`
18                <div class="js-tab-content ${r(this.contentClasses)} tab-pane fade text-static-1" role="tabpanel" id="${this.tabGroupId}-tab-content-${a}" tabindex="0">
19                    ${t}
20                </div>
21            `)}
22        `}get tabContentList(){return e`
23            <div class="tab-content ${r(this.positioningAndBackgroundClasses)}" id="${this.tabGroupId}-contentitems">
24                ${this.tabContent}
25            </div>
26        `}render(){return e`
27            ${this.tabHeadingList}
28            ${this.tabContentList}
29        `}createRenderRoot(){return this}}customElements.define("pp-tab-collection",h);export{h as default};