https://www.eu-gleichbehandlungsstelle.de/_assets/9da1c2a6d746389c…/switch-content-with-transition-CtAYbcEw.js

1import{g as t,l as e,e as i,A as n,i as s}from"./pp-accordion-CA6w9In6.js";import{M as r,u as h,s as o}from"./pp-process-CNG5NvVa.js";import{o as c}from"./pp-facet-dropdown-FY1eeaHH.js";import"./pp-highcharts-D5Crk9o0.js";class a extends(r(s)){static get properties(){return{link:{type:String},external:{type:Boolean},_isSwitched:{type:Boolean,state:!0}}}constructor(){super(),this.external=!1,this._isSwitched=!1,this._children=t(this,["html-collection","html-collection-switched","pp-text"]),this.item=[...this._children?.["html-collection"].children].map(t=>e(t)),this.switchedItem=[...this._children?.["html-collection-switched"].children].map(t=>e(t))}connectedCallback(){super.connectedCallback(),this.hasEvent=this.link||this.contentUrl}setAttributeOnTransition(t){t.target.setAttribute("aria-hidden","true"===t.target.getAttribute("aria-hidden")?"false":"true")}get textClasses(){return{"group-hover:underline":this.hasEvent,"group-focus:underline":this.hasEvent}}get flexClasses(){return{flex:this.contentUrl,"items-center":this.contentUrl,"justify-center":this.contentUrl}}get textContent(){return h`
2            <div class="${i(this.textClasses)} text-center lg:typ-heading-3 typ-heading-4 mx-auto mt-20">
3                ${this._children?.["pp-text"]}
4            </div>`}get switchContent(){return h`
5            <div class="qs-switch-content-with-transition group flex items-center justify-center relative"
6                @transitionrun="${this.setAttributeOnTransition}"
7            >
8                <div class="qs-switch-content-with-transition-default"
9                    aria-hidden="${this._isSwitched}"
10                >
11                    ${this.item}
12                </div>
13                <div class="qs-switch-content-with-transition-switched absolute opacity-0 transition-opacity duration-200 ease-in group-hover:opacity-100 group-focus-within:opacity-100"
14                    aria-hidden="${!this._isSwitched}"
15                >
16                    ${this.switchedItem}
17                </div>
18            </div>
19        </div>
20        ${this._children?.["pp-text"]?this.textContent:n}
21        `}get dynamicTag(){const t=o(this.contentUrl?"button":"a");return h`
22            <${t} 
23                class="outline-none"
24                title="${c(this.title?this.title:void 0)}"
25                href="${c(this.link)}"
26                target="${c(this.external?"_blank":void 0)}"
27                rel="${c(this.external?"noreferrer noopener":void 0)}"
28                type="${c(this.contentUrl?"button":void 0)}"
29                @click="${c(this.contentUrl?this.dispatchHtmlUpdateEvent:void 0)}"
30            >
31                ${this.switchContent}
32                ${this.textContent}
33            </${t}>
34        `}get contentWithEvent(){return h`
35            <div class="outline-static-1 group focus-within:outline focus-within:outline-2 ${i(this.flexClasses)}">
36                ${this.dynamicTag}
37            </div>
38        `}render(){return h`${this.hasEvent?this.contentWithEvent:this.switchContent}`}createRenderRoot(){return this}}customElements.define("pp-switch-content-with-transition",a);export{a as default};