@public-ui/sample-react 2.0.3 → 2.0.4

package/dist/main.js.LICENSE.txt

@@ -33,7 +33,7 @@
  */
 
 /**
- * @remix-run/router v1.14.1
+ * @remix-run/router v1.14.2
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -44,7 +44,7 @@
  */
 
 /**
- * React Router v6.21.1
+ * React Router v6.21.3
  *
  * Copyright (c) Remix Software Inc.
  *

package/package.json

@@ -1,32 +1,32 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "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": "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",
+    "@public-ui/components": "2.0.4",
+    "@public-ui/react": "2.0.4",
+    "@public-ui/themes": "2.0.4",
+    "@types/node": "20.11.6",
+    "@types/react": "18.2.48",
     "@types/react-dom": "18.2.18",
     "@unocss/preset-uno": "0.58.3",
     "@unocss/webpack": "0.58.3",
     "ajv": "8.12.0",
-    "chromedriver": "120.0.1",
+    "chromedriver": "120.0.2",
     "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.3",
+    "nightwatch-axe-verbose": "2.3.0",
     "npm-run-all": "4.1.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router": "6.21.1",
-    "react-router-dom": "6.21.1",
+    "react-router": "6.21.3",
+    "react-router-dom": "6.21.3",
     "rimraf": "3.0.2",
     "ts-prune": "0.10.3",
     "typescript": "5.3.3",
@@ -54,7 +54,7 @@
     "format": "prettier --check src",
     "lint": "eslint \"{src,tests}/**/*.{html,js,json,jsx,ts,tsx,gql,graphql}\"",
     "serve": "cross-env NODE_ENV=development webpack serve --devtool=source-map",
-    "start": "npm run serve",
+    "start": "npm run serve -- --open",
     "unused": "ts-prune -e src",
     "postinstall": "npm-run-all postinstall:*",
     "postinstall:components-assets": "cpy \"node_modules/@public-ui/components/assets/**/*\" public/assets --dot",

package/src/components/alert/basic.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
 import { KolAlert } from '@public-ui/react';
 
-import { HeadingLevel } from '@public-ui/components/dist/types/types/heading-level';
-
 import { FC } from 'react';
