@public-ui/sample-react 1.7.15 → 1.7.16

package/package.json

@@ -1,25 +1,25 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "1.7.15",
+  "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.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",
+    "@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": "122.0.4",
+    "chromedriver": "122.0.6",
     "cpy-cli": "5.0.0",
     "eslint-plugin-jsx-a11y": "6.8.0",
-    "eslint-plugin-react": "7.34.0",
+    "eslint-plugin-react": "7.34.1",
     "formik": "2.4.5",
     "nightwatch-axe-verbose": "2.3.0",
     "npm-run-all": "4.1.5",
@@ -27,9 +27,9 @@
     "react-dom": "18.2.0",
     "react-router": "6.22.3",
     "react-router-dom": "6.22.3",
-    "rimraf": "3.0.2",
+    "rimraf": "5.0.5",
     "ts-prune": "0.10.3",
-    "typescript": "5.4.2",
+    "typescript": "5.4.3",
     "world_countries_lists": "2.9.0",
     "yup": "1.4.0"
   },

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);

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/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/176.js

@@ -1,2 +0,0 @@
-/*! For license information please see 176.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[176],{6104:(t,e,o)=>{o.d(e,{A:()=>a});var i=o(7668),n=o(6084),s=o(8364);class a{constructor(t,e,o){var i,a,r,c;if(this.experimentalMode=(0,s.a)(),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)}}},6312:(t,e,o)=>{o.d(e,{I:()=>u,g:()=>h});var i=o(7668),n=o(8272),s=o(7608),a=o(6084),r=o(1500),c=o(7136),l=o(6104);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)}}},176:(t,e,o)=>{o.d(e,{I:()=>c});var i=o(960),n=o(7668),s=o(5776),a=o(6312);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})},8272:(t,e,o)=>{o.d(e,{v:()=>n});var i=o(7668);const n=(t,e,o={})=>{(0,i.a)(t,"_hideLabel",e,o)}},960:(t,e,o)=>{o.d(e,{i:()=>r,v:()=>c,w:()=>l});var i=o(7668),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)}}})}},7608:(t,e,o)=>{o.d(e,{a:()=>d,c:()=>c,h:()=>r,v:()=>h});var i=o(6084),n=o(7668);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},7136:(t,e,o)=>{o.d(e,{v:()=>a});var i=o(6084),n=o(7668);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/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;
-};

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

@@ -1,163 +0,0 @@
-import React, { FC } from 'react';
-
-import { KolHeading, KolProgress, KolTable, KolTabs } from '@public-ui/react';
-
-import { TerminKopfdatenComponent } from './kopfdaten/component';
-import { TerminLocationComponent } from './location/component';
-import { TerminScheduleComponent } from './schedule/component';
-
-type Zeiten = {
-	stadtteil: string;
-	zeiten: string;
-	montag: string;
-	dienstag: string;
-	mittwoch: string;
-	donnerstag: string;
-	freitag: string;
-};
-
-export const TerminComponent: FC = () => (
-	<>
-		<div className="grid sm:grid-cols-1 gap-2 my-3">
-			<KolHeading>Terminreservierung</KolHeading>
-			<KolHeading _level={2}>Termine für Einwohnermelde- (incl. Pass- und Ausweisangelegenheiten) und Kraftfahrzeugangelegenheiten</KolHeading>
-			<div style={{ fontFamily: 'Arial' }}>
-				<p className="py-2">Derzeit kann generell nur mit vorheriger Terminvereinbarung bei den Bürgerdiensten vorgesprochen werden.</p>
-				<p className="py-2">
-					Die Termine für Einwohnermelde- und Kraftfahrzeugangelegenheiten werden täglich ab 07:00 Uhr für den gleichen Tag, für den gleichen Tag 7 Tage und für
-					den gleichen Tag 14 Tage später freigegeben. So können Sie jeden Tag spontan Termine für den gleichen Tag und planbar Termine für eine Woche oder zwei
-					Wochen später erhalten.
-				</p>
-				<p className="py-2">
-					Sofern online keine Termine innerhalb der nächsten 14 Tage mehr verfügbar sind, führt auch eine darüber hinaus gehende telefonische Kontaktaufnahme
-					leider zu keinem anderen Ergebnis. In diesem Fall versuchen Sie es bitte am nächsten Morgen erneut.
-				</p>
-				<p className="py-2">
-					Bitte achten Sie darauf, den richtigen Kalender für Ihr Anliegen auszuwählen. Hinweis: Bitte geben Sie bei Ihrer Terminvereinbarung zur lückenlosen
-					Kontaktverfolgung immer Ihre korrekte Telefonnummer und E-Mail Adresse an. Wir behalten uns vor, gebuchte Termine mit falschen Angaben zu löschen.
-				</p>
-			</div>
-		</div>
-		<div className="grid sm:grid-cols-1 gap-2">
-			<KolTable
-				_label="Öffnungszeiten"
-				_data={
-					[
-						{
-							stadtteil: 'Brackel',
-							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, 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, 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, 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, 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>`;
-					  },*/
-						},
-					] as Zeiten[]
-				}
-				_headers={{
-					horizontal: [
-						[
-							{ label: '', asTd: true },
-							{ label: 'Tag', colSpan: 5 },
-						],
-						[
-							{
-								label: 'Stadtteil',
-								key: 'stadtteil',
-								textAlign: 'left',
-								sort: (data: Zeiten[]) => {
-									return data.sort((first, second) => {
-										if (first.stadtteil < second.stadtteil) {
-											return -1;
-										}
-										if (first.stadtteil > second.stadtteil) {
-											return 1;
-										}
-										return 0;
-									});
-								},
-							},
-							{ label: 'Montag', key: 'montag', textAlign: 'center' },
-							{ label: 'Dienstag', key: 'dienstag', textAlign: 'center' },
-							{ label: 'Mittwoch', key: 'mittwoch', textAlign: 'center' },
-							{ label: 'Donnerstag', key: 'donnerstag', textAlign: 'center' },
-							{ label: 'Freitag', key: 'freitag', textAlign: 'center' },
-						],
-					],
-				}}
-				_minWidth="50em"
-				style={{
-					display: 'inline-grid',
-					width: '100%',
-				}}
-			></KolTable>
-			<KolTabs
-				className="block mt-4"
-				_ariaLabel="Registerkarten"
-				_tabs={[
-					{
-						_label: '1. Einwohnermeldeämter',
-					},
-					{
-						_label: '2. Freie Termine',
-					},
-					{
-						_label: '3. Persönliche Daten',
-					},
-				]}
-			>
-				<div>
-					<KolHeading _level={2}>Wählen Sie einen Stadtteil aus</KolHeading>
-					<TerminLocationComponent onSubmitted={() => {}} />
-				</div>
-				<div>
-					<KolHeading _level={2}>Wählen Sie einen Termin aus</KolHeading>
-					<TerminScheduleComponent onSubmitted={() => {}} />
-				</div>
-				<div>
-					<KolHeading _level={2}>Geben Sie Ihre Kontaktdaten ein</KolHeading>
-					<TerminKopfdatenComponent onSubmitted={() => {}} />
-				</div>
-			</KolTabs>
-		</div>
-		<div className="grid sm:grid-cols-1 gap-2">
-			<div className="border-top"></div>
-			<KolHeading _level={3}>Fortschritt</KolHeading>
-			<KolProgress _value={0} _max={100} _unit="Prozent des Formulars"></KolProgress>
-		</div>
-	</>
-);

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

@@ -1,50 +0,0 @@
-import React, { FC } from 'react';
-
-import { KolAbbr, KolButton, KolInputEmail, KolInputRadio, KolInputText, KolSpin } from '@public-ui/react';
-import { FormProps } from '../common/form/types';
-import { FromComponent } from '../common/form/component';
-
-export const TerminKopfdatenComponent: FC<FormProps> = (props) => (
-	<FromComponent submitted={true} onSubmit={() => {}}>
-		<div className="grid grid-cols-2 gap-4">
-			<KolInputRadio
-				_id="anrede"
-				_list={[
-					{ label: 'Herr', value: 'Herr' },
-					{ label: 'Frau', value: 'Frau' },
-				]}
-				_touched={true}
-			></KolInputRadio>
-			<KolInputText _id="termin_kopfdaten_vorname" _type="text" _autoComplete="on" _touched={true}></KolInputText>
-			<KolInputText _id="termin_kopfdaten_nachname" _type="text" _autoComplete="on" _touched={true}></KolInputText>
-			<KolInputText _id="termin_kopfdaten_strasse" _type="text" _autoComplete="on" _touched={true}></KolInputText>
-			<div className="grid grid-cols-6 gap-4">
-				<KolInputText _id="termin_kopfdaten_plz" _type="text" _autoComplete="on" _touched={true}>
-					<KolAbbr _title="Postleitzahl" _tooltipAlign="right">
-						PLZ
-					</KolAbbr>
-				</KolInputText>
-				<KolInputText _id="termin_kopfdaten_ort" _type="text" _autoComplete="on" _touched={true}></KolInputText>
-			</div>
-			<KolInputText
-				_id="termin_kopfdaten_telefon"
-				_icon="icofont-phone"
-				_list={['01234 / 567890']}
-				_type="tel"
-				_autoComplete="on"
-				_touched={true}
-			></KolInputText>
-			<KolInputEmail
-				_id="termin_kopfdaten_email"
-				_icon="icofont-email"
-				_list={['elke.mustermann@test.de', 'max.mustermann@test.de']}
-				_touched={true}
-				_autoComplete="on"
-			></KolInputEmail>
-			<div>
-				<KolButton className="inline-block my-1" _icon="icofont-paper-plane" _type="submit" _label="Terminanfrage absenden"></KolButton>
-				<KolSpin _show={true} className="ml-4" />
-			</div>
-		</div>
-	</FromComponent>
-);

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

