loon-bulma-react 2026.0.39 → 2026.0.41

package/dist/lib/forms/Input.d.ts

@@ -0,0 +1,248 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { AlignmentProp, DirectionProp, AutoCompleteProp, KeyboardTypeProp, StrictOmit, SizeProp, ColorProp } from './../types';
+import React from 'react';
+import { MonthInputString } from './Periodes/MonthInput';
+import { WeekInputString } from './Periodes/WeekInput';
+export type InputErrorProps<T = InputValueType> = {
+    /** current value */
+    value: T | undefined;
+    /** is deze input 'touched' (gefocused en weer geblurred (unfocused)) */
+    touched: boolean;
+    /** is deze input focused? */
+    focused: boolean;
+    /** is deze input required? */
+    required: boolean;
+    /** is deze input disabled? */
+    disabled: boolean;
+    /** is deze input readonly? */
+    readonly: boolean;
+};
+/**
+ * Stel een icoon (met wat extra settings) samen voor gebruik aan de rechterkant van een Input.
+ * @param v de value van de input
+ * @param hovered is de input momenteel hovered?
+ * @param disabled is de input momenteel disabled?
+ * @param loading is de input momenteel loading?
+ * @param focused is de input momenteel focused?
+ * @return een tuple: `[icon: React.Reactnode]` of `[icon: React.ReactNode, onClick:() => void]`.
+ * - 1e item `ReactNode` MOET van het component-type `<Icon icon={...} />` zijn!
+ * - 2e item`onClick` is optioneel en is een callback voor een click op het icon.
+ */
+export type InputIconRightFn<T extends InputValueType = InputValueType> = (v: T | undefined, hovered: boolean, disabled: boolean, loading: boolean, focused: boolean) => [IconComponent: React.ReactNode, onClick?: () => void, color?: ColorProp];
+type InputValueType = string | number | string[] | readonly string[] | undefined;
+type InputStylingPropsType = {
+    /** grootte van de input (default = `m`, medium) */ size?: SizeProp | undefined;
+    /** alignment van de input (default = `l`, left) */ alignment?: AlignmentProp | undefined;
+    /** moet het label van de input verborgen worden? (screenreader only) (default = `false`) */ labelHidden?: boolean | undefined;
+    /** label boven (`v`) of voor (`h`) de input, (default = `v`, vertical) */ direction?: DirectionProp | undefined;
+    /** (optioneel) icon op de input */ icon?: IconProp | string | undefined | null;
+    /** (optioneel) kleur van de input - __LET OP!__ overschrijft de normale kleur EN de danger-kleur als er een error-message is! */ color?: ColorProp | undefined;
+    infoData?: string | React.ReactNode | ((helptag?: string | undefined) => void) | undefined;
+};
+type InputPropsType<T extends InputValueType = InputValueType> = {
+    optionList?: string[] | Array<{
+        value: string;
+        label: string;
+    }>;
+    /** label bij de input. Als geen label, dan wordt de `name`-property gebruikt */ label?: string | undefined;
+    /** Wordt er een rood sterretje getoond bij required inputs ? (default = `false`) */ showRequiredOnLabel?: boolean;
+    /** foutmelding bij de input */ errorMessage?: string | ((s: InputErrorProps<T>) => string) | undefined;
+    /** info-melding bij de input */ infoMessage?: string | ((v?: InputValueType) => string) | undefined;
+    /** helptag in Loon bij de input (`:HOOFDGROEP:SUBGROEP:`) */ helpTag?: string;
+    /** type input (default = `text`) */ type?: 'text' | 'password' | 'number' | 'email' | 'tel' | 'url' | 'range' | 'date' | 'datetime-local' | 'datetime' | 'month' | 'week' | 'time' | 'color' | 'search' | 'select' | 'file' | 'textarea';
+    /** (optioneel) tooltip-title voor de input. Bij gebruik van `pattern`, kan je hier het gewenste formaat opgeven. */ title?: string | undefined;
+    /** (optioneel) id voor de input. Als geen id, dan wordt de `name`-property gebruikt */ id?: string | undefined;
+    /** name-property voor de input */ name: string;
+    /** waarde voor de input */ value?: T;
+    /** is deze input loading (default = false) */ loading?: boolean | undefined;
+    /** gebruikt deze input de spellchecked (default = `false`) */ spellCheck?: boolean | undefined;
+    /** is deze input required (default= `false`) */ required?: boolean | undefined;
+    /** autocomplete voor deze input (default = `off`) */ autoComplete?: AutoCompleteProp | undefined;
+    /** type toetsenbord (voor smartphones) voor deze input (default = `text`) */ keyboardType?: KeyboardTypeProp | undefined;
+    /** placeholder in de input */ placeholder?: string | undefined;
+    /** is deze input disabled 9default = `false`) */ disabled?: boolean | undefined;
+    /** bij welk form hoort deze input? */ form?: string | undefined;
+    /** patroon voor de inputs (string of regex). Geef met `title` een gewenst formaat op. */ pattern?: string | undefined;
+    /** Is deze input readonly (default = `false`). Bij `true` zie je alleen nog maar de content van de input */
+    readonly?: boolean | undefined;
+    /** moet deze input de focus krijgen? (default = `false`) */ autofocus?: boolean | undefined;
+    /** (optionele) `ref` voor gebruik met `React.useRef<HTMLInputElement>` */ inputRef?: React.Ref<HTMLInputElement> | undefined;
+    /** max waarde of max lengte voor de input
+     * _(altijd hoger dan de `min`-prop)_
+     * @example // voor max waarde
+     * <Input type="number" max="100"/>
+     * <Input type="range" max="100"/>
+     * <Input type="date" max="2019-12-25"/>
+     * <Input type="month" max="2019-12"/>
+     * <Input type="week" max="2019-W23"/>
+     * <Input type="time" max="17:30"/>
+     * <Input type="datetime-local" max="29-12-25T23:59"/>
+     * @example //strings: voor max length, altijd 0 of hoger
+     * <Input type="text" max="100"/>
+     * <Input type="password" max="50"/> */
+    max?: number | WeekInputString | MonthInputString | string | undefined;
+    /** min waarde of min lengte voor de input
+     * _(altijd lager dan de `max`-prop)_
+     * @example <Input type="number" min="1"/>
+     * <Input type="range" min="1"/>
+     * <Input type="date" min="2019-01-01"/>
+     * <Input type="month" min="2019-01-01"/>
+     * <Input type="week" min="2019-W01"/>
+     * <Input type="time" min="08:30"/>
+     * <Input type="datetime-local" max="2019-01-01T00:00"/>
+     * @example //strings: voor max length, altijd 0 of hoger
+     * <Input type="text" min="100"/>
+     * <Input type="password" min="50"/> */
+    min?: number | WeekInputString | MonthInputString | string | undefined;
+    /** stapgrootte voor groter/kleiner aanpassingen
+     *  | type| value | Example|
+     * |----------------|----------------|---------------------------------------------|
+     * | number         | `1`            | `<Input type="number" step="2"/>`           |
+     * | range          | `1`            | `<Input type="range" step="2"/>`            |
+     * | date           | `1` (day)      | `<Input type="date" step="2"/>`             |
+     * | month          | `1` (month)    | `<Input type="month" step="2"/>`            |
+     * | week           | `1` (week)     | `<Input type="week" step="2"/>`             |
+     * | time           | `60` (seconds) | `<Input type="time" step="2"/>`             |
+     * | datetime-local | `1` (second)   | `<Input type="datetime-local" step="900"/>` | */
+    step?: number | undefined;
+    /** Voeg extra styles to aan deze input */
+    styles?: React.CSSProperties | undefined;
+    /** Voeg extra classes toe aan deze input */
+    className?: string | undefined;
+    optionListId?: string | undefined;
+    /**
+     * `hidden`: geen icon rechts
+     * `visible`: standaard gedrag, een check of een error icoon, of een info icoon als showInfo/infoData is meegegeven
+     * De functie is apart. Die returned een tuple. __LET OP: ALS JE DEZE GEBRUIKT, HEB JE NIET MEER DE NORMALE HELP-FUNCTIONALITEIT__
+     * - 1e item een ReactNode teruggeven van het type `<Icon icon={...} />`, voor het icon.
+     * - 2e item (optioneel) een onClick functie, als het icon klikbaar moet zijn. Die __MOET__ op de container, daarom niet in de component zelf.
+     * De functie wordt aangeroepen met de volgende parameters:
+     * - `value`: de value van de input
+     * - `hovered`: is de input momenteel hovered?
+     * - `disabled`: is de input momenteel disabled?
+     * - `loading`: is de input momenteel loading?
+     * - `focused`: is de input momenteel focused?
+     */
+    iconRight?: 'hidden' | 'visible' | InputIconRightFn<T> | undefined;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void | Promise<void>;
+    /** callback voor onChange. Voor de echte waarde, gebruik je `onValueChanged` */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void | Promise<void>;
+    /** value-changed callback met de nieuwe waarde van de input. Kan direct met de `setX()` van `const [x, setX] = React.useState()` worden gebruikt
+     * @example
+     * const [x, setX] = React.useState('');
+     * return <Input value={x} onValueChange={setX} {...props} />
+     */
+    onValueChanged?: (e: T) => void | Promise<void>;
+    /** callback voor focus MET daarbij de helptag */
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>, helpTag?: string) => void | Promise<void>;
+    /** callback voor typen */
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void | Promise<void>;
+    /** callback voor typen */
+    onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void | Promise<void>;
+};
+/** Tijd voordat een input de focus verliest als je erop klikt/hovert en er is hulp. Anders is het instant. */
+declare const FOCUS_HELP_TIMEOUT_IN_MS = 333;
+/**
+ * Basis input component. Deze component heeft dezelfde properties als de gewone `<input ... />`-tag en de `<Input<T> ... />-tag`.
+ * Het verschil met de `Input`-tag is dat deze compionent **geen** direction, label, of icon heeft, dus je kan hem zelf inrichten
+ * Wordt door (bijna) alle andere input-componenten gebruikt. Alleen niet door de `<Select>`, <Radio>`, `<Checkbox>` en `<Textarea>` componenten.
+ * @example <BaseInput type="text" name="myInput" value={x} onValueChanged={setX} />
+ * @description callbacks.
+ * | callback       |      | description                                 |
+ * |----------------|------|---------------------------------------------|
+ * | onBlur         |`(e: React.FocusEvent<HTMLInputElement>)=> void`      | callback voor unfocus (blur), zet OOK de input op `touched`|
+ * | onChange       |`(e: React.FocusEvent<HTMLInputElement>)=> void`      | callback voor onChange|
+ * | onValueChanged |`(v: T)=> void`      | value-changed callback met de nieuwe waarde van de input. Kan direct met de `setX()` van `const [x, setX] = React.useState()` worden gebruikt|
+ * | onFocus        |`(e: React.FocusEvent<HTMLInputElement>, ht?: string)=> void`      | callback voor focus, MET de `helpTag` voor gebruik in Loon (F1) |
+ * | onKeyDown      |`(e: React.KeyboardEvent<HTMLInputElement>)=> void`      | callback voor typen |
+ * | onKeyUp        |`(e: React.KeyboardEvent<HTMLInputElement>)=> void`      | callback voor typen |
+ * @description props: ({@link InputPropsType}) voor de input.
+ * | prop           | type           | description                                 |
+ * |----------------|----------------|---------------------------------------------|
+ * | alignment      | `AlignmentType`  | alignment van de input (default = `left`)   |
+ * | autoComplete   | `AutoCompleteProp`       | autocomplete voor deze input (default = `off`)|
+ * | autofocus      | `boolean`      | moet deze input de focus krijgen? (default = `false`)|
+ * | disabled       | `boolean`      | is deze input disabled (default = `false`)|
+ * | errorMessage   | `string`, `(v?: string) => string`       | error message voor deze input (default = `''`)|
+ * | form           | `string`        | form waar deze input bij hoort (default = `undefined`)|
+ * | helpTag        | `string` `:Hoofdgroep:Subgroep:`      | help tag voor deze input (default = `undefined`). Kan gebruikt worden voor de Help In loon (F1) functionaliteit. Meegelevert in de callback voor `onFocus`|
+ * | id             | `string`       | id voor deze input (default = `undefined`)|
+ * | inputRef       | `React.Ref<HTMLInputElement>` | `ref` voor gebruik met `React.useRef<HTMLInputElement>` (default = `undefined`)|
+ * | keyboardType   | `string`       | keyboard type voor deze input (default = `text`)|
+ * | max            | `number`,`string` | max waarde of max lengte voor de input (default = `undefined`)|
+ * | min            | `number`,`string` | min waarde of min lengte voor de input (default = `undefined`)|
+ * | name           | `string`       | name voor deze input (**verplicht**)|
+ * | pattern        | `string`       | pattern voor deze input (default = `undefined`)|
+ * | placeholder    | `string`       | placeholder voor deze input (default = `undefined`)|
+ * | readonly       | `boolean`      | is deze input readonly (default = `false`)|
+ * | required       | `boolean`      | is deze input required (default = `false`)|
+ * | size           | `SizeProp`       | size voor deze input (default = `undefined`)|
+ * | spellCheck     | `boolean`      | moet deze input spellcheck hebben (default = `false`)|
+ * | step           | `number`       | stapgrootte voor groter/kleiner aanpassingen (default = `1`)|
+ * | title          | `string`       | title voor deze input (default = `undefined`)|
+ * | type           | `string`       | type voor deze input (default = `text`)|
+ * | value          | `string`       | value voor deze input (default = `undefined`)|
+ */
+declare function BaseInput<T extends InputValueType = string>({ alignment: alignmentProp, autoComplete, optionListId, autofocus, disabled, errorMessage, infoMessage, form, helpTag, id, inputRef: ref, keyboardType, max, min, name, pattern, placeholder, readonly, required, size: sizeProp, spellCheck, step, title, type, value, className: extraClasses, styles, color, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, }: StrictOmit<InputPropsType<T>, 'optionList'> & StrictOmit<InputStylingPropsType, 'labelHidden' | 'direction' | 'icon'>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Input component. Deze component heeft dezelfde properties als de gewone `<input ... />`-tag en de `<BaseInput<T> ... />-tag`.
+ * Het verschil met de `BaseInput`-tag is dat deze compionent **wel** direction, label, of icon heeft.
+ * @example <Input type="text" name="myInput" value={x} onValueChanged={setX} icon={faMouse} />
+ * @description callbacks.
+ * | callback       |      | description                                 |
+ * |----------------|------|---------------------------------------------|
+ * | onBlur         |`(e: React.FocusEvent<HTMLInputElement>)=> void`      | callback voor unfocus (blur), zet OOK de input op `touched`|
+ * | onChange       |`(e: React.FocusEvent<HTMLInputElement>)=> void`      | callback voor onChange|
+ * | onValueChanged |`(v: T)=> void`      | value-changed callback met de nieuwe waarde van de input. Kan direct met de `setX()` van `const [x, setX] = React.useState()` worden gebruikt|
+ * | onFocus        |`(e: React.FocusEvent<HTMLInputElement>, ht?: string)=> void`      | callback voor focus, MET de `helpTag` voor gebruik in Loon (F1) |
+ * | onKeyDown      |`(e: React.KeyboardEvent<HTMLInputElement>)=> void`      | callback voor typen |
+ * | onKeyUp        |`(e: React.KeyboardEvent<HTMLInputElement>)=> void`      | callback voor typen |
+ * @description props: {@link InputPropsType} voor de input.
+ * | prop           | type           | description                                 |
+ * |----------------|----------------|---------------------------------------------|
+ * | alignment      | `AlignmentType`  | alignment van de input (default = `left`)   |
+ * | autoComplete   | `AutoCompleteProp`       | autocomplete voor deze input (default = `off`)|
+ * | autofocus      | `boolean`      | moet deze input de focus krijgen? (default = `false`)|
+ * | disabled       | `boolean`      | is deze input disabled (default = `false`)|
+ * | direction      | `DirectionProp` | direction voor deze input (default = `h`). Voor styling|
+ * | errorMessage   | `string`, `(v?: string) => string`       | error message voor deze input (default = `''`)|
+ * | form           | `string`        | form waar deze input bij hoort (default = `undefined`)|
+ * | helpTag        | `string`       | help tag voor deze input (default = `undefined`). Kan gebruikt worden voor de Help In loon (F1) functionaliteit. Meegelevert in de callback voor `onFocus`|
+ * | id             | `string`       | id voor deze input (default = `undefined`)|
+ * | inputRef       | `React.Ref<HTMLInputElement>` | `ref` voor gebruik met `React.useRef<HTMLInputElement>` (default = `undefined`)|
+ * | keyboardType   | `string`       | keyboard type voor deze input (default = `text`)|
+ * | max            | `number`, `string`       | max waarde of max lengte voor de input (default = `undefined`)|
+ * | min            | `number`, `string`       | min waarde of min lengte voor de input (default = `undefined`)|
+ * | name           | `string`       | name voor deze input (**verplicht**)|
+ * | pattern        | `string`       | pattern voor deze input (default = `undefined`)|
+ * | placeholder    | `string`       | placeholder voor deze input (default = `undefined`)|
+ * | readonly       | `boolean`      | is deze input readonly (default = `false`)|
+ * | required       | `boolean`      | is deze input required (default = `false`)|
+ * | size           | `SizeProp`       | size voor deze input (default = `undefined`)|
+ * | spellCheck     | `boolean`      | moet deze input spellcheck hebben (default = `false`)|
+ * | step           | `number`       | stapgrootte voor groter/kleiner aanpassingen (default = `1`)|
+ * | title          | `string`       | title voor deze input (default = `undefined`)|
+ * | type           | `string`       | type voor deze input (default = `text`)|
+ * | value          | `string`       | value voor deze input (default = `undefined`)|
+ */
+declare function Input<T extends InputValueType = string>({ direction: directionProp, errorMessage, infoMessage, showRequiredOnLabel, iconRight, icon, id, label, labelHidden, name, required, loading, disabled, readonly, size: sizeProp, value, infoData, helpTag, optionList, onBlur, onFocus, ...props }: StrictOmit<InputPropsType<T>, 'optionListId'> & InputStylingPropsType): import("react/jsx-runtime").JSX.Element;
+type InputContainerProps = {
+    label: string;
+    required: boolean;
+    showRequiredOnLabel: boolean;
+    inputId?: string;
+    labelHidden?: boolean;
+    loading?: boolean;
+    children: React.ReactNode;
+    size: SizeProp;
+    direction: DirectionProp;
+    controlClassName?: string;
+    infoData?: React.ReactNode | undefined;
+    setHovered?: (hovered: boolean) => void;
+    onMouseEnter?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onMouseLeave?: (e: React.MouseEvent<HTMLDivElement>) => void;
+};
+/** Een wrapper voor een input component, om te zorgen dat ze allemaal op dezelfde manier horizontaal of verticaal aligned worden. */
+declare function InputContainer({ children, controlClassName, direction, showRequiredOnLabel, inputId, label, labelHidden, required, size, loading, infoData, setHovered, onMouseEnter, onMouseLeave, }: InputContainerProps): import("react/jsx-runtime").JSX.Element;
+export { BaseInput, Input, InputContainer, FOCUS_HELP_TIMEOUT_IN_MS };
+export type { InputPropsType, InputStylingPropsType, InputValueType };

package/dist/lib/forms/MaskedInput/IBANInput.d.ts

@@ -0,0 +1,95 @@
+import { StrictOmit } from './../../types';
+import { IbanCountryCode, IbanGegevens } from './../../utils/IBAN.functions';
+import { InputPropsType, InputStylingPropsType, InputErrorProps } from '../Input';
+export type IBANInputErrorCode = '' | 'unknown_country' | 'unsupported_country' | 'incomplete' | 'invalid_format' | 'invalid_length' | 'invalid_structure' | 'invalid_checksum' | 'disallowed_country';
+export type IBANInputValidationResult = {
+    /** De schone IBAN-waarde (uppercase, geen spaties) */
+    value: string;
+    /** De geformatteerde IBAN-waarde (met spaties elke 4 tekens) */
+    formatted: string;
+    /** Of de IBAN geldig is */
+    isValid: boolean;
+    /** Error code bij ongeldig, lege string bij geldig */
+    errorCode: IBANInputErrorCode;
+    /** ISO country code (bijv. 'NL', 'DE', '') */
+    countryCode: string;
+    /** Volledige country name (bijv. 'Netherlands', 'Germany', '') */
+    countryName: string;
+    /** Of dit land onderdeel is van SEPA */
+    isSepa: boolean;
+    /** De 2-cijferige check digits */
+    checkDigits: string;
+    /** Basic Bank Account Number (alles na country code en check digits) */
+    bban: string;
+    /** Verwachte IBAN-lengte voor dit land (0 als onbekend) */
+    expectedLength: number;
+    /** Huidige lengte van de opgeschoonde IBAN */
+    currentLength: number;
+    /** Bank code (eerste 4 tekens van BBAN voor de meeste landen, leeg indien niet van toepassing) */
+    bankCode: string;
+    /** Of de IBAN de verwachte lengte heeft bereikt */
+    isComplete: boolean;
+    /** Of volledige validatie wordt ondersteund voor dit land */
+    isSupported: boolean;
+};
+export type IBANInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step' | 'pattern'> & InputStylingPropsType & {
+    /**
+     * Allowed countries voor IBAN validatie.
+     * Kan zijn:
+     * - Een array met country codes (uppercase of lowercase): `['NL', 'DE']` of `['nl', 'de']`
+     * - Een predicate function: `(code, details) => details.sepa`
+     * Als niet opgegeven, zijn alle landen toegestaan.
+     * @example ['NL', 'DE']
+     * @example (code, details) => details.sepa && code !== 'RU'
+     */
+    allowCountries?: (Uppercase<IbanCountryCode> | Lowercase<IbanCountryCode>)[] | ((code: IbanCountryCode, details: IbanGegevens) => boolean);
+    /**
+     * Wordt aangeroepen bij value changes met gedetailleerde validation info
+     * @param result Object met value, formatted, isValid en errorCode
+     * @example onValueChangedObj={(result) => console.log(result.errorCode, result.isValid)}
+     */
+    onValueChangedObj?: (result: IBANInputValidationResult) => void;
+    /**
+     * Error message om te tonen. Kan zijn:
+     * - Een string voor een vaste error message (component valideert dan niet meer zelf)
+     * - Een function die InputErrorProps ontvangt, uitgebreid met ibanErrorCode en ibanValidationResult
+     * Als niet opgegeven of als de function een lege string teruggeeft, worden default IBAN error messages getoond
+     * Let op: bij een string betekent een lege string "geen error"
+     * @example errorMessage={(props) => props.ibanErrorCode === 'incomplete' ? 'Vul het IBAN compleet in' : ''}
+     * @example errorMessage={(props) => props.ibanValidationResult?.bankName ? `Bank: ${props.ibanValidationResult.bankName}` : ''}
+     */
+    errorMessage?: string | ((props: InputErrorProps & {
+        ibanErrorCode?: IBANInputErrorCode;
+        ibanValidationResult?: IBANInputValidationResult;
+    }) => string);
+};
+/**
+ * Een input voor een IBAN. Deze input heeft validatie, formatting en country filtering.
+ * @example <IBANInput name="iban" value={iban} onValueChanged={setIban} />
+ * @example
+ * // Met custom error messages
+ * <IBANInput
+ *   name="iban"
+ *   value={iban}
+ *   onValueChanged={setIban}
+ *   errorMessage={(props) => {
+ *     switch (props.ibanErrorCode) {
+ *       case 'incomplete': return 'Vul het IBAN compleet in';
+ *       case 'invalid_checksum': return 'Controleer de cijfers';
+ *       default: return '';
+ *     }
+ *   }}
+ * />
+ * @example
+ * // Met toegang tot validation result
+ * <IBANInput
+ *   errorMessage={(props) => {
+ *     const result = props.ibanValidationResult;
+ *     if (result?.bankName) return `Bank: ${result.bankName}`;
+ *     if (result?.countryName) return `Land: ${result.countryName} (${result.currentLength}/${result.expectedLength})`;
+ *     return '';
+ *   }}
+ * />
+ * @param autoComplete de autocomplete type (password managers) (default = `cc-number`)
+ */
+export declare function IBANInput({ placeholder, helpTag, errorMessage, infoMessage, label, disabled, title, name, value, required, showRequiredOnLabel, spellCheck, id, autoComplete, inputRef, readonly, autofocus, iconRight, infoData, form, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, size: sizeProp, alignment: alignmentProp, direction: directionProp, labelHidden, loading, icon, allowCountries, onValueChangedObj, ...props }: IBANInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/forms/MaskedInput/MaskedInput.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+interface MaskedInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'onBlur'> {
+    mask: any;
+    guide?: boolean;
+    value?: string | number;
+    pipe?: any;
+    placeholderChar?: string;
+    keepCharPositions?: boolean;
+    showMask?: boolean;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export type Mask = Array<string | RegExp> | ((value: string, config?: any) => Array<string | RegExp> | false);
+export interface ConformToMaskConfig {
+    guide?: boolean;
+    previousConformedValue?: string;
+    placeholderChar?: string;
+    placeholder?: string;
+    currentCaretPosition?: number;
+    keepCharPositions?: boolean;
+}
+interface ConformToMaskResult {
+    conformedValue: string;
+    meta: {
+        someCharsRejected: boolean;
+    };
+}
+export declare const MaskedInput: React.ForwardRefExoticComponent<MaskedInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare function conformToMask(rawValue: string | undefined, mask: Mask, config?: ConformToMaskConfig): ConformToMaskResult;
+export declare function createNumberMask({ prefix, suffix, includeThousandsSeparator, thousandsSeparatorSymbol, allowDecimal, decimalSymbol, decimalLimit, requireDecimal, allowNegative, allowLeadingZeroes, integerLimit, }?: {
+    prefix?: string | undefined;
+    suffix?: string | undefined;
+    includeThousandsSeparator?: boolean | undefined;
+    thousandsSeparatorSymbol?: string | undefined;
+    allowDecimal?: boolean | undefined;
+    decimalSymbol?: string | undefined;
+    decimalLimit?: number | undefined;
+    requireDecimal?: boolean | undefined;
+    allowNegative?: boolean | undefined;
+    allowLeadingZeroes?: boolean | undefined;
+    integerLimit?: null | undefined;
+}): {
+    (rawValue?: string): any;
+    instanceOf: string;
+};
+export {};

package/dist/lib/forms/Numeric/NumberInput.d.ts

@@ -0,0 +1,16 @@
+import { StrictOmit } from './../../types';
+import { InputPropsType, InputStylingPropsType } from '../Input';
+type NumberInputProps = StrictOmit<InputPropsType<number>, 'type' | 'spellCheck'> & InputStylingPropsType & {
+    /** prefix voor de waarde (in de input zelf) */
+    prefix?: string;
+    /** suffix voor de waarde (in de input zelf) */
+    suffix?: string;
+};
+/**
+ * NumberInput: input voor een getal
+ * @param value De waarde van de input
+ * @example <NumberInput value={1} step={3}/>
+ */
+declare function NumberInput({ value, prefix, suffix, icon, name, id: idProp, label, direction: directionProp, size: sizeProp, alignment: alignmentProp, required, disabled, readonly, loading, labelHidden, showRequiredOnLabel, iconRight, className: extraClasses, infoData, helpTag, errorMessage, infoMessage, min: minProp, max: maxProp, color, onValueChanged, onBlur, onFocus, ...props }: NumberInputProps): import("react/jsx-runtime").JSX.Element;
+export { NumberInput };
+export type { NumberInputProps };

package/dist/lib/forms/Numeric/RangeInput.d.ts

@@ -0,0 +1,21 @@
+import { StrictOmit } from './../../types';
+import { InputPropsType, InputStylingPropsType } from '../Input';
+type RangeInputProps = StrictOmit<InputPropsType<number>, 'autofocus' | 'autoComplete' | 'type' | 'spellCheck' | 'placeholder' | 'iconRight'> & StrictOmit<InputStylingPropsType, 'alignment' | 'icon'> & {
+    /** value-unit om __voor__ de geselecteerde waarde te zetten. (default = `''`) */
+    prefix?: string;
+    /** value-unit om __achter__ de geselecteerde waarde te zetten. (default = `''`) */
+    suffix?: string;
+};
+/**
+ * RangeInput: input voor een getal. De range-input heeft geen placeholder, icon, autoComplete, spellCheck en autofocus. Ook size en alignment zijn niet van toepassing. Alleen op de uitlijning van het label
+ * @param value De waarde van de input
+ * @param prefix De unit (default = ''). Staat **voor** de geselecteerde waarde
+ * @param suffix De unit (default = ''). Staat **achter** de geselecteerde waarde
+ * @param min De minimale waarde van de input (default = 0)
+ * @param max De maximale waarde van de input (default = 100)
+ * @param step De stapgrootte van de input (default = 1)
+ * @example <RangeInput value={50} min={0} max={100} />
+ */
+declare function RangeInput({ value, min, max, step, prefix, suffix, helpTag, errorMessage, infoMessage, label, disabled, title, name, size: sizeProp, required, showRequiredOnLabel, id, readonly, form, inputRef, color, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, direction: directionProp, labelHidden, infoData, }: RangeInputProps): import("react/jsx-runtime").JSX.Element;
+export { RangeInput };
+export type { RangeInputProps };

package/dist/lib/forms/Others/ColorInput.d.ts

@@ -0,0 +1,56 @@
+import { StrictOmit, HexColor, RGBColor, HSLColor } from './../../types';
+import { InputPropsType, InputStylingPropsType } from '../Input';
+type ColorInputProps = StrictOmit<InputPropsType<string>, 'type' | 'value' | 'onValueChanged' | 'step' | 'min' | 'max' | 'autoComplete' | 'spellCheck' | 'keyboardType'> & InputStylingPropsType & {
+    /** Gebruik de color-input met een hex-color, bijvooerbeeld`#ff8000` of `#fff` */
+    hexValue?: HexColor;
+    /** value-changed callback met de nieuwe waarde van de input in Hex-format. Kan direct met de `setX()` van `const [x, setX] = React.useState()` worden gebruikt
+     * @example
+     * const [x, setX] = React.useState('#ff8000');
+     * return <ColorInput hexValue={x} onHexValueChange={setX} {...props} />
+     */
+    onHexValueChanged?: (v: HexColor) => void | Promise<void>;
+    /** Gebruik de color-input met een RGB-color, van `[0, 0, 0]` t/m `[255, 255, 255]` */
+    rgbValue?: RGBColor;
+    /** value-changed callback met de nieuwe waarde van de input in RGB-format. Kan direct met de `setX()` van `const [x, setX] = React.useState()` worden gebruikt
+     * @example
+     * const [x, setX] = React.useState([255, 128, 0]);
+     * return <ColorInput rgbValue={x} onRGBValueChange={setX} {...props} />
+     */
+    onRGBValueChanged?: (v: RGBColor) => void | Promise<void>;
+    /** Gebruik de color-input met een HSL-color, van `[0, 0, 0]` t/m `[360, 100, 100]` */
+    hslValue?: HSLColor;
+    /** value-changed callback met de nieuwe waarde van de input in HSL-format. Kan direct met de `setX()` van `const [x, setX] = React.useState()` worden gebruikt
+     * @example
+     * const [x, setX] = React.useState([60, 100, 50]);
+     * return <ColorInput hslValue={x} onHSLValueChange={setX} {...props} />
+     */
+    onHSLValueChanged?: (v: HSLColor) => void | Promise<void>;
+};
+/**
+ * Een color-input component dat een hex-color, een rgb-color of een hsl-color kan gebruiken.
+ * @description __LET OP:__ _Er zit een volgorde-afhankelijkheid in deze component: HEX gaat voor RGB en RGB gaat voor HSL._
+ * @param value deze bestaat niet. er zijn 3 verschillende manieren om de value te zetten
+ * - `hexValue` Gebruik de color-input met een hex-color, bijvooerbeeld`#ff8000` of `#fff`
+ * - `rgbValue` Gebruik de color-input met een RGB-color, van `[0, 0, 0]` t/m `[255, 255, 255]`
+ * - `hslValue` Gebruik de color-input met een HSL-color, van `[0, 0, 0]` t/m `[360, 100, 100]`
+ *
+ * @param onValueChanged deze bestaat niet. er zijn 3 verschillende manieren om de value te krijgen.
+ * - `onHexValueChanged` value-changed callback met de nieuwe waarde van de input in Hex-format.
+ * - `onRGBValueChanged` value-changed callback met de nieuwe waarde van de input in RGB-format.
+ * - `onHSLValueChanged` value-changed callback met de nieuwe waarde van de input in HSL-format.
+ * Daardoor zou je de colors ook naar elkaar kunnen omzetten. De functies daarvoor worden **ook** geexporteerd.
+ *@example
+ * // Gebruik de color-input met een hex-color, bijvooerbeeld`#ff8000` of `#fff`
+ *  const [x, setX] = React.useState<HexColor>('#ff8000');
+ * <ColorInput hexValue={x} onHexValueChange={setX} {...props} />
+ * @example // Gebruik de color-input met een RGB-color, van `[0, 0, 0]` t/m `[255, 255, 255]`
+ * const [x, setX] = React.useState<RGBColor>([255, 128, 0]);
+ * <ColorInput rgbValue={x} onRGBValueChange={setX} {...props} />
+ * @example // Gebruik de color-input met een HSL-color, van `[0, 0, 0]` t/m `[360, 100, 100]`
+ * const [x, setX] = React.useState<HSLColor>([60, 100, 50]);
+ * <ColorInput hslValue={x} onHSLValueChange={setX} {...props} />
+ *
+ */
+declare function ColorInput({ hexValue, rgbValue, hslValue, icon, onHexValueChanged, onRGBValueChanged, onHSLValueChanged, ...props }: ColorInputProps): import("react/jsx-runtime").JSX.Element;
+export { ColorInput };
+export type { ColorInputProps };

package/dist/lib/forms/Others/HiddenInput.d.ts

@@ -0,0 +1,29 @@
+type HiddenInputProps = {
+    /** Start value voor deze input (optioneel) */
+    value?: string;
+    /** Name input: gebruikt voor een <label> als er geen label gedefinieerd is & de name-attribuut <input> */
+    name: string;
+    /** ID voor de input: gebruikt voor een <label for="*id*}"> */
+    id: string;
+    /** Moet dit verborgen field worden ingevoerd */
+    required?: boolean;
+    /** (optional) Tooltip voor een hidden input ??? vooral voor test-doeleinden
+     * @deprecated use `title`
+     */
+    tooltip?: string;
+    /** (optional) Tooltip voor een hidden input ??? vooral voor test-doeleinden */
+    title?: string;
+};
+/**
+ * Maak een input die verborgen is maar wel een waarde moet hebben.
+ * @param props
+ * @returns een hidden input
+ * @param name de naam voor de input (REQUIRED)
+ * @param id de id voor de input
+ * @param value de waarde
+ * @param required moet dit verborgen field worden ingevoerd
+ * @example <HiddenInput value={value} {...props} />
+ */
+declare function HiddenInput({ value, name, id, required, title, tooltip }: HiddenInputProps): import("react/jsx-runtime").JSX.Element;
+export { HiddenInput };
+export type { HiddenInputProps };

package/dist/lib/forms/Others/TelephoneInput.d.ts

@@ -0,0 +1,14 @@
+import { StrictOmit } from './../../types';
+import { InputPropsType, InputStylingPropsType } from '../Input';
+type TelephoneInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step' | 'pattern'> & InputStylingPropsType & {
+    pattern?: 'mobiel' | 'vast' | string;
+};
+/**
+ * Een input voor een telefoonnummer. Deze input heeft een default `pattern` voor validatie op form-verzending. Deze kan worden overschreven. Ook wordt de autocomplete op `email` gezet.
+ * @example <TelephoneInput name="phonenr" value={phone} onValueChanged={setPhone} pattern='mobiel' />
+ * @param pattern het pattern voor validatie, (default = '')
+ * @param autoComplete de autocomplete type (password managers) (default = `tel`)
+ */
+declare function TelephoneInput({ value, icon, pattern, autoComplete, onValueChanged, ...props }: TelephoneInputProps): import("react/jsx-runtime").JSX.Element;
+export { TelephoneInput };
+export type { TelephoneInputProps };

package/dist/lib/forms/Others/URLInput.d.ts

@@ -0,0 +1,14 @@
+import { StrictOmit } from './../../types';
+import { InputPropsType, InputStylingPropsType } from '../Input';
+type URLInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step' | 'pattern'> & InputStylingPropsType & {
+    pattern?: string;
+};
+/**
+ * Een input voor een URL. Deze input heeft een default `pattern` voor validatie op form-verzending. Deze kan worden overschreven. Ook wordt de autocomplete op `email` gezet.
+ * @example <URLInput name="url" value={url} onValueChanged={setUrl} />
+ * @param pattern het pattern voor validatie, (default = '')
+ * @param autoComplete de autocomplete type (password managers) (default = `url`)
+ */
+declare function URLInput({ value, icon, pattern, autoComplete, onValueChanged, ...props }: URLInputProps): import("react/jsx-runtime").JSX.Element;
+export { URLInput };
+export type { URLInputProps };

