@public-ui/sample-react 2.1.9-rc.0 → 2.2.0-alpha.0

package/src/scenarios/change-tabindex.tsx

@@ -0,0 +1,256 @@
+/* eslint-disable jsx-a11y/tabindex-no-positive */
+
+import { SampleDescription } from '../components/SampleDescription';
+import {
+	KolButton,
+	KolButtonLink,
+	KolCard,
+	KolCombobox,
+	KolInputCheckbox,
+	KolInputDate,
+	KolInputEmail,
+	KolInputFile,
+	KolInputColor,
+	KolInputNumber,
+	KolInputPassword,
+	KolInputRadio,
+	KolInputRange,
+	KolInputText,
+	KolLinkButton,
+	KolLink,
+	KolSingleSelect,
+	KolSplitButton,
+	KolTextarea,
+} from '@public-ui/react';
+import React from 'react';
+import type { FC } from 'react';
+import { ERROR_MSG, HINT_MSG } from '../shares/constants';
+import { COUNTRY_OPTIONS, COUNTRY_SUGGESTIONS } from '../shares/country';
+import type { Option, StencilUnknown } from '@public-ui/components';
+
+export const ChangeTabindex: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>This example show how different components works with tabIndex.</p>
+			</SampleDescription>
+
+			<div className="w-full grid gap-4">
+				<KolCard _label="Button" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolButton _label="Button 1, Tabindex 4" _variant="primary" tabIndex={4} />
+						<KolButton _disabled _label="Button 2, Tabindex 3" _variant="primary" tabIndex={3} />
+						<KolButton _label="Button 3, Tabindex 2" _variant="primary" tabIndex={2} />
+						<KolButton _label="Button 4, Tabindex 1" _variant="primary" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="ButtonLink" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolButtonLink _label="ButtonLink 1, Tabindex 4" tabIndex={4} />
+						<KolButtonLink _disabled _label="ButtonLink 2, Tabindex 3" tabIndex={3} />
+						<KolButtonLink _label="ButtonLink 3, Tabindex 2" tabIndex={2} />
+						<KolButtonLink _label="ButtonLink 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="Combobox" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolCombobox _hint={HINT_MSG} _label="Combobox 1, Tabindex 4" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={4} />
+						<KolCombobox _disabled _hint={HINT_MSG} _label="Combobox 2, Tabindex 3" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={3} />
+						<KolCombobox
+							_touched
+							_hint={HINT_MSG}
+							_msg={{ _type: 'error', _description: ERROR_MSG }}
+							_label="Combobox 3, Tabindex 2"
+							_suggestions={COUNTRY_SUGGESTIONS}
+							_value={'Deutschland'}
+							tabIndex={2}
+						/>
+						<KolCombobox _hint={HINT_MSG} _label="Combobox 4, Tabindex 1" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputCheckbox" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputCheckbox _label="InputCheckbox 4, Tabindex 1" _value={false} tabIndex={4} />
+						<KolInputCheckbox _disabled _label="InputCheckbox 3, Tabindex 2" _value={false} tabIndex={3} />
+						<KolInputCheckbox _touched _label="InputCheckbox 2, Tabindex 3" _msg={{ _type: 'error', _description: ERROR_MSG }} _value={false} tabIndex={2} />
+						<KolInputCheckbox _label="InputCheckbox 1, Tabindex 4" _value={false} tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputColor" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputColor _value="#f08080" _label="InputCheckbox 1, Tabindex 4" tabIndex={4} />
+						<KolInputColor _disabled _value="#f08080" _label="InputCheckbox 2, Tabindex 3" tabIndex={3} />
+						<KolInputColor _touched _value="#f08080" _label="InputCheckbox 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
+						<KolInputColor _value="#f08080" _label="InputCheckbox 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputDate" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputDate _type="datetime-local" _label="InputCheckbox 1, Tabindex 4" tabIndex={4} />
+						<KolInputDate _disabled _type="datetime-local" _label="InputCheckbox 2, Tabindex 3" tabIndex={3} />
+						<KolInputDate
+							_touched
+							_type="datetime-local"
+							_label="InputCheckbox 3, Tabindex 2"
+							_msg={{ _type: 'error', _description: ERROR_MSG }}
+							tabIndex={2}
+						/>
+						<KolInputDate _type="datetime-local" _label="InputCheckbox 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputEmail" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputEmail _label="InputEmail 1, Tabindex 4" tabIndex={4} />
+						<KolInputEmail _disabled _label="InputEmail 2, Tabindex 3" tabIndex={3} />
+						<KolInputEmail _touched _label="InputEmail 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
+						<KolInputEmail _label="InputEmail 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputFile" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputFile _label="InputFile 1, Tabindex 4" tabIndex={4} />
+						<KolInputFile _disabled _label="InputFile 2, Tabindex 3" tabIndex={3} />
+						<KolInputFile _touched _label="InputFile 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
+						<KolInputFile _label="InputFile 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputNumber" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputNumber _label="InputNumber 1, Tabindex 4" tabIndex={4} />
+						<KolInputNumber _disabled _label="InputNumber 2, Tabindex 3" tabIndex={3} />
+						<KolInputNumber _touched _label="InputNumber 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
+						<KolInputNumber _label="InputNumber 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputPassword" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputPassword _label="InputPassword 1, Tabindex 4" tabIndex={4} />
+						<KolInputPassword _disabled _label="InputPassword 2, Tabindex 3" tabIndex={3} />
+						<KolInputPassword _touched _label="InputPassword 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
+						<KolInputPassword _label="InputPassword 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputRadio" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputRadio
+							_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]"
+							_label="InputRadio 1, Tabindex 4"
+							tabIndex={4}
+						/>
+						<KolInputRadio
+							_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]"
+							_label="InputRadio 2, Tabindex 3"
+							_disabled
+							tabIndex={3}
+						/>
+						<KolInputRadio
+							_touched
+							_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]"
+							_label="InputRadio 3, Tabindex 2"
+							_msg={{ _type: 'error', _description: ERROR_MSG }}
+							tabIndex={2}
+						/>{' '}
+						<KolInputRadio
+							_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]"
+							_label="InputRadio 4, Tabindex 1"
+							tabIndex={1}
+						/>
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputRange" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputRange _label="InputRange 1, Tabindex 4" _min={0} _max={50} tabIndex={4} />
+						<KolInputRange _disabled _label="InputRange 2, Tabindex 3" _min={0} _max={50} tabIndex={3} />
+						<KolInputRange _touched _label="InputRange 3, Tabindex 2" _min={0} _max={50} _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
+						<KolInputRange _label="InputRange 4, Tabindex 1" _min={0} _max={50} tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputText" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputText _label="InputText 1, Tabindex 4" tabIndex={4} />
+						<KolInputText _disabled _label="InputText 2, Tabindex 3" tabIndex={3} />
+						<KolInputText _touched _label="InputText 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
+						<KolInputText _label="InputText 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="LinkButton" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolLinkButton _href={'#/back-page'} _label="InputText 1, Tabindex 4" _variant="primary" tabIndex={4}></KolLinkButton>
+						<KolLinkButton _disabled _href={'#/back-page'} _label="InputText 2, Tabindex 3" _variant="primary" tabIndex={3}></KolLinkButton>
+						<KolLinkButton _href={'#/back-page'} _label="InputText 3, Tabindex 2" _variant="primary" tabIndex={2}></KolLinkButton>
+						<KolLinkButton _href={'#/back-page'} _label="InputText 4, Tabindex 1" _variant="primary" tabIndex={1}></KolLinkButton>
+					</div>
+				</KolCard>
+
+				<KolCard _label="Link" _level={0}>
+					<KolLink _href="#/back-page" _label="InputText 1, Tabindex 4" tabIndex={4} />
+					<KolLink _disabled _href="#/back-page" _label="InputText 2, Tabindex 3" tabIndex={3} />
+					<KolLink _href="#/back-page" _label="InputText 3, Tabindex 2" tabIndex={2} />
+					<KolLink _href="#/back-page" _label="InputText 4, Tabindex 1" tabIndex={1} />
+				</KolCard>
+
+				<KolCard _label="SingleSelect" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolSingleSelect _label="InputText 1, Tabindex 4" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={4} />
+						<KolSingleSelect _disabled _label="InputText 2, Tabindex 3" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={3} />
+						<KolSingleSelect
+							_touched
+							_label="InputText 3, Tabindex 2"
+							_options={COUNTRY_OPTIONS as Option<StencilUnknown>[]}
+							_msg={{ _type: 'error', _description: ERROR_MSG }}
+							_value={'de'}
+							tabIndex={2}
+						/>
+						<KolSingleSelect _label="InputText 4, Tabindex 1" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="SplitButton" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolSplitButton _label="InputText 1, Tabindex 4" tabIndex={4}>
+							Dropdown-Inhalt
+						</KolSplitButton>
+						<KolSplitButton _label="InputText 2, Tabindex 3" tabIndex={3} _disabled>
+							Dropdown-Inhalt
+						</KolSplitButton>
+						<KolSplitButton _label="InputText 3, Tabindex 2" tabIndex={2}>
+							Dropdown-Inhalt
+						</KolSplitButton>{' '}
+						<KolSplitButton _label="InputText 4, Tabindex 1" tabIndex={1}>
+							Dropdown-Inhalt
+						</KolSplitButton>
+					</div>
+				</KolCard>
+
+				<KolCard _label="Textarea" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolTextarea _label="Textarea 1, Tabindex 4" _rows={3} _placeholder="Placeholder" tabIndex={4} />
+						<KolTextarea _disabled _label="Textarea 2, Tabindex 3" _rows={3} _placeholder="Placeholder" tabIndex={3} />
+						<KolTextarea
+							_touched
+							_label="Textarea 3, Tabindex 2"
+							_rows={3}
+							_placeholder="Placeholder"
+							_msg={{ _type: 'error', _description: ERROR_MSG }}
+							tabIndex={2}
+						/>
+						<KolTextarea _label="Textarea 4, Tabindex 1" _rows={3} _placeholder="Placeholder" tabIndex={1} />
+					</div>
+				</KolCard>
+			</div>
+		</>
+	);
+};

