@public-ui/sample-react 2.0.0-rc.10 → 2.0.0-rc.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.0.0-rc.10",
+  "version": "2.0.0-rc.11",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "dependencies": {
@@ -8,9 +8,9 @@
     "@leanup/stack-react": "1.3.48",
     "@leanup/stack-webpack": "1.3.48",
     "@public-oss/kolibri-themes": "0.0.3",
-    "@public-ui/components": "2.0.0-rc.10",
-    "@public-ui/react": "2.0.0-rc.10",
-    "@public-ui/themes": "2.0.0-rc.10",
+    "@public-ui/components": "2.0.0-rc.11",
+    "@public-ui/react": "2.0.0-rc.11",
+    "@public-ui/themes": "2.0.0-rc.11",
     "@types/node": "20.8.10",
     "@types/react": "18.2.36",
     "@types/react-dom": "18.2.14",

package/src/App.tsx

@@ -11,6 +11,7 @@ import { getTheme, getThemeName, setStorage, setTheme } from './shares/store';
 import { Sidebar } from './components/Sidebar';
 import { useLocation } from 'react-router';
 import { HideMenusContext } from './shares/HideMenusContext';
+import { useSetCurrentLocation } from './hooks/useSetCurrentLocation';
 
 setStorage(localStorage);
 
@@ -46,7 +47,9 @@ const getRouteTree = (routes: MyRoutes): ReturnType<typeof Route>[] => {
 							<div className="d-grid gap-4">
 								{THEME_OPTIONS.filter(
 									(theme) =>
-										['bmf', 'default', 'bzst', 'ecl-ec', 'ecl-eu', 'itzbund', 'mapz', 'zoll-v2', 'zoll-v3'].indexOf((theme as Option<Theme>).value) >= 0,
+										['bmf', 'default', 'bzst', 'bzst-v2', 'ecl-ec', 'ecl-eu', 'itzbund', 'mapz', 'zoll-v2', 'zoll-v3'].indexOf(
+											(theme as Option<Theme>).value,
+										) >= 0,
 								).map((theme) => (
 									<div className="d-grid gap-2" key={(theme as Option<Theme>).value} data-theme={(theme as Option<Theme>).value}>
 										<div className="mt-4">
@@ -107,6 +110,7 @@ export const App: FC = () => {
 	const hideMenus = searchParams.has('hideMenus');
 
 	setTheme(theme as Theme); // set for `getTheme` usages within the application
+	useSetCurrentLocation();
 
 	document.title = `KoliBri-Handout - ${getThemeName(getTheme())} | v${PackageJson.version}`;
 	document.body.setAttribute('class', theme);

package/src/components/avatar/basic.tsx

@@ -4,7 +4,9 @@ import React, { FC } from 'react';
 export const AvatarBasic: FC = () => (
 	<div className="flex flex-wrap gap-4">
 		<KolAvatar _src="https://www.w3schools.com/howto/img_avatar.png" _label="Elke Mustermann" />
-		<KolAvatar _label="Elke Mustermann" />
+
+		{/* intentional trailing space    👇 - it's supposed to be trimmed */}
+		<KolAvatar _label="Elke Mustermann " />
 		<KolAvatar _label="Marianne" />
 	</div>
 );

package/src/components/badge/button.tsx

@@ -15,11 +15,11 @@ const PROPS = {
 };
 
 export const BadgeButton: FC = () => (
-	<div className="d-flex gap-2">
+	<div className="flex gap-2">
 		<KolBadge {...PROPS}></KolBadge>
-		<KolBadge _color="#B22222" {...PROPS}></KolBadge>
-		<KolBadge _color="#4682B4" {...PROPS}></KolBadge>
-		<KolBadge _color="#228B22" {...PROPS}></KolBadge>
-		<KolBadge _color="#8B008B" {...PROPS}></KolBadge>
+		<KolBadge _color="#86ffc6" {...PROPS}></KolBadge>
+		<KolBadge _color="#06539e" {...PROPS}></KolBadge>
+		<KolBadge _color="#ae0000" {...PROPS}></KolBadge>
+		<KolBadge _color="#8b008b" {...PROPS}></KolBadge>
 	</div>
 );

package/src/components/handout/basic.tsx

@@ -83,7 +83,9 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 			{
 				key: 'dienstag',
 				label: 'Dienstag',
-				render: (el, data) => (el.innerHTML = `<kol-badge _color="#060" _label="${data.label}"></kol-badge>`),
+				render: (el, data) => {
+					el.innerHTML = `<kol-badge _color="#060" _label="${data.label}"></kol-badge>`;
+				},
 				sort: (data) => {
 					return data.sort((first, second) => {
 						if (first.dienstag < second.dienstag) {
@@ -100,27 +102,37 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 			{
 				key: 'mittwoch',
 				label: 'Mittwoch',
-				render: (el, data) => (el.innerHTML = `<kol-badge _color="#006" _label="${data.label}"></kol-badge>`),
+				render: (el, data) => {
+					el.innerHTML = `<kol-badge _color="#006" _label="${data.label}"></kol-badge>`;
+				},
 			},
 			{
 				key: 'donnerstag',
 				label: 'Donnerstag',
-				render: (el, data) => (el.innerHTML = `<kol-badge _color="#600" _label="${data.label}"></kol-badge>`),
+				render: (el, data) => {
+					el.innerHTML = `<kol-badge _color="#600" _label="${data.label}"></kol-badge>`;
+				},
 			},
 			{
 				key: 'freitag',
 				label: 'Freitag',
-				render: (el, data) => (el.innerHTML = `<kol-badge _color="#303" _label="${data.label}"></kol-badge>`),
+				render: (el, data) => {
+					el.innerHTML = `<kol-badge _color="#303" _label="${data.label}"></kol-badge>`;
+				},
 			},
 			{
 				key: 'samstag',
 				label: 'Samstag',
-				render: (el, data) => (el.innerHTML = `<kol-badge _color="#330" _label="${data.label}"></kol-badge>`),
+				render: (el, data) => {
+					el.innerHTML = `<kol-badge _color="#330" _label="${data.label}"></kol-badge>`;
+				},
 			},
 			{
 				key: 'sonntag',
 				label: 'Sonntag',
-				render: (el, data) => (el.innerHTML = `<kol-badge _color="#033" _label="${data.label}"></kol-badge>`),
+				render: (el, data) => {
+					el.innerHTML = `<kol-badge _color="#033" _label="${data.label}"></kol-badge>`;
+				},
 			},
 		],
 	],

package/src/components/link/basic.tsx

@@ -1,8 +1,6 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { KolLink } from '@public-ui/react';
 
-import { FC } from 'react';
-
 export const LinkBasic: FC = () => (
 	<div className="grid gap-4">
 		<KolLink _href="#" _label="Simple Link" />

package/src/components/table/render-cell.tsx

@@ -20,7 +20,10 @@ const HEADERS: KoliBriTableHeaders = {
 				label: 'Datum (string)',
 				key: 'date',
 				textAlign: 'center',
-				render: (_el, _cell, tupel) => `<strong>${DATE_FORMATTER.format((tupel as Data).date)}</strong>`,
+				render: (el, tupel) => {
+					// https://reactjs.org/docs/portals.html
+					getRoot(el).render(<strong>{DATE_FORMATTER.format((tupel as Data).date)}</strong>);
+				},
 				sort: (data: Data[]) =>
 					data.sort((data0, data1) => {
 						if (data0.date < data1.date) return -1;

package/src/components/table/test-data.ts

@@ -1,66 +1,66 @@
 export type Data = {
 	order: number;
-	date: Date;
+	date: String;
 };
 export const DATA: Data[] = [
 	{
 		order: 0,
-		date: new Date('1981-05-26T21:33:43.612Z'),
+		date: new Date('1981-05-26T21:33:43.612Z').toString(),
 	},
 	{
 		order: 1,
-		date: new Date('1971-04-25T19:44:17.014Z'),
+		date: new Date('1971-04-25T19:44:17.014Z').toString(),
 	},
 	{
 		order: 2,
-		date: new Date('1986-07-10T11:39:29.539Z'),
+		date: new Date('1986-07-10T11:39:29.539Z').toString(),
 	},
 	{
 		order: 3,
-		date: new Date('1976-02-02T10:00:36.346Z'),
+		date: new Date('1976-02-02T10:00:36.346Z').toString(),
 	},
 	{
 		order: 4,
-		date: new Date('1998-07-07T12:50:36.016Z'),
+		date: new Date('1998-07-07T12:50:36.016Z').toString(),
 	},
 	{
 		order: 5,
-		date: new Date('1994-09-05T05:10:44.078Z'),
+		date: new Date('1994-09-05T05:10:44.078Z').toString(),
 	},
 	{
 		order: 6,
-		date: new Date('1986-05-23T13:05:01.874Z'),
+		date: new Date('1986-05-23T13:05:01.874Z').toString(),
 	},
 	{
 		order: 7,
-		date: new Date('1975-06-29T21:51:29.359Z'),
+		date: new Date('1975-06-29T21:51:29.359Z').toString(),
 	},
 	{
 		order: 8,
-		date: new Date('1974-05-15T23:47:02.499Z'),
+		date: new Date('1974-05-15T23:47:02.499Z').toString(),
 	},
 	{
 		order: 9,
-		date: new Date('1990-05-27T10:13:19.641Z'),
+		date: new Date('1990-05-27T10:13:19.641Z').toString(),
 	},
 	{
 		order: 10,
-		date: new Date('1993-10-20T03:54:08.739Z'),
+		date: new Date('1993-10-20T03:54:08.739Z').toString(),
 	},
 	{
 		order: 11,
-		date: new Date('2000-02-25T11:55:43.705Z'),
+		date: new Date('2000-02-25T11:55:43.705Z').toString(),
 	},
 	{
 		order: 12,
-		date: new Date('1988-08-27T09:59:12.251Z'),
+		date: new Date('1988-08-27T09:59:12.251Z').toString(),
 	},
 	{
 		order: 13,
-		date: new Date('1980-10-24T10:41:24.897Z'),
+		date: new Date('1980-10-24T10:41:24.897Z').toString(),
 	},
 	{
 		order: 14,
-		date: new Date('1995-01-25T12:31:27.983Z'),
+		date: new Date('1995-01-25T12:31:27.983Z').toString(),
 	},
 ];

package/src/hooks/useSetCurrentLocation.ts

@@ -0,0 +1,7 @@
+import { setCurrentLocation } from '@public-ui/components';
+import { useLocation } from 'react-router';
+
+export const useSetCurrentLocation = () => {
+	const routerLocation = useLocation();
+	setCurrentLocation('#' + routerLocation.pathname);
+};

package/src/react.main.tsx

@@ -5,7 +5,7 @@ import { HashRouter as Router } from 'react-router-dom';
 import { defineCustomElements } from '@public-ui/components/dist/loader';
 import type { Generic } from '@a11y-ui/core';
 import { register } from '@public-ui/components';
-import { BAMF, BMF, BZSt, DEFAULT, DESYv1, DESYv2, ECL_EC, ECL_EU, ITZBund, MAPZ, ZOLLv2, ZOLLv3 } from '@public-ui/themes';
+import { BAMF, BMF, BZSt, BZStv2, DEFAULT, DESYv1, DESYv2, ECL_EC, ECL_EU, ITZBund, MAPZ, ZOLLv2, ZOLLv3 } from '@public-ui/themes';
 import { TH } from '@public-oss/kolibri-themes';
 import { App } from './App';
 
@@ -23,7 +23,7 @@ void (async () => {
 	} else {
 		/* Regular mode: Register all known themes. */
 		try {
-			await register([BAMF, BMF, DEFAULT, BZSt, DESYv1, DESYv2, ECL_EC, ECL_EU, ITZBund, MAPZ, ZOLLv2, ZOLLv3, TH], defineCustomElements, {
+			await register([BAMF, BMF, DEFAULT, BZSt, BZStv2, DESYv1, DESYv2, ECL_EC, ECL_EU, ITZBund, MAPZ, ZOLLv2, ZOLLv3, TH], defineCustomElements, {
 				theme: {
 					detect: 'auto',
 				},

package/src/scenarios/complex-form/component.tsx

@@ -40,48 +40,48 @@ export const TerminComponent: FC = () => (
 		</div>
 		<div className="grid sm:grid-cols-1 gap-2">
 			<KolTable
-				_caption="Öffnungszeiten"
+				_label="Öffnungszeiten"
 				_data={
 					[
 						{
 							stadtteil: 'Brackel',
-							montag: '08:00 - 12:00<br/>14:00 - 16:00',
-							dienstag: '08:00 - 12:00<br/>14:00 - 15:00',
-							mittwoch: '08:00 - 12:00<br/>14:00 - 15:00',
-							donnerstag: '08:00 - 12:00<br/>14:00 - 18:00',
+							montag: '08:00 - 12:00, 14:00 - 16:00',
+							dienstag: '08:00 - 12:00, 14:00 - 15:00',
+							mittwoch: '08:00 - 12:00, 14:00 - 15:00',
+							donnerstag: '08:00 - 12:00, 14:00 - 18:00',
 							freitag: '08:00 - 12:00',
 						},
 						{
 							stadtteil: 'Dorstfeld',
-							montag: '09:00 - 12:00<br/>14:00 - 16:00',
-							dienstag: '09:00 - 12:00<br/>14:00 - 15:00',
-							mittwoch: '09:00 - 12:00<br/>14:00 - 15:00',
-							donnerstag: '09:00 - 12:00<br/>14:00 - 18:00',
+							montag: '09:00 - 12:00, 14:00 - 16:00',
+							dienstag: '09:00 - 12:00, 14:00 - 15:00',
+							mittwoch: '09:00 - 12:00, 14:00 - 15:00',
+							donnerstag: '09:00 - 12:00, 14:00 - 18:00',
 							freitag: '09:00 - 12:00',
 						},
 						{
 							stadtteil: 'Aplerbeck',
-							montag: '08:00 - 12:00<br/>14:00 - 16:00',
-							dienstag: '08:00 - 12:00<br/>14:00 - 15:00',
-							mittwoch: '08:00 - 12:00<br/>14:00 - 15:00',
-							donnerstag: '08:00 - 12:00<br/>14:00 - 18:00',
+							montag: '08:00 - 12:00, 14:00 - 16:00',
+							dienstag: '08:00 - 12:00, 14:00 - 15:00',
+							mittwoch: '08:00 - 12:00, 14:00 - 15:00',
+							donnerstag: '08:00 - 12:00, 14:00 - 18:00',
 							freitag: '08:00 - 12:00',
 						},
 						{
 							stadtteil: 'Innenstadt Ost',
-							montag: '07:00 - 12:00<br/>14:00 - 16:00',
-							dienstag: '07:00 - 12:00<br/>14:00 - 15:00',
-							mittwoch: '07:00 - 12:00<br/>14:00 - 15:00',
-							donnerstag: '07:00 - 12:00<br/>14:00 - 18:00',
-							freitag: '07:00 - 12:00<br/>13:00 - 16:00',
+							montag: '07:00 - 12:00, 14:00 - 16:00',
+							dienstag: '07:00 - 12:00, 14:00 - 15:00',
+							mittwoch: '07:00 - 12:00, 14:00 - 15:00',
+							donnerstag: '07:00 - 12:00, 14:00 - 18:00',
+							freitag: '07:00 - 12:00, 13:00 - 16:00',
 						},
 						{
 							stadtteil: 'Innenstadt West',
-							montag: '07:00 - 12:00<br/>14:00 - 16:00',
-							dienstag: '07:00 - 12:00<br/>14:00 - 15:00',
-							mittwoch: '07:00 - 12:00<br/>14:00 - 15:00',
-							donnerstag: '07:00 - 12:00<br/>14:00 - 18:00',
-							freitag: '07:00 - 12:00<br/>13:00 - 16:00',
+							montag: '07:00 - 12:00, 14:00 - 16:00',
+							dienstag: '07:00 - 12:00, 14:00 - 15:00',
+							mittwoch: '07:00 - 12:00, 14:00 - 15:00',
+							donnerstag: '07:00 - 12:00, 14:00 - 18:00',
+							freitag: '07:00 - 12:00, 13:00 - 16:00',
 							/*render: (el, data) => {
 						el.innerHTML = `<kol-badge _color="#ff0000" _label="NIX"></kol-badge>`;
 					  },*/

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

@@ -0,0 +1,160 @@
+import React, { createContext, FC, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { HTMLStencilElement } from '@stencil/core/internal';
+import {
+	KolButton,
+	KolInputCheckbox,
+	KolInputColor,
+	KolInputDate,
+	KolInputEmail,
+	KolInputFile,
+	KolInputNumber,
+	KolInputPassword,
+	KolInputRadio,
+	KolInputRange,
+	KolInputText,
+	KolSelect,
+	KolTextarea,
+	KolButtonLink,
+} from '@public-ui/react';
+import { SampleDescription } from '../components/SampleDescription';
+
+const EventTargetContext = createContext<EventTarget | undefined>(undefined);
+
+type Props = {
+	InputComponent: React.ComponentType<any>;
+	inputProps: { [key: string]: any };
+	formatter?: (value: any) => string;
+};
+const Scenario = (props: Props) => {
+	const ref = useRef<HTMLStencilElement & { getValue: () => Promise<any> }>();
+	const [value, setValue] = useState<unknown>(undefined);
+	const formatter = props.formatter || JSON.stringify;
+	const eventTarget = useContext(EventTargetContext);
+
+	const handleButtonClick = async () => {
+		setValue(await ref.current?.getValue());
+	};
+
+	useEffect(() => {
+		const handleRunAll = () => {
+			void handleButtonClick();
+		};
+		eventTarget?.addEventListener('runAll', handleRunAll);
+
+		return () => {
+			eventTarget?.removeEventListener('runAll', handleRunAll);
+		};
+	}, [eventTarget]);
+
+	return (
+		<div className="grid grid-cols-3 items-end gap-4">
+			<props.InputComponent ref={ref} {...props.inputProps} />
+			<KolButton
+				_label="getValue()"
+				_on={{
+					onClick: () => {
+						void handleButtonClick();
+					},
+				}}
+			></KolButton>
+			<pre>{formatter(value)}</pre>
+		</div>
+	);
+};
+
+export const InputsGetValue: FC = () => {
+	const eventTarget = useMemo(() => new EventTarget(), []);
+
+	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 &quout;getValue()&quout; 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',
+						}}
+					/>
+
+					<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>
+			</EventTargetContext.Provider>
+		</>
+	);
+};

package/src/scenarios/routes.ts

@@ -1,10 +1,12 @@
 import { Routes } from '../shares/types';
 import { TerminComponent } from './complex-form/component';
 import { AppointmentForm } from './appointment-form/AppointmentForm';
+import { InputsGetValue } from './inputs-get-value';
 
 export const SCENARIO_ROUTES: Routes = {
 	scenarios: {
 		'complex-form': TerminComponent,
 		'appointment-form': AppointmentForm,
+		'inputs-get-value': InputsGetValue,
 	},
 };

package/src/shares/theme.ts

@@ -1,6 +1,6 @@
 import { SelectOption } from '@public-ui/components';
 
-export type Theme = 'bmf' | 'bzst' | 'default' | 'ecl-ec' | 'ecl-eu' | 'itzbund' | 'mapz' | 'th' | 'unstyled' | 'zoll-v2' | 'zoll-v3';
+export type Theme = 'bmf' | 'bzst' | 'bzst-v2' | 'default' | 'ecl-ec' | 'ecl-eu' | 'itzbund' | 'mapz' | 'th' | 'unstyled' | 'zoll-v2' | 'zoll-v3';
 
 export const isTheme = (value: unknown) => {
 	return (
@@ -8,6 +8,7 @@ export const isTheme = (value: unknown) => {
 		(value === 'unstyled' ||
 			value === 'bmf' ||
 			value === 'bzst' ||
+			value === 'bzst-v2' ||
 			value === 'default' ||
 			value === 'ecl-ec' ||
 			value === 'ecl-eu' ||
@@ -34,9 +35,13 @@ export const THEME_OPTIONS: SelectOption<Theme>[] = [
 		value: 'bmf',
 	},
 	{
-		label: 'Bundesamt für Zoll und Steuern',
+		label: 'Bundeszentralamt für Steuern',
 		value: 'bzst',
 	},
+	{
+		label: 'Bundeszentralamt für Steuern v2',
+		value: 'bzst-v2',
+	},
 	{
 		label: 'Default',
 		value: 'default',

package/dist/2946.js

@@ -1,2 +0,0 @@
-/*! For license information please see 2946.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[2946],{8713:(e,t,r)=>{r.d(t,{a:()=>s,b:()=>b,c:()=>p,d:()=>c,e:()=>f,f:()=>u,g:()=>a,u:()=>h});var n=r(167);const o=new Set,s=(e,t)=>{(!1===o.has(e)||(null==t?void 0:t.force))&&(o.add(e),n.L.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"✋ a11y",overwriteStyle:"; background-color: #09f"}))},i=new Set,c=(e,t)=>{(!1===i.has(e)||(null==t?void 0:t.force))&&(i.add(e),n.L.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"💻 dev",overwriteStyle:"; background-color: #f09"}))},a=(e,t)=>{(!1===i.has(e)||(null==t?void 0:t.force))&&(i.add(e),n.L.warn([e].concat((null==t?void 0:t.details)||[]),{classifier:"💻 dev",overwriteStyle:"; background-color: #f09"}))},l=new Set,u=(e,t=!1,r)=>{(!1===l.has(e)||(null==r?void 0:r.force))&&(l.add(e),e+=!0===t?" ✅":"",n.L.debug([e].concat((null==r?void 0:r.details)||[]),{classifier:"🌟 feature",overwriteStyle:"; background-color: #309"}))};c("Wir freuen uns über jedes Feedback, Kommentare, Screenshots oder Demo-Links von einer auf KoliBri-basierenden Anwendung (kolibri@itzbund.de). Vielen Dank!");const d=new Set,h=(e,t)=>{(!1===d.has(e)||(null==t?void 0:t.force))&&(d.add(e),n.L.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"📑 ui/ux",overwriteStyle:"; background-color: #060;"}))},f=()=>{s('"Disabled" schränkt die Zugänglichkeit und Sichtbarkeit ein. Wir empfehlen aus Sicht der Barrierefreiheit readonly- statt disabled-Attribut zu verwenden.\n- https://uxdesign.cc/is-it-ok-to-grey-out-disabled-buttons-8afa74a0fae')},b=e=>{"string"==typeof e&&""!==e||s("Manche Strukturelemente, wie bspw. der nav-Tag, können mehrfach in einer Webseite verwendet werden. Damit die gleichnamigen Strukturelemente voneinander unterschieden werden können, ist es erforderlich ein Aria-Label zu setzen.\n- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role#accessibility_concerns")},p=(e,t=8)=>{t>7&&h(`[${e}] Innerhalb von Navigationsstrukturen wird empfohlen nicht mehr als 7 Menüpunkte zu verwenden.\n\nLinks:\n- https://de.ryte.com/wiki/Millersche_Zahl\n- https://de.wikipedia.org/wiki/Millersche_Zahl`)}},2946:(e,t,r)=>{r.d(t,{K:()=>Ee,a:()=>se,b:()=>G,c:()=>ae,d:()=>ie,e:()=>ce,f:()=>te,g:()=>ee,h:()=>Ae,i:()=>ve,j:()=>ge,k:()=>me,l:()=>Ne,m:()=>he,n:()=>ke,o:()=>X,p:()=>pe,q:()=>ye,r:()=>a,s:()=>re,t:()=>_e,u:()=>fe,w:()=>oe});var n=r(8713),o=r(167);const s=(e,t)=>{t.forEach((t=>{!1===e.has(t)&&e.add(t)}))},i=(e,t=document)=>{if(t instanceof Document||t instanceof HTMLElement||t instanceof ShadowRoot){const r=new Set;s(r,t.querySelectorAll(e));const n=t.querySelectorAll('[class*="hydrated"]');for(let t=0;t<n.length;t++){const o=n[t].shadowRoot;s(r,i(e,"object"==typeof o&&null!==o?o:n[t]))}return Array.from(r)}throw new Error("The parameter document for the method querySelectorAll is not type of Document, HTMLElement or ShadowRoot.")},c=(e,t=document)=>{if(t instanceof Document||t instanceof HTMLElement||t instanceof ShadowRoot){let r=t.querySelector(e);if(null===r){const n=t.querySelectorAll('[class*="hydrated"]');for(let t=0;t<n.length;t++){const o=n[t].shadowRoot;if(r=c(e,"object"==typeof o&&null!==o?o:n[t]),null!==r)break}}return r}throw new Error("The parameter document for the method querySelector is not type of Document, HTMLElement or ShadowRoot.")};var a=u,l=u;function u(e){var t=d(e);return 3==t.length?t.concat(255):(t[3]=Math.round(t[3]),t)}function d(e){return"string"==typeof e?("red"==(t=e=e.toLowerCase())?[255,0,0]:"green"==t?[0,255,0]:"blue"==t?[0,0,255]:"black"==t?[0,0,0]:"white"==t?[255,255,255]:"cyan"==t?[0,255,255]:"gray"==t||"grey"==t?[128,128,128]:"magenta"==t||"pink"==t?[255,0,255]:"yellow"==t?[255,255,0]:void 0)||function(e){var t=e.replace(/^#/,""),r=t.length;if(3==r||4==r){var n=f(t[0]),o=f(t[1]),s=f(t[2]),i=3==r?255:f(t[3]);if(isNaN(n)||isNaN(o)||isNaN(s)||isNaN(i))return;return[n,o,s,i]}}(e)||function(e){var t=e.replace(/^#/,""),r=t.length;if(6==r||8==r){var n=f(t.slice(0,2)),o=f(t.slice(2,4)),s=f(t.slice(4,6)),i=6==r?255:f(t.slice(6,8));if(isNaN(n)||isNaN(o)||isNaN(s)||isNaN(i))return;return[n,o,s,i]}}(e)||function(e){if("rgb("==e.substr(0,4)){var t=(e=e.match(/^rgb\(([^)]+)\)/)[1]).split(/ *, */).map(Number),r=b(t[0],!0),n=b(t[1],!0),o=b(t[2],!0);if(-1!=r&&-1!=n&&-1!=o)return[r,n,o,255]}}(e)||function(e){if("rgba("==e.substr(0,5)){var t=(e=e.match(/^rgba\(([^)]+)\)/)[1]).split(/ *, */).map(Number),r=b(t[0],!0),n=b(t[1],!0),o=b(t[2],!0),s=b(255*t[3]);if(-1!=r&&-1!=n&&-1!=o&&-1!=s)return[r,n,o,s]}}(e)||[0,0,0,255]:function(e){if("[object Object]"===Object.prototype.toString.call(e)&&Object.getPrototypeOf(e)===Object.getPrototypeOf({})){var t=b(null!=e.r?e.r:null!=e.red?e.red:0,!0),r=b(null!=e.g?e.g:null!=e.green?e.green:0,!0),n=b(null!=e.b?e.b:null!=e.blue?e.blue:0,!0),o=b(null!=e.a?e.a:null!=e.alpha?e.alpha:255,!0);if(-1!=t&&-1!=r&&-1!=n&&-1!=o)return[t,r,n,o]}}(e)||function(e){if(Array.isArray(e)&&(3==e.length||4==e.length)){var t=b(e[0],!0),r=b(e[1],!0),n=b(e[2],!0),o=b(null!=e[3]?e[3]:255,!0);if(-1!=t&&-1!=r&&-1!=n&&-1!=o)return[t,r,n,o]}}(e)||function(e){if("number"==typeof e&&Math.floor(e)==e&&e<=4294967295&&e>=0)return[e>>16&255,e>>8&255,255&e,e>>24&255]}(e)||[0,0,0,255];var t}function h(e){var t=e.toString(16);return 1==t.length?"0"+t:t}function f(e){return 1==e.length?parseInt(e+e,16):parseInt(e,16)}function b(e,t){return"number"!=typeof e||!0===t&&Math.floor(e)!==e?-1:e>=0&&e<=255?e:-1}function p(e){return"function"==typeof e}function v(e){const t=e((e=>{Error.call(e),e.stack=(new Error).stack}));return t.prototype=Object.create(Error.prototype),t.prototype.constructor=t,t}a.arr=l,a.obj=function(e){var t=d(e);return{r:t[0],g:t[1],b:t[2],a:3==t.length?255:Math.round(t[3])}},a.css=function(e){var t=d(e);return 3==t.length&&t.push(255),255==t[3]?"rgb("+t[0]+", "+t[1]+", "+t[2]+")":0==t[3]?"rgba("+t[0]+", "+t[1]+", "+t[2]+", 0)":"rgba("+t[0]+", "+t[1]+", "+t[2]+", "+String(t[3]/255).substr(1)+")"},a.hex=function(e){3==(s=d(e)).length&&s.push(255);var t=255==s[3],r=h(s[0]),n=h(s[1]),o=h(s[2]),s=h(Math.round(s[3])),i=function(e,t,r,n){var o=["ff","00","11","22","33","44","55","66","77","88","99","aa","bb","cc","dd","ee"];return-1!=o.indexOf(e)&&-1!=o.indexOf(t)&&-1!=o.indexOf(r)&&-1!=o.indexOf(n)}(r,n,o,s);return t?i?"#"+r.charAt(0)+n.charAt(0)+o.charAt(0):"#"+r+n+o:i?"#"+r.charAt(0)+n.charAt(0)+o.charAt(0)+s.charAt(0):"#"+r+n+o+s},a.num=function(e){var t=d(e);return 3==t.length?t.push(255):t[3]=Math.round(t[3]),(t[3]<<24>>>0|t[0]<<16|t[1]<<8|t[2])>>>0};const g=v((e=>function(t){e(this),this.message=t?`${t.length} errors occurred during unsubscription:\n${t.map(((e,t)=>`${t+1}) ${e.toString()}`)).join("\n  ")}`:"",this.name="UnsubscriptionError",this.errors=t}));function m(e,t){if(e){const r=e.indexOf(t);0<=r&&e.splice(r,1)}}class y{constructor(e){this.initialTeardown=e,this.closed=!1,this._parentage=null,this._finalizers=null}unsubscribe(){let e;if(!this.closed){this.closed=!0;const{_parentage:t}=this;if(t)if(this._parentage=null,Array.isArray(t))for(const e of t)e.remove(this);else t.remove(this);const{initialTeardown:r}=this;if(p(r))try{r()}catch(t){e=t instanceof g?t.errors:[t]}const{_finalizers:n}=this;if(n){this._finalizers=null;for(const t of n)try{x(t)}catch(t){e=null!=e?e:[],t instanceof g?e=[...e,...t.errors]:e.push(t)}}if(e)throw new g(e)}}add(e){var t;if(e&&e!==this)if(this.closed)x(e);else{if(e instanceof y){if(e.closed||e._hasParent(this))return;e._addParent(this)}(this._finalizers=null!==(t=this._finalizers)&&void 0!==t?t:[]).push(e)}}_hasParent(e){const{_parentage:t}=this;return t===e||Array.isArray(t)&&t.includes(e)}_addParent(e){const{_parentage:t}=this;this._parentage=Array.isArray(t)?(t.push(e),t):t?[t,e]:e}_removeParent(e){const{_parentage:t}=this;t===e?this._parentage=null:Array.isArray(t)&&m(t,e)}remove(e){const{_finalizers:t}=this;t&&m(t,e),e instanceof y&&e._removeParent(this)}}y.EMPTY=(()=>{const e=new y;return e.closed=!0,e})();const w=y.EMPTY;function S(e){return e instanceof y||e&&"closed"in e&&p(e.remove)&&p(e.add)&&p(e.unsubscribe)}function x(e){p(e)?e():e.unsubscribe()}const k={onUnhandledError:null,onStoppedNotification:null,Promise:void 0,useDeprecatedSynchronousErrorHandling:!1,useDeprecatedNextContext:!1},_={setTimeout(e,t,...r){const{delegate:n}=_;return(null==n?void 0:n.setTimeout)?n.setTimeout(e,t,...r):setTimeout(e,t,...r)},clearTimeout(e){const{delegate:t}=_;return((null==t?void 0:t.clearTimeout)||clearTimeout)(e)},delegate:void 0};function N(){}const A=E("C",void 0,void 0);function E(e,t,r){return{kind:e,value:t,error:r}}function O(e){e()}class L extends y{constructor(e){super(),this.isStopped=!1,e?(this.destination=e,S(e)&&e.add(this)):this.destination=z}static create(e,t,r){return new T(e,t,r)}next(e){this.isStopped?D(function(e){return E("N",e,void 0)}(e),this):this._next(e)}error(e){this.isStopped?D(E("E",void 0,e),this):(this.isStopped=!0,this._error(e))}complete(){this.isStopped?D(A,this):(this.isStopped=!0,this._complete())}unsubscribe(){this.closed||(this.isStopped=!0,super.unsubscribe(),this.destination=null)}_next(e){this.destination.next(e)}_error(e){try{this.destination.error(e)}finally{this.unsubscribe()}}_complete(){try{this.destination.complete()}finally{this.unsubscribe()}}}const C=Function.prototype.bind;function M(e,t){return C.call(e,t)}class P{constructor(e){this.partialObserver=e}next(e){const{partialObserver:t}=this;if(t.next)try{t.next(e)}catch(e){j(e)}}error(e){const{partialObserver:t}=this;if(t.error)try{t.error(e)}catch(e){j(e)}else j(e)}complete(){const{partialObserver:e}=this;if(e.complete)try{e.complete()}catch(e){j(e)}}}class T extends L{constructor(e,t,r){let n;if(super(),p(e)||!e)n={next:null!=e?e:void 0,error:null!=t?t:void 0,complete:null!=r?r:void 0};else{let t;this&&k.useDeprecatedNextContext?(t=Object.create(e),t.unsubscribe=()=>this.unsubscribe(),n={next:e.next&&M(e.next,t),error:e.error&&M(e.error,t),complete:e.complete&&M(e.complete,t)}):n=e}this.destination=new P(n)}}function j(e){var t;t=e,_.setTimeout((()=>{const{onUnhandledError:e}=k;if(!e)throw t;e(t)}))}function D(e,t){const{onStoppedNotification:r}=k;r&&_.setTimeout((()=>r(e,t)))}const z={closed:!0,next:N,error:function(e){throw e},complete:N},H="function"==typeof Symbol&&Symbol.observable||"@@observable";function $(e){return e}class q{constructor(e){e&&(this._subscribe=e)}lift(e){const t=new q;return t.source=this,t.operator=e,t}subscribe(e,t,r){const n=(o=e)&&o instanceof L||function(e){return e&&p(e.next)&&p(e.error)&&p(e.complete)}(o)&&S(o)?e:new T(e,t,r);var o;return O((()=>{const{operator:e,source:t}=this;n.add(e?e.call(n,t):t?this._subscribe(n):this._trySubscribe(n))})),n}_trySubscribe(e){try{return this._subscribe(e)}catch(t){e.error(t)}}forEach(e,t){return new(t=I(t))(((t,r)=>{const n=new T({next:t=>{try{e(t)}catch(e){r(e),n.unsubscribe()}},error:r,complete:t});this.subscribe(n)}))}_subscribe(e){var t;return null===(t=this.source)||void 0===t?void 0:t.subscribe(e)}[H](){return this}pipe(...e){return(0===(t=e).length?$:1===t.length?t[0]:function(e){return t.reduce(((e,t)=>t(e)),e)})(this);var t}toPromise(e){return new(e=I(e))(((e,t)=>{let r;this.subscribe((e=>r=e),(e=>t(e)),(()=>e(r)))}))}}function I(e){var t;return null!==(t=null!=e?e:k.Promise)&&void 0!==t?t:Promise}q.create=e=>new q(e);const R=v((e=>function(){e(this),this.name="ObjectUnsubscribedError",this.message="object unsubscribed"}));class J extends q{constructor(){super(),this.closed=!1,this.currentObservers=null,this.observers=[],this.isStopped=!1,this.hasError=!1,this.thrownError=null}lift(e){const t=new W(this,this);return t.operator=e,t}_throwIfClosed(){if(this.closed)throw new R}next(e){O((()=>{if(this._throwIfClosed(),!this.isStopped){this.currentObservers||(this.currentObservers=Array.from(this.observers));for(const t of this.currentObservers)t.next(e)}}))}error(e){O((()=>{if(this._throwIfClosed(),!this.isStopped){this.hasError=this.isStopped=!0,this.thrownError=e;const{observers:t}=this;for(;t.length;)t.shift().error(e)}}))}complete(){O((()=>{if(this._throwIfClosed(),!this.isStopped){this.isStopped=!0;const{observers:e}=this;for(;e.length;)e.shift().complete()}}))}unsubscribe(){this.isStopped=this.closed=!0,this.observers=this.currentObservers=null}get observed(){var e;return(null===(e=this.observers)||void 0===e?void 0:e.length)>0}_trySubscribe(e){return this._throwIfClosed(),super._trySubscribe(e)}_subscribe(e){return this._throwIfClosed(),this._checkFinalizedStatuses(e),this._innerSubscribe(e)}_innerSubscribe(e){const{hasError:t,isStopped:r,observers:n}=this;return t||r?w:(this.currentObservers=null,n.push(e),new y((()=>{this.currentObservers=null,m(n,e)})))}_checkFinalizedStatuses(e){const{hasError:t,thrownError:r,isStopped:n}=this;t?e.error(r):n&&e.complete()}asObservable(){const e=new q;return e.source=this,e}}J.create=(e,t)=>new W(e,t);class W extends J{constructor(e,t){super(),this.destination=e,this.source=t}next(e){var t,r;null===(r=null===(t=this.destination)||void 0===t?void 0:t.next)||void 0===r||r.call(t,e)}error(e){var t,r;null===(r=null===(t=this.destination)||void 0===t?void 0:t.error)||void 0===r||r.call(t,e)}complete(){var e,t;null===(t=null===(e=this.destination)||void 0===e?void 0:e.complete)||void 0===t||t.call(e)}_subscribe(e){var t,r;return null!==(r=null===(t=this.source)||void 0===t?void 0:t.subscribe(e))&&void 0!==r?r:w}}var F=.2126,U=.7152,B=.0722,K=1/12.92;function Y(e){return Math.pow((e+.055)/1.055,2.4)}function Z(e){var t=e[0]/255,r=e[1]/255,n=e[2]/255,o=t<=.03928?t*K:Y(t),s=r<=.03928?r*K:Y(r),i=n<=.03928?n*K:Y(n);return o*F+s*U+i*B}function V(e){var t=255;8===(e=e.replace(/^#/,"")).length&&(t=parseInt(e.slice(6,8),16),e=e.substring(0,6)),4===e.length&&(t=parseInt(e.slice(3,4).repeat(2),16),e=e.substring(0,3)),3===e.length&&(e=e[0]+e[0]+e[1]+e[1]+e[2]+e[2]);var r=parseInt(e,16);return[r>>16,r>>8&255,255&r,t]}function G(e,t){return function(e,t){return function(e,t){return(Math.max(e,t)+.05)/(Math.min(e,t)+.05)}(Z(e),Z(t))}(V(e),V(t))}const Q=/\[object Object\]/,X=(e,t)=>{"string"==typeof e&&Q.test(e)||t()},ee=(e,t)=>{"string"==typeof e&&""===e||t()},te=(e,t)=>{(0,o.d)()&&(o.L.debug([e,t]),o.L.debug("↑ We propagate the (submit) event to this target.")),Object.defineProperty(e,"target",{value:t,writable:!1})},re=(e,t,r,n={})=>{var o,s;void 0===e.nextHooks&&(e.nextHooks=new Map),void 0===e.nextState&&(e.nextState=new Map),e.nextState.get(t)!==r&&(e.nextHooks.get(t)instanceof Map==0&&e.nextHooks.set(t,new Map),"function"==typeof n.afterPatch&&(null===(o=e.nextHooks.get(t))||void 0===o||o.set("afterPatch",n.afterPatch)),"function"==typeof n.beforePatch&&(null===(s=e.nextHooks.get(t))||void 0===s||s.set("beforePatch",n.beforePatch)),e.nextState.set(t,r),(e=>{var t,r,n;null===(t=e.nextHooks)||void 0===t||t.forEach(((t,r)=>{var n;const o=t.get("beforePatch");"function"==typeof o&&o(null===(n=e.nextState)||void 0===n?void 0:n.get(r),e.nextState,e,r)})),(null===(r=e.nextState)||void 0===r?void 0:r.size)>0&&(e.state=Object.assign(Object.assign({},e.state),Object.fromEntries(e.nextState)),delete e.nextState,null===(n=e.nextHooks)||void 0===n||n.forEach(((t,r)=>{const n=t.get("afterPatch");"function"==typeof n&&n(e.state[r],e.state,e,r)}))),delete e.nextHooks})(e))},ne=(e,t,r,o)=>{(0,n.d)(`[${e.constructor.name}] Der Property-Wert (${r}) für '${t}' ist nicht valide. Folgende Werte sind erlaubt: ${Array.from(o).join(", ")}`)};function oe(e,t,r,n,o,s={}){r(o)?re(e,t,o,s.hooks):null!=o||s.required?(s.required||n.add(null),ne(e,t,o,n)):re(e,t,s.defaultValue,s.hooks)}const se=(e,t,r,n)=>{oe(e,t,(e=>"boolean"==typeof e),new Set(["Boolean {true, false}"]),r,n)},ie=(e,t,r,n={})=>{const o="number"==typeof n.minLength?null==n?void 0:n.minLength:0;oe(e,t,(e=>"string"==typeof e&&e.length>=o&&(void 0===(null==n?void 0:n.maxLength)||e.length<=n.maxLength)),new Set(["String"]),r,n)},ce=(e,t,r,n)=>{oe(e,t,(e=>"number"==typeof e&&(void 0===(null==n?void 0:n.min)||"number"==typeof(null==n?void 0:n.min)&&e>=n.min)&&(void 0===(null==n?void 0:n.max)||"number"==typeof(null==n?void 0:n.max)&&e<=n.max)),new Set(["Number"]),r,n)},ae=(e,t,r,n,s=(e=>e==e),i={})=>{ee(n,(()=>{X(n,(()=>{void 0===n&&(n=[]);try{try{n=pe(n)}catch(e){}if(Array.isArray(n)){const c=n.find((e=>!r(e)));void 0===c&&s(n)?re(e,t,n,i.hooks):X(c,(()=>{throw o.L.debug(c),new Error("↑ Das Schema für das Property (_options) ist nicht valide. Der Wert wird nicht geändert.")}))}else X(n,(()=>{throw o.L.debug(n),new Error("↑ Das Schema für das Property (_options) ist nicht valide. Der Wert wird nicht geändert.")}))}catch(e){o.L.debug(e)}}))}))},le=/^(true|false)$/,ue=/^-?(0|[1-9]\d*)$/,de=/^-?(0.|[1-9]\d*.)\d*[1-9]$/,he=e=>{const t=typeof e,r=`${e}`;if("string"==typeof e)if(le.test(e))e="true"===e;else if(ue.test(e))e=parseInt(e);else if(de.test(e))e=parseFloat(e);else if(be.test(e))try{e=pe(e)}catch(e){}return t!==typeof e&&(0,n.d)(`You have used a stringified property value (${r} to ${JSON.stringify(e)}) which type switched from ${t} to ${typeof e}!`),e},fe=e=>{try{return JSON.stringify(e).replace(/"/g,"'")}catch(t){throw o.L.warn(["stringifyJson",e]),o.L.error("↑ Das JSON konnte nicht in einen String umgewandelt werden. Es wird ein stringifizierbares JSON erwartet."),new Error}},be=/^[{[]/,pe=e=>{if("string"==typeof e)try{return JSON.parse(e)}catch(t){if(be.test(e))try{return JSON.parse(e.replace(/'/g,'"'))}catch(t){o.L.warn(["parseJson",e]),o.L.error("↑ Der JSON-String konnte nicht geparsed werden. Achten Sie darauf, dass einfache Anführungszeichen im Text maskiert werden (&#8216;).")}}throw new Error},ve=e=>"boolean"==typeof e?!0===e?"true":"false":void 0,ge=e=>"string"==typeof e?e:ve(e),me=(e,t)=>c(e,t||(0,o.b)()),ye=(e,t)=>i(e,t||(0,o.b)());let we=null;const Se=()=>(we=we||{backgroundColor:"#00000000",color:"#00000000",domNode:(0,o.b)().body,level:"Fail",score:1},we),xe=/(\d+, ){3}0\)/,ke=(e,t=Se())=>{const r=getComputedStyle(e),n=xe.test(r.backgroundColor)?t.backgroundColor:a.hex(r.backgroundColor),s=xe.test(r.color)?t.color:a.hex(r.color),i=G(n,s),c={backgroundColor:n,color:s,domNode:e,level:(l=i,l>=7?"AAA":l>=4.5?"AA":l>=3?"AA Large":"Fail"),score:i};var l;return i<4.5&&o.L.error(["Color-Contrast-Error",{backgroundColor:c.backgroundColor,color:c.color,level:c.level,score:c.score},c.domNode]),c},_e=(e,t=Se())=>{t.domNode instanceof HTMLElement&&(t=ke(t.domNode,t));const r=t.domNode.querySelector(e);if(null===r){const r=t.domNode.querySelectorAll('[class="hydrated"]');for(let n=0;n<r.length&&(t.domNode=r[n],null===(t=_e(e,t)).domNode);n++);return t}return ke(r,t)};class Ne{static queryHtmlElementColors(e,t,r=!1,n=!0){let s=null;if(!0===r||!1===Ne.executionLock)if(!1===r&&(Ne.cache.clear(),Ne.cache.set(t.domNode,t),Ne.executionLock=!0,!0===n&&o.L.debug("[KoliBriUtils] Color contrast analysis started...")),e===t.domNode)s=t;else{const r=new Set;if(t.domNode.shadowRoot){const e=t.domNode.shadowRoot.children;for(let t=0;t<e.length;t++)r.add(e[t])}const n=t.domNode;if("function"==typeof n.assignedNodes){const e=n.assignedNodes();for(let t=0;t<e.length;t++)e[t]instanceof HTMLElement&&r.add(e[t])}const o=t.domNode.children;for(let e=0;e<o.length;e++)r.add(o[e]);const i=Array.from(r);for(let r=0;r<i.length;r++){let n=Ne.cache.get(i[r]);void 0===n&&(n=ke(i[r],t)),Ne.cache.set(i[r],n);const o=Ne.queryHtmlElementColors(e,n,!0,!1);if(null!==o){s=o;break}}}else o.L.debug("[KoliBriUtils] Call aborted because a color contrast analysis is currently being executed.");return!1===r&&(!0===n&&o.L.debug(`[KoliBriUtils] Color contrast analysis finished (${Ne.cache.size} DOM elements are analysed).`),Ne.executionLock=!1,Ne.cache.clear()),s}}Ne.executionLock=!1,Ne.cache=new Map;const Ae=new J;class Ee{}Ee.patchTheme=o.p,Ee.patchThemeTag=o.a,Ee.querySelector=me,Ee.querySelectorAll=ye,Ee.stringifyJson=fe}}]);

package/dist/353.js

@@ -1,2 +0,0 @@
-/*! For license information please see 353.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[353],{353:(t,e,l)=>{l.r(e),l.d(e,{initialize:()=>s});var i=l(167),r=l(2946);function n(t,e){try{Object.defineProperty(i.K,t,{get:function(){return e}})}catch(e){i.L.debug(`KoliBri property ${t} is already bind.`)}}const o=(t,e)=>i.L.debug(`${t} ${e?"":"not "}activated`),s=()=>{if((0,i.i)(),(0,i.h)()){(0,i.j)(),n("a11yColorContrast",r.n),n("querySelector",r.k),n("querySelectorAll",r.q),n("querySelectorColors",r.t),n("utils",(function(){return r.l})),n("parseJson",r.p),n("stringifyJson",r.u);const t=(0,i.b)().body,e=(0,i.b)().createElement("svg");if(e.setAttribute("aria-label","KoliBri-DevTools"),e.setAttribute("xmlns","http://www.w3.org/2000/svg"),e.setAttribute("role","toolbar"),e.setAttribute("style","position: fixed;color: black;font-size: 200%;bottom: 0.25rem;right: 0.25rem;"),e.innerHTML='<svg\n  xmlns="http://www.w3.org/2000/svg"\n  width="50"\n  height="50"\n  viewBox="0 0 600 600"\n>\n  <path d="M353 322L213 304V434L353 322Z" fill="#047" />\n  <path d="M209 564V304L149 434L209 564Z" fill="#047" />\n  <path d="M357 316L417 250L361 210L275 244L357 316Z" fill="#047" />\n  <path d="M353 318L35 36L213 300L353 318Z" fill="#047" />\n  <path d="M329 218L237 92L250 222L272 241L329 218Z" fill="#047" />\n  <path d="M391 286L565 272L421 252L391 286Z" fill="#047" />\n</svg>',(0,i.b)().body.appendChild(e),o("Development mode",(0,i.h)()),o("Experimental mode",(0,i.d)()),o("Color contrast analysis",(0,i.k)()),(0,i.k)()){const e=setTimeout((()=>{clearTimeout(e),setInterval((()=>{r.l.queryHtmlElementColors((0,i.b)().createElement("div"),(0,r.n)(t),!1,!1)}),1e4)}),2500)}}}}}]);

package/dist/7209.js

@@ -1,2 +0,0 @@
-/*! For license information please see 7209.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[7209],{569:(t,e,o)=>{o.d(e,{I:()=>i});var n=o(664);const i=({accessKey:t,label:e})=>{let[o,...i]=e.split(t);return 0===i.length&&(t=t.toUpperCase(),[o,...i]=e.split(t)),0===i.length&&(t=t.toLowerCase(),[o,...i]=e.split(t)),(0,n.h)(n.F,null,o,i.length?(0,n.h)(n.F,null,(0,n.h)("u",null,t),i.join(t)):null)}},3929:(t,e,o)=>{o.d(e,{A:()=>a});var n=o(2946),i=o(8713);const s=(0,o(167).d)();class a{constructor(t,e,o){var n,a;if(this.setFormAssociatedValue=t=>{var e;const o=null===(e=this.formAssociated)||void 0===e?void 0:e.getAttribute("name");null!==o&&""!==o||(0,i.d)(` The form field (${this.name}) must have a name attribute to be form-associated. Please define the _name attribute.`);const n=this.tryToStringifyValue(t);this.syncValue(t,n,this.formAssociated),this.syncValue(t,n,this.syncToOwnInput)},this.component=t,this.host=this.findHostWithShadowRoot(o),this.name=e,s){switch(null===(n=this.host)||void 0===n||n.querySelectorAll("input,select,textarea").forEach((t=>{var e;null===(e=this.host)||void 0===e||e.removeChild(t)})),this.name){case"button":this.formAssociated=document.createElement("button");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===(a=this.host)||void 0===a||a.appendChild(this.formAssociated)}}findHostWithShadowRoot(t){for(;null===(null==t?void 0:t.shadowRoot)&&t!==document.body;)(t=null==t?void 0:t.parentNode).host&&(t=t.host);return t}setAttribute(t,e,o){if(s)try{if("boolean"!=typeof(o="object"==typeof o&&null!==o?JSON.stringify(o):o)&&"number"!=typeof o&&"string"!=typeof o)throw new Error("Invalid value type: "+typeof o);null==e||e.setAttribute(t,`${o}`)}catch(o){null==e||e.removeAttribute(t)}}tryToStringifyValue(t){try{return"object"==typeof t&&null!==t?JSON.stringify(t).toString():null==t?null:t.toString()}catch(t){return(0,i.g)(`The form field raw value is not able to stringify! ${t}`),""}}syncValue(t,e,o){o&&("select"===this.name?(o.querySelectorAll("option").forEach((t=>{o.removeChild(t)})),Array.isArray(t)&&t.forEach((t=>{const e=this.tryToStringifyValue(t);if("string"==typeof e){const t=document.createElement("option");t.setAttribute("value",e),t.setAttribute("selected",""),o.appendChild(t)}}))):"string"==typeof e?(o.setAttribute("value",e),o.value=e):(o.removeAttribute("value"),o.value=""))}validateName(t){((t,e,o)=>{(0,n.d)(t,"_name",e,o)})(this.component,t,{hooks:{afterPatch:()=>{this.setAttribute("name",this.formAssociated,this.component.state._name)}}}),void 0===t&&(0,i.d)("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(s&&"string"==typeof t){const e=document.querySelector(t);e&&(this.syncToOwnInput=e)}}componentWillLoad(){this.validateName(this.component._name),this.validateSyncValueBySelector(this.component._syncValueBySelector)}}},9863:(t,e,o)=>{o.d(e,{I:()=>p,g:()=>h,v:()=>d});var n=o(2946),i=o(4707),s=o(1860),a=o(8713),l=o(9865),r=o(4064),c=o(3929);const h=t=>{const e="string"==typeof t._error&&t._error.length>0&&!0===t._touched,o="string"==typeof t._hint&&t._hint.length>0,n=[];return!0===e&&n.push(`${t._id}-error`),!0===o&&n.push(`${t._id}-hint`),{hasError:e,hasHint:o,ariaDescribedBy:n}},d=(t,e,o)=>{(0,n.a)(t,"_hideError",e,o)};class u extends c.A{constructor(t,e,o){super(t,e,o),this.component=t}validateAlert(t){(0,n.a)(this.component,"_alert",t)}validateTouched(t){((t,e)=>{(0,n.a)(t,"_touched",e)})(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAlert(this.component._alert),this.validateTouched(this.component._touched)}}class p extends u{constructor(t,e,o){super(t,e,o),this.valueChangeListeners=[],this.onFacade={onBlur:this.onBlur.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onFocus:this.onFocus.bind(this)},this.component=t}validateAccessKey(t){(0,n.d)(this.component,"_accessKey",t)}validateAdjustHeight(t){((t,e)=>{(0,n.a)(t,"_adjustHeight",e)})(this.component,t)}validateDisabled(t){(0,n.a)(this.component,"_disabled",t),!0===t&&(0,a.e)()}validateError(t){(0,n.d)(this.component,"_error",t)}validateHideLabel(t){(0,i.v)(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideLabel&&(0,a.a)("Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.")}}})}validateHint(t){(0,n.d)(this.component,"_hint",t)}validateId(t){(0,n.d)(this.component,"_id",t,{hooks:{afterPatch:()=>{this.setAttribute("id",this.formAssociated,this.component.state._id)}},minLength:1}),""!==t&&void 0!==t||(0,a.d)("Eine eindeutige ID an den Eingabefeldern ist nicht zwingend erforderlich, könnte aber für die E2E-Tests relevant sein.")}validateLabel(t){(0,s.a)(this.component,t)}validateOn(t){"object"==typeof t&&(0,n.s)(this.component,"_on",t)}validateSmartButton(t){(0,n.o)(t,(()=>{try{t=(0,n.p)(t)}catch(t){}(0,n.s)(this.component,"_smartButton",t)}))}validateTabIndex(t){(0,r.v)(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAccessKey(this.component._accessKey),this.validateAdjustHeight(this.component._adjustHeight),this.validateError(this.component._error),this.validateDisabled(this.component._disabled),this.validateHideLabel(this.component._hideLabel),this.validateHint(this.component._hint),this.validateId(this.component._id),this.validateLabel(this.component._label),this.validateSmartButton(this.component._smartButton),this.validateOn(this.component._on),this.validateTabIndex(this.component._tabIndex)}onBlur(t){var e;this.component._alert=!0,this.component._touched=!0,(0,l.s)(t),(0,l.t)("blur",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onBlur)&&this.component._on.onBlur(t)}onChange(t){var e;const o=t.target.value;(0,l.s)(t),(0,l.t)("change",this.host,o),this.setFormAssociatedValue(o),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onChange)&&this.component._on.onChange(t,o),this.valueChangeListeners.forEach((t=>t(o)))}onClick(t){var e;(0,l.s)(t),(0,l.t)("click",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onClick)&&this.component._on.onClick(t)}onFocus(t){var e;this.component._alert=!0,(0,l.s)(t),(0,l.t)("focus",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onFocus)&&this.component._on.onFocus(t)}setValue(t,e){var o;this.setFormAssociatedValue(e),"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onChange)&&this.component._on.onChange(t,e)}addValueChangeListener(t){this.valueChangeListeners.push(t)}}},9826:(t,e,o)=>{o.d(e,{I:()=>r});var n=o(7470),i=o(2946),s=o(2180),a=o(9863);const l=(t,e)=>{const o=t;"object"==typeof o&&null!==o&&((0,s.i)(o.right,1)&&(o.right={icon:o.right}),(0,s.i)(o.left,1)&&(o.left={icon:o.left}),e.set("_icons",o))};class r extends a.I{constructor(t,e,o){super(t,e,o),this.component=t}validateIcon(t){this.validateIcons(t)}validateIcons(t){(0,i.o)(t,(()=>{try{t=(0,i.p)(t)}catch(t){}(0,i.w)(this.component,"_icons",(t=>"object"==typeof t&&null!==t&&((0,s.i)(t.left,1)||(0,n.i)(t.left)||(0,s.i)(t.right,1)||(0,n.i)(t.right))),new Set(["KoliBriHorizontalIcon"]),t,{hooks:{beforePatch:l},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons||this.component._icon)}}},9865:(t,e,o)=>{function n(t){t.stopImmediatePropagation(),t.stopPropagation()}function i(t,e,o){e&&function(t,e,o){const n=t.dispatchEvent(function(t,e){return new CustomEvent(`kol-${t}`,{bubbles:!0,cancelable:!0,composed:!0,detail:e})}(e,o))}(e,t,o)}o.d(e,{s:()=>n,t:()=>i})},4707:(t,e,o)=>{o.d(e,{v:()=>i});var n=o(2946);const i=(t,e,o={})=>{(0,n.a)(t,"_hideLabel",e,o)}},7470:(t,e,o)=>{o.d(e,{i:()=>a,v:()=>l});var n=o(2946),i=o(2180);const s=(t,e,o)=>{(0,i.c)(o)?t[e]=o:(0,i.i)(o,1)&&(t[e]={icon:o})},a=t=>"object"==typeof t&&null!==t&&(void 0===t.style||(0,i.b)(t.style))&&(0,i.i)(t.icon,1),l=(t,e)=>{(0,n.o)(e,(()=>{try{e=(0,n.p)(e)}catch(t){}(0,n.w)(t,"_icons",(t=>null===t||(0,i.i)(t,1)||"object"==typeof t&&null!==t&&((0,i.i)(t.left,1)||a(t.left)||(0,i.i)(t.right,1)||a(t.right)||(0,i.i)(t.top,1)||a(t.top)||(0,i.i)(t.bottom,1)||a(t.bottom))),new Set(["KoliBriIcon"]),e,{hooks:{beforePatch:(e,o)=>{null===e&&o.set("_icons",{}),(t=>{var e,o,n;if(null===(e=t.nextState)||void 0===e?void 0:e.has("_icons")){const e=null===(o=t.nextState)||void 0===o?void 0:o.get("_icons");null===(n=t.nextState)||void 0===n||n.set("_icons",(t=>{let e={};return(0,i.i)(t,1)?e={left:{icon:t}}:"object"==typeof t&&null!==t&&(s(e,"top",t.top),s(e,"right",t.right),s(e,"bottom",t.bottom),s(e,"left",t.left)),e})(e))}})(t)}},required:!0})}))}},1860:(t,e,o)=>{o.d(e,{a:()=>d,c:()=>r,h:()=>l,v:()=>h});var n=o(8713),i=o(2946);const s=/[a-zA-Z0-9äöüÄÖÜß]/g,a=/^\d+$/;function l(t,e=1){return function(t){var e;return"string"==typeof t&&(null===(e=t.match(s))||void 0===e?void 0:e.length)||0}(t)>=e}function r(t){return a.test(t)}const c=new Set(["string"]),h=(t,e,o={})=>{(0,i.w)(t,"_label",(t=>"string"==typeof t),c,e,function(t){var e;return{hooks:{afterPatch:(e,o,i,s)=>{var a,c;"function"==typeof(null===(a=t.hooks)||void 0===a?void 0:a.afterPatch)&&(null===(c=t.hooks)||void 0===c||c.afterPatch(e,o,i,s)),"string"==typeof e&&!1===l(e,3)&&!1===r(e)&&(0,n.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,n.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=t.hooks)||void 0===e?void 0:e.beforePatch}}}(o))},d=h},4064:(t,e,o)=>{o.d(e,{v:()=>a});var n=o(8713),i=o(2946);const s={hooks:{afterPatch:t=>{-1!==t&&0!==t&&(0,n.a)("Don’t Use Tabindex Greater than 0: https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html")}}},a=(t,e)=>{(0,i.e)(t,"_tabIndex",e,s)}}}]);