@public-ui/sample-react 2.0.4 → 2.0.6

package/src/components/tree/routes.ts

@@ -0,0 +1,9 @@
+import { Routes } from '../../shares/types';
+
+import { TreeBasic } from './basic';
+
+export const TREE_ROUTES: Routes = {
+	tree: {
+		'basic/:subPage': TreeBasic,
+	},
+};

package/src/components/types.tsx

@@ -1,17 +1,18 @@
 import { FormWrap } from './FormWrap';
-import { ButtonVariants } from './button/partials/variants';
-import { InputCheckboxVariants } from './input-checkbox/partials/variants';
-import { InputColorVariants } from './input-color/partials/variants';
-import { InputDateVariants } from './input-date/partials/variants';
-import { InputEmailVariants } from './input-email/partials/variants';
-import { InputFileVariants } from './input-file/partials/variants';
-import { InputNumberVariants } from './input-number/partials/variants';
-import { InputPasswordVariants } from './input-password/partials/variants';
-import { InputRadioVariants } from './input-radio/partials/variants';
-import { InputRangeVariants } from './input-range/partials/variants';
-import { InputTextVariants } from './input-text/partials/variants';
-import { SelectVariants } from './select/partials/variants';
-import { TextareaVariants } from './textarea/partials/variants';
+
+import type { ButtonVariants } from './button/partials/variants';
+import type { InputCheckboxVariants } from './input-checkbox/partials/variants';
+import type { InputColorVariants } from './input-color/partials/variants';
+import type { InputDateVariants } from './input-date/partials/variants';
+import type { InputEmailVariants } from './input-email/partials/variants';
+import type { InputFileVariants } from './input-file/partials/variants';
+import type { InputNumberVariants } from './input-number/partials/variants';
+import type { InputPasswordVariants } from './input-password/partials/variants';
+import type { InputRadioVariants } from './input-radio/partials/variants';
+import type { InputRangeVariants } from './input-range/partials/variants';
+import type { InputTextVariants } from './input-text/partials/variants';
+import type { SelectVariants } from './select/partials/variants';
+import type { TextareaVariants } from './textarea/partials/variants';
 
 export type RefFormComponent =
 	| typeof InputCheckboxVariants

package/src/components/version/basic.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
+
 import { KolVersion } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 export const VersionBasic: FC = () => <KolVersion _label="1.1.1" />;