package/src/scenarios/focus-elements.tsx

@@ -94,16 +94,24 @@ const getFocusElements = () => {
 	));
 	focusElements.set('textarea', (_, ref) => <KolTextarea className="w-full" _name="textarea" _label="Textarea" _rows={5} ref={ref} />);
 	focusElements.set('accordion', (_, ref) => <KolAccordion className="w-full" _label="Accordion here" ref={ref} />);
-	focusElements.set('button', (_, ref) => <KolButton _label="Button here" ref={ref}></KolButton>);
-	focusElements.set('buttonLink', (_, ref) => <KolButtonLink _label="ButtonLink here" ref={ref}></KolButtonLink>);
-	focusElements.set('combobox', (_, ref) => <KolCombobox className="w-full" _label="KolCombobox here" _suggestions={[]} ref={ref}></KolCombobox>);
+	focusElements.set('button', (_, ref) => (
+		<div>
+			<KolButton _label="Button here" ref={ref} />
+		</div>
+	));
+	focusElements.set('buttonLink', (_, ref) => <KolButtonLink _label="ButtonLink here" ref={ref} />);
+	focusElements.set('combobox', (_, ref) => <KolCombobox className="w-full" _label="KolCombobox here" _suggestions={[]} ref={ref} />);
 	focusElements.set('details', (_, ref) => (
 		<KolDetails className="w-full" _label="Details here" ref={ref}>
 			detailed details
 		</KolDetails>
 	));
-	focusElements.set('link', (_, ref) => <KolLink className="w-full" _label="Link here" _href="#" ref={ref}></KolLink>);
-	focusElements.set('linkButton', (_, ref) => <KolLinkButton _label="LinkButton here" _href="#" ref={ref}></KolLinkButton>);
+	focusElements.set('link', (_, ref) => <KolLink className="w-full" _label="Link here" _href="#" ref={ref} />);
+	focusElements.set('linkButton', (_, ref) => (
+		<div>
+			<KolLinkButton _label="LinkButton here" _href="#" ref={ref} />
+		</div>
+	));
 
 	return focusElements;
 };