package/dist/lib/forms/Periodes/MonthInput.d.ts

@@ -0,0 +1,43 @@
+import { StrictOmit } from './../../types';
+import { InputPropsType, InputStylingPropsType } from '../Input';
+/** WeekInput: input voor een weeknummer (format: yyyy-MM)
+ * -1e getal: jaartal
+ * -2e getal: maandnummer (1-12), **met** voorloopnullen. *LET OP: NIET JavaScript Date 0-11!*
+ * @example
+ * `'2021-01'`  // correct
+ * `'2021-1'`   // incorrect ZONDER ERROR
+ * `'2021-001'` // incorrect ZONDER ERROR
+ * `'2021-M01'` // incorrect met error
+ */
+type MonthInputString = '' | `${number}-${number}`;
+type MonthInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step' | 'value' | 'onValueChanged' | 'min' | 'max'> & InputStylingPropsType & {
+    /** waarde van de month-input zetten met een string van format `yyyy-MM`.
+     *
+     * *LET OP: Niet JavaScript Date 0-11, maar gewoon 1-12*
+     * @example '2021-01'
+     */
+    value?: MonthInputString;
+    /** minimaal toegestane waarde als MonthInputValue. MOET lager zijn dan `max`-prop */
+    min?: MonthInputString;
+    /** maximaal toegestane waarde als MonthInputValue. MOET hoger zijn dan `min`-prop */
+    max?: MonthInputString;
+    /** callback met het resultaat als string  */
+    onValueChanged?(newVal: MonthInputString): void;
+};
+/**
+ * MonthInput: input voor een maand in een jaar
+ *@param value De value bestaat uit 2 delen, gescheiden met een `-`-karakter
+ * - 1e getal: jaartal
+ * - 2e getal: maandnummer (01-12), **met** voorloopnullen. *LET OP: NIET JavaScript Date 0-11!*
+ * @example
+ * `'2021-01'`  // correct
+ * `'2021-1'`   // correct
+ * `'2021-001'` // incorrect
+ * `'2021-M01'` // incorrect
+ * @param min minimale waarde als MonthInputValue. MOET lager zijn dan `max`-prop
+ * @param max maximale waarde als MonthInputValue. MOET hoger zijn dan `min`-prop
+ * @example <MonthInput value="2021-06" min="2021-01" max="2021-12" />
+ */
+declare function MonthInput({ value, min, max, icon, onValueChanged, ...props }: MonthInputProps): import("react/jsx-runtime").JSX.Element;
+export { MonthInput };
+export type { MonthInputProps, MonthInputString };

package/dist/lib/forms/Periodes/WeekInput.d.ts

@@ -0,0 +1,43 @@
+import { StrictOmit } from './../../types';
+import { InputPropsType, InputStylingPropsType } from '../Input';
+/** WeekInput: input voor een weeknummer (format: yyyy-Www)
+ * -1e getal: jaartal
+ * -2e getal: weeknummer, **met** voorloopnullen, voorafgaan door een *'W'*
+ * @example
+ * `'2021-W01'`  // correct
+ * `'2021-W1'`   // incorrect ZONDER ERROR
+ * `'2021-W001'` // incorrect ZONDER ERROR
+ * `'2021-01'`   // incorrect met error
+ * `'202101'`    // incorrect met error
+ */
+type WeekInputString = '' | `${number}-W${number}`;
+type WeekInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step' | 'value' | 'onValueChanged' | 'min' | 'max'> & InputStylingPropsType & {
+    /** waarde van de weekinput zetten met een string van format `yyyy-Www`
+     * @example '2021-W01'
+     */
+    value?: WeekInputString;
+    /** minimaal toegestane waarde als WeekInputValue. MOET lager zijn dan `max`-prop */
+    min?: WeekInputString;
+    /** maximaal toegestane waarde als WeekInputValue. MOET hoger zijn dan `min`-prop */
+    max?: WeekInputString;
+    /** callback met het resultaat als string  */
+    onValueChanged?(newVal: WeekInputString): void;
+};
+/**
+ * WeekInput: input voor een weeknummer in een jaar
+ * @param value De value bestaat uit 2 delen, gescheiden met een `-W`-string
+ * -1e getal: jaartal
+ * -2e getal: weeknummer, **met** voorloopnullen, voorafgaan door een *'W'*
+ * @example
+ * '2021-W01' // correct
+ * '2021-W1'  // correct, geen voorloopnullen
+ * '2021-W001' // incorrect te veel voorloopnullen
+ * '2021-01'  // incorrect, weeknummer heeft geen W-karakter
+ * '202101' // incorrect, geen `-W`-string
+ * @param min minimale waarde als WeekInputValue. MOET lager zijn dan `max`-prop
+ * @param max maximale waarde als WeekInputValue. MOET hoger zijn dan `min`-prop
+ * @example <WeekInput value="2021-W01" min="2021-W01" max="2021-W53" />
+ */
+declare function WeekInput({ value, min, max, icon, onValueChanged, ...props }: WeekInputProps): import("react/jsx-runtime").JSX.Element;
+export { WeekInput };
+export type { WeekInputProps, WeekInputString };