package/src/components/version/context.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import { KolVersion } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 export const VersionContext: FC = () => (
 	<p>

package/src/components/version/routes.ts

@@ -1,7 +1,5 @@
 import { Routes } from '../../shares/types';
-
 import { VersionBasic } from './basic';
-
 import { VersionContext } from './context';
 
 export const VERSION_ROUTES: Routes = {

package/src/hooks/useSetCurrentLocation.ts

@@ -1,6 +1,7 @@
-import { setCurrentLocation } from '@public-ui/components';
 import { useLocation } from 'react-router';
 
+import { setCurrentLocation } from '@public-ui/components';
+
 export const useSetCurrentLocation = () => {
 	const routerLocation = useLocation();
 	setCurrentLocation('#' + routerLocation.pathname);

package/src/main.ts

@@ -1,7 +1,5 @@
 import 'uno.css'; // https://github.com/antfu/unocss
-
 // App style
 import './style.scss';
-
 // App
 import './react.main';

package/src/react.main.tsx

@@ -2,12 +2,13 @@ import React, { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 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 { defineCustomElements } from '@public-ui/components/dist/loader';
 import { BMF, DEFAULT, ECL_EC, ECL_EU, ITZBund } from '@public-ui/themes';
+
 import { App } from './App';
 
+import type { Generic } from 'adopted-style-sheets';
 type Theme = Generic.Theming.RegisterPatch<string, string, string>;
 
 void (async () => {

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

@@ -1,14 +1,17 @@
-import React, { useEffect, useState } from 'react';
+import { Formik } from 'formik';
+import React, { useEffect, useState, useRef } from 'react';
+import * as Yup from 'yup';
+
 import { KolTabs } from '@public-ui/react';
+
+import { checkAppointmentAvailability } from './appointmentService';
+import { AvailableAppointmentsForm } from './AvailableAppointmentsForm';
 import { DistrictForm } from './DistrictForm';
-import { Summary } from './Summary';
 import { PersonalInformationForm } from './PersonalInformationForm';
-import { Formik, FormikHelpers } from 'formik';
-import * as Yup from 'yup';
-import { AvailableAppointmentsForm } from './AvailableAppointmentsForm';
-import { Iso8601 } from '@public-ui/components';
-import { checkAppointmentAvailability } from './appointmentService';
+import { Summary } from './Summary';
 
+import type { FormikHelpers, FormikProps } from 'formik';
+import type { Iso8601 } from '@public-ui/components';
 // export interface FormProps {}
 export interface FormValues {
 	district: string;
@@ -46,12 +49,12 @@ const districtSchema = {
 };
 const personalInformationSchema = {
 	salutation: Yup.string().required('Bitte Anrede auswählen.'),
-	name: Yup.string().required('Bitte Name eingeben.'),
+	name: Yup.string().required('Bitte Vor- und Zuname eingeben.'),
 	company: Yup.string().when('salutation', {
 		is: (salutation: string) => salutation === 'Firma',
-		then: (schema) => schema.required('Bitte Firmenname angeben.'),
+		then: (schema) => schema.required('Bitte Firma angeben.'),
 	}),
-	email: Yup.string().required('Bitte E-Mail-Adresse eingeben.'),
+	email: Yup.string().required('Bitte E-Mail eingeben.'),
 };
 const availableAppointmentsSchema = {
 	date: Yup.string().required('Bitte Datum eingeben.'),
@@ -64,6 +67,7 @@ const availableAppointmentsSchema = {
 export function AppointmentForm() {
 	const [activeFormSection, setActiveFormSection] = useState(FormSection.DISTRICT);
 	const [selectedTab, setSelectedTab] = useState(activeFormSection);
+	const formikRef = useRef<FormikProps<FormValues>>(null);
 
 	const validationSchema = Yup.object().shape({
 		...(activeFormSection === FormSection.DISTRICT ? districtSchema : {}),
@@ -86,7 +90,7 @@ export function AppointmentForm() {
 	};
 
 	return (
-		<Formik<FormValues> initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
+		<Formik<FormValues> innerRef={formikRef} initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
 			<KolTabs
 				_tabs={[
 					{
@@ -107,7 +111,12 @@ export function AppointmentForm() {
 				]}
 				_label="Formular-Navigation"
 				_selected={selectedTab}
-				_on={{ onSelect: (_event, selectedTab) => setActiveFormSection(selectedTab) }}
+				_on={{
+					onSelect: (_event, selectedTab) => {
+						setActiveFormSection(selectedTab);
+						formikRef.current?.setErrors({});
+					},
+				}}
 			>
 				<div>
 					<DistrictForm />

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

@@ -1,10 +1,14 @@
+import { Field, useFormikContext } from 'formik';
 import React, { useEffect, useState } from 'react';
+
 import { KolButton, KolForm, KolHeading, KolInputDate, KolInputRadio, KolSpin } from '@public-ui/react';
-import { FormValues } from './AppointmentForm';
-import { ErrorList } from './ErrorList';
-import { Field, FieldProps, useFormikContext } from 'formik';
+
 import { fetchAvailableTimes } from './appointmentService';
-import { Option } from '@public-ui/components';
+
+import type { FormValues } from './AppointmentForm';
+import type { FieldProps } from 'formik';
+import type { Option } from '@public-ui/components';
+import { createErrorList } from './formUtils';
 
 export function AvailableAppointmentsForm() {
 	const form = useFormikContext<FormValues>();
@@ -12,6 +16,8 @@ export function AvailableAppointmentsForm() {
 	const [sectionSubmitted, setSectionSubmitted] = useState(false);
 	const [availableTimes, setAvailableTimes] = useState<Option<string>[] | null>(null);
 
+	const errorList = createErrorList(form.errors);
+
 	useEffect(() => {
 		let ignoreResponse = false;
 		setAvailableTimes(null);
@@ -36,18 +42,12 @@ export function AvailableAppointmentsForm() {
 	return (
 		<div className="p-2">
 			<KolHeading _level={2} _label="Wählen Sie einen Termin aus"></KolHeading>
-
-			{sectionSubmitted && Object.keys(form.errors).length ? (
-				<div className="mt-2">
-					<ErrorList errors={form.errors} />
-				</div>
-			) : null}
-
 			<KolForm
+				_errorList={sectionSubmitted ? errorList : []}
 				_on={{
 					onSubmit: () => {
-						void form.submitForm();
 						setSectionSubmitted(true);
+						void form.submitForm();
 					},
 				}}
 			>
@@ -81,7 +81,7 @@ export function AvailableAppointmentsForm() {
 								<Field name="time">
 									{({ field }: FieldProps<FormValues['time']>) => (
 										<KolInputRadio
-											id="field-date"
+											id="field-time"
 											_label="Zeit"
 											_orientation="horizontal"
 											_options={availableTimes}

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

@@ -1,8 +1,11 @@
-import React from 'react';
+import { Field, useFormikContext } from 'formik';
+import React, { useState } from 'react';
+
 import { KolButton, KolForm, KolHeading, KolSelect } from '@public-ui/react';
-import { Field, FieldProps, useFormikContext } from 'formik';
-import { FormValues } from './AppointmentForm';
-import { ErrorListPropType } from '@public-ui/components';
+
+import type { FieldProps } from 'formik';
+import type { FormValues } from './AppointmentForm';
+import { createErrorList } from './formUtils';
 
 const LOCATION_OPTIONS = [
 	{
@@ -30,22 +33,17 @@ const LOCATION_OPTIONS = [
 export function DistrictForm() {
 	const form = useFormikContext<FormValues>();
 	const errorList = createErrorList(form.errors);
-
-	function createErrorList(formikErrors: Record<string, string>): ErrorListPropType[] {
-		return Object.keys(formikErrors).map((fieldName) => ({
-			message: formikErrors[fieldName],
-			selector: `#field-${fieldName}`,
-		}));
-	}
+	const [sectionSubmitted, setSectionSubmitted] = useState(false);
 
 	return (
 		<div className="p-2">
 			<KolHeading _level={2} _label="Wählen Sie einen Stadtteil aus"></KolHeading>
 			<KolForm
-				_errorList={errorList}
+				_errorList={sectionSubmitted ? errorList : []}
 				_on={{
 					onSubmit: () => {
 						void form.submitForm();
+						setSectionSubmitted(true);
 					},
 				}}
 			>
@@ -59,12 +57,14 @@ export function DistrictForm() {
 							_error={form.errors.district || ''}
 							_touched={form.touched.district}
 							_required
+							onBlur={() => {
+								void form.setFieldTouched('district', true);
+							}}
 							_on={{
 								onChange: (event, values: unknown) => {
 									// Select und Radio setzen den Wert immer initial.
 									if (event.target) {
 										const [value] = values as [FormValues['district']];
-										void form.setFieldTouched('district', true);
 										void form.setFieldValue('district', value, true);
 									}
 								},

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

@@ -1,7 +1,11 @@
+import { Field, useFormikContext } from 'formik';
 import React, { useState } from 'react';
+
 import { KolButton, KolForm, KolHeading, KolInputEmail, KolInputText, KolSelect } from '@public-ui/react';
-import { Field, FieldProps, useFormikContext } from 'formik';
-import { FormValues } from './AppointmentForm';
+
+import type { FieldProps } from 'formik';
+import type { FormValues } from './AppointmentForm';
+import { createErrorList } from './formUtils';
 
 const SALUTATION_OPTIONS = [
 	{
@@ -25,12 +29,13 @@ const SALUTATION_OPTIONS = [
 export function PersonalInformationForm() {
 	const form = useFormikContext<FormValues>();
 	const [sectionSubmitted, setSectionSubmitted] = useState(false);
+	const errorList = createErrorList(form.errors);
 
 	return (
 		<div className="p-2">
 			<KolHeading _level={2} _label="Geben Sie Ihre Kontaktdaten ein"></KolHeading>
-			<ul>{sectionSubmitted && Object.entries(form.errors).map(([field, error]) => <li key={field}>{error}</li>)}</ul>
 			<KolForm
+				_errorList={sectionSubmitted ? errorList : []}
 				_on={{
 					onSubmit: () => {
 						void form.submitForm();
@@ -41,6 +46,10 @@ export function PersonalInformationForm() {
 				<Field name="salutation">
 					{({ field }: FieldProps<FormValues['salutation']>) => (
 						<KolSelect
+							onBlur={() => {
+								void form.setFieldTouched('salutation', true);
+							}}
+							id="field-salutation"
 							_label="Anrede"
 							_value={[field.value]}
 							_error={form.errors.salutation || ''}
@@ -51,7 +60,6 @@ export function PersonalInformationForm() {
 								onChange: (event, values: unknown) => {
 									if (event.target) {
 										const [value] = values as [FormValues['salutation']];
-										void form.setFieldTouched('salutation', true);
 										void form.setFieldValue('salutation', value, true);
 									}
 								},
@@ -65,6 +73,10 @@ export function PersonalInformationForm() {
 						{({ field }: FieldProps<FormValues['company']>) => (
 							<div className="block mt-2">
 								<KolInputText
+									onBlur={() => {
+										void form.setFieldTouched('company', true);
+									}}
+									id="field-company"
 									_label="Firma"
 									_value={field.value}
 									_error={form.errors.company || ''}
@@ -73,7 +85,6 @@ export function PersonalInformationForm() {
 									_on={{
 										onChange: (event, value: unknown) => {
 											if (event.target) {
-												void form.setFieldTouched('company', true);
 												void form.setFieldValue('company', value, true);
 											}
 										},
@@ -88,6 +99,10 @@ export function PersonalInformationForm() {
 					{({ field }: FieldProps<FormValues['name']>) => (
 						<div className="block mt-2">
 							<KolInputText
+								onBlur={() => {
+									void form.setFieldTouched('name', true);
+								}}
+								id="field-name"
 								_label="Vor- und Zuname"
 								_value={field.value}
 								_error={form.errors.name || ''}
@@ -96,7 +111,6 @@ export function PersonalInformationForm() {
 								_on={{
 									onChange: (event, value: unknown) => {
 										if (event.target) {
-											void form.setFieldTouched('name', true);
 											void form.setFieldValue('name', value, true);
 										}
 									},
@@ -110,6 +124,10 @@ export function PersonalInformationForm() {
 					{({ field }: FieldProps<FormValues['email']>) => (
 						<div className="block mt-2">
 							<KolInputEmail
+								onBlur={() => {
+									void form.setFieldTouched('email', true);
+								}}
+								id="field-email"
 								_label="E-Mail"
 								_value={field.value}
 								_error={form.errors.email || ''}
@@ -118,7 +136,6 @@ export function PersonalInformationForm() {
 								_on={{
 									onChange: (event, value: unknown) => {
 										if (event.target) {
-											void form.setFieldTouched('email', true);
 											void form.setFieldValue('email', value, true);
 										}
 									},
@@ -132,6 +149,7 @@ export function PersonalInformationForm() {
 					{({ field }: FieldProps<FormValues['phone']>) => (
 						<div className="block mt-2">
 							<KolInputText
+								id="field-phone"
 								_type="tel"
 								_label="Telefonnumer"
 								_value={field.value}

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

@@ -1,7 +1,9 @@
-import React from 'react';
 import { useFormikContext } from 'formik';
+import React from 'react';
+
 import { KolHeading } from '@public-ui/react';
-import { FormValues } from './AppointmentForm';
+
+import type { FormValues } from './AppointmentForm';
 
 const ValueFallback = () => <i>Nicht angegeben</i>;
 const ValueWithFallback = ({ value }: { value: string }) => (value ? value : <ValueFallback />);

package/src/scenarios/appointment-form/formUtils.ts

@@ -0,0 +1,8 @@
+import type { ErrorListPropType } from '@public-ui/components';
+
+export function createErrorList(formikErrors: Record<string, string>): ErrorListPropType[] {
+	return Object.keys(formikErrors).map((fieldName) => ({
+		message: formikErrors[fieldName],
+		selector: `#field-${fieldName}`,
+	}));
+}

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

@@ -1,8 +1,9 @@
 import React, { FC } from 'react';
 
 import { KolAbbr, KolButton, KolInputEmail, KolInputRadio, KolInputText, KolSpin } from '@public-ui/react';
-import { FormProps } from '../common/form/types';
+
 import { FromComponent } from '../common/form/component';
+import { FormProps } from '../common/form/types';
 
 export const TerminKopfdatenComponent: FC<FormProps> = (props) => (
 	<FromComponent submitted={true} onSubmit={() => {}}>

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

@@ -1,9 +1,10 @@
 import React, { FC } from 'react';
 
 import { KolButton, KolSelect, KolSpin } from '@public-ui/react';
-import { LOCATION_OPTIONS } from './location.form';
-import { FormProps } from '../common/form/types';
+
 import { FromComponent } from '../common/form/component';
+import { FormProps } from '../common/form/types';
+import { LOCATION_OPTIONS } from './location.form';
 
 export const TerminLocationComponent: FC<FormProps> = () => (
 	<FromComponent submitted={true} onSubmit={() => {}}>

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

@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 
 import { KolButton, KolInputDate, KolSpin } from '@public-ui/react';
+
 import { FromComponent } from '../common/form/component';
 import { FormProps } from '../common/form/types';
 

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

@@ -1,4 +1,6 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { KolButton } from '@public-ui/react';
 
 export const CustomTooltipWidth: FC = () => (

package/src/scenarios/inputs-get-value.tsx

@@ -1,7 +1,9 @@
-import React, { createContext, FC, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { HTMLStencilElement } from '@stencil/core/internal';
+import type { FC } from 'react';
+import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
+
 import {
 	KolButton,
+	KolButtonLink,
 	KolInputCheckbox,
 	KolInputColor,
 	KolInputDate,
@@ -14,10 +16,11 @@ import {
 	KolInputText,
 	KolSelect,
 	KolTextarea,
-	KolButtonLink,
 } from '@public-ui/react';
+
 import { SampleDescription } from '../components/SampleDescription';
 
+import type { HTMLStencilElement } from '@stencil/core/internal';
 const EventTargetContext = createContext<EventTarget | undefined>(undefined);
 
 type Props = {

package/src/scenarios/routes.ts

@@ -1,8 +1,9 @@
 import { Routes } from '../shares/types';
-import { TerminComponent } from './complex-form/component';
 import { AppointmentForm } from './appointment-form/AppointmentForm';
-import { InputsGetValue } from './inputs-get-value';
+import { TerminComponent } from './complex-form/component';
 import { CustomTooltipWidth } from './custom-tooltip-width';
+import { InputsGetValue } from './inputs-get-value';
+import { StaticForm } from './static-form';
 
 export const SCENARIO_ROUTES: Routes = {
 	scenarios: {
@@ -10,5 +11,6 @@ export const SCENARIO_ROUTES: Routes = {
 		'appointment-form': AppointmentForm,
 		'inputs-get-value': InputsGetValue,
 		'custom-tooltip-width': CustomTooltipWidth,
+		'static-form': StaticForm,
 	},
 };

package/src/scenarios/static-form.tsx

@@ -0,0 +1,78 @@
+import {
+	KolButton,
+	KolInputCheckbox,
+	KolInputColor,
+	KolInputDate,
+	KolInputEmail,
+	KolInputFile,
+	KolInputNumber,
+	KolInputPassword,
+	KolInputRadio,
+	KolInputRange,
+	KolInputText,
+	KolSelect,
+	KolTextarea,
+} from '@public-ui/react';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../components/SampleDescription';
+
+export const StaticForm: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows how you can use KoliBri in static form context, too.</p>
+				<ol>
+					<li>
+						First you have to enable the <code>experimental mode</code>:{' '}
+						<code className="bg-gray-200">&lt;meta name=&quot;kolibri&quot; content=&quot;dev-mode=false;experimental-mode=true;&quot; /&gt;</code>
+					</li>
+					<li>
+						Currently you have to use a native <code>form</code> element:{' '}
+						<code className="bg-gray-200">&lt;form method=&quot;GET&quot;&gt;...&lt;/form&gt;</code>
+					</li>
+					<li>
+						It is important in static usage to give every input a <code>name</code> attribute:{' '}
+						<code className="bg-gray-200">&lt;KolInputColor _name=&quot;color&quot; _label=&quot;Color&quot; /&gt;</code>
+					</li>
+					<li>
+						Last of all one button should have the type <code>submit</code>:{' '}
+						<code className="bg-gray-200">&lt;KolButton _label=&quot;Submit&quot; _type=&quot;submit&quot; _variant=&quot;primary&quot; /&gt;</code>
+					</li>
+				</ol>
+			</SampleDescription>
+			<form className="grid gap-4" method="get">
+				<KolInputCheckbox _name="checkbox" _label="Checkbox" />
+				<KolInputColor _name="color" _label="Color" />
+				<KolInputDate _name="date" _label="Date" />
+				<KolInputEmail _name="email" _label="Email" />
+				<KolInputFile _name="file" _label="File" />
+				<KolInputNumber _name="number" _label="Number" />
+				<KolInputPassword _name="password" _label="Password" />
+				<KolInputRadio
+					_name="radio"
+					_label="Radio"
+					_options={[
+						{ label: 'Option A', value: 'A' },
+						{ label: 'Option B', value: 'B' },
+					]}
+				/>
+				<KolInputRange _name="range" _label="Range" />
+				<KolInputText _name="text" _label="Text" />
+				<KolSelect
+					_name="select"
+					_label="Select"
+					_options={[
+						{ label: 'Option A', value: 'A' },
+						{ label: 'Option B', value: 'B' },
+					]}
+				/>
+				<KolTextarea _name="textarea" _label="Textarea" />
+				<div className="flex flex-wrap gap-4">
+					<KolButton _label="Submit" _type="submit" _variant="primary" />
+					<KolButton _label="Reset" _type="reset" />
+				</div>
+			</form>
+		</>
+	);
+};

package/src/shares/randomEmoji.ts

@@ -0,0 +1,4 @@
+export const getRandomEmoji = (): string => {
+	const animalEmojis = ['🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯', '🦁', '🐮', '🐷', '🐽', '🐸', '🐵'];
+	return animalEmojis[Math.floor(Math.random() * animalEmojis.length)];
+};

package/src/shares/routes.ts

@@ -46,6 +46,7 @@ import { TOAST_ROUTES } from '../components/toast/routes';
 import { VERSION_ROUTES } from '../components/version/routes';
 import { SCENARIO_ROUTES } from '../scenarios/routes';
 import { Routes } from './types';
+import { TREE_ROUTES } from '../components/tree/routes';
 
 export const ROUTES: Routes = {
 	...HANDOUT_ROUTES,
@@ -94,6 +95,7 @@ export const ROUTES: Routes = {
 	...TABS_ROUTES,
 	...TEXTAREA_ROUTES,
 	...TOAST_ROUTES,
+	...TREE_ROUTES,
 	...VERSION_ROUTES,
 	...SCENARIO_ROUTES,
 };

package/src/shares/store.ts

@@ -1,7 +1,7 @@
-import { isTheme, Store, Theme } from './theme';
-import PackageJson from '@public-ui/components/package.json';
-import { THEME_OPTIONS } from './theme';
 import { Option } from '@public-ui/components';
+import PackageJson from '@public-ui/components/package.json';
+
+import { isTheme, Store, Theme, THEME_OPTIONS } from './theme';
 
 const STORE_IDENTIFIER = `public-ui.v${PackageJson.version}`;
 

package/dist/1090.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1090.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1090],{1090:(t,n,e)=>{e.r(n),e.d(n,{kol_breadcrumb:()=>s});var i=e(1456),l=e(305),o=e(9443),a=e(8659);const s=class{constructor(t){(0,i.r)(this,t),this.renderLink=(t,n)=>{const e=this.state._links.length-1;return(0,i.h)("li",{key:n},0!==n&&(0,i.h)("kol-icon",{_label:"",_icons:"codicon codicon-chevron-right"}),n===e?(0,i.h)("span",null,t._hideLabel?(0,i.h)("kol-icon",{_label:t._label,_icons:"string"==typeof t._icons?t._icons:"codicon codicon-symbol-event"}):(0,i.h)(i.F,null,t._label)):(0,i.h)("kol-link",Object.assign({},t)))},this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return(0,i.h)(i.H,null,(0,i.h)("nav",{"aria-label":this.state._label},(0,i.h)("ul",null,0===this.state._links.length&&(0,i.h)("li",null,(0,i.h)("kol-icon",{_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink))))}validateLabel(t,n,e=!1){e||(0,o.r)(this.state._label),(0,l.v)(this,t,{required:!0}),(0,l.k)(t),(0,o.a)(this.state._label)}validateLinks(t){(0,a.w)("KolBreadcrumb",this,t)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){(0,o.r)(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};s.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\tli,\n\tul {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tlist-style: none;\n\t\tdisplay: flex;\n\t\tgap: 0.5em;\n\t\tflex-wrap: wrap;\n\t\tplace-items: center;\n\t}\n\n\tkol-icon::part(separator) {\n\t\tfont-weight: 900;\n\t\tfont-size: 0.7em;\n\t}\n\n\tkol-icon::part(separator):before {\n\t\tcontent: '\\f054';\n\t\tfont-family: 'Font Awesome 6 Free';\n\t}\n}\n"}},9443:(t,n,e)=>{e.d(n,{a:()=>l,r:()=>o});const i=new Set;function l(t){i.has(t)?console.error(`There already is a nav element with the label "${t}"`):i.add(t)}function o(t){i.delete(t)}},8659:(t,n,e)=>{e.d(n,{w:()=>l});var i=e(305);const l=(t,n,e)=>{(0,i.l)(n,"_links",(t=>"object"==typeof t&&("string"==typeof t._href||"string"==typeof t._label)),e),(0,i.u)(t,n.state._links.length)}}}]);