@@ -134,7 +142,7 @@ const Fallback = (props: FallbackProps) => {
 			<ul>
 				{componentNames.map((componentName) => (
 					<li key={componentName}>
-						<KolLink _label={componentName} _href={`#/scenarios/focus-elements?component=${componentName}`}></KolLink>
+						<KolLink _label={componentName} _href={`#/scenarios/focus-elements?component=${componentName}`} />
 					</li>
 				))}
 			</ul>

package/src/scenarios/horizontal-scrollbar-advanced/TableHorizontalScrollbarAdvanced.tsx

@@ -60,17 +60,21 @@ function TableHorizontalScrollbarAdvanced() {
 					<KolNav _label="Main navigation" _links={LINKS} _hasCompactButton _hasIconsWhenExpanded />
 				</aside>
 				<div className="content">
-					<KolTabs _tabs={TABS} _label="Demo Tabs"></KolTabs>
-					<div style={{ overflow: 'hidden' }}>
-						<KolTable
-							_label="Table for demonstration purposes with horizontal scrollbar"
-							_minWidth={tableWith}
-							_headers={HEADERS}
-							_data={DATA}
-							_pagination={{ _page: 1 }}
-							className="block"
-						/>
-					</div>
+					<KolTabs _tabs={TABS} _align="top" _label="Demo Tabs">
+						<div style={{ overflow: 'hidden' }}>
+							<KolTable
+								_label="Table for demonstration purposes with horizontal scrollbar"
+								_minWidth={tableWith}
+								_headers={HEADERS}
+								_data={DATA}
+								_pagination={{ _page: 1 }}
+								className="block"
+							/>
+						</div>
+						<div></div>
+						<div></div>
+						<div></div>
+					</KolTabs>
 				</div>
 			</div>
 		</>

package/src/scenarios/routes.ts

@@ -7,6 +7,7 @@ import { StaticForm } from './static-form';
 import { FocusElements } from './focus-elements';
 import { TableHorizontalScrollAdvanced } from './horizontal-scrollbar-advanced';
 import { InputGroupWithError } from './input-group-with-error';
+import { ChangeTabindex } from './change-tabindex';
 
 export const SCENARIO_ROUTES: Routes = {
 	scenarios: {
@@ -18,5 +19,6 @@ export const SCENARIO_ROUTES: Routes = {
 		'inputs-get-value': InputsGetValue,
 		'static-form': StaticForm,
 		'table-horizontal-scrollbar-advanced': TableHorizontalScrollAdvanced,
+		'change-tabindex': ChangeTabindex,
 	},
 };

package/src/style.scss

@@ -24,9 +24,9 @@ hr {
 .indented-text {
 	p {
 		font-family: var(--font-family);
-		border-left: -2px solid var(--color-primary-variant);
+		border-left: rem(-2) solid var(--color-primary-variant);
 		padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));
-		margin-left: -2px;
+		margin-left: rem(-2);
 	}
 }
 
@@ -40,13 +40,13 @@ hr {
 @media (min-width: 1024px) {
 	.app-container {
 		display: grid;
-		grid-template-columns: 360px calc(100% - 360px);
+		grid-template-columns: rem(360) calc(100% - rem(360));
 		min-height: 100vh;
 		height: 100%;
 	}
 
 	.app-sidebar {
-		border-right: 1px solid gray;
+		border-right: rem(1) solid gray;
 		position: relative;
 
 		& .scrollable-container-wrapper {
@@ -54,7 +54,7 @@ hr {
 			top: 0;
 			bottom: 0;
 			left: 0;
-			width: 330px;
+			width: rem(330);
 			margin: rem(16);
 			flex-direction: column;
 			display: flex;

package/dist/1163.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1163.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1163],{6683:(t,e,o)=>{o.d(e,{I:()=>n});var i=o(3135);const n=({accessKey:t,label:e})=>{let[o,...n]=e.split(t);return 0===n.length&&(t=t.toUpperCase(),[o,...n]=e.split(t)),0===n.length&&(t=t.toLowerCase(),[o,...n]=e.split(t)),(0,i.h)(i.F,null,o,n.length?(0,i.h)(i.F,null,(0,i.h)("u",null,t),n.join(t)):null)}},2624:(t,e,o)=>{o.d(e,{a:()=>a,v:()=>n});var i=o(8146);const n=(t,e,o)=>{(0,i.w)(t,e,(t=>"string"==typeof t&&s.includes(t)),new Set(s),o,{defaultValue:"top"})},s=["left","right","top","bottom"],a=(t,e)=>{n(t,"_align",e)}},6212:(t,e,o)=>{o.d(e,{A:()=>s});var i=o(5838),n=o(8146);class s{constructor(t,e,o){var s,a,r,l;if(this.experimentalMode=(0,i.a)(),this.setFormAssociatedValue=t=>{var e;const o=null===(e=this.formAssociated)||void 0===e?void 0:e.getAttribute("name");null!==o&&""!==o||(0,n.j)(` The form field (${this.type}) must have a name attribute to be form-associated. Please define the _name attribute.`);const i=this.tryToStringifyValue(t);this.syncValue(t,i,this.formAssociated),this.syncValue(t,i,this.syncToOwnInput)},this.component=t,this.host=this.findHostWithShadowRoot(o),this.type=e,this.experimentalMode&&("KOL-BUTTON"===(l=null===(s=this.host)||void 0===s?void 0:s.tagName)||"KOL-COMBOBOX"===l||"KOL-INPUT-CHECKBOX"===l||"KOL-INPUT-COLOR"===l||"KOL-INPUT-DATE"===l||"KOL-INPUT-EMAIL"===l||"KOL-INPUT-FILE"===l||"KOL-INPUT-NUMBER"===l||"KOL-INPUT-PASSWORD"===l||"KOL-INPUT-RADIO"===l||"KOL-INPUT-RANGE"===l||"KOL-INPUT-TEXT"===l||"KOL-SELECT"===l||"KOL-SINGLE-SELECT"===l||"KOL-TEXTAREA"===l)&&t._name){switch(null===(a=this.host)||void 0===a||a.querySelectorAll("input,select,textarea").forEach((t=>{var e;null===(e=this.host)||void 0===e||e.removeChild(t)})),this.type){case"button":case"color":case"date":case"email":case"file":case"number":case"password":case"radio":case"range":case"text":this.formAssociated=document.createElement("input"),this.formAssociated.setAttribute("type",this.type);break;case"select":this.formAssociated=document.createElement("select"),this.formAssociated.setAttribute("multiple","");break;case"textarea":this.formAssociated=document.createElement("textarea");break;default:this.formAssociated=document.createElement("input"),this.formAssociated.setAttribute("type","hidden")}this.formAssociated.setAttribute("aria-hidden","true"),this.formAssociated.setAttribute("data-form-associated",""),this.formAssociated.setAttribute("hidden",""),null===(r=this.host)||void 0===r||r.appendChild(this.formAssociated)}}findHostWithShadowRoot(t){for(;null===(null==t?void 0:t.shadowRoot)&&t!==document.body;)(t=null==t?void 0:t.parentNode).host&&(t=t.host);return t}setAttribute(t,e,o){if(this.experimentalMode)try{if("boolean"!=typeof(o="object"==typeof o&&null!==o?JSON.stringify(o):o)&&"number"!=typeof o&&"string"!=typeof o)throw new Error("Invalid value type: "+typeof o);null==e||e.setAttribute(t,`${o}`)}catch(o){null==e||e.removeAttribute(t)}}tryToStringifyValue(t){try{return"object"==typeof t&&null!==t?JSON.stringify(t).toString():null==t?null:t.toString()}catch(t){return(0,n.l)(`The form field raw value is not able to stringify! ${t}`),""}}syncValue(t,e,o){if(o)switch(this.type){case"file":o.files=t;break;case"select":o.querySelectorAll("option").forEach((t=>{o.removeChild(t)})),Array.isArray(t)&&t.forEach((t=>{const e=this.tryToStringifyValue(t);if("string"==typeof e){const t=document.createElement("option");t.setAttribute("value",e),t.setAttribute("selected",""),o.appendChild(t)}}));break;case"radio":"string"==typeof e&&(o.setAttribute("value",e),o.setAttribute("checked",""),o.value=e);break;default:"string"==typeof e?(o.setAttribute("value",e),o.value=e):(o.removeAttribute("value"),o.value="")}}validateName(t){((t,e,o)=>{(0,n.i)(t,"_name",e,o)})(this.component,t,{hooks:{afterPatch:()=>{this.setAttribute("name",this.formAssociated,this.component.state._name)}}}),void 0===t&&(0,n.j)("A name on input fields or switches is not strictly required, but it might be relevant for the autocomplete function and for the static submission of the input field.")}validateSyncValueBySelector(t){if(this.experimentalMode&&"string"==typeof t){const e=document.querySelector(t);e&&(this.syncToOwnInput=e)}}componentWillLoad(){this.validateName(this.component._name),this.validateSyncValueBySelector(this.component._syncValueBySelector)}}},911:(t,e,o)=>{o.d(e,{I:()=>p,g:()=>d,v:()=>h});var i=o(8445),n=o(6212),s=o(8146),a=o(942),r=o(3965),l=o(2391),c=o(5688);const h=(t,e)=>{(0,s.w)(t,"_msg",(t=>"object"==typeof t),new Set(["Object"]),e)},d=t=>{var e,o;const i=Boolean("error"===(null===(e=t._msg)||void 0===e?void 0:e._type)&&t._msg._description&&(null===(o=t._msg._description)||void 0===o?void 0:o.length)>0)&&!0===t._touched,n="string"==typeof t._hint&&t._hint.length>0,s=[];return!0===i&&s.push(`${t._id}-error`),!0===n&&s.push(`${t._id}-hint`),{hasError:i,hasHint:n,ariaDescribedBy:s}};class u extends n.A{constructor(t,e,o){super(t,e,o),this.component=t}validateAlert(t){(0,s.b)(this.component,"_alert",t)}validateTouched(t){((t,e)=>{(0,s.b)(t,"_touched",e)})(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAlert(this.component._alert),this.validateTouched(this.component._touched)}}class p extends u{constructor(t,e,o){super(t,e,o),this.valueChangeListeners=[],this.onFacade={onBlur:this.onBlur.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onFocus:this.onFocus.bind(this),onInput:this.onInput.bind(this)},this.component=t}validateAccessKey(t){(0,s.i)(this.component,"_accessKey",t)}validateAdjustHeight(t){((t,e)=>{(0,s.b)(t,"_adjustHeight",e)})(this.component,t)}validateDisabled(t){(0,s.b)(this.component,"_disabled",t),!0===t&&(0,s.c)()}validateTooltipAlign(t){(0,c.v)(this.component,t)}validateError(t){const e={_description:t||"",_type:"error"};this.validateMsg(e)}validateHideError(t){((t,e,o)=>{(0,s.b)(t,"_hideError",e,o)})(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideError&&(0,s.a)("Property hide-error for inputs: Only use when the error message is shown outside of the input component.")}}})}validateHideLabel(t){(0,a.v)(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideLabel&&(0,s.a)("Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.")}}})}validateHint(t){(0,s.i)(this.component,"_hint",t)}validateId(t){(0,s.i)(this.component,"_id",t,{minLength:1}),""!==t&&void 0!==t||(0,s.j)("A unique ID on the input fields is not strictly required, but it might be relevant for E2E tests.")}validateLabel(t){(0,r.a)(this.component,t,{required:!0})}validateMsg(t){h(this.component,t)}validateOn(t){"object"==typeof t&&(0,s.s)(this.component,"_on",t)}validateSmartButton(t){(0,s.o)(t,(()=>{try{t=(0,s.p)(t)}catch(t){}(0,s.s)(this.component,"_smartButton",t)}))}validateTabIndex(t){(0,l.v)(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAccessKey(this.component._accessKey),this.validateAdjustHeight(this.component._adjustHeight),this.validateError(this.component._error),this.validateMsg(this.component._msg),this.validateDisabled(this.component._disabled),this.validateHideError(this.component._hideError),this.validateHideLabel(this.component._hideLabel),this.validateHint(this.component._hint),this.validateId(this.component._id),this.validateLabel(this.component._label),this.validateSmartButton(this.component._smartButton),this.validateOn(this.component._on),this.validateTabIndex(this.component._tabIndex)}onBlur(t){var e;this.component._alert=!0,this.component._touched=!0,(0,i.s)(t),(0,i.t)("blur",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onBlur)&&this.component._on.onBlur(t)}onChange(t,e){var o;e=null!=e?e:t.target.value,(0,i.t)("change",this.host,e),"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onChange)&&this.component._on.onChange(t,e),this.valueChangeListeners.forEach((t=>t(e)))}onInput(t,e=!0,o){var n;o=null!=o?o:t.target.value,(0,i.s)(t),(0,i.t)("input",this.host,o),e&&this.setFormAssociatedValue(o),"function"==typeof(null===(n=this.component._on)||void 0===n?void 0:n.onInput)&&this.component._on.onInput(t,o)}onClick(t){var e;(0,i.s)(t),(0,i.t)("click",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onClick)&&this.component._on.onClick(t)}onFocus(t){var e;this.component._alert=!0,(0,i.s)(t),(0,i.t)("focus",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onFocus)&&this.component._on.onFocus(t)}addValueChangeListener(t){this.valueChangeListeners.push(t)}}},2471:(t,e,o)=>{o.d(e,{i:()=>r,n:()=>c,r:()=>l});var i=o(3135),n=o(3255),s=o(5838);const a=()=>{let t=(0,s.d)().KoliBri;return void 0===t&&(t={},Object.defineProperty((0,s.d)(),"KoliBri",{value:t,writable:!1})),t},r=()=>{(()=>{const t=(0,s.g)().querySelector('meta[name="kolibri"]');if(t&&t.hasAttribute("content")){const e=t.getAttribute("content");"string"==typeof e&&((0,s.s)(e.includes("dev-mode=true")),(0,s.b)(e.includes("experimental-mode=true")),(0,s.c)(e.includes("color-contrast-analysis=true")))}})(),s.L.debug(`\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${i.E.kolibriVersion}\n\t`,{forceLog:!0})},l=()=>{!0!==a().adviceShown&&(Object.defineProperty(a(),"adviceShown",{get:function(){return!0}}),s.L.debug("\nYou are using the KoliBri component library. If you have any suggestions for improvement or find a problem, please contact us:\n\nTicket: https://github.com/public-ui/kolibri/issues/new/choose (for privacy reasons, please use email)\nEmail: kolibri@itzbund.de\n"))};let c=()=>Math.floor(16777215*Math.random()).toString(16);"test"===n.p&&(c=()=>"nonce")},8445:(t,e,o)=>{function i(t){t.stopImmediatePropagation(),t.stopPropagation()}function n(t,e,o){e&&function(t,e,o){const i=t.dispatchEvent(function(t,e){return new CustomEvent(`kol-${t}`,{bubbles:!0,cancelable:!0,composed:!0,detail:e})}(e,o))}(e,t,o)}function s(t){t.preventDefault(),i(t)}o.d(e,{p:()=>s,s:()=>i,t:()=>n})},942:(t,e,o)=>{o.d(e,{v:()=>n});var i=o(8146);const n=(t,e,o={})=>{(0,i.b)(t,"_hideLabel",e,o)}},3965:(t,e,o)=>{o.d(e,{a:()=>d,b:()=>r,c:()=>l,h:()=>n,v:()=>h});var i=o(8146);const n=[0,1,2,3,4,5,6],s=/[a-zA-Z0-9äöüÄÖÜß]/g,a=/^\d+$/;function r(t,e=1){return function(t){var e;return"string"==typeof t&&(null===(e=t.match(s))||void 0===e?void 0:e.length)||0}(t)>=e}function l(t){return a.test(t)}const c=new Set(["string"]),h=(t,e,o={})=>{(0,i.w)(t,"_label",(t=>"string"==typeof t),c,e,function(t){var e;return Object.assign(Object.assign({},t),{hooks:{afterPatch:(e,o,n,s)=>{var a,c;"function"==typeof(null===(a=t.hooks)||void 0===a?void 0:a.afterPatch)&&(null===(c=t.hooks)||void 0===c||c.afterPatch(e,o,n,s)),"string"==typeof e&&!1===r(e,3)&&!1===l(e)&&(0,i.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=t.hooks)||void 0===e?void 0:e.beforePatch}})}(o))},d=h},3255:(t,e,o)=>{o.d(e,{h:()=>n,p:()=>i,s:()=>s});let i="development";try{i="production"}catch(t){i="production"}const n=(t,e,o)=>{if(t&&e&&"string"==typeof o){const i=t.querySelector(`[slot="${o}"]`);i&&e.appendChild(i)}},s=t=>""===t},2391:(t,e,o)=>{o.d(e,{v:()=>s});var i=o(8146);const n={hooks:{afterPatch:t=>{-1!==t&&0!==t&&(0,i.a)("Don't Use Tabindex Greater than 0: https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html")}}},s=(t,e)=>{(0,i.k)(t,"_tabIndex",e,n)}},5688:(t,e,o)=>{o.d(e,{v:()=>n});var i=o(2624);const n=(t,e)=>{(0,i.v)(t,"_tooltipAlign",e)}}}]);

package/dist/1266.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1266.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1266],{290:(e,t,n)=>{n.d(t,{S:()=>l,a:()=>a,b:()=>i,i:()=>o});const i=e=>"object"==typeof e&&null!==e,o=(e,t=0)=>"string"==typeof e&&e.length>=t,a=e=>{if("object"!=typeof e||null===e)return o(e,1);for(const t in e)if(!1===o(t,1))return!1;return!0},l=new Event("StateChange")},8372:(e,t,n)=>{n.d(t,{I:()=>c,a:()=>p,b:()=>s,f:()=>h,v:()=>r});var i=n(911),o=n(8146),a=n(3965);const l=e=>{if("object"==typeof e&&null!==e){if("string"==typeof e.label&&e.label.length>0)return e.disabled=!0===e.disabled,e.label=`${e.label}`.trim(),!1===(0,a.b)(e.label,3)&&!1===(0,a.c)(e.label)&&(0,o.a)(`A differing Aria-Label (${e.label}) is not accessible. A differing Aria-Label should consist of at least three readable characters.`),!Array.isArray(e.options)||void 0===e.options.find((e=>!1===l(e)));if("number"==typeof e.label)return!0}return!1},s=(e,t,n={})=>{(0,o.g)(e,"_options",(e=>"object"==typeof e&&null!==e&&"string"==typeof e.label&&e.label.length>0),t,void 0,n)},r=(e,t,n={})=>{(0,o.g)(e,"_options",l,t,void 0,n)},d=["horizontal","vertical"],h=(e,t,n="")=>{t.forEach(((t,i)=>{const o=`${n}-${i}`;"object"==typeof t&&null!==t&&"string"==typeof t.label&&t.label.length>0&&(Array.isArray(t.options)?h(e,t.options,o):e.set(o,t))}))};class c extends i.I{constructor(e,t,n){super(e,t,n),this.component=e}validateRequired(e){((e,t)=>{(0,o.b)(e,"_required",t)})(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateRequired(this.component._required)}}class p extends c{constructor(e,t,n){super(e,t,n),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.afterPatchOptions=(e,t,n,i)=>{"_value"===i&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const n=t.has("_options")?t.get("_options"):this.component.state._options;Array.isArray(n)&&n.length>0&&(this.keyOptionMap.clear(),h(this.keyOptionMap,n))},this.component=e}validateOrientation(e){(0,o.w)(this.component,"_orientation",(e=>"string"==typeof e&&d.includes(e)),new Set([`Orientation {${d.join(", ")}`]),e,{defaultValue:"vertical"})}validateOptions(e){s(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateValue(e){e=(0,o.m)(e),e=Array.isArray(e)?e[0]:e,(0,o.s)(this.component,"_value",e,{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions})}componentWillLoad(){super.componentWillLoad(),this.validateOrientation(this.component._orientation),this.validateOptions(this.component._options),this.validateValue(this.component._value)}}},5255:(e,t,n)=>{n.d(t,{a:()=>s,p:()=>r});var i=n(2202),o=n(8146),a=n(5838);const l=e=>{for((0,a.a)()&&((0,o.j)("↓ Search form element start."),a.L.debug(e));e instanceof HTMLElement&&"FORM"!==e.tagName&&e.tagName!==i.l.toUpperCase();){try{e=e.parentElement instanceof HTMLElement?e.parentElement:e.parentNode instanceof ShadowRoot?e.parentNode.host:null}catch(e){}(0,a.a)()&&(a.L.debug(e),(0,o.j)("↑ Search form element finished."))}return e},s=(e={})=>{var t,n;const a=l(e.form);if(a instanceof HTMLElement){const e=new Event("reset",{bubbles:!0,cancelable:!0});if("FORM"===a.tagName)(0,o.q)(e,a),a.dispatchEvent(e);else if(a.tagName===i.l.toUpperCase()){(0,o.q)(e,o.K.querySelector("form",a));const i=a;"function"==typeof(null===(t=i._on)||void 0===t?void 0:t.onReset)&&(null===(n=i._on)||void 0===n||n.onReset(e))}}},r=(e={})=>{const t=l(e.form);if(t instanceof HTMLElement){const e=new SubmitEvent("submit",{bubbles:!0,cancelable:!0,submitter:t});if("FORM"===t.tagName)(0,a.a)()&&!1===t.noValidate&&(0,o.j)("If you have not focusable or hidden form fields in your form, you should enable noValidate for your form.",{force:!0}),setTimeout((()=>{"function"==typeof t.requestSubmit?t.requestSubmit():((0,o.q)(e,t),t.dispatchEvent(e))}));else if(t.tagName===i.l.toUpperCase()){(0,o.q)(e,o.K.querySelector("form",t));const n=t;setTimeout((()=>{var t,i;"function"==typeof(null===(t=n._on)||void 0===t?void 0:t.onSubmit)&&(null===(i=n._on)||void 0===i||i.onSubmit(e))}))}}}},5193:(e,t,n)=>{n.d(t,{I:()=>r});var i=n(911),o=n(6287),a=n(8146),l=n(290);const s=(e,t)=>{const n=e;"object"==typeof n&&null!==n&&((0,l.i)(n.right,1)&&(n.right={icon:n.right}),(0,l.i)(n.left,1)&&(n.left={icon:n.left}),t.set("_icons",n))};class r extends i.I{constructor(e,t,n){super(e,t,n),this.component=e}validateIcon(e){this.validateIcons(e)}validateIcons(e){(0,a.o)(e,(()=>{try{e=(0,a.p)(e)}catch(e){}(0,a.w)(this.component,"_icons",(e=>"object"==typeof e&&null!==e&&((0,l.i)(e.left,1)||(0,o.i)(e.left)||(0,l.i)(e.right,1)||(0,o.i)(e.right))),new Set(["KoliBriHorizontalIcon"]),e,{hooks:{beforePatch:s},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons||this.component._icon)}}},6287:(e,t,n)=>{n.d(t,{i:()=>l,v:()=>s});var i=n(8146),o=n(290);const a=(e,t,n)=>{(0,o.b)(n)?e[t]=n:(0,o.i)(n,1)&&(e[t]={icon:n})},l=e=>"object"==typeof e&&null!==e&&(void 0===e.style||(0,o.a)(e.style))&&(void 0===e.label||(0,o.i)(e.label))&&(0,o.i)(e.icon,1),s=(e,t,n={})=>{(0,i.o)(t,(()=>{var s;try{t=(0,i.p)(t)}catch(e){}(0,i.w)(e,"_icons",(e=>{const t="object"==typeof e&&null!==e&&0===Object.keys(e).length;return null===e||t||(0,o.i)(e,1)||"object"==typeof e&&null!==e&&((0,o.i)(e.left,1)||l(e.left)||(0,o.i)(e.right,1)||l(e.right)||(0,o.i)(e.top,1)||l(e.top)||(0,o.i)(e.bottom,1)||l(e.bottom))}),new Set(["KoliBriIcon"]),t,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(s=n.hooks)||void 0===s?void 0:s.afterPatch,beforePatch:(e,t,i,l)=>{var s,r;"function"==typeof(null===(s=n.hooks)||void 0===s?void 0:s.beforePatch)&&(null===(r=n.hooks)||void 0===r||r.beforePatch(e,t,i,l)),(e=>{var t,n,i;if(null===(t=e.nextState)||void 0===t?void 0:t.has("_icons")){const t=null===(n=e.nextState)||void 0===n?void 0:n.get("_icons");null===(i=e.nextState)||void 0===i||i.set("_icons",(e=>{let t={};return(0,o.i)(e,1)?t={left:{icon:e}}:"object"==typeof e&&null!==e&&(a(t,"top",e.top),a(t,"right",e.right),a(t,"bottom",e.bottom),a(t,"left",e.left)),t})(t))}})(i)}}}))}))}},1266:(e,t,n)=>{n.r(t),n.d(t,{kol_select:()=>y});var i=n(3135),o=n(2471),a=n(8445),l=n(911),s=n(6683),r=n(5193),d=n(8372),h=n(4656),c=n(8146),p=n(2202),u=n(5255),b=n(3255),f=(e,t,n)=>new Promise(((i,o)=>{var a=e=>{try{s(n.next(e))}catch(e){o(e)}},l=e=>{try{s(n.throw(e))}catch(e){o(e)}},s=e=>e.done?i(e.value):Promise.resolve(e.value).then(a,l);s((n=n.apply(e,t)).next())}));class v extends r.I{constructor(e,t,n){super(e,t,n),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.isValueInOptions=(e,t)=>void 0!==t.find((t=>"string"==typeof t.value?t.value===e:!!Array.isArray(t.options)&&this.isValueInOptions(e,t.options))),this.filterValuesInOptions=(e,t)=>e.filter((e=>void 0!==this.isValueInOptions(e,t))),this.afterPatchOptions=(e,t,n,i)=>{"_value"===i&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const n=t.has("_options")?t.get("_options"):this.component.state._options;if(Array.isArray(n)&&n.length>0){this.keyOptionMap.clear(),(0,d.f)(this.keyOptionMap,n);const e=t.has("_value")?t.get("_value"):this.component.state._value,i=this.filterValuesInOptions(Array.isArray(e)&&e.length>0?e:[],n);!1===this.component._multiple&&0===i.length?t.set("_value",[n[0].value]):Array.isArray(e)&&i.length<e.length&&t.set("_value",i)}},this.component=e}validateOptions(e){(0,d.v)(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(e){(0,c.b)(this.component,"_multiple",e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){(0,c.b)(this.component,"_required",e)}validateRows(e){(0,h.v)(this.component,e)}validateValue(e){(0,c.g)(this.component,"_value",(()=>!0),e,void 0,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const m=(e,t)=>Array.isArray(e)&&e.includes(t),y=class{getValue(){return f(this,null,(function*(){return this.state._value}))}focus(){return f(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return f(this,null,(function*(){var e;null===(e=this.selectRef)||void 0===e||e.focus()}))}renderOptgroup(e,t){var n;return(0,i.h)("optgroup",{disabled:e.disabled,label:e.label},null===(n=e.options)||void 0===n?void 0:n.map(((e,n)=>{const o=`${t}-${n}`;return Array.isArray(e.options)?this.renderOptgroup(e,o):(0,i.h)("option",{disabled:e.disabled,key:o,selected:m(this.state._value,e.value),value:o},e.label)})))}render(){const{ariaDescribedBy:e}=(0,l.g)(this.state),t=(0,b.s)(this.state._label);return(0,i.h)(i.H,{key:"c23c719275c880e3b72cabe273fbd3a7359b255e",class:{"kol-select":!0,"has-value":this.state._hasValue}},(0,i.h)(p.k,{key:"4cbf7c5eb49f972c27e27cafa0ad8f16fdcf898d",class:{"hide-label":!!this.state._hideLabel,select:!0},_accessKey:this.state._accessKey,_disabled:this.state._disabled,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_msg:this.state._msg,_required:this.state._required,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var e;return null===(e=this.selectRef)||void 0===e?void 0:e.focus()},role:"presentation"},(0,i.h)("span",{key:"bc99d0c5dee2a9fffbf163a84006c8b79cb0faee",slot:"label"},t?(0,i.h)("slot",{name:"expert"}):"string"==typeof this.state._accessKey?(0,i.h)(i.F,null,(0,i.h)(s.I,{accessKey:this.state._accessKey,label:this.state._label})," ",(0,i.h)("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):(0,i.h)("span",null,this.state._label)),(0,i.h)("div",{key:"5307630e18d11a8bfa423de2f87500ec10fb095b",slot:"input"},(0,i.h)("form",{key:"4c5eb3f8c30c00b8c42d868918e584bf274cb55a",onSubmit:e=>{e.preventDefault(),(0,u.p)({form:this.host,ref:this.selectRef})}},(0,i.h)("input",{key:"f17dd54ffd0d87b38c5d8fe45c25499c1416f8fe",type:"submit",hidden:!0}),(0,i.h)("select",Object.assign({key:"b62cecafcd910d6e51ef5bad103d7b0cb8f1f5b0",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,size:this.state._rows,spellcheck:"false"},this.controller.onFacade,{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this)}),this.state._options.map(((e,t)=>{const n=`-${t}`;return Array.isArray(e.options)?this.renderOptgroup(e,n):(0,i.h)("option",{disabled:e.disabled,key:n,selected:m(this.state._value,e.value),value:n},e.label)})))))))}constructor(e){(0,i.r)(this,e),this.catchRef=e=>{this.selectRef=e},this._accessKey=void 0,this._alert=!0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._rows=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideError:!1,_id:`id-${(0,o.n)()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.controller=new v(this,"select",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHideError(e){this.controller.validateHideError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateMultiple(e){this.controller.validateMultiple(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}onInput(e){var t,n,i;this._value=Array.from((null===(t=this.selectRef)||void 0===t?void 0:t.options)||[]).filter((e=>!0===e.selected)).map((e=>{var t;return null===(t=this.controller.getOptionByKey(e.value))||void 0===t?void 0:t.value})),(0,a.t)("input",this.host,this._value),null===(i=null===(n=this.state._on)||void 0===n?void 0:n.onInput)||void 0===i||i.call(n,e,this._value)}onChange(e){var t,n;(0,a.s)(e),(0,a.t)("change",this.host,this._value),this.controller.setFormAssociatedValue(this._value),null===(n=null===(t=this.state._on)||void 0===t?void 0:t.onChange)||void 0===n||n.call(t,e,this._value)}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};y.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n  .input {\n    background-color: white;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid 1px;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}"}},4656:(e,t,n)=>{n.d(t,{v:()=>o});var i=n(8146);const o=(e,t)=>{(0,i.k)(e,"_rows",t,{min:1})}}}]);

package/dist/1601.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1601.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1601],{1601:(n,e,t)=>{t.r(e),t.d(e,{kol_modal:()=>s});var i=t(3135),o=t(8146),a=t(3965),l=(n,e,t)=>new Promise(((i,o)=>{var a=n=>{try{s(t.next(n))}catch(n){o(n)}},l=n=>{try{s(t.throw(n))}catch(n){o(n)}},s=n=>n.done?i(n.value):Promise.resolve(n.value).then(a,l);s((t=t.apply(n,e)).next())}));const s=class{constructor(n){(0,i.r)(this,n),this._activeElement=void 0,this._label=void 0,this._on=void 0,this._width="100%",this.state={_activeElement:null,_label:"",_width:"100%"}}componentDidRender(){var n;this.state._activeElement&&(null===(n=this.refDialog)||void 0===n||n.showModal())}disconnectedCallback(){this.closeModal()}handleNativeCloseEvent(){var n,e;null===(e=null===(n=this.state._on)||void 0===n?void 0:n.onClose)||void 0===e||e.call(n)}openModal(){return l(this,null,(function*(){var n;null===(n=this.refDialog)||void 0===n||n.showModal()}))}closeModal(){return l(this,null,(function*(){var n,e;this._activeElement=null,null===(e=null===(n=this.refDialog)||void 0===n?void 0:n.close)||void 0===e||e.call(n)}))}render(){return(0,i.h)("dialog",{key:"a07deae802281819324b9979782094b99643fe47",class:"kol-modal",ref:n=>{this.refDialog=n},style:{width:this.state._width},"aria-label":this.state._label,onClose:this.handleNativeCloseEvent.bind(this)},(0,i.h)("div",{key:"bff2a4e4858ffe31cb97943e3b01a87b71b83a69"},(0,i.h)("slot",{key:"611bff393f955c1be666e7e5135275e9b4cf98f2"})))}validateActiveElement(n){(0,o.w)(this,"_activeElement",(n=>"object"==typeof n||null===n),new Set(["HTMLElement","null"]),n,{defaultValue:null,hooks:{afterPatch:()=>{this.state._activeElement?this.openModal():this.closeModal()}}})}validateLabel(n){(0,a.v)(this,n,{required:!0})}validateOn(n){if("object"==typeof n&&null!==n){const e={};"function"!=typeof n.onClose&&!0!==n.onClose||(e.onClose=n.onClose),(0,o.s)(this,"_on",e)}}validateWidth(n){(0,o.i)(this,"_width",n,{defaultValue:"100%"})}componentWillLoad(){this.validateActiveElement(this._activeElement),this.validateLabel(this._label),this.validateOn(this._on),this.validateWidth(this._width)}static get watchers(){return{_activeElement:["validateActiveElement"],_label:["validateLabel"],_on:["validateOn"],_width:["validateWidth"]}}};s.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-modal {\n    border: 0;\n    padding: 0;\n  }\n  .kol-modal::backdrop {\n    background-color: rgba(0, 0, 0, 0.33);\n  }\n}"}},3965:(n,e,t)=>{t.d(e,{a:()=>c,b:()=>s,c:()=>r,h:()=>o,v:()=>h});var i=t(8146);const o=[0,1,2,3,4,5,6],a=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function s(n,e=1){return function(n){var e;return"string"==typeof n&&(null===(e=n.match(a))||void 0===e?void 0:e.length)||0}(n)>=e}function r(n){return l.test(n)}const d=new Set(["string"]),h=(n,e,t={})=>{(0,i.w)(n,"_label",(n=>"string"==typeof n),d,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,o,a)=>{var l,d;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(d=n.hooks)||void 0===d||d.afterPatch(e,t,o,a)),"string"==typeof e&&!1===s(e,3)&&!1===r(e)&&(0,i.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=n.hooks)||void 0===e?void 0:e.beforePatch}})}(t))},c=h}}]);

package/dist/1746.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1746.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1746],{2471:(e,t,i)=>{i.d(t,{i:()=>s,n:()=>c,r:()=>a});var o=i(3135),n=i(3255),r=i(5838);const l=()=>{let e=(0,r.d)().KoliBri;return void 0===e&&(e={},Object.defineProperty((0,r.d)(),"KoliBri",{value:e,writable:!1})),e},s=()=>{(()=>{const e=(0,r.g)().querySelector('meta[name="kolibri"]');if(e&&e.hasAttribute("content")){const t=e.getAttribute("content");"string"==typeof t&&((0,r.s)(t.includes("dev-mode=true")),(0,r.b)(t.includes("experimental-mode=true")),(0,r.c)(t.includes("color-contrast-analysis=true")))}})(),r.L.debug(`\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${o.E.kolibriVersion}\n\t`,{forceLog:!0})},a=()=>{!0!==l().adviceShown&&(Object.defineProperty(l(),"adviceShown",{get:function(){return!0}}),r.L.debug("\nYou are using the KoliBri component library. If you have any suggestions for improvement or find a problem, please contact us:\n\nTicket: https://github.com/public-ui/kolibri/issues/new/choose (for privacy reasons, please use email)\nEmail: kolibri@itzbund.de\n"))};let c=()=>Math.floor(16777215*Math.random()).toString(16);"test"===n.p&&(c=()=>"nonce")},1746:(e,t,i)=>{i.r(t),i.d(t,{initialize:()=>a});var o=i(2471),n=i(5838),r=i(8146);function l(e,t){try{Object.defineProperty((()=>{let e=(0,n.d)().KoliBri;return void 0===e&&(e={},Object.defineProperty((0,n.d)(),"KoliBri",{value:e,writable:!1})),e})(),e,{get:function(){return t}})}catch(t){n.L.debug(`KoliBri property ${e} is already bind.`)}}const s=(e,t)=>n.L.debug(`${e} ${t?"":"not "}activated`),a=()=>{if((0,o.i)(),(0,n.e)()){(0,o.r)(),l("a11yColorContrast",r.z),l("querySelector",r.v),l("querySelectorAll",r.A),l("querySelectorColors",r.B),l("utils",(function(){return r.C})),l("parseJson",r.p),l("stringifyJson",r.D);const e=(0,n.g)().body,t=(0,n.g)().createElement("svg");if(t.setAttribute("aria-label","KoliBri-DevTools"),t.setAttribute("xmlns","http://www.w3.org/2000/svg"),t.setAttribute("role","toolbar"),t.setAttribute("style","position: fixed;color: black;font-size: 200%;bottom: 0.25rem;right: 0.25rem;"),t.innerHTML='<svg\n  xmlns="http://www.w3.org/2000/svg"\n  width="50"\n  height="50"\n  viewBox="0 0 600 600"\n>\n  <path d="M353 322L213 304V434L353 322Z" fill="#047" />\n  <path d="M209 564V304L149 434L209 564Z" fill="#047" />\n  <path d="M357 316L417 250L361 210L275 244L357 316Z" fill="#047" />\n  <path d="M353 318L35 36L213 300L353 318Z" fill="#047" />\n  <path d="M329 218L237 92L250 222L272 241L329 218Z" fill="#047" />\n  <path d="M391 286L565 272L421 252L391 286Z" fill="#047" />\n</svg>',(0,n.g)().body.appendChild(t),s("Development mode",(0,n.e)()),s("Experimental mode",(0,n.a)()),s("Color contrast analysis",(0,n.f)()),(0,n.f)()){const t=setTimeout((()=>{clearTimeout(t),setInterval((()=>{r.C.queryHtmlElementColors((0,n.g)().createElement("div"),(0,r.z)(e),!1,!1)}),1e4)}),2500)}}}},3255:(e,t,i)=>{i.d(t,{h:()=>n,p:()=>o,s:()=>r});let o="development";try{o="production"}catch(e){o="production"}const n=(e,t,i)=>{if(e&&t&&"string"==typeof i){const o=e.querySelector(`[slot="${i}"]`);o&&t.appendChild(o)}},r=e=>""===e}}]);

package/dist/1786.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1786.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1786],{2471:(n,e,t)=>{t.d(e,{i:()=>l,n:()=>d,r:()=>r});var i=t(3135),o=t(3255),a=t(5838);const s=()=>{let n=(0,a.d)().KoliBri;return void 0===n&&(n={},Object.defineProperty((0,a.d)(),"KoliBri",{value:n,writable:!1})),n},l=()=>{(()=>{const n=(0,a.g)().querySelector('meta[name="kolibri"]');if(n&&n.hasAttribute("content")){const e=n.getAttribute("content");"string"==typeof e&&((0,a.s)(e.includes("dev-mode=true")),(0,a.b)(e.includes("experimental-mode=true")),(0,a.c)(e.includes("color-contrast-analysis=true")))}})(),a.L.debug(`\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${i.E.kolibriVersion}\n\t`,{forceLog:!0})},r=()=>{!0!==s().adviceShown&&(Object.defineProperty(s(),"adviceShown",{get:function(){return!0}}),a.L.debug("\nYou are using the KoliBri component library. If you have any suggestions for improvement or find a problem, please contact us:\n\nTicket: https://github.com/public-ui/kolibri/issues/new/choose (for privacy reasons, please use email)\nEmail: kolibri@itzbund.de\n"))};let d=()=>Math.floor(16777215*Math.random()).toString(16);"test"===o.p&&(d=()=>"nonce")},5202:(n,e,t)=>{t.d(e,{v:()=>o});var i=t(8146);const o=(n,e)=>{(0,i.b)(n,"_disabled",e,{hooks:{afterPatch:n=>{!0===n&&(0,i.c)()}}})}},1786:(n,e,t)=>{t.r(e),t.d(e,{kol_accordion:()=>u});var i=t(3135),o=t(2471),a=t(5791),s=t(2202),l=t(8146),r=t(5202),d=t(2343),c=t(3965),h=(n,e,t)=>new Promise(((i,o)=>{var a=n=>{try{l(t.next(n))}catch(n){o(n)}},s=n=>{try{l(t.throw(n))}catch(n){o(n)}},l=n=>n.done?i(n.value):Promise.resolve(n.value).then(a,s);l((t=t.apply(n,e)).next())}));(0,l.f)("[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend"),(0,l.f)("[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.");const u=class{constructor(n){(0,i.r)(this,n),this.nonce=(0,o.n)(),this.catchRef=n=>{this.buttonWcRef=n},this.onClick=n=>{this._open=!this._open,setTimeout((()=>{var e;"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onClick)&&this.state._on.onClick(n,!0===this._open)}))},this._disabled=!1,this._label=void 0,this._level=1,this._on=void 0,this._open=!1,this.state={_label:"",_level:1}}focus(){return h(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return h(this,null,(function*(){var n;yield null===(n=this.buttonWcRef)||void 0===n?void 0:n.kolFocus()}))}render(){return(0,i.h)(i.H,{key:"b2662d09c5d6ee4ba7b8775fad1abedb51d55483",class:"kol-accordion"},(0,i.h)("div",{key:"c41fb13d7a5b699031edebf8aa88fe2f3e022346",class:{accordion:!0,disabled:!0===this.state._disabled,open:!0===this.state._open}},(0,i.h)(s.b,{key:"10d86a82b4bc84278174a822edc508dd7edc3158",_label:"",_level:this.state._level,class:"accordion-heading"},(0,i.h)(s.c,{key:"365d163277cbdddfe6e34203e31a3d0ae9a1f602",class:"accordion-button",ref:this.catchRef,slot:"expert",_ariaControls:this.nonce,_ariaExpanded:this.state._open,_disabled:this.state._disabled,_icons:this.state._open?"codicon codicon-remove":"codicon codicon-add",_label:this.state._label,_on:{onClick:this.onClick}})),(0,i.h)("div",{key:"6fca8bd22147df2e556d9cfefb09bb60c705de9a",class:"wrapper"},(0,i.h)("div",{key:"8fa8ba68f8c2ea8911bdb7c040c4d8bd44469fbf",class:"animation-wrapper"},(0,i.h)("div",{key:"dd61af68e1eaeece1f8b5595fae6b97418563cac","aria-hidden":!1===this.state._open?"true":void 0,class:"content",id:this.nonce},(0,i.h)("slot",{key:"6249f6a0ccfd5ed101297d94a52a5311cc4385cf"}))))))}validateDisabled(n){(0,r.v)(this,n)}validateLabel(n){(0,c.v)(this,n,{required:!0})}validateLevel(n){(0,a.w)(this,n)}validateOn(n){"object"==typeof n&&null!==n&&"function"==typeof n.onClick&&(0,l.s)(this,"_on",n)}validateOpen(n){(0,d.v)(this,n)}componentWillLoad(){this.validateDisabled(this._disabled),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}static get watchers(){return{_disabled:["validateDisabled"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}};u.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  /* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n  .wrapper {\n    display: grid;\n    grid-template-rows: 0fr;\n    overflow: hidden;\n    transition: grid-template-rows 0.3s;\n  }\n  .accordion.open .wrapper {\n    grid-template-rows: 1fr;\n  }\n  .animation-wrapper {\n    min-height: 0;\n    transition: visibility 0.3s;\n    /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n    visibility: hidden;\n  }\n  .accordion.open .animation-wrapper {\n    visibility: visible;\n  }\n  @media (prefers-reduced-motion) {\n    .animation-wrapper,\n    .wrapper {\n      transition-duration: 0s;\n    }\n  }\n  /* @see https://github.com/public-ui/kolibri/issues/5952 */\n  @media print {\n    .accordion:not(.open) .animation-wrapper {\n      display: none;\n    }\n  }\n  /*\n  * Inside a button, the caption text is always centered.\n  * So we have to align the text to the left.\n  */\n  .accordion .kol-heading-wc .kol-button-wc button .kol-span-wc {\n    justify-items: start;\n  }\n}"}},3965:(n,e,t)=>{t.d(e,{a:()=>h,b:()=>l,c:()=>r,h:()=>o,v:()=>c});var i=t(8146);const o=[0,1,2,3,4,5,6],a=/[a-zA-Z0-9äöüÄÖÜß]/g,s=/^\d+$/;function l(n,e=1){return function(n){var e;return"string"==typeof n&&(null===(e=n.match(a))||void 0===e?void 0:e.length)||0}(n)>=e}function r(n){return s.test(n)}const d=new Set(["string"]),c=(n,e,t={})=>{(0,i.w)(n,"_label",(n=>"string"==typeof n),d,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,o,a)=>{var s,d;"function"==typeof(null===(s=n.hooks)||void 0===s?void 0:s.afterPatch)&&(null===(d=n.hooks)||void 0===d||d.afterPatch(e,t,o,a)),"string"==typeof e&&!1===l(e,3)&&!1===r(e)&&(0,i.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=n.hooks)||void 0===e?void 0:e.beforePatch}})}(t))},h=c},2343:(n,e,t)=>{t.d(e,{v:()=>o});var i=t(8146);const o=(n,e,t)=>{(0,i.b)(n,"_open",e,t)}},3255:(n,e,t)=>{t.d(e,{h:()=>o,p:()=>i,s:()=>a});let i="development";try{i="production"}catch(n){i="production"}const o=(n,e,t)=>{if(n&&e&&"string"==typeof t){const i=n.querySelector(`[slot="${t}"]`);i&&e.appendChild(i)}},a=n=>""===n},5791:(n,e,t)=>{t.d(e,{w:()=>a});var i=t(3965),o=t(8146);const a=(n,e)=>{(0,o.w)(n,"_level",(n=>"number"==typeof n&&i.h.includes(n)),new Set([`Number {${i.h.join(", ")}`]),e,{defaultValue:1,required:!0})}}}]);

package/dist/1832.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1832.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1832],{290:(e,t,o)=>{o.d(t,{S:()=>l,a:()=>i,b:()=>n,i:()=>a});const n=e=>"object"==typeof e&&null!==e,a=(e,t=0)=>"string"==typeof e&&e.length>=t,i=e=>{if("object"!=typeof e||null===e)return a(e,1);for(const t in e)if(!1===a(t,1))return!1;return!0},l=new Event("StateChange")},2471:(e,t,o)=>{o.d(t,{i:()=>s,n:()=>c,r:()=>r});var n=o(3135),a=o(3255),i=o(5838);const l=()=>{let e=(0,i.d)().KoliBri;return void 0===e&&(e={},Object.defineProperty((0,i.d)(),"KoliBri",{value:e,writable:!1})),e},s=()=>{(()=>{const e=(0,i.g)().querySelector('meta[name="kolibri"]');if(e&&e.hasAttribute("content")){const t=e.getAttribute("content");"string"==typeof t&&((0,i.s)(t.includes("dev-mode=true")),(0,i.b)(t.includes("experimental-mode=true")),(0,i.c)(t.includes("color-contrast-analysis=true")))}})(),i.L.debug(`\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${n.E.kolibriVersion}\n\t`,{forceLog:!0})},r=()=>{!0!==l().adviceShown&&(Object.defineProperty(l(),"adviceShown",{get:function(){return!0}}),i.L.debug("\nYou are using the KoliBri component library. If you have any suggestions for improvement or find a problem, please contact us:\n\nTicket: https://github.com/public-ui/kolibri/issues/new/choose (for privacy reasons, please use email)\nEmail: kolibri@itzbund.de\n"))};let c=()=>Math.floor(16777215*Math.random()).toString(16);"test"===a.p&&(c=()=>"nonce")},8445:(e,t,o)=>{function n(e){e.stopImmediatePropagation(),e.stopPropagation()}function a(e,t,o){t&&function(e,t,o){const n=e.dispatchEvent(function(e,t){return new CustomEvent(`kol-${e}`,{bubbles:!0,cancelable:!0,composed:!0,detail:t})}(t,o))}(t,e,o)}function i(e){e.preventDefault(),n(e)}o.d(t,{p:()=>i,s:()=>n,t:()=>a})},782:(e,t,o)=>{o.d(t,{E:()=>h,a:()=>r,b:()=>c,c:()=>l,d:()=>i,v:()=>s});var n=o(8146),a=o(290);const i=(e,t)=>{(0,n.w)(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["TableCallbacksPropType {Events.onSort, Events.onSelectionChange}"]),t)},l=(e,t)=>{(0,n.w)(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["TableStatefulCallbacksPropType {Events.onSelectionChange}"]),t)},s=(e,t,o)=>{(0,n.t)(t,(()=>{(0,n.o)(t,(()=>{void 0===t&&(t=[]);try{t=(0,n.p)(t)}catch(e){}Array.isArray(t)&&t.every((e=>"object"==typeof e&&null!==e))&&(0,n.s)(e,"_data",t,o)}))}))},r=(e,t,o)=>{(0,n.t)(t,(()=>{(0,n.o)(t,(()=>{void 0===t&&(t=[]);try{t=(0,n.p)(t)}catch(e){}Array.isArray(t)&&t.every((e=>"object"==typeof e&&null!==e))&&(0,n.s)(e,"_dataFoot",t,o)}))}))},c=(e,t)=>{var o;(o="string"==typeof t?(()=>{try{return(0,n.p)(t)}catch(e){return}})():t)&&(0,a.b)(o)&&"function"==typeof o.label&&(!o.selectedKeys||Array.isArray(o.selectedKeys))&&(0,n.s)(e,"_selection",t)};var h,d;(d=h||(h={})).onBlur="onBlur",d.onChange="onChange",d.onClick="onClick",d.onDblClick="onDblClick",d.onFocus="onFocus",d.onInput="onInput",d.onKeyDown="onKeyDown",d.onKeyPress="onKeyPress",d.onKeyUp="onKeyUp",d.onMouseDown="onMouseDown",d.onMouseMove="onMouseMove",d.onMouseOut="onMouseOut",d.onMouseOver="onMouseOver",d.onMouseUp="onMouseUp",d.onReset="onReset",d.onSelect="onSelect",d.onSort="onSort",d.onSelectionChange="onSelectionChange",d.onSubmit="onSubmit",d.onClose="onClose"},9050:(e,t,o)=>{o.d(t,{t:()=>i});var n=o(6607),a=o(3255);let i=(e,t)=>{var o;return(null!==(o=(0,n.g)())&&void 0!==o?o:(0,n.i)("de")).translate(e,t)};"test"===a.p&&(i=e=>e)},1832:(e,t,o)=>{o.r(t),o.d(t,{kol_table_stateless_wc:()=>d});var n=o(3135),a=o(2202),i=o(9050),l=o(8445),s=o(2471),r=o(8146),c=o(782),h=o(3965);const d=class{constructor(e){(0,n.r)(this,e),this.horizontal=!0,this.cellsToRenderTimeouts=new Map,this.dataToKeyMap=new Map,this.checkboxRefs=[],this.renderTableRow=(e,t)=>{var o,a;let i=String(t);return this.horizontal&&(null===(o=e[0])||void 0===o?void 0:o.data)&&(i=null!==(a=this.getDataKey(e[0].data))&&void 0!==a?a:i),(0,n.h)("tr",{key:`row-${i}`},this.renderSelectionCell(e,t),e.map(((e,o)=>this.renderTableCell(e,t,o))))},this.renderTableCell=(e,t,o)=>{let a=`${t}-${o}-${e.label}`;if(e.data){const n=this.getDataKey(e.data);a=n?`${n}-${this.horizontal?o:t}`:a}return!1===e.asTd?this.renderHeadingCell(e,t,o):(0,n.h)("td",{key:`cell-${a}`,class:{[e.textAlign]:"string"==typeof e.textAlign&&e.textAlign.length>0},colSpan:e.colSpan,rowSpan:e.rowSpan,style:{textAlign:e.textAlign,width:e.width},ref:"function"==typeof e.render?t=>{this.cellRender(e,t)}:void 0},"function"!=typeof e.render?e.label:"")},this.state={_data:[],_label:"",_headerCells:{horizontal:[],vertical:[]}},this.tableDivElementHasScrollbar=!1,this._data=void 0,this._dataFoot=void 0,this._headerCells=void 0,this._label=void 0,this._minWidth=void 0,this._on=void 0,this._selection=void 0}validateData(e){(0,c.v)(this,e,{beforePatch:e=>{this.updateDataToKeyMap(e)}})}validateDataFoot(e){(0,c.a)(this,e)}validateHeaderCells(e){((e,t)=>{(0,r.t)(t,(()=>{(0,r.o)(t,(()=>{try{t=(0,r.p)(t)}catch(e){}(0,r.w)(e,"_headerCells",(e=>"object"==typeof e&&null!==e),new Set(["TableHeaderCellsPropType"]),t)}))}))})(this,e)}validateLabel(e){(0,h.v)(this,e,{required:!0})}validateMinWidth(e){(0,r.i)(this,"_minWidth",e,{defaultValue:void 0})}validateOn(e){(0,c.d)(this,e)}validateSelection(e){(0,c.b)(this,e)}handleKeyDown(e){var t;if("ArrowUp"===e.key||"ArrowDown"===e.key){const o=null===(t=this.tableDivElement)||void 0===t?void 0:t.querySelector(":focus");let n=this.checkboxRefs.indexOf(o);n>-1&&(e.preventDefault(),"ArrowDown"===e.key?(n=(n+1)%this.checkboxRefs.length,this.checkboxRefs[n].focus()):"ArrowUp"===e.key&&(e.preventDefault(),n=(n+this.checkboxRefs.length-1)%this.checkboxRefs.length,this.checkboxRefs[n].focus()))}}componentDidRender(){this.checkDivElementScrollbar()}componentDidLoad(){this.tableDivElement&&ResizeObserver&&(this.tableDivElementResizeObserver=new ResizeObserver(this.checkDivElementScrollbar.bind(this)),this.tableDivElementResizeObserver.observe(this.tableDivElement))}disconnectedCallback(){var e;null===(e=this.tableDivElementResizeObserver)||void 0===e||e.disconnect()}checkDivElementScrollbar(){this.tableDivElement&&(this.tableDivElementHasScrollbar=this.tableDivElement.scrollWidth>this.tableDivElement.clientWidth)}updateDataToKeyMap(e){e.forEach((e=>{this.dataToKeyMap.has(e)||this.dataToKeyMap.set(e,(0,s.n)())})),this.dataToKeyMap.forEach(((t,o)=>{e.includes(o)||this.dataToKeyMap.delete(o)}))}getDataKey(e){return this.dataToKeyMap.get(e)}cellRender(e,t){t&&(clearTimeout(this.cellsToRenderTimeouts.get(t)),this.cellsToRenderTimeouts.set(t,setTimeout((()=>{if("function"==typeof e.render){const o=e.render(t,e,e.data,this.state._data);"string"==typeof o&&(t.textContent=o)}}))))}getNumberOfCols(e,t){let o=0;return e.forEach((e=>{let t=0;e.forEach((e=>{var o;return t+=null!==(o=e.colSpan)&&void 0!==o?o:1})),o<t&&(o=t)})),0===o&&(o=t.length),o}getNumberOfRows(e,t){var o;let n=0;return e.forEach((e=>{let t=0;e.forEach((e=>{var o;return t+=null!==(o=e.rowSpan)&&void 0!==o?o:1})),n<t&&(n=t)})),0===n?n=t.length:n-=(null===(o=this.state._dataFoot)||void 0===o?void 0:o.length)||0,n}filterHeaderKeys(e){const t=[];return e.forEach((e=>{e.forEach((e=>{"string"==typeof e.key&&t.push(e)}))})),t}getPrimaryHeader(e){var t,o;let n=this.filterHeaderKeys(null!==(t=e.horizontal)&&void 0!==t?t:[]);return this.horizontal=!0,0===n.length&&(n=this.filterHeaderKeys(null!==(o=e.vertical)&&void 0!==o?o:[]),n.length>0&&(this.horizontal=!1)),n}createDataField(e,t,o){var n;t.horizontal=Array.isArray(null==t?void 0:t.horizontal)?t.horizontal:[],t.vertical=Array.isArray(null==t?void 0:t.vertical)?t.vertical:[];const a=this.getPrimaryHeader(t),l=this.getNumberOfCols(t.horizontal,e);let s=this.getNumberOfRows(t.vertical,e),r=0;o&&(r=s,s+=(null===(n=this.state._dataFoot)||void 0===n?void 0:n.length)||0);const c=[],h=[],d=[];t.vertical.forEach(((e,t)=>{h[t]=0,d[t]=[]}));for(let n=r;n<s;n++){const i=[];t.vertical.forEach(((e,t)=>{let o=0;if(d[t].forEach((e=>o+=e)),o<=n){const a=e[n-o+h[t]];if("object"==typeof a){i.push(Object.assign(Object.assign({},a),{asTd:!1,data:{}}));let e=1;if("number"==typeof a.rowSpan&&a.rowSpan>1&&(e=a.rowSpan),d[t].push(e),"number"==typeof a.colSpan&&a.colSpan>1)for(let o=1;o<a.colSpan;o++)d[t+o].push(e);h[t]++}}}));for(let t=0;t<l;t++)if(!0===this.horizontal){const l=o&&this.state._dataFoot?this.state._dataFoot[n-r]:e[n];"object"==typeof a[t]&&null!==a[t]&&"string"==typeof a[t].key&&"object"==typeof l&&null!==l&&i.push(Object.assign(Object.assign({},a[t]),{colSpan:void 0,data:l,label:l[a[t].key],rowSpan:void 0}))}else"object"==typeof a[n]&&null!==a[n]&&"string"==typeof a[n].key&&"object"==typeof e[t]&&null!==e[t]&&i.push(Object.assign(Object.assign({},a[n]),{colSpan:void 0,data:e[t],label:e[t][a[n].key],rowSpan:void 0}));c.push(i)}if(0===e.length){let e=0,o=0;Array.isArray(t.horizontal)&&t.horizontal.length>0&&t.horizontal[0].forEach((t=>{e+=t.colSpan||1})),Array.isArray(t.vertical)&&t.vertical.length>0&&(e-=t.vertical.length,t.vertical[0].forEach((e=>{o+=e.rowSpan||1})));const n={colSpan:e,label:(0,i.t)("kol-no-entries"),render:void 0,rowSpan:Math.max(o,1)};0===c.length?c.push([n]):c[0].push(n)}return c}componentWillLoad(){this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaderCells(this._headerCells),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validateOn(this._on),this.validateSelection(this._selection)}renderSelectionCell(e,t){var o,i,s;const r=this.state._selection;if(!r)return"";const h=null!==(o=r.keyPropertyName)&&void 0!==o?o:"id",d=null===(i=e[0])||void 0===i?void 0:i.data;if(!d)return"";const u=d[h],p=r.multiple||void 0===r.multiple,b=null===(s=null==r?void 0:r.selectedKeys)||void 0===s?void 0:s.includes(u),v=r.label(d),f={name:"selection",checked:b,id:u,"aria-label":v};return(0,n.h)("td",{key:`tbody-${t}-selection`,class:"selection-cell"},(0,n.h)("div",{class:"input "+(b?"checked":"")},p?(0,n.h)("label",{class:"checkbox-container"},(0,n.h)(a.g,{class:"icon",_icons:"codicon "+(b?"codicon-check":""),_label:""}),(0,n.h)("input",Object.assign({ref:e=>e&&this.checkboxRefs.push(e)},f,{type:"checkbox",onInput:e=>{var t,o,n;const a=b?null===(o=null==r?void 0:r.selectedKeys)||void 0===o?void 0:o.filter((e=>e!==u)):[...null!==(t=null==r?void 0:r.selectedKeys)&&void 0!==t?t:[],u];(0,l.t)("selection-change",this.host,a),"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n[c.E.onSelectionChange])&&this.state._on[c.E.onSelectionChange](e,null!=a?a:[])}}))):(0,n.h)("label",{class:"radio-container"},(0,n.h)("input",Object.assign({},f,{type:"radio",onInput:e=>{var t;(0,l.t)("selection-change",this.host,u),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t[c.E.onSelectionChange])&&this.state._on[c.E.onSelectionChange](e,u)}}))),(0,n.h)(a.a,{"aria-hidden":"true",class:"input-tooltip",_align:"right",_id:`${u}-label`,_label:v})))}renderHeadingSelectionCell(){var e,t;const o=this.state._selection;if(!o||!o.multiple&&void 0!==o.multiple)return(0,n.h)("th",{key:"thead-0"});const s=null!==(e=o.keyPropertyName)&&void 0!==e?e:"id",r=null===(t=o.selectedKeys)||void 0===t?void 0:t.length,h=r===this.state._data.length,d=0!==r&&!h;let u="kol-table-selection-indeterminate";h&&!d&&(u="kol-table-selection-none"),0===r&&(u="kol-table-selection-all");const p=(0,i.t)(u);return(0,n.h)("th",{key:"thead-0-selection",class:"selection-cell selection-control"},(0,n.h)("div",{class:"input "+(d?"indeterminate":h?"checked":"")},(0,n.h)("label",{class:"checkbox-container"},(0,n.h)(a.g,{class:"icon",_icons:"codicon "+(d?"codicon-remove":h?"codicon-check":""),_label:""}),(0,n.h)("input",{ref:e=>e&&this.checkboxRefs.push(e),name:"selection",checked:h&&!d,"aria-label":p,type:"checkbox",onInput:e=>{var t;const o=h?[]:this.state._data.map((e=>null==e?void 0:e[s]));(0,l.t)("selection-change",this.host,o),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t[c.E.onSelectionChange])&&this.state._on[c.E.onSelectionChange](e,o)}})),(0,n.h)(a.a,{"aria-hidden":"true",class:"input-tooltip",_align:"right",_id:`${u}-label`,_label:p})))}renderHeadingCell(e,t,o){let i,l="codicon codicon-fold";if(e.sortDirection)switch(e.sortDirection){case"ASC":l="codicon codicon-chevron-up",i="ascending";break;case"DESC":l="codicon codicon-chevron-down",i="descending"}return(0,n.h)("th",{key:`${t}-${o}-${e.label}`,class:e.textAlign?`align-${e.textAlign}`:void 0,scope:"number"==typeof e.colSpan&&e.colSpan>1?"colgroup":"col",colSpan:e.colSpan,rowSpan:e.rowSpan,style:{width:e.width},"aria-sort":i,"data-sort":`sort-${e.sortDirection}`},e.sortDirection?(0,n.h)(a.c,{class:"table-sort-button",exportparts:"icon",_icons:{right:l},_label:e.label,_on:{onClick:t=>{var o;"function"==typeof(null===(o=this.state._on)||void 0===o?void 0:o.onSort)&&e.key&&e.sortDirection&&this.state._on.onSort(t,{key:e.key,currentSortDirection:e.sortDirection})}}}):e.label)}renderSpacer(e,t){const o=null==t?void 0:t[0].reduce(((e,t)=>e+(t.colSpan||1)),0);return(0,n.h)("tr",{class:`${e}-spacer`,"aria-hidden":"true"},(0,n.h)("td",{colSpan:o}))}renderFoot(){if(!this.state._dataFoot||0===this.state._dataFoot.length)return null;const e=this.createDataField(this.state._dataFoot,this.state._headerCells,!0);return(0,n.h)("tfoot",null,[this.renderSpacer("foot",e),e.map(this.renderTableRow)])}render(){const e=this.createDataField(this.state._data,this.state._headerCells);return this.checkboxRefs=[],(0,n.h)(n.H,{key:"069525fb840547551953550a1eddfff609629c32",class:"kol-table-stateless-wc"},(0,n.h)("div",{key:"1c9f44b49b85aed6860244b7fddcff7cd23c9049",ref:e=>this.tableDivElement=e,class:"table",tabindex:this.tableDivElementHasScrollbar?"-1":void 0},(0,n.h)("table",{key:"ec4043d4546495f4659283dbada4df5d80165e9f",style:{minWidth:this.state._minWidth}},(0,n.h)("div",{key:"1a71ebf29e40c2f8790d771a00a1ce1bc01c3bb6",class:"focus-element",tabindex:this.tableDivElementHasScrollbar?"0":void 0,"aria-describedby":"caption"}," "),(0,n.h)("caption",{key:"dace10e221c8ce23c00c78015008f38cf4fc5a31",id:"caption"},this.state._label),Array.isArray(this.state._headerCells.horizontal)&&(0,n.h)("thead",{key:"db26b6b4930be2aaa777247a393844fd7953ddf2"},[this.state._headerCells.horizontal.map(((e,t)=>(0,n.h)("tr",{key:`thead-${t}`},this.state._selection&&this.renderHeadingSelectionCell(),e.map(((e,o)=>!0===e.asTd?(0,n.h)("td",{key:`thead-${t}-${o}-${e.label}`,class:{[e.textAlign]:"string"==typeof e.textAlign&&e.textAlign.length>0},colSpan:e.colSpan,rowSpan:e.rowSpan,style:{textAlign:e.textAlign,width:e.width},ref:"function"==typeof e.render?t=>{this.cellRender(e,t)}:void 0},"function"!=typeof e.render?e.label:""):this.renderHeadingCell(e,t,o)))))),this.renderSpacer("head",this.state._headerCells.horizontal)]),(0,n.h)("tbody",{key:"4afa26c9959c17be6ca8a188079928de86c8eb9a"},e.map(this.renderTableRow)),this.renderFoot())))}get host(){return(0,n.g)(this)}static get watchers(){return{_data:["validateData"],_dataFoot:["validateDataFoot"],_headerCells:["validateHeaderCells"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_on:["validateOn"],_selection:["validateSelection"]}}}},3965:(e,t,o)=>{o.d(t,{a:()=>d,b:()=>s,c:()=>r,h:()=>a,v:()=>h});var n=o(8146);const a=[0,1,2,3,4,5,6],i=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function s(e,t=1){return function(e){var t;return"string"==typeof e&&(null===(t=e.match(i))||void 0===t?void 0:t.length)||0}(e)>=t}function r(e){return l.test(e)}const c=new Set(["string"]),h=(e,t,o={})=>{(0,n.w)(e,"_label",(e=>"string"==typeof e),c,t,function(e){var t;return Object.assign(Object.assign({},e),{hooks:{afterPatch:(t,o,a,i)=>{var l,c;"function"==typeof(null===(l=e.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(c=e.hooks)||void 0===c||c.afterPatch(t,o,a,i)),"string"==typeof t&&!1===s(t,3)&&!1===r(t)&&(0,n.a)(`The heading or label ("${t}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof t&&t.length>80&&(0,n.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(t=e.hooks)||void 0===t?void 0:t.beforePatch}})}(o))},d=h},3255:(e,t,o)=>{o.d(t,{h:()=>a,p:()=>n,s:()=>i});let n="development";try{n="production"}catch(e){n="production"}const a=(e,t,o)=>{if(e&&t&&"string"==typeof o){const n=e.querySelector(`[slot="${o}"]`);n&&t.appendChild(n)}},i=e=>""===e}}]);