https://kulturfonds-frm.de/5d263779.js

1import{b as t,T as e,S as i,i as a,x as s}from"./c4af27d3.js";import{c as r}from"./5a719131.js";import{S as n,s as o}from"./2aa2aea4.js";class l extends(n(t)){themeCtrl=new e(this);static get properties(){return{expanded:{type:Boolean,reflect:!0}}}static get styles(){return[super.styles||[],i,a`
2        :host {
3          position: relative;
4          --content-tabs-height: auto;
5        }
6        .slides {
7          padding-bottom: var(--app-base-dist);
8          width: var(--app-content-max-width);
9          margin: 0 auto;
10        }
11        .slides ::slotted(*) {
12          text-align: left;
13          padding-left: var(--app-content-side-padding);
14          padding-right: var(--app-content-side-padding);
15          min-width: none;
16          height: fit-content;
17        }
18        nav.content {
19          margin-bottom: var(--app-base-dist);
20          /* offset a margin-top */
21          margin-top: calc(var(--app-base-dist-raw) / -2);
22          display: flex;
23          flex-direction: row;
24          flex-wrap: wrap;
25        }
26        a {
27          font-size: var(--app-font-size-large);
28          font-family: var(--app-header-font);
29          text-decoration: none;
30          background: var(--app-highlight-color);
31          color: var(--app-text-color-light);
32          padding: calc(var(--app-base-dist-raw) / 4)
33            calc(var(--app-base-dist-raw) / 2);
34          border-radius: 0 0 0 0.5rem;
35          transition: all 0.25s ease;
36          margin-right: calc(var(--app-base-dist-raw) / 2);
37          margin-top: calc(var(--app-base-dist-raw) / 2);
38          white-space: nowrap;
39        }
40        nav > a:last-child {
41          margin-right: 0;
42          border-radius: 0 0.5rem 0 0.5rem;
43        }
44        :host([expanded]) a[active],
45        a:hover {
46          background: var(--app-highlight-color-lighter);
47          color: var(--app-highlight-color);
48        }
49        #wrap {
50          height: 0px;
51          overflow: hidden;
52          transition: height 0.15s ease-out;
53        }
54        :host([expanded]) #wrap {
55          height: var(--content-tabs-height);
56        }
57      `]}constructor(){super(),this.expanded=null,this.timeout=null,this.resizeObserver=new window.ResizeObserver((t=>{this.timeout&&clearTimeout(this.timeout),this.timeout=setTimeout((()=>{requestAnimationFrame((async()=>{await this.updateComplete,t.forEach((t=>{if(t?.target?.hasAttribute("active")){const{height:e}=t.target.getBoundingClientRect();this.style.setProperty("--content-tabs-height",""+(null!==e?`${e}px`:"auto"))}}))}))}),150)}))}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver&&this.resizeObserver.disconnect()}initSlides(){const t=this.getNodes();this.resizeObserver&&(t.forEach((t=>{this.resizeObserver.observe(t)})),super.initSlides())}selectSlide(t=null,e=null){if(t&&this.slides&&"length"in this.slides&&this.slides.length)if(t.preventDefault(),t.stopPropagation(),t.currentTarget.getAttribute("active")&&this.expanded)this.expanded=!1,setTimeout((()=>{this.shadowRoot.querySelector(".slides").scrollTo({top:0,left:0})}),150);else{const i=super.selectSlide(t,e);this.expanded=!0,this.timeout&&clearTimeout(this.timeout),this.timeout=setTimeout((()=>{requestAnimationFrame((async()=>{await this.updateComplete;const t=i?.getBoundingClientRect()?.height??null;this.style.setProperty("--content-tabs-height",""+(null!==t?`${t}px`:"auto"))}))}),150)}}render(){const t=super.render();return s`
58      <section>
59        ${this.slides.length?s`
60              <nav class="content">
61                ${r(this.slides,(t=>t.getAttribute("id")),((t,e)=>s`<a
62                    ${o(t,e,{noDefault:!0})}
63                    href="#"
64                    @click="${this.selectSlide}"
65                    >${t.hasAttribute("aria-label")?t.getAttribute("aria-label"):`Tab ${e+1}`}</a
66                  >`))}
67              </nav>
68            `:null}
69        ${t}
70      </section>
71    `}}window.customElements.define("content-tabs",l);export{l as ContentTabs};