@public-ui/sample-react 1.7.24 → 1.7.26-rc.0

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

@@ -6,6 +6,7 @@ import { createReactRenderElement, KolButton, KolInputText, KolTable } from '@pu
 import { getRoot } from '../../shares/react-roots';
 import type { KoliBriTableHeaders } from '@public-ui/components';
 import { DATE_FORMATTER } from './formatter';
+import { SampleDescription } from '../SampleDescription';
 
 type Data = {
 	order: number;
@@ -96,4 +97,11 @@ const HEADERS: KoliBriTableHeaders = {
 	],
 };
 
-export const TableRenderCell: FC = () => <KolTable _label="Sort by date column" _data={DATA} _headers={HEADERS} className="block min-w-75em" />;
+export const TableRenderCell: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This sample shows KolTable using React render functions for the cell contents.</p>
+		</SampleDescription>
+		<KolTable _label="Sort by date column" _data={DATA} _headers={HEADERS} className="block min-w-75em" />
+	</>
+);

package/src/components/table/routes.ts

@@ -1,6 +1,4 @@
 import { Routes } from '../../shares/types';
-
-import { TableBadgeSize } from './badge-size';
 import { TableRenderCell } from './render-cell';
 import { TableSortData } from './sort-date';
 import { TableWithPagination } from './with-pagination';
@@ -9,7 +7,6 @@ import { TableHorizontalScrollbar } from './horizontal-scrollbar';
 
 export const TABLE_ROUTES: Routes = {
 	table: {
-		'badge-size': TableBadgeSize,
 		'column-alignment': TableColumnAlignment,
 		'horizontal-scrollbar': TableHorizontalScrollbar,
 		'render-cell': TableRenderCell,

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

@@ -3,6 +3,7 @@ import React, { FC } from 'react';
 import { KolTable } from '@public-ui/react';
 import { KoliBriTableHeaders } from '@public-ui/components';
 import { DATA, Data } from './test-data';
+import { SampleDescription } from '../SampleDescription';
 
 const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
 	day: '2-digit',
@@ -30,4 +31,11 @@ const HEADERS: KoliBriTableHeaders = {
 	],
 };
 
-export const TableSortData: FC = () => <KolTable _caption="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />;
+export const TableSortData: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This sample shows KolTable with sortable columns. The sort-order can be changed by clicking the &quot;date&quot; header column.</p>
+		</SampleDescription>
+		<KolTable _caption="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />
+	</>
+);

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

