https://www.eu-gleichbehandlungsstelle.de/_assets/9da1c2a6d746389c…/public/chunks/pp-timetable-p8ZhQ7J7.js

1import{g as t,e,b as i,A as r,i as s,l as a}from"./pp-accordion-CA6w9In6.js";import{M as l}from"./pp-process-CNG5NvVa.js";import{t as n}from"./pp-social-media-newsroom-XnZulFRf.js";let o=class extends(l(s)){static get properties(){return{theme:{type:String},variant:{type:String},srListTitle:{type:String,attribute:"sr-list-title"}}}constructor(){super(),this.theme="primary",this.variant="primary",this.srListTitle="Zielgruppe der Veranstaltung",this._children=t(this,["pp-text","pp-text-inline","pp-text-inline-time","pp-tag","pp-list"])}async firstUpdated(){const t=this.renderRoot.querySelector(".js-button");t.addEventListener("focus",()=>{if(!t.matches(":focus-visible"))return;const e=this.getBoundingClientRect(),i=getComputedStyle(document.documentElement),r=parseInt(i.getPropertyValue("--header-height"),10),s=parseInt(i.getPropertyValue("--timetable-header-height"),10)||0;window.scrollTo({top:e.top+window.scrollY-(r+s)})})}get contentClasses(){return{"bg-module-bg-5":"primary"===this.variant&&"primary"===this.theme,"bg-module-bg-8":"primary"===this.variant&&"secondary"===this.theme,"bg-module-bg-7":"primary"===this.variant&&"tertiary"===this.theme,"border-b-line-2":"primary"===this.variant,"border-b-2":"primary"===this.variant,"p-12":"primary"===this.variant,"text-14":"primary"===this.variant,"bg-static-8":"secondary"===this.variant,"rounded-component-br":"secondary"===this.variant,"rounded-component-bl":"secondary"===this.variant,"rounded-t-none":"secondary"===this.variant,"px-32":"secondary"===this.variant,"py-16":"secondary"===this.variant,"typ-body-3":"secondary"===this.variant}}get widthAndSpacingClasses(){return{"w-136":"primary"===this.variant,"mb-8":"secondary"===this.variant}}get backgroundAndSpacingClasses(){return{"bg-module-bg-6":"primary"===this.variant&&"primary"===this.theme,"bg-static-22":"primary"===this.variant&&"secondary"===this.theme,"bg-module-bg-3":"primary"===this.variant&&"tertiary"===this.theme,"p-8":"primary"===this.variant,"text-16":"primary"===this.variant,"bg-button-interactive-bg-1":"secondary"===this.variant,"text-button-interactive-text-1":"secondary"===this.variant,"px-32":"secondary"===this.variant,"py-16":"secondary"===this.variant,"text-left":"secondary"===this.variant,"font-bold":"secondary"===this.variant,"rounded-component-tl":"secondary"===this.variant,"rounded-component-tr":"secondary"===this.variant,"rounded-b-none":"secondary"===this.variant}}get borderClasses(){return{"rounded-component-tl":"secondary"===this.variant,"rounded-component-tr":"secondary"===this.variant,"rounded-component-br":"secondary"===this.variant,"rounded-component-bl":"secondary"===this.variant,"w-full":"secondary"===this.variant}}get time(){return i`
2            <span class="qs-time block ${e(this.backgroundAndSpacingClasses)} w-full">
3                ${this._children?.["pp-text-inline-time"]}
4            </span>
5        `}get list(){return this._children?.["pp-list"]?i`
6                <span class="block">
7                    <span class="sr-only">${this.srListTitle}</span>
8                    ${this._children?.["pp-list"]}
9                </span>
10            `:r}get tag(){return this._children?.["pp-tag"]?i`
11                <span class="block mb-8 -translate-x-4">
12                    ${this._children?.["pp-tag"]}
13                </span>
14            `:r}get content(){return i`
15            <span class="qs-timetable-content flex flex-col ${e(this.contentClasses)} text-left flex-grow w-full">
16                <span class="js-event-title font-bold block ${e(this.widthAndSpacingClasses)}">
17                    ${this._children?.["pp-text"]||this._children?.["pp-text-inline"]}
18                </span>
19                ${this.tag}
20                ${this.list}
21            </span>
22        `}render(){return i`
23            <div class="qs-timetable-item text-static-2 flex h-full">
24                <button
25                    type="button"
26                    @click="${this.dispatchHtmlUpdateEvent}"
27                    class="js-button qs-button flex flex-col hover:outline hover:outline-focus-1 hover:outline-2 focus-within:outline focus-within:outline-focus-1 focus-within:outline-2 z-10 box-border ${e(this.borderClasses)}"
28                >
29                    ${this.time}
30                    ${this.content}
31                </button>
32            </div>
33        `}createRenderRoot(){return this}};customElements.define("pp-timetable-item",o);const d=Object.freeze(Object.defineProperty({__proto__:null,default:o},Symbol.toStringTag,{value:"Module"}));class c extends s{static get properties(){return{timeInterval:{type:Number,attribute:"time-interval"}}}constructor(){super(),this.timeCollections=t(this),this.timetableColumns=this.timeCollections.length+1,this.timetableRows=null,this.earliestStart=null}firstUpdated(){const t=this.renderRoot.querySelector(".js-fakescroll"),e=this.renderRoot.querySelector(".js-timetable-header"),i=this.renderRoot.querySelector(".js-timetable-content"),r=e.offsetHeight;document.documentElement.style.setProperty("--timetable-header-height",`${r}px`),i.addEventListener("scroll",n(()=>{e.scrollTo({left:i.scrollLeft}),t.scrollTo({left:i.scrollLeft})},{passive:!0},100)),e.addEventListener("scroll",n(()=>{i.scrollTo({left:e.scrollLeft}),t.scrollTo({left:e.scrollLeft})},{passive:!0},100)),t.addEventListener("scroll",n(()=>{i.scrollTo({left:t.scrollLeft}),e.scrollTo({left:t.scrollLeft})},{passive:!0},100))}connectedCallback(){super.connectedCallback();const{earliestStart:t,latestEnd:e}=this.computeEarliestAndLatestTimes();this.timeLabels=this.renderTimeLabels(t,e),this.timetableRows=this.timeLabels.length}getEventTimes(){const t=document.querySelectorAll('[data-slot="pp-text-inline-time"]');return Array.from(t).map(t=>{const e=t.querySelectorAll("time");return{startTime:this.convertTimeToDecimal(e[0].getAttribute("datetime")),endTime:this.convertTimeToDecimal(e[1].getAttribute("datetime"))}})}roundToNearestInterval(t,e){const i=60*e;return Math.floor(t/i)*i}convertTimeToDecimal(t){const[e,i]=t.split(":").map(Number),r=this.roundToNearestInterval(i,this.timeInterval);return r>=60?e+1+(r-60)/60:e+r/60}computeEarliestAndLatestTimes(){const t=this.getEventTimes(),e=t.map(t=>t.startTime),i=t.map(t=>t.endTime);return{earliestStart:Math.min(...e),latestEnd:Math.max(...i)}}renderTimeLabels(t,e){const r=[];let s=0;for(let a=t;a<=e;a+=this.timeInterval,s+=1){const t=Math.floor(a),e=Math.floor(60*(a-t)),l=`${t.toString().padStart(2,"0")}:${e.toString().padStart(2,"0")}`;r.push(i`
34                <div
35                    class="relative after:empty-content after:absolute after:left-48 after:right-0 after:top-0 after:bg-static-19 after:h-1 w-[calc(100% - 50px)]"
36                    data-time="${l}"
37                    data-row="${s+1}"
38                    style="width: ${190*this.timetableColumns}px"
39                    >
40                        <div class="absolute -top-10">
41                            ${l}
42                        </div>
43                </div>
44            `)}return r}getRowForTime(t){const e=this.convertTimeToDecimal(t);let i=this.earliestStart,r=1;

44return this.timeLabels.forEach((t,s)=>{const a=t.values[0],l=this.convertTimeToDecimal(a);l<=e&&l>=i&&(i=l,r=s+1)}),r}renderTimetableItem(t,e,r){const s=[...t.querySelectorAll("time")].map(t=>t.getAttribute("datetime")),a=s[0],l=s[1];let n=this.getRowForTime(a);const o=this.getRowForTime(l);if(r.length>1){const t=r[e].querySelector("time").getAttribute("datetime");let i;e>=1&&(i=r[e-1].querySelector("time").getAttribute("datetime"),this.getRowForTime(t)===this.getRowForTime(i)&&(n+=1))}return i`
45            <li style="grid-row-start: ${n}; grid-row-end: ${o};">
46                ${t}
47            </li>
48        `}get generateHeaderGrid(){const t=this.timeCollections.map(t=>[...t.querySelectorAll('[data-slot="pp-headline"]')]),e=[...this.querySelectorAll('[data-slot="pp-image"]')].map(t=>a(t));return i`
49            <div class="js-timetable-header qs-header sticky top-0 lg:top-[var(--header-height)] z-20 overflow-hidden">
50                <div class="grid gap-x-20" 
51                     style="
52                        grid-template-columns: 50px repeat(${this.timetableColumns-1}, minmax(0, 1fr)); 
53                        width: ${190*this.timetableColumns}px"
54                >
55                    <div class="grid col-start-1 gap-x-32 z-20 text-center font-bold bg-module-bg-1 pt-40 mb-10" 
56                         style="
57                            grid-template-columns: 50px repeat(${this.timetableColumns-1}, minmax(0, 160px)); 
58                            grid-column-end: ${this.timetableColumns+1}; 
59                            grid-template-rows: auto auto;"
60                    >
61                        <div></div>
62                        ${t.map((t,r)=>i`
63                            <div class="flex flex-row mb-24 items-center overflow-visible gap-8">
64                                <div class="qs-room-image overflow-hidden transition-all delay-0 duration-200 ease-in h-46 w-48">${e[r]}</div>
65                                <div class="w-[calc(100%-56px)] text-static-1 text-18 text-left line-clamp-2 break-words uppercase">${t}</div>
66                            </div>
67                        `)}
68                    </div>
69                </div>
70            </div>
71        `}get generateContentGrid(){return i`
72            <div class="js-timetable-content overflow-x-scroll u-always-visible-scrollbars">
73                <div class="grid gap-x-20 pt-8" 
74                     style="
75                        grid-template-columns: 50px repeat(${this.timetableColumns-1}, minmax(0, 1fr)); 
76                        width: ${190*this.timetableColumns}px"
77                >
78                    <div class="grid col-start-1 text-16 gap-32" 
79                         style="
80                            grid-template-rows: repeat(${this.timetableRows}, minmax(0, 90px)); 
81                            grid-template-columns: 50px repeat(${this.timetableColumns-1}, minmax(0, 160px)); 
82                            grid-column-end: ${this.timetableColumns+1};"
83                    >
84                        ${this.timeLabelsColumn}
85                        ${this.roomColumns}
86                    </div>
87                </div>
88            </div>
89        `}get timeLabelsColumn(){return i`
90            <div class="grid row-start-1 text-static-16 text-16 z-0" 
91                 style="
92                    grid-template-rows: repeat(${this.timetableRows}, minmax(0, 1fr)); 
93                    grid-row-end: ${this.timetableRows+1};"
94            >
95                ${this.timeLabels}
96            </div>
97        `}get roomColumns(){return this.timeCollections.map(t=>{const e=[...t.querySelectorAll('[data-slot="pp-timetable-item"]')];return i`
98                <ul class="qs-room-col grid row-start-1 justify-center" 
99                    style="grid-template-rows: repeat(${this.timetableRows}, minmax(0, 1fr)); grid-row-end: ${this.timetableRows+1};"
100                >
101                    ${e.map((t,e,i)=>this.renderTimetableItem(t,e,i))}
102                </ul>
103            `})}get fakescrollBar(){return i`
104            <div class="container">
105                <div class="js-fakescroll overflow-y-auto h-6 u-always-visible-scrollbars -mr-16">
106                    <div style="width: ${190*this.timetableColumns}px" class="h-6 bg-module-bg-2">
107                    </div>
108                </div>
109            </div>
110        `}render(){return i`
111            <div class="mx-breakout w-screen relative bg-module-bg-1">
112                ${this.fakescrollBar}
113                <div class="js-container container relative overscroll-contain">
114                    ${this.generateHeaderGrid}
115                    ${this.generateContentGrid}
116                </div>
117            </div>
118        `}createRenderRoot(){return this}}customElements.define("pp-timetable",c);const m=Object.freeze(Object.defineProperty({__proto__:null,default:c},Symbol.toStringTag,{value:"Module"}));

118export{m as a,d as t};