@public-ui/components 1.5.0-rc.1 → 1.5.0-rc.11

package/dist/kolibri/assets/modal-simulation.js

@@ -1 +1 @@
-function onOpenModal(o){return e=>{document.querySelector(o)._activeElement=e.currentTarget,document.querySelector(o)._show=!0}}function onCloseModal(o){return()=>{document.querySelector(o)._activeElement=null,document.querySelector(o)._show=!1}}setTimeout((()=>{document.querySelector("#modal-1")._on={onClose:onCloseModal("#modal-1")},document.querySelector("#modal-open-1")._on={onClick:onOpenModal("#modal-1")},document.querySelector("#modal-open-2")._on={onClick:onOpenModal("#modal-2")},document.querySelector("#modal-1-cancel")._on={onClick:onCloseModal("#modal-1")},document.querySelector("#modal-2-cancel")._on={onClick:onCloseModal("#modal-2")}}),5e3);
+function onOpenModal(o){return e=>{document.querySelector(o)._activeElement=e.currentTarget,document.querySelector(o)._show=!0}}function onCloseModal(o){return()=>{document.querySelector(o)._activeElement=null,document.querySelector(o)._show=!1}}setTimeout((()=>{document.querySelector("#modal-1")._on={onClose:onCloseModal("#modal-1")},document.querySelector("#modal-open-1")._on={onClick:onOpenModal("#modal-1")},document.querySelector("#modal-open-2")._on={onClick:onOpenModal("#modal-2")},document.querySelector("#modal-1-cancel")._on={onClick:onCloseModal("#modal-1")},document.querySelector("#modal-2-cancel")._on={onClick:onCloseModal("#modal-2")}}),5e3);const modal=document.querySelector('[_id="overviewModal"]'),modalOpenButton=document.querySelector('[_id="tooltip_button"]');function openModal(){modal._activeElement=modalOpenButton,modal._show=!0}function closeModal(){modal._show=!1}const openModalButton=document.querySelector(".openmodalbutton");openModalButton&&(openModalButton._on={onClick:openModal});

package/dist/kolibri/assets/nav-simulation.js

