@public-ui/sample-react 2.1.0 → 2.1.1

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/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],{2416:(t,e,n)=>{n.d(e,{I:()=>d,a:()=>c,f:()=>h,v:()=>l});var i=n(3431),a=n(3801),o=n(1033);const s=t=>{if("object"==typeof t&&null!==t){if("string"==typeof t.label&&t.label.length>0)return t.disabled=!0===t.disabled,t.label=`${t.label}`.trim(),!1===(0,o.b)(t.label,3)&&!1===(0,o.c)(t.label)&&(0,a.a)(`Ein abweichendes Aria-Label (${t.label}) ist nicht barrierefrei. Ein abweichendes Aria-Label sollte aus mindestens drei lesbaren Zeichen bestehen.`),!Array.isArray(t.options)||void 0===t.options.find((t=>!1===s(t)));if("number"==typeof t.label)return!0}return!1},l=(t,e,n={})=>{(0,a.g)(t,"_options",s,e,void 0,n)},r=["horizontal","vertical"],h=(t,e,n="")=>{e.forEach(((e,i)=>{const a=`${n}-${i}`;"object"==typeof e&&null!==e&&"string"==typeof e.label&&e.label.length>0&&(Array.isArray(e.options)?h(t,e.options,a):t.set(a,e))}))};class d extends i.I{constructor(t,e,n){super(t,e,n),this.component=t}validateRequired(t){((t,e)=>{(0,a.b)(t,"_required",e)})(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateRequired(this.component._required)}}class c extends d{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(),h(this.keyOptionMap,n))},this.component=t}validateOrientation(t){(0,a.w)(this.component,"_orientation",(t=>"string"==typeof t&&r.includes(t)),new Set([`Orientation {${r.join(", ")}`]),t,{defaultValue:"vertical"})}validateOptions(t){((t,e,n={})=>{(0,a.g)(t,"_options",(t=>"object"==typeof t&&null!==t&&"string"==typeof t.label&&t.label.length>0),e,void 0,n)})(this.component,t,{hooks:{afterPatch:this.afterPatchOptions}})}validateValue(t){t=(0,a.m)(t),t=Array.isArray(t)?t[0]:t,(0,a.s)(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)}}},7343:(t,e,n)=>{n.d(e,{I:()=>r});var i=n(3431),a=n(9049),o=n(3801),s=n(2714);const l=(t,e)=>{const n=t;"object"==typeof n&&null!==n&&((0,s.i)(n.right,1)&&(n.right={icon:n.right}),(0,s.i)(n.left,1)&&(n.left={icon:n.left}),e.set("_icons",n))};class r extends i.I{constructor(t,e,n){super(t,e,n),this.component=t}validateIcon(t){this.validateIcons(t)}validateIcons(t){(0,o.o)(t,(()=>{try{t=(0,o.p)(t)}catch(t){}(0,o.w)(this.component,"_icons",(t=>"object"==typeof t&&null!==t&&((0,s.i)(t.left,1)||(0,a.i)(t.left)||(0,s.i)(t.right,1)||(0,a.i)(t.right))),new Set(["KoliBriHorizontalIcon"]),t,{hooks:{beforePatch:l},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons||this.component._icon)}}},9049:(t,e,n)=>{n.d(e,{i:()=>s,v:()=>l});var i=n(3801),a=n(2714);const o=(t,e,n)=>{(0,a.c)(n)?t[e]=n:(0,a.i)(n,1)&&(t[e]={icon:n})},s=t=>"object"==typeof t&&null!==t&&(void 0===t.style||(0,a.b)(t.style))&&(void 0===t.label||(0,a.i)(t.label))&&(0,a.i)(t.icon,1),l=(t,e,n={})=>{(0,i.o)(e,(()=>{var l;try{e=(0,i.p)(e)}catch(t){}(0,i.w)(t,"_icons",(t=>{const e="object"==typeof t&&null!==t&&0===Object.keys(t).length;return null===t||e||(0,a.i)(t,1)||"object"==typeof t&&null!==t&&((0,a.i)(t.left,1)||s(t.left)||(0,a.i)(t.right,1)||s(t.right)||(0,a.i)(t.top,1)||s(t.top)||(0,a.i)(t.bottom,1)||s(t.bottom))}),new Set(["KoliBriIcon"]),e,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(l=n.hooks)||void 0===l?void 0:l.afterPatch,beforePatch:(t,e,i,s)=>{var l,r;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.beforePatch)&&(null===(r=n.hooks)||void 0===r||r.beforePatch(t,e,i,s)),(t=>{var e,n,i;if(null===(e=t.nextState)||void 0===e?void 0:e.has("_icons")){const e=null===(n=t.nextState)||void 0===n?void 0:n.get("_icons");null===(i=t.nextState)||void 0===i||i.set("_icons",(t=>{let e={};return(0,a.i)(t,1)?e={left:{icon:t}}:"object"==typeof t&&null!==t&&(o(e,"top",t.top),o(e,"right",t.right),o(e,"bottom",t.bottom),o(e,"left",t.left)),e})(e))}})(i)}}}))}))}},1266:(t,e,n)=>{n.r(e),n.d(e,{kol_select:()=>f});var i=n(5364),a=n(7895),o=n(8445),s=n(3431),l=n(4226),r=n(7343),h=n(2416),d=n(9981),c=n(3801),p=n(2714),u=n(3202);class v extends r.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,h.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,h.v)(this.component,t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(t){(0,c.b)(this.component,"_multiple",t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(t){(0,c.b)(this.component,"_required",t)}validateRows(t){(0,d.v)(this.component,t)}validateValue(t){(0,c.g)(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(p.S)}))}},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 b=(t,e)=>Array.isArray(t)&&t.includes(e),f=class{getValue(){return t=this,null,e=function*(){return this._value},new Promise(((n,i)=>{var a=t=>{try{s(e.next(t))}catch(t){i(t)}},o=t=>{try{s(e.throw(t))}catch(t){i(t)}},s=t=>t.done?n(t.value):Promise.resolve(t.value).then(a,o);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 a=`${e}-${n}`;return Array.isArray(t.options)?this.renderOptgroup(t,a):(0,i.h)("option",{disabled:t.disabled,key:a,selected:b(this.state._value,t.value),value:a},t.label)})))}render(){const{ariaDescribedBy:t}=(0,s.g)(this.state),e=(0,p.s)(this.state._label);return(0,i.h)(i.H,{key:"281965cb420409ea118d2a8b70f5cd08d9d9bd00",class:{"kol-select":!0,"has-value":this.state._hasValue}},(0,i.h)(u.l,{key:"d64734967e6f8c8670b4fce43656c0ed6e968067",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:"3d6e5e1d5078fcc8b887a31a6d830f11c9ba7191",slot:"label"},e?(0,i.h)("slot",{name:"expert"}):"string"==typeof this.state._accessKey?(0,i.h)(i.F,null,(0,i.h)(l.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:"018c2855120bc9774e561195cd73add25131b756",slot:"input"},(0,i.h)("select",Object.assign({key:"017a457ddff0db9a6d9e0ee432693705be666ea4",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:b(this.state._value,t.value),value:n},t.label)}))))))}constructor(t){(0,i.r)(this,t),this.catchRef=t=>{this.ref=t,(0,p.a)(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 v(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,o.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,o.s)(t),(0,o.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"]}}};f.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}"}},9981:(t,e,n)=>{n.d(e,{v:()=>a});var i=n(3801);const a=(t,e)=>{(0,i.k)(t,"_rows",e,{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:(e,t,n)=>{n.r(t),n.d(t,{kol_modal:()=>d});var i=n(5364),o=n(4361),l=n(3801),a=n(1033);const s=new class{constructor(){this.lockedElements=new Map,this.modalStack=new Map}lockElement(e){const t=e.getAttribute("tabindex");(e instanceof HTMLAnchorElement||e instanceof HTMLButtonElement||e instanceof HTMLInputElement||e instanceof HTMLSelectElement||e instanceof HTMLTextAreaElement||"string"==typeof t||void 0!==e.dataset.kolModal)&&("string"==typeof t?this.lockedElements.set(e,{tabIndex:t}):this.lockedElements.set(e,{}),e.setAttribute("tabindex","-1"),e.setAttribute("aria-hidden","true"),e.style.userSelect="none")}unlockElement(e,t){"string"==typeof e.tabIndex?t.setAttribute("tabindex",e.tabIndex):t.removeAttribute("tabindex"),t.removeAttribute("aria-hidden"),t.style.userSelect="unset",this.lockedElements.delete(t)}unlockLockedElements(e){e.forEach(this.unlockElement.bind(this))}lockFocus(e,t){try{if(e!==t&&(e instanceof HTMLElement||e instanceof ShadowRoot)){e instanceof HTMLElement&&(this.lockElement(e),this.lockFocus(e.shadowRoot,t));for(let n=0;n<e.children.length;n++)this.lockFocus(e.children[n],t)}}catch(e){}}renderModalIfExists(e){if(e instanceof HTMLElement){this.lockedElements.has(e)&&this.unlockElement(this.lockedElements.get(e),e);const t=setTimeout((()=>{clearTimeout(t),e.focus()}),500)}if(this.unlockLockedElements(this.lockedElements),this.modalStack.size>0){const e=Array.from(this.modalStack.keys()),t=e[e.length-1];this.modalStack.forEach(((e,n)=>{n.style.display=t===n?"inline":"none"})),(0,o.g)().body.style.maxHeight="100vh",(0,o.g)().body.style.overflow="hidden",this.lockFocus((0,o.g)().body,t)}else(0,o.g)().body.style.maxHeight="unset",(0,o.g)().body.style.overflow="unset"}openModal(e,t){e instanceof HTMLElement==0?o.L.warn("[KolModalService] Die DOM-Referenz des Modals ist nicht valide."):(this.modalStack.set(e,{activeElement:t}),this.renderModalIfExists())}closeModal(e){var t;if(e instanceof HTMLElement==0)o.L.warn("[KolModalService] Die DOM-Referenz des Modals ist nicht valide.");else{const n=null===(t=this.modalStack.get(e))||void 0===t?void 0:t.activeElement;this.modalStack.delete(e),this.renderModalIfExists(n)}}},d=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?s.openModal(this.hostElement,this.state._activeElement):s.closeModal(this.hostElement))}disconnectedCallback(){this.hostElement&&s.closeModal(this.hostElement)}render(){return(0,i.h)(i.H,{key:"cdf90127b1e3a6494acc2cd6f9e70245f0e78327",class:"kol-modal",ref:e=>{this.hostElement=e}},this.state._activeElement&&(0,i.h)("div",{key:"786de2516f2d40b3d31fa8fd89e905bf4d05c35f",class:"overlay"},(0,i.h)("div",{key:"22425204eaa3a2a133c8ea8e272356d0ffcb4aee",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:"9762249853efc9159e664ff78bbb503fe7165d4e"}))))}validateActiveElement(e){(0,l.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,a.v)(this,e,{required:!0})}validateOn(e){if("object"==typeof e&&null!==e){(0,l.f)("[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const t={};"function"!=typeof e.onClose&&!0!==e.onClose||(t.onClose=e.onClose),(0,l.s)(this,"_on",t)}}validateWidth(e){(0,l.i)(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"]}}};d.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}"}},1033:(e,t,n)=>{n.d(t,{a:()=>c,b:()=>s,c:()=>d,h:()=>o,v:()=>h});var i=n(3801);const o=[0,1,2,3,4,5,6],l=/[a-zA-Z0-9äöüÄÖÜß]/g,a=/^\d+$/;function s(e,t=1){return function(e){var t;return"string"==typeof e&&(null===(t=e.match(l))||void 0===t?void 0:t.length)||0}(e)>=t}function d(e){return a.test(e)}const r=new Set(["string"]),h=(e,t,n={})=>{(0,i.w)(e,"_label",(e=>"string"==typeof e),r,t,function(e){var t;return Object.assign(Object.assign({},e),{hooks:{afterPatch:(t,n,o,l)=>{var a,r;"function"==typeof(null===(a=e.hooks)||void 0===a?void 0:a.afterPatch)&&(null===(r=e.hooks)||void 0===r||r.afterPatch(t,n,o,l)),"string"==typeof t&&!1===s(t,3)&&!1===d(t)&&(0,i.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,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(t=e.hooks)||void 0===t?void 0:t.beforePatch}})}(n))},c=h}}]);

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],{7895:(n,e,t)=>{t.d(e,{i:()=>s,n:()=>r,r:()=>l});var i=t(4361),o=t(2714);const a=()=>{let n=(0,i.d)().KoliBri;return void 0===n&&(n={},Object.defineProperty((0,i.d)(),"KoliBri",{value:n,writable:!1})),n},s=()=>{(()=>{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.1.0\n\t",{forceLog:!0})},l=()=>{!0!==a().adviceShown&&(Object.defineProperty(a(),"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 r=()=>Math.floor(16777215*Math.random()).toString(16);"test"===o.p&&(r=()=>"nonce")},8888:(n,e,t)=>{t.d(e,{v:()=>o});var i=t(3801);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:()=>p});var i=t(5364),o=t(7895),a=t(3504),s=t(3202),l=t(3801),r=t(2714),d=t(8888),c=t(4444),h=t(1033);(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 p=class{constructor(n){(0,i.r)(this,n),this.nonce=(0,o.n)(),this.catchRef=n=>{(0,r.a)(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:"f1672f2cf8b9aa85b1f63ab68d00300b74638dd8",class:"kol-accordion"},(0,i.h)("div",{key:"e80bb532a6f148e9608b9d5b4eca382cf8c01e8d",class:{accordion:!0,disabled:!0===this.state._disabled,open:!0===this.state._open}},(0,i.h)(s.b,{key:"e221fc0ccd86504a3e491a8e32c55da5fa76a365",_label:"",_level:this.state._level,class:"accordion-heading"},(0,i.h)(s.c,{key:"f65af86aab71ff029bba8108495477d7be05c2f3",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:"5435d015a21707724c7180dbb96e7a0af30f9d42",class:"wrapper"},(0,i.h)("div",{key:"5a9958a91c49d8b807627f7029ad975e52c6e1ea",class:"animation-wrapper"},(0,i.h)("div",{key:"367a024dca25373063df9ec0e679161ad26bffb8","aria-hidden":!1===this.state._open?"true":void 0,class:"content",id:this.nonce},(0,i.h)("slot",{key:"dfbbf47f20297d5f5052d7df8f74bd659ce054fd"}))))))}validateDisabled(n){(0,d.v)(this,n)}validateLabel(n){(0,h.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,c.v)(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"]}}};p.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}"}},1033:(n,e,t)=>{t.d(e,{a:()=>h,b:()=>l,c:()=>r,h:()=>o,v:()=>c});var i=t(3801);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},4444:(n,e,t)=>{t.d(e,{v:()=>o});var i=t(3801);const o=(n,e,t)=>{(0,i.b)(n,"_open",e,t)}},3504:(n,e,t)=>{t.d(e,{w:()=>a});var i=t(1033),o=t(3801);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],{5921:(e,t,a)=>{a.d(t,{t:()=>c});var i=a(8597),n=a(2714);const o={error:"Fehler",warning:"Warnung",info:"Hinweis",success:"Erfolg",message:"Nachricht",close:"Schließen","form-description":"Formular-Felder, die mit einem Sternchen (*) gekennzeichnet sind, sind Pflichtangaben.",of:"von",characters:"Zeichen",new:"Neu","no-entries":"Es sind keine Einträge vorhanden.","change-order":"Sortierung von {{colLabel}} ändern","action-running":"Aktion wird ausgeführt...","action-done":"Aktion abgeschlossen",pagination:"Paginierung","page-first":"Direkt zur ersten Seite","page-back":"Eine Seite zurück","page-next":"Eine Seite weiter","page-last":"Direkt zur letzten Seite","entries-per-site":"Einträge pro Seite",page:"Seite","page-current":"Seite {{page}}","page-selected":"Seite {{page}} ist ausgewählt","page-per-site":"{{entries}} Einträge pro Seite","nav-maximize":"Navigation maximieren","nav-minimize":"Navigation minimieren","logo-description":"Logo {{orgShort}}. Bundesadler mit Flaggenstab und Schriftzug {{orgLong}}","open-link-in-tab":"Öffnet in neuem Tab.","kolibri-logo":"Logo von KoliBri","table-pagination-label":"Paginierung für die Tabelle {{label}}","avatar-alt":"Avatar von {{name}}","split-button-dropdown-label-open":"Optionen anzeigen","split-button-dropdown-label-close":"Optionen schließen","toast-close-all":"Alle schließen","error-list":"Fehlerliste","error-list-message":"Bitte korrigieren Sie folgende Fehler:",version:"Versionsnummer","table-visible-range":"Einträge {{start}} bis {{end}} von {{total}}"},r={error:"Error",warning:"Warning",info:"Note",success:"Success",message:"Message",close:"Close","form-description":"Form fields marked with an asterisk (*) are mandatory.",of:"of",characters:"characters",new:"New","no-entries":"No entries available.","change-order":"Change order of {{colLabel}}","action-running":"Action is running...","action-done":"Action done",pagination:"Pagination","page-first":"Directly to the first page","page-back":"One page back","page-next":"One page further","page-last":"Directly to the last page","entries-per-site":"Entries per page",page:"Page","page-current":"Page {{page}}","page-selected":"Page {{page}} is selected","page-per-site":"{{entries}} entries per page","nav-maximize":"Maximize navigation","nav-minimize":"Minimize navigation","logo-description":"Logo {{orgShort}}. Federal eagle with flag staff and lettering {{orgLong}}","open-link-in-tab":"Opens in new tab.","kolibri-logo":"KoliBri logo","table-pagination-label":"Pagination for table {{label}}","avatar-alt":"Avatar of {{name}}","split-button-dropdown-label-open":"Show options","split-button-dropdown-label-close":"Hide options","toast-close-all":"Close all","error-list":"Error list","error-list-message":"Please correct the following errors",version:"Version number","table-visible-range":"Entries {{start}} to {{end}} of {{total}}"},l=e=>Object.keys(e).reduce(((t,a)=>(t[`kol-${a}`]=e[a],t)),{}),s=new Set([e=>e("en",l(r)),e=>e("de",l(o))]);let c=(e,t)=>{const a=(0,i.g)();let n=a.translate(e,t);return n===e&&(a.addTranslations(s),n=a.translate(e,t)),n};"test"===n.p&&(c=e=>e)},1832:(e,t,a)=>{a.r(t),a.d(t,{kol_table_stateless_wc:()=>c});var i=a(5364),n=a(3202),o=a(5921),r=a(3801),l=a(5612),s=a(1033);const c=class{constructor(e){(0,i.r)(this,e),this.horizontal=!0,this.cellsToRenderTimeouts=new Map,this.renderTableRow=(e,t)=>(0,i.h)("tr",{key:`tbody-${t}`},e.map(((e,a)=>this.renderTableCell(e,t,a)))),this.renderTableCell=(e,t,a)=>!1===e.asTd?this.renderHeadingCell(e,t,a):(0,i.h)("td",{key:`tbody-${t}-${a}-${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.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}validateData(e){(0,l.v)(this,e)}validateDataFoot(e){(0,l.a)(this,e)}validateHeaderCells(e){((e,t)=>{(0,r.q)(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,s.v)(this,e,{required:!0})}validateMinWidth(e){(0,r.i)(this,"_minWidth",e,{defaultValue:void 0})}validateOn(e){((e,t)=>{(0,r.w)(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["TableCallbacksPropType {Events.onSort}"]),t)})(this,e)}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)}cellRender(e,t){t&&(clearTimeout(this.cellsToRenderTimeouts.get(t)),this.cellsToRenderTimeouts.set(t,setTimeout((()=>{if("function"==typeof e.render){const a=e.render(t,e,e.data,this.state._data);"string"==typeof a&&(t.textContent=a)}}))))}getNumberOfCols(e,t){let a=0;return e.forEach((e=>{let t=0;e.forEach((e=>{var a;return t+=null!==(a=e.colSpan)&&void 0!==a?a:1})),a<t&&(a=t)})),0===a&&(a=t.length),a}getNumberOfRows(e,t){var a;let i=0;return e.forEach((e=>{let t=0;e.forEach((e=>{var a;return t+=null!==(a=e.rowSpan)&&void 0!==a?a:1})),i<t&&(i=t)})),0===i?i=t.length:i-=(null===(a=this.state._dataFoot)||void 0===a?void 0:a.length)||0,i}filterHeaderKeys(e){const t=[];return e.forEach((e=>{e.forEach((e=>{"string"==typeof e.key&&t.push(e)}))})),t}getPrimaryHeader(e){var t,a;let i=this.filterHeaderKeys(null!==(t=e.horizontal)&&void 0!==t?t:[]);return this.horizontal=!0,0===i.length&&(i=this.filterHeaderKeys(null!==(a=e.vertical)&&void 0!==a?a:[]),i.length>0&&(this.horizontal=!1)),i}createDataField(e,t,a){var i;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 n=this.getPrimaryHeader(t),r=this.getNumberOfCols(t.horizontal,e);let l=this.getNumberOfRows(t.vertical,e),s=0;a&&(s=l,l+=(null===(i=this.state._dataFoot)||void 0===i?void 0:i.length)||0);const c=[],d=[],h=[];t.vertical.forEach(((e,t)=>{d[t]=0,h[t]=[]}));for(let i=s;i<l;i++){const o=[];t.vertical.forEach(((e,t)=>{let a=0;if(h[t].forEach((e=>a+=e)),a<=i){const n=e[i-a+d[t]];if("object"==typeof n){o.push(Object.assign(Object.assign({},n),{asTd:!1,data:{}}));let e=1;if("number"==typeof n.rowSpan&&n.rowSpan>1&&(e=n.rowSpan),h[t].push(e),"number"==typeof n.colSpan&&n.colSpan>1)for(let a=1;a<n.colSpan;a++)h[t+a].push(e);d[t]++}}}));for(let t=0;t<r;t++)if(!0===this.horizontal){const r=a&&this.state._dataFoot?this.state._dataFoot[i-s]:e[i];"object"==typeof n[t]&&null!==n[t]&&"string"==typeof n[t].key&&"object"==typeof r&&null!==r&&o.push(Object.assign(Object.assign({},n[t]),{colSpan:void 0,data:r,label:r[n[t].key],rowSpan:void 0}))}else"object"==typeof n[i]&&null!==n[i]&&"string"==typeof n[i].key&&"object"==typeof e[t]&&null!==e[t]&&o.push(Object.assign(Object.assign({},n[i]),{colSpan:void 0,data:e[t],label:e[t][n[i].key],rowSpan:void 0}));c.push(o)}if(0===e.length){let e=0,a=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=>{a+=e.rowSpan||1})));const i={colSpan:e,label:(0,o.t)("kol-no-entries"),render:void 0,rowSpan:Math.max(a,1)};0===c.length?c.push([i]):c[0].push(i)}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)}renderHeadingCell(e,t,a){let o,r="codicon codicon-fold";if(e.sortDirection)switch(e.sortDirection){case"ASC":r="codicon codicon-chevron-up",o="ascending";break;case"DESC":r="codicon codicon-chevron-down",o="descending"}return(0,i.h)("th",{key:`${t}-${a}-${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":o,"data-sort":`sort-${e.sortDirection}`},e.sortDirection?(0,i.h)(n.c,{class:"table-sort-button",exportparts:"icon",_icons:{right:r},_label:e.label,_on:{onClick:t=>{var a;"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onSort)&&e.key&&e.sortDirection&&this.state._on.onSort(t,{key:e.key,currentSortDirection:e.sortDirection})}}}):e.label)}renderFoot(){if(!this.state._dataFoot||0===this.state._dataFoot.length)return"";const e=this.createDataField(this.state._dataFoot,this.state._headerCells,!0);return(0,i.h)("tfoot",null,e.map(this.renderTableRow))}render(){const e=this.createDataField(this.state._data,this.state._headerCells);return(0,i.h)(i.H,{key:"c9b39f96474ce8823023d795cc6e0045a6274f6f",class:"kol-table-stateless"},(0,i.h)("div",{key:"74701c4df7b4893d3aaa3b0076833bf4387d81bf",ref:e=>this.tableDivElement=e,class:"table",tabindex:this.tableDivElementHasScrollbar?"-1":void 0},(0,i.h)("table",{key:"3d2c8cf625a7691d27b8bef847eea6b78c189fa3",style:{minWidth:this.state._minWidth}},(0,i.h)("div",{key:"6e2102c988e7d10aeef90b98d0e79c98f4bd0ccf",class:"focus-element",tabindex:this.tableDivElementHasScrollbar?"0":void 0,"aria-describedby":"caption"}," "),(0,i.h)("caption",{key:"12d75c33f91621cf233473d4e7c3cf615e4fa0e9",id:"caption"},this.state._label),Array.isArray(this.state._headerCells.horizontal)&&(0,i.h)("thead",{key:"3cd7592b87e9169a1f073d38dbf1cd304500bd15"},this.state._headerCells.horizontal.map(((e,t)=>(0,i.h)("tr",{key:`thead-${t}`},e.map(((e,a)=>!0===e.asTd?(0,i.h)("td",{key:`thead-${t}-${a}-${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,a))))))),(0,i.h)("tbody",{key:"3b77b39bdaab0c831a45d23355dd265028f6dbb1"},e.map(this.renderTableRow)),this.renderFoot())))}static get watchers(){return{_data:["validateData"],_dataFoot:["validateDataFoot"],_headerCells:["validateHeaderCells"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_on:["validateOn"]}}}},1033:(e,t,a)=>{a.d(t,{a:()=>h,b:()=>l,c:()=>s,h:()=>n,v:()=>d});var i=a(3801);const n=[0,1,2,3,4,5,6],o=/[a-zA-Z0-9äöüÄÖÜß]/g,r=/^\d+$/;function l(e,t=1){return function(e){var t;return"string"==typeof e&&(null===(t=e.match(o))||void 0===t?void 0:t.length)||0}(e)>=t}function s(e){return r.test(e)}const c=new Set(["string"]),d=(e,t,a={})=>{(0,i.w)(e,"_label",(e=>"string"==typeof e),c,t,function(e){var t;return Object.assign(Object.assign({},e),{hooks:{afterPatch:(t,a,n,o)=>{var r,c;"function"==typeof(null===(r=e.hooks)||void 0===r?void 0:r.afterPatch)&&(null===(c=e.hooks)||void 0===c||c.afterPatch(t,a,n,o)),"string"==typeof t&&!1===l(t,3)&&!1===s(t)&&(0,i.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,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(t=e.hooks)||void 0===t?void 0:t.beforePatch}})}(a))},h=d},5612:(e,t,a)=>{a.d(t,{a:()=>o,v:()=>n});var i=a(3801);const n=(e,t,a)=>{(0,i.q)(t,(()=>{(0,i.o)(t,(()=>{void 0===t&&(t=[]);try{t=(0,i.p)(t)}catch(e){}Array.isArray(t)&&t.every((e=>"object"==typeof e&&null!==e))&&(0,i.s)(e,"_data",t,a)}))}))},o=(e,t,a)=>{(0,i.q)(t,(()=>{(0,i.o)(t,(()=>{void 0===t&&(t=[]);try{t=(0,i.p)(t)}catch(e){}Array.isArray(t)&&t.every((e=>"object"==typeof e&&null!==e))&&(0,i.s)(e,"_dataFoot",t,a)}))}))}}}]);

package/dist/2441.js

@@ -1,2 +0,0 @@
-/*! For license information please see 2441.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[2441],{3352:(t,e,a)=>{a.d(e,{v:()=>s});var i=a(3801);const s=(t,e)=>{(0,i.i)(t,"_accessKey",e)}},8137:(t,e,a)=>{a.d(e,{a:()=>l,v:()=>s});var i=a(3801);const s=(t,e,a)=>{(0,i.w)(t,e,(t=>"string"==typeof t&&o.includes(t)),new Set(o),a,{defaultValue:"top"})},o=["left","right","top","bottom"],l=(t,e)=>{s(t,"_align",e)}},1366:(t,e,a)=>{a.d(e,{v:()=>s});var i=a(3801);const s=(t,e)=>{(0,i.i)(t,"_role",e)}},1143:(t,e,a)=>{a.d(e,{A:()=>o});var i=a(4361),s=a(3801);class o{constructor(t,e,a){var o,l,n,r;if(this.experimentalMode=(0,i.a)(),this.setFormAssociatedValue=t=>{var e;const a=null===(e=this.formAssociated)||void 0===e?void 0:e.getAttribute("name");null!==a&&""!==a||(0,s.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(a),this.type=e,this.experimentalMode&&("KOL-BUTTON"===(r=null===(o=this.host)||void 0===o?void 0:o.tagName)||"KOL-INPUT-CHECKBOX"===r||"KOL-INPUT-COLOR"===r||"KOL-INPUT-DATE"===r||"KOL-INPUT-EMAIL"===r||"KOL-INPUT-FILE"===r||"KOL-INPUT-NUMBER"===r||"KOL-INPUT-PASSWORD"===r||"KOL-INPUT-RADIO"===r||"KOL-INPUT-RANGE"===r||"KOL-INPUT-TEXT"===r||"KOL-SELECT"===r||"KOL-TEXTAREA"===r)){switch(null===(l=this.host)||void 0===l||l.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===(n=this.host)||void 0===n||n.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,a){if(this.experimentalMode)try{if("boolean"!=typeof(a="object"==typeof a&&null!==a?JSON.stringify(a):a)&&"number"!=typeof a&&"string"!=typeof a)throw new Error("Invalid value type: "+typeof a);null==e||e.setAttribute(t,`${a}`)}catch(a){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,s.l)(`The form field raw value is not able to stringify! ${t}`),""}}syncValue(t,e,a){if(a)switch(this.type){case"file":a.files=t;break;case"select":a.querySelectorAll("option").forEach((t=>{a.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",""),a.appendChild(t)}}));break;default:"string"==typeof e?(a.setAttribute("value",e),a.value=e):(a.removeAttribute("value"),a.value="")}}validateName(t){((t,e,a)=>{(0,s.i)(t,"_name",e,a)})(this.component,t,{hooks:{afterPatch:()=>{this.setAttribute("name",this.formAssociated,this.component.state._name)}}}),void 0===t&&(0,s.j)("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)}}},4052:(t,e,a)=>{a.d(e,{a:()=>l,p:()=>n});var i=a(3801),s=a(4361);const o=t=>{for((0,s.a)()&&((0,i.j)("↓ Search form element start."),console.log(t));t instanceof HTMLElement&&"FORM"!==t.tagName&&"KOL-FORM"!==t.tagName;){try{t=t.parentElement instanceof HTMLElement?t.parentElement:t.parentNode instanceof ShadowRoot?t.parentNode.host:null}catch(t){}(0,s.a)()&&(console.log(t),(0,i.j)("↑ Search form element finished."))}return t},l=(t={})=>{var e,a;const s=o(t.form);if(s instanceof HTMLElement){const t=new Event("reset",{bubbles:!0,cancelable:!0});if("FORM"===s.tagName)(0,i.n)(t,s),s.dispatchEvent(t);else if("KOL-FORM"===s.tagName){(0,i.n)(t,i.K.querySelector("form",s));const o=s;"function"==typeof(null===(e=o._on)||void 0===e?void 0:e.onReset)&&(null===(a=o._on)||void 0===a||a.onReset(t))}}},n=(t={})=>{const e=o(t.form);if(e instanceof HTMLElement){const t=new SubmitEvent("submit",{bubbles:!0,cancelable:!0,submitter:e});if("FORM"===e.tagName)(0,s.a)()&&!1===e.noValidate&&(0,i.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 e.requestSubmit?e.requestSubmit():((0,i.n)(t,e),e.dispatchEvent(t))}));else if("KOL-FORM"===e.tagName){(0,i.n)(t,i.K.querySelector("form",e));const a=e;setTimeout((()=>{var e,i;"function"==typeof(null===(e=a._on)||void 0===e?void 0:e.onSubmit)&&(null===(i=a._on)||void 0===i||i.onSubmit(t))}))}}}},5518:(t,e,a)=>{a.d(e,{v:()=>s});var i=a(3801);const s=(t,e)=>{(0,i.i)(t,"_customClass",e,{defaultValue:void 0})}},8888:(t,e,a)=>{a.d(e,{v:()=>s});var i=a(3801);const s=(t,e)=>{(0,i.b)(t,"_disabled",e,{hooks:{afterPatch:t=>{!0===t&&(0,i.c)()}}})}},8445:(t,e,a)=>{function i(t){t.stopImmediatePropagation(),t.stopPropagation()}function s(t,e,a){e&&function(t,e,a){const i=t.dispatchEvent(function(t,e){return new CustomEvent(`kol-${t}`,{bubbles:!0,cancelable:!0,composed:!0,detail:e})}(e,a))}(e,t,a)}function o(t){t.preventDefault(),i(t)}a.d(e,{p:()=>o,s:()=>i,t:()=>s})},9612:(t,e,a)=>{a.d(e,{v:()=>s});var i=a(3801);const s=(t,e,a={})=>{(0,i.b)(t,"_hideLabel",e,a)}},9049:(t,e,a)=>{a.d(e,{i:()=>l,v:()=>n});var i=a(3801),s=a(2714);const o=(t,e,a)=>{(0,s.c)(a)?t[e]=a:(0,s.i)(a,1)&&(t[e]={icon:a})},l=t=>"object"==typeof t&&null!==t&&(void 0===t.style||(0,s.b)(t.style))&&(void 0===t.label||(0,s.i)(t.label))&&(0,s.i)(t.icon,1),n=(t,e,a={})=>{(0,i.o)(e,(()=>{var n;try{e=(0,i.p)(e)}catch(t){}(0,i.w)(t,"_icons",(t=>{const e="object"==typeof t&&null!==t&&0===Object.keys(t).length;return null===t||e||(0,s.i)(t,1)||"object"==typeof t&&null!==t&&((0,s.i)(t.left,1)||l(t.left)||(0,s.i)(t.right,1)||l(t.right)||(0,s.i)(t.top,1)||l(t.top)||(0,s.i)(t.bottom,1)||l(t.bottom))}),new Set(["KoliBriIcon"]),e,Object.assign(Object.assign({},a),{defaultValue:{},hooks:{afterPatch:null===(n=a.hooks)||void 0===n?void 0:n.afterPatch,beforePatch:(t,e,i,l)=>{var n,r;"function"==typeof(null===(n=a.hooks)||void 0===n?void 0:n.beforePatch)&&(null===(r=a.hooks)||void 0===r||r.beforePatch(t,e,i,l)),(t=>{var e,a,i;if(null===(e=t.nextState)||void 0===e?void 0:e.has("_icons")){const e=null===(a=t.nextState)||void 0===a?void 0:a.get("_icons");null===(i=t.nextState)||void 0===i||i.set("_icons",(t=>{let e={};return(0,s.i)(t,1)?e={left:{icon:t}}:"object"==typeof t&&null!==t&&(o(e,"top",t.top),o(e,"right",t.right),o(e,"bottom",t.bottom),o(e,"left",t.left)),e})(e))}})(i)}}}))}))}},2441:(t,e,a)=>{a.r(e),a.d(e,{kol_button_wc:()=>A});var i=a(5364),s=a(8445),o=a(4052),l=a(1143),n=a(3202),r=a(3801),d=a(3352),c=a(9049),h=a(1366),u=a(2714),v=a(5518),f=a(8888),b=a(9612),_=a(1033),m=a(6173),p=a(1791);const y=["button","reset","submit"],g=["primary","secondary","normal","tertiary","danger","ghost","custom"],A=class{render(){const t=(0,u.s)(this.state._label);return(0,i.h)(i.H,{key:"c0d16e55ccda6586451460ed73035afc5094a20c",class:"kol-button-wc"},(0,i.h)("button",Object.assign({key:"6ee3c6aa4c7eb2870b69369ae303b344f9243615",ref:this.catchRef,accessKey:this.state._accessKey||void 0,"aria-controls":this.state._ariaControls,"aria-expanded":(0,r.v)(this.state._ariaExpanded),"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-selected":(0,r.x)(this.state._ariaSelected),class:{button:!0,disabled:!0===this.state._disabled,[this.state._variant]:"custom"!==this.state._variant,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0,"hide-label":!0===this.state._hideLabel},disabled:this.state._disabled,id:this.state._id,name:this.state._name},this.state._on,{onClick:this.onClick,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type}),(0,i.h)(n.f,{key:"89e898b52482ab8f2b991ee630d3c01eba2c5673",class:"button-inner",_accessKey:this.state._accessKey,_icons:this.state._icons,_hideLabel:this.state._hideLabel,_label:t?"":this.state._label},(0,i.h)("slot",{key:"c7f11890216223942c6adea500e5904409877564",name:"expert",slot:"expert"}))),(0,i.h)(n.a,{key:"31d7ab91f54a8046442ffdb435f55cb4681d1b32","aria-hidden":"true",hidden:t||!this.state._hideLabel,_accessKey:this._accessKey,_align:this.state._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}))}constructor(t){(0,i.r)(this,t),this.catchRef=t=>{this.ref=t,(0,u.a)(this.host,this.ref)},this.onClick=t=>{var e,a;"submit"===this.state._type?(0,o.p)({form:this.host,ref:this.ref}):"reset"===this.state._type?(0,o.a)({form:this.host,ref:this.ref}):((0,s.s)(t),(0,s.t)("click",this.host,this.state._value),this.controller.setFormAssociatedValue(this.state._value),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onClick)&&((0,r.n)(t,this.ref),null===(a=this.state._on)||void 0===a||a.onClick(t,this.state._value)))},this._accessKey=void 0,this._ariaControls=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_icons:{},_label:"",_on:{},_type:"button",_variant:"normal"},this.controller=new l.A(this,"button",this.host)}validateAccessKey(t){(0,d.v)(this,t)}validateAriaControls(t){((t,e)=>{(0,r.i)(t,"_ariaControls",e)})(this,t)}validateAriaExpanded(t){((t,e)=>{(0,r.b)(t,"_ariaExpanded",e)})(this,t)}validateAriaSelected(t){((t,e)=>{(0,r.b)(t,"_ariaSelected",e)})(this,t)}validateCustomClass(t){(0,v.v)(this,t)}validateDisabled(t){(0,f.v)(this,t)}validateHideLabel(t){(0,b.v)(this,t)}validateIcons(t){(0,c.v)(this,t)}validateId(t){(0,r.i)(this,"_id",t)}validateLabel(t){(0,_.a)(this,t,{required:!0})}validateName(t){this.controller.validateName(t)}validateOn(t){((t,e)=>{(0,r.w)(t,"_on",(t=>"object"==typeof t&&null!==t),new Set(["ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}"]),e)})(this,t)}validateRole(t){(0,h.v)(this,t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){(0,m.v)(this,t)}validateTooltipAlign(t){(0,p.v)(this,t)}validateType(t){((t,e)=>{(0,r.w)(t,"_type",(t=>"string"==typeof t&&y.includes(t)),new Set([`KoliBriButtonType {${y.join(", ")}`]),e)})(this,t)}validateValue(t){(0,r.s)(this,"_value",t),this.controller.setFormAssociatedValue(this.state._value)}validateVariant(t){((t,e)=>{(0,r.w)(t,"_variant",(t=>"string"==typeof t&&g.includes(t)),new Set([`KoliBriButtonVariant {${g.join(", ")}`]),e,{defaultValue:"normal"})})(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateHideLabel(this._hideLabel),this.validateIcons(this._icons),this.validateId(this._id),this.validateLabel(this._label),this.validateName(this._name),this.validateOn(this._on),this.validateRole(this._role),this.validateSyncValueBySelector(this._syncValueBySelector),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant)}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaExpanded:["validateAriaExpanded"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_role:["validateRole"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}}},1033:(t,e,a)=>{a.d(e,{a:()=>h,b:()=>n,c:()=>r,h:()=>s,v:()=>c});var i=a(3801);const s=[0,1,2,3,4,5,6],o=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function n(t,e=1){return function(t){var e;return"string"==typeof t&&(null===(e=t.match(o))||void 0===e?void 0:e.length)||0}(t)>=e}function r(t){return l.test(t)}const d=new Set(["string"]),c=(t,e,a={})=>{(0,i.w)(t,"_label",(t=>"string"==typeof t),d,e,function(t){var e;return Object.assign(Object.assign({},t),{hooks:{afterPatch:(e,a,s,o)=>{var l,d;"function"==typeof(null===(l=t.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(d=t.hooks)||void 0===d||d.afterPatch(e,a,s,o)),"string"==typeof e&&!1===n(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=t.hooks)||void 0===e?void 0:e.beforePatch}})}(a))},h=c},6173:(t,e,a)=>{a.d(e,{v:()=>o});var i=a(3801);const s={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")}}},o=(t,e)=>{(0,i.k)(t,"_tabIndex",e,s)}},1791:(t,e,a)=>{a.d(e,{v:()=>s});var i=a(8137);const s=(t,e)=>{(0,i.v)(t,"_tooltipAlign",e)}}}]);

package/dist/2462.js

@@ -1,2 +0,0 @@
-/*! For license information please see 2462.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[2462],{81:(n,e,t)=>{t.r(e),t.d(e,{kol_alert:()=>a});var i=t(5364),o=t(3202);const a=class{constructor(n){(0,i.r)(this,n),this._alert=!1,this._hasCloser=!1,this._label=void 0,this._level=1,this._on=void 0,this._type="default",this._variant="msg",this.state={_level:1}}render(){return(0,i.h)(i.H,{key:"4f87a50275ed8a213086458ce239ab24148b4e95",class:"kol-alert"},(0,i.h)(o.d,{key:"97764b041f739deb6fda2f01d31993131de5e6ab",_alert:this._alert,_hasCloser:this._hasCloser,_label:this._label,_level:this._level,_on:this._on,_type:this._type,_variant:this._variant},(0,i.h)("slot",{key:"3108fc83dd474231a55d3ffaf4bb8fae2ac7719d"})))}};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    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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}"}}}]);

package/dist/2605.js

@@ -1,2 +0,0 @@
-/*! For license information please see 2605.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[2605],{2605:(n,t,e)=>{e.r(t),e.d(t,{kol_table_stateless:()=>a});var i=e(5364),o=e(3202);const a=class{constructor(n){(0,i.r)(this,n),this._data=void 0,this._dataFoot=void 0,this._headerCells=void 0,this._label=void 0,this._minWidth=void 0,this._on=void 0}render(){return(0,i.h)(i.H,{key:"5a8bbdc836f6588ca1124b93d9214f772e28166c",class:"kol-table-stateless"},(0,i.h)(o.q,{key:"c3b088e32b37a9736925366d2fa03b8b5f8366e1",_data:this._data,_dataFoot:this._dataFoot,_headerCells:this._headerCells,_label:this._label,_minWidth:this._minWidth,_on:this._on}))}};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    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .table {\n    max-width: 100%;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  table {\n    width: 100%;\n  }\n  caption {\n    text-align: start;\n  }\n  .focus-element {\n    font-size: 0;\n  }\n  .focus-element:focus {\n    outline: 0 !important;\n  }\n  .table:has(.focus-element:focus) {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .table-sort-button .button {\n    color: inherit;\n  }\n  tbody th,\n  th.align-left {\n    text-align: left;\n  }\n  tbody th .table-sort-button .button-inner,\n  th.align-left .table-sort-button .button-inner {\n    justify-items: start;\n  }\n  th.align-center {\n    text-align: center;\n  }\n  th.align-center .table-sort-button .button-inner {\n    justify-items: center;\n  }\n  th.align-right {\n    text-align: right;\n  }\n  th.align-right .table-sort-button .button-inner {\n    justify-items: end;\n  }\n}"}}}]);

package/dist/2960.js

@@ -1,2 +0,0 @@
-/*! For license information please see 2960.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[2960],{5921:(e,t,i)=>{i.d(t,{t:()=>c});var r=i(8597),n=i(2714);const o={error:"Fehler",warning:"Warnung",info:"Hinweis",success:"Erfolg",message:"Nachricht",close:"Schließen","form-description":"Formular-Felder, die mit einem Sternchen (*) gekennzeichnet sind, sind Pflichtangaben.",of:"von",characters:"Zeichen",new:"Neu","no-entries":"Es sind keine Einträge vorhanden.","change-order":"Sortierung von {{colLabel}} ändern","action-running":"Aktion wird ausgeführt...","action-done":"Aktion abgeschlossen",pagination:"Paginierung","page-first":"Direkt zur ersten Seite","page-back":"Eine Seite zurück","page-next":"Eine Seite weiter","page-last":"Direkt zur letzten Seite","entries-per-site":"Einträge pro Seite",page:"Seite","page-current":"Seite {{page}}","page-selected":"Seite {{page}} ist ausgewählt","page-per-site":"{{entries}} Einträge pro Seite","nav-maximize":"Navigation maximieren","nav-minimize":"Navigation minimieren","logo-description":"Logo {{orgShort}}. Bundesadler mit Flaggenstab und Schriftzug {{orgLong}}","open-link-in-tab":"Öffnet in neuem Tab.","kolibri-logo":"Logo von KoliBri","table-pagination-label":"Paginierung für die Tabelle {{label}}","avatar-alt":"Avatar von {{name}}","split-button-dropdown-label-open":"Optionen anzeigen","split-button-dropdown-label-close":"Optionen schließen","toast-close-all":"Alle schließen","error-list":"Fehlerliste","error-list-message":"Bitte korrigieren Sie folgende Fehler:",version:"Versionsnummer","table-visible-range":"Einträge {{start}} bis {{end}} von {{total}}"},a={error:"Error",warning:"Warning",info:"Note",success:"Success",message:"Message",close:"Close","form-description":"Form fields marked with an asterisk (*) are mandatory.",of:"of",characters:"characters",new:"New","no-entries":"No entries available.","change-order":"Change order of {{colLabel}}","action-running":"Action is running...","action-done":"Action done",pagination:"Pagination","page-first":"Directly to the first page","page-back":"One page back","page-next":"One page further","page-last":"Directly to the last page","entries-per-site":"Entries per page",page:"Page","page-current":"Page {{page}}","page-selected":"Page {{page}} is selected","page-per-site":"{{entries}} entries per page","nav-maximize":"Maximize navigation","nav-minimize":"Minimize navigation","logo-description":"Logo {{orgShort}}. Federal eagle with flag staff and lettering {{orgLong}}","open-link-in-tab":"Opens in new tab.","kolibri-logo":"KoliBri logo","table-pagination-label":"Pagination for table {{label}}","avatar-alt":"Avatar of {{name}}","split-button-dropdown-label-open":"Show options","split-button-dropdown-label-close":"Hide options","toast-close-all":"Close all","error-list":"Error list","error-list-message":"Please correct the following errors",version:"Version number","table-visible-range":"Entries {{start}} to {{end}} of {{total}}"},s=e=>Object.keys(e).reduce(((t,i)=>(t[`kol-${i}`]=e[i],t)),{}),l=new Set([e=>e("en",s(a)),e=>e("de",s(o))]);let c=(e,t)=>{const i=(0,r.g)();let n=i.translate(e,t);return n===e&&(i.addTranslations(l),n=i.translate(e,t)),n};"test"===n.p&&(c=e=>e)},2960:(e,t,i)=>{i.r(t),i.d(t,{kol_form:()=>s});var r=i(5364),n=i(5921),o=i(3202),a=i(3801);const s=class{constructor(e){(0,r.r)(this,e),this.onSubmit=e=>{var t,i;e.preventDefault(),e.stopPropagation(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onSubmit)&&(null===(i=this.state._on)||void 0===i||i.onSubmit(e))},this.onReset=e=>{var t,i;e.preventDefault(),e.stopPropagation(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onReset)&&(null===(i=this.state._on)||void 0===i||i.onReset(e))},this.handleLinkClick=e=>{var t;const i=null===(t=e.target)||void 0===t?void 0:t.href;if(i){const e=new URL(i),t=document.querySelector(e.hash);t&&"function"==typeof t.focus&&(t.scrollIntoView({behavior:"smooth"}),t.focus())}},this._on=void 0,this._requiredText=!0,this._errorList=void 0,this.state={}}render(){return(0,r.h)(r.H,{key:"c2f978944c0da89b0c1f721e48e62c20897c6e84",class:"kol-form"},this._errorList&&this._errorList.length>0&&(0,r.h)(o.k,{key:"89cc664c87a2aa777ff084d447f16cebf36d33ae",_type:"error"},(0,n.t)("kol-error-list-message"),(0,r.h)("nav",{key:"1720c956e40dd31ebbc4e97aef78f8e1f8c204ae","aria-label":(0,n.t)("kol-error-list")},(0,r.h)("ul",{key:"f99ca1869fdc217c7ebca978c2f92bf1467e19a7"},this._errorList.map(((e,t)=>(0,r.h)("li",{key:t},(0,r.h)(o.h,{_href:e.selector,_label:e.message,_on:{onClick:this.handleLinkClick},ref:e=>{0===t&&(this.errorListElement=e)}}))))))),(0,r.h)("form",{key:"9076849c5f027e66ca37da072ac15271b19ae464",method:"post",onSubmit:this.onSubmit,onReset:this.onReset,autoComplete:"off",noValidate:!0},!0===this.state._requiredText?(0,r.h)("p",null,(0,r.h)(o.j,null,(0,n.t)("kol-form-description"))):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?(0,r.h)("p",null,(0,r.h)(o.j,null,this.state._requiredText)):null,(0,r.h)("slot",{key:"c94ae6cfb941c2a73196cb77361fb74bcaff9d0f"})))}focusErrorList(){return e=this,null,t=function*(){return setTimeout((()=>{var e;this._errorList&&this._errorList.length>0&&(null===(e=this.errorListElement)||void 0===e||e.focus())}),300),Promise.resolve()},new Promise(((i,r)=>{var n=e=>{try{a(t.next(e))}catch(e){r(e)}},o=e=>{try{a(t.throw(e))}catch(e){r(e)}},a=e=>e.done?i(e.value):Promise.resolve(e.value).then(n,o);a((t=t.apply(e,null)).next())}));var e,t}validateOn(e){"object"==typeof e&&null!==e&&(this.state=Object.assign(Object.assign({},this.state),{_on:e}))}validateRequiredText(e){"boolean"==typeof e?(0,a.b)(this,"_requiredText",e):(0,a.i)(this,"_requiredText",e)}validateErrorList(e){((e,t)=>{(0,a.w)(e,"errorList",(e=>"object"==typeof e),new Set(["Object"]),t)})(this,e)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText),this.validateErrorList(this._errorList)}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"],_errorList:["validateErrorList"]}}}}}]);