-import { AlertType, AlertVariant } from '@public-ui/components';
+import { AlertType, AlertVariant, HeadingLevel } from '@public-ui/components';
 
 type PropsByType = {
 	level: HeadingLevel;
@@ -32,7 +30,7 @@ const AlertByType: FC<PropsByType> = ({ level, type, variant }) => (
 	</>
 );
 
-export const AlertBasic: FC<PropsBasic> = ({ variant }) => (
+export const AlertBasic: FC<PropsBasic> = ({ variant = 'msg' }) => (
 	<div className="grid gap-4">
 		<AlertByType level={1} type="default" variant={variant} />
 		<AlertByType level={2} type="error" variant={variant} />

package/src/components/nav/basic.tsx

@@ -2,59 +2,6 @@ import React from 'react';
 import { KolNav } from '@public-ui/react';
 
 import { FC } from 'react';
+import { LINKS } from './links';
 
-export const NavBasic: FC = () => (
-	<KolNav
-		class="block w-sm"
-		_label="Main navigation"
-		_links={[
-			{
-				_label: 'Homepage',
-				_icons: 'codicon codicon-home',
-				_href: '#/',
-			},
-			{
-				_label: '2 Navigation point',
-				_href: '#/untermenu',
-			},
-			{
-				_label: '3 Navigation point',
-				_href: '#abc',
-				_children: [
-					{
-						_label: '3.1 Navigation point',
-						_href: '#/',
-					},
-					{
-						_label: '3.2 Navigation point',
-						_href: '#abc',
-						_target: 'asdasd',
-					},
-					{
-						_label: '3.3 Navigation point',
-						_href: '#abc',
-						_icons: 'fa-solid fa-cat',
-						_children: [
-							{
-								_label: '3.3.1 Navigation point (active)',
-								_href: '#abc',
-							},
-							{ _label: '3.3.2 Navigation point', _href: '#abc' },
-						],
-					},
-					{
-						_label: '3.4 Navigation point',
-						_href: '#abc',
-						_children: [
-							{ _label: '3.4.1 Navigation point', _href: '#abc' },
-							{ _label: '3.4.2 Navigation point', _href: '#abc' },
-						],
-					},
-					{ _label: '3.5 Navigation point', _href: '#abc' },
-				],
-			},
-			{ _label: '4 Navigation point', _href: '#abc' },
-		]}
-		_hasCompactButton
-	/>
-);
+export const NavBasic: FC = () => <KolNav class="block w-fit" _label="Main navigation" _links={LINKS} _hasCompactButton />;

package/src/components/nav/horizontal.tsx

@@ -2,55 +2,6 @@ import React from 'react';
 import { KolNav } from '@public-ui/react';
 
 import { FC } from 'react';
+import { LINKS } from './links';
 
-export const NavHorizontal: FC = () => (
-	<KolNav
-		_label="Main navigation"
-		_links={[
-			{
-				_label: 'Homepage',
-				_href: '#/nav/horizontal',
-			},
-			{
-				_label: '2 Navigation point',
-				_href: '#/nav/horizontal',
-			},
-			{
-				_label: '3 Navigation point',
-				_href: '#/nav/horizontal',
-				_children: [
-					{
-						_label: '3.1 Navigation point',
-					},
-					{
-						_label: '3.2 Navigation point',
-						_href: '#/nav/horizontal',
-						_target: 'asdasd',
-					},
-					{
-						_label: '3.3 Navigation point',
-						_href: '#/nav/horizontal',
-						_children: [
-							{
-								_label: '3.3.1 Navigation point (active)',
-								_href: '#abc',
-							},
-							{ _label: '3.3.2 Navigation point', _href: '#abc' },
-						],
-					},
-					{
-						_label: '3.4 Navigation point',
-						_href: '#/nav/horizontal',
-						_children: [
-							{ _label: '3.4.1 Navigation point', _href: '#abc' },
-							{ _label: '3.4.2 Navigation point', _href: '#abc' },
-						],
-					},
-					{ _label: '3.5 Navigation point', _href: '#abc' },
-				],
-			},
-			{ _label: '4 Navigation point', _href: '#abc' },
-		]}
-		_orientation="horizontal"
-	/>
-);
+export const NavHorizontal: FC = () => <KolNav _label="Main navigation" _links={LINKS} _orientation="horizontal" />;

package/src/components/nav/links.ts

@@ -0,0 +1,78 @@
+import { ButtonOrLinkOrTextWithChildrenProps } from '@public-ui/components';
+
+export const LINKS: ButtonOrLinkOrTextWithChildrenProps[] = [
+	{
+		_label: 'Homepage',
+		_icons: 'codicon codicon-home',
+		_href: '#/',
+	},
+	{
+		_label: '2 Navigation point',
+		_href: '#/untermenu',
+	},
+	{
+		_label: '3 Navigation point',
+		_href: '#abc',
+		_icons: 'codicon codicon-home',
+		_children: [
+			{
+				_label: '3.1 Navigation point',
+				_icons: 'codicon codicon-home',
+				_href: '#/',
+			},
+			{
+				_label: '3.2 Navigation point',
+				_href: '#abc',
+				_target: 'asdasd',
+			},
+			{
+				_label: '3.3 Navigation point',
+				_href: '#abc',
+				_children: [
+					{
+						_label: '3.3.1 Navigation point',
+						_href: '#abc',
+					},
+					{ _label: '3.3.2 Navigation point', _href: '#abc' },
+				],
+			},
+			{
+				_label: '3.4 Navigation point',
+				_href: '#abc',
+				_children: [
+					{
+						_label: '3.4.1 Navigation point',
+						_href: '#abc',
+						_children: [
+							{ _label: '3.4.1.1 Navigation point', _href: '#abc' },
+							{ _label: '3.4.1.2 Navigation point (active)', _href: '#abc' },
+						],
+					},
+					{ _label: '3.4.2 Navigation point', _href: '#abc' },
+				],
+			},
+			{ _label: '3.5 Navigation point', _href: '#abc' },
+		],
+	},
+	{ _label: '4 Navigation point', _href: '#abc' },
+	{
+		_label: '5 Keine eigene Seite, nur Kategorie',
+		_active: true,
+		_children: [
+			{
+				_label: '5.1 Verschachtelter Link',
+				_href: '#abc',
+			},
+		],
+	},
+	{
+		_label: '6 Keine eigene Seite, mit Icon',
+		_icons: 'codicon codicon-squirrel',
+		_children: [
+			{
+				_label: '6.1 Verschachtelter Link',
+				_href: '#abc',
+			},
+		],
+	},
+];

package/src/components/table/horizontal-scrollbar.tsx

@@ -0,0 +1,57 @@
+import React, { FC, useState } from 'react';
+
+import { KolHeading, KolInputCheckbox, KolTable } from '@public-ui/react';
+import { KoliBriTableHeaders } from '@public-ui/components/src';
+import { SampleDescription } from '../SampleDescription';
+
+const DATA = [{ small: 'Small Example', large: 'Larger Example' }];
+const HEADERS: KoliBriTableHeaders = {
+	horizontal: [
+		[
+			{ label: 'Large Column', key: 'large', textAlign: 'left', width: '400px' },
+			{ label: 'Small Column', key: 'small', textAlign: 'left', width: '200px' },
+		],
+	],
+};
+
+export const TableHorizontalScrollbar: FC = () => {
+	const [hasWidthRestriction, setHasWidthRestriction] = useState(true);
+
+	return (
+		<>
+			<SampleDescription>
+				Table examples with and without horizontal scrollbars. When a scrollbar is present, it should be possible to focus the table container and to scroll it
+				using arrow keys.
+			</SampleDescription>
+
+			<KolHeading _label="Table with scrollbar" _level={2} />
+
+			<KolTable
+				_label="Table for demonstration purposes with horizontal scrollbar."
+				_minWidth={hasWidthRestriction ? '600px' : 'auto'}
+				_headers={HEADERS}
+				_data={DATA}
+				className="block"
+				style={{ width: '400px' }}
+			/>
+
+			<KolInputCheckbox
+				_checked={hasWidthRestriction}
+				_label="Toggle width restriction"
+				_variant="switch"
+				_on={{
+					onChange: (_event, value) => {
+						setHasWidthRestriction(Boolean(value));
+					},
+				}}
+			></KolInputCheckbox>
+
+			<KolHeading _label="Same table without scrollbar" _level={2} className="block mt-4" />
+			<p className="mt-0">
+				<i>Scrollbar appears on very small viewport sizes</i>
+			</p>
+
+			<KolTable _label="Table for demonstration purposes without horizontal scrollbar" _minWidth="600px" _headers={HEADERS} _data={DATA} className="block" />
+		</>
+	);
+};

package/src/components/table/pagination-position.tsx

@@ -0,0 +1,34 @@
+import React, { FC } from 'react';
+
+import { KolTable } from '@public-ui/react';
+import { KoliBriTableHeaders, KoliBriTablePaginationProps } from '@public-ui/components';
+import { Data, DATA } from './test-data';
+import { DATE_FORMATTER } from './formatter';
+import { SampleDescription } from '../SampleDescription';
+const HEADERS: KoliBriTableHeaders = {
+	horizontal: [
+		[
+			{ label: 'Order', key: 'order' },
+			{ label: 'Date', key: 'date', render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date) },
+		],
+	],
+};
+const PAGINATION: KoliBriTablePaginationProps = { _page: 2 };
+
+export const PaginationPosition: FC = () => (
+	<div className="grid gap-14">
+		<SampleDescription>Tables with different pagination positions.</SampleDescription>
+		<section>
+			<h2>Table with pagination at the bottom.</h2>
+			<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION} _paginationPosition="bottom"></KolTable>
+		</section>
+		<section>
+			<h2>Table with pagination at the top.</h2>
+			<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION} _paginationPosition="top"></KolTable>
+		</section>
+		<section>
+			<h2>Table with pagination at both top and bottom.</h2>
+			<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION} _paginationPosition="both"></KolTable>
+		</section>
+	</div>
+);

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

