@public-ui/sample-react 1.7.13 → 1.7.15

package/dist/main.js.LICENSE.txt

@@ -33,7 +33,7 @@
  */
 
 /**
- * @remix-run/router v1.15.1
+ * @remix-run/router v1.15.3
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -44,7 +44,7 @@
  */
 
 /**
- * React Router v6.22.1
+ * React Router v6.22.3
  *
  * Copyright (c) Remix Software Inc.
  *

package/package.json

@@ -1,37 +1,37 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "1.7.13",
+  "version": "1.7.15",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "dependencies": {
     "@leanup/stack": "1.3.49",
     "@leanup/stack-react": "1.3.49",
     "@leanup/stack-webpack": "1.3.49",
-    "@public-ui/components": "1.7.13",
-    "@public-ui/react": "1.7.13",
-    "@public-ui/themes": "1.7.13",
-    "@types/node": "20.11.19",
-    "@types/react": "18.2.57",
-    "@types/react-dom": "18.2.19",
+    "@public-ui/components": "1.7.15",
+    "@public-ui/react": "1.7.15",
+    "@public-ui/themes": "1.7.15",
+    "@types/node": "20.11.25",
+    "@types/react": "18.2.64",
+    "@types/react-dom": "18.2.21",
     "@unocss/preset-uno": "0.58.5",
     "@unocss/webpack": "0.58.5",
     "ajv": "8.12.0",
-    "chromedriver": "121.0.2",
+    "chromedriver": "122.0.4",
     "cpy-cli": "5.0.0",
     "eslint-plugin-jsx-a11y": "6.8.0",
-    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-react": "7.34.0",
     "formik": "2.4.5",
     "nightwatch-axe-verbose": "2.3.0",
     "npm-run-all": "4.1.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router": "6.22.1",
-    "react-router-dom": "6.22.1",
+    "react-router": "6.22.3",
+    "react-router-dom": "6.22.3",
     "rimraf": "3.0.2",
     "ts-prune": "0.10.3",
-    "typescript": "5.3.3",
+    "typescript": "5.4.2",
     "world_countries_lists": "2.9.0",
-    "yup": "1.3.3"
+    "yup": "1.4.0"
   },
   "files": [
     ".eslintignore",

package/src/App.tsx

@@ -5,12 +5,12 @@ import { Route as MyRoute, Routes as MyRoutes } from './shares/types';
 import { Option } from '@public-ui/components';
 import PackageJson from '@public-ui/components/package.json';
 import { KolAlert, KolBadge } from '@public-ui/react';
-import { HideMenusContext } from './shares/HideMenusContext';
 import { useLocation } from 'react-router';
 import { Sidebar } from './components/Sidebar';
+import { HideMenusContext } from './shares/HideMenusContext';
 import { ROUTES } from './shares/routes';
 import { getTheme, getThemeName, setStorage, setTheme } from './shares/store';
-import { THEME_OPTIONS, Theme, isDraftTheme } from './shares/theme';
+import { THEMES, THEME_OPTIONS, Theme, isDraftTheme } from './shares/theme';
 
 import { BackPage } from './components/BackPage';
 
@@ -46,19 +46,17 @@ const getRouteTree = (routes: MyRoutes): ReturnType<typeof Route>[] => {
 						path={`${path}/all`}
 						element={
 							<div className="d-grid gap-4">
-								{THEME_OPTIONS.filter((theme) => ['bmf', 'default', 'ecl-ec', 'ecl-eu', 'itzbund'].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">
-												<strong>{theme.label}</strong>
-											</div>
-											<div className="my-2">
-												<ThisRoute />
-											</div>
-											<hr aria-hidden="true" />
+								{THEME_OPTIONS.filter((theme) => THEMES.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">
+											<strong>{theme.label}</strong>
+										</div>
+										<div className="my-2">
+											<ThisRoute />
 										</div>
-									),
-								)}
+										<hr aria-hidden="true" />
+									</div>
+								))}
 							</div>
 						}
 					/>,
@@ -136,7 +134,7 @@ export const App: FC = () => {
 					{!hideMenus && isDraftTheme(theme) && <KolBadge className="mb-3" _label="DRAFT" _color="#db5461" />}
 					<Routes>
 						{ROUTE_TREE}
-						<Route path="*" element={<KolAlert _type="info">This code example has not been migrated yet - it&#39;s coming soon!</KolAlert>} />
+						<Route path="*" element={<Navigate to={ROUTE_LIST[0]} replace />} />
 						<Route path="back-page" element={<BackPage />} />
 					</Routes>
 				</div>

package/src/components/Sidebar.tsx

@@ -44,7 +44,7 @@ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample,
 
 	const handlePreviousClick = () => {
 		const currentIndex = getIndexOfSample();
-		const nextIndex = currentIndex === 0 ? routeList.length - 1 : currentIndex - 1;
+		const nextIndex = currentIndex <= 0 ? routeList.length - 1 : currentIndex - 1;
 		location.replace(`#${routeList[nextIndex]}`);
 	};
 

package/src/components/handout/basic.tsx

@@ -722,8 +722,8 @@ export const HandoutBasic: FC = () => (
 				).
 			</KolDetails>
 		</div>
-		<div className="grid gap-4 grid-cols-12">
-			<KolCard className="col-span-2" _heading="Heading" _level={2}>
+		<div className="grid gap-4 sm:grid-cols-6 md:grid-cols-6  xl:grid-cols-12">
+			<KolCard className="col-span-6 sm:col-span-6 md:col-span-3 xl:col-span-2" _heading="Heading" _level={2}>
 				<div slot="content" className="grid gap-2 p-2">
 					<KolHeading _label="Überschrift Stufe 1" _level={1}></KolHeading>
 					<KolHeading _label="Überschrift Stufe 2" _level={2}></KolHeading>
@@ -756,7 +756,7 @@ export const HandoutBasic: FC = () => (
 					</KolAccordion>
 				</div>
 			</KolCard> */}
-			<KolCard className="col-span-2" _heading="Abbreviation and Progress" _level={2}>
+			<KolCard className="col-span-6 sm:col-span-6 md:col-span-3 xl:col-span-2" _heading="Abbreviation and Progress" _level={2}>
 				<div slot="content" className="grid gap-2 p-2">
 					<p>
 						Ich bin eine{' '}
