@public-ui/sample-react 3.0.8-rc.1 → 3.0.8-rc.2

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

@@ -1,11 +1,16 @@
-import { Field, useFormikContext } from 'formik';
+import { KolInputEmailController, KolInputTextController, KolSelectController } from '@public-ui/react-hook-form-adapter';
 import React, { useEffect, useRef, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
 
-import { KolButton, KolForm, KolHeading, KolInputEmail, KolInputText, KolSelect } from '@public-ui/react-v19';
+import { KolButton, KolForm, KolHeading } from '@public-ui/react-v19';
 
-import type { FieldProps } from 'formik';
-import type { FormValues } from './AppointmentForm';
-import { createErrorList, focusErrorList } from './formUtils';
+import type { FormFieldName, FormValues } from './AppointmentForm';
+import { createErrorList, focusErrorList, touchFields } from './formUtils';
+
+type Props = {
+	fieldsToValidate: FormFieldName[];
+	onComplete: () => void;
+};
 
 const SALUTATION_OPTIONS = [
 	{
@@ -26,168 +31,129 @@ const SALUTATION_OPTIONS = [
 	},
 ];
 
-export function PersonalInformationForm() {
-	const form = useFormikContext<FormValues>();
+export function PersonalInformationForm({ fieldsToValidate, onComplete }: Props) {
+	const {
+		clearErrors,
+		control,
+		formState: { errors },
+		getValues,
+		setValue,
+		trigger,
+		watch,
+	} = useFormContext<FormValues>();
 	const [sectionSubmitted, setSectionSubmitted] = useState(false);
-	const errorList = createErrorList(form.errors);
-	const formikRef = useRef(null);
+	const errorList = createErrorList<FormValues>(errors, fieldsToValidate);
+	const formRef = useRef<HTMLKolFormElement>(null);
+	const salutation = watch('salutation');
 
 	useEffect(() => {
-		focusErrorList(formikRef);
+		focusErrorList(formRef);
 	}, [sectionSubmitted]);
+
+	const fieldsForValidation = salutation === 'Company' ? fieldsToValidate : fieldsToValidate.filter((field) => field !== 'company');
+
+	const handleSubmit = async () => {
+		setSectionSubmitted(true);
+		touchFields<FormValues>(fieldsForValidation, getValues, setValue);
+		const isValid = await trigger(fieldsForValidation, { shouldFocus: true });
+		if (isValid) {
+			onComplete();
+		} else {
+			focusErrorList(formRef);
+		}
+	};
 	return (
 		<div className="p-2">
 			<KolHeading _level={2} _label="Enter your contact details"></KolHeading>
 			<KolForm
-				ref={formikRef}
+				ref={formRef}
 				_errorList={sectionSubmitted ? errorList : []}
 				_on={{
 					onSubmit: () => {
-						void form.submitForm();
-						setSectionSubmitted(true);
-						focusErrorList(formikRef);
+						void handleSubmit();
 					},
 				}}
 			>
-				<Field name="salutation">
-					{({ field }: FieldProps<FormValues['salutation']>) => (
-						<KolSelect
-							onBlur={() => {
-								void form.setFieldTouched('salutation', true);
-							}}
-							id="field-salutation"
-							_label="Salutation"
-							_value={field.value}
-							_msg={{
-								_type: 'error',
-								_description: form.errors.salutation || '',
-							}}
-							_touched={form.touched.salutation}
-							_options={[{ label: 'Please select…', value: '' }, ...SALUTATION_OPTIONS]}
+				<KolSelectController
+					control={control}
+					name="salutation"
+					id="field-salutation"
+					_label="Salutation"
+					_options={[{ label: 'Please select…', value: '' }, ...SALUTATION_OPTIONS]}
+					_required
+					_on={{
+						onChange: () => {
+							setSectionSubmitted(false);
+							clearErrors(fieldsToValidate);
+						},
+					}}
+				/>
+
+				{salutation === 'Company' && (
+					<div className="block mt-2">
+						<KolInputTextController
+							control={control}
+							name="company"
+							id="field-company"
+							_label="Company"
 							_required
 							_on={{
-								onChange: (event, values: unknown) => {
-									if (event.target) {
-										const [value] = values as [FormValues['salutation']];
-										void form.setFieldValue('salutation', value, true);
-									}
+								onChange: () => {
+									setSectionSubmitted(false);
+									clearErrors(fieldsToValidate);
 								},
 							}}
 						/>
-					)}
-				</Field>
-
-				{form.values.salutation === 'Company' && (
-					<Field name="company">
-						{({ field }: FieldProps<FormValues['company']>) => (
-							<div className="block mt-2">
-								<KolInputText
-									onBlur={() => {
-										void form.setFieldTouched('company', true);
-									}}
-									id="field-company"
-									_label="Company"
-									_value={field.value}
-									_msg={{
-										_type: 'error',
-										_description: form.errors.company || '',
-									}}
-									_touched={form.touched.company}
-									_required
-									_on={{
-										onChange: (event, value: unknown) => {
-											if (event.target) {
-												void form.setFieldValue('company', value, true);
-											}
-										},
-									}}
-								/>
-							</div>
-						)}
-					</Field>
+					</div>
 				)}
 
-				<Field name="name">
-					{({ field }: FieldProps<FormValues['name']>) => (
-						<div className="block mt-2">
-							<KolInputText
-								onBlur={() => {
-									void form.setFieldTouched('name', true);
-								}}
-								id="field-name"
-								_label="First name and surname"
-								_value={field.value}
-								_msg={{
-									_type: 'error',
-									_description: form.errors.name || '',
-								}}
-								_touched={form.touched.name}
-								_required
-								_on={{
-									onChange: (event, value: unknown) => {
-										if (event.target) {
-											void form.setFieldValue('name', value, true);
-										}
-									},
-								}}
-							/>
-						</div>
-					)}
-				</Field>
+				<div className="block mt-2">
+					<KolInputTextController
+						control={control}
+						name="name"
+						id="field-name"
+						_label="First name and surname"
+						_required
+						_on={{
+							onChange: () => {
+								setSectionSubmitted(false);
+								clearErrors(fieldsToValidate);
+							},
+						}}
+					/>
+				</div>
 
-				<Field name="email">
-					{({ 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}
-								_msg={{
-									_type: 'error',
-									_description: form.errors.email || '',
-								}}
-								_touched={form.touched.email}
-								_required
-								_on={{
-									onChange: (event, value: unknown) => {
-										if (event.target) {
-											void form.setFieldValue('email', value, true);
-										}
-									},
-								}}
-							/>
-						</div>
-					)}
-				</Field>
+				<div className="block mt-2">
+					<KolInputEmailController
+						control={control}
+						name="email"
+						id="field-email"
+						_label="E-Mail"
+						_required
+						_on={{
+							onChange: () => {
+								setSectionSubmitted(false);
+								clearErrors(fieldsToValidate);
+							},
+						}}
+					/>
+				</div>
 
-				<Field name="phone">
-					{({ field }: FieldProps<FormValues['phone']>) => (
-						<div className="block mt-2">
-							<KolInputText
-								id="field-phone"
-								_type="tel"
-								_label="Telephone number"
-								_value={field.value}
-								_msg={{
-									_type: 'error',
-									_description: form.errors.phone || '',
-								}}
-								_touched={form.touched.phone}
-								_on={{
-									onChange: (event, value: unknown) => {
-										if (event.target) {
-											void form.setFieldTouched('phone', true);
-											void form.setFieldValue('phone', value, true);
-										}
-									},
-								}}
-							/>
-						</div>
-					)}
-				</Field>
+				<div className="block mt-2">
+					<KolInputTextController
+						control={control}
+						name="phone"
+						id="field-phone"
+						_type="tel"
+						_label="Telephone number"
+						_on={{
+							onChange: () => {
+								setSectionSubmitted(false);
+								clearErrors(fieldsToValidate);
+							},
+						}}
+					/>
+				</div>
 
 				<KolButton _label="Next" _type="submit" className="mt-2" />
 			</KolForm>

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

@@ -1,5 +1,5 @@
-import { useFormikContext } from 'formik';
 import React from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
 
 import { KolHeading } from '@public-ui/react-v19';
 
@@ -9,7 +9,8 @@ const ValueFallback = () => <i>Nicht angegeben</i>;
 const ValueWithFallback = ({ value }: { value: string }) => (value ? value : <ValueFallback />);
 
 export function Summary() {
-	const { values } = useFormikContext<FormValues>();
+	const { control } = useFormContext<FormValues>();
+	const values = useWatch({ control });
 
 	return (
 		<>
@@ -18,38 +19,38 @@ export function Summary() {
 			<dl>
 				<dt>District</dt>
 				<dd>
-					<ValueWithFallback value={values.district} />
+					<ValueWithFallback value={values?.district ?? ''} />
 				</dd>
 				<dt>Appointment</dt>
-				<dd>{values.date && values.time ? `${values.date} ${values.time} Uhr` : <ValueFallback />}</dd>
+				<dd>{values?.date && values?.time ? `${values.date} ${values.time} Uhr` : <ValueFallback />}</dd>
 
-				{values.salutation === 'Company' ? (
+				{values?.salutation === 'Company' ? (
 					<>
 						<dt>Company</dt>
 						<dd>
-							<ValueWithFallback value={values.company} />
+							<ValueWithFallback value={values?.company ?? ''} />
 						</dd>
 					</>
 				) : (
 					<>
 						<dt>Salutation</dt>
 						<dd>
-							<ValueWithFallback value={values.salutation} />
+							<ValueWithFallback value={values?.salutation ?? ''} />
 						</dd>
 					</>
 				)}
 
 				<dt>Name</dt>
 				<dd>
-					<ValueWithFallback value={values.name} />
+					<ValueWithFallback value={values?.name ?? ''} />
 				</dd>
 				<dt>E-Mail</dt>
 				<dd>
-					<ValueWithFallback value={values.email} />
+					<ValueWithFallback value={values?.email ?? ''} />
 				</dd>
 				<dt>Phone number</dt>
 				<dd>
-					<ValueWithFallback value={values.phone} />
+					<ValueWithFallback value={values?.phone ?? ''} />
 				</dd>
 			</dl>
 		</>

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

@@ -1,12 +1,31 @@
 import type { ErrorListPropType } from '@public-ui/components';
+import type { FieldErrors, Path, UseFormGetValues, UseFormSetValue } from 'react-hook-form';
 
-export function createErrorList(formikErrors: Record<string, string>): ErrorListPropType[] {
-	return Object.keys(formikErrors).map((fieldName) => ({
-		message: formikErrors[fieldName],
-		selector: `#field-${fieldName}`,
-	}));
+export function createErrorList<TFieldValues extends Record<string, unknown>>(
+	errors: FieldErrors<TFieldValues>,
+	fields?: Array<Path<TFieldValues>>,
+): ErrorListPropType[] {
+	const entries: Array<[Path<TFieldValues>, FieldErrors<TFieldValues>[Path<TFieldValues>]]> | Array<[string, FieldErrors<TFieldValues>[string]]> =
+		fields?.map((field) => [field, errors[field]]) ?? (Object.entries(errors) as Array<[string, FieldErrors<TFieldValues>[string]]>);
+
+	return entries
+		.map(([fieldName, error]) => ({
+			message: typeof error === 'object' && error ? String('message' in error ? error.message : '') : '',
+			selector: `#field-${String(fieldName)}`,
+		}))
+		.filter(({ message }) => Boolean(message));
+}
+
+export function focusErrorList(formRef: React.RefObject<HTMLKolFormElement | null>) {
+	formRef.current?.focusErrorList().catch(console.warn);
 }
 
-export function focusErrorList(formikRef: React.RefObject<HTMLKolFormElement | null>) {
-	formikRef.current?.focusErrorList().catch(console.warn);
+export function touchFields<TFieldValues extends Record<string, unknown>>(
+	fields: Array<Path<TFieldValues>>,
+	getValues: UseFormGetValues<TFieldValues>,
+	setValue: UseFormSetValue<TFieldValues>,
+): void {
+	fields.forEach((name) => {
+		setValue(name, getValues(name), { shouldTouch: true });
+	});
 }

package/src/scenarios/sample-form-with-validation.tsx

@@ -1,29 +1,25 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import {
+	KolComboboxController,
+	KolInputCheckboxController,
+	KolInputColorController,
+	KolInputDateController,
+	KolInputEmailController,
+	KolInputNumberController,
+	KolInputPasswordController,
+	KolInputRadioController,
+	KolInputRangeController,
+	KolInputTextController,
+	KolSelectController,
+	KolSingleSelectController,
+	KolTextareaController,
+} from '@public-ui/react-hook-form-adapter';
+import { KolAlert, KolButton, KolHeading, KolLink } from '@public-ui/react-v19';
 import React from 'react';
 import type { FieldError } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import {
-	KolAlert,
-	KolButton,
-	KolCombobox,
-	KolHeading,
-	KolInputCheckbox,
-	KolInputColor,
-	KolInputDate,
-	KolInputEmail,
-	KolInputNumber,
-	KolInputPassword,
-	KolInputRadio,
-	KolInputRange,
-	KolInputText,
-	KolLink,
-	KolSelect,
-	KolSingleSelect,
-	KolTextarea,
-} from '@public-ui/react-v19';
-
 import { SampleDescription } from '../components/SampleDescription';
 import { useToasterService } from '../hooks/useToasterService';
 import { COUNTRY_SUGGESTIONS } from '../shares/country';
@@ -59,11 +55,9 @@ export const SampleFormWithValidation: React.FC = () => {
 	const { dummyClickEventHandler } = useToasterService();
 	const {
 		handleSubmit,
-		formState: { errors, touchedFields },
+		formState: { errors },
 		reset,
-		setValue,
-		trigger,
-		watch,
+		control,
 	} = useForm({
 		mode: 'onBlur',
 		reValidateMode: 'onChange',
@@ -74,35 +68,6 @@ export const SampleFormWithValidation: React.FC = () => {
 		},
 	});
 
-	const err = (key: keyof z.infer<typeof formSchema>) => {
-		const fieldError = errors[key];
-
-		if (!fieldError || typeof fieldError !== 'object' || !('message' in fieldError)) {
-			return undefined;
-		}
-
-		return {
-			_description: fieldError.message as string,
-			_type: 'error' as const,
-		};
-	};
-
-	const isTouched = (key: keyof z.infer<typeof formSchema>) => {
-		return !!touchedFields[key];
-	};
-
-	const bind = <K extends keyof z.infer<typeof formSchema>>(key: K) => ({
-		id: `field-${key as string}`,
-		_name: key,
-		_value: watch(key) as z.infer<typeof formSchema>[K],
-		_touched: isTouched(key),
-		_msg: err(key),
-		_on: {
-			onInput: (_: Event, v: unknown) => setValue(key, v as any, { shouldTouch: true, shouldValidate: true }),
-			onBlur: () => trigger(key),
-		},
-	});
-
 	const onReset = () => {
 		reset(undefined, {
 			keepErrors: false,
@@ -147,40 +112,43 @@ export const SampleFormWithValidation: React.FC = () => {
 			)}
 
 			<form onSubmit={handleSubmit(dummyClickEventHandler)} noValidate className="grid gap-4 mt-6">
-				<KolInputDate _label="Date" {...bind('date')} />
-				<KolInputText _label="Text (≥ 10 chars)" {...bind('text')} />
-				<KolInputEmail _label="Email" {...bind('email')} />
-				<KolInputPassword _label="Password" {...bind('password')} />
-				<KolInputRange _label="Range (≥ 30)" _min={0} _max={100} {...bind('range')} />
-				<KolInputNumber _label="Number (1 – 10)" {...bind('number')} />
-				<KolInputCheckbox _label="Accept terms" {...bind('checkbox')} />
-				<KolInputRadio
+				<KolInputDateController control={control as any} name="date" _label="Date" />
+				<KolInputTextController control={control as any} name="text" _label="Text (≥ 10 chars)" />
+				<KolInputEmailController control={control as any} name="email" _label="Email" />
+				<KolInputPasswordController control={control as any} name="password" _label="Password" />
+				<KolInputRangeController control={control as any} name="range" _label="Range (≥ 30)" _min={0} _max={100} />
+				<KolInputNumberController control={control as any} name="number" _label="Number (1 – 10)" />
+				<KolInputCheckboxController control={control as any} name="checkbox" _label="Accept terms" />
+				<KolInputRadioController
+					control={control as any}
+					name="radio"
 					_label="Gender"
 					_options={[
 						{ label: 'Female', value: 'f' },
 						{ label: 'Male', value: 'm' },
 					]}
-					{...bind('radio')}
 				/>
-				<KolInputColor _label="Favorite Color" {...bind('color')} />
-				<KolSelect
+				<KolInputColorController control={control as any} name="color" _label="Favorite Color" />
+				<KolSelectController
+					control={control as any}
+					name="select"
 					_label="Select"
 					_options={[
 						{ label: 'Option A', value: 'A' },
 						{ label: 'Option B', value: 'B' },
 					]}
-					{...bind('select')}
 				/>
-				<KolSingleSelect
+				<KolSingleSelectController
+					control={control as any}
+					name="singleSelect"
 					_label="Single Select"
 					_options={[
 						{ label: 'Option A', value: 'A' },
 						{ label: 'Option B', value: 'B' },
 					]}
-					{...bind('singleSelect')}
 				/>
-				<KolCombobox _label="Country" _suggestions={COUNTRY_SUGGESTIONS} {...bind('combobox')} />
-				<KolTextarea _label="Message" _rows={4} {...bind('textarea')} />
+				<KolComboboxController control={control as any} name="combobox" _label="Country" _suggestions={COUNTRY_SUGGESTIONS} />
+				<KolTextareaController control={control as any} name="textarea" _label="Message" _rows={4} />
 
 				<div className="flex gap-4 mt-4">
 					<KolButton _label="Submit" _type="submit" _variant="primary" />

package/dist/assets/Alert-B3jx2jlL-CpK4XYwv.js

@@ -1,4 +0,0 @@
-import{_ as p}from"./tslib.es6-CxX45GIN-BAJoBDh7.js";import{O as v,h as a,P as f,e as C,Q as L,i as k,R as E,F as S}from"./index-eI_RdheT.js";import{c as y}from"./clsx-eK3rPvPS-BT_IL7Fz.js";import{t as n}from"./i18n-C5ifExT3-Bgs4IVwr.js";import{K as T}from"./Heading-DqUSmJEO-DIKZMp_1.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const O=n("kol-error"),B=n("kol-info"),M=n("kol-warning"),I=n("kol-success"),K=n("kol-message"),s=({ariaLabel:e,icon:o})=>a(S,null,a("span",{class:"visually-hidden"},e),a(k,{class:E,_label:"",_icons:o})),R=({type:e,label:o})=>{switch(e){case"error":return a(s,{ariaLabel:O,icon:"codicon codicon-error",label:o});case"info":return a(s,{ariaLabel:B,icon:"codicon codicon-info",label:o});case"warning":return a(s,{ariaLabel:M,icon:"codicon codicon-warning",label:o});case"success":return a(s,{ariaLabel:I,icon:"codicon codicon-pass",label:o});default:return a(s,{ariaLabel:K,icon:"codicon codicon-comment",label:o})}},N=n("kol-close-alert"),w=()=>{if(typeof navigator>"u"||typeof navigator.vibrate!="function")return;const e=navigator.userActivation;if((e?.isActive||e?.hasBeenActive)&&matchMedia("(any-pointer: coarse)").matches)try{navigator.vibrate([100,75,100,75,100])}catch{}},D=(e,o)=>{const{class:l={},alert:c=!1,hasCloser:d=!1,label:t,level:u=0,type:_="default",variant:r="msg",onAlertTimeout:i,onCloserClick:m}=e,b=p(e,["class","alert","hasCloser","label","level","type","variant","onAlertTimeout","onCloserClick"]);c&&(w(),setTimeout(()=>{i?.()},1e4));const g=v("kol-alert",{hasCloser:!!d,[`type-${_}`]:!0,[`variant-${r}`]:!0}),h=v("kol-alert","heading",{[`h${u}`]:!0}),A=Object.assign({class:y(l,g)},b);return a("div",Object.assign({role:c?"alert":void 0},A,{"data-testid":"alert"}),a("div",{class:"kol-alert__container"},a(R,{label:t,type:_}),a("div",{class:"kol-alert__container-content"},t&&a(T,{class:h,level:u,id:"heading"},t),r==="msg"&&a("span",{class:f,"aria-describedby":t?"heading":void 0},o)),d&&a(C,{class:L,"data-testid":"alert-close-button",_ariaDescription:t?.trim()||"",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:N,_on:{onClick:m},_tooltipAlign:"left"})),r==="card"&&a("div",{class:f,"aria-describedby":t?"heading":void 0},o))};export{D as K};
-//# sourceMappingURL=Alert-B3jx2jlL-CpK4XYwv.js.map

package/dist/assets/Collapsible-DOnIFY33-C7y7f3JI.js

@@ -1,4 +0,0 @@
-import{_ as m}from"./tslib.es6-CxX45GIN-BAJoBDh7.js";import{h as s,e as f}from"./index-eI_RdheT.js";import{c as a}from"./clsx-eK3rPvPS-BT_IL7Fz.js";import{K as g}from"./Heading-DqUSmJEO-DIKZMp_1.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const K=(d,r)=>{const{id:n,class:t,label:p,level:v=1,disabled:c,open:e,onClick:_,HeadingProps:i={},HeadingButtonProps:l={},ContentProps:o={}}=d,b=m(d,["id","class","label","level","disabled","open","onClick","HeadingProps","HeadingButtonProps","ContentProps"]),u=e?"remove":"add";return s("div",Object.assign({id:n,class:a("collapsible",{"collapsible--disabled":c===!0,"collapsible--open":e===!0},t)},b),s(g,{ref:i?.ref,level:v,class:a("collapsible__heading",i?.class)},s(f,{class:a("collapsible__heading-button",l?.class),ref:l?.ref,slot:"expert",_ariaControls:`${n}-control`,_ariaExpanded:e,_disabled:c,_icons:l?._icons||`codicon codicon-${u}`,_label:p,_on:{onClick:_}})),s("div",{class:a("collapsible__wrapper",o?.wrapperClass)},s("div",{class:a("collapsible__wrapper-animation",o?.animationClass)},s("div",{"aria-hidden":e===!1?"true":void 0,class:a("collapsible__content",o?.class),id:`${n}-control`},r))))};export{K};
-//# sourceMappingURL=Collapsible-DOnIFY33-C7y7f3JI.js.map

package/dist/assets/CustomSuggestionsOptionsGroup-BiywiWxx-DQ9nE4it.js

@@ -1,4 +0,0 @@
-import{h as r}from"./index-eI_RdheT.js";import{c as f}from"./clsx-eK3rPvPS-BT_IL7Fz.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const C=({index:o,ref:t,selected:n,onClick:e,onMouseOver:l,onFocus:c,onKeyDown:p,option:a,searchTerm:m})=>{const d=(u,s)=>{if(!s?.trim())return u;const g=new RegExp(`(${s.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")})`,"gi");return u.split(g).map((i,k)=>g.test(i)?r("mark",{key:k},i):i)};return r("li",{id:`option-${o}`,key:`-${o}`,ref:t,"data-index":o,tabIndex:-1,role:"option","aria-selected":n?"true":void 0,onClick:e,onMouseOver:l,onFocus:c,class:"kol-custom-suggestions-option",onKeyDown:p},d(String(a),m||""))},S=({blockSuggestionMouseOver:o,onKeyDown:t,style:n},e)=>r("ul",{role:"listbox",style:n,class:f("kol-custom-suggestions-options-group",{"kol-custom-suggestions-options-group--cursor-hidden":o}),onKeyDown:t},e);export{S as C,C as a};
-//# sourceMappingURL=CustomSuggestionsOptionsGroup-BiywiWxx-DQ9nE4it.js.map

package/dist/assets/FieldControlStateWrapper-oMcmUdOF-B8QKONc0.js

@@ -1,4 +0,0 @@
-import{_ as b}from"./tslib.es6-CxX45GIN-BAJoBDh7.js";import{h as e,F as S}from"./index-eI_RdheT.js";import{c}from"./clsx-eK3rPvPS-BT_IL7Fz.js";import{b as q,s as w}from"./reuse-CX4AQDkS-Cyh-fyjG.js";import{c as I,a as E,K as M,b as $}from"./FormFieldStateWrapper-BBrHIwy9-BzgygwAM.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const W=(o,l)=>{var{class:n}=o,i=b(o,["class"]);return e("div",Object.assign({class:c("kol-field-control__input",n)},i),l)},z=(o,l)=>{const{class:n,id:i,disabled:m,label:t,hideLabel:a,labelAlign:d,renderNoTooltip:_,hint:y,renderNoHint:C,tooltipAlign:F,accessKey:p,shortKey:f,msg:s,touched:h,required:K,readonly:k,fieldControlInputProps:T,fieldControlLabelProps:r,fieldControlTooltipProps:v,fieldControlHintProps:O}=o,B=b(o,["class","id","disabled","label","hideLabel","labelAlign","renderNoTooltip","hint","renderNoHint","tooltipAlign","accessKey","shortKey","msg","touched","required","readonly","fieldControlInputProps","fieldControlLabelProps","fieldControlTooltipProps","fieldControlHintProps"]),P=!C,x=!_,L=I(s,h),g=w(t),N=x&&!g&&a,j=q(p,f),A=typeof s=="string"?"error":s?._type,u=[e(S,null,e(W,Object.assign({},T),l),N&&e(E,Object.assign({},v||{},{id:i,label:t,align:F,badgeText:j}))),e(M,Object.assign({},r||{},{id:i,baseClassName:"kol-field-control",class:c(r?.class,{"kol-field-control__label--visually-hidden":!!a}),hasExpertSlot:g,label:t,accessKey:p,shortKey:f}))];d==="left"&&u.reverse();const H={"kol-field-control--disabled":!!m,"kol-field-control--required":!!K,"kol-field-control--touched":!!h,"kol-field-control--hide-label":!!a,"kol-field-control--read-only":!!k,[`kol-field-control--${A||"error"}`]:!!L,[`kol-field-control--label-align-${d}`]:!!d};return e("div",Object.assign({class:c("kol-field-control",H,n)},B),u,P&&e($,Object.assign({},O||{},{baseClassName:"kol-field-control",id:i,hint:y})))};function D(o){const l={id:o._id,disabled:o._disabled,msg:o._msg,hint:o._hint,label:o._label,hideLabel:o._hideLabel,touched:o._touched};return"_required"in o&&(l.required=o._required),"_readOnly"in o&&(l.readonly=o._readOnly),"_labelAlign"in o&&(l.labelAlign=o._labelAlign),"_accessKey"in o&&(l.accessKey=o._accessKey),"_shortKey"in o&&(l.shortKey=o._shortKey),l}const V=(o,l)=>{var{state:n}=o,i=b(o,["state"]);return e(z,Object.assign({},D(n),i),l)};export{V as F};
-//# sourceMappingURL=FieldControlStateWrapper-oMcmUdOF-B8QKONc0.js.map

package/dist/assets/FormFieldStateWrapper-BBrHIwy9-BzgygwAM.js

@@ -1,4 +0,0 @@
-import{h as s,F as R,K as re,n as z,v as se,s as j,o as U,p as w,d as ae,a as K,m as A,w as le,Y as ce,t as de,A as D}from"./index-eI_RdheT.js";import{v as he,a as E,b as ue,c as me}from"./access-and-short-key-B37XLwy2-BYe6swmD.js";import{v as pe}from"./disabled-BhpAFgSp-yj0pxqYS.js";import{v as fe}from"./hide-label-B9FhGrWP-BJriMB-z.js";import{a as ge}from"./label-Dnmzb2S_-C6oOQMoX.js";import{v as be}from"./tooltip-align-Cnin7S26-AW7yAE8m.js";import{A as _e}from"./associated.controller-ByY2WiIp-DV7ybZcT.js";import{i as H,a as ve,c as ye,r as xe}from"./isObject-DvSELytj-B0RigBxT.js";import{_ as T}from"./tslib.es6-CxX45GIN-BAJoBDh7.js";import{c as v}from"./clsx-eK3rPvPS-BT_IL7Fz.js";import{b as G,s as Le}from"./reuse-CX4AQDkS-Cyh-fyjG.js";import{t as f}from"./i18n-C5ifExT3-Bgs4IVwr.js";import{i as W,K as Fe}from"./InternalUnderlinedBadgeText-CodJXcQG-DfoTu4tD.js";import{K as Ke}from"./Alert-B3jx2jlL-CpK4XYwv.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const Te=(e,t)=>{A(e,"_adjustHeight",t)},Ce=(e,t,n)=>{A(e,"_hideMsg",t,n)},ke=(e,t)=>{z(e,"_hint",t)},Se=(e,t)=>{U(t,()=>{try{t=w(t)}catch{}le(e,"_msg",n=>{if(n===void 0||typeof n=="string"&&n.length>0)return!0;if(ce(n)&&n!==null){const i=n._description;return de(i,1)}return!1},new Set(["MsgPropType","string"]),t)})};function Me(e,t){var n;if(!e)return!1;const i=typeof e=="string"?"error":(n=e._type)!==null&&n!==void 0?n:"error";return t===!0||i!=="error"}function Oe(e){if(typeof e=="string")try{return w(e)}catch{return{_description:e,_type:"error"}}return e&&typeof e=="object"&&!("_type"in e)?Object.assign(Object.assign({},e),{_type:"error"}):e}const Ie=(e,t)=>{A(e,"_touched",t)},je=({id:e,maxLength:t})=>s("span",{id:`${e}-character-limit-hint`,class:"visually-hidden"},f("kol-character-limit-hint",{placeholders:{limit:String(t)}})),Ee=({currentLength:e,currentLengthDebounced:t,maxLength:n,maxLengthBehavior:i})=>{let o,l;const d=["kol-form-field__counter"];if(i==="hard")o=typeof n=="number"?f("kol-character-counter-current-of-max",{placeholders:{current:String(e),max:String(n)}}):f("kol-character-counter-current",{placeholders:{current:String(e)}}),l=typeof n=="number"?f("kol-character-counter-current-of-max-aria",{placeholders:{current:String(t),max:String(n)}}):f("kol-character-counter-current",{placeholders:{current:String(t)}});else if(typeof n=="number"){const a=n-e,r=a<0,h=n-t,g=h<0;o=r?f("kol-character-limit-exceeded",{placeholders:{over:String(Math.abs(a))}}):f("kol-character-limit-remaining",{placeholders:{remaining:String(a)}}),l=g?f("kol-character-limit-exceeded",{placeholders:{over:String(Math.abs(h))}}):f("kol-character-limit-remaining",{placeholders:{remaining:String(h)}}),r&&d.push("kol-form-field__counter--exceeded")}else return null;return s(R,null,s("span",{class:v(d),"aria-hidden":"true","data-testid":"input-counter"},o),s("span",{"aria-live":"polite",class:"visually-hidden","data-testid":"input-counter-aria"},l))},Be=e=>{var{id:t,class:n,hint:i,baseClassName:o="kol-form-field"}=e,l=T(e,["id","class","hint","baseClassName"]);return i?s("span",Object.assign({class:v(`${o}__hint`,n),id:`${t}-hint`},l),i):null};var He="[object Symbol]";function we(e){return typeof e=="symbol"||ve(e)&&ye(e)==He}var Ae=/\s/;function Ne(e){for(var t=e.length;t--&&Ae.test(e.charAt(t)););return t}var Pe=/^\s+/;function $e(e){return e&&e.slice(0,Ne(e)+1).replace(Pe,"")}var q=NaN,De=/^[-+]0x[0-9a-f]+$/i,We=/^0b[01]+$/i,qe=/^0o[0-7]+$/i,Ve=parseInt;function V(e){if(typeof e=="number")return e;if(we(e))return q;if(H(e)){var t=typeof e.valueOf=="function"?e.valueOf():e;e=H(t)?t+"":t}if(typeof e!="string")return e===0?e:+e;e=$e(e);var n=We.test(e);return n||qe.test(e)?Ve(e.slice(2),n?2:8):De.test(e)?q:+e}var B=function(){return xe.Date.now()},Re="Expected a function",ze=Math.max,Ue=Math.min;function Ge(e,t,n){var i,o,l,d,a,r,h=0,g=!1,p=!1,b=!0;if(typeof e!="function")throw new TypeError(Re);t=V(t)||0,H(n)&&(g=!!n.leading,p="maxWait"in n,l=p?ze(V(n.maxWait)||0,t):l,b="trailing"in n?!!n.trailing:b);function m(c){var u=i,_=o;return i=o=void 0,h=c,d=e.apply(_,u),d}function k(c){return h=c,a=setTimeout(L,t),g?m(c):d}function y(c){var u=c-r,_=c-h,M=t-u;return p?Ue(M,l-_):M}function x(c){var u=c-r,_=c-h;return r===void 0||u>=t||u<0||p&&_>=l}function L(){var c=B();if(x(c))return C(c);a=setTimeout(L,y(c))}function C(c){return a=void 0,b&&i?m(c):(i=o=void 0,d)}function S(){a!==void 0&&clearTimeout(a),h=0,i=r=o=a=void 0}function O(){return a===void 0?d:C(B())}function F(){var c=B(),u=x(c);if(i=arguments,o=this,r=c,u){if(a===void 0)return k(r);if(p)return clearTimeout(a),a=setTimeout(L,t),m(r)}return a===void 0&&(a=setTimeout(L,t)),d}return F.cancel=S,F.flush=O,F}const Je=({hasExpertSlot:e,accessKey:t,shortKey:n,label:i,showBadge:o=!0})=>{if(e)return s("slot",{name:"expert"});if(!i)return null;const l=W(t)||W(n);if(!o||!l)return s("span",null,i);const d=G(t,n);return s(R,null,s(Fe,{badgeText:d,label:i})," ",s("kbd",{class:"badge-text-hint","aria-hidden":"true"},d))},Xe=e=>{var{component:t="label",id:n,baseClassName:i="kol-form-field",class:o,accessKey:l,shortKey:d,label:a,hideLabel:r,hasExpertSlot:h,showBadge:g}=e,p=T(e,["component","id","baseClassName","class","accessKey","shortKey","label","hideLabel","hasExpertSlot","showBadge"]);const b=!h&&r;return s(t,Object.assign({},p,{class:v(`${i}__label`,o),id:b?void 0:`${n}-label`,hidden:b,htmlFor:n}),s("span",{class:v(`${i}__label-text`)},s(Je,{hasExpertSlot:h,accessKey:l,shortKey:d,label:a,showBadge:g})))},Ye=e=>{var t,n,{alert:i,msg:o,id:l,class:d}=e,a=T(e,["alert","msg","id","class"]);const r=Oe(o);return s(Ke,Object.assign({id:`${l}-msg`,alert:(t=r?._alert)!==null&&t!==void 0?t:i,hasCloser:!1,level:0,type:(n=r?._type)!==null&&n!==void 0?n:"error",variant:"msg",class:v("kol-form-field__msg",d)},a),r?._description||void 0)},Qe=({id:e,align:t,badgeText:n,label:i,class:o})=>s(re,{"aria-hidden":"true",class:v("kol-form-field__tooltip",o),_badgeText:n,_align:t,_id:`${e}-label`,_label:i});function Ze(e){return e?.type&&{default:"msg-type-default",info:"msg-type-info",success:"msg-type-success",warning:"msg-type-warning",error:"msg-type-error"}[e?.type]||""}const et=(e,t)=>{var{class:n}=e,i=T(e,["class"]);return s("div",Object.assign({class:v("kol-form-field__input",n)},i),t)},tt=(e,t)=>{var n;const{component:i="div",renderNoLabel:o,renderNoTooltip:l,renderNoHint:d,anotherChildren:a,id:r,required:h,alert:g,disabled:p,class:b,msg:m,hideMsg:k,hideLabel:y,label:x,hint:L,accessKey:C,shortKey:S,tooltipAlign:O,counter:F,readOnly:c,touched:u,maxLength:_,formFieldLabelProps:M,formFieldHintProps:J,formFieldTooltipProps:X,formFieldMsgProps:Y,formFieldInputProps:Q}=e,Z=T(e,["component","renderNoLabel","renderNoTooltip","renderNoHint","anotherChildren","id","required","alert","disabled","class","msg","hideMsg","hideLabel","label","hint","accessKey","shortKey","tooltipAlign","counter","readOnly","touched","maxLength","formFieldLabelProps","formFieldHintProps","formFieldTooltipProps","formFieldMsgProps","formFieldInputProps"]),ee=!o,te=!d,ne=!l,N=Le(x),P=Me(m,u),ie=G(C,S),oe=ne&&!N&&y,$=typeof m=="string"?"error":(n=m?._type)!==null&&n!==void 0?n:"error";let I={"kol-form-field--disabled":!!p,"kol-form-field--required":!!h,"kol-form-field--touched":!!u,"kol-form-field--hide-label":!!y,"kol-form-field--read-only":!!c,"kol-form-field--hidden-msg":!!k};return P&&(I=Object.assign(Object.assign({},I),{[`kol-form-field--${$||"error"}`]:!0,[`kol-form-field--${Ze({type:$})}`]:!0})),s(i,Object.assign({class:v("kol-form-field",I,b)},Z),ee&&s(Xe,Object.assign({},M||{},{id:r,hasExpertSlot:N,hideLabel:y,label:x,accessKey:C,shortKey:S})),s(et,Object.assign({},Q),t,oe&&y===!0&&s(Qe,Object.assign({},X||{},{id:r,label:x,align:O,badgeText:ie}))),F?s(Ee,Object.assign({},F)):null,_?s(je,{id:r,maxLength:_}):null,P&&!k&&s(Ye,Object.assign({},Y||{},{id:r,alert:g,msg:m})),te&&s(Be,Object.assign({},J||{},{id:r,hint:L})),a)};function _t({ariaDescribedBy:e,hideLabel:t,label:n}){return{title:"",autoCapitalize:"off",autoCorrect:"off","aria-describedby":e?.length?e.join(" "):void 0,"aria-label":t&&n?n:void 0}}class nt extends _e{constructor(t,n,i){super(t,n,i),this.component=t}validateTouched(t){Ie(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateTouched(this.component._touched)}}class vt extends nt{constructor(t,n,i){super(t,n,i),this.valueChangeListeners=[],this.onFacade={onBlur:this.onBlur.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onFocus:this.onFocus.bind(this),onInput:this.onInput.bind(this),onKeyDown:this.onKeyDown.bind(this)},this.updateCurrentLengthDebounced=Ge(o=>{j(this.component,"_currentLengthDebounced",o)},500),this.component=t}validateAccessKey(t){he(this.component,t),E(t,this.component._shortKey)}validateAdjustHeight(t){Te(this.component,t)}validateDisabled(t){pe(this.component,t)}validateTooltipAlign(t){be(this.component,t)}validateHideMsg(t){Ce(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideMsg&&D("Property _hideMsg for inputs: Only use when the error message is shown outside of the input component.")}}})}validateHideLabel(t){fe(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideLabel&&D("Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.")}}})}validateHint(t){ke(this.component,t)}validateId(t){z(this.component,"_id",t,{minLength:1}),(t===""||typeof t>"u")&&se("A unique ID on the input fields is not strictly required, but it might be relevant for E2E tests.")}validateLabel(t){ge(this.component,t,{required:!0})}validateMsg(t){Se(this.component,t)}validateOn(t){typeof t=="object"&&j(this.component,"_on",t)}validateShortKey(t){ue(this.component,t),E(this.component._accessKey,t)}validateSmartButton(t){U(t,()=>{try{t=w(t)}catch{}j(this.component,"_smartButton",t)})}validateTabIndex(t){me(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAccessKey(this.component._accessKey),this.validateAdjustHeight(this.component._adjustHeight),this.validateMsg(this.component._msg),this.validateDisabled(this.component._disabled),this.validateHideMsg(this.component._hideMsg),this.validateHideLabel(this.component._hideLabel),this.validateHint(this.component._hint),this.validateId(this.component._id),this.validateLabel(this.component._label),this.validateShortKey(this.component._shortKey),this.validateSmartButton(this.component._smartButton),this.validateOn(this.component._on),this.validateTabIndex(this.component._tabIndex),E(this.component._accessKey,this.component._shortKey)}emitEvent(t,n){this.host&&ae(this.host,t,n)}onBlur(t){var n;this.component._touched=!0,this.emitEvent(K.blur),typeof((n=this.component._on)===null||n===void 0?void 0:n.onBlur)=="function"&&this.component._on.onBlur(t)}onChange(t,n){var i;typeof n>"u"&&(n=t.target.value),this.emitEvent(K.change,n),typeof((i=this.component._on)===null||i===void 0?void 0:i.onChange)=="function"&&this.component._on.onChange(t,n),this.valueChangeListeners.forEach(o=>o(n))}onInput(t,n=!0,i){var o;typeof i>"u"&&(i=t.target.value),this.emitEvent(K.input,i),n&&this.setFormAssociatedValue(i),typeof((o=this.component._on)===null||o===void 0?void 0:o.onInput)=="function"&&this.component._on.onInput(t,i)}onClick(t){var n;this.emitEvent(K.click),typeof((n=this.component._on)===null||n===void 0?void 0:n.onClick)=="function"&&this.component._on.onClick(t)}onFocus(t){var n;this.emitEvent(K.focus),typeof((n=this.component._on)===null||n===void 0?void 0:n.onFocus)=="function"&&this.component._on.onFocus(t)}onKeyDown(t){var n;this.emitEvent(K.keydown),typeof((n=this.component._on)===null||n===void 0?void 0:n.onKeyDown)=="function"&&this.component._on.onKeyDown(t)}addValueChangeListener(t){this.valueChangeListeners.push(t)}hasSoftCharacterLimit(){return typeof this.component.state._maxLength=="number"&&this.component.state._maxLengthBehavior==="soft"}hasCounter(){return this.component.state._hasCounter===!0}}const yt=e=>{var t;const n=e._msg,i=typeof n=="string"?n:n?._description,o=typeof n=="string"?"error":(t=n?._type)!==null&&t!==void 0?t:"error",l=!!(i&&i.length>0),a=o==="error"&&l&&e._touched===!0,r=typeof e._hint=="string"&&e._hint.length>0,h=[];return l&&!e._hideMsg&&h.push(`${e._id}-msg`),r&&h.push(`${e._id}-hint`),{hasError:a,hasHint:r,ariaDescribedBy:h}};function it(e){const t={id:e._id,disabled:e._disabled,msg:e._msg,hint:e._hint,label:e._label,hideLabel:e._hideLabel,hideMsg:e._hideMsg,touched:e._touched};return"_required"in e&&(t.required=e._required),"_readOnly"in e&&(t.readOnly=e._readOnly),"_accessKey"in e&&(t.accessKey=e._accessKey),"_shortKey"in e&&(t.shortKey=e._shortKey),"_maxLength"in e&&(t.maxLength=e._maxLength),"_currentLength"in e&&typeof e._currentLength=="number"&&"_currentLengthDebounced"in e&&typeof e._currentLengthDebounced=="number"&&"_hasCounter"in e&&e._hasCounter===!0&&(t.counter={currentLength:e._currentLength,currentLengthDebounced:e._currentLengthDebounced,maxLength:e._maxLength,maxLengthBehavior:e._maxLengthBehavior||"hard"}),t}const xt=(e,t)=>{var{state:n}=e,i=T(e,["state"]);return s(tt,Object.assign({},it(n),i),t)};export{xt as F,vt as I,Xe as K,Qe as a,Be as b,Me as c,_t as d,yt as g};
-//# sourceMappingURL=FormFieldStateWrapper-BBrHIwy9-BzgygwAM.js.map

package/dist/assets/Heading-DqUSmJEO-DIKZMp_1.js

@@ -1,4 +0,0 @@
-import{_ as i}from"./tslib.es6-CxX45GIN-BAJoBDh7.js";import{h as n}from"./index-eI_RdheT.js";import{c as r}from"./clsx-eK3rPvPS-BT_IL7Fz.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const t=1,k=6;function O(s){return s>=t&&s<=k}function b(s){return O(s)?`h${s}`:"strong"}const g=(s,e)=>{var{class:a,level:o=t}=s,c=i(s,["class","level"]);const l=b(o);return n(l,Object.assign({class:r("kol-headline",`kol-headline--${l}`,a)},c),e)},j=(s,e)=>{var{class:a}=s,o=i(s,["class"]);return n("p",Object.assign({class:r("kol-headline kol-headline--group kol-headline--secondary",a)},o),e)},v=(s,e)=>{var{secondaryHeadline:a,level:o=t,class:c,HeadingGroupProps:l={},SecondaryHeadlineProps:p={}}=s,h=i(s,["secondaryHeadline","level","class","HeadingGroupProps","SecondaryHeadlineProps"]);const d=Object.assign({level:o},h);if(!a)return n(g,Object.assign({class:r(c,"kol-headline--single")},d),e);const{class:u}=l,H=i(l,["class"]),m=Object.assign({class:r("kol-heading-group",u)},H);return n("hgroup",Object.assign({},m),n(g,Object.assign({class:r(c,"kol-headline--group","kol-headline--primary")},d),e),n(j,Object.assign({},p),a))};export{v as K};
-//# sourceMappingURL=Heading-DqUSmJEO-DIKZMp_1.js.map

package/dist/assets/Icon-B-YLFbev-CY5SUbVp.js

@@ -1,4 +0,0 @@
-import{h as e,i as t}from"./index-eI_RdheT.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const r=s=>{const{class:l,style:o,icons:c,label:a,onClick:n}=s;return e(t,{class:l,style:o,onClick:n,_icons:c,_label:a})};export{r as K};
-//# sourceMappingURL=Icon-B-YLFbev-CY5SUbVp.js.map

package/dist/assets/Icon-B-YLFbev-CY5SUbVp.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Icon-B-YLFbev-CY5SUbVp.js","sources":["../../../../components/dist/esm/Icon-B-YLFbev.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { h } from './index-BG8JuXph.js';\nimport { e as KolIconTag } from './component-names-CkE54Ym7.js';\n\nconst KolIconFc = (props) => {\n    const { class: classNames, style, icons, label, onClick } = props;\n    return h(KolIconTag, { class: classNames, style: style, onClick: onClick, _icons: icons, _label: label });\n};\n\nexport { KolIconFc as K };\n//# sourceMappingURL=Icon-B-YLFbev.js.map\n\n//# sourceMappingURL=Icon-B-YLFbev.js.map"],"names":["KolIconFc","props","classNames","style","icons","label","onClick","h","KolIconTag"],"mappings":"+CAAA;AAAA;AAAA,GAMK,MAACA,EAAaC,GAAU,CACzB,KAAM,CAAE,MAAOC,EAAY,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,QAAAC,CAAO,EAAKL,EAC5D,OAAOM,EAAEC,EAAY,CAAE,MAAON,EAAY,MAAOC,EAAO,QAASG,EAAS,OAAQF,EAAO,OAAQC,CAAK,CAAE,CAC5G"}

package/dist/assets/Input-D-UExd4D-B4jTCA4a.js

@@ -1,4 +0,0 @@
-import{_ as f}from"./tslib.es6-CxX45GIN-BAJoBDh7.js";import{h as n,F as k}from"./index-eI_RdheT.js";import{c as B}from"./clsx-eK3rPvPS-BT_IL7Fz.js";import{c as v,d as q}from"./FormFieldStateWrapper-BBrHIwy9-BzgygwAM.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const F=s=>{const{class:d,msg:e,required:o,disabled:t,touched:a,readonly:l,ariaDescribedBy:u,hideLabel:c,label:p,suggestions:i,value:g}=s,r=f(s,["class","msg","required","disabled","touched","readonly","ariaDescribedBy","hideLabel","label","suggestions","value"]),b=v(e,a),m=typeof e=="string"?"error":e?._type,y={"kol-input--disabled":!!t,"kol-input--required":!!o,"kol-input--touched":!!a,"kol-input--readonly":!!l,[`kol-input--${m||"error"}`]:b},h=Object.assign(Object.assign({class:B("kol-input",y,d),required:o,disabled:t,readonly:l,type:"text",list:i?`${r.id}-list`:void 0},q({ariaDescribedBy:u,hideLabel:c,label:p})),r);return n(k,null,n("input",Object.assign({},h,{value:g})),i)};export{F as I};
-//# sourceMappingURL=Input-D-UExd4D-B4jTCA4a.js.map