@@ -4,42 +4,97 @@ import { KolButton, KolInputText, KolTable } from '@public-ui/react';
 
 import { getRoot } from '../../shares/react-roots';
 import { KoliBriTableHeaders } from '@public-ui/components';
-import { DATA, Data } from './test-data';
 import { DATE_FORMATTER } from './formatter';
 import { SampleDescription } from '../SampleDescription';
 
+type Data = {
+	order: number;
+	date: Date;
+	shipped: boolean;
+};
+const DATA: Data[] = [
+	{
+		order: 0,
+		shipped: false,
+		date: new Date('1981-05-26T21:33:43.612Z'),
+	},
+	{
+		order: 1,
+		shipped: true,
+		date: new Date('1971-04-25T19:44:17.014Z'),
+	},
+	{
+		order: 2,
+		shipped: false,
+		date: new Date('1986-07-10T11:39:29.539Z'),
+	},
+];
+
 const HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
-			{ label: '#', key: 'order', textAlign: 'center', width: '10em' },
 			{
-				label: 'Datum (string)',
+				label: '#',
+				key: 'order',
+				textAlign: 'center',
+				width: '10em',
+
+				/* Example 1: Use render return value to format data */
+				render: (_el, cell) => `Index: ${cell.label}`,
+			},
+			{
+				label: 'Status',
+				key: 'shipped',
+				textAlign: 'center',
+				width: '10em',
+
+				/* Example 2: Simple render function using textContent */
+				render: (el, cell) => {
+					if (cell.label) {
+						el.textContent = `Order has been dispatched 🚚`;
+					} else {
+						el.textContent = `Order pending 📦`;
+					}
+				},
+			},
+			{
+				label: 'Date (string)',
 				key: 'date',
 				width: '20em',
 				textAlign: 'center',
-				render: (el, tupel) => {
-					// https://reactjs.org/docs/portals.html
-					getRoot(el).render(<strong>{DATE_FORMATTER.format(tupel.label as unknown as Date)}</strong>);
+
+				/* Example 3: Render function using innerHTML. ⚠️Make sure to sanitize data to avoid XSS. */
+				render: (el, cell) => {
+					el.innerHTML = `<strong>${DATE_FORMATTER.format(cell.label as unknown as Date)}</strong>`;
 				},
-				sort: (data: Data[]) =>
-					data.sort((data0, data1) => {
-						if (data0.date < data1.date) return -1;
-						else if (data1.date < data0.date) return 1;
-						else return 0;
-					}),
+				sort: (data: Data[]) => data.sort((data0, data1) => data0.date.getTime() - data1.date.getTime()),
 			},
 			{
-				label: 'Aktion (react)',
+				label: 'Action (react)',
 				key: 'order',
+				width: '20em',
+
+				/* Example 4: Render function using React */
 				render: (el) => {
-					el.setAttribute('role', 'presentation');
-
-					// https://reactjs.org/docs/portals.html
-					getRoot(el).render(
-						<>
-							<KolButton _label={'Speichern'} />
-							<KolInputText _label="Eingabe" />
-						</>,
+					const renderElement = document.createElement('div');
+					renderElement.setAttribute('role', 'presentation');
+					el.innerHTML = '';
+					el.appendChild(renderElement);
+
+					/* https://react.dev/reference/react-dom/client/createRoot */
+					getRoot(renderElement).render(
+						<div
+							style={{
+								display: `grid`,
+								gridAutoFlow: `column`,
+								alignItems: `end`,
+								gap: `1rem`,
+								maxWidth: `400px`,
+							}}
+						>
+							<KolInputText _label="Input" />
+							<KolButton _label={'Save'} />
+						</div>,
 					);
 				},
 			},
@@ -52,6 +107,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 min-w-75em" />
+		<KolTable _label="Sort by date column" _data={DATA} _headers={HEADERS} className="block min-w-75em" />
 	</>
 );

package/src/components/table/routes.ts

@@ -5,13 +5,17 @@ import { TableColumnAlignment } from './column-alignment';
 import { TableRenderCell } from './render-cell';
 import { TableSortData } from './sort-data';
 import { TableWithPagination } from './with-pagination';
+import { PaginationPosition } from './pagination-position';
+import { TableHorizontalScrollbar } from './horizontal-scrollbar';
 
 export const TABLE_ROUTES: Routes = {
 	table: {
 		'badge-size': TableBadgeSize,
 		'column-alignment': TableColumnAlignment,
+		'horizontal-scrollbar': TableHorizontalScrollbar,
 		'render-cell': TableRenderCell,
 		'sort-data': TableSortData,
 		'with-pagination': TableWithPagination,
+		'pagination-position': PaginationPosition,
 	},
 };

package/dist/1532.js

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

package/dist/4114.js

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