@@ -792,7 +792,7 @@ export const HandoutBasic: FC = () => (
 					</div>
 				</div>
 			</KolCard>
-			<KolCard className="col-span-3" _heading="Button, LinkButton and Tab" _level={2}>
+			<KolCard className="col-span-6 sm:col-span-6 md:col-span-6 xl:col-span-3" _heading="Button, LinkButton and Tab" _level={2}>
 				<div slot="content" className="grid gap-2 p-2">
 					<KolTabs _ariaLabel="" _selected={0} _tabs={[{ _label: 'Button' }, { _label: 'LinkButton' }, { _label: 'Disabled Tab', _disabled: true }]}>
 						<div className="grid gap-2 py-2">
@@ -870,7 +870,7 @@ export const HandoutBasic: FC = () => (
 					</KolTabs>
 				</div>
 			</KolCard>
-			<KolCard className="col-span-2" _heading="Accordion, Link and ButtonLink" _level={2}>
+			<KolCard className="col-span-6 sm:col-span-6 md:col-span-2 xl:col-span-2" _heading="Accordion, Link and ButtonLink" _level={2}>
 				<div slot="content" className="grid gap-2 p-2">
 					<KolAccordion _heading="Links" _level={3} _open>
 						<div className="grid gap-2" slot="content">
@@ -910,7 +910,7 @@ export const HandoutBasic: FC = () => (
 					</KolAccordion>
 				</div>
 			</KolCard>
-			<KolCard className="col-span-3" _heading="Alert" _level={2}>
+			<KolCard className="col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-3" _heading="Alert" _level={2}>
 				<div slot="content" className="grid gap-2 p-2">
 					<KolAlert _heading="Default message" _type="default">
 						This is the text of the alert.
@@ -927,7 +927,7 @@ export const HandoutBasic: FC = () => (
 					</KolAlert>
 				</div>
 			</KolCard>
-			<KolCard className="col-span-2" _heading="Nav and Breadcrumb" _level={2}>
+			<KolCard className="col-span-6 sm:col-span-6 md:col-span-2 xl:col-span-2" _heading="Nav and Breadcrumb" _level={2}>
 				<div slot="content" className="grid gap-2 p-2">
 					<div>
 						<KolNav
@@ -998,7 +998,7 @@ export const HandoutBasic: FC = () => (
 					</div>
 				</div>
 			</KolCard>
-			<KolCard className="col-span-5" _heading="Input" _level={2}>
+			<KolCard className="col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-5" _heading="Input" _level={2}>
 				<KolForm slot="content">
 					<div className="grid gap-4 grid-cols-3 p-2">
 						<KolInputColor>Farbe</KolInputColor>
@@ -1029,7 +1029,7 @@ export const HandoutBasic: FC = () => (
 					</div>
 				</KolForm>
 			</KolCard>
-			<KolCard className="col-span-5" _heading="Table with Pagination" _level={2}>
+			<KolCard className="col-span-6 sm:col-span-6 md:col-span-6 xl:col-span-5" _heading="Table with Pagination" _level={2}>
 				<div slot="content" className="grid gap-2 p-2">
 					<KolTable _caption="Tabelle" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTable>
 				</div>

package/src/react.main.tsx

@@ -2,7 +2,7 @@ import React, { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { HashRouter as Router } from 'react-router-dom';
 
-import { register } from '@public-ui/components';
+import { bootstrap } from '@public-ui/components';
 import { defineCustomElements } from '@public-ui/components/dist/loader';
 import { BMF, DEFAULT, ECL_EC, ECL_EU, ITZBund } from '@public-ui/themes';
 import type { Generic } from 'adopted-style-sheets';
@@ -15,17 +15,24 @@ void (async () => {
 		/* Visual regression testing mode: Themes are overridden with a certain theme module, that should be used instead. */
 		const { [(process.env.THEME_EXPORT as string) ?? 'default']: theme } = (await import(process.env.THEME_MODULE)) as Record<string, Theme>;
 		try {
-			await register([theme], defineCustomElements);
+			await bootstrap([theme], defineCustomElements, {
+				translation: {
+					name: 'de',
+				},
+			});
 		} catch (error) {
 			console.warn('Theme registration failed:', error);
 		}
 	} else {
 		/* Regular mode: Register all known themes. */
 		try {
-			await register([BMF, DEFAULT, ECL_EC, ECL_EU, ITZBund], defineCustomElements, {
+			await bootstrap([BMF, DEFAULT, ECL_EC, ECL_EU, ITZBund], defineCustomElements, {
 				theme: {
 					detect: 'auto',
 				},
+				translation: {
+					name: 'de',
+				},
 			});
 		} catch (error) {
 			console.warn('Theme registration failed:', error);

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

@@ -77,7 +77,6 @@ export function AppointmentForm() {
 	}, [activeFormSection]);
 
 	const handleSubmit = async (_values: FormValues, formik: FormikHelpers<FormValues>) => {
-		console.log(_values, formik);
 		const currentSectionIndex = formSectionSequence.indexOf(activeFormSection);
 		const nextSection = formSectionSequence[currentSectionIndex + 1];
 		if (nextSection !== undefined) {

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

@@ -1,22 +1,27 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { KolButton, KolForm, KolHeading, KolInputDate, KolInputRadio, KolSpin } from '@public-ui/react';
 import { FormValues } from './AppointmentForm';
 import { Field, FieldProps, useFormikContext } from 'formik';
 import { fetchAvailableTimes } from './appointmentService';
 import { Option } from '@public-ui/components/src';
-import { createErrorList } from './formUtils';
+import { createErrorList, focusErrorList } from './formUtils';
 
 export function AvailableAppointmentsForm() {
 	const form = useFormikContext<FormValues>();
 
 	const [sectionSubmitted, setSectionSubmitted] = useState(false);
 	const [availableTimes, setAvailableTimes] = useState<Option<string>[] | null>(null);
+	const [schouldFocusErrorList, setSchouldFocusErrorList] = useState(true);
 	const errorList = createErrorList(form.errors);
+	const formikRef = useRef(null);
 
 	useEffect(() => {
 		let ignoreResponse = false;
 		setAvailableTimes(null);
-
+		if (schouldFocusErrorList && sectionSubmitted) {
+			focusErrorList(errorList, formikRef);
+			setSchouldFocusErrorList(false);
+		}
 		if (form.values.date) {
 			fetchAvailableTimes().then(
 				(times) => {
@@ -32,17 +37,19 @@ export function AvailableAppointmentsForm() {
 		return () => {
 			ignoreResponse = true;
 		};
-	}, [form.values.date]);
+	}, [form.values.date, sectionSubmitted]);
 
 	return (
 		<div className="p-2">
 			<KolHeading _level={2} _label="Wählen Sie einen Termin aus"></KolHeading>
 			<KolForm
+				ref={formikRef}
 				_errorList={sectionSubmitted ? errorList : []}
 				_on={{
 					onSubmit: () => {
 						void form.submitForm();
 						setSectionSubmitted(true);
+						focusErrorList(errorList, formikRef);
 					},
 				}}
 			>

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

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { KolButton, KolForm, KolHeading, KolSelect } from '@public-ui/react';
 import { Field, FieldProps, useFormikContext } from 'formik';
 import { FormValues } from './AppointmentForm';
-import { createErrorList } from './formUtils';
+import { createErrorList, focusErrorList } from './formUtils';
 
 const LOCATION_OPTIONS = [
 	{
@@ -31,16 +31,23 @@ export function DistrictForm() {
 	const form = useFormikContext<FormValues>();
 	const [sectionSubmitted, setSectionSubmitted] = useState(false);
 	const errorList = createErrorList(form.errors);
+	const formikRef = useRef<HTMLKolFormElement>(null);
+
+	useEffect(() => {
+		focusErrorList(errorList, formikRef);
+	}, [sectionSubmitted]);
 
 	return (
 		<div className="p-2">
 			<KolHeading _level={2} _label="Wählen Sie einen Stadtteil aus"></KolHeading>
 			<KolForm
+				ref={formikRef}
 				_errorList={sectionSubmitted ? errorList : []}
 				_on={{
 					onSubmit: () => {
 						void form.submitForm();
 						setSectionSubmitted(true);
+						focusErrorList(errorList, formikRef);
 					},
 				}}
 			>

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

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { KolButton, KolForm, KolHeading, KolInputEmail, KolInputText, KolSelect } from '@public-ui/react';
 import { Field, FieldProps, useFormikContext } from 'formik';
 import { FormValues } from './AppointmentForm';
-import { createErrorList } from './formUtils';
+import { createErrorList, focusErrorList } from './formUtils';
 
 const SALUTATION_OPTIONS = [
 	{
@@ -27,16 +27,23 @@ export function PersonalInformationForm() {
 	const form = useFormikContext<FormValues>();
 	const [sectionSubmitted, setSectionSubmitted] = useState(false);
 	const errorList = createErrorList(form.errors);
+	const formikRef = useRef(null);
+
+	useEffect(() => {
+		focusErrorList(errorList, formikRef);
+	}, [sectionSubmitted]);
 
 	return (
 		<div className="p-2">
 			<KolHeading _level={2} _label="Geben Sie Ihre Kontaktdaten ein"></KolHeading>
 			<KolForm
+				ref={formikRef}
 				_errorList={sectionSubmitted ? errorList : []}
 				_on={{
 					onSubmit: () => {
 						void form.submitForm();
 						setSectionSubmitted(true);
+						focusErrorList(errorList, formikRef);
 					},
 				}}
 			>

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

@@ -6,3 +6,9 @@ export function createErrorList(formikErrors: Record<string, string>): ErrorList
 		selector: `#field-${fieldName}`,
 	}));
 }
+
+export function focusErrorList(errorList: ErrorListPropType[], formikRef: React.RefObject<HTMLKolFormElement>) {
+	if (errorList.length > 0 && formikRef && formikRef.current) {
+		formikRef.current.focusErrorList().catch(console.warn);
+	}
+}

package/src/scenarios/static-form.tsx

@@ -15,34 +15,51 @@ import {
 } from '@public-ui/react';
 import type { FC } from 'react';
 import React from 'react';
+import { SampleDescription } from '../components/SampleDescription';
 
 export const StaticForm: FC = () => {
+	const { searchParams } = new URL(location.href);
+
 	return (
 		<>
-			<p>This sample shows how you can use KoliBri in static form context, too.</p>
-			<ol>
-				<li>
-					First you have to enable the <code>experimental mode</code>:{' '}
-					<code className="bg-gray-200">&lt;meta name=&quot;kolibri&quot; content=&quot;dev-mode=false;experimental-mode=true;&quot; /&gt;</code>
-				</li>
-				<li>
-					Currently you have to use a native <code>form</code> element: <code className="bg-gray-200">&lt;form method=&quot;GET&quot;&gt;...&lt;/form&gt;</code>
-				</li>
-				<li>
-					It is important in static usage to give every input a <code>name</code> attribute:{' '}
-					<code className="bg-gray-200">&lt;KolInputColor _name=&quot;color&quot; _label=&quot;Color&quot; /&gt;</code>
-				</li>
-				<li>
-					Last of all one button should have the type <code>submit</code>:{' '}
-					<code className="bg-gray-200">&lt;KolButton _label=&quot;Submit&quot; _type=&quot;submit&quot; _variant=&quot;primary&quot; /&gt;</code>
-				</li>
-			</ol>
-			<form className="grid gap-4" method="get">
+			<SampleDescription>
+				<p>This sample shows how you can use KoliBri in static form context, too.</p>
+				<ol>
+					<li>
+						First you have to enable the <code>experimental mode</code>:{' '}
+						<code className="bg-gray-200">&lt;meta name=&quot;kolibri&quot; content=&quot;dev-mode=false;experimental-mode=true;&quot; /&gt;</code>
+					</li>
+					<li>
+						Currently you have to use a native <code>form</code> element:{' '}
+						<code className="bg-gray-200">&lt;form method=&quot;GET&quot;&gt;...&lt;/form&gt;</code>
+					</li>
+					<li>
+						It is important in static usage to give every input a <code>name</code> attribute:{' '}
+						<code className="bg-gray-200">&lt;KolInputColor _name=&quot;color&quot; _label=&quot;Color&quot; /&gt;</code>
+					</li>
+					<li>
+						Last of all one button should have the type <code>submit</code>:{' '}
+						<code className="bg-gray-200">&lt;KolButton _label=&quot;Submit&quot; _type=&quot;submit&quot; _variant=&quot;primary&quot; /&gt;</code>
+					</li>
+				</ol>
+			</SampleDescription>
+
+			{searchParams.size > 0 && (
+				<>
+					<h2>Submitted data</h2>
+					<pre>
+						<code>{JSON.stringify(Object.fromEntries(searchParams.entries()), null, 2)}</code>
+					</pre>
+				</>
+			)}
+
+			<form className="grid gap-4" method="get" noValidate>
 				<KolInputCheckbox _name="checkbox" _label="Checkbox" />
 				<KolInputColor _name="color" _label="Color" />
 				<KolInputDate _name="date" _label="Date" />
 				<KolInputEmail _name="email" _label="Email" />
 				<KolInputFile _name="file" _label="File" />
+				<KolInputFile _name="file" _label="Files (multiple)" _multiple />
 				<KolInputNumber _name="number" _label="Number" />
 				<KolInputPassword _name="password" _label="Password" />
 				<KolInputRadio
@@ -63,11 +80,24 @@ export const StaticForm: FC = () => {
 						{ label: 'Option B', value: 'B' },
 					]}
 				/>
-				<KolTextarea _name="textarea" _label="Textarea" />
+				<KolSelect
+					_name="select"
+					_label="Select (multiple)"
+					_multiple
+					_options={[
+						{ label: 'Option A', value: 'A' },
+						{ label: 'Option B', value: 'B' },
+					]}
+					_rows={2}
+				/>
+				<KolTextarea _name="textarea" _label="Textarea" _rows={5} />
 				<div className="flex flex-wrap gap-4">
 					<KolButton _label="Submit" _type="submit" _variant="primary" />
 					<KolButton _label="Reset" _type="reset" />
 				</div>
+
+				{/* Add a random string to allow the form to be always submitted. Without it, if theres no change to the data, the form simply won't submit when requested. */}
+				<input type="hidden" value={crypto.randomUUID()} name="random" />
 			</form>
 		</>
 	);

package/src/shares/theme.ts

@@ -1,6 +1,7 @@
 import { SelectOption } from '@public-ui/components';
 
-export type Theme = 'bmf' | 'default' | 'ecl-ec' | 'ecl-eu' | 'itzbund' | 'unstyled';
+export const THEMES = ['bmf', 'default', 'ecl-ec', 'ecl-eu', 'itzbund'] as const;
+export type Theme = (typeof THEMES)[number] | 'unstyled';
 
 const drafts: Theme[] = ['ecl-ec', 'ecl-eu', 'itzbund'];
 

package/dist/2104.js

@@ -1,2 +0,0 @@
-/*! For license information please see 2104.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[2104],{488:(e,t,r)=>{r.d(t,{a:()=>s,b:()=>g,c:()=>v,d:()=>a,e:()=>c,f:()=>h,g:()=>b,h:()=>u,u:()=>p});var n=r(9872);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.warn([e].concat((null==t?void 0:t.details)||[]),{classifier:"🔥 deprecated",overwriteStyle:"; background-color: #f00"}))},l=new Set,a=(e,t)=>{(!1===l.has(e)||(null==t?void 0:t.force))&&(l.add(e),n.L.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"💻 dev",overwriteStyle:"; background-color: #f09"}))},u=(e,t)=>{(!1===l.has(e)||(null==t?void 0:t.force))&&(l.add(e),n.L.warn([e].concat((null==t?void 0:t.details)||[]),{classifier:"💻 dev",overwriteStyle:"; background-color: #f09"}))},d=new Set,h=(e,t=!1,r)=>{(!1===d.has(e)||(null==r?void 0:r.force))&&(d.add(e),e+=!0===t?" ✅":"",n.L.debug([e].concat((null==r?void 0:r.details)||[]),{classifier:"🌟 feature",overwriteStyle:"; background-color: #309"}))};a("Wir freuen uns über jedes Feedback, Kommentare, Screenshots oder Demo-Links von einer auf KoliBri-basierenden Anwendung (kolibri@itzbund.de). Vielen Dank!");const f=new Set,p=(e,t)=>{(!1===f.has(e)||(null==t?void 0:t.force))&&(f.add(e),n.L.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"📑 ui/ux",overwriteStyle:"; background-color: #060;"}))},b=()=>{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')},g=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")},v=(e,t=8)=>{t>7&&p(`[${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`)}},2104:(e,t,r)=>{r.d(t,{K:()=>Me,a:()=>ce,b:()=>X,c:()=>ue,d:()=>le,e:()=>ae,f:()=>ne,g:()=>re,h:()=>Te,i:()=>me,j:()=>Le,k:()=>we,l:()=>ye,m:()=>pe,n:()=>Oe,o:()=>te,p:()=>ve,q:()=>Ne,r:()=>b,s:()=>oe,t:()=>Se,u:()=>Ee,v:()=>be,w:()=>ie});var n=r(7916),o=r(488),s=r(9872);const i=(e,t)=>{t.forEach((t=>{!1===e.has(t)&&e.add(t)}))},c=(e,t=document)=>{if(t instanceof Document||t instanceof HTMLElement||t instanceof ShadowRoot){const r=new Set;i(r,t.querySelectorAll(e));const n=t.querySelectorAll('[class*="hydrated"]');for(let t=0;t<n.length;t++){const o=n[t].shadowRoot;i(r,c(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.")},l=(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=l(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={exports:{}};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=p(t[0],!0),n=p(t[1],!0),o=p(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=p(t[0],!0),n=p(t[1],!0),o=p(t[2],!0),s=p(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=p(null!=e.r?e.r:null!=e.red?e.red:0,!0),r=p(null!=e.g?e.g:null!=e.green?e.green:0,!0),n=p(null!=e.b?e.b:null!=e.blue?e.blue:0,!0),o=p(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=p(e[0],!0),r=p(e[1],!0),n=p(e[2],!0),o=p(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 p(e,t){return"number"!=typeof e||!0===t&&Math.floor(e)!==e?-1:e>=0&&e<=255?e:-1}a.exports=u,a.exports.arr=u,a.exports.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.exports.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.exports.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.exports.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 b=a.exports;function g(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}const m=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 y(e,t){if(e){const r=e.indexOf(t);0<=r&&e.splice(r,1)}}class w{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(g(r))try{r()}catch(t){e=t instanceof m?t.errors:[t]}const{_finalizers:n}=this;if(n){this._finalizers=null;for(const t of n)try{k(t)}catch(t){e=null!=e?e:[],t instanceof m?e=[...e,...t.errors]:e.push(t)}}if(e)throw new m(e)}}add(e){var t;if(e&&e!==this)if(this.closed)k(e);else{if(e instanceof w){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)&&y(t,e)}remove(e){const{_finalizers:t}=this;t&&y(t,e),e instanceof w&&e._removeParent(this)}}w.EMPTY=(()=>{const e=new w;return e.closed=!0,e})();const S=w.EMPTY;function x(e){return e instanceof w||e&&"closed"in e&&g(e.remove)&&g(e.add)&&g(e.unsubscribe)}function k(e){g(e)?e():e.unsubscribe()}const _={onUnhandledError:null,onStoppedNotification:null,Promise:void 0,useDeprecatedSynchronousErrorHandling:!1,useDeprecatedNextContext:!1},N={setTimeout(e,t,...r){const{delegate:n}=N;return(null==n?void 0:n.setTimeout)?n.setTimeout(e,t,...r):setTimeout(e,t,...r)},clearTimeout(e){const{delegate:t}=N;return((null==t?void 0:t.clearTimeout)||clearTimeout)(e)},delegate:void 0};function E(){}const A=L("C",void 0,void 0);function L(e,t,r){return{kind:e,value:t,error:r}}let O=null;function T(e){if(_.useDeprecatedSynchronousErrorHandling){const t=!O;if(t&&(O={errorThrown:!1,error:null}),e(),t){const{errorThrown:e,error:t}=O;if(O=null,e)throw t}}else e()}class M extends w{constructor(e){super(),this.isStopped=!1,e?(this.destination=e,x(e)&&e.add(this)):this.destination=$}static create(e,t,r){return new j(e,t,r)}next(e){this.isStopped?z(function(e){return L("N",e,void 0)}(e),this):this._next(e)}error(e){this.isStopped?z(L("E",void 0,e),this):(this.isStopped=!0,this._error(e))}complete(){this.isStopped?z(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 P(e,t){return C.call(e,t)}class H{constructor(e){this.partialObserver=e}next(e){const{partialObserver:t}=this;if(t.next)try{t.next(e)}catch(e){D(e)}}error(e){const{partialObserver:t}=this;if(t.error)try{t.error(e)}catch(e){D(e)}else D(e)}complete(){const{partialObserver:e}=this;if(e.complete)try{e.complete()}catch(e){D(e)}}}class j extends M{constructor(e,t,r){let n;if(super(),g(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&&_.useDeprecatedNextContext?(t=Object.create(e),t.unsubscribe=()=>this.unsubscribe(),n={next:e.next&&P(e.next,t),error:e.error&&P(e.error,t),complete:e.complete&&P(e.complete,t)}):n=e}this.destination=new H(n)}}function D(e){var t;t=e,N.setTimeout((()=>{const{onUnhandledError:e}=_;if(!e)throw t;e(t)}))}function z(e,t){const{onStoppedNotification:r}=_;r&&N.setTimeout((()=>r(e,t)))}const $={closed:!0,next:E,error:function(e){throw e},complete:E},q="function"==typeof Symbol&&Symbol.observable||"@@observable";function I(e){return e}class R{constructor(e){e&&(this._subscribe=e)}lift(e){const t=new R;return t.source=this,t.operator=e,t}subscribe(e,t,r){const n=(o=e)&&o instanceof M||function(e){return e&&g(e.next)&&g(e.error)&&g(e.complete)}(o)&&x(o)?e:new j(e,t,r);var o;return T((()=>{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=B(t))(((t,r)=>{const n=new j({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)}[q](){return this}pipe(...e){return(0===(t=e).length?I:1===t.length?t[0]:function(e){return t.reduce(((e,t)=>t(e)),e)})(this);var t}toPromise(e){return new(e=B(e))(((e,t)=>{let r;this.subscribe((e=>r=e),(e=>t(e)),(()=>e(r)))}))}}function B(e){var t;return null!==(t=null!=e?e:_.Promise)&&void 0!==t?t:Promise}R.create=e=>new R(e);const J=v((e=>function(){e(this),this.name="ObjectUnsubscribedError",this.message="object unsubscribed"}));class W extends R{constructor(){super(),this.closed=!1,this.currentObservers=null,this.observers=[],this.isStopped=!1,this.hasError=!1,this.thrownError=null}lift(e){const t=new F(this,this);return t.operator=e,t}_throwIfClosed(){if(this.closed)throw new J}next(e){T((()=>{if(this._throwIfClosed(),!this.isStopped){this.currentObservers||(this.currentObservers=Array.from(this.observers));for(const t of this.currentObservers)t.next(e)}}))}error(e){T((()=>{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(){T((()=>{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?S:(this.currentObservers=null,n.push(e),new w((()=>{this.currentObservers=null,y(n,e)})))}_checkFinalizedStatuses(e){const{hasError:t,thrownError:r,isStopped:n}=this;t?e.error(r):n&&e.complete()}asObservable(){const e=new R;return e.source=this,e}}W.create=(e,t)=>new F(e,t);class F extends W{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:S}}var U=.2126,K=.7152,Y=.0722,V=1/12.92;function Z(e){return Math.pow((e+.055)/1.055,2.4)}function G(e){var t=e[0]/255,r=e[1]/255,n=e[2]/255,o=t<=.03928?t*V:Z(t),s=r<=.03928?r*V:Z(r),i=n<=.03928?n*V:Z(n);return o*U+s*K+i*Y}function Q(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 X(e,t){return function(e,t){return function(e,t){return(Math.max(e,t)+.05)/(Math.min(e,t)+.05)}(G(e),G(t))}(Q(e),Q(t))}const ee=/\[object Object\]/,te=(e,t)=>{"string"==typeof e&&ee.test(e)||t()},re=(e,t)=>{"string"==typeof e&&""===e||t()},ne=(e,t)=>{(0,s.d)()&&(s.L.debug([e,t]),s.L.debug("↑ We propagate the (submit) event to this target.")),Object.defineProperty(e,"target",{value:t,writable:!1})},oe=(e,t,r,n={})=>{var o,s;void 0===e.nextHooks&&(e.nextHooks=new Map),void 0===e.nextState&&(e.nextState=new Map),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)},se=(e,t,r,n)=>{(0,o.d)(`[${e.constructor.name}] Der Property-Wert (${r}) für '${t}' ist nicht valide. Folgende Werte sind erlaubt: ${Array.from(n).join(", ")}`)};function ie(e,t,r,n,o,s={}){r(o)?oe(e,t,o,s.hooks):void 0===o&&!0!==s.required&&r(s.defaultValue)?oe(e,t,s.defaultValue,s.hooks):(s.required||n.add(null),se(e,t,o,n))}const ce=(e,t,r,n)=>{ie(e,t,(e=>"boolean"==typeof e),new Set(["Boolean {true, false}"]),r,n)},le=(e,t,r,n={})=>{const o="number"==typeof n.minLength?null==n?void 0:n.minLength:0;ie(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)},ae=(e,t,r,n)=>{ie(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)},ue=(e,t,r,n,o=(e=>e==e),i={})=>{re(n,(()=>{te(n,(()=>{void 0===n&&(n=[]);try{try{n=ve(n)}catch(e){}if(Array.isArray(n)){const c=n.find((e=>!r(e)));void 0===c&&o(n)?oe(e,t,n,i.hooks):te(c,(()=>{throw s.L.debug(c),new Error("↑ Das Schema für das Property (_options) ist nicht valide. Der Wert wird nicht geändert.")}))}else te(n,(()=>{throw s.L.debug(n),new Error("↑ Das Schema für das Property (_options) ist nicht valide. Der Wert wird nicht geändert.")}))}catch(e){s.L.debug(e)}}))}))},de=/^(true|false)$/,he=/^-?(0|[1-9]\d*)$/,fe=/^-?(0.|[1-9]\d*.)\d*[1-9]$/,pe=e=>{const t=typeof e,r=`${e}`;if("string"==typeof e)if(de.test(e))e="true"===e;else if(he.test(e))e=parseInt(e);else if(fe.test(e))e=parseFloat(e);else if(ge.test(e))try{e=ve(e)}catch(e){}return t!==typeof e&&(0,o.d)(`You have used a stringified property value (${r} to ${JSON.stringify(e)}) which type switched from ${t} to ${typeof e}!`),e},be=e=>{try{return JSON.stringify(e).replace(/"/g,"'")}catch(t){throw s.L.warn(["stringifyJson",e]),s.L.error("↑ Das JSON konnte nicht in einen String umgewandelt werden. Es wird ein stringifizierbares JSON erwartet."),new Error}},ge=/^[{[]/,ve=e=>{if("string"==typeof e)try{return JSON.parse(e)}catch(t){if(ge.test(e))try{return JSON.parse(e.replace(/'/g,'"'))}catch(t){s.L.warn(["parseJson",e]),s.L.error("↑ Der JSON-String konnte nicht geparsed werden. Achten Sie darauf, dass einfache Anführungszeichen im Text maskiert werden (&#8216;).")}}throw new Error},me=e=>"boolean"==typeof e?!0===e?"true":"false":void 0,ye=e=>"string"==typeof e?e:me(e),we=(e,t)=>l(e,t||(0,s.a)()),Se=(e,t)=>c(e,t||(0,s.a)());let xe=null;const ke=()=>(xe=xe||{backgroundColor:"#00000000",color:"#00000000",domNode:(0,s.a)().body,level:"Fail",score:1},xe),_e=/(\d+, ){3}0\)/,Ne=(e,t=ke())=>{const r=getComputedStyle(e),n=_e.test(r.backgroundColor)?t.backgroundColor:b.hex(r.backgroundColor),o=_e.test(r.color)?t.color:b.hex(r.color),i=X(n,o),c={backgroundColor:n,color:o,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&&s.L.error(["Color-Contrast-Error",{backgroundColor:c.backgroundColor,color:c.color,level:c.level,score:c.score},c.domNode]),c},Ee=(e,t=ke())=>{t.domNode instanceof HTMLElement&&(t=Ne(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=Ee(e,t)).domNode);n++);return t}return Ne(r,t)},Ae=(e,t=window)=>{e instanceof HTMLElement?(t.scrollTo({behavior:"smooth",top:e.getBoundingClientRect().top+(0,s.b)().pageYOffset-50}),e.focus()):(0,o.d)("Das HTMLElement ist nicht valide, zu dem gescrollt werden soll.")},Le=(e,t)=>{if((e instanceof Document||e instanceof HTMLElement||e instanceof ShadowRoot)&&"string"==typeof t){(0,o.d)("Bei der Methode querySelectorAll wurden die Parameter document, selector in selector, document getauscht, da der Parameter selector nicht, allerdings der Parameter document optional sein kann.");const r=`${t}`;t=e,e=r}if("string"==typeof e){const r=we(e,t);r instanceof HTMLElement?Ae(r):(0,o.d)(`Es konnte kein HTMLElement mit dem Selector (${e}) gefunden werden, zu dem gescrollt werden soll.`)}else(0,o.d)("Der Selector ist nicht valide, zu dem gescrollt werden soll.")};class Oe{static queryHtmlElementColors(e,t,r=!1,n=!0){let o=null;if(!0===r||!1===Oe.executionLock)if(!1===r&&(Oe.cache.clear(),Oe.cache.set(t.domNode,t),Oe.executionLock=!0,!0===n&&s.L.debug("[KoliBriUtils] Color contrast analysis started...")),e===t.domNode)o=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 s=t.domNode.children;for(let e=0;e<s.length;e++)r.add(s[e]);const i=Array.from(r);for(let r=0;r<i.length;r++){let n=Oe.cache.get(i[r]);void 0===n&&(n=Ne(i[r],t)),Oe.cache.set(i[r],n);const s=Oe.queryHtmlElementColors(e,n,!0,!1);if(null!==s){o=s;break}}}else s.L.debug("[KoliBriUtils] Call aborted because a color contrast analysis is currently being executed.");return!1===r&&(!0===n&&s.L.debug(`[KoliBriUtils] Color contrast analysis finished (${Oe.cache.size} DOM elements are analysed).`),Oe.executionLock=!1,Oe.cache.clear()),o}}Oe.executionLock=!1,Oe.cache=new Map;const Te=new W;class Me{}Me.ariaCurrentSubject=Te,Me.patchTheme=n.b,Me.patchThemeTag=n.A,Me.querySelector=we,Me.querySelectorAll=Se,Me.scrollByHTMLElement=Ae,Me.scrollBySelector=Le,Me.stringifyJson=be}}]);

package/dist/8696.js

@@ -1,2 +0,0 @@
-/*! For license information please see 8696.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[8696],{8696:(t,e,i)=>{i.r(e),i.d(e,{initialize:()=>a});var l=i(9872),r=i(2104);function n(t,e){try{Object.defineProperty((0,l.g)(),t,{get:function(){return e}})}catch(e){l.L.debug(`KoliBri property ${t} is already bind.`)}}const o=(t,e)=>l.L.debug(`${t} ${e?"":"not "}activated`),a=()=>{if((0,l.i)(),(0,l.e)()){(0,l.r)(),n("a11yColorContrast",r.q),n("querySelector",r.k),n("querySelectorAll",r.t),n("querySelectorColors",r.u),n("utils",(function(){return r.n})),n("parseJson",r.p),n("stringifyJson",r.v);const t=(0,l.a)().body,e=(0,l.a)().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,l.a)().body.appendChild(e),o("Development mode",(0,l.e)()),o("Experimental mode",(0,l.d)()),o("Color contrast analysis",(0,l.f)()),(0,l.f)()){const e=setTimeout((()=>{clearTimeout(e),setInterval((()=>{r.n.queryHtmlElementColors((0,l.a)().createElement("div"),(0,r.q)(t),!1,!1)}),1e4)}),2500)}}}}}]);

package/dist/9844.js

@@ -1,2 +0,0 @@
-/*! For license information please see 9844.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9844],{6088:(t,e,o)=>{o.d(e,{A:()=>a});var i=o(2104),n=o(488),s=o(9872);class a{constructor(t,e,o){var i,a,r,c;if(this.setFormAssociatedValue=t=>{var e;const o=null===(e=this.formAssociated)||void 0===e?void 0:e.getAttribute("name");null!==o&&""!==o||(0,n.d)(` The form field (${this.type}) must have a name attribute to be form-associated. Please define the _name attribute.`);const i=this.tryToStringifyValue(t);this.syncValue(t,i,this.formAssociated),this.syncValue(t,i,this.syncToOwnInput)},this.component=t,this.host=this.findHostWithShadowRoot(o),this.type=e,(0,s.d)()&&("KOL-BUTTON"===(c=null===(i=this.host)||void 0===i?void 0:i.tagName)||"KOL-INPUT"===c||"KOL-SELECT"===c||"KOL-TEXTAREA"===c)){switch(null===(a=this.host)||void 0===a||a.querySelectorAll("input,select,textarea").forEach((t=>{var e;null===(e=this.host)||void 0===e||e.removeChild(t)})),this.type){case"button":case"checkbox":case"color":case"date":case"email":case"file":case"number":case"password":case"radio":case"range":case"text":this.formAssociated=document.createElement("input"),this.formAssociated.setAttribute("type",this.type);break;case"select":this.formAssociated=document.createElement("select"),this.formAssociated.setAttribute("multiple","");break;case"textarea":this.formAssociated=document.createElement("textarea");break;default:this.formAssociated=document.createElement("input"),this.formAssociated.setAttribute("type","hidden")}this.formAssociated.setAttribute("aria-hidden","true"),this.formAssociated.setAttribute("data-form-associated",""),this.formAssociated.setAttribute("hidden",""),null===(r=this.host)||void 0===r||r.appendChild(this.formAssociated)}}findHostWithShadowRoot(t){for(;null===(null==t?void 0:t.shadowRoot)&&t!==document.body;)(t=null==t?void 0:t.parentNode).host&&(t=t.host);return t}setAttribute(t,e,o){if((0,s.d)())try{if("boolean"!=typeof(o="object"==typeof o&&null!==o?JSON.stringify(o):o)&&"number"!=typeof o&&"string"!=typeof o)throw new Error("Invalid value type: "+typeof o);null==e||e.setAttribute(t,`${o}`)}catch(o){null==e||e.removeAttribute(t)}}tryToStringifyValue(t){try{return"object"==typeof t&&null!==t?JSON.stringify(t).toString():null==t?null:t.toString()}catch(t){return(0,n.h)(`The form field raw value is not able to stringify! ${t}`),""}}syncValue(t,e,o){o&&("select"===this.type?(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,i.d)(t,"_name",e,o)})(this.component,t,{hooks:{afterPatch:()=>{this.setAttribute("name",this.formAssociated,this.component.state._name)}}}),void 0===t&&(0,n.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((0,s.d)()&&"string"==typeof t){const e=document.querySelector(t);e&&(this.syncToOwnInput=e)}}componentWillLoad(){this.validateName(this.component._name),this.validateSyncValueBySelector(this.component._syncValueBySelector)}}},1080:(t,e,o)=>{o.d(e,{I:()=>u,g:()=>h});var i=o(2104),n=o(7568),s=o(9536),a=o(488),r=o(1500),c=o(4112),l=o(6088);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,i=[];return!0===e&&i.push(`${t._id}-error`),!0===o&&i.push(`${t._id}-hint`),{hasError:e,hasHint:o,ariaDescribedBy:i}};class d extends l.A{constructor(t,e,o){super(t,e,o),this.component=t}validateAlert(t){(0,i.a)(this.component,"_alert",t)}validateTouched(t){((t,e)=>{(0,i.a)(t,"_touched",e)})(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAlert(this.component._alert),this.validateTouched(this.component._touched)}}class u extends d{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,i.d)(this.component,"_accessKey",t)}validateAdjustHeight(t){((t,e)=>{(0,i.a)(t,"_adjustHeight",e)})(this.component,t)}validateDisabled(t){(0,i.a)(this.component,"_disabled",t),!0===t&&(0,a.g)()}validateError(t){(0,i.d)(this.component,"_error",t)}validateHideError(t){((t,e,o)=>{(0,i.a)(t,"_hideError",e,o)})(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideError&&(0,a.a)("Property hide-error for inputs: Only use when the error message is shown outside of the input component.")}}})}validateHideLabel(t){(0,n.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,i.d)(this.component,"_hint",t)}validateId(t){(0,i.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,{required:!0})}validateOn(t){"object"==typeof t&&(0,i.s)(this.component,"_on",t)}validateSmartButton(t){(0,i.o)(t,(()=>{try{t=(0,i.p)(t)}catch(t){}(0,i.s)(this.component,"_smartButton",t)}))}validateTabIndex(t){(0,c.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.validateHideError(this.component._hideError),this.validateHideLabel(this.component._hideLabel),this.validateHint(this.component._hint),this.validateId(this.component._id),this.validateLabel(this.component._label),this.validateSmartButton(this.component._smartButton),this.validateOn(this.component._on),this.validateTabIndex(this.component._tabIndex)}onBlur(t){var e;this.component._alert=!0,this.component._touched=!0,(0,r.s)(t),(0,r.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,r.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,r.s)(t),(0,r.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,r.s)(t),(0,r.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)}}},9844:(t,e,o)=>{o.d(e,{I:()=>c});var i=o(7524),n=o(2104),s=o(5776),a=o(1080);const r=(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 c extends a.I{constructor(t,e,o){super(t,e,o),this.component=t}validateIcon(t){this.validateIcons(t)}validateIcons(t){(0,n.o)(t,(()=>{try{t=(0,n.p)(t)}catch(t){}(0,n.w)(this.component,"_icons",(t=>"object"==typeof t&&null!==t&&((0,s.i)(t.left,1)||(0,i.i)(t.left)||(0,s.i)(t.right,1)||(0,i.i)(t.right))),new Set(["KoliBriHorizontalIcon"]),t,{hooks:{beforePatch:r},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons||this.component._icon)}}},1500:(t,e,o)=>{function i(t){t.stopImmediatePropagation(),t.stopPropagation()}function n(t,e,o){e&&function(t,e,o){const i=t.dispatchEvent(function(t,e){return new CustomEvent(`kol-${t}`,{bubbles:!0,cancelable:!0,composed:!0,detail:e})}(e,o))}(e,t,o)}o.d(e,{s:()=>i,t:()=>n})},7568:(t,e,o)=>{o.d(e,{v:()=>n});var i=o(2104);const n=(t,e,o={})=>{(0,i.a)(t,"_hideLabel",e,o)}},7524:(t,e,o)=>{o.d(e,{i:()=>r,v:()=>c,w:()=>l});var i=o(2104),n=o(5776);const s=(t,e,o)=>{(0,n.c)(o)?t[e]=o:(0,n.i)(o,1)&&(t[e]={icon:o})},a=t=>{var e,o,i;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===(i=t.nextState)||void 0===i||i.set("_icons",(t=>{let e={};return(0,n.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))}},r=t=>"object"==typeof t&&null!==t&&(void 0===t.style||(0,n.b)(t.style))&&(0,n.i)(t.icon,1),c=(t,e,o={})=>{(0,i.o)(e,(()=>{var s;try{e=(0,i.p)(e)}catch(t){}(0,i.w)(t,"_icons",(t=>null===t||(0,n.i)(t,1)||"object"==typeof t&&null!==t&&((0,n.i)(t.left,1)||r(t.left)||(0,n.i)(t.right,1)||r(t.right)||(0,n.i)(t.top,1)||r(t.top)||(0,n.i)(t.bottom,1)||r(t.bottom))),new Set(["KoliBriIcon"]),e,Object.assign(Object.assign({},o),{defaultValue:{},hooks:{afterPatch:null===(s=o.hooks)||void 0===s?void 0:s.afterPatch,beforePatch:(t,e,i,n)=>{var s,r;"function"==typeof(null===(s=o.hooks)||void 0===s?void 0:s.beforePatch)&&(null===(r=o.hooks)||void 0===r||r.beforePatch(t,e,i,n)),a(i)}}}))}))},l=(t,e)=>{(0,i.w)(t,"_iconAlign",(t=>"left"===t||"right"===t),new Set(["Alignment {left, right, top, bottom}"]),e,{hooks:{beforePatch:()=>{a(t)}}})}},9536:(t,e,o)=>{o.d(e,{a:()=>d,c:()=>c,h:()=>r,v:()=>h});var i=o(488),n=o(2104);const s=/[a-zA-Z0-9äöüÄÖÜß]/g,a=/^\d+$/;function r(t,e=1){return function(t){var e;return"string"==typeof t&&(null===(e=t.match(s))||void 0===e?void 0:e.length)||0}(t)>=e}function c(t){return a.test(t)}const l=new Set(["string"]),h=(t,e,o={})=>{(0,n.w)(t,"_label",(t=>"string"==typeof t),l,e,function(t){var e;return Object.assign(Object.assign({},t),{hooks:{afterPatch:(e,o,n,s)=>{var a,l;"function"==typeof(null===(a=t.hooks)||void 0===a?void 0:a.afterPatch)&&(null===(l=t.hooks)||void 0===l||l.afterPatch(e,o,n,s)),"string"==typeof e&&!1===r(e,3)&&!1===c(e)&&(0,i.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=t.hooks)||void 0===e?void 0:e.beforePatch}})}(o))},d=h},4112:(t,e,o)=>{o.d(e,{v:()=>a});var i=o(488),n=o(2104);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")}}},a=(t,e)=>{(0,n.e)(t,"_tabIndex",e,s)}}}]);

package/dist/9844.js.LICENSE.txt

@@ -1,3 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */