@public-ui/sample-react 2.0.1 → 2.0.3

package/dist/main.js.LICENSE.txt

@@ -2,8 +2,6 @@
  * KoliBri - The accessible HTML-Standard
  */
 
-/*!__STENCIL_STATIC_IMPORT_SWITCH__*/
-
 /**
  * @license React
  * react-dom.production.min.js
@@ -35,7 +33,7 @@
  */
 
 /**
- * @remix-run/router v1.14.0
+ * @remix-run/router v1.14.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -46,7 +44,7 @@
  */
 
 /**
- * React Router v6.21.0
+ * React Router v6.21.1
  *
  * Copyright (c) Remix Software Inc.
  *

package/package.json

@@ -1,33 +1,32 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "dependencies": {
-    "@leanup/stack": "1.3.48",
-    "@leanup/stack-react": "1.3.48",
-    "@leanup/stack-webpack": "1.3.48",
-    "@public-oss/kolibri-themes": "0.0.3",
-    "@public-ui/components": "2.0.1",
-    "@public-ui/react": "2.0.1",
-    "@public-ui/themes": "2.0.1",
-    "@types/node": "20.10.5",
-    "@types/react": "18.2.45",
+    "@leanup/stack": "1.3.49",
+    "@leanup/stack-react": "1.3.49",
+    "@leanup/stack-webpack": "1.3.49",
+    "@public-ui/components": "2.0.3",
+    "@public-ui/react": "2.0.3",
+    "@public-ui/themes": "2.0.3",
+    "@types/node": "20.10.6",
+    "@types/react": "18.2.46",
     "@types/react-dom": "18.2.18",
-    "@unocss/preset-uno": "0.58.0",
-    "@unocss/webpack": "0.58.0",
+    "@unocss/preset-uno": "0.58.3",
+    "@unocss/webpack": "0.58.3",
     "ajv": "8.12.0",
-    "chromedriver": "120.0.0",
+    "chromedriver": "120.0.1",
     "cpy-cli": "5.0.0",
     "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-react": "7.33.2",
     "formik": "2.4.5",
-    "nightwatch-axe-verbose": "2.2.2",
+    "nightwatch-axe-verbose": "2.2.3",
     "npm-run-all": "4.1.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router": "6.21.0",
-    "react-router-dom": "6.21.0",
+    "react-router": "6.21.1",
+    "react-router-dom": "6.21.1",
     "rimraf": "3.0.2",
     "ts-prune": "0.10.3",
     "typescript": "5.3.3",

package/src/App.tsx

@@ -3,9 +3,9 @@ import { Navigate, Route, Routes, useSearchParams } from 'react-router-dom';
 import { Route as MyRoute, Routes as MyRoutes } from './shares/types';
 
 import { Option } from '@public-ui/components';
-import { KolAlert } from '@public-ui/react';
+import { KolAlert, KolBadge } from '@public-ui/react';
 import { ROUTES } from './shares/routes';
-import { Theme, THEME_OPTIONS } from './shares/theme';
+import { isDraftTheme, Theme, THEME_OPTIONS } from './shares/theme';
 import PackageJson from '@public-ui/components/package.json';
 import { getTheme, getThemeName, setStorage, setTheme } from './shares/store';
 import { Sidebar } from './components/Sidebar';
@@ -45,20 +45,19 @@ const getRouteTree = (routes: MyRoutes): ReturnType<typeof Route>[] => {
 						path={`${path}/all`}
 						element={
 							<div className="d-grid gap-4">
-								{THEME_OPTIONS.filter(
-									(theme) =>
-										['bmf', 'default', 'bzst-v1', 'ecl-ec', 'ecl-eu', 'itzbund', 'mapz', 'zoll-v2', 'zoll-v3'].indexOf((theme as Option<Theme>).value) >= 0,
-								).map((theme) => (
-									<div className="d-grid gap-2" key={(theme as Option<Theme>).value} data-theme={(theme as Option<Theme>).value}>
-										<div className="mt-4">
-											<strong>{theme.label}</strong>
+								{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" />
 										</div>
-										<div className="my-2">
-											<ThisRoute />
-										</div>
-										<hr aria-hidden="true" />
-									</div>
-								))}
+									),
+								)}
 							</div>
 						}
 					/>,
@@ -104,7 +103,7 @@ ROUTE_LIST.forEach((route) => {
 export const App: FC = () => {
 	const routerLocation = useLocation();
 	const [searchParams, setSearchParams] = useSearchParams();
-	const theme = searchParams.get('theme') ?? getTheme();
+	const theme: Theme = (searchParams.get('theme') as Theme) ?? getTheme();
 	const hideMenus = searchParams.has('hideMenus');
 
 	setTheme(theme as Theme); // set for `getTheme` usages within the application
@@ -134,6 +133,7 @@ export const App: FC = () => {
 				)}
 
 				<div className="p-4" id="route-container">
+					{!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>} />

package/src/components/SampleDescription.tsx

@@ -6,7 +6,7 @@ export const SampleDescription: FC<PropsWithChildren> = (props) => {
 	const hideMenus = useContext(HideMenusContext);
 
 	return hideMenus ? null : (
-		<div className="flex">
+		<div className="flex mb-sm">
 			<KolIndentedText>{props.children}</KolIndentedText>
 			<KolLink
 				_hideLabel

package/src/components/alert/html.tsx

@@ -6,9 +6,8 @@ import { FC } from 'react';
 export const AlertHtml: FC = () => (
 	<div>
 		<KolAlert _label="Ausgabe von HTML-Code im Alert" _type="info">
-			{' '}
 			<h2 className="mt-2 mb-3">Hier wird eine H2-Überschrift ausgegeben</h2>
-			<div style={{ display: 'grid', gridAutoFlow: 'column', gap: '1rem' }}>
+			<div className="grid gap-4 sm:grid-cols-2">
 				<div>
 					<h4>Text in einer linken Spalte</h4>
 					<p>

package/src/components/button/access-key.tsx

@@ -2,7 +2,7 @@ import { KolButton } from '@public-ui/react';
 import React, { FC } from 'react';
 
 export const ButtonAccessKey: FC = () => (
-	<div className="flex gap-4">
+	<div className="flex flex-wrap gap-4">
 		<KolButton _label="Mit S access key" _accessKey="S"></KolButton>
 		<KolButton _label="Sehr kleines s" _accessKey="s"></KolButton>
 		<KolButton _label="Access key kommt nicht in label vor" _accessKey="x"></KolButton>

package/src/components/button/width.tsx

@@ -12,14 +12,14 @@ const ARGS = {
 
 export const ButtonWidth: FC = () => (
 	<div className="grid gap-14">
-		<div className="flex flex-warp gap-14">
+		<div className="flex flex-wrap gap-14">
 			<KolButton _label="Primary" _variant="primary" {...ARGS}></KolButton>
 			<KolButton _label="Secondary" _variant="secondary" {...ARGS}></KolButton>
 			<KolButton _label="Normal" _variant="normal" {...ARGS}></KolButton>
 			<KolButton _label="Danger" _variant="danger" {...ARGS}></KolButton>
 			<KolButton _label="Ghost" _variant="ghost" {...ARGS}></KolButton>
 		</div>
-		<div className="flex flex-warp gap-14">
+		<div className="flex flex-wrap gap-14">
 			<KolButton _disabled _label="Primary" _variant="primary" {...ARGS}></KolButton>
 			<KolButton _disabled _label="Secondary" _variant="secondary" {...ARGS}></KolButton>
 			<KolButton _disabled _label="Normal" _variant="normal" {...ARGS}></KolButton>

package/src/components/card/selection.tsx

@@ -11,8 +11,8 @@ const STYLE = {
 };
 
 export const CardSelection: FC = () => (
-	<div className="flex gap-2">
-		<KolCard _label="DEBTI-25437/17-1">
+	<div className="flex flex-wrap gap-2">
+		<KolCard _label="DEBTI-25437/17-1" className="lg:w-[calc(33.33%-16px)] md:w-[calc(50%-16px)] sm:w-full">
 			<div>
 				<div>
 					TeCorp Endplatte
@@ -32,7 +32,7 @@ export const CardSelection: FC = () => (
 				</div>
 			</div>
 		</KolCard>
-		<KolCard _label="DEBTI-25437/17-1">
+		<KolCard _label="DEBTI-25437/17-1" className="lg:w-[calc(33.33%-16px)] md:w-[calc(50%-16px)] sm:w-full">
 			<div>
 				<div>
 					TeCorp Endplatte
@@ -52,7 +52,7 @@ export const CardSelection: FC = () => (
 				</div>
 			</div>
 		</KolCard>
-		<KolCard _label="DEBTI-25437/17-1">
+		<KolCard _label="DEBTI-25437/17-1" className="lg:w-[calc(33.33%-16px)] md:w-[calc(50%-16px)] sm:w-full">
 			<div>
 				<div>
 					TeCorp Endplatte

package/src/components/input-date/partials/cases.tsx

@@ -15,8 +15,8 @@ export const InputDateCases = forwardRef<HTMLKolInputDateElement, Components.Kol
 			<KolInputDate {...props} ref={ref} _accessKey="W" _type="week" _label="Woche" _required />
 			<KolInputDate {...props} _type="time" _label="Zeit (Standard)" _required />
 			<KolInputDate {...props} _step={1} _type="time" _label="Zeit (mit Sekunden)" _required />
-			<KolInputDate {...props} _readOnly _label="Zahleneingabe (Readonly)" _required />
-			<KolInputDate {...props} _disabled _label="Zahleneingabe (Disabled)" _required />
+			<KolInputDate {...props} _readOnly _label="Datumseingabe (Readonly)" _required />
+			<KolInputDate {...props} _disabled _label="Datumseingabe (Disabled)" _required />
 		</div>
 	);
 });

package/src/components/link-button/basic.tsx

@@ -11,7 +11,7 @@ const ARGS = {
 
 export const LinkButtonBasic: FC = () => (
 	<div className="grid gap-14">
-		<div className="flex flex-warp gap-14">
+		<div className="flex flex-wrap gap-14">
 			<KolLinkButton _label="Primary" _variant="primary" {...ARGS}></KolLinkButton>
 			<KolLinkButton _label="Secondary" _variant="secondary" {...ARGS}></KolLinkButton>
 			<KolLinkButton _label="Normal" _variant="normal" {...ARGS}></KolLinkButton>

package/src/components/split-button/basic.tsx

@@ -14,12 +14,12 @@ export const SplitButtonBasic: FC = () => {
 	};
 
 	return (
-		<div className="grid gap-4">
-			<KolSplitButton _label="Nur der Pfeil öffnet" className="w-200px" _on={{ onClick: handleButtonClick }}>
-				Drowndown-Inhalt
+		<div className="flex gap-4">
+			<KolSplitButton _label="Nur der Pfeil öffnet" _on={{ onClick: handleButtonClick }}>
+				Dropdown-Inhalt
 			</KolSplitButton>
-			<KolSplitButton _label="ohne label" _hide-label _icons="codicon codicon-git-pull-request" className="w-200px">
-				Drowndown-Inhalt
+			<KolSplitButton _label="Schalter ohne sichtbares Label" _hideLabel _icons="codicon codicon-git-pull-request">
+				Dropdown-Inhalt
 			</KolSplitButton>
 		</div>
 	);

package/src/components/table/badge-size.tsx

@@ -15,11 +15,12 @@ const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
 const HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
-			{ label: 'order', key: 'order', textAlign: 'center' },
+			{ label: 'order', key: 'order', textAlign: 'center', width: '10em' },
 			{
 				label: 'date',
 				key: 'date',
 				textAlign: 'center',
+				width: '20em',
 				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
 				sort: (data: Data[]) =>
 					data.sort((data0, data1) => {
@@ -48,4 +49,4 @@ const HEADERS: KoliBriTableHeaders = {
 	],
 };
 
-export const TableBadgeSize: FC = () => <KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />;
+export const TableBadgeSize: FC = () => <KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS} className="block min-w-75em" />;

package/src/components/table/column-alignment.tsx

@@ -0,0 +1,84 @@
+import React, { FC } from 'react';
+
+import { KolTable, KolHeading } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
+
+const DATA = [{ left: 'Left Example', center: 'Center Example', right: 'Right Example' }];
+type Data = (typeof DATA)[0];
+const genericNonSorter = (data: Data[]): Data[] => data;
+
+export const TableColumnAlignment: FC = () => (
+	<>
+		<SampleDescription>Table with columns headers and data in different text alignments.</SampleDescription>
+
+		<KolHeading _label="Simple table" _level={3}></KolHeading>
+		<KolTable
+			_label="Table for demonstration purposes with different text align properties"
+			_headers={{
+				horizontal: [
+					[
+						{ label: 'left', key: 'left', textAlign: 'left' },
+						{ label: 'center', key: 'center', textAlign: 'center' },
+						{ label: 'right', key: 'right', textAlign: 'right' },
+					],
+				],
+			}}
+			_data={DATA}
+			className="block"
+			style={{ maxWidth: '600px' }}
+		/>
+
+		<KolHeading _label="Table with sortable columns" _level={3} className="block mt-6"></KolHeading>
+		<KolTable
+			_label="Table for demonstration purposes with sortable columns"
+			_headers={{
+				horizontal: [
+					[
+						{ label: 'left', key: 'left', textAlign: 'left', sort: genericNonSorter },
+						{ label: 'center', key: 'center', textAlign: 'center', sort: genericNonSorter },
+						{ label: 'right', key: 'right', textAlign: 'right', sort: genericNonSorter },
+					],
+				],
+			}}
+			_data={DATA}
+			className="block"
+			style={{ maxWidth: '600px' }}
+		/>
+
+		<KolHeading _label="Table some sortable columns" _level={3} className="block mt-6"></KolHeading>
+		<KolTable
+			_label="Table for demonstration purposes with some but not all columns sortable"
+			_headers={{
+				horizontal: [
+					[
+						{ label: 'left', key: 'left', textAlign: 'left', sort: genericNonSorter },
+						{ label: 'center', key: 'center', textAlign: 'center', sort: genericNonSorter },
+						{ label: 'right', key: 'right', textAlign: 'right' },
+					],
+				],
+			}}
+			_data={DATA}
+			className="block"
+			style={{ maxWidth: '600px' }}
+		/>
+
+		<KolHeading _label="Table with vertical heading" _level={3} className="block mt-6"></KolHeading>
+		<KolTable
+			_label="Table for demonstration purposes with vertical heading"
+			_headers={{
+				horizontal: [
+					[
+						{ label: '', asTd: true },
+						{ label: 'left', key: 'left', textAlign: 'left' },
+						{ label: 'center', key: 'center', textAlign: 'center' },
+						{ label: 'right', key: 'right', textAlign: 'right' },
+					],
+				],
+				vertical: [[{ label: 'Vertical' }]],
+			}}
+			_data={DATA}
+			className="block"
+			style={{ maxWidth: '600px' }}
+		/>
+	</>
+);

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

@@ -11,10 +11,11 @@ import { SampleDescription } from '../SampleDescription';
 const HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
-			{ label: '#', key: 'order', textAlign: 'center' },
+			{ label: '#', key: 'order', textAlign: 'center', width: '10em' },
 			{
 				label: 'Datum (string)',
 				key: 'date',
+				width: '20em',
 				textAlign: 'center',
 				render: (el, tupel) => {
 					// https://reactjs.org/docs/portals.html
@@ -51,6 +52,6 @@ export const TableRenderCell: FC = () => (
 		<SampleDescription>
 			<p>This sample simulates the usage of React render functions for the table column contents.</p>
 		</SampleDescription>
-		<KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />
+		<KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS} className="block min-w-75em" />
 	</>
 );

package/src/components/table/routes.ts

@@ -1,17 +1,17 @@
 import { Routes } from '../../shares/types';
 
 import { TableBadgeSize } from './badge-size';
-
+import { TableColumnAlignment } from './column-alignment';
 import { TableRenderCell } from './render-cell';
-
-import { TableSortTable } from './sort-date';
+import { TableSortData } from './sort-data';
 import { TableWithPagination } from './with-pagination';
 
 export const TABLE_ROUTES: Routes = {
 	table: {
 		'badge-size': TableBadgeSize,
+		'column-alignment': TableColumnAlignment,
 		'render-cell': TableRenderCell,
-		'sort-data': TableSortTable,
+		'sort-data': TableSortData,
 		'with-pagination': TableWithPagination,
 	},
 };

package/src/components/table/{sort-date.tsx → sort-data.tsx}

@@ -30,4 +30,4 @@ const HEADERS: KoliBriTableHeaders = {
 	],
 };
 
-export const TableSortTable: FC = () => <KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />;
+export const TableSortData: FC = () => <KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />;

package/src/react.main.tsx

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

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

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { KolButton, KolForm, KolHeading, KolSelect } from '@public-ui/react';
 import { Field, FieldProps, useFormikContext } from 'formik';
 import { FormValues } from './AppointmentForm';
-import { ErrorList } from './ErrorList';
+import { ErrorListPropType } from '@public-ui/components';
 
 const LOCATION_OPTIONS = [
 	{
@@ -29,23 +29,23 @@ const LOCATION_OPTIONS = [
 
 export function DistrictForm() {
 	const form = useFormikContext<FormValues>();
-	const [sectionSubmitted, setSectionSubmitted] = useState(false);
+	const errorList = createErrorList(form.errors);
+
+	function createErrorList(formikErrors: Record<string, string>): ErrorListPropType[] {
+		return Object.keys(formikErrors).map((fieldName) => ({
+			message: formikErrors[fieldName],
+			selector: `#field-${fieldName}`,
+		}));
+	}
 
 	return (
 		<div className="p-2">
 			<KolHeading _level={2} _label="Wählen Sie einen Stadtteil aus"></KolHeading>
-
-			{sectionSubmitted && Object.keys(form.errors).length ? (
-				<div className="mt-2">
-					<ErrorList errors={form.errors} />
-				</div>
-			) : null}
-
 			<KolForm
+				_errorList={errorList}
 				_on={{
 					onSubmit: () => {
 						void form.submitForm();
-						setSectionSubmitted(true);
 					},
 				}}
 			>

package/src/shares/theme.ts

@@ -1,21 +1,15 @@
 import { SelectOption } from '@public-ui/components';
 
-export type Theme = 'bmf' | 'bzst-v1' | 'default' | 'ecl-ec' | 'ecl-eu' | 'itzbund' | 'mapz' | 'th' | 'unstyled' | 'zoll-v2' | 'zoll-v3';
+export type Theme = 'bmf' | 'default' | 'ecl-ec' | 'ecl-eu' | 'itzbund' | 'unstyled';
+
+const drafts: Theme[] = ['ecl-ec', 'ecl-eu', 'itzbund'];
+
+export const isDraftTheme = (theme: Theme) => drafts.includes(theme);
 
 export const isTheme = (value: unknown) => {
 	return (
 		typeof value === 'string' &&
-		(value === 'unstyled' ||
-			value === 'bmf' ||
-			value === 'bzst-v1' ||
-			value === 'default' ||
-			value === 'ecl-ec' ||
-			value === 'ecl-eu' ||
-			value === 'itzbund' ||
-			value === 'mapz' ||
-			value === 'th' ||
-			value === 'zoll-v2' ||
-			value === 'zoll-v3')
+		(value === 'bmf' || value === 'default' || value === 'ecl-ec' || value === 'ecl-eu' || value === 'itzbund' || value === 'unstyled')
 	);
 };
 
@@ -26,47 +20,27 @@ export type Store = {
 
 export const THEME_OPTIONS: SelectOption<Theme>[] = [
 	{
-		label: 'Unstyled',
+		label: 'Unstyled (Uncolored)',
 		value: 'unstyled',
 	},
 	{
-		label: 'Bundesministerium der Finanzen',
+		label: 'Bundesministerium der Finanzen (Tested)',
 		value: 'bmf',
 	},
 	{
-		label: 'Bundeszentralamt für Steuern (v1)',
-		value: 'bzst-v1',
-	},
-	{
-		label: 'Default',
+		label: 'Default (Tested)',
 		value: 'default',
 	},
 	{
-		label: 'European Commission (ECL)',
+		label: 'European Commission (Draft)',
 		value: 'ecl-ec',
 	},
 	{
-		label: 'European Union (ECL)',
+		label: 'European Union (Draft)',
 		value: 'ecl-eu',
 	},
 	{
-		label: 'Informationstechnikzentrum Bund',
+		label: 'Informationstechnikzentrum Bund (Draft)',
 		value: 'itzbund',
 	},
-	{
-		label: '.',
-		value: 'mapz',
-	},
-	{
-		label: 'Freistaat Thüringen',
-		value: 'th',
-	},
-	{
-		label: '..',
-		value: 'zoll-v2',
-	},
-	{
-		label: '...',
-		value: 'zoll-v3',
-	},
 ];

package/dist/1130.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1130.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1130],{1130:(e,t,a)=>{switch(location.pathname){case"/dev/toaster.html":a.e(5860).then(a.bind(a,5860));break;case"/dev/reprod-accordion-does-not-toggle-with-open.html":a.e(7380).then(a.bind(a,7380));break;case"/dev/details-synced-open-state.html":a.e(2738).then(a.bind(a,2738))}}}]);

package/dist/183.js

@@ -1,2 +0,0 @@
-/*! For license information please see 183.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[183],{183:(t,n,e)=>{e.r(n),e.d(n,{kol_link_group:()=>h});var i=e(1349),a=e(1292),l=e(5382),o=e(6297),s=e(4364);const r=t=>{const n=[];return t.links.map(((e,a)=>{n.push((0,i.h)("li",{key:a,class:{ident:a>0&&"vertical"===t.orientation,"list-none":0===a&&"horizontal"===t.orientation},style:{listStyleType:t.listStyleType}},(0,i.h)("kol-link",Object.assign({},e))))})),n},h=class{constructor(t){(0,i.r)(this,t),this.isUl=!0,this._listStyleType=void 0,this._label=void 0,this._links=void 0,this._orientation="vertical",this.state={_label:"…",_listStyleType:"disc",_links:[],_orientation:"vertical"}}render(){return(0,i.h)("nav",{"aria-label":this.state._label,class:{vertical:"vertical"===this.state._orientation,horizontal:"horizontal"===this.state._orientation}},!1===this.isUl?(0,i.h)("ol",null,(0,i.h)(r,{links:this.state._links,orientation:this.state._orientation,listStyleType:this.state._listStyleType})):(0,i.h)("ul",null,(0,i.h)(r,{links:this.state._links,orientation:this.state._orientation,listStyleType:this.state._listStyleType})))}validateLabel(t,n,e=!1){e||(0,o.r)(this.state._label),(0,a.v)(this,t),(0,o.a)(this.state._label)}validateListStyleType(t){(0,l.w)(this,"_listStyleType",(t=>{switch(t){case"disc":case"circle":case"square":case"none":return this.isUl=!0,!0;case"decimal":case"decimal-leading-zero":case"lower-alpha":case"lower-latin":case"lower-greek":case"lower-roman":case"upper-alpha":case"upper-latin":case"upper-roman":return this.isUl=!1,!0;default:return!1}}),new Set(["https://www.w3schools.com/tags/tag_ol.asp"]),t)}validateLinks(t){(0,s.w)("KolLinkGroup",this,t)}validateOrientation(t){(0,l.w)(this,"_orientation",(t=>"horizontal"===t||"vertical"===t),new Set(["Orientation {horizontal, vertical}"]),t,{defaultValue:"vertical"})}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateListStyleType(this._listStyleType),this.validateLinks(this._links),this.validateOrientation(this._orientation)}disconnectedCallback(){(0,o.r)(this.state._label)}static get watchers(){return{_label:["validateLabel"],_listStyleType:["validateListStyleType"],_links:["validateLinks"],_orientation:["validateOrientation"]}}};h.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tul {\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\tnav.horizontal ul {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n\n\tnav.horizontal li {\n\t\tmargin-left: 1.25rem;\n\t\tmargin-right: 0.25rem;\n\t}\n\n\tnav.horizontal li:first-child {\n\t\tmargin-left: 0;\n\t}\n\n\tnav.horizontal li:last-child {\n\t\tmargin-right: 0;\n\t}\n\n\tnav.vertical li {\n\t\tmargin-left: 1.75rem;\n\t\tmargin-right: 0.5rem;\n\t}\n\n\tli.list-none {\n\t\tlist-style-type: none !important;\n\t\tmargin-left: 0;\n\t}\n}\n"}},1292:(t,n,e)=>{e.d(n,{a:()=>d,c:()=>r,h:()=>s,v:()=>c});var i=e(2333),a=e(5382);const l=/[a-zA-Z0-9äöüÄÖÜß]/g,o=/^\d+$/;function s(t,n=1){return function(t){var n;return"string"==typeof t&&(null===(n=t.match(l))||void 0===n?void 0:n.length)||0}(t)>=n}function r(t){return o.test(t)}const h=new Set(["string"]),c=(t,n,e={})=>{(0,a.w)(t,"_label",(t=>"string"==typeof t),h,n,function(t){var n;return{hooks:{afterPatch:(n,e,a,l)=>{var o,h;"function"==typeof(null===(o=t.hooks)||void 0===o?void 0:o.afterPatch)&&(null===(h=t.hooks)||void 0===h||h.afterPatch(n,e,a,l)),"string"==typeof n&&!1===s(n,3)&&!1===r(n)&&(0,i.a)(`The heading or label ("${n}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof n&&n.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(n=t.hooks)||void 0===n?void 0:n.beforePatch}}}(e))},d=c},6297:(t,n,e)=>{e.d(n,{a:()=>a,r:()=>l});const i=new Set;function a(t){i.has(t)?console.error(`There already is a nav element with the label "${t}"`):i.add(t)}function l(t){i.delete(t)}},4364:(t,n,e)=>{e.d(n,{w:()=>l});var i=e(2333),a=e(5382);const l=(t,n,e)=>{(0,a.c)(n,"_links",(t=>"object"==typeof t&&("string"==typeof t._href||"string"==typeof t._label)),e),(0,i.c)(t,n.state._links.length)}}}]);

package/dist/2337.js

@@ -1,2 +0,0 @@
-/*! For license information please see 2337.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[2337],{2337:(t,e,n)=>{n.r(e),n.d(e,{kol_input_file:()=>p});var i=n(1349),a=n(5578),l=n(347),o=n(6088),s=n(6715),r=n(5382),d=n(5547),h=n(4336);class c extends d.I{constructor(t,e,n){super(t,e,n),this.component=t}validateAccept(t){(0,r.d)(this.component,"_accept",t)}validateMultiple(t){(0,r.a)(this.component,"_multiple",t)}validateRequired(t){(0,r.a)(this.component,"_required",t)}validateValue(t){(0,r.d)(this.component,"_value",t),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateAccept(this.component._accept),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateValue(this.component._value)}}const p=class{getValue(){return t=this,null,e=function*(){var t;return null===(t=this.ref)||void 0===t?void 0:t.files},new Promise(((n,i)=>{var a=t=>{try{o(e.next(t))}catch(t){i(t)}},l=t=>{try{o(e.throw(t))}catch(t){i(t)}},o=t=>t.done?n(t.value):Promise.resolve(t.value).then(a,l);o((e=e.apply(t,null)).next())}));var t,e}render(){const{ariaDescribedBy:t}=(0,s.g)(this.state),e=(0,o.s)(this.state._label);return(0,i.h)(i.H,null,(0,i.h)("kol-input",{class:{file:!0,"hide-label":!!this.state._hideLabel},_accessKey:this.state._accessKey,_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_required:this.state._required,_smartButton:this.state._smartButton,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},(0,i.h)("span",{slot:"label"},e?(0,i.h)("slot",{name:"expert"}):"string"==typeof this.state._accessKey?(0,i.h)(i.F,null,(0,i.h)(h.I,{accessKey:this.state._accessKey,label:this.state._label})," ",(0,i.h)("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):(0,i.h)("span",null,this.state._label)),(0,i.h)("div",{slot:"input"},(0,i.h)("input",Object.assign({ref:this.catchRef,title:"",accept:this.state._accept,accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,spellcheck:"false",type:"file",value:this.state._value},this.controller.onFacade,{onChange:this.onChange})))))}constructor(t){(0,i.r)(this,t),this.catchRef=t=>{this.ref=t,(0,o.a)(this.host,this.ref)},this.onChange=t=>{var e;if(this.ref instanceof HTMLInputElement&&"file"===this.ref.type){const n=this.ref.files;(0,l.s)(t),(0,l.t)("change",this.host,n),this.controller.setFormAssociatedValue(n),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onChange)&&this.state._on.onChange(t,n)}},this._accept=void 0,this._accessKey=void 0,this._alert=!0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._required=!1,this._smartButton=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hideError:!1,_id:`id-${(0,a.n)()}`,_label:""},this.controller=new c(this,"input-file",this.host)}validateAccept(t){this.controller.validateAccept(t)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateRequired(t){this.controller.validateRequired(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return(0,i.g)(this)}static get watchers(){return{_accept:["validateAccept"],_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};p.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t/* input[type='checkbox'], */\n\t/* input[type='radio'], */\n\t/* input[type='range'], */\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, option, select, textarea, .input-label) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\tlabel input[type='file']::-webkit-file-upload-button {\n\t\tdisplay: none;\n\t}\n\n\tlabel input[type='file']:before {\n\t\tcontent: 'Datei auswählen';\n\t}\n\n\tlabel input[multiple]:before {\n\t\tcontent: 'Dateien auswählen';\n\t}\n\n\tdiv.input {\n\t\tcursor: pointer;\n\t}\n\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}\n"}}}]);