@@ -1 +1 @@
-document.querySelector("#click-nav")._links=[{_label:"1 Navigationspunkt mit sehr langem Link-Test",_on:{onClick:()=>{alert("hallo")}},_icon:"icofont-woodpecker"},{_label:"2 Navigationspunkt und ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen",_on:{onClick:()=>{alert("hallo")}},_icon:"icofont-woodpecker"},{_active:!0,_label:"3 Navigationspunkt",_href:"#abc",_icon:"icofont-woodpecker",_children:[{_label:"3.1 Navigationspunkt",_href:"#abc",_icon:"icofont-woodpecker"},{_label:"3.2 Navigationspunkt",_href:"#abc",_icon:"icofont-woodpecker",_target:"asdasd"},{_active:!0,_label:"3.3 Navigationspunkt",_href:"#abc",_children:[{_active:!0,_label:"3.3.1 Navigationspunkt (aktiv)",_href:"#abc"},{_label:"3.3.2 Navigationspunkt",_href:"#abc"}]},{_label:"3.4 Navigationspunkt",_href:"#abc",_children:[{_label:"3.4.1 Navigationspunkt",_href:"#abc"},{_label:"3.4.2 Navigationspunkt",_href:"#abc"}]},{_label:"3.5 Navigationspunkt",_href:"#abc"}]},{_label:"4 Navigationspunkt",_href:"#abc"}];
+const navTest=document.querySelector("#nav-test");navTest&&(navTest._links=[{_label:"1 Navigationspunkt mit sehr langem Link-Test",_href:"#asdf",_icon:"codicon codicon-flame"},{_label:"2 Navigationspunkt und ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen",_on:{onClick:()=>{alert("hallo")}},_icon:"codicon codicon-flame"},{_label:"3 Navigationspunkt mit viel Text zu was testen",_href:"#abc",_icon:"codicon codicon-flame",_children:[{_label:"3.1 Navigationspunkt",_href:"#abc",_icon:"codicon codicon-flame"},{_label:"3.2 Navigationspunkt",_href:"#abc",_icon:"codicon codicon-flame",_target:"asdasd"},{_icon:"codicon codicon-flame",_label:"3.3 Navigationspunkt",_href:"#abc3.3",_children:[{_icon:"codicon codicon-flame",_label:"3.3.1 Navigationspunkt",_href:"#abc"},{_icon:"codicon codicon-flame",_label:"3.3.2 Navigationspunkt",_href:"#abc"}]},{_icon:"codicon codicon-flame",_label:"3.4 Navigationspunkt",_href:"#abc3.4",_children:[{_icon:"codicon codicon-flame",_label:"3.4.1 Navigationspunkt",_href:"#abc"},{_icon:"codicon codicon-flame",_label:"3.4.2 Navigationspunkt",_href:"#abc"}]},{_icon:"codicon codicon-flame",_label:"3.5 Navigationspunkt",_href:"#abc"}]},{_label:"4 Navigationspunkt mit viel Text zu was testen",_icon:"codicon codicon-flame",_children:[{_label:"4.1 Navigationspunkt",_href:"#abc",_icon:"codicon codicon-flame"},{_label:"4.2 Navigationspunkt",_href:"#abc",_icon:"codicon codicon-flame",_target:"asdasd"},{_icon:"codicon codicon-flame",_label:"4.3 Navigationspunkt",_href:"#abc",_children:[{_icon:"codicon codicon-flame",_label:"4.3.1 Navigationspunkt",_href:"#abc"},{_icon:"codicon codicon-flame",_label:"4.3.2 Navigationspunkt",_href:"#abc"}]},{_icon:"codicon codicon-flame",_label:"4.4 Navigationspunkt",_href:"#abc",_children:[{_icon:"codicon codicon-flame",_label:"4.4.1 Navigationspunkt",_href:"#abc"},{_icon:"codicon codicon-flame",_label:"4.4.2 Navigationspunkt",_href:"#abc"}]},{_icon:"codicon codicon-flame",_label:"4.5 Navigationspunkt",_href:"#abc"}]}]);const clickNav=document.querySelector("#click-nav");function createEntry(n){return{_label:n.getAttribute("_heading"),_href:`#${n.id}`,_icon:"codicon codicon-flame"}}function populateNavFromElements(n,o,c){const a=[];let i=0,e=0,l=null;o.forEach((n=>{if(i>=c&&(i=0),0===i){const n=e*c;l={_label:`Komponente ${n+1} bis ${n+c}`,_icon:"codicon codicon-flame",_children:[]},a.push(l),e++}l._children.push(createEntry(n)),i++})),n._links=a}clickNav&&(clickNav._links=[{_label:"1 Navigationspunkt mit sehr langem Link-Test",_on:{onClick:()=>{alert("hallo")}},_icon:"icofont-woodpecker"},{_label:"2 Navigationspunkt und ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen",_on:{onClick:()=>{alert("hallo")}},_icon:"icofont-woodpecker"},{_active:!0,_label:"3 Navigationspunkt",_href:"#abc",_icon:"icofont-woodpecker",_children:[{_label:"3.1 Navigationspunkt",_href:"#abc",_icon:"icofont-woodpecker"},{_label:"3.2 Navigationspunkt",_href:"#abc",_icon:"icofont-woodpecker",_target:"asdasd"},{_active:!0,_label:"3.3 Navigationspunkt",_href:"#abc",_children:[{_active:!0,_label:"3.3.1 Navigationspunkt (aktiv)",_href:"#abc"},{_label:"3.3.2 Navigationspunkt",_href:"#abc"}]},{_label:"3.4 Navigationspunkt",_href:"#abc",_children:[{_label:"3.4.1 Navigationspunkt",_href:"#abc"},{_label:"3.4.2 Navigationspunkt",_href:"#abc"}]},{_label:"3.5 Navigationspunkt",_href:"#abc"}]},{_label:"4 Navigationspunkt",_href:"#abc"}]),setTimeout((()=>{populateNavFromElements(document.querySelector("#main-nav"),document.querySelectorAll("main > kol-accordion"),6)}),1e3);

package/dist/kolibri/assets/progress-simulation.js