@@ -22,10 +22,7 @@ const PAGINATION: KoliBriTablePaginationProps = { _page: 2 };
 export const TableWithPagination: FC = () => (
 	<>
 		<SampleDescription>
-			<p>
-				Durch das Navigieren der Seitenzahlen unten kann die Tabelle umgeblättert werden. Stattdessen kann auch die komplette Tabelle mit Änderung der Einträge
-				pro Seite angezeigt werden.
-			</p>
+			<p>This sample shows how KolTable can be navigated using a pagination.</p>
 		</SampleDescription>
 		<div>
 			<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTable>

package/src/components/tabs/basic.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { KolTabs } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 const tabs = [
 	{
@@ -30,6 +31,9 @@ const tabsWithoutIcons = tabs.map((tab) => ({
 
 export const TabsBasic: FC = () => (
 	<>
+		<SampleDescription>
+			<p>KolTabs renders tab captions and their associated content. This sample shows tab captions with and without icons and disabled tabs.</p>
+		</SampleDescription>
 		<KolTabs _tabs={tabsWithoutIcons} _label="Regular tabs">
 			<div slot="tab-0">Inhalte von Tab 1</div>
 			<div slot="tab-1">Inhalte von Tab 2</div>

package/src/components/tabs/icons-only.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 import { KolTabs } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 const tabs = [
 	{
@@ -25,10 +26,15 @@ const tabs = [
 	},
 ];
 export const TabsIconsOnly: FC = () => (
-	<KolTabs _tabs={tabs}>
-		<div slot="tab-0">Inhalte von Tab 1</div>
-		<div slot="tab-1">Inhalte von Tab 2</div>
-		<div slot="tab-2">Inhalte von Tab 3</div>
-		<div slot="tab-3">Inhalte von Tab 4</div>
-	</KolTabs>
+	<>
+		<SampleDescription>
+			<p>This sample shows KolTabs with hidden labels.</p>
+		</SampleDescription>
+		<KolTabs _tabs={tabs}>
+			<div slot="tab-0">Inhalte von Tab 1</div>
+			<div slot="tab-1">Inhalte von Tab 2</div>
+			<div slot="tab-2">Inhalte von Tab 3</div>
+			<div slot="tab-3">Inhalte von Tab 4</div>
+		</KolTabs>
+	</>
 );

package/src/components/textarea/adjust-height.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { KolForm, KolTextarea } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 const VALUE = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
 magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
@@ -11,12 +12,15 @@ et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea t
 sit amet.`;
 
 export const TextareaAdjustHeight: FC = () => (
-	<KolForm className="row">
-		<div className="col-sm-6">
-			<KolTextarea _adjustHeight={true} _resize="vertical" _value={VALUE} _label="Texteingabe (horizontal)" />
-		</div>
-		<div className="col-sm-6">
-			<KolTextarea _adjustHeight={true} _resize="none" _value={VALUE} _label="Texteingabe (none)" />
-		</div>
-	</KolForm>
+	<>
+		<SampleDescription>
+			<p>
+				This sample demonstrates the <code>_adjustHeight</code>-property of KolTextarea. The textarea automatically grows with its content.
+			</p>
+		</SampleDescription>
+
+		<KolForm>
+			<KolTextarea _adjustHeight={true} _value={VALUE} _label="Text input (auto grow)" />
+		</KolForm>
+	</>
 );

package/src/components/textarea/basic.tsx

@@ -1,5 +1,14 @@
 import React, { FC } from 'react';
 import { FormWrap } from '../FormWrap';
 import { TextareaVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const TextareaBasic: FC = () => <FormWrap RefComponent={TextareaVariants} />;
+export const TextareaBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>KolTextarea renders a text field. The sample shows KolTextarea in a form context with different variations and states.</p>
+		</SampleDescription>
+
+		<FormWrap RefComponent={TextareaVariants} />
+	</>
+);

package/src/components/textarea/counter.tsx

@@ -1,6 +1,15 @@
 import React, { FC } from 'react';
 import { KolTextarea } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 export const TextareaCounter: FC = () => (
-	<KolTextarea _hasCounter={true} _label="Textara mit Counter und Hint und Fehler" _error={'oh no'} _hint={'Hinweis'} _touched />
+	<>
+		<SampleDescription>
+			<p>
+				This sample demonstrates the <code>_hasCounter</code>-property of KolTextarea. It shows how many characters have been entered.
+			</p>
+		</SampleDescription>
+
+		<KolTextarea _label="Textara with counter" _hasCounter={true} />
+	</>
 );

package/src/components/textarea/resize.tsx

@@ -2,12 +2,21 @@ import React from 'react';
 import { KolForm, KolTextarea } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const TextareaResize: FC = () => (
-	<KolForm className="grid gap-4">
-		<KolTextarea _resize="both" _label="Texteingabe (both)" />
-		<KolTextarea _resize="vertical" _label="Texteingabe (vertical)" />
-		<KolTextarea _resize="horizontal" _label="Texteingabe (horizontal)" />
-		<KolTextarea _resize="none" _label="Texteingabe (none)" />
-	</KolForm>
+	<>
+		<SampleDescription>
+			<p>
+				This sample demonstrates the <code>_resize</code>-property of KolTextarea. The sample textarea can (only) be resized in the given direction.
+			</p>
+		</SampleDescription>
+
+		<KolForm className="grid gap-4">
+			<KolTextarea _resize="both" _label="Text input (both)" />
+			<KolTextarea _resize="vertical" _label="Text input (vertical)" className="mt" />
+			<KolTextarea _resize="horizontal" _label="Text input (horizontal)" className="mt" />
+			<KolTextarea _resize="none" _label="Text input (none)" className="mt" />
+		</KolForm>
+	</>
 );

package/src/components/textarea/routes.ts

@@ -4,12 +4,6 @@ import { TextareaBasic } from './basic';
 
 import { TextareaAdjustHeight } from './adjust-height';
 
-import { TextareaDisabled } from './disabled';
-
-import { TextareaPlaceholder } from './placeholder';
-
-import { TextareaReadOnly } from './readonly';
-
 import { TextareaResize } from './resize';
 
 import { TextareaRows } from './rows';
@@ -19,9 +13,6 @@ export const TEXTAREA_ROUTES: Routes = {
 	textarea: {
 		basic: TextareaBasic,
 		'adjust-height': TextareaAdjustHeight,
-		disabled: TextareaDisabled,
-		placeholder: TextareaPlaceholder,
-		readonly: TextareaReadOnly,
 		resize: TextareaResize,
 		rows: TextareaRows,
 		'with-counter': TextareaCounter,

package/src/components/textarea/rows.tsx

@@ -2,9 +2,18 @@ import { KolForm, KolTextarea } from '@public-ui/react';
 import React from 'react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const TextareaRows: FC = () => (
-	<KolForm>
-		<KolTextarea _rows={10} _label="Texteingabe" />
-	</KolForm>
+	<>
+		<SampleDescription>
+			<p>
+				This sample demonstrates the <code>_rows</code>-property of KolTextarea. The sample textarea has a fixed row number of 10.
+			</p>
+		</SampleDescription>
+
+		<KolForm>
+			<KolTextarea _rows={10} _label="Texteingabe" />
+		</KolForm>
+	</>
 );

package/src/components/toast/basic.tsx

@@ -2,6 +2,7 @@ import { ToasterService } from '@public-ui/components';
 import { KolButton } from '@public-ui/react';
 import React, { FC } from 'react';
 import { getRoot } from '../../shares/react-roots';
+import { SampleDescription } from '../SampleDescription';
 
 export const ToastBasic: FC = () => {
 	const toaster = ToasterService.getInstance(document);
@@ -53,15 +54,21 @@ export const ToastBasic: FC = () => {
 	};
 
 	return (
-		<div>
-			<KolButton _label="Show simple toast" _on={{ onClick: handleButtonClickSimple }}></KolButton>
-			<KolButton _label="Show complex toast" _on={{ onClick: handleButtonClickComplex }}></KolButton>
-			<br />
-			<br />
-			<KolButton _label="Show toast and close after 2 seconds" _on={{ onClick: () => void handleButtonClickOpenAndClose() }}></KolButton>
-			<br />
-			<br />
-			<KolButton _label="Close all toasts" _on={{ onClick: closeAll }}></KolButton>
-		</div>
+		<>
+			<SampleDescription>
+				<p>This sample demonstrates the toast service with all its options.</p>
+			</SampleDescription>
+
+			<div>
+				<KolButton _label="Show simple toast" _on={{ onClick: handleButtonClickSimple }}></KolButton>
+				<KolButton _label="Show complex toast" _on={{ onClick: handleButtonClickComplex }}></KolButton>
+				<br />
+				<br />
+				<KolButton _label="Show toast and close after 2 seconds" _on={{ onClick: () => void handleButtonClickOpenAndClose() }}></KolButton>
+				<br />
+				<br />
+				<KolButton _label="Close all toasts" _on={{ onClick: closeAll }}></KolButton>
+			</div>
+		</>
 	);
 };

package/src/components/toast-legacy/basic.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { FC } from 'react';
-import { KolButton, KolToast } from '@public-ui/react';
+import { KolBadge, KolButton, KolToast } from '@public-ui/react';
 import { ToasterServiceLegacy } from '@public-ui/components';
+import { SampleDescription } from '../SampleDescription';
 
 export const ToastBasic: FC = () => {
 	const toaster = ToasterServiceLegacy.getInstance(document);
@@ -14,13 +15,21 @@ export const ToastBasic: FC = () => {
 		});
 	};
 	return (
-		<div>
-			<KolToast _label="Legacy Toast Titel">Toast content</KolToast>
-			<KolToast _label="Zweiter Toast mit Schließen-Button" _hasCloser>
-				Toast content
-			</KolToast>
+		<>
+			<SampleDescription>
+				<p>This sample shows the legacy KolToast component.</p>
+				<p>
+					<KolBadge _label="The component is deprecated and won't be available anymore in KoliBri version 3." _color="#db5461" />
+				</p>
+			</SampleDescription>
+			<div>
+				<KolToast _label="Legacy Toast Titel">Toast content</KolToast>
+				<KolToast _label="Zweiter Toast mit Schließen-Button" _hasCloser>
+					Toast content
+				</KolToast>
 
-			<KolButton _label="Weiteren Toast öffnen" _on={{ onClick: handleButtonClick }}></KolButton>
-		</div>
+				<KolButton _label="Weiteren Toast öffnen" _on={{ onClick: handleButtonClick }}></KolButton>
+			</div>
+		</>
 	);
 };

package/src/components/version/basic.tsx

@@ -2,5 +2,14 @@ import React from 'react';
 import { KolVersion } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
-export const VersionBasic: FC = () => <KolVersion _version="1.1.1" />;
+export const VersionBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>KolVersion renders a label showing the given version number.</p>
+		</SampleDescription>
+
+		<KolVersion _label="1.1.1" />
+	</>
+);

package/src/components/version/context.tsx

@@ -2,11 +2,18 @@ import React from 'react';
 import { KolVersion } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const VersionContext: FC = () => (
-	<p>
-		<KolVersion _version="1.0.0" /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
-		aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
-		ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
-	</p>
+	<>
+		<SampleDescription>
+			<p>This sample shows KolVersion inline with text paragraph content.</p>
+		</SampleDescription>
+
+		<p>
+			<KolVersion _label="1.0.0" /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
+			aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
+			ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
+		</p>
+	</>
 );

package/src/react.main.tsx

@@ -50,7 +50,7 @@ void (async () => {
 							detect: 'auto',
 						},
 				translation: {
-					name: 'de',
+					name: 'en',
 				},
 				transformTagName: ENABLE_TAG_NAME_TRANSFORMER ? tagNameTransformer : undefined,
 			},

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { KolTabs } from '@public-ui/react';
+import { KolLink, KolTabs } from '@public-ui/react';
 import { DistrictForm } from './DistrictForm';
 import { Summary } from './Summary';
 import { PersonalInformationForm } from './PersonalInformationForm';
@@ -8,6 +8,7 @@ import * as Yup from 'yup';
 import { AvailableAppointmentsForm } from './AvailableAppointmentsForm';
 import { Iso8601 } from '@public-ui/components';
 import { checkAppointmentAvailability } from './appointmentService';
+import { SampleDescription } from '../../components/SampleDescription';
 
 // export interface FormProps {}
 export interface FormValues {
@@ -86,47 +87,56 @@ export function AppointmentForm() {
 	};
 
 	return (
-		<Formik<FormValues> innerRef={formikRef} initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
-			<KolTabs
-				_tabs={[
-					{
-						_label: '1. Einwohnermeldeamt wählen',
-					},
-					{
-						_label: '2. Freie Termine',
-						_disabled: activeFormSection < FormSection.AVAILABLE_APPOINTMENTS,
-					},
-					{
-						_label: '3. Persönliche Daten',
-						_disabled: activeFormSection < FormSection.PERSONAL_INFORMATION,
-					},
-					{
-						_label: 'Zusammenfassung',
-						_disabled: activeFormSection < FormSection.SUMMARY,
-					},
-				]}
-				_label="Formular-Navigation"
-				_selected={selectedTab}
-				_on={{
-					onSelect: (_event, selectedTab) => {
-						setActiveFormSection(selectedTab);
-						formikRef.current?.setErrors({});
-					},
-				}}
-			>
-				<div>
-					<DistrictForm />
-				</div>
-				<div>
-					<AvailableAppointmentsForm />
-				</div>
-				<div>
-					<PersonalInformationForm />
-				</div>
-				<div>
-					<Summary />
-				</div>
-			</KolTabs>
-		</Formik>
+		<>
+			<SampleDescription>
+				<p>
+					The Appointment Form is a full form example featuring a large variety of KoliBri form components,{' '}
+					<KolLink _label="Formik" _href="https://formik.org/" _target="blank" /> and{' '}
+					<KolLink _label="Yup" _href="https://github.com/jquense/yup" _target="blank" />.
+				</p>
+			</SampleDescription>
+			<Formik<FormValues> innerRef={formikRef} initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
+				<KolTabs
+					_tabs={[
+						{
+							_label: '1. Einwohnermeldeamt wählen',
+						},
+						{
+							_label: '2. Freie Termine',
+							_disabled: activeFormSection < FormSection.AVAILABLE_APPOINTMENTS,
+						},
+						{
+							_label: '3. Persönliche Daten',
+							_disabled: activeFormSection < FormSection.PERSONAL_INFORMATION,
+						},
+						{
+							_label: 'Zusammenfassung',
+							_disabled: activeFormSection < FormSection.SUMMARY,
+						},
+					]}
+					_label="Formular-Navigation"
+					_selected={selectedTab}
+					_on={{
+						onSelect: (_event, selectedTab) => {
+							setActiveFormSection(selectedTab);
+							formikRef.current?.setErrors({});
+						},
+					}}
+				>
+					<div>
+						<DistrictForm />
+					</div>
+					<div>
+						<AvailableAppointmentsForm />
+					</div>
+					<div>
+						<PersonalInformationForm />
+					</div>
+					<div>
+						<Summary />
+					</div>
+				</KolTabs>
+			</Formik>
+		</>
 	);
 }

package/src/scenarios/custom-tooltip-width.tsx

@@ -1,6 +1,15 @@
 import React, { FC } from 'react';
 import { KolButton } from '@public-ui/react';
+import { SampleDescription } from '../components/SampleDescription';
 
 export const CustomTooltipWidth: FC = () => (
-	<KolButton _label="Tooltip mit fixer Breite" _hideLabel style={{ '--kol-tooltip-width': '400px' }} _icons="codicon codicon-reactions"></KolButton>
+	<>
+		<SampleDescription>
+			<p>
+				This sample demonstrates how a tooltip&apos;s width can be adjusted by defining the CSS custom property <code>--kol-tooltip-width</code> on one of the
+				parent elements.
+			</p>
+		</SampleDescription>
+		<KolButton _label="Tooltip mit fixer Breite" _hideLabel style={{ '--kol-tooltip-width': '400px' }} _icons="codicon codicon-reactions"></KolButton>
+	</>
 );

package/src/scenarios/static-form.tsx

@@ -23,7 +23,7 @@ export const StaticForm: FC = () => {
 	return (
 		<>
 			<SampleDescription>
-				<p>This sample shows how you can use KoliBri in static form context, too.</p>
+				<p>This sample shows how KoliBri can be used in a static form context.</p>
 				<ol>
 					<li>
 						First you have to enable the <code>experimental mode</code>:{' '}

package/src/shares/constants.ts

@@ -1,2 +1,3 @@
+export const PUBLIC_DOC_COMPONENT_URL = 'https://public-ui.github.io/docs/1.7/components';
 export const ERROR_MSG = 'Ich bin eine Fehlermeldung!';
 export const HINT_MSG = 'Ich bin ein Hinweis.';

package/dist/1016.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1016.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1016],{3164:(e,t,i)=>{i.d(t,{t:()=>c});var r=i(3460),a=i(5206);const n={error:"Fehler",warning:"Warnung",info:"Hinweis",success:"Erfolg",message:"Nachricht",close:"Schließen","form-description":"Formular-Felder, die mit einem Sternchen (*) gekennzeichnet sind, sind Pflichtangaben.",of:"von",characters:"Zeichen",new:"Neu","no-entries":"Es sind keine Einträge vorhanden.","change-order":"Sortierung von {{colLabel}} ändern","action-running":"Aktion wird ausgeführt...","action-done":"Aktion abgeschlossen",pagination:"Paginierung","page-first":"Direkt zur ersten Seite","page-back":"Eine Seite zurück","page-next":"Eine Seite weiter","page-last":"Direkt zur letzten Seite","entries-per-site":"Einträge pro Seite",page:"Seite","page-current":"Seite {{page}}","page-selected":"Seite {{page}} ist ausgewählt","page-per-site":"{{entries}} Einträge pro Seite","nav-maximize":"Navigation maximieren","nav-minimize":"Navigation minimieren","logo-description":"Logo {{orgShort}}. Bundesadler mit Flaggenstab und Schriftzug {{orgLong}}","open-link-in-tab":"Öffnet in neuem Tab.","kolibri-logo":"Logo von KoliBri","table-pagination-label":"Paginierung für die Tabelle {{label}}","avatar-alt":"Avatar von {{name}}","toast-close-all":"Alle schließen",version:"Versionsnummer","error-list":"Fehlerliste","error-list-message":"Bitte korrigieren Sie folgende Fehler:"},o={error:"Error",warning:"Warning",info:"Note",success:"Success",message:"Message",close:"Close","form-description":"Form fields marked with an asterisk (*) are mandatory.",of:"of",characters:"characters",new:"New","no-entries":"No entries available.","change-order":"Change order of {{colLabel}}","action-running":"Action is running...","action-done":"Action done",pagination:"Pagination","page-first":"Directly to the first page","page-back":"One page back","page-next":"One page further","page-last":"Directly to the last page","entries-per-site":"Entries per page",page:"Page","page-current":"Page {{page}}","page-selected":"Page {{page}} is selected","page-per-site":"{{entries}} entries per page","nav-maximize":"Maximize","nav-minimize":"Minimize","logo-description":"Logo {{orgShort}}. Federal eagle with flag staff and lettering {{orgLong}}","open-link-in-tab":"Opens in new tab.","kolibri-logo":"KoliBri logo","table-pagination-label":"Pagination for table {{label}}","avatar-alt":"Avatar of {{name}}","toast-close-all":"Close all",version:"Version number","error-list":"Error list","error-list-message":"Please correct the following errors"},s=e=>Object.keys(e).reduce(((t,i)=>(t[`kol-${i}`]=e[i],t)),{}),l=new Set([e=>e("en",s(o)),e=>e("de",s(n))]);let c=(e,t)=>{const i=(0,r.g)();let a=i.translate(e,t);return a===e&&(i.addTranslations(l),a=i.translate(e,t)),a};"test"===a.p&&(c=e=>e)},1016:(e,t,i)=>{i.r(t),i.d(t,{kol_form:()=>s});var r=i(6954),a=i(3164),n=i(4626),o=i(6633);const s=class{constructor(e){(0,r.r)(this,e),this.onSubmit=e=>{var t,i;e.preventDefault(),e.stopPropagation(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onSubmit)&&(null===(i=this.state._on)||void 0===i||i.onSubmit(e))},this.onReset=e=>{var t,i;e.preventDefault(),e.stopPropagation(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onReset)&&(null===(i=this.state._on)||void 0===i||i.onReset(e))},this.handleLinkClick=e=>{var t;const i=null===(t=e.target)||void 0===t?void 0:t.href;if(i){const e=new URL(i),t=document.querySelector(e.hash);t&&"function"==typeof t.focus&&(t.scrollIntoView({behavior:"smooth"}),t.focus())}},this._on=void 0,this._requiredText=!0,this._errorList=void 0,this.state={}}render(){return(0,r.h)(r.H,{key:"f3a2861782e90d8197a9fa596c003c7742ca49ca",class:"kol-form"},this._errorList&&this._errorList.length>0&&(0,r.h)(o.l,{key:"38ee4a94a8a8639c77ed2f21a71d91e33070a910",_type:"error"},(0,a.t)("kol-error-list-message"),(0,r.h)("nav",{key:"e4677e5f7b8822b4af6c82cb9c94c0310368c013","aria-label":(0,a.t)("kol-error-list")},(0,r.h)("ul",{key:"9155eabac615d36ecdaa2ae519cac1d12f5909d4"},this._errorList.map(((e,t)=>(0,r.h)("li",{key:t},(0,r.h)(o.i,{_href:e.selector,_label:e.message,_on:{onClick:this.handleLinkClick},ref:e=>{0===t&&(this.errorListElement=e)}}))))))),(0,r.h)("form",{key:"800a545609cca9cf6bfd94ada90ac9aeb0691b6f",method:"post",onSubmit:this.onSubmit,onReset:this.onReset,autoComplete:"off",noValidate:!0},!0===this.state._requiredText?(0,r.h)("p",null,(0,r.h)(o.k,null,(0,a.t)("kol-form-description"))):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?(0,r.h)("p",null,(0,r.h)(o.k,null,this.state._requiredText)):null,(0,r.h)("slot",{key:"ec53fcee71a6de6c12d172ade47ea6d518229c6f"})))}focusErrorList(){return setTimeout((()=>{var e;this._errorList&&this._errorList.length>0&&(null===(e=this.errorListElement)||void 0===e||e.focus())}),300),Promise.resolve()}validateOn(e){"object"==typeof e&&null!==e&&(this.state=Object.assign(Object.assign({},this.state),{_on:e}))}validateRequiredText(e){"boolean"==typeof e?(0,n.a)(this,"_requiredText",e):(0,n.d)(this,"_requiredText",e)}validateErrorList(e){((e,t)=>{(0,n.w)(e,"errorList",(e=>"object"==typeof e),new Set(["Object"]),t)})(this,e)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText),this.validateErrorList(this._errorList)}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"],_errorList:["validateErrorList"]}}}}}]);

package/dist/149.js

@@ -1,2 +0,0 @@
-/*! For license information please see 149.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[149],{2563:(e,a,t)=>{t.d(a,{v:()=>n});var i=t(4626);const n=(e,a)=>{(0,i.a)(e,"_hasCloser",a)}},3164:(e,a,t)=>{t.d(a,{t:()=>c});var i=t(3460),n=t(5206);const r={error:"Fehler",warning:"Warnung",info:"Hinweis",success:"Erfolg",message:"Nachricht",close:"Schließen","form-description":"Formular-Felder, die mit einem Sternchen (*) gekennzeichnet sind, sind Pflichtangaben.",of:"von",characters:"Zeichen",new:"Neu","no-entries":"Es sind keine Einträge vorhanden.","change-order":"Sortierung von {{colLabel}} ändern","action-running":"Aktion wird ausgeführt...","action-done":"Aktion abgeschlossen",pagination:"Paginierung","page-first":"Direkt zur ersten Seite","page-back":"Eine Seite zurück","page-next":"Eine Seite weiter","page-last":"Direkt zur letzten Seite","entries-per-site":"Einträge pro Seite",page:"Seite","page-current":"Seite {{page}}","page-selected":"Seite {{page}} ist ausgewählt","page-per-site":"{{entries}} Einträge pro Seite","nav-maximize":"Navigation maximieren","nav-minimize":"Navigation minimieren","logo-description":"Logo {{orgShort}}. Bundesadler mit Flaggenstab und Schriftzug {{orgLong}}","open-link-in-tab":"Öffnet in neuem Tab.","kolibri-logo":"Logo von KoliBri","table-pagination-label":"Paginierung für die Tabelle {{label}}","avatar-alt":"Avatar von {{name}}","toast-close-all":"Alle schließen",version:"Versionsnummer","error-list":"Fehlerliste","error-list-message":"Bitte korrigieren Sie folgende Fehler:"},l={error:"Error",warning:"Warning",info:"Note",success:"Success",message:"Message",close:"Close","form-description":"Form fields marked with an asterisk (*) are mandatory.",of:"of",characters:"characters",new:"New","no-entries":"No entries available.","change-order":"Change order of {{colLabel}}","action-running":"Action is running...","action-done":"Action done",pagination:"Pagination","page-first":"Directly to the first page","page-back":"One page back","page-next":"One page further","page-last":"Directly to the last page","entries-per-site":"Entries per page",page:"Page","page-current":"Page {{page}}","page-selected":"Page {{page}} is selected","page-per-site":"{{entries}} entries per page","nav-maximize":"Maximize","nav-minimize":"Minimize","logo-description":"Logo {{orgShort}}. Federal eagle with flag staff and lettering {{orgLong}}","open-link-in-tab":"Opens in new tab.","kolibri-logo":"KoliBri logo","table-pagination-label":"Pagination for table {{label}}","avatar-alt":"Avatar of {{name}}","toast-close-all":"Close all",version:"Version number","error-list":"Error list","error-list-message":"Please correct the following errors"},s=e=>Object.keys(e).reduce(((a,t)=>(a[`kol-${t}`]=e[t],a)),{}),o=new Set([e=>e("en",s(l)),e=>e("de",s(r))]);let c=(e,a)=>{const t=(0,i.g)();let n=t.translate(e,a);return n===e&&(t.addTranslations(o),n=t.translate(e,a)),n};"test"===n.p&&(c=e=>e)},149:(e,a,t)=>{t.r(a),t.d(a,{kol_alert_wc:()=>b});var i=t(6954),n=t(3164),r=t(2563),l=t(4266),s=t(1263),o=t(4626),c=t(6360),d=t(6633);const h=e=>(0,i.h)(d.h,{class:"heading-icon",_ariaLabel:"string"==typeof e.label&&e.label.length>0?"":e.ariaLabel,_icons:e.icon}),g=e=>{switch(e.type){case"error":return(0,i.h)(h,{ariaLabel:(0,n.t)("kol-error"),icon:"codicon codicon-error",label:e.label});case"info":return(0,i.h)(h,{ariaLabel:(0,n.t)("kol-info"),icon:"codicon codicon-info",label:e.label});case"warning":return(0,i.h)(h,{ariaLabel:(0,n.t)("kol-warning"),icon:"codicon codicon-warning",label:e.label});case"success":return(0,i.h)(h,{ariaLabel:(0,n.t)("kol-success"),icon:"codicon codicon-pass",label:e.label});default:return(0,i.h)(h,{ariaLabel:(0,n.t)("kol-message"),icon:"codicon codicon-comment",label:e.label})}},b=class{constructor(e){(0,i.r)(this,e),this.close=()=>{var e;void 0!==(null===(e=this._on)||void 0===e?void 0:e.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClick:this.close},this.validateOnValue=e=>"object"==typeof e&&null!==e&&"function"==typeof e.onClose,this._alert=!1,this._hasCloser=!1,this._label=void 0,this._level=1,this._on=void 0,this._type="default",this._variant="msg",this.state={_level:1}}render(){var e;if(this.state._alert){try{s.L.debug(["Navigator should vibrate ...",navigator.vibrate([100,75,100,75,100])])}catch(e){s.L.debug("Navigator does not support vibration.")}setTimeout((()=>{this.validateAlert(!1)}),1e4)}return(0,i.h)(i.H,{key:"2debfccd984d4a2db619936c39e15944e1b3946c",class:{"kol-alert-wc":!0,[this.state._type]:!0,[this.state._variant]:!0,hasCloser:!!this.state._hasCloser},role:this.state._alert?"alert":void 0},(0,i.h)("div",{key:"689e142ed81d2bb63a70fc86281adaa51010722b",class:"heading"},(0,i.h)(g,{key:"bdce3632cef1dbc7d3ad7321ef9e1e8cc06a8d25",label:this.state._label,type:this.state._type}),(0,i.h)("div",{key:"4f4f8e13f88b33c17e10b723f177db57bbcbdbe8"},"string"==typeof this.state._label&&(null===(e=this.state._label)||void 0===e?void 0:e.length)>0&&(0,i.h)(d.c,{key:"24903f587fc99732f63183a0a210137494861c7b",_label:this.state._label,_level:this.state._level}),"msg"===this.state._variant&&(0,i.h)("div",{key:"250ad893b53102aa37665dd931a9a721964d22a6",class:"content"},(0,i.h)("slot",{key:"1c893defe75ebc344d5223b957070624bd741fc4"}))),this.state._hasCloser&&(0,i.h)(d.d,{key:"ce9b41c884f872a273b8911939358a5c6ffa94f5",class:"close",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:(0,n.t)("kol-close"),_on:this.on,_tooltipAlign:"left"})),"card"===this.state._variant&&(0,i.h)("div",{key:"96affeacd2911505b3bca066dc840b17ca3f4042",class:"content"},(0,i.h)("slot",{key:"1e5a41f19ee541f8de0c3175718e2d1a1cffb1ce"})))}validateAlert(e){(0,o.a)(this,"_alert",e)}validateHasCloser(e){(0,r.v)(this,e)}validateLabel(e){(0,l.v)(this,e)}validateLevel(e){(0,c.w)(this,e)}validateOn(e){this.validateOnValue(e)&&(0,o.s)(this,"_on",{onClose:e.onClose})}validateType(e){(0,o.w)(this,"_type",(e=>"string"==typeof e&&("default"===e||"error"===e||"info"===e||"success"===e||"warning"===e)),new Set("String {success, info, warning, error}"),e)}validateVariant(e){(0,o.w)(this,"_variant",(e=>"card"===e||"msg"===e),new Set("AlertVariant {card, msg}"),e)}componentWillLoad(){this.validateAlert(this._alert),this.validateHasCloser(this._hasCloser),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateType(this._type),this.validateVariant(this._variant)}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_type:["validateType"],_variant:["validateVariant"]}}}},4266:(e,a,t)=>{t.d(a,{a:()=>h,c:()=>o,h:()=>s,v:()=>d});var i=t(7784),n=t(4626);const r=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function s(e,a=1){return function(e){var a;return"string"==typeof e&&(null===(a=e.match(r))||void 0===a?void 0:a.length)||0}(e)>=a}function o(e){return l.test(e)}const c=new Set(["string"]),d=(e,a,t={})=>{(0,n.w)(e,"_label",(e=>"string"==typeof e),c,a,function(e){var a;return Object.assign(Object.assign({},e),{hooks:{afterPatch:(a,t,n,r)=>{var l,c;"function"==typeof(null===(l=e.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(c=e.hooks)||void 0===c||c.afterPatch(a,t,n,r)),"string"==typeof a&&!1===s(a,3)&&!1===o(a)&&(0,i.a)(`The heading or label ("${a}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof a&&a.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(a=e.hooks)||void 0===a?void 0:a.beforePatch}})}(t))},h=d},6360:(e,a,t)=>{t.d(a,{w:()=>n});var i=t(4626);const n=(e,a)=>{(0,i.w)(e,"_level",(e=>"number"==typeof e&&0<=e&&e<=6),new Set(["Number {0, 1, 2, 3, 4, 5, 6}"]),a,{defaultValue:1,required:!0})}}}]);

package/dist/1531.js

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

package/dist/1818.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1818],{1818:(e,t,i)=>{i.r(t),i.d(t,{initialize:()=>a});var r=i(1263),l=i(4626);function n(e,t){try{Object.defineProperty((()=>{let e=(0,r.b)().KoliBri;return void 0===e&&(e={},Object.defineProperty((0,r.b)(),"KoliBri",{value:e,writable:!1})),e})(),e,{get:function(){return t}})}catch(t){r.L.debug(`KoliBri property ${e} is already bind.`)}}const o=(e,t)=>r.L.debug(`${e} ${t?"":"not "}activated`),a=()=>{if((0,r.i)(),(0,r.c)()){(0,r.r)(),n("a11yColorContrast",l.q),n("querySelector",l.k),n("querySelectorAll",l.t),n("querySelectorColors",l.u),n("utils",(function(){return l.n})),n("parseJson",l.p),n("stringifyJson",l.v);const e=(0,r.g)().body,t=(0,r.g)().createElement("svg");if(t.setAttribute("aria-label","KoliBri-DevTools"),t.setAttribute("xmlns","http://www.w3.org/2000/svg"),t.setAttribute("role","toolbar"),t.setAttribute("style","position: fixed;color: black;font-size: 200%;bottom: 0.25rem;right: 0.25rem;"),t.innerHTML='<svg\n  xmlns="http://www.w3.org/2000/svg"\n  width="50"\n  height="50"\n  viewBox="0 0 600 600"\n>\n  <path d="M353 322L213 304V434L353 322Z" fill="#047" />\n  <path d="M209 564V304L149 434L209 564Z" fill="#047" />\n  <path d="M357 316L417 250L361 210L275 244L357 316Z" fill="#047" />\n  <path d="M353 318L35 36L213 300L353 318Z" fill="#047" />\n  <path d="M329 218L237 92L250 222L272 241L329 218Z" fill="#047" />\n  <path d="M391 286L565 272L421 252L391 286Z" fill="#047" />\n</svg>',(0,r.g)().body.appendChild(t),o("Development mode",(0,r.c)()),o("Experimental mode",(0,r.a)()),o("Color contrast analysis",(0,r.d)()),(0,r.d)()){const t=setTimeout((()=>{clearTimeout(t),setInterval((()=>{l.n.queryHtmlElementColors((0,r.g)().createElement("div"),(0,l.q)(e),!1,!1)}),1e4)}),2500)}}}}}]);