@@ -1,16 +0,0 @@
-import React, { FC } from 'react';
-
-import { KolButton, KolSelect, KolSpin } from '@public-ui/react';
-import { LOCATION_OPTIONS } from './location.form';
-import { FormProps } from '../common/form/types';
-import { FromComponent } from '../common/form/component';
-
-export const TerminLocationComponent: FC<FormProps> = () => (
-	<FromComponent submitted={true} onSubmit={() => {}}>
-		<div className="grid sm:grid-cols-1 xl:grid-cols-2 gap-2 my-2">
-			<KolSelect _id="termin-location-location" _list={LOCATION_OPTIONS} _touched={true}></KolSelect>
-		</div>
-		<KolButton className="inline-block my-1" _icon="icofont-arrow-right" _iconAlign="right" _label="Zur Terminauswahl" _type="submit"></KolButton>
-		<KolSpin _show={true} className="ml-4" />
-	</FromComponent>
-);

package/src/scenarios/complex-form/location/location.form.ts

@@ -1,22 +0,0 @@
-export const LOCATION_OPTIONS = [
-	{
-		value: 'Aplerbeck',
-		label: 'Aplerbeck',
-	},
-	{
-		value: 'Brackel',
-		label: 'Brackel',
-	},
-	{
-		value: 'Dorstfeld',
-		label: 'Dorstfeld',
-	},
-	{
-		value: 'Innenstadt Ost',
-		label: 'Innenstadt Ost',
-	},
-	{
-		value: 'Innenstadt West',
-		label: 'Innenstadt West',
-	},
-];

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

@@ -1,16 +0,0 @@
-import React, { FC } from 'react';
-
-import { KolButton, KolInputDate, KolSpin } from '@public-ui/react';
-import { FromComponent } from '../common/form/component';
-import { FormProps } from '../common/form/types';
-
-export const TerminScheduleComponent: FC<FormProps> = (props) => (
-	<FromComponent submitted={true} onSubmit={() => {}}>
-		<div className="grid sm:grid-cols-1 xl:grid-cols-2 gap-2 my-2">
-			<KolInputDate _id="termin-schedule-schedule" _type="date" _touched={true}></KolInputDate>
-			<KolInputDate _id="termin-schedule-time" _type="time" _touched={true}></KolInputDate>
-		</div>
-		<KolButton className="inline-block my-1" _icon="icofont-arrow-right" _iconAlign="right" _label="Zu den Kontaktdaten" _type="submit"></KolButton>
-		<KolSpin _show={true} className="ml-4" />
-	</FromComponent>
-);

package/src/scenarios/complex-form/schedule/schedule.form.ts

@@ -1,34 +0,0 @@
-import { FormControl, InputControl, RequiredValidator, ValidationHandler } from '@leanup/form';
-
-export interface Schedule {
-	schedule: string;
-	time: string;
-}
-
-export class ScheduleForm extends FormControl {
-	public constructor() {
-		super('schedule');
-
-		this.addControl(
-			new InputControl('schedule', {
-				label: 'Datum',
-				mandatory: true,
-			}),
-		);
-
-		this.addControl(
-			new InputControl('time', {
-				label: 'Uhrzeit',
-				mandatory: true,
-			}),
-		);
-
-		const validationHandler = new ValidationHandler();
-		validationHandler.validators.add([new RequiredValidator('Bitte wählen Sie ein Datum aus.')]);
-		this.getInput('schedule')?.setValidationHandler(validationHandler);
-
-		const timeHandler = new ValidationHandler();
-		timeHandler.validators.add([new RequiredValidator('Bitte wählen Sie eine Uhrzeit aus.')]);
-		this.getInput('time')?.setValidationHandler(timeHandler);
-	}
-}