/* eslint-disable */ /* tslint:disable */ /** * This is an autogenerated file created by the Stencil compiler. * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime"; import { ButtonEmphasis, ButtonSize, ButtonType, DeprecatedSemanticColors, FeedbackColors, GlobalFilterPosition, IconButtonShape, LabelPlacement, LoaderColors, NotificationEmphasis, NotificationPosition, SemanticSizes, StatusIndicatorEmphasis, TextInputAutocomplete, ToggleButtonEmphasis, ToggleButtonSize } from "./utils/constants"; import { IconName } from "./components/nv-icon/nv-icons"; import { Column } from "./interfaces/Column"; import { DateOnly, TimeOnly } from "./interfaces/dates"; import { Element } from "./stencil-public-runtime"; import { FilterMode } from "./utils/search-engine"; import { Placement, Strategy } from "@floating-ui/dom"; import { ToggleAriaRole } from "./utils/accessibility.utils"; import { TagColor } from "./components/nv-tag/nv-tag"; export { ButtonEmphasis, ButtonSize, ButtonType, DeprecatedSemanticColors, FeedbackColors, GlobalFilterPosition, IconButtonShape, LabelPlacement, LoaderColors, NotificationEmphasis, NotificationPosition, SemanticSizes, StatusIndicatorEmphasis, TextInputAutocomplete, ToggleButtonEmphasis, ToggleButtonSize } from "./utils/constants"; export { IconName } from "./components/nv-icon/nv-icons"; export { Column } from "./interfaces/Column"; export { DateOnly, TimeOnly } from "./interfaces/dates"; export { Element } from "./stencil-public-runtime"; export { FilterMode } from "./utils/search-engine"; export { Placement, Strategy } from "@floating-ui/dom"; export { ToggleAriaRole } from "./utils/accessibility.utils"; export { TagColor } from "./components/nv-tag/nv-tag"; export namespace Components { interface NvAccordion { /** * Closes an item by its index (Public API) * @param index Index of the item to close */ "close": (index: number) => Promise; /** * Data to display as a list of items (title, subtitle, content). * @default [] */ "data": { /** Unique identifier of the item */ id: string; /** Item title */ title: string; /** Optional subtitle */ subtitle?: string; /** Main content */ content: string; /** Optional footer */ footer?: string; /** Disabled state */ disabled?: boolean; }[]; /** * Expansion mode: 'accordion' (single open) or 'multi' (multiple open) * @default 'accordion' */ "mode": 'accordion' | 'multi'; /** * Opens an item by its index (Public API) * @param index Index of the item to open */ "open": (index: number) => Promise; /** * Index of open items (external control possible) * @default [] */ "openIndexes"?: number[]; } /** * Accordion item element for nv-accordion. */ interface NvAccordionItem { /** * Disables the item * @default false */ "disabled": boolean; /** * Item title (displayed if header slot is absent) */ "itemTitle"?: string; /** * Maximum content height (in px, optional). If not defined, auto height. */ "maxContentHeight"?: number; /** * Parent expansion mode (accordion or multi) * @default 'accordion' */ "mode"?: 'accordion' | 'multi'; /** * Open or closed * @default false */ "open": boolean; /** * Item subtitle (displayed if header slot is absent) */ "subtitle"?: string; /** * Toggle open/close (Public API) */ "toggle": () => Promise; } interface NvAlert { /** * Defines color of the alert. * @deprecated use feedback instead. */ "color": `${DeprecatedSemanticColors}`; /** * Allows the alert to be dismissed via a close button (x). The alert is not dismissible unless explicitly enabled. * @default false */ "dismissible": boolean; /** * Specifies the alert type which determines the color and default icon. * @default 'information' */ "feedback": `${FeedbackColors}`; /** * When true, the alert will not animate when it is hidden or shown. * @default false */ "hasNoAnimations": boolean; /** * Short and concise text for the alert title. */ "heading": string; /** * Controls the visibility of the alert. Will animate with fade and collapse. * @default false */ "hidden": boolean; /** * Icon associated with the alert, defaults vary based on the feedback type. * @icon */ "icon": `${IconName}`; /** * Main content of the alert. For more complex content, use the default slot instead. */ "message": string; /** * When true, the alert does not automatically close upon dismissing. Useful for externally controlled component behavior. * @default false */ "preventAutoClose": boolean; } interface NvAvatar { /** * If and image is provided, add an alt tag to describe it. */ "alt": string; /** * You can apply different colors on the Avatar. Use a string number between 1 and 10. * @default '1' */ "color": string; /** * Initials of the avatar. Usually use two letters When filled with the src parameter, the text will not be rendered. */ "initials": string; /** * Set size to Large to the avatar. * @deprecated use size instead. */ "large": boolean; /** * Set size to Medium to the avatar. * @deprecated use size instead. */ "medium": boolean; /** * Define the size of the avatar. You can use t-shirt sizes. * @default 'md' */ "size": `${SemanticSizes}`; /** * Set size to Small to the avatar. * @deprecated use size instead. */ "small": boolean; /** * Will insert an image into the avatar. */ "src": string; /** * Set initials to the avatar. * @deprecated use initials instead. */ "text": string; /** * Set src to the avatar. * @deprecated use src instead. */ "url": string; /** * Set size to ExtraLarge to the avatar. * @deprecated use size instead. */ "xlarge": boolean; /** * Set size to ExtraSmall to the avatar. * @deprecated use size instead. */ "xsmall": boolean; } interface NvBadge { /** * The color of the badge. deprecated Use status values or named colors instead. Use a string between 1 to 10 or one of the status values: error, information, neutral, success, warning or one of the color names: amber, orange, turquoise, crimson, lime * @default '1' */ "color"?: string; /** * Whether the badge is dismissible. * @deprecated use dismissible instead. * @default false */ "dismissal": boolean; /** * Whether the badge is dismissible. * @default false */ "dismissible": boolean; /** * Controls the visibility of the badge. Will animate with fade and collapse. * @default false */ "hidden": boolean; /** * The icon to display in the badge. * @deprecated use leadIcon or slot="leading-icon" instead. * @icon */ "icon": `${IconName}`; /** * The location of the icon in the badge. * @deprecated only leadIcon now. */ "iconLocation": 'left' | 'right'; /** * When true, the badge will only display an icon without label. The label will be visually hidden but still accessible for screen readers. * @default false */ "isIconOnly"?: boolean; /** * Main content of the badge. * @default null */ "label"?: string | null; /** * The lead icon of the badge. * @icon * @default null */ "leadIcon"?: `${IconName}` | null; /** * When true, the alert does not automatically close upon dismissing. Useful for externally controlled component behavior. * @default false */ "preventAutoClose": boolean; } interface NvBreadcrumb { /** * Use this to highlight the breadcrumb as the current page in your navigation. It also makes the page clearer to screen readers with aria-current="location". */ "current": boolean; /** * Add an optional tooltip to provide extra information about the breadcrumb. */ "tooltip": string; /** * The type of the breadcrumb. Use 'collapsed' to house multiple breadcrumbs in a dropdown. Use default for a single item. When passing multiple items as collapsed, make sure to wrap you links in list tags * @default 'default' */ "type": 'collapsed' | 'default'; } interface NvBreadcrumbs { } interface NvButton { /** * Use this prop to highlight the button when it represents the current page or active selection. This helps users understand their navigation context. * @default false */ "active": boolean; /** * Applies styling that visually indicates the button represents a dangerous action. * @default false */ "danger": boolean; /** * Use this to make the button skip-able when users navigate with the keyboard. The button remains clickable but won’t be reached via the Tab key. * @default false */ "disableTabindex": boolean; /** * Disables the button, preventing user interaction. * @default false */ "disabled": boolean; /** * Adjusts the button's emphasis to make it more or less visually prominent to users. Use this to draw attention to important actions or reduce focus on less critical ones * @default 'high' */ "emphasis": `${ButtonEmphasis}`; /** * Allows the button to stretch and fill the entire width of its container. * @default false */ "fluid": boolean; /** * Sets the form associated with the button in case the (submit) button is not a child of a form. Matches the native HTML button 'form' attribute behavior. */ "form": string; /** * Set this to true to show a spinner on the button, letting users know that their action is being processed. It helps improve user experience by indicating ongoing activities. * @default false */ "loading": boolean; /** * Determines how large or small the button appears, allowing for customization of the button's dimensions to fit different design specifications and user needs. * @default 'md' */ "size": `${ButtonSize}`; /** * Sets the button type to control its function in forms. Use 'submit' to send form data, 'reset' to clear the form, or 'button' for a standard button that doesn't interact with form submission by default. * @default 'button' */ "type": `${ButtonType}`; } interface NvButtongroup { /** * Adjusts the emphasis of all the buttons to make it more or less visually prominent to users. Use this to draw attention to important actions or reduce focus on less critical ones * @default 'medium' */ "emphasis": `${ButtonEmphasis}`; /** * Allows the button group to stretch and fill the entire width of its container. * @default false */ "fluid": boolean; /** * Determines the orientation of the button group. When enabled, the buttons are stacked vertically rather than aligned side by side. * @default 'horizontal' */ "orientation": 'vertical' | 'horizontal'; /** * Determines how large or small all the buttons appear, allowing for customization of the button's dimensions to fit different design specifications and user needs. * @default 'md' */ "size": `${ButtonSize}`; } interface NvCalendar { /** * Sets the label for the cancel button in actions. * @default 'Cancel' */ "cancelLabel": string; /** * Clears the current selection and resets the calendar to its initial state. This method can be called programmatically to reset the calendar. */ "clear": () => Promise; /** * Date format (ex: 'YYYY-MM-DD', 'DD-MM-YYYY', etc.) * @default 'YYYY-MM-DD' * @note If the date format is in UTC mode, the date will be displayed in UTC time. * @note If the date format is not in UTC mode, the date will be displayed in the local time. */ "dateFormat": string; /** * Disabled dates (ISO string array) */ "disabledDates": Array; /** * First day of the week (0 = Sunday, 1 = Monday, etc.) * @default 1 */ "firstDayOfWeek": number; /** * Locale for date formatting * @default 'en-BE' */ "locale": string; /** * Maximum date for selection (ISO string format, ex: "2025-12-31") */ "max"?: string; /** * Minimum date for selection (ISO string format, ex: "2025-01-01") */ "min"?: string; /** * Number of calendars to display * @default 1 */ "numberOfCalendars": number; /** * Sets the label for the primary (OK) button in actions. * @default 'OK' */ "primaryLabel": string; /** * Selected date range format: { start: ISO string, end: ISO string } ex: { start: "2025-03-15", end: "2025-03-20" } */ "rangeValue": { /** ISO string for start date */ start: string; /** ISO string for end date */ end: string; }; /** * Selection type (single date or date range) * @default 'single' */ "selectionType": 'single' | 'range'; /** * Custom actions to display in the footer */ "shortcuts": { /** Label of the shortcut */ label: string; /** Selected date value for single selection mode */ singleValue?: string; /** Date range values for range selection mode */ rangeValue?: HTMLNvCalendarElement['rangeValue']; }[]; /** * Footer placement * @default 'bottom' */ "shortcutsPlacement": 'bottom' | 'left' | 'right'; /** * Show action buttons * @default false */ "showActions": boolean; /** * Show week numbers */ "showWeekNumbers": boolean; /** * Selected date (ISO string format) ex: "2025-03-15" */ "singleValue": string; /** * Selected date value. For single mode: ISO date string. For range mode: comma-separated ISO date strings. Examples: - Single: "2025-03-15" - Range: "2025-03-15,2025-03-20" * @default "" */ "value": string; } /** * @deprecated since v3.0.0. Use Tailwind CSS classes instead with grid or flexbox utilities. */ interface NvCol { /** * Defines the column size based on a 12 column grid system. */ "size": number; } /** * A flexible data grid component powered by `@tanstack/table-core`. * @deprecated Please use the datatable instead */ interface NvDatagrid { /** * Whether to automatically generate columns if none are provided. If columns are explicitly set, this property is ignored. * @default false */ "autoGenerateColumns": boolean; /** * The columns to display in the data grid. * @example [ {"header":"Name","accessor":"name"}, {"header":"Age","accessor":"age"}, {"header":"Email","accessor":"email"} ] * @default [] */ "columns": Column[]; /** * The data to display in the data grid. * @example [{ "name": "Alice", "age": 25 }, { "name": "Bob", "age": 30 }] * @default [] */ "data": any[]; /** * Whether to enable global filtering for the data grid. This allows users to search across all columns for a specific value. The search is case-insensitive and supports partial matches. It use string.includes() to match the search term. * @default false */ "enableGlobalFilter": boolean; /** * Whether to enable pagination for the data grid. * @default false */ "enablePagination": boolean; /** * Whether to enable row selection for the data grid. * @default false */ "enableRowSelection": boolean; /** * Whether to enable sorting for the data grid. * @default false */ "enableSorting": boolean; /** * Fallback value to be displayed when data is not available * @default 'N/A' */ "fallbackValue": string; /** * Position the global filter input field * @default 'end' */ "globalFilterPosition": `${GlobalFilterPosition}`; /** * The message to display when there are no columns or data available. * @default 'No data or columns available to display.' */ "noColumnsNoDataMessage": string; /** * The message to display when there is no data available. * @default 'No data available' */ "noDataMessage": string; /** * The number of rows to display per page. If the number is not present in the property pageSizes it takes the first of the list. * @default 10 */ "pageSize": number; /** * The array of page sizes to display in the pagination dropdown. * @default [10, 20, 30, 40, 50] */ "pageSizes": number[]; /** * The overall state * @default null */ "state": { /** * Global filter search term */ globalFilterSearchTerm: string; /** * Pagination State */ paginationState: { /** * Page Index */ pageIndex: number; /** * Page Size */ pageSize: number; }; /** * Sorting the columns */ sortingState: { /** * Descending */ desc: boolean; /** * Column Id */ id: string; }[]; }; } interface NvDatagridcolumn { /** * Defines the accessor of the column. */ "accessor": string; /** * Defines the group header of the column. */ "group"?: string; /** * Defines the header of the column. */ "header"?: string; /** * Whether the column need to be repeated with the template. * @default false */ "repeatTemplate": boolean; } /** * This is a test component for the new DateOnly type * @deprecated [EXPERIMENTAL] * @experimental This component is still in development and subject to change in future releases. */ interface NvDatetest { /** * Array of historical date changes. */ "history": DateOnly[]; /** * The last change. */ "lastChange": DateOnly; /** * The date range value with start and end dates. */ "value": { start?: DateOnly; end?: DateOnly }; } /** * This is a test component for the new DateTimeObject type * @deprecated [EXPERIMENTAL] * @experimental This component is still in development and subject to change in future releases. */ interface NvDatetimetest { /** * Array of historical date changes. */ "history": Date[]; /** * The the last change. */ "lastChange": Date; /** * The date range value with start and end dates. */ "value": { start?: Date; end?: Date }; } interface NvDialog { /** * Controls whether the dialog should automatically focus the first focusable element when opened. When disabled, prevents unwanted tooltip triggers on dialog open. * @default false */ "autofocus": boolean; /** * If true, the dialog will be closed when the backdrop is clicked. * @default false */ "clickOutside": boolean; /** * Call this method to hide the dialog, making it disappear from view. */ "close": () => Promise; /** * If true, the dialog visibility is managed manually through methods or the open prop. * @default false */ "controlled": boolean; "footerElement": Element; /** * If true, the dialog takes full width styling. * @default false */ "full": boolean; "headerElement": Element; /** * Use this prop to toggle the visibility of the dialog. Set to true to show the dialog and false to hide it. * @default false */ "open": boolean; /** * Call this method to show the dialog, making it visible on the screen. */ "show": () => Promise; /** * If true, the dialog cannot be closed by the user. * @default false */ "undismissable": boolean; } interface NvDialogfooter { /** * Sets the label for the cancel button. * @default 'Cancel' */ "cancelLabel": string; /** * Sets the danger state for the primary button. * @default false */ "danger": boolean; /** * Disables the primary button, preventing user interaction. * @default false */ "disabled": boolean; /** * A form inside the dialog can be submitted through the dialog footer by giving the form an id and passing that id to the form attribute. */ "form": string; /** * Sets the leading icon for the primary button. * @icon * @default null */ "leadingIcon": `${IconName}` | null; /** * Sets the type of the primary button. If using a form, this will default to 'submit' if nothing passed. */ "primaryButtonType": `${ButtonType}`; /** * Sets the label for the primary button. * @default 'Primary' */ "primaryLabel": string; /** * Sets the trailing icon for the primary button. * @icon * @default null */ "trailingIcon": `${IconName}` | null; /** * Controls the visibility of the cancel button. When true, the cancel button is hidden. * @default false */ "undismissable": boolean; } interface NvDialogheader { /** * Sets the heading text for the dialog. * @default 'Dialog Title' */ "heading": string; /** * Sets the subheading text for the dialog. */ "subheading": string; } interface NvDrawer { /** * Controls whether the drawer should automatically focus the first focusable element when opened. When disabled, prevents unwanted tooltip triggers on drawer open. * @default false */ "autofocus": boolean; /** * If true, the drawer will be closed when the backdrop is clicked. * @default false */ "clickOutside": boolean; /** * Call this method to hide the drawer, making it disappear from view. */ "close": () => Promise; /** * If true, the drawer visibility is managed manually through methods or the open prop. * @default false */ "controlled": boolean; /** * Use this prop to toggle the visibility of the drawer. Set to true to show the drawer and false to hide it. * @default false */ "open": boolean; /** * Call this method to show the drawer, making it visible on the screen. */ "show": () => Promise; /** * Side from which the drawer appears. * @default 'right' */ "side": 'left' | 'right'; /** * Size of the drawer. Defaults to 'md'. - 'sm': Small drawer (~320px) - 'md': Medium drawer (~400px) - 'lg': Large drawer (~600px) - 'full': Full width drawer (100vw on mobile, ~800px on desktop) * @default 'md' */ "size": 'sm' | 'md' | 'lg' | 'full'; /** * Enables swipe gesture to open/close the drawer on touch devices. - Swipe from the edge (left for left drawer, right for right drawer) to open - Swipe towards the edge from inside the drawer to close * @default false */ "swipeToOpen": boolean; /** * If true, the drawer cannot be closed by the user. * @default false */ "undismissable": boolean; /** * Width of the drawer. If specified, this will override the size prop. Defaults to the width corresponding to the size prop (400px for 'md'). */ "width"?: string; } interface NvDrawerfooter { /** * Sets the label for the cancel button. * @default 'Cancel' */ "cancelLabel": string | null; /** * Sets the danger state for the primary button. * @default false */ "danger": boolean; /** * Disables the primary button, preventing user interaction. * @default false */ "disabled": boolean; /** * A form inside the drawer can be submitted through the drawer footer by giving the form an id and passing that id to the form attribute. * @default null */ "form"?: string | null; /** * Sets the leading icon for the primary button. * @icon * @default null */ "leadingIcon"?: `${IconName}` | null; /** * Sets the type of the primary button. If using a form, this will default to 'submit' if nothing passed. */ "primaryButtonType": `${ButtonType}`; /** * Sets the label for the primary button. * @default 'Primary' */ "primaryLabel": string | null; /** * Sets the trailing icon for the primary button. * @icon * @default null */ "trailingIcon"?: `${IconName}` | null; /** * Controls the visibility of the cancel button. When true, the cancel button is hidden. * @default false */ "undismissable": boolean; } interface NvDrawerheader { /** * Sets the heading text for the drawer. * @default 'Drawer Title' */ "heading": string | null; /** * Sets the subheading text for the drawer. * @default null */ "subheading"?: string | null; } interface NvFieldcheckbox { /** * Marks the checkbox as required for accessibility purposes without triggering native HTML validation. Use this when implementing custom validation logic. * @note When set, this uses `aria-required` instead of the native `required` attribute. This allows developers to implement custom validation while maintaining accessibility. * @note If this prop is not explicitly set, the component will check for the HTML attribute 'aria-required' directly to determine if it should be applied. * @default false */ "ariaRequiredAttr": boolean; /** * Applies focus to the input field as soon as the component is mounted. This is equivalent to setting the native autofocus attribute on an element. * @default false */ "autofocus": boolean; /** * Indicates whether the checkbox is checked or not. * @default false */ "checked": boolean; /** * A description providing additional context or information about the checkbox. */ "description"?: string; /** * Disables the checkbox, preventing user interaction. * @default false */ "disabled": boolean; /** * Signals that there is an error associated with the checkbox, which can trigger visual cues. * @validator error * @default false */ "error": boolean; /** * A description that appears when there is an error related to the checkbox. * @validator message */ "errorDescription"?: string; /** * Hides the label visually while still keeping it available for screen readers. * @default false */ "hideLabel": boolean; /** * Indicates whether the checkbox is in an indeterminate state, typically used for hierarchical checkboxes. * @default false */ "indeterminate": boolean; /** * Sets the ID for the radio button’s input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility. * @default uuidv4() */ "inputId": string; /** * The label displayed next to the checkbox. */ "label"?: string; /** * When true, the label will be placed before the checkbox. * @deprecated Use `labelPlacement = end` instead. * @default false */ "labelBefore"?: boolean; /** * Determines the position of the label relative to the checkbox, either 'start' (before) or 'end' (after). */ "labelPlacement": `${LabelPlacement}`; /** * Message define a 'hint ' message for the Field. * @deprecated Use `description` instead. */ "message"?: string; /** * The name attribute for the checkbox input, used to reference the form data after submission. */ "name"?: string; /** * Sets the checkbox to read-only, preventing user changes but still allowing focus and selection of text. * @default false */ "readonly": boolean; /** * Marks the checkbox as required, indicating that it must be checked for form submission. * @note This uses the native HTML `required` attribute, which triggers browser validation. * @default false */ "required": boolean; /** * The text for the validation message. * @deprecated Use `errorDescription` and set the error prop instead. */ "validation"?: string; /** * The value attribute of the checkbox input, representing the value sent on form submission when the checkbox is checked. When the form is submitted, the data will consist of a name=value pair. */ "value"?: string; } /** * A field date component that combines an input with a calendar popover. */ interface NvFielddate { /** * Marks the input field as required for accessibility purposes without triggering native HTML validation. Use this when implementing custom validation logic. * @note When set, this uses `aria-required` instead of the native `required` attribute. This allows developers to implement custom validation while maintaining accessibility. * @note If this prop is not explicitly set, the component will check for the HTML attribute 'aria-required' directly to determine if it should be applied. * @default false */ "ariaRequiredAttr": boolean; /** * Autofocus the input when the component is mounted. * @default false */ "autofocus": boolean; /** * Clears the current selection and resets the field to its initial state. This method can be called programmatically to reset the field. */ "clear": () => Promise; /** * Date format ex: YYYY-MM-DD, DD-MM-YYYY, etc. * @default 'YYYY-MM-DD' * @note If the date format is in UTC mode, the date will be displayed in UTC time. * @note If the date format is not in UTC mode, the date will be displayed in the local time. */ "dateFormat": string; /** * Description displayed below the input. A slot description can override this prop. */ "description": string; /** * Disables the input field. * @default false */ "disabled": boolean; /** * Disabled dates ISO string array */ "disabledDates": Array; /** * Indicates an error state. * @default false */ "error": boolean; /** * Error description. A slot error-description can override this prop. */ "errorDescription"?: string; /** * First day of the week 0 = Sunday, 1 = Monday, etc. * @default 1 */ "firstDayOfWeek": number; /** * Allows the field to stretch and fill the entire width of its container. * @default false */ "fluid": boolean; /** * Sets the ID for the input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated. * @default uuidv4() */ "inputId": string; /** * Text displayed as label. A slot label can override this prop. */ "label": string; /** * Locale for date formatting * @default 'en-BE' */ "locale": string; /** * Maximum date for selection ISO string format, ex: 2025-12-31 * @default '' */ "max"?: string; /** * Minimum date for selection ISO string format, ex: 2025-01-01 * @default '' */ "min"?: string; /** * Name attribute for the input. */ "name": string; /** * Number of calendars to display * @default 1 */ "numberOfCalendars": number; /** * Placeholder for the input field. */ "placeholder": string; /** * Sets the input field as read-only. * @default false */ "readonly": boolean; /** * Marks the input field as required. * @note This uses the native HTML `required` attribute, which triggers browser validation. * @default false */ "required": boolean; /** * Custom actions to display in the footer */ "shortcuts": HTMLNvCalendarElement['shortcuts']; /** * Footer placement * @default 'bottom' */ "shortcutsPlacement": 'bottom' | 'left' | 'right'; /** * Show action buttons * @default false */ "showActions": boolean; /** * Show week numbers * @default true */ "showWeekNumbers": boolean; /** * Indicates a success state. * @default false */ "success": boolean; /** * The initial value of the input (date in string format). * @bind value * @default '' */ "value": string; } interface NvFielddaterange { /** * Marks both input fields as required for accessibility purposes without triggering native HTML validation. Use this when implementing custom validation logic. * @note When set, this uses `aria-required` instead of the native `required` attribute. This allows developers to implement custom validation while maintaining accessibility. * @note If this prop is not explicitly set, the component will check for the HTML attribute 'aria-required' directly to determine if it should be applied. * @default false */ "ariaRequiredAttr": boolean; /** * Autofocus the start input when the component is mounted. * @default false */ "autofocus": boolean; /** * Clears the current selection and resets the date range field to its initial state. This method can be called programmatically to reset the field. */ "clear": () => Promise; /** * Date format ex: YYYY-MM-DD, DD-MM-YYYY, etc. * @default 'YYYY-MM-DD' */ "dateFormat": string; /** * Description displayed below the input. A slot description can override this prop. */ "description": string; /** * Disables both input fields. * @default false */ "disabled": boolean; /** * Disabled dates ISO string array */ "disabledDates": Array; /** * Sets the ID for the end input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated. * @default uuidv4() */ "endInputId": string; /** * Name attribute for the end input. */ "endName": string; /** * Placeholder for the end input field. */ "endPlaceholder": string; /** * Indicates an error state. * @default false */ "error": boolean; /** * Error description. A slot error-description can override this prop. */ "errorDescription"?: string; /** * First day of the week 0 = Sunday, 1 = Monday, etc. * @default 1 */ "firstDayOfWeek": number; /** * Allows the field to stretch and fill the entire width of its container. * @default false */ "fluid": boolean; /** * Text displayed as label. A slot label can override this prop. */ "label": string; /** * Locale for date formatting * @default 'en-BE' */ "locale": string; /** * Maximum date for selection ISO string format, ex: 2025-12-31 * @default '' */ "max"?: string; /** * Minimum date for selection ISO string format, ex: 2025-01-01 * @default '' */ "min"?: string; /** * Number of calendars to display * @default 2 */ "numberOfCalendars": number; /** * Sets both input fields as read-only. * @default false */ "readonly": boolean; /** * Marks both input fields as required. * @note This uses the native HTML `required` attribute, which triggers browser validation. * @default false */ "required": boolean; /** * Custom actions to display in the footer */ "shortcuts": HTMLNvCalendarElement['shortcuts']; /** * Footer placement * @default 'bottom' */ "shortcutsPlacement": 'bottom' | 'left' | 'right'; /** * Show action buttons * @default false */ "showActions": boolean; /** * Show week numbers */ "showWeekNumbers": boolean; /** * Sets the ID for the start input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated. * @default uuidv4() */ "startInputId": string; /** * Name attribute for the start input. */ "startName": string; /** * Placeholder for the start input field. */ "startPlaceholder": string; /** * Indicates a success state. * @default false */ "success": boolean; /** * The initial value of the date range (in string format). * @default '' */ "value": string; } interface NvFielddropdown { /** * Marks the input field as required for accessibility purposes without triggering native HTML validation. Use this when implementing custom validation logic. * @note When set, this uses `aria-required` instead of the native `required` attribute. This allows developers to implement custom validation while maintaining accessibility. * @note If this prop is not explicitly set, the component will check for the HTML attribute 'aria-required' directly to determine if it should be applied. * @default false */ "ariaRequiredAttr": boolean; /** * The autocomplete prop helps users fill out the input field faster by suggesting entries they've used before, like their email or address. You can turn it on to make forms more convenient or off to ensure users always type in fresh data. * @default 'off' */ "autocomplete": `${TextInputAutocomplete}`; /** * Applies focus to the input field as soon as the component is mounted. This is equivalent to setting the native autofocus attribute on an element. * @default false */ "autofocus": boolean; /** * Clears the current selection. Resets the value to an empty string, removes the selected state from items, clears the filter text (when filterable) and emits `valueChanged` (and `filterTextChanged` when the filter was reset). Emits `cleared` when anything was actually reset. */ "clear": () => Promise; /** * Clears the filter text */ "clearFilter": () => Promise; /** * Shows the inline clear (×) button when a value is selected (or when filterable and the user has typed). The programmatic `clear()` method works regardless of this prop — leave it off when you want to manage clearing the selection from outside the component. * @default false */ "clearable": boolean; /** * Determines if the component’s filtering behavior is managed externally. When set to true and filterable is enabled, the component won’t automatically filter items. Instead, you must implement your own filtering logic (e.g., server-side search or custom matching) using the filterTextChanged event. * @default false */ "controlledFilter": boolean; /** * Delay in milliseconds before the search is triggered when typing in the filter input. * @default 300 */ "debounceDelay": number; /** * Add helpful hints or extra information under the text input field. This is where you can clarify what users should enter or provide additional instructions, making the form easier to fill out correctly. */ "description": string; /** * The disabled prop lets you turn off the input field so that users can't type in it. When disabled, the field is grayed out and won't respond to clicks or touches. * @default false */ "disabled": boolean; /** * The text to display when no items match the filter. * @default 'No results found' */ "emptyResult": string; /** * Alters the input field's appearance to indicate an error, helping users identify fields that need correction. * @validator error * @default false */ "error": boolean; /** * A description that appears when there is an error related to the dropdown field. * @validator message */ "errorDescription": string; /** * Filter mode for dropdown search: - 'strict': Simple substring matching (normalized includes) - 'smart': Token-based matching (all query tokens must exist, order ignored) - 'fuzzy': Typo-tolerant matching using Fuse.js (runs in Web Worker) * @default 'strict' */ "filterMode": FilterMode; /** * Enables or disables the filtering feature for the dropdown items. * @default false */ "filterable": boolean; /** * Allows the field to stretch and fill the entire width of its container. * @default false */ "fluid": boolean; /** * Threshold for fuzzy matching (0-1). Lower values are stricter. Only applies when filterMode is 'fuzzy'. * @default 0.3 * @see {@link https://fusejs.io/api/options.html#threshold} Fuse.js threshold documentation */ "fuzzyThreshold": number; /** * Sets the ID for the input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility. * @default uuidv4() */ "inputId": string; /** * Lets you define the text that explains what users should enter in the text input field. It's a crucial element for making forms clear and user-friendly. */ "label": string; /** * Locale for automatic translation of truncated results text. If not provided, automatically detects browser locale. * @example 'en', 'fr', 'de', 'es' */ "locale"?: string; /** * Defines the maximum height of the multiselect list when open. * @default '' */ "maxHeight": string; /** * Maximum number of results to display. Protects UI performance on large datasets. Values are clamped between 10 and 500 (hard cap). * @default 25 */ "maxResults": number; /** * Defines the name attribute of the input field, which is crucial for form submission. This value is used as the key in the key-value pair sent to the server, representing the input's data in form submissions. It should be unique within the form to avoid conflicts. */ "name": string; /** * When an item is selected by the user, the dropdown will continue to stay open. * @default false */ "openOnSelect": boolean; /** * List of options used to automatically generate dropdown items. This provides an alternative to using the slot manually. * @example options=[{ "label": "Option 1", "value": "option1", "selected": true, }, { "label": "Option 2", "value": "option2", }] */ "options"?: { /** Label to display for the option */ label: string; /** Value associated with the option */ value: string; /** Whether this option is disabled */ disabled?: boolean; }[]; /** * Display temporary text inside the input field to give users a hint about what to type. It's a great way to provide examples or suggestions directly in the field before they start typing. The placeholder is displayed only when the filterable option is enabled. */ "placeholder": string; /** * Display the input field's content without allowing users to change it. Users can still click on it, select, and copy the text, but they won't be able to type or delete anything. * @default false */ "readonly": boolean; /** * Marks the input field as required, ensuring that the user must fill it out before submitting the form. * @note This uses the native HTML `required` attribute, which triggers browser validation. * @default false */ "required": boolean; /** * Minimum number of characters required before filtering starts. Useful for preventing overwhelming results on very large datasets. * @default 0 */ "startFilterAt": number; /** * Toggles the dropdown popover open state * @param open - The open state to set, if null, toggles the state */ "toggleDropdown": (open?: boolean) => Promise; /** * The text to display when results are truncated due to maxResults limit. Supports placeholders: {shown} and {total} will be replaced with actual values. If not provided, automatically uses a localized translation based on the locale prop or browser language. * @example '{shown} results shown out of {total} — refine your search' */ "truncatedResultsText"?: string; /** * Specifies the value of the input field, which determines the text displayed within the field. This prop is typically used in controlled components where the input's value is managed by the component's state. */ "value": string; /** * Number of items above which filtering is offloaded to a Web Worker. This keeps the main thread responsive for large datasets. * @default 2000 */ "workerThreshold": number; } interface NvFielddropdownitem { /** * If detached, the item will not be filtered out or change the dropdown's selected item. Useful for actionable items, such as Add New item, etc. * @default false */ "detached": boolean; /** * Disables the item, preventing any user interaction. * @default false */ "disabled": boolean; /** * Specifies the text label for the dropdown item. When no default slot is provided, this label is rendered as the item's visible text. If the default slot is supplied, the label isn’t directly displayed but is used as the selected text (on the dropdown trigger). If no label is explicitly set, the component will automatically derive the label from the text content of the default slot. */ "label"?: string; /** * Indicates if the item is selected. * @default false */ "selected": boolean; /** * Value associated with the item. This is recommended and required for proper form management. */ "value"?: string; } interface NvFielddropdownitemcheck { /** * Indicates whether the checkbox is selected. * @default false */ "checked": boolean; /** * A description providing additional context or information about the checkbox. */ "description"?: string; /** * Disables the item, preventing any user interaction. * @default false */ "disabled": boolean; /** * The group this item belongs to, if applicable. */ "group"?: string; /** * The label displayed alongside the checkbox. */ "label"?: string; /** * The value associated with this item. */ "value"?: string; } interface NvFieldmultiselect { /** * Marks the input field as required for accessibility purposes without triggering native HTML validation. Use this when implementing custom validation logic. * @note When set, this uses `aria-required` instead of the native `required` attribute. This allows developers to implement custom validation while maintaining accessibility. * @note If this prop is not explicitly set, the component will check for the HTML attribute 'aria-required' directly to determine if it should be applied. * @default false */ "ariaRequiredAttr": boolean; /** * The autocomplete prop helps users fill out the input field faster by suggesting entries they've used before, like their email or address. You can turn it on to make forms more convenient or off to ensure users always type in fresh data. * @default 'off' */ "autocomplete": `${TextInputAutocomplete}`; /** * Applies focus to the input field as soon as the component is mounted. This is equivalent to setting the native autofocus attribute on an element. * @default false */ "autofocus": boolean; /** * Text for the badge showing the number of selected items. * @default '' */ "badgeLabel": string; /** * Delay in milliseconds before the search is triggered when typing in the filter input. * @default 300 */ "debounceDelay": number; /** * Add helpful hints or extra information under the text input field. */ "description": string; /** * Deselect all visible and enabled items. Works for both options and slots mode. * @returns */ "deselectAll": () => Promise; /** * Text for the "Deselect All" button. * @default 'Select/deselect all' */ "deselectAllLabel": string; /** * Disables the input field. * @default false */ "disabled": boolean; /** * The text to display when no items match the filter. * @default 'No results found' */ "emptyResult": string; /** * Enables or disables the "Select All / Deselect All" toggle functionality. * @default false */ "enableSelectAll": boolean; /** * Alters the input field's appearance to indicate an error, helping users identify fields that need correction. * @validator error * @default false */ "error": boolean; /** * A description that appears when there is an error related to the multiselect field. * @validator message */ "errorDescription": string; /** * Filter mode for multiselect search: - 'strict': Simple substring matching (normalized includes) - 'smart': Token-based matching (all query tokens must exist, order ignored) - 'fuzzy': Typo-tolerant matching using Fuse.js (runs in Web Worker) * @default 'strict' */ "filterMode": FilterMode; /** * The text entered by the user for filtering multiselect items. * @default '' */ "filterText": string; /** * Enables or disables the filtering feature for the multiselect items. * @default false */ "filterable": boolean; /** * Allows the field to stretch and fill the entire width of its container. * @default false */ "fluid": boolean; /** * Threshold for fuzzy matching (0-1). Lower values are stricter. Only applies when filterMode is 'fuzzy'. * @default 0.3 * @see {@link https://fusejs.io/api/options.html#threshold} Fuse.js threshold documentation */ "fuzzyThreshold": number; /** * Retrieves the current filter text entered by the user. * @returns The filter text. */ "getFilterText": () => Promise; /** * Returns the list of selected values. * @returns The selected values. */ "getSelectedValues": () => Promise; /** * Sets the ID for the input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility. * @default uuidv4() */ "inputId": string; /** * Lets you define the text that explains what users should enter in the text input field. It's a crucial element for making forms clear and user-friendly. */ "label": string; /** * Locale for automatic translation of truncated results text. If not provided, automatically detects browser locale. * @example 'en', 'fr', 'de', 'es' */ "locale"?: string; /** * Defines the maximum height of the multiselect list when open. * @default '' */ "maxHeight": string; /** * Maximum number of results to display. Protects UI performance on large datasets. Values are clamped between 10 and 500 (hard cap). * @default 25 */ "maxResults": number; /** * Defines the name attribute of the input field, which is crucial for form submission. This value is used as the key in the key-value pair sent to the server, representing the input's data in form submissions. It should be unique within the form to avoid conflicts. */ "name": string; /** * State of the multiselect popover. * @default false */ "open": boolean; /** * List of options used to automatically generate dropdown items. This provides an alternative to using the slot manually. * @example options=[{ "label": "Option 1", "value": "option1", }, { "label": "Option 2", "value": "option2", }] */ "options"?: { /** Label to display for the option */ label: string; /** Value associated with the option */ value: string; /** Whether this option is a divider */ isDivider?: boolean; /** Whether this option is disabled */ disabled?: boolean; /** Additional description for the option */ description?: string; /** Whether this option is pre-checked */ checked?: boolean; }[]; /** * Display temporary text inside the input field. */ "placeholder": string; /** * Display the input field's content without allowing users to change it. * @default false */ "readonly": boolean; /** * Marks the input field as required. * @note This uses the native HTML `required` attribute, which triggers browser validation. * @default false */ "required": boolean; /** * Reset the filter and make all items visible. */ "resetFilter": () => Promise; /** * Select all visible and enabled items. Works for both options and slots mode. * @returns */ "selectAll": () => Promise; /** * Text for the "Select All" button. * @default 'Select/deselect all' */ "selectAllLabel": string; /** * Minimum number of characters required before filtering starts. Useful for preventing overwhelming results on very large datasets. * @default 0 */ "startFilterAt": number; /** * Toggle selection state of all visible and enabled items. If all items are selected, deselects all. Otherwise, selects all. Works for both options and slots mode. * @returns */ "toggleSelectAll": () => Promise; /** * The text to display when results are truncated due to maxResults limit. Supports placeholders: {shown} and {total} will be replaced with actual values. If not provided, automatically uses a localized translation based on the locale prop or browser language. * @example '{shown} results shown out of {total} — refine your search' */ "truncatedResultsText"?: string; /** * Specifies the selected values of the multiselect field. This is the canonical value for the component and is used for form submission. * @default [] */ "value": string[]; /** * Number of items above which filtering is offloaded to a Web Worker. This keeps the main thread responsive for large datasets. * @default 2000 */ "workerThreshold": number; } interface NvFieldnumber { /** * Marks the input field as required for accessibility purposes without triggering native HTML validation. Use this when implementing custom validation logic. * @note When set, this uses `aria-required` instead of the native `required` attribute. This allows developers to implement custom validation while maintaining accessibility. * @note If this prop is not explicitly set, the component will check for the HTML attribute 'aria-required' directly to determine if it should be applied. * @default false */ "ariaRequiredAttr": boolean; /** * Applies focus to the input field as soon as the component is mounted. This is equivalent to setting the native autofocus attribute on an element. * @default false */ "autofocus": boolean; /** * Add helpful hints or extra information under the text input field. This is where you can clarify what users should enter or provide additional instructions, making the form easier to fill out correctly. */ "description": string; /** * The disabled prop lets you turn off the input field so that users can’t type in it. When disabled, the field is grayed out and won’t respond to# clicks or touches. * @default false */ "disabled": boolean; /** * Alters the input field's appearance to indicate an error, helping users identify fields that need correction. * @validator error * @default false */ "error": boolean; /** * Show a helpful message under the input field when there’s a problem. It explains what’s wrong and how users can fix it, making the error easier to understand and resolve. * @validator message */ "errorDescription": string; /** * Allows the field to stretch and fill the entire width of its container. * @default false */ "fluid": boolean; /** * Sets the ID for the input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility. * @default uuidv4() */ "inputId": string; /** * Lets you define the text that explains what users should enter in the text input field. It’s a crucial element for making forms clear and user-friendly. */ "label": string; /** * The maximum value that the input field can accept. Use this in combination with min to create a range of valid values. */ "max": number; /** * Message defines a 'hint ' message for the number field. * @deprecated Use `description` instead. */ "message": string; /** * The minimum value that the input field can accept. Use this in combination with max to create a range of valid values. */ "min": number; /** * Defines the name attribute of the input field, which is crucial for form submission. This value is used as the key in the key-value pair sent to the server, representing the input’s data in form submissions. It should be unique within the form to avoid conflicts */ "name": string; /** * Display temporary text inside the input field to give users a hint about what to type. It’s a great way to provide examples or suggestions directly in the field before they start typing. */ "placeholder": string; /** * Display the input field’s content without allowing users to change it. Users can still click on it, select, and copy the text, but they won’t be able to type or delete anything. * @default false */ "readonly": boolean; /** * Marks the input field as required, ensuring that the user must fill it out before submitting the form. * @note This uses the native HTML `required` attribute, which triggers browser validation. * @default false */ "required": boolean; /** * Define the increment value for the input field. It determines how much the value will increase or decrease when the user clicks the stepper buttons. * @default 1 */ "step": number; /** * Changes the input field’s appearance to indicate successful input or validation. * @default false */ "success": boolean; /** * Add the message to the validation state. * @deprecated Use `errorDescription` and set the error prop instead. */ "validation": string; /** * The value of the input field. It’s the text that users type in or the value that you set programmatically. This is the main way to interact with the input field, and it’s essential for creating forms that users can fill out. */ "value": number | null; } interface NvFieldpassword { /** * Marks the input field as required for accessibility purposes without triggering native HTML validation. Use this when implementing custom validation logic. * @note When set, this uses `aria-required` instead of the native `required` attribute. This allows developers to implement custom validation while maintaining accessibility. * @note If this prop is not explicitly set, the component will check for the HTML attribute 'aria-required' directly to determine if it should be applied. * @default false */ "ariaRequiredAttr": boolean; /** * The autocomplete prop helps users fill out the input field faster by suggesting entries they’ve used before, like their email or address. You can turn it on to make forms more convenient or off to ensure users always type in fresh data. * @default 'off' */ "autocomplete": `${TextInputAutocomplete}`; /** * Applies focus to the input field as soon as the component is mounted. This is equivalent to setting the native autofocus attribute on an element. * @default false */ "autofocus": boolean; /** * Add helpful hints or extra information under the text input field. This is where you can clarify what users should enter or provide additional instructions, making the form easier to fill out correctly. */ "description": string; /** * The disabled prop lets you turn off the input field so that users can’t type in it. When disabled, the field is grayed out and won’t respond to# clicks or touches. * @default false */ "disabled": boolean; /** * Alters the input field's appearance to indicate an error, helping users identify fields that need correction. * @validator error * @default false */ "error": boolean; /** * A description that appears when there is an error related to the password field. * @validator message */ "errorDescription": string; /** * Allows the field to stretch and fill the entire width of its container. * @default false */ "fluid": boolean; /** * Hide the button to show/hide the password. * @default false */ "hidePasswordIcon": boolean; /** * Sets the ID for the input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility. * @default uuidv4() */ "inputId": string; /** * Lets you define the text that explains what users should enter in the text input field. It’s a crucial element for making forms clear and user-friendly. */ "label": string; /** * Limits how many characters users can type into the input field. It’s helpful for making sure users don’t enter too much information, keeping their input within the allowed limit. */ "maxlength": number; /** * Ensures that users type at least a certain number of characters into the input field. It’s a way to make sure users provide enough information before moving on. */ "minlength": number; /** * Defines the type of the input. * @default 'text' */ "mode": 'text' | 'number'; /** * Defines the name attribute of the input field, which is crucial for form submission. This value is used as the key in the key-value pair sent to the server, representing the input’s data in form submissions. It should be unique within the form to avoid conflicts */ "name": string; /** * Set rules for how the input should be formatted. For example, you can require that a phone number includes only digits or that an email address has the correct format. If users don’t follow these rules, they’ll get a prompt to correct their input on form submission. the rules are applied to the input value via regexes. */ "pattern": string; /** * Display temporary text inside the input field to give users a hint about what to type. It’s a great way to provide examples or suggestions directly in the field before they start typing. */ "placeholder": string; /** * Display the input field’s content without allowing users to change it. Users can still click on it, select, and copy the text, but they won’t be able to type or delete anything. * @default false */ "readonly": boolean; /** * Marks the input field as required, ensuring that the user must fill it out before submitting the form. * @note This uses the native HTML `required` attribute, which triggers browser validation. * @default false */ "required": boolean; /** * Show/hide the password programmatically. * @default false */ "showPassword": boolean; /** * Changes the input field’s appearance to indicate successful input or validation. * @default false */ "success": boolean; /** * Specifies the value of the input field, which determines the text displayed within the field. This prop is typically used in controlled components where the input’s value is managed by the component’s state. */ "value": string; } interface NvFieldradio { /** * Applies focus to the input field as soon as the component is mounted. This is equivalent to setting the native autofocus attribute on an element. * @default false */ "autofocus": boolean; /** * Controls whether the radio button is selected. * @default false */ "checked": boolean; /** * Adds a helpful hint message below the label. This description provides extra information or context about the radio button option, assisting users in making more informed choices. */ "description": string; /** * Disables the radio button, making it un-selectable. * @default false */ "disabled": boolean; /** * Highlight the radio button with error styling. It helps users quickly identify which option needs attention, improving their form-filling experience by making issues more visible. * @validator error * @default false */ "error": boolean; /** * A description that appears when there is an error related to the radio button. * @validator message */ "errorDescription": string; /** * Sets the ID for the radio button’s input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility. * @default uuidv4() */ "inputId": string; /** * Sets the text content that is rendered next to the input element of type radio. This label is essential for accessibility and user clarity, as it describes the purpose or option of the radio button. */ "label": string; /** * Set the label placement to before the input * @deprecated use labelPlacement instead. * @default false */ "labelBefore": boolean; /** * Defines the position of the label relative to the radio button. */ "labelPlacement": `${LabelPlacement}`; /** * Adds a helpful hint message below the label * @deprecated use description instead. */ "message": string; /** * Use this to assign a group name to your radio buttons. When you have multiple radio buttons with the same name, users will be able to select only one option within that group, making your forms more organized and user-friendly. */ "name": string; /** * Defines what data will be sent when the radio button is selected. This helps you identify which option the user has chosen in your form, ensuring accurate data collection. When the form is submitted, the data will consist of a name=value pair. */ "value": string; } interface NvFieldselect { /** * Marks the select field as required for accessibility purposes without triggering native HTML validation. Use this when implementing custom validation logic. * @note When set, this uses `aria-required` instead of the native `required` attribute. This allows developers to implement custom validation while maintaining accessibility. * @note If this prop is not explicitly set, the component will check for the HTML attribute 'aria-required' directly to determine if it should be applied. * @default false */ "ariaRequiredAttr": boolean; /** * Applies focus to the input field as soon as the component is mounted. This is equivalent to setting the native autofocus attribute on a ` options and the form value. */ "clear": () => Promise; /** * Shows the inline clear (×) button when a value is selected. The programmatic `clear()` method works regardless of this prop — leave it off when you want to manage clearing from outside the component. * @default false */ "clearable": boolean; /** * Add helpful hints or extra information under the select field. This is where you can clarify what users should choose or provide additional instructions, making the form easier to fill out correctly. */ "description"?: string; /** * The disabled prop lets you turn off the select field so that users can’t choose something. When disabled, the field is grayed out and won’t respond to clicks or touches. * @default false */ "disabled": boolean; /** * When enabled, displays the value element instead of the label when readonly. By default, the label is displayed in readonly mode. Also it automatically sets the component to readonly. * @default false */ "displayValue": boolean; /** * Alters the select field's appearance to indicate an error, helping users identify fields that need correction. * @validator error * @default false */ "error": boolean; /** * Show a helpful message under the select field when there’s a problem. It explains what’s wrong and how users can fix it, making the error easier to understand and resolve. * @validator message */ "errorDescription": string; /** * Allows the field to stretch and fill the entire width of its container. * @default false */ "fluid": boolean; /** * Sets the ID for the select element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility. * @default uuidv4() */ "inputId": string; /** * Lets you define the text that explains what users should choose in the select field. It’s a crucial element for making forms clear and user-friendly. */ "label"?: string; /** * Message defines a 'hint ' message for the Select Field. * @deprecated Use `description` instead. */ "message": string; /** * When enabled, allows the select to handle multiple selections. * @default false */ "multiple": boolean; /** * Defines the name attribute of the select field, which is crucial for form submission. This value is used as the key in the key-value pair sent to the server, representing the selected data in form submissions. It should be unique within the form to avoid conflicts */ "name": string; /** * Options to display in the select. Format: [{ label: string, value: string, selected?: boolean, disabled?: boolean }] */ "options"?: Array<{ /** * The label of the option */ label: string; /** * The value of the option */ value: string; /** * Whether the option is selected */ selected?: boolean; /** * Whether the option is disabled */ disabled?: boolean; }>; /** * Display the select field’s content without allowing users to change it. Users can still click on it, select, and copy the text, but they won’t be able to change or delete anything. * @default false */ "readonly": boolean; /** * Marks the select field as required, ensuring that the user must fill it out before submitting the form. * @note This uses the native HTML `required` attribute, which triggers browser validation. * @default false */ "required": boolean; /** * Changes the select field’s appearance to indicate successful input or validation. * @default false */ "success": boolean; /** * Add the message to the validation state. * @deprecated Use `errorDescription` and set the error prop instead. */ "validation": string; /** * The value of the select field. - If `multiple` is `false`, it's a single string. - If `multiple` is `true`, it's a comma-separated string of selected values. * @default '' */ "value": string; } interface NvFieldslider { /** * Add helpful hints or extra information under the slider. This is where you can clarify what users should enter or provide additional instructions, making the form easier to fill out correctly. */ "description": string; /** * Disables user interaction with the slider and its associated input fields. * @default false */ "disabled": boolean; /** * Sets the ID for the end input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated. * @default uuidv4() */ "endInputId": string; /** * Name attribute for the end value input when using range mode. If not provided, the name attribute will be used with '-end' appended. */ "endName": string; /** * Alters the slider's appearance to indicate an error, helping users identify fields that need correction. * @validator error * @default false */ "error": boolean; /** * A description that appears when there is an error related to the slider. * @validator message */ "errorDescription": string; /** * Allows the field to stretch and fill the entire width of its container. * @default false */ "fluid": boolean; /** * Enables an optional numeric input field alongside the slider, allowing users to type a value directly instead of—or in addition to—using the slider handle. The field accepts numeric values in the format based on client-side local settings. * @default false */ "hasField": boolean; /** * Keeps the interface clean by removing visible labels, but still announces the label to screen readers so users relying on assistive tech aren't left guessing. * @default false */ "hideLabel": boolean; /** * Provides a textual description of the slider's function, helping users understand what the control adjusts. It also supports accessibility by serving as the accessible name for the component. */ "label": string; /** * Use this to automatically show a label, like "$" or "kg," after the value on the slider's tooltip or input, helping users better understand the number. */ "labelAfterValue": string; /** * Use this to automatically show a label, like "~" for approximate values, before the slider's value in the tooltip or input, giving users quick context about the number. */ "labelBeforeValue": string; /** * Defines the maximum allowed value for the slider. The thumb cannot move above this value, and manual input is also constrained accordingly. * @default 100 */ "max": number; /** * Defines the minimum allowed value for the slider. The thumb cannot move below this value, and manual input is also constrained accordingly. * @default 0 */ "min": number; /** * Name attribute for the form input element. Required for form submission. For range sliders, this will be used for the start value input and add -end to the end input name. */ "name": string; /** * Allows the slider to display two thumbs, enabling users to select a continuous range between a minimum and maximum value. Ideal for use cases like filtering by price or time. * @default false */ "range": boolean; /** * Makes the slider and input non-editable while keeping them focusable and included in form submissions. * @default false */ "readonly": boolean; /** * Controls the visibility of tick marks on the slider. When enabled, all visual ticks that indicate step points along the track are shown. If custom ticks are provided, they are always shown regardless of this setting. * @default false */ "showTicks": boolean; /** * Controls whether the slider handle should visually snap to step values during dragging. When false, the handle can be positioned at any point along the track while dragging, but the actual value will still snap to the nearest step value. When true, the handle will visually snap to the nearest step value during dragging. * @default false */ "snap": boolean; /** * When true and custom ticks are provided, the slider will snap to the nearest tick value during dragging, instead of using the step value. This is useful when you have custom ticks at specific values that don't align with regular step intervals. * @default false */ "snapTicks": boolean; /** * Sets the ID for the start input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated. * @default uuidv4() */ "startInputId": string; /** * Defines the interval between selectable values on the slider. Controls how much the value increases or decreases with each keyboard interaction, drag movement, or direct input. * @default 1 */ "step": number; /** * Changes the slider's appearance to indicate successful input or validation. * @default false */ "success": boolean; /** * Allows you to specify custom tick marks at specific values along the slider. Each tick can optionally display a label to provide additional context or guidance for users. */ "ticks": { /** The numeric value of the tick */ value: number; /** The label of the tick */ label?: string; }[]; /** * Numeric value of the slider as an array of numbers. When in single mode, the value should be a an array of one number. When in range mode, the value should be an array of two numbers. * @default [0] */ "value": number[]; } interface NvFieldtext { /** * Marks the input field as required for accessibility purposes without triggering native HTML validation. Use this when implementing custom validation logic. * @note When set, this uses `aria-required` instead of the native `required` attribute. This allows developers to implement custom validation while maintaining accessibility. * @note If this prop is not explicitly set, the component will check for the HTML attribute 'aria-required' directly to determine if it should be applied. * @default false */ "ariaRequiredAttr": boolean; /** * The autocomplete prop helps users fill out the input field faster by suggesting entries they’ve used before, like their email or address. You can turn it on to make forms more convenient or off to ensure users always type in fresh data. */ "autocomplete": `${TextInputAutocomplete}`; /** * Applies focus to the input field as soon as the component is mounted. This is equivalent to setting the native autofocus attribute on an element. * @default false */ "autofocus": boolean; /** * Add helpful hints or extra information under the text input field. This is where you can clarify what users should enter or provide additional instructions, making the form easier to fill out correctly. */ "description": string; /** * The disabled prop lets you turn off the input field so that users can’t type in it. When disabled, the field is grayed out and won’t respond to clicks or touches. * @default false */ "disabled": boolean; /** * Alters the input field’s appearance to indicate an error, helping users identify fields that need correction. * @validator error * @default false */ "error": boolean; /** * A description that appears when there is an error related to the textfield field. * @validator message */ "errorDescription"?: string; /** * Allows the field to stretch and fill the entire width of its container. * @default false */ "fluid": boolean; /** * Sets the ID for the input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility. * @default uuidv4() */ "inputId": string; /** * Lets you define the text that explains what users should enter in the text input field. It’s a crucial element for making forms clear and user-friendly. */ "label": string; /** * Limits how many characters users can type into the input field. It’s helpful for making sure users don’t enter too much information, keeping their input within the allowed limit. */ "maxlength": number; /** * Message defines a 'hint ' message for the Text Field. * @deprecated Use `description` instead. */ "message": string; /** * Ensures that users type at least a certain number of characters into the input field. It’s a way to make sure users provide enough information before moving on. */ "minlength": number; /** * When used with the email input type, this prop enables the field to accept multiple email addresses. Users can enter several addresses, separating each one with a comma, allowing the form to handle multiple recipients. * @default false */ "multiple": boolean; /** * Defines the name attribute of the input field, which is crucial for form submission. This value is used as the key in the key-value pair sent to the server, representing the input’s data in form submissions. It should be unique within the form to avoid conflicts */ "name": string; /** * Set rules for how the input should be formatted. For example, you can require that a phone number includes only digits or that an email address has the correct format. If users don’t follow these rules, they’ll get a prompt to correct their input after the form is submitted. */ "pattern": string; /** * Display temporary text inside the input field to give users a hint about what to type. It’s a great way to provide examples or suggestions directly in the field before they start typing. */ "placeholder": string; /** * Display the input field’s content without allowing users to change it. Users can still click on it, select, and copy the text, but they won’t be able to type or delete anything. * @default false */ "readonly": boolean; /** * Marks the input field as required, ensuring that the user must fill it out before submitting the form. * @note This uses the native HTML `required` attribute, which triggers browser validation. * @default false */ "required": boolean; /** * Changes the input field’s appearance to indicate successful input or validation. * @default false */ "success": boolean; /** * Type of the input. * @deprecated use type instead. */ "textInputType": 'text' | 'tel' | 'email'; /** * The type prop lets you specify what kind of information the input field should accept. Choose 'text' for general words or sentences, 'tel' for phone numbers, or 'email' for email addresses. This makes sure users get the right keyboard and validation for what they need to enter. * @default 'text' */ "type": 'text' | 'tel' | 'email'; /** * Add the message to the validation state. * @deprecated Use `errorDescription` and set the error prop instead. */ "validation": string; /** * Specifies the value of the input field, which determines the text displayed within the field. This prop is typically used in controlled components where the input’s value is managed by the component’s state. */ "value": string; } interface NvFieldtextarea { /** * Marks the textarea field as required for accessibility purposes without triggering native HTML validation. Use this when implementing custom validation logic. * @note When set, this uses `aria-required` instead of the native `required` attribute. This allows developers to implement custom validation while maintaining accessibility. * @note If this prop is not explicitly set, the component will check for the HTML attribute 'aria-required' directly to determine if it should be applied. * @default false */ "ariaRequiredAttr": boolean; /** * Applies focus to the input field as soon as the component is mounted. This is equivalent to setting the native autofocus attribute on a