@public-ui/sample-react 1.7.14 → 1.7.16

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.14",
+  "version": "1.7.16",
   "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.14",
-    "@public-ui/react": "1.7.14",
-    "@public-ui/themes": "1.7.14",
-    "@types/node": "20.11.19",
-    "@types/react": "18.2.57",
-    "@types/react-dom": "18.2.19",
-    "@unocss/preset-uno": "0.58.5",
-    "@unocss/webpack": "0.58.5",
+    "@public-ui/components": "1.7.16",
+    "@public-ui/react": "1.7.16",
+    "@public-ui/themes": "1.7.16",
+    "@types/node": "ts5.4",
+    "@types/react": "18.2.68",
+    "@types/react-dom": "18.2.22",
+    "@unocss/preset-uno": "0.58.6",
+    "@unocss/webpack": "0.58.6",
     "ajv": "8.12.0",
-    "chromedriver": "121.0.2",
+    "chromedriver": "122.0.6",
     "cpy-cli": "5.0.0",
     "eslint-plugin-jsx-a11y": "6.8.0",
-    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-react": "7.34.1",
     "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",
-    "rimraf": "3.0.2",
+    "react-router": "6.22.3",
+    "react-router-dom": "6.22.3",
+    "rimraf": "5.0.5",
     "ts-prune": "0.10.3",
-    "typescript": "5.3.3",
+    "typescript": "5.4.3",
     "world_countries_lists": "2.9.0",
