@public-ui/sample-react 2.0.15 → 2.1.1

package/src/scenarios/appointment-form/DistrictForm.tsx

@@ -1,5 +1,5 @@
 import { Field, useFormikContext } from 'formik';
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef } from 'react';
 
 import { KolButton, KolForm, KolHeading, KolSelect } from '@public-ui/react';
 
@@ -35,11 +35,6 @@ export function DistrictForm() {
 	const errorList = createErrorList(form.errors);
 	const [sectionSubmitted, setSectionSubmitted] = useState(false);
 	const formikRef = useRef<HTMLKolFormElement>(null);
-
-	useEffect(() => {
-		focusErrorList(errorList, formikRef);
-	}, [sectionSubmitted]);
-
 	return (
 		<div className="p-2">
 			<KolHeading _level={2} _label="Wählen Sie einen Stadtteil aus"></KolHeading>
@@ -48,9 +43,16 @@ export function DistrictForm() {
 				_errorList={sectionSubmitted ? errorList : []}
 				_on={{
 					onSubmit: () => {
-						void form.submitForm();
 						setSectionSubmitted(true);
-						focusErrorList(errorList, formikRef);
+						form
+							.validateForm()
+							.then((res) => {
+								if (res && Object.keys(res).length > 0) throw Error();
+								void form.submitForm();
+							})
+							.catch(() => {
+								focusErrorList(formikRef);
+							});
 					},
 				}}
 			>
@@ -61,7 +63,10 @@ export function DistrictForm() {
 							_label="Stadtteil"
 							_options={[{ label: 'Bitte wählen…', value: '' }, ...LOCATION_OPTIONS]}
 							_value={[field.value]}
-							_error={form.errors.district || ''}
+							_msg={{
+								_type: 'error',
+								_description: form.errors.district || '',
+							}}
 							_touched={form.touched.district}
 							_required
 							onBlur={() => {
@@ -69,6 +74,7 @@ export function DistrictForm() {
 							}}
 							_on={{
 								onChange: (event, values: unknown) => {
+									setSectionSubmitted(false);
 									// Select und Radio setzen den Wert immer initial.
 									if (event.target) {
 										const [value] = values as [FormValues['district']];

package/src/scenarios/appointment-form/PersonalInformationForm.tsx

@@ -33,7 +33,7 @@ export function PersonalInformationForm() {
 	const formikRef = useRef(null);
 
 	useEffect(() => {
-		focusErrorList(errorList, formikRef);
+		focusErrorList(formikRef);
 	}, [sectionSubmitted]);
 	return (
 		<div className="p-2">
@@ -45,7 +45,7 @@ export function PersonalInformationForm() {
 					onSubmit: () => {
 						void form.submitForm();
 						setSectionSubmitted(true);
-						focusErrorList(errorList, formikRef);
+						focusErrorList(formikRef);
 					},
 				}}
 			>
@@ -58,7 +58,10 @@ export function PersonalInformationForm() {
 							id="field-salutation"
 							_label="Anrede"
 							_value={[field.value]}
-							_error={form.errors.salutation || ''}
+							_msg={{
+								_type: 'error',
+								_description: form.errors.salutation || '',
+							}}
 							_touched={form.touched.salutation}
 							_options={[{ label: 'Bitte wählen…', value: '' }, ...SALUTATION_OPTIONS]}
 							_required
@@ -85,7 +88,10 @@ export function PersonalInformationForm() {
 									id="field-company"
 									_label="Firma"
 									_value={field.value}
-									_error={form.errors.company || ''}
+									_msg={{
+										_type: 'error',
+										_description: form.errors.company || '',
+									}}
 									_touched={form.touched.company}
 									_required
 									_on={{
@@ -111,7 +117,10 @@ export function PersonalInformationForm() {
 								id="field-name"
 								_label="Vor- und Zuname"
 								_value={field.value}
-								_error={form.errors.name || ''}
+								_msg={{
+									_type: 'error',
+									_description: form.errors.name || '',
+								}}
 								_touched={form.touched.name}
 								_required
 								_on={{
@@ -159,7 +168,10 @@ export function PersonalInformationForm() {
 								_type="tel"
 								_label="Telefonnumer"
 								_value={field.value}
-								_error={form.errors.phone || ''}
+								_msg={{
+									_type: 'error',
+									_description: form.errors.phone || '',
+								}}
 								_touched={form.touched.phone}
 								_on={{
 									onChange: (event, value: unknown) => {

package/src/scenarios/appointment-form/formUtils.ts

@@ -7,8 +7,6 @@ export function createErrorList(formikErrors: Record<string, string>): ErrorList
 	}));
 }
 
-export function focusErrorList(errorList: ErrorListPropType[], formikRef: React.RefObject<HTMLKolFormElement>) {
-	if (errorList.length > 0 && formikRef && formikRef.current) {
-		formikRef.current.focusErrorList().catch(console.warn);
-	}
+export function focusErrorList(formikRef: React.RefObject<HTMLKolFormElement>) {
+	formikRef.current?.focusErrorList().catch(console.warn);
 }

package/src/scenarios/inputs-get-value.tsx

@@ -4,6 +4,7 @@ import React, { createContext, useContext, useEffect, useMemo, useRef, useState
 import {
 	KolButton,
 	KolButtonLink,
+	KolCard,
 	KolInputCheckbox,
 	KolInputColor,
 	KolInputDate,
@@ -22,6 +23,7 @@ import { SampleDescription } from '../components/SampleDescription';
 
 import type { HTMLStencilElement } from '@stencil/core/internal';
 const EventTargetContext = createContext<EventTarget | undefined>(undefined);
+const EventLoggerActiveContext = createContext<boolean>(false);
 
 type Props = {
 	InputComponent: React.ComponentType<any>;
@@ -33,6 +35,7 @@ const Scenario = (props: Props) => {
 	const [value, setValue] = useState<unknown>(undefined);
 	const formatter = props.formatter || JSON.stringify;
 	const eventTarget = useContext(EventTargetContext);
+	const eventLoggerActive = useContext(EventLoggerActiveContext);
 
 	const handleButtonClick = async () => {
 		setValue(await ref.current?.getValue());
@@ -49,9 +52,20 @@ const Scenario = (props: Props) => {
 		};
 	}, [eventTarget]);
 
+	const eventListeners = Object.fromEntries(
+		['onInput', 'onChange', 'onBlur', 'onClick', 'onFocus', 'onMouseDown'].map((eventName) => [
+			eventName,
+			(event, value) => {
+				if (eventLoggerActive) {
+					console.log(props.inputProps._label, eventName, value, event);
+				}
+			},
+		]),
+	);
+
 	return (
 		<div className="grid grid-cols-3 items-end gap-4">
-			<props.InputComponent ref={ref} {...props.inputProps} />
+			<props.InputComponent ref={ref} _on={eventListeners} {...props.inputProps} />
 			<KolButton
 				_label="getValue()"
 				_on={{
@@ -67,96 +81,108 @@ const Scenario = (props: Props) => {
 
 export const InputsGetValue: FC = () => {
 	const eventTarget = useMemo(() => new EventTarget(), []);
+	const [eventLoggerActive, setEventLoggerActive] = useState<boolean>(true);
 
 	return (
 		<>
 			<EventTargetContext.Provider value={eventTarget}>
-				<SampleDescription>
-					<p>
-						This sample show how the input components <code>getValue()</code> method works. It&apos;s called when clicking the &quot;getValue()&quot; button and
-						prints the current value right next to itself.
-					</p>
-				</SampleDescription>
+				<EventLoggerActiveContext.Provider value={eventLoggerActive}>
+					<SampleDescription>
+						<p>
+							This sample show how the input components <code>getValue()</code> method works. It&apos;s called when clicking the &quot;getValue()&quot; button
+							and prints the current value right next to itself.
+						</p>
+					</SampleDescription>
 
-				<div className="grid gap-4">
-					<Scenario InputComponent={KolInputText} inputProps={{ _label: 'InputText' }} />
-					<Scenario InputComponent={KolInputCheckbox} inputProps={{ _label: 'KolInputCheckbox' }} />
-					<Scenario InputComponent={KolInputColor} inputProps={{ _label: 'KolInputColor' }} />
-					<Scenario InputComponent={KolInputDate} inputProps={{ _label: 'KolInputDate' }} />
-					<Scenario InputComponent={KolInputEmail} inputProps={{ _label: 'KolInputEmail' }} />
-					<Scenario
-						InputComponent={KolInputFile}
-						inputProps={{ _label: 'KolInputFile' }}
-						formatter={(value) =>
-							value instanceof FileList
-								? `FileList{${Array.from(value)
-										.map((file: File) => file.name)
-										.join(', ')}}`
-								: JSON.stringify(value)
-						}
-					/>
-					<Scenario InputComponent={KolInputNumber} inputProps={{ _label: 'KolInputNumber' }} />
-					<Scenario InputComponent={KolInputPassword} inputProps={{ _label: 'KolInputPassword' }} />
-					<Scenario InputComponent={KolInputRange} inputProps={{ _label: 'KolInputRange' }} />
-					<Scenario
-						InputComponent={KolInputRadio}
-						inputProps={{
-							_label: 'KolInputRadio',
-							_orientation: 'horizontal',
-							_options: [
-								{ label: 'New York', value: 'New York' },
-								{ label: 'Rio de Janeiro', value: 'Rio de Janeiro' },
-								{ label: 'Rosenheim', value: 'Rosenheim' },
-							],
-							_value: 'New York',
-						}}
-					/>
-					<Scenario
-						InputComponent={KolSelect}
-						inputProps={{
-							_label: 'KolSelect',
-							_options: [
-								{ label: 'New York', value: 'New York' },
-								{ label: 'Rio de Janeiro', value: 'Rio de Janeiro' },
-								{ label: 'Rosenheim', value: 'Rosenheim' },
-							],
-						}}
-					/>
-					<Scenario
-						InputComponent={KolTextarea}
-						inputProps={{
-							_label: 'KolTextarea',
-						}}
-					/>
-					<Scenario
-						InputComponent={KolButton}
-						inputProps={{
-							_label: 'KolButton',
-							_variant: 'ghost',
-							_value: 'KolButton value',
-						}}
-					/>
-					<Scenario
-						InputComponent={KolButtonLink}
-						inputProps={{
-							_label: 'KolButtonLink',
-							_value: 'KolButtonLink value',
-						}}
-					/>
+					<KolCard _label="Sample options" className="block ha mb-8">
+						<KolInputCheckbox
+							_label="Log events to console"
+							_value={true}
+							_checked={eventLoggerActive}
+							_on={{ onChange: (_, active) => setEventLoggerActive(active as boolean) }}
+						/>
+					</KolCard>
 
-					<div className="grid grid-cols-3 gap-4">
-						<div></div>
-						<KolButton
-							_label="Run all"
-							_variant="primary"
-							_on={{
-								onClick: () => {
-									eventTarget.dispatchEvent(new Event('runAll'));
-								},
+					<div className="grid gap-4">
+						<Scenario InputComponent={KolInputText} inputProps={{ _label: 'InputText' }} />
+						<Scenario InputComponent={KolInputCheckbox} inputProps={{ _label: 'KolInputCheckbox' }} />
+						<Scenario InputComponent={KolInputColor} inputProps={{ _label: 'KolInputColor' }} />
+						<Scenario InputComponent={KolInputDate} inputProps={{ _label: 'KolInputDate' }} />
+						<Scenario InputComponent={KolInputEmail} inputProps={{ _label: 'KolInputEmail' }} />
+						<Scenario
+							InputComponent={KolInputFile}
+							inputProps={{ _label: 'KolInputFile' }}
+							formatter={(value) =>
+								value instanceof FileList
+									? `FileList{${Array.from(value)
+											.map((file: File) => file.name)
+											.join(', ')}}`
+									: JSON.stringify(value)
+							}
+						/>
+						<Scenario InputComponent={KolInputNumber} inputProps={{ _label: 'KolInputNumber' }} />
+						<Scenario InputComponent={KolInputPassword} inputProps={{ _label: 'KolInputPassword' }} />
+						<Scenario InputComponent={KolInputRange} inputProps={{ _label: 'KolInputRange' }} />
+						<Scenario
+							InputComponent={KolInputRadio}
+							inputProps={{
+								_label: 'KolInputRadio',
+								_orientation: 'horizontal',
+								_options: [
+									{ label: 'New York', value: 'New York' },
+									{ label: 'Rio de Janeiro', value: 'Rio de Janeiro' },
+									{ label: 'Rosenheim', value: 'Rosenheim' },
+								],
+								_value: 'New York',
+							}}
+						/>
+						<Scenario
+							InputComponent={KolSelect}
+							inputProps={{
+								_label: 'KolSelect',
+								_options: [
+									{ label: 'New York', value: 'New York' },
+									{ label: 'Rio de Janeiro', value: 'Rio de Janeiro' },
+									{ label: 'Rosenheim', value: 'Rosenheim' },
+								],
+							}}
+						/>
+						<Scenario
+							InputComponent={KolTextarea}
+							inputProps={{
+								_label: 'KolTextarea',
 							}}
-						></KolButton>
+						/>
+						<Scenario
+							InputComponent={KolButton}
+							inputProps={{
+								_label: 'KolButton',
+								_variant: 'ghost',
+								_value: 'KolButton value',
+							}}
+						/>
+						<Scenario
+							InputComponent={KolButtonLink}
+							inputProps={{
+								_label: 'KolButtonLink',
+								_value: 'KolButtonLink value',
+							}}
+						/>
+
+						<div className="grid grid-cols-3 gap-4">
+							<div></div>
+							<KolButton
+								_label="Run all"
+								_variant="primary"
+								_on={{
+									onClick: () => {
+										eventTarget.dispatchEvent(new Event('runAll'));
+									},
+								}}
+							></KolButton>
+						</div>
 					</div>
-				</div>
+				</EventLoggerActiveContext.Provider>
 			</EventTargetContext.Provider>
 		</>
 	);

package/src/shares/constants.ts

@@ -1,2 +1,3 @@
+export const PUBLIC_DOC_COMPONENT_URL = 'https://public-ui.github.io/docs/components';
 export const ERROR_MSG = 'Ich bin eine Fehlermeldung!';
 export const HINT_MSG = 'Ich bin ein Hinweis.';

package/src/shares/country.ts

@@ -0,0 +1,18 @@
+import { SelectOption } from '@public-ui/components';
+import countries from 'world_countries_lists/data/countries/de/countries.json';
+
+type Country = {
+	id: number;
+	alpha2: string;
+	alpha3: string;
+	name: string;
+};
+
+export const COUNTRY_OPTIONS: SelectOption<string>[] = [
+	...(countries as Country[]).map((country) => ({
+		label: country.name,
+		value: country.alpha2,
+	})),
+];
+
+export const COUNTRY_SUGGESTIONS: string[] = [...(countries as Country[]).map((country) => country.name)];

package/src/shares/routes.ts

@@ -43,10 +43,12 @@ import { TABLE_ROUTES } from '../components/table/routes';
 import { TABS_ROUTES } from '../components/tabs/routes';
 import { TEXTAREA_ROUTES } from '../components/textarea/routes';
 import { TOAST_ROUTES } from '../components/toast/routes';
+import { TOOLBAR_ROUTES } from '../components/toolbar/routes';
 import { VERSION_ROUTES } from '../components/version/routes';
 import { SCENARIO_ROUTES } from '../scenarios/routes';
 import { Routes } from './types';
 import { TREE_ROUTES } from '../components/tree/routes';
+import { COMBOBOX_ROUTES } from '../components/combobox/routes';
 
 export const ROUTES: Routes = {
 	...HANDOUT_ROUTES,
@@ -60,6 +62,7 @@ export const ROUTES: Routes = {
 	...BUTTON_LINK_ROUTES,
 	...BUTTON_ROUTES,
 	...CARD_ROUTES,
+	...COMBOBOX_ROUTES,
 	...DETAILS_ROUTES,
 	...FORM_ROUTES,
 	...HEADING_ROUTES,
@@ -95,6 +98,7 @@ export const ROUTES: Routes = {
 	...TABS_ROUTES,
 	...TEXTAREA_ROUTES,
 	...TOAST_ROUTES,
+	...TOOLBAR_ROUTES,
 	...TREE_ROUTES,
 	...VERSION_ROUTES,
 	...SCENARIO_ROUTES,

package/src/shares/theme.ts

@@ -1,10 +1,10 @@
 import { SelectOption } from '@public-ui/components';
 
-export const THEMES = ['bmf', 'bstw', 'default', 'ecl-ec', 'ecl-eu', 'itzbund'] as const;
+export const THEMES = ['bmf', 'default', 'ecl-ec', 'ecl-eu', 'itzbund', 'unstyled'] as const;
 export type Theme = (typeof THEMES)[number];
 export type ThemeAndUnstyled = Theme | 'unstyled';
 
-const drafts: ThemeAndUnstyled[] = ['bstw', 'ecl-ec', 'ecl-eu', 'itzbund'];
+const drafts: ThemeAndUnstyled[] = ['ecl-ec', 'ecl-eu', 'itzbund'];
 
 export const isDraftTheme = (theme: ThemeAndUnstyled) => drafts.includes(theme);
 
@@ -26,10 +26,6 @@ export const THEME_OPTIONS: SelectOption<ThemeAndUnstyled>[] = [
 		label: 'Bundesministerium der Finanzen (Tested)',
 		value: 'bmf',
 	},
-	{
-		label: 'BStW (Draft)',
-		value: 'bstw',
-	},
 	{
 		label: 'Default (Tested)',
 		value: 'default',

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],{4226:(t,e,n)=>{n.d(e,{I:()=>o});var i=n(5364);const o=({accessKey:t,label:e})=>{let[n,...o]=e.split(t);return 0===o.length&&(t=t.toUpperCase(),[n,...o]=e.split(t)),0===o.length&&(t=t.toLowerCase(),[n,...o]=e.split(t)),(0,i.h)(i.F,null,n,o.length?(0,i.h)(i.F,null,(0,i.h)("u",null,t),o.join(t)):null)}},5397:(t,e,n)=>{n.d(e,{A:()=>o});var i=n(1717);class o{constructor(t,e,n){var o,a,s,l;if(this.experimentalMode=(0,i.Z)(),this.setFormAssociatedValue=t=>{var e;const n=null===(e=this.formAssociated)||void 0===e?void 0:e.getAttribute("name");null!==n&&""!==n||(0,i.R)(` The form field (${this.type}) must have a name attribute to be form-associated. Please define the _name attribute.`);const o=this.tryToStringifyValue(t);this.syncValue(t,o,this.formAssociated),this.syncValue(t,o,this.syncToOwnInput)},this.component=t,this.host=this.findHostWithShadowRoot(n),this.type=e,this.experimentalMode&&("KOL-BUTTON"===(l=null===(o=this.host)||void 0===o?void 0:o.tagName)||"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-TEXTAREA"===l)){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===(s=this.host)||void 0===s||s.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,n){if(this.experimentalMode)try{if("boolean"!=typeof(n="object"==typeof n&&null!==n?JSON.stringify(n):n)&&"number"!=typeof n&&"string"!=typeof n)throw new Error("Invalid value type: "+typeof n);null==e||e.setAttribute(t,`${n}`)}catch(n){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,i.$)(`The form field raw value is not able to stringify! ${t}`),""}}syncValue(t,e,n){if(n)switch(this.type){case"file":n.files=t;break;case"select":n.querySelectorAll("option").forEach((t=>{n.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",""),n.appendChild(t)}}));break;default:"string"==typeof e?(n.setAttribute("value",e),n.value=e):(n.removeAttribute("value"),n.value="")}}validateName(t){(0,i.a0)(this.component,t,{hooks:{afterPatch:()=>{this.setAttribute("name",this.formAssociated,this.component.state._name)}}}),void 0===t&&(0,i.R)("Ein Name am Eingabefeldern oder Schalter ist nicht zwingend erforderlich, kann aber für die Autocomplete-Funktion und für das statische Versenden des Eingabefeldes relevant sein.")}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)}}},6122:(t,e,n)=>{n.d(e,{I:()=>r,g:()=>s});var i=n(1717),o=n(8445),a=n(5397);const s=t=>{var e,n;const i=Boolean("error"===(null===(e=t._msg)||void 0===e?void 0:e._type)&&t._msg._description&&(null===(n=t._msg._description)||void 0===n?void 0:n.length)>0)&&!0===t._touched,o="string"==typeof t._hint&&t._hint.length>0,a=[];return!0===i&&a.push(`${t._id}-error`),!0===o&&a.push(`${t._id}-hint`),{hasError:i,hasHint:o,ariaDescribedBy:a}};class l extends a.A{constructor(t,e,n){super(t,e,n),this.component=t}validateAlert(t){(0,i.z)(this.component,"_alert",t)}validateTouched(t){(0,i.J)(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAlert(this.component._alert),this.validateTouched(this.component._touched)}}class r extends l{constructor(t,e,n){super(t,e,n),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,i.A)(this.component,"_accessKey",t)}validateAdjustHeight(t){(0,i.M)(this.component,t)}validateDisabled(t){(0,i.z)(this.component,"_disabled",t),!0===t&&(0,i.N)()}validateTooltipAlign(t){(0,i.a)(this.component,t)}validateError(t){const e=t?{_description:t,_type:"error"}:void 0;this.validateMsg(e)}validateHideError(t){(0,i.O)(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideError&&(0,i.Q)("Property hide-error for inputs: Only use when the error message is shown outside of the input component.")}}})}validateHideLabel(t){(0,i.P)(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideLabel&&(0,i.Q)("Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.")}}})}validateHint(t){(0,i.A)(this.component,"_hint",t)}validateId(t){(0,i.A)(this.component,"_id",t,{hooks:{afterPatch:()=>{this.setAttribute("id",this.formAssociated,this.component.state._id)}},minLength:1}),""!==t&&void 0!==t||(0,i.R)("Eine eindeutige ID an den Eingabefeldern ist nicht zwingend erforderlich, könnte aber für die E2E-Tests relevant sein.")}validateLabel(t){(0,i.S)(this.component,t,{required:!0})}validateMsg(t){(0,i.T)(this.component,t)}validateOn(t){"object"==typeof t&&(0,i.k)(this.component,"_on",t)}validateSmartButton(t){(0,i.q)(t,(()=>{try{t=(0,i.r)(t)}catch(t){}(0,i.k)(this.component,"_smartButton",t)}))}validateTabIndex(t){(0,i.U)(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,o.s)(t),(0,o.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){var e;const n=t.target.value;(0,o.t)("change",this.host,n),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onChange)&&this.component._on.onChange(t,n),this.valueChangeListeners.forEach((t=>t(n)))}onInput(t,e=!0){var n;const i=t.target.value;(0,o.s)(t),(0,o.t)("input",this.host,i),e&&this.setFormAssociatedValue(i),"function"==typeof(null===(n=this.component._on)||void 0===n?void 0:n.onInput)&&this.component._on.onInput(t,i)}onClick(t){var e;(0,o.s)(t),(0,o.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,o.s)(t),(0,o.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)}}},7885:(t,e,n)=>{n.d(e,{I:()=>s,a:()=>l,f:()=>a});var i=n(1717),o=n(6122);const a=(t,e,n="")=>{e.forEach(((e,i)=>{const o=`${n}-${i}`;"object"==typeof e&&null!==e&&"string"==typeof e.label&&e.label.length>0&&(Array.isArray(e.options)?a(t,e.options,o):t.set(o,e))}))};class s extends o.I{constructor(t,e,n){super(t,e,n),this.component=t}validateRequired(t){(0,i.V)(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateRequired(this.component._required)}}class l extends s{constructor(t,e,n){super(t,e,n),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.afterPatchOptions=(t,e,n,i)=>{"_value"===i&&this.setFormAssociatedValue(t)},this.beforePatchOptions=(t,e)=>{const n=e.has("_options")?e.get("_options"):this.component.state._options;Array.isArray(n)&&n.length>0&&(this.keyOptionMap.clear(),a(this.keyOptionMap,n))},this.component=t}validateOrientation(t){(0,i.w)(this.component,"_orientation",(t=>"string"==typeof t&&i.W.includes(t)),new Set([`Orientation {${i.W.join(", ")}`]),t,{defaultValue:"vertical"})}validateOptions(t){(0,i.X)(this.component,t,{hooks:{afterPatch:this.afterPatchOptions}})}validateValue(t){t=(0,i.Y)(t),t=Array.isArray(t)?t[0]:t,(0,i.k)(this.component,"_value",t,{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions})}componentWillLoad(){super.componentWillLoad(),this.validateOrientation(this.component._orientation),this.validateOptions(this.component._options),this.validateValue(this.component._value)}}},3197:(t,e,n)=>{n.d(e,{I:()=>s});var i=n(1717),o=n(6122);const a=(t,e)=>{const n=t;"object"==typeof n&&null!==n&&((0,i.F)(n.right,1)&&(n.right={icon:n.right}),(0,i.F)(n.left,1)&&(n.left={icon:n.left}),e.set("_icons",n))};class s extends o.I{constructor(t,e,n){super(t,e,n),this.component=t}validateIcon(t){this.validateIcons(t)}validateIcons(t){(0,i.q)(t,(()=>{try{t=(0,i.r)(t)}catch(t){}(0,i.w)(this.component,"_icons",(t=>"object"==typeof t&&null!==t&&((0,i.F)(t.left,1)||(0,i.a3)(t.left)||(0,i.F)(t.right,1)||(0,i.a3)(t.right))),new Set(["KoliBriHorizontalIcon"]),t,{hooks:{beforePatch:a},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons||this.component._icon)}}},4349:(t,e,n)=>{n.d(e,{i:()=>a,n:()=>l,r:()=>s});var i=n(1717);const o=()=>{let t=(0,i.d)().KoliBri;return void 0===t&&(t={},Object.defineProperty((0,i.d)(),"KoliBri",{value:t,writable:!1})),t},a=()=>{(()=>{const t=(0,i.g)().querySelector('meta[name="kolibri"]');if(t&&t.hasAttribute("content")){const e=t.getAttribute("content");"string"==typeof e&&((0,i.s)(e.includes("dev-mode=true")),(0,i.b)(e.includes("experimental-mode=true")),(0,i.c)(e.includes("color-contrast-analysis=true")))}})(),i.L.debug("\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | `--' |  |) /_  ,--.--. `--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n`--' `--´  `---´  `--' `--' `------´  `--'    `--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.15\n\t",{forceLog:!0})},s=()=>{!0!==o().adviceShown&&(Object.defineProperty(o(),"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 l=()=>Math.floor(16777215*Math.random()).toString(16);"test"===i.p&&(l=()=>"nonce")},8445:(t,e,n)=>{function i(t){t.stopImmediatePropagation(),t.stopPropagation()}function o(t,e,n){e&&function(t,e,n){const i=t.dispatchEvent(function(t,e){return new CustomEvent(`kol-${t}`,{bubbles:!0,cancelable:!0,composed:!0,detail:e})}(e,n))}(e,t,n)}function a(t){t.preventDefault(),i(t)}n.d(e,{p:()=>a,s:()=>i,t:()=>o})},1266:(t,e,n)=>{n.r(e),n.d(e,{kol_select:()=>m});var i=n(5364),o=n(1717),a=n(4349),s=n(8445),l=n(6122),r=n(4226),h=n(3197),c=n(7885),d=n(3202);class p extends h.I{constructor(t,e,n){super(t,e,n),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.isValueInOptions=(t,e)=>void 0!==e.find((e=>"string"==typeof e.value?e.value===t:!!Array.isArray(e.options)&&this.isValueInOptions(t,e.options))),this.filterValuesInOptions=(t,e)=>t.filter((t=>void 0!==this.isValueInOptions(t,e))),this.afterPatchOptions=(t,e,n,i)=>{"_value"===i&&this.setFormAssociatedValue(t)},this.beforePatchOptions=(t,e)=>{const n=e.has("_options")?e.get("_options"):this.component.state._options;if(Array.isArray(n)&&n.length>0){this.keyOptionMap.clear(),(0,c.f)(this.keyOptionMap,n);const t=e.has("_value")?e.get("_value"):this.component.state._value,i=this.filterValuesInOptions(Array.isArray(t)&&t.length>0?t:[],n);!1===this.component._multiple&&0===i.length?(e.set("_value",[n[0].value]),this.onStateChange()):Array.isArray(t)&&i.length<t.length&&(e.set("_value",i),this.onStateChange())}},this.component=t}validateOptions(t){(0,o.al)(this.component,t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(t){(0,o.z)(this.component,"_multiple",t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(t){(0,o.z)(this.component,"_required",t)}validateRows(t){(0,o.am)(this.component,t)}validateValue(t){(0,o.u)(this.component,"_value",(()=>!0),t,void 0,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}componentWillLoad(t){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof t){const e=setTimeout((()=>{clearTimeout(e),t(o.ag)}))}},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 u=(t,e)=>Array.isArray(t)&&t.includes(e),m=class{getValue(){return t=this,null,e=function*(){return this._value},new Promise(((n,i)=>{var o=t=>{try{s(e.next(t))}catch(t){i(t)}},a=t=>{try{s(e.throw(t))}catch(t){i(t)}},s=t=>t.done?n(t.value):Promise.resolve(t.value).then(o,a);s((e=e.apply(t,null)).next())}));var t,e}renderOptgroup(t,e){var n;return(0,i.h)("optgroup",{disabled:t.disabled,label:t.label},null===(n=t.options)||void 0===n?void 0:n.map(((t,n)=>{const o=`${e}-${n}`;return Array.isArray(t.options)?this.renderOptgroup(t,o):(0,i.h)("option",{disabled:t.disabled,key:o,selected:u(this.state._value,t.value),value:o},t.label)})))}render(){const{ariaDescribedBy:t}=(0,l.g)(this.state),e=(0,o.I)(this.state._label);return(0,i.h)(i.H,{key:"d411396c04b6e2f2fc6a707033c47e40abef6dc4",class:{"kol-select":!0,"has-value":this.state._hasValue}},(0,i.h)(d.l,{key:"06b5b1350883caf01e429215928c819526390f52",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 t;return null===(t=this.ref)||void 0===t?void 0:t.focus()},role:"presentation"},(0,i.h)("span",{key:"f031ebc4fb27e5cd39cc526e315477605edc3126",slot:"label"},e?(0,i.h)("slot",{name:"expert"}):"string"==typeof this.state._accessKey?(0,i.h)(i.F,null,(0,i.h)(r.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:"ad2d2a3358029742e7df11e69db1b9d12c28cede",slot:"input"},(0,i.h)("select",Object.assign({key:"7347d688e31351ef035eda2528351792197fc3e3",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.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(((t,e)=>{const n=`-${e}`;return Array.isArray(t.options)?this.renderOptgroup(t,n):(0,i.h)("option",{disabled:t.disabled,key:n,selected:u(this.state._value,t.value),value:n},t.label)}))))))}constructor(t){(0,i.r)(this,t),this.catchRef=t=>{this.ref=t,(0,o.h)(this.host,this.ref)},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,a.n)()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.controller=new p(this,"select",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMsg(t){this.controller.validateMsg(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateOptions(t){this.controller.validateOptions(t)}validateRequired(t){this.controller.validateRequired(t)}validateRows(t){this.controller.validateRows(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange.bind(this)),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}onInput(t){var e,n;this._value=Array.from((null===(e=this.ref)||void 0===e?void 0:e.options)||[]).filter((t=>!0===t.selected)).map((t=>{var e;return null===(e=this.controller.getOptionByKey(t.value))||void 0===e?void 0:e.value})),(0,s.t)("input",this.host,this._value),"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n.onInput)&&this.state._on.onInput(t,this._value)}onChange(t){var e;(0,s.s)(t),(0,s.t)("change",this.host,this._value),this.controller.setFormAssociatedValue(this._value),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onChange)&&this.state._on.onChange(t,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"]}}};m.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  .hidden {\n    display: none;\n    visibility: hidden;\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}\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@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}"}}}]);

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:(e,n,t)=>{t.r(n),t.d(n,{kol_modal:()=>a});var i=t(5364),o=t(1717);const l=new class{constructor(){this.lockedElements=new Map,this.modalStack=new Map}lockElement(e){const n=e.getAttribute("tabindex");(e instanceof HTMLAnchorElement||e instanceof HTMLButtonElement||e instanceof HTMLInputElement||e instanceof HTMLSelectElement||e instanceof HTMLTextAreaElement||"string"==typeof n||void 0!==e.dataset.kolModal)&&("string"==typeof n?this.lockedElements.set(e,{tabIndex:n}):this.lockedElements.set(e,{}),e.setAttribute("tabindex","-1"),e.setAttribute("aria-hidden","true"),e.style.userSelect="none")}unlockElement(e,n){"string"==typeof e.tabIndex?n.setAttribute("tabindex",e.tabIndex):n.removeAttribute("tabindex"),n.removeAttribute("aria-hidden"),n.style.userSelect="unset",this.lockedElements.delete(n)}unlockLockedElements(e){e.forEach(this.unlockElement.bind(this))}lockFocus(e,n){try{if(e!==n&&(e instanceof HTMLElement||e instanceof ShadowRoot)){e instanceof HTMLElement&&(this.lockElement(e),this.lockFocus(e.shadowRoot,n));for(let t=0;t<e.children.length;t++)this.lockFocus(e.children[t],n)}}catch(e){}}renderModalIfExists(e){if(e instanceof HTMLElement){this.lockedElements.has(e)&&this.unlockElement(this.lockedElements.get(e),e);const n=setTimeout((()=>{clearTimeout(n),e.focus()}),500)}if(this.unlockLockedElements(this.lockedElements),this.modalStack.size>0){const e=Array.from(this.modalStack.keys()),n=e[e.length-1];this.modalStack.forEach(((e,t)=>{t.style.display=n===t?"inline":"none"})),(0,o.g)().body.style.maxHeight="100vh",(0,o.g)().body.style.overflow="hidden",this.lockFocus((0,o.g)().body,n)}else(0,o.g)().body.style.maxHeight="unset",(0,o.g)().body.style.overflow="unset"}openModal(e,n){e instanceof HTMLElement==0?o.L.warn("[KolModalService] Die DOM-Referenz des Modals ist nicht valide."):(this.modalStack.set(e,{activeElement:n}),this.renderModalIfExists())}closeModal(e){var n;if(e instanceof HTMLElement==0)o.L.warn("[KolModalService] Die DOM-Referenz des Modals ist nicht valide.");else{const t=null===(n=this.modalStack.get(e))||void 0===n?void 0:n.activeElement;this.modalStack.delete(e),this.renderModalIfExists(t)}}},a=class{constructor(e){(0,i.r)(this,e),this.onKeyDown=e=>{e&&"Escape"===e.code&&(this._activeElement=null)},this._activeElement=void 0,this._label=void 0,this._on=void 0,this._width="100%",this.state={_activeElement:null,_label:"",_width:"100%"}}componentDidRender(){this.hostElement&&(this.state._activeElement?l.openModal(this.hostElement,this.state._activeElement):l.closeModal(this.hostElement))}disconnectedCallback(){this.hostElement&&l.closeModal(this.hostElement)}render(){return(0,i.h)(i.H,{key:"823d0d36a88aa730a81d73a9007d6d5a7866a1c0",class:"kol-modal",ref:e=>{this.hostElement=e}},this.state._activeElement&&(0,i.h)("div",{key:"1489545d109e0a82397291dbb582259e73dab952",class:"overlay"},(0,i.h)("div",{key:"ccc4f3ce8d91b922e89c708df5087af76a203c8d",class:"modal",style:{width:this.state._width},"aria-label":this.state._label,"aria-modal":"true",role:"dialog",onKeyDown:this.onKeyDown,ref:e=>{e&&(e.setAttribute("tabindex","0"),setTimeout((()=>e.focus()),250))}},(0,i.h)("slot",{key:"77a31b65806fae411401e7ce9963eeb3a6bfc975"}))))}validateActiveElement(e){(0,o.w)(this,"_activeElement",(e=>"object"==typeof e||null===e),new Set(["HTMLElement","null"]),e,{defaultValue:null,hooks:{afterPatch:()=>{var e;null===this._activeElement&&(null===(e=this.state._on)||void 0===e?void 0:e.onClose)&&this.state._on.onClose()}}})}validateLabel(e){(0,o.v)(this,e,{required:!0})}validateOn(e){if("object"==typeof e&&null!==e){(0,o.f)("[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const n={};"function"!=typeof e.onClose&&!0!==e.onClose||(n.onClose=e.onClose),(0,o.k)(this,"_on",n)}}validateWidth(e){(0,o.A)(this,"_width",e,{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"]}}};a.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  .hidden {\n    display: none;\n    visibility: hidden;\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  .overlay {\n    background-color: rgba(0, 0, 0, 0.33);\n    display: flex;\n    height: 100%;\n    inset: 0;\n    position: fixed;\n    width: 100%;\n    z-index: 100;\n  }\n  .modal {\n    margin: auto;\n    max-height: 100%;\n    max-width: 100%;\n  }\n}"}}}]);

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],{4349:(n,e,t)=>{t.d(e,{i:()=>a,n:()=>l,r:()=>s});var i=t(1717);const o=()=>{let n=(0,i.d)().KoliBri;return void 0===n&&(n={},Object.defineProperty((0,i.d)(),"KoliBri",{value:n,writable:!1})),n},a=()=>{(()=>{const n=(0,i.g)().querySelector('meta[name="kolibri"]');if(n&&n.hasAttribute("content")){const e=n.getAttribute("content");"string"==typeof e&&((0,i.s)(e.includes("dev-mode=true")),(0,i.b)(e.includes("experimental-mode=true")),(0,i.c)(e.includes("color-contrast-analysis=true")))}})(),i.L.debug("\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | `--' |  |) /_  ,--.--. `--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n`--' `--´  `---´  `--' `--' `------´  `--'    `--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.15\n\t",{forceLog:!0})},s=()=>{!0!==o().adviceShown&&(Object.defineProperty(o(),"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 l=()=>Math.floor(16777215*Math.random()).toString(16);"test"===i.p&&(l=()=>"nonce")},1786:(n,e,t)=>{t.r(e),t.d(e,{kol_accordion:()=>r});var i=t(5364),o=t(1717),a=t(4349),s=t(5516),l=t(3202);(0,o.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,o.f)("[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.");const r=class{constructor(n){(0,i.r)(this,n),this.nonce=(0,a.n)(),this.catchRef=n=>{(0,o.h)(this.host,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}}render(){return(0,i.h)(i.H,{key:"375071dab3f67a8a9ea41166c5e5955a905ba04a",class:"kol-accordion"},(0,i.h)("div",{key:"44e8a90eed884c991797ea6e0e727777075d6d00",class:{accordion:!0,disabled:!0===this.state._disabled,open:!0===this.state._open}},(0,i.h)(l.b,{key:"6fdf9427c74afbcc932fa05c1840e8cb6b606b9a",_label:"",_level:this.state._level,class:"accordion-heading"},(0,i.h)(l.c,{key:"4e82eb30cd0ff1fef25262dc0e34a3408b0aaad6",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:"0835efe279a9deb62190997682ef0e8fe4a1edf2",class:"wrapper"},(0,i.h)("div",{key:"f7244e8b9807223dd80f0b261ec1e2b730f95e85",class:"animation-wrapper"},(0,i.h)("div",{key:"4ef5849701c39fe7f738cd34661e5c0fc9f29efc","aria-hidden":!1===this.state._open?"true":void 0,class:"content",id:this.nonce},(0,i.h)("slot",{key:"324bf4086448b8c5700c98d6fa7d830846e362af"}))))))}validateDisabled(n){(0,o.i)(this,n)}validateLabel(n){(0,o.v)(this,n,{required:!0})}validateLevel(n){(0,s.w)(this,n)}validateOn(n){"object"==typeof n&&null!==n&&"function"==typeof n.onClick&&(0,o.k)(this,"_on",n)}validateOpen(n){(0,o.l)(this,n)}componentWillLoad(){this.validateDisabled(this._disabled),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}get host(){return(0,i.g)(this)}static get watchers(){return{_disabled:["validateDisabled"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}};r.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  .hidden {\n    display: none;\n    visibility: hidden;\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}"}},5516:(n,e,t)=>{t.d(e,{w:()=>o});var i=t(1717);const o=(n,e)=>{(0,i.w)(n,"_level",(n=>"number"==typeof n&&i.m.includes(n)),new Set([`Number {${i.m.join(", ")}`]),e,{defaultValue:1,required:!0})}}}]);