@@ -1 +1 @@
-var simButtons=document.querySelectorAll('kol-button[_label="Simulation starten"]'),progressBars=document.querySelectorAll("kol-progress");function runProcess(t){var e=0;console.log(simButtons[t]),simButtons[t].setAttribute("_disabled","true");var r=setInterval((()=>{e<=100?(progressBars[t].setAttribute("_value",e),e+=1):(clearInterval(r),simButtons[t].removeAttribute("_disabled"))}),50)}simButtons.forEach(((t,e)=>{t._on={onClick:()=>{runProcess(e)}}}));
+const simButtons=document.querySelectorAll('kol-button[class*="progress"]'),progressBars=document.querySelectorAll('kol-progress[class*="progress"]');function runProcess(t){let e=0;console.log(simButtons[t],t),simButtons[t].setAttribute("_disabled","true");const s=setInterval((()=>{e<=100?(progressBars[t].setAttribute("_value",e),e+=1):(clearInterval(s),simButtons[t].removeAttribute("_disabled"))}),50)}simButtons.forEach(((t,e)=>{t._on={onClick:()=>{runProcess(e)}}})),document.querySelector('[_id="schnitzelwert"]')._on={onChange:onSchnitzelchange};const progressOut=document.querySelector('[_id="schnitzelfortschritt"]');function onSchnitzelchange(t,e){progressOut.setAttribute("_value",e)}

package/dist/kolibri/assets/smart-button-simulation.js

@@ -1 +1 @@
-const smartButtonTimeout=setTimeout((()=>{clearTimeout(smartButtonTimeout);document.querySelectorAll(".smart-button").forEach((t=>{t._smartButton={_label:"Password einblenden",_icon:{left:{icon:"icofont-eye"}},_iconOnly:!0,_tooltipAlign:"left",_on:{onClick:()=>{t._smartButton={...t._smartButton,_icon:{left:{icon:"icofont-eye"===t._smartButton._icon.left.icon?"icofont-eye-blocked":"icofont-eye"}},_label:"icofont-eye"===t._smartButton._icon.left.icon?"Password ausblenden":"Password einblenden"}}}}}))}),2500);
+const smartButtonTimeout=setTimeout((()=>{clearTimeout(smartButtonTimeout);document.querySelectorAll(".smart-button").forEach((o=>{o._smartButton={_label:"Password einblenden",_icon:{left:{icon:"icofont-eye"}},_iconOnly:!0,_tooltipAlign:"left",_on:{onClick:()=>{o._smartButton={...o._smartButton,_icon:{left:{icon:"icofont-eye"===o._smartButton._icon.left.icon?"icofont-eye-blocked":"icofont-eye"}},_label:"icofont-eye"===o._smartButton._icon.left.icon?"Password ausblenden":"Password einblenden"}}}}}))}),2500);document.querySelector('[_id="input-text"]')._smartButton={_ariaLabel:"aria-label",_customClass:"bg-purple",_disabled:!1,_icon:{left:{icon:"codicon codicon-home"}},_id:"text_smartbutton",_on:{onclick:console.log},_tooltipAlign:"top",_variant:"danger"};

package/dist/kolibri/assets/style.css

@@ -1,3 +1,19 @@
+body,
+* {
+	margin: 0;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+.container {
+	display: grid;
+	gap: 1.5rem;
+	margin-inline: auto;
+	padding-inline: 2rem;
+}
+
 .font-80 {
 	font-size: 80%;
 }
@@ -5,6 +21,14 @@
 	font-size: 60%;
 }
 