-    "yup": "1.3.3"
+    "yup": "1.4.0"
   },
   "files": [
     ".eslintignore",

package/src/App.tsx

@@ -4,13 +4,13 @@ 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 { KolBadge } from '@public-ui/react';
 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 { THEMES, THEME_OPTIONS, Theme, isDraftTheme } from './shares/theme';
+import { THEMES, THEME_OPTIONS, Theme, ThemeAndUnstyled, isDraftTheme } from './shares/theme';
 
 import { BackPage } from './components/BackPage';
 
@@ -47,7 +47,7 @@ const getRouteTree = (routes: MyRoutes): ReturnType<typeof Route>[] => {
 						element={
 							<div className="d-grid gap-4">
 								{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="d-grid gap-2" key={(theme as Option<ThemeAndUnstyled>).value} data-theme={(theme as Option<ThemeAndUnstyled>).value}>
 										<div className="mt-4">
 											<strong>{theme.label}</strong>
 										</div>
@@ -102,10 +102,10 @@ ROUTE_LIST.forEach((route) => {
 export const App: FC = () => {
 	const routerLocation = useLocation();
 	const [searchParams, setSearchParams] = useSearchParams();
-	const theme: Theme = (searchParams.get('theme') as Theme) ?? getTheme();
+	const theme: ThemeAndUnstyled = (searchParams.get('theme') as ThemeAndUnstyled) ?? getTheme();
 	const hideMenus = searchParams.has('hideMenus');
 
-	setTheme(theme as Theme); // set for `getTheme` usages within the application
+	setTheme(theme); // set for `getTheme` usages within the application
 
 	document.title = `KoliBri-Handout - ${getThemeName(getTheme())} | v${PackageJson.version}`;
 	document.body.setAttribute('class', theme);
@@ -134,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/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/routes.ts

@@ -1,12 +1,10 @@
 import { Routes } from '../shares/types';
 import { AppointmentForm } from './appointment-form/AppointmentForm';
-import { TerminComponent } from './complex-form/component';
 import { CustomTooltipWidth } from './custom-tooltip-width';
 import { StaticForm } from './static-form';
 
 export const SCENARIO_ROUTES: Routes = {
 	scenarios: {
-		'complex-form': TerminComponent,
 		'appointment-form': AppointmentForm,
 		'custom-tooltip-width': CustomTooltipWidth,
 		'static-form': StaticForm,

package/src/scenarios/static-form.tsx

@@ -18,6 +18,8 @@ import React from 'react';
 import { SampleDescription } from '../components/SampleDescription';
 
 export const StaticForm: FC = () => {
+	const { searchParams } = new URL(location.href);
+
 	return (
 		<>
 			<SampleDescription>
@@ -41,6 +43,16 @@ export const StaticForm: FC = () => {
 					</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" />
@@ -83,6 +95,9 @@ export const StaticForm: FC = () => {
 					<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/store.ts

@@ -1,4 +1,4 @@
-import { isTheme, Store, Theme } from './theme';
+import { isTheme, Store, ThemeAndUnstyled } from './theme';
 import PackageJson from '@public-ui/components/package.json';
 import { THEME_OPTIONS } from './theme';
 import { Option } from '@public-ui/components';
@@ -63,7 +63,7 @@ export const getDarkMode = (): boolean => {
 	return STORE.darkMode === true;
 };
 
-export const setTheme = (theme: Theme) => {
+export const setTheme = (theme: ThemeAndUnstyled) => {
 	if (isTheme(theme)) {
 		STORE.theme = theme;
 		setStore();
@@ -72,13 +72,13 @@ export const setTheme = (theme: Theme) => {
 	}
 };
 
-export const getTheme = (): Theme => {
+export const getTheme = (): ThemeAndUnstyled => {
 	return `${STORE.theme}`;
 };
 
-export const getThemeName = (theme: Theme): string => {
+export const getThemeName = (theme: ThemeAndUnstyled): string => {
 	if (isTheme(theme)) {
-		return THEME_OPTIONS.find((option) => (option as Option<Theme>).value === theme)?.label;
+		return THEME_OPTIONS.find((option) => (option as Option<ThemeAndUnstyled>).value === theme)?.label;
 	} else {
 		throw new Error(`The theme identifier "${theme}" is not valid or an available option.`);
 	}

package/src/shares/theme.ts

@@ -1,11 +1,12 @@
 import { SelectOption } from '@public-ui/components';
 
 export const THEMES = ['bmf', 'default', 'ecl-ec', 'ecl-eu', 'itzbund'] as const;
-export type Theme = (typeof THEMES)[number] | 'unstyled';
+export type Theme = (typeof THEMES)[number];
+export type ThemeAndUnstyled = Theme | 'unstyled';
 
-const drafts: Theme[] = ['ecl-ec', 'ecl-eu', 'itzbund'];
+const drafts: ThemeAndUnstyled[] = ['ecl-ec', 'ecl-eu', 'itzbund'];
 
-export const isDraftTheme = (theme: Theme) => drafts.includes(theme);
+export const isDraftTheme = (theme: ThemeAndUnstyled) => drafts.includes(theme);
 
 export const isTheme = (value: unknown) => {
 	return (
@@ -16,10 +17,10 @@ export const isTheme = (value: unknown) => {
 
 export type Store = {
 	darkMode: boolean;
-	theme: Theme;
+	theme: ThemeAndUnstyled;
 };
 
-export const THEME_OPTIONS: SelectOption<Theme>[] = [
+export const THEME_OPTIONS: SelectOption<ThemeAndUnstyled>[] = [
 	{
 		label: 'Unstyled (Uncolored)',
 		value: 'unstyled',

package/dist/12.js

@@ -1,2 +0,0 @@
-/*! For license information please see 12.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[12],{6040:(t,e,i)=>{i.r(e),i.d(e,{initialize:()=>a});var l=i(3304),r=i(5496);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/392.js

@@ -1,2 +0,0 @@
-/*! For license information please see 392.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[392],{4008:(t,e,o)=>{o.d(e,{A:()=>a});var i=o(5496),n=o(3992),s=o(3304);class a{constructor(t,e,o){var i,a,r,c;if(this.experimentalMode=(0,s.d)(),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,this.experimentalMode&&("KOL-BUTTON"===(c=null===(i=this.host)||void 0===i?void 0:i.tagName)||"KOL-INPUT-CHECKBOX"===c||"KOL-INPUT-COLOR"===c||"KOL-INPUT-DATE"===c||"KOL-INPUT-EMAIL"===c||"KOL-INPUT-FILE"===c||"KOL-INPUT-NUMBER"===c||"KOL-INPUT-PASSWORD"===c||"KOL-INPUT-RADIO"===c||"KOL-INPUT-RANGE"===c||"KOL-INPUT-TEXT"===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"color":case"date":case"email":case"file":case"number":case"password":case"radio":case"range":case"text":this.formAssociated=document.createElement("input"),this.formAssociated.setAttribute("type",this.type);break;case"select":this.formAssociated=document.createElement("select"),this.formAssociated.setAttribute("multiple","");break;case"textarea":this.formAssociated=document.createElement("textarea");break;default:this.formAssociated=document.createElement("input"),this.formAssociated.setAttribute("type","hidden")}this.formAssociated.setAttribute("aria-hidden","true"),this.formAssociated.setAttribute("data-form-associated",""),this.formAssociated.setAttribute("hidden",""),null===(r=this.host)||void 0===r||r.appendChild(this.formAssociated)}}findHostWithShadowRoot(t){for(;null===(null==t?void 0:t.shadowRoot)&&t!==document.body;)(t=null==t?void 0:t.parentNode).host&&(t=t.host);return t}setAttribute(t,e,o){if(this.experimentalMode)try{if("boolean"!=typeof(o="object"==typeof o&&null!==o?JSON.stringify(o):o)&&"number"!=typeof o&&"string"!=typeof o)throw new Error("Invalid value type: "+typeof o);null==e||e.setAttribute(t,`${o}`)}catch(o){null==e||e.removeAttribute(t)}}tryToStringifyValue(t){try{return"object"==typeof t&&null!==t?JSON.stringify(t).toString():null==t?null:t.toString()}catch(t){return(0,n.h)(`The form field raw value is not able to stringify! ${t}`),""}}syncValue(t,e,o){if(o)switch(this.type){case"file":o.files=t;break;case"select":o.querySelectorAll("option").forEach((t=>{o.removeChild(t)})),Array.isArray(t)&&t.forEach((t=>{const e=this.tryToStringifyValue(t);if("string"==typeof e){const t=document.createElement("option");t.setAttribute("value",e),t.setAttribute("selected",""),o.appendChild(t)}}));break;default:"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(this.experimentalMode&&"string"==typeof t){const e=document.querySelector(t);e&&(this.syncToOwnInput=e)}}componentWillLoad(){this.validateName(this.component._name),this.validateSyncValueBySelector(this.component._syncValueBySelector)}}},1952:(t,e,o)=>{o.d(e,{I:()=>u,g:()=>h});var i=o(5496),n=o(5212),s=o(2528),a=o(3992),r=o(1500),c=o(5456),l=o(4008);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)}}},392:(t,e,o)=>{o.d(e,{I:()=>c});var i=o(1092),n=o(5496),s=o(5776),a=o(1952);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})},5212:(t,e,o)=>{o.d(e,{v:()=>n});var i=o(5496);const n=(t,e,o={})=>{(0,i.a)(t,"_hideLabel",e,o)}},1092:(t,e,o)=>{o.d(e,{i:()=>r,v:()=>c,w:()=>l});var i=o(5496),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)}}})}},2528:(t,e,o)=>{o.d(e,{a:()=>d,c:()=>c,h:()=>r,v:()=>h});var i=o(3992),n=o(5496);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},5456:(t,e,o)=>{o.d(e,{v:()=>a});var i=o(3992),n=o(5496);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/5496.js.LICENSE.txt

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

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

@@ -1,25 +0,0 @@
-import React, { FC, ReactNode } from 'react';
-
-import { KolForm, KolLinkGroup } from '@public-ui/react';
-
-type Props = {
-	submitted: boolean;
-	children: ReactNode;
-	onSubmit: (event: Event) => void;
-};
-
-export const FromComponent: FC<Props> = (props) => (
-	<>
-		{props.submitted === true && (
-			<KolLinkGroup tabIndex={0} class="fehlerliste" data-removed-_label="Fehlerliste" _label="Fehlerliste" _level={3} _links={[]} />
-		)}
-		<KolForm
-			className="block mb-2"
-			_on={{
-				onSubmit: props.onSubmit,
-			}}
-		>
-			{props.children}
-		</KolForm>
-	</>
-);

package/src/scenarios/complex-form/common/form/types.ts

@@ -1,13 +0,0 @@
-export type Fehler = {
-	_label: string;
-	_selector: string;
-};
-
-export type FormProps = {
-	onSubmitted: (event: Event) => void;
-};
-
-export type FormState = {
-	loader: boolean;
-	touched: boolean;
-};