@public-ui/sample-react 1.7.8 → 1.7.10-rc.0

package/dist/main.js.LICENSE.txt

@@ -35,7 +35,7 @@
  */
 
 /**
- * @remix-run/router v1.14.0
+ * @remix-run/router v1.14.2
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -46,7 +46,7 @@
  */
 
 /**
- * React Router v6.21.0
+ * React Router v6.21.3
  *
  * Copyright (c) Remix Software Inc.
  *

package/package.json

@@ -1,33 +1,32 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "1.7.8",
+  "version": "1.7.10-rc.0",
   "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-oss/kolibri-themes": "0.0.3",
-    "@public-ui/components": "1.7.8",
-    "@public-ui/react": "1.7.8",
-    "@public-ui/themes": "1.7.8",
-    "@types/node": "20.10.5",
-    "@types/react": "18.2.45",
+    "@public-ui/components": "1.7.10-rc.0",
+    "@public-ui/react": "1.7.10-rc.0",
+    "@public-ui/themes": "1.7.10-rc.0",
+    "@types/node": "20.11.6",
+    "@types/react": "18.2.48",
     "@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.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.2",
+    "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.0",
-    "react-router-dom": "6.21.0",
+    "react-router": "6.21.3",
+    "react-router-dom": "6.21.3",
     "rimraf": "3.0.2",
     "ts-prune": "0.10.3",
     "typescript": "5.3.3",
@@ -55,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/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';
@@ -43,19 +43,19 @@ const getRouteTree = (routes: MyRoutes): ReturnType<typeof Route>[] => {
 						path={`${path}/all`}
 						element={
 							<div className="d-grid gap-4">
-								{THEME_OPTIONS.filter(
-									(theme) => ['bmf', 'default', 'ecl-ec', 'ecl-eu', 'itzbund', 'mapz', 'zoll-v2'].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>
 						}
 					/>,
@@ -101,7 +101,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
@@ -129,6 +129,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/alert/basic.tsx

@@ -32,7 +32,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/badge/button.tsx

@@ -1,25 +1,29 @@
 import React from 'react';
-import { KolBadge } from '@public-ui/react';
+import { KolBadge, KolHeading } from '@public-ui/react';
 
 import { FC } from 'react';
 
-const PROPS = {
-	_label: 'Label',
+const createBadgeProps = (label: string) => ({
 	_smartButton: {
 		_icons: 'codicon codicon-close',
-		_label: 'Entfernen',
+		_label: `Entfernen von ${label}`,
 		_on: {
 			onClick: () => alert('clicked'),
 		},
 	},
-};
+});
 
 export const BadgeButton: FC = () => (
-	<div className="d-flex gap-2">
-		<KolBadge {...PROPS}></KolBadge>
-		<KolBadge _color="#B22222" {...PROPS}></KolBadge>
-		<KolBadge _color="#4682B4" {...PROPS}></KolBadge>
-		<KolBadge _color="#228B22" {...PROPS}></KolBadge>
-		<KolBadge _color="#8B008B" {...PROPS}></KolBadge>
-	</div>
+	<>
+		<div className="mb-4">
+			<KolHeading _label="Badge" _level={2} />
+		</div>
+		<div className="flex gap-2">
+			<KolBadge _label="schwarz" {...createBadgeProps('schwarz')}></KolBadge>
+			<KolBadge _label="türkis" _color="#86ffc6" {...createBadgeProps('türkis')}></KolBadge>
+			<KolBadge _label="blau" _color="#06539e" {...createBadgeProps('blau')}></KolBadge>
+			<KolBadge _label="rot" _color="#ae0000" {...createBadgeProps('rot')}></KolBadge>
+			<KolBadge _label="lila" _color="#8b008b" {...createBadgeProps('lila')}></KolBadge>
+		</div>
+	</>
 );

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

@@ -0,0 +1,81 @@
+import React, { FC } from 'react';
+
+import { KolTable, KolHeading } from '@public-ui/react';
+
+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 = () => (
+	<>
+		<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/formatter.ts

@@ -0,0 +1,5 @@
+export const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
+	day: '2-digit',
+	month: '2-digit',
+	year: 'numeric',
+});

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

@@ -0,0 +1,51 @@
+import React, { FC, useState } from 'react';
+
+import { KolHeading, KolInputCheckbox, KolTable } from '@public-ui/react';
+import { KoliBriTableHeaders } from '@public-ui/components/src';
+
+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 (
+		<>
+			<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/render-cell.tsx

@@ -4,45 +4,96 @@ 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';
 
-const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
-	day: '2-digit',
-	month: '2-digit',
-	year: 'numeric',
-});
+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' },
 			{
-				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) => {
-					el.setAttribute('role', 'presentation');
 
-					// https://reactjs.org/docs/portals.html
-					getRoot(el).render(<strong>{DATE_FORMATTER.format((tupel as Data).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) => {
-					// 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>,
 					);
 				},
 			},
@@ -50,4 +101,4 @@ const HEADERS: KoliBriTableHeaders = {
 	],
 };
 
-export const TableRenderCell: FC = () => <KolTable _caption="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />;
+export const TableRenderCell: FC = () => <KolTable _label="Sort by date column" _data={DATA} _headers={HEADERS} className="block min-w-75em" />;

package/src/components/table/routes.ts

@@ -1,17 +1,19 @@
 import { Routes } from '../../shares/types';
 
 import { TableBadgeSize } from './badge-size';
-
 import { TableRenderCell } from './render-cell';
-
-import { TableSortTable } from './sort-date';
+import { TableSortData } from './sort-date';
 import { TableWithPagination } from './with-pagination';
+import { TableColumnAlignment } from './column-alignment';
+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': TableSortTable,
+		'sort-data': TableSortData,
 		'with-pagination': TableWithPagination,
 	},
 };

package/src/components/table/sort-date.tsx

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

package/src/components/table/test-data.ts

@@ -1,66 +1,66 @@
 export type Data = {
 	order: number;
-	date: String;
+	date: Date;
 };
 export const DATA: Data[] = [
 	{
 		order: 0,
-		date: new Date('1981-05-26T21:33:43.612Z').toString(),
+		date: new Date('1981-05-26T21:33:43.612Z'),
 	},
 	{
 		order: 1,
-		date: new Date('1971-04-25T19:44:17.014Z').toString(),
+		date: new Date('1971-04-25T19:44:17.014Z'),
 	},
 	{
 		order: 2,
-		date: new Date('1986-07-10T11:39:29.539Z').toString(),
+		date: new Date('1986-07-10T11:39:29.539Z'),
 	},
 	{
 		order: 3,
-		date: new Date('1976-02-02T10:00:36.346Z').toString(),
+		date: new Date('1976-02-02T10:00:36.346Z'),
 	},
 	{
 		order: 4,
-		date: new Date('1998-07-07T12:50:36.016Z').toString(),
+		date: new Date('1998-07-07T12:50:36.016Z'),
 	},
 	{
 		order: 5,
-		date: new Date('1994-09-05T05:10:44.078Z').toString(),
+		date: new Date('1994-09-05T05:10:44.078Z'),
 	},
 	{
 		order: 6,
-		date: new Date('1986-05-23T13:05:01.874Z').toString(),
+		date: new Date('1986-05-23T13:05:01.874Z'),
 	},
 	{
 		order: 7,
-		date: new Date('1975-06-29T21:51:29.359Z').toString(),
+		date: new Date('1975-06-29T21:51:29.359Z'),
 	},
 	{
 		order: 8,
-		date: new Date('1974-05-15T23:47:02.499Z').toString(),
+		date: new Date('1974-05-15T23:47:02.499Z'),
 	},
 	{
 		order: 9,
-		date: new Date('1990-05-27T10:13:19.641Z').toString(),
+		date: new Date('1990-05-27T10:13:19.641Z'),
 	},
 	{
 		order: 10,
-		date: new Date('1993-10-20T03:54:08.739Z').toString(),
+		date: new Date('1993-10-20T03:54:08.739Z'),
 	},
 	{
 		order: 11,
-		date: new Date('2000-02-25T11:55:43.705Z').toString(),
+		date: new Date('2000-02-25T11:55:43.705Z'),
 	},
 	{
 		order: 12,
-		date: new Date('1988-08-27T09:59:12.251Z').toString(),
+		date: new Date('1988-08-27T09:59:12.251Z'),
 	},
 	{
 		order: 13,
-		date: new Date('1980-10-24T10:41:24.897Z').toString(),
+		date: new Date('1980-10-24T10:41:24.897Z'),
 	},
 	{
 		order: 14,
-		date: new Date('1995-01-25T12:31:27.983Z').toString(),
+		date: new Date('1995-01-25T12:31:27.983Z'),
 	},
 ];

package/src/react.main.tsx

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

package/src/shares/theme.ts

@@ -1,19 +1,15 @@
 import { SelectOption } from '@public-ui/components';
 
-export type Theme = 'bmf' | 'default' | 'ecl-ec' | 'ecl-eu' | 'itzbund' | 'mapz' | 'th' | 'unstyled' | 'zoll-v2';
+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 === 'default' ||
-			value === 'ecl-ec' ||
-			value === 'ecl-eu' ||
-			value === 'itzbund' ||
-			value === 'mapz' ||
-			value === 'th' ||
-			value === 'zoll-v2')
+		(value === 'bmf' || value === 'default' || value === 'ecl-ec' || value === 'ecl-eu' || value === 'itzbund' || value === 'unstyled')
 	);
 };
 
@@ -24,39 +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: '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',
-	},
 ];