+.gap {
+	gap: 0.5rem;
+}
+
+.grid {
+	display: grid;
+}
+
 kol-accordion p,
 kol-card p {
 	padding: 0;
@@ -23,7 +47,6 @@ kol-card p {
 kol-accordion div[slot='content'],
 kol-accordion div[slot='header'] {
 	padding: 0.5rem;
-	padding-left: 0rem;
 }
 
 kol-logo {
@@ -37,9 +60,9 @@ kol-badge[_label='Und ich!'] {
 
 kol-button.min-width {
 	display: inline-block;
-	width: 8rem;
-	margin-right: 0.1rem;
 	margin-bottom: 0.1rem;
+	margin-right: 0.1rem;
+	width: 8rem;
 }
 
 kol-logo {
@@ -47,12 +70,10 @@ kol-logo {
 	width: 175px;
 }
 
-/* .bordered {
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--kolibri-border-color);
-  border-radius: var(--kolibri-border-radius);
-} */
+.bordered {
+	border: 1px solid var(--kolibri-border-color);
+	border-radius: var(--kolibri-border-radius);
+}
 
 .bg-black {
 	background-color: black;
@@ -61,6 +82,13 @@ kol-logo {
 	background-color: blueviolet;
 }
 
+.p-b {
+	padding-block: 0.5rem;
+}
+.p-i {
+	padding-inline: 1rem;
+}
+
 .row {
 	background-color: white;
 	border: 1px solid #bbb;
@@ -72,8 +100,7 @@ kol-logo {
 
 .col-12 {
 	overflow: hidden;
-	padding-top: 0.25rem;
-	padding-bottom: 0.25rem;
+	padding-block: 0.25rem;
 }
 
 hr {
@@ -96,7 +123,8 @@ kol-card[_level='6'] {
 
 kol-icon[_icon='codicon codicon-home'],
 kol-icon[_icon='fa-solid fa-house'],
-kol-icon[_icon='icofont-home'] {
+kol-icon[_icon='icofont-home'],
+kol-icon[_icon='ti ti-home'] {
 	color: #00646b;
 	font-size: 500%;
 }

package/dist/kolibri/assets/table-simulation.js

@@ -1 +1 @@
-const TABLE_NEW_HEADERS={horizontal:[[{label:"",rowSpan:2,asTd:!0},{label:"Werktage",colSpan:5},{label:"Wochenende",colSpan:2}],[{key:"montag",label:"Montag",render:(a,n)=>{const e=document.createElement("kol-button");e.setAttribute("_label",n.label),e.setAttribute("data-theme","default"),e.setAttribute("style","font-size: 75%"),e.setAttribute("exportparts","button,normal"),e._on={onClick:console.log},a.innerHTML="",a.appendChild(e)},sort:a=>a.sort(((a,n)=>a.montag<n.montag?-1:a.montag>n.montag?1:0)),sortDirection:"ASC",textAlign:"right"},{key:"dienstag",label:"Dienstag",render:(a,n)=>a.innerHTML=`<kol-badge _color="#060" _label="${n.label}"></kol-badge>`,sort:a=>a.sort(((a,n)=>a.dienstag<n.dienstag?-1:a.dienstag>n.dienstag?1:0)),sortDirection:"DESC"},{key:"mittwoch",label:"Mittwoch",render:(a,n)=>a.innerHTML=`<kol-badge _color="#006" _label="${n.label}"></kol-badge>`},{key:"donnerstag",label:"Donnerstag",render:(a,n)=>a.innerHTML=`<kol-badge _color="#600" _label="${n.label}"></kol-badge>`},{key:"freitag",label:"Freitag",render:(a,n)=>a.innerHTML=`<kol-badge _color="#303" _label="${n.label}"></kol-badge>`},{key:"samstag",label:"Samstag",render:(a,n)=>a.innerHTML=`<kol-badge _color="#330" _label="${n.label}"></kol-badge>`},{key:"sonntag",label:"Sonntag",render:(a,n)=>a.innerHTML=`<kol-badge _color="#033" _label="${n.label}"></kol-badge>`}]],vertical:[[{label:"Früh"},{label:"Mittag"},{label:"Abend"},{label:"Nacht"}]]},TABLE_DATA=[{montag:"Alex",dienstag:"Hong",mittwoch:"Kevin",donnerstag:"Fabian",freitag:"Alex",samstag:"Kevin",sonntag:"Hong"},{montag:"Helena",dienstag:"Fabian",mittwoch:"Marie",donnerstag:"Ben",freitag:"Marcus",samstag:"Alex",sonntag:"Marcus"},{montag:"Fabian",dienstag:"Helena",mittwoch:"Fabian",donnerstag:"Maya",freitag:"Ben",samstag:"Alex",sonntag:"Helena"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"}],TABLE_PAGED_DATA=[{montag:"Alex",dienstag:"Anna",mittwoch:"Amalia",donnerstag:"Arthur",freitag:"Alex",samstag:"Andrea",sonntag:"Arnold"},{montag:"Helena",dienstag:"Fabian",mittwoch:"Marie",donnerstag:"Ben",freitag:"Marcus",samstag:"Alex",sonntag:"Marcus"},{montag:"Fabian",dienstag:"Helena",mittwoch:"Fabian",donnerstag:"Maya",freitag:"Ben",samstag:"Alex",sonntag:"Helena"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Samuel",dienstag:"Selena",mittwoch:"Sandra",donnerstag:"Salim",freitag:"Robert",samstag:"Richard",sonntag:"Pamela"},{montag:"Samuel",dienstag:"Selena",mittwoch:"Sandra",donnerstag:"Salim",freitag:"Robert",samstag:"Richard",sonntag:"Pamela"},{montag:"Finn",dienstag:"Roger",mittwoch:"Christian",donnerstag:"Caspar",freitag:"David",samstag:"Bernard",sonntag:"Anna"},{montag:"Alex",dienstag:"Anna",mittwoch:"Amalia",donnerstag:"Arthur",freitag:"Alex",samstag:"Andrea",sonntag:"Arnold"},{montag:"Helena",dienstag:"Fabian",mittwoch:"Marie",donnerstag:"Ben",freitag:"Marcus",samstag:"Alex",sonntag:"Marcus"},{montag:"Fabian",dienstag:"Helena",mittwoch:"Fabian",donnerstag:"Maya",freitag:"Ben",samstag:"Alex",sonntag:"Helena"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Samuel",dienstag:"Selena",mittwoch:"Sandra",donnerstag:"Salim",freitag:"Robert",samstag:"Richard",sonntag:"Pamela"},{montag:"Samuel",dienstag:"Selena",mittwoch:"Sandra",donnerstag:"Salim",freitag:"Robert",samstag:"Richard",sonntag:"Pamela"},{montag:"Finn",dienstag:"Roger",mittwoch:"Christian",donnerstag:"Caspar",freitag:"David",samstag:"Bernard",sonntag:"Anna"},{montag:"Alex",dienstag:"Anna",mittwoch:"Amalia",donnerstag:"Arthur",freitag:"Alex",samstag:"Andrea",sonntag:"Arnold"},{montag:"Helena",dienstag:"Fabian",mittwoch:"Marie",donnerstag:"Ben",freitag:"Marcus",samstag:"Alex",sonntag:"Marcus"},{montag:"Fabian",dienstag:"Helena",mittwoch:"Fabian",donnerstag:"Maya",freitag:"Ben",samstag:"Alex",sonntag:"Helena"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Samuel",dienstag:"Selena",mittwoch:"Sandra",donnerstag:"Salim",freitag:"Robert",samstag:"Richard",sonntag:"Pamela"},{montag:"Samuel",dienstag:"Selena",mittwoch:"Sandra",donnerstag:"Salim",freitag:"Robert",samstag:"Richard",sonntag:"Pamela"},{montag:"Finn",dienstag:"Roger",mittwoch:"Christian",donnerstag:"Caspar",freitag:"David",samstag:"Bernard",sonntag:"Anna"},{montag:"Alex",dienstag:"Anna",mittwoch:"Amalia",donnerstag:"Arthur",freitag:"Alex",samstag:"Andrea",sonntag:"Arnold"},{montag:"Helena",dienstag:"Fabian",mittwoch:"Marie",donnerstag:"Ben",freitag:"Marcus",samstag:"Alex",sonntag:"Marcus"},{montag:"Fabian",dienstag:"Helena",mittwoch:"Fabian",donnerstag:"Maya",freitag:"Ben",samstag:"Alex",sonntag:"Helena"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Samuel",dienstag:"Selena",mittwoch:"Sandra",donnerstag:"Salim",freitag:"Robert",samstag:"Richard",sonntag:"Pamela"},{montag:"Samuel",dienstag:"Selena",mittwoch:"Sandra",donnerstag:"Salim",freitag:"Robert",samstag:"Richard",sonntag:"Pamela"},{montag:"Finn",dienstag:"Roger",mittwoch:"Christian",donnerstag:"Caspar",freitag:"David",samstag:"Bernard",sonntag:"Anna"},{montag:"Alex",dienstag:"Anna",mittwoch:"Amalia",donnerstag:"Arthur",freitag:"Alex",samstag:"Andrea",sonntag:"Arnold"},{montag:"Helena",dienstag:"Fabian",mittwoch:"Marie",donnerstag:"Ben",freitag:"Marcus",samstag:"Alex",sonntag:"Marcus"},{montag:"Fabian",dienstag:"Helena",mittwoch:"Fabian",donnerstag:"Maya",freitag:"Ben",samstag:"Alex",sonntag:"Helena"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Samuel",dienstag:"Selena",mittwoch:"Sandra",donnerstag:"Salim",freitag:"Robert",samstag:"Richard",sonntag:"Pamela"},{montag:"Samuel",dienstag:"Selena",mittwoch:"Sandra",donnerstag:"Salim",freitag:"Robert",samstag:"Richard",sonntag:"Pamela"},{montag:"Finn",dienstag:"Roger",mittwoch:"Christian",donnerstag:"Caspar",freitag:"David",samstag:"Bernard",sonntag:"Anna"}];setTimeout((()=>{document.querySelector("#table-1a")._headers=TABLE_NEW_HEADERS,document.querySelector("#table-1a")._data=TABLE_DATA}),5e3),setTimeout((()=>{document.querySelector("#table-1b")._headers=TABLE_NEW_HEADERS,document.querySelector("#table-1b")._data=TABLE_DATA,setTimeout((()=>document.querySelector("#table-1a")._data=[]),1e3)}),5e3),setTimeout((()=>{document.querySelector("#table-1c")._headers=TABLE_NEW_HEADERS,document.querySelector("#table-1c")._data=[]}),5e3),setTimeout((()=>{document.querySelector("#table-2")._headers={horizontal:[[{asTd:!0,colSpan:2}].concat(TABLE_NEW_HEADERS.vertical[0])],vertical:[[{...TABLE_NEW_HEADERS.horizontal[0][1],rowSpan:TABLE_NEW_HEADERS.horizontal[0][1].colSpan,colSpan:void 0},{...TABLE_NEW_HEADERS.horizontal[0][2],rowSpan:TABLE_NEW_HEADERS.horizontal[0][2].colSpan,colSpan:void 0}]].concat([TABLE_NEW_HEADERS.horizontal[1]])},document.querySelector("#table-2")._data=TABLE_DATA,document.querySelector("#table-3a")._data=TABLE_PAGED_DATA,document.querySelector("#table-3b")._data=TABLE_PAGED_DATA,document.querySelector("#table-3b")._pagination={_boundaryCount:0,_page:3,_pageSize:20,_pageSizeOptions:[5,10,20,50,100],_on:{onClick:console.log,onChangePage:console.log,onChangePageSize:console.log}},document.querySelector("#table-4")._data=TABLE_PAGED_DATA,document.querySelector("#table-4")._pagination={_boundaryCount:0,_page:3,_pageSize:10,_pageSizeOptions:[5,10,20,50,100],_on:{onClick:console.log,onChangePage:console.log,onChangePageSize:console.log}},document.querySelector("#table-5")._data=TABLE_PAGED_DATA,document.querySelector("#table-6")._data=TABLE_PAGED_DATA}),5e3);
+const TABLE_NEW_HEADERS={horizontal:[[{label:"",rowSpan:2,asTd:!0},{label:"Werktage",colSpan:5},{label:"Wochenende",colSpan:2}],[{key:"montag",label:"Montag",render:(a,n)=>{const e=document.createElement("kol-button");e.setAttribute("_label",n.label),e.setAttribute("data-theme","default"),e.setAttribute("style","font-size: 75%"),e.setAttribute("exportparts","button,normal"),e._on={onClick:console.log},a.innerHTML="",a.appendChild(e)},sort:a=>a.sort(((a,n)=>a.montag<n.montag?-1:a.montag>n.montag?1:0)),sortDirection:"ASC",textAlign:"right"},{key:"dienstag",label:"Dienstag",render:(a,n)=>a.innerHTML=`<kol-badge _color="#060" _label="${n.label}"></kol-badge>`,sort:a=>a.sort(((a,n)=>a.dienstag<n.dienstag?-1:a.dienstag>n.dienstag?1:0)),sortDirection:"DESC"},{key:"mittwoch",label:"Mittwoch",render:(a,n)=>a.innerHTML=`<kol-badge _color="#006" _label="${n.label}"></kol-badge>`},{key:"donnerstag",label:"Donnerstag",render:(a,n)=>a.innerHTML=`<kol-badge _color="#600" _label="${n.label}"></kol-badge>`},{key:"freitag",label:"Freitag",render:(a,n)=>a.innerHTML=`<kol-badge _color="#303" _label="${n.label}"></kol-badge>`},{key:"samstag",label:"Samstag",render:(a,n)=>a.innerHTML=`<kol-badge _color="#330" _label="${n.label}"></kol-badge>`},{key:"sonntag",label:"Sonntag",render:(a,n)=>a.innerHTML=`<kol-badge _color="#033" _label="${n.label}"></kol-badge>`}]],vertical:[[{label:"Früh"},{label:"Mittag"},{label:"Abend"},{label:"Nacht"}]]},TABLE_DATA=[{montag:"Alex",dienstag:"Hong",mittwoch:"Kevin",donnerstag:"Fabian",freitag:"Alex",samstag:"Kevin",sonntag:"Hong"},{montag:"Helena",dienstag:"Fabian",mittwoch:"Marie",donnerstag:"Ben",freitag:"Marcus",samstag:"Alex",sonntag:"Marcus"},{montag:"Fabian",dienstag:"Helena",mittwoch:"Fabian",donnerstag:"Maya",freitag:"Ben",samstag:"Alex",sonntag:"Helena"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"}],TABLE_PAGED_DATA=[{montag:"Alex",dienstag:"Anna",mittwoch:"Amalia",donnerstag:"Arthur",freitag:"Alex",samstag:"Andrea",sonntag:"Arnold"},{montag:"Helena",dienstag:"Fabian",mittwoch:"Marie",donnerstag:"Ben",freitag:"Marcus",samstag:"Alex",sonntag:"Marcus"},{montag:"Fabian",dienstag:"Helena",mittwoch:"Fabian",donnerstag:"Maya",freitag:"Ben",samstag:"Alex",sonntag:"Helena"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Samuel",dienstag:"Selena",mittwoch:"Sandra",donnerstag:"Salim",freitag:"Robert",samstag:"Richard",sonntag:"Pamela"},{montag:"Samuel",dienstag:"Selena",mittwoch:"Sandra",donnerstag:"Salim",freitag:"Robert",samstag:"Richard",sonntag:"Pamela"},{montag:"Finn",dienstag:"Roger",mittwoch:"Christian",donnerstag:"Caspar",freitag:"David",samstag:"Bernard",sonntag:"Anna"},{montag:"Alex",dienstag:"Anna",mittwoch:"Amalia",donnerstag:"Arthur",freitag:"Alex",samstag:"Andrea",sonntag:"Arnold"},{montag:"Helena",dienstag:"Fabian",mittwoch:"Marie",donnerstag:"Ben",freitag:"Marcus",samstag:"Alex",sonntag:"Marcus"},{montag:"Fabian",dienstag:"Helena",mittwoch:"Fabian",donnerstag:"Maya",freitag:"Ben",samstag:"Alex",sonntag:"Helena"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Samuel",dienstag:"Selena",mittwoch:"Sandra",donnerstag:"Salim",freitag:"Robert",samstag:"Richard",sonntag:"Pamela"},{montag:"Samuel",dienstag:"Selena",mittwoch:"Sandra",donnerstag:"Salim",freitag:"Robert",samstag:"Richard",sonntag:"Pamela"},{montag:"Finn",dienstag:"Roger",mittwoch:"Christian",donnerstag:"Caspar",freitag:"David",samstag:"Bernard",sonntag:"Anna"},{montag:"Alex",dienstag:"Anna",mittwoch:"Amalia",donnerstag:"Arthur",freitag:"Alex",samstag:"Andrea",sonntag:"Arnold"},{montag:"Helena",dienstag:"Fabian",mittwoch:"Marie",donnerstag:"Ben",freitag:"Marcus",samstag:"Alex",sonntag:"Marcus"},{montag:"Fabian",dienstag:"Helena",mittwoch:"Fabian",donnerstag:"Maya",freitag:"Ben",samstag:"Alex",sonntag:"Helena"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Samuel",dienstag:"Selena",mittwoch:"Sandra",donnerstag:"Salim",freitag:"Robert",samstag:"Richard",sonntag:"Pamela"},{montag:"Samuel",dienstag:"Selena",mittwoch:"Sandra",donnerstag:"Salim",freitag:"Robert",samstag:"Richard",sonntag:"Pamela"},{montag:"Finn",dienstag:"Roger",mittwoch:"Christian",donnerstag:"Caspar",freitag:"David",samstag:"Bernard",sonntag:"Anna"},{montag:"Alex",dienstag:"Anna",mittwoch:"Amalia",donnerstag:"Arthur",freitag:"Alex",samstag:"Andrea",sonntag:"Arnold"},{montag:"Helena",dienstag:"Fabian",mittwoch:"Marie",donnerstag:"Ben",freitag:"Marcus",samstag:"Alex",sonntag:"Marcus"},{montag:"Fabian",dienstag:"Helena",mittwoch:"Fabian",donnerstag:"Maya",freitag:"Ben",samstag:"Alex",sonntag:"Helena"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Samuel",dienstag:"Selena",mittwoch:"Sandra",donnerstag:"Salim",freitag:"Robert",samstag:"Richard",sonntag:"Pamela"},{montag:"Samuel",dienstag:"Selena",mittwoch:"Sandra",donnerstag:"Salim",freitag:"Robert",samstag:"Richard",sonntag:"Pamela"},{montag:"Finn",dienstag:"Roger",mittwoch:"Christian",donnerstag:"Caspar",freitag:"David",samstag:"Bernard",sonntag:"Anna"},{montag:"Alex",dienstag:"Anna",mittwoch:"Amalia",donnerstag:"Arthur",freitag:"Alex",samstag:"Andrea",sonntag:"Arnold"},{montag:"Helena",dienstag:"Fabian",mittwoch:"Marie",donnerstag:"Ben",freitag:"Marcus",samstag:"Alex",sonntag:"Marcus"},{montag:"Fabian",dienstag:"Helena",mittwoch:"Fabian",donnerstag:"Maya",freitag:"Ben",samstag:"Alex",sonntag:"Helena"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Hong",dienstag:"Alex",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Fabian",samstag:"Helena",sonntag:"Alex"},{montag:"Samuel",dienstag:"Selena",mittwoch:"Sandra",donnerstag:"Salim",freitag:"Robert",samstag:"Richard",sonntag:"Pamela"},{montag:"Samuel",dienstag:"Selena",mittwoch:"Sandra",donnerstag:"Salim",freitag:"Robert",samstag:"Richard",sonntag:"Pamela"},{montag:"Finn",dienstag:"Roger",mittwoch:"Christian",donnerstag:"Caspar",freitag:"David",samstag:"Bernard",sonntag:"Anna"}];setTimeout((()=>{document.querySelector("#table-1a")._headers=TABLE_NEW_HEADERS,document.querySelector("#table-1a")._data=TABLE_DATA}),5e3),setTimeout((()=>{document.querySelector("#table-1b")._headers=TABLE_NEW_HEADERS,document.querySelector("#table-1b")._data=TABLE_DATA,setTimeout((()=>document.querySelector("#table-1a")._data=[]),1e3)}),5e3),setTimeout((()=>{document.querySelector("#table-1c")._headers=TABLE_NEW_HEADERS,document.querySelector("#table-1c")._data=[]}),5e3),setTimeout((()=>{document.querySelector("#table-2")._headers={horizontal:[[{asTd:!0,colSpan:2}].concat(TABLE_NEW_HEADERS.vertical[0])],vertical:[[{...TABLE_NEW_HEADERS.horizontal[0][1],rowSpan:TABLE_NEW_HEADERS.horizontal[0][1].colSpan,colSpan:void 0},{...TABLE_NEW_HEADERS.horizontal[0][2],rowSpan:TABLE_NEW_HEADERS.horizontal[0][2].colSpan,colSpan:void 0}]].concat([TABLE_NEW_HEADERS.horizontal[1]])},document.querySelector("#table-2")._data=TABLE_DATA,document.querySelector("#table-3a")._data=TABLE_PAGED_DATA,document.querySelector("#table-3b")._data=TABLE_PAGED_DATA,document.querySelector("#table-3b")._pagination={_boundaryCount:0,_page:3,_pageSize:20,_pageSizeOptions:[5,10,20,50,100],_on:{onClick:console.log,onChangePage:console.log,onChangePageSize:console.log}},document.querySelector("#table-4")._data=TABLE_PAGED_DATA,document.querySelector("#table-4")._pagination={_boundaryCount:0,_page:3,_pageSize:10,_pageSizeOptions:[5,10,20,50,100],_on:{onClick:console.log,onChangePage:console.log,onChangePageSize:console.log}},document.querySelector("#table-5")._data=TABLE_PAGED_DATA,document.querySelector("#table-6")._data=TABLE_PAGED_DATA}),5e3);const dayTable=document.querySelector('[_id="day_table"]');dayTable._headers={horizontal:[[{label:"",colSpan:1,rowSpan:1,asTd:!0},{label:"Tag",key:"day"},{label:"Info",key:"info"}]],vertical:[[{label:"1",key:"1"},{label:"2",key:"2"},{label:"3",key:"3"},{label:"4",key:"4"},{label:"5",key:"5"}]]},dayTable._data=[{day:"Montag",info:"Herr Mohn"},{day:"Dienstag",info:"Dienst"},{day:"Mittwoch",info:"Mitte der Woche"},{day:"Donnerstag",info:"Donner"},{day:"Freitag",info:"frei"}];