@nova-design-system/nova-webcomponents 3.0.0-beta.17

package/dist/types/components/nv-fieldpassword/nv-fieldpassword.d.ts

@@ -0,0 +1,145 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { TextInputAutocomplete } from '../../utils/constants';
+/**
+ * @slot leading-input - Content to be placed before the input text, within the input container.
+ * @slot before-input - Content to be placed before the input text, outside the input container.
+ * @slot after-input - Content to be placed after the input text, outside the input container.
+ * @slot label - Content to be placed as the label, will override the label prop.
+ * @slot description - Content to be placed as the description, will override the description prop.
+ * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.
+ */
+export declare class NvFieldpassword {
+    el: HTMLNvFieldpasswordElement;
+    private inputElement;
+    /****************************************************************************/
+    /**
+     * 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.
+     */
+    readonly 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.
+     */
+    readonly label: string;
+    /**
+     * 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;
+    /**
+     * 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.
+     */
+    readonly placeholder: string;
+    /**
+     * 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
+     */
+    readonly name: 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;
+    /**
+     * 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.
+     */
+    readonly disabled: boolean;
+    /**
+     * 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.
+     */
+    readonly readonly: boolean;
+    /**
+     * Marks the input field as required, ensuring that the user must fill it out
+     * before submitting the form.
+     */
+    readonly required: boolean;
+    /**
+     * Alters the input field’s appearance to indicate an error, helping users
+     * identify fields that need correction.
+     * @validator error
+     */
+    readonly error: boolean;
+    /**
+     * A description that appears when there is an error related to the password
+     * field.
+     * @validator message
+     */
+    readonly errorDescription: string;
+    /**
+     * Changes the input field’s appearance to indicate successful input or
+     * validation.
+     */
+    readonly success: boolean;
+    /**
+     * 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.
+     */
+    readonly 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.
+     */
+    readonly minlength: number;
+    /**
+     * 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.
+     * the rules are applied to the input value via regexes.
+     */
+    readonly pattern: string;
+    /**
+     * Defines the type of the input.
+     * @default 'text'
+     */
+    readonly mode: 'text' | 'number';
+    /**
+     * 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.
+     */
+    readonly autocomplete: `${TextInputAutocomplete}`;
+    /**
+     * Hide the button to show/hide the password.
+     */
+    readonly hidePasswordIcon: boolean;
+    /**
+     * Show/hide the password programmatically.
+     */
+    readonly showPassword: boolean;
+    /**
+     * Defines whether the password is visible or not.
+     */
+    showPasswordState: boolean;
+    /****************************************************************************/
+    /**
+     * Emitted when the input value changes.
+     * @bind value
+     */
+    valueChanged: EventEmitter<string>;
+    /****************************************************************************/
+    private handleInputContainerClick;
+    handleShowPasswordChange(newValue: boolean): void;
+    private togglePasswordVisibility;
+    private handleKeyDown;
+    private handleInput;
+    /****************************************************************************/
+    render(): any;
+}

package/dist/types/components/nv-fieldpassword/nv-fieldpassword.docs.d.ts

@@ -0,0 +1,4 @@
+import type { NovaDocs } from '../../nova-docs';
+import { Components } from '../../components';
+declare const NvFieldpasswordDocs: NovaDocs<Components.NvFieldpassword>;
+export default NvFieldpasswordDocs;

package/dist/types/components/nv-fieldradio/nv-fieldradio.d.ts

@@ -0,0 +1,101 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type FieldLabelPlacement } from '../../utils/constants';
+/**
+ * @slot label - Content to be placed as the label, will override the label prop.
+ * @slot description - Content to be placed as the description, will override the description prop.
+ * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.
+ */
+export declare class NvFieldradio {
+    el: HTMLNvFieldradioElement;
+    /****************************************************************************/
+    /**
+     * Adds a helpful hint message below the label
+     * @deprecated use description instead.
+     */
+    readonly message: string;
+    /**
+     * Set the label placement to before the input
+     * @deprecated use labelPlacement instead.
+     */
+    readonly labelBefore: boolean;
+    componentWillRender(): void;
+    /****************************************************************************/
+    /**
+     * 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.
+     */
+    readonly inputId: 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.
+     */
+    readonly 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.
+     */
+    readonly value: 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.
+     */
+    readonly label: string;
+    /**
+     * Defines the position of the label relative to the radio button.
+     */
+    labelPlacement: `${FieldLabelPlacement}`;
+    /**
+     * 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;
+    /**
+     * 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
+     */
+    readonly error: boolean;
+    /**
+     * A description that appears when there is an error related to the radio
+     * button.
+     * @validator message
+     */
+    readonly errorDescription: string;
+    /**
+     * Controls whether the radio button is selected.
+     */
+    checked: boolean;
+    /**
+     * Disables the radio button, making it un-selectable.
+     */
+    readonly disabled: boolean;
+    /****************************************************************************/
+    /**
+     * Emits when the checked state changes.
+     * @bind checked
+     */
+    checkedChanged: EventEmitter<boolean>;
+    /****************************************************************************/
+    /**
+     * Watches for changes to the checked state and emits the new value.
+     * @param {boolean} checked - The new value of the checked state.
+     */
+    handleCheckedChange(checked: boolean): void;
+    /**
+     * Listens for the change event on the radio button input element and controls
+     * the checked state of the host elements.
+     * @param {Event} event - The change event.
+     */
+    handleChange(event: Event): void;
+    /****************************************************************************/
+    render(): any;
+}

package/dist/types/components/nv-fieldradio/nv-fieldradio.docs.d.ts

@@ -0,0 +1,4 @@
+import type { NovaDocs } from '../../nova-docs';
+import { Components } from '../../components';
+declare const NvFieldradioDocs: NovaDocs<Components.NvFieldradio>;
+export default NvFieldradioDocs;

package/dist/types/components/nv-fieldselect/nv-fieldselect.d.ts

@@ -0,0 +1,195 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot default - Content to be placed inside the select element.
+ * @slot leading-input - Content to be placed before the select input, within the select container.
+ * @slot before-input - Content to be placed before the select input, outside the select container.
+ * @slot after-input - Content to be placed after the select input, outside the select container.
+ * @slot label - Content to be placed as the label, will override the label prop.
+ * @slot description - Content to be placed as the description, will override the description prop.
+ * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.
+ */
+export declare class NvFieldselect {
+    el: HTMLNvFieldselectElement;
+    private selectElement;
+    private internals;
+    /****************************************************************************/
+    private computedDisplayValue;
+    private internalReadonly;
+    /****************************************************************************/
+    /**
+     * Message defines a 'hint ' message for the Select Field.
+     * @deprecated use description instead.
+     */
+    readonly message: string;
+    /**
+     * Add the message to the validation state.
+     * @deprecated use errorDescription and set the error prop instead.
+     */
+    readonly validation: string;
+    componentWillRender(): void;
+    /****************************************************************************/
+    /**
+     * 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.
+     */
+    readonly selectId: 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.
+     */
+    readonly label?: string;
+    /**
+     * 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;
+    /**
+     * 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
+     */
+    readonly name: 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.
+     */
+    readonly 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.
+     */
+    readonly readonly: boolean;
+    /**
+     * Marks the select field as required, ensuring that the user must fill it out
+     * before submitting the form.
+     */
+    readonly required: boolean;
+    /**
+     * Alters the select field’s appearance to indicate an error, helping users
+     * identify fields that need correction.
+     * @validator error
+     */
+    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;
+    /**
+     * Changes the select field’s appearance to indicate successful input or
+     * validation.
+     */
+    readonly success: boolean;
+    /**
+     * When enabled, allows the select to handle multiple selections.
+     */
+    readonly multiple: boolean;
+    /**
+     * 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.
+     */
+    value: string;
+    /**
+     * 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.
+     */
+    readonly displayValue: boolean;
+    /****************************************************************************/
+    /**
+     * Emitted when the selected value changes.
+     * @bind value
+     */
+    valueChanged: EventEmitter<string>;
+    /****************************************************************************/
+    /**
+     * Updates the display value when the value property changes. This watcher is
+     * used to update the display value when the selected value changes. This is
+     * necessary for readonly select fields to display the selected value.
+     * @internal This watcher is not intended to be called outside of the component.
+     * @param {string} newValue - The new value of the select field.
+     */
+    updateDisplayValueWatcher(newValue: string): void;
+    /**
+     * Watcher for the displayValue prop to ensure internalReadonly is true when displayValue is true.
+     * @param {boolean} newValue - The new value of displayValue.
+     */
+    handleDisplayValueChange(newValue: boolean): void;
+    /**
+     * Watcher for the readonly prop to ensure internalReadonly is true when readonly is true.
+     * @param {boolean} newValue - The new value of readonly.
+     */
+    handleReadonlyChange(newValue: boolean): void;
+    /****************************************************************************/
+    /**
+     * Handles the change event on the select element. This method is used to
+     * update the value property when the selected options change. It is also
+     * used to emit the selectChanged event when the selected value changes.
+     * @param {Event} event - The change event on the select element.
+     * @emits selectChanged
+     */
+    private readonly handleSelectChange;
+    /**
+     * Handles focus when the select container is clicked.
+     */
+    private readonly handleSelectContainerClick;
+    /**
+     * Updates the display value of the select field. This method is used to
+     * update the display value when the selected value changes. This is necessary
+     * for readonly select fields to display the selected value. This method is
+     * called in the componentDidLoad lifecycle hook and the updateDisplayValueWatcher
+     * watcher.
+     * @internal This method is not intended to be called outside of the component.
+     */
+    private updateDisplayValue;
+    /**
+     * Retrieves the label from the <option> elements based on the provided key (value).
+     * This method uses the id or value attribute directly from the <select> options.
+     * @param {string} key - The key (value) for which to find the corresponding label.
+     * @returns {string} The label if found; otherwise, an empty string.
+     */
+    private getLabelFromId;
+    /**
+     * Sets the value of the form element for form submission. This method is
+     * called when the selected value changes or when the value property is set.
+     * @internal This method is not intended to be called outside of the component.
+     */
+    private setFormValue;
+    /**
+     * Ensures the select element is available. This method is used to ensure
+     * the select element is available before attempting to access it.
+     * @internal This method is not intended to be called outside of the component.
+     */
+    private ensureSelectElement;
+    /****************************************************************************/
+    /**
+     * Lifecycle method that is called before the component is rendered. This is
+     * where the internal state is set up before rendering occurs.
+     */
+    componentWillLoad(): void;
+    /**
+     * Lifecycle method that is called after the component has been rendered.
+     * This is where the display value is updated and the initial select element's
+     * state is set.
+     */
+    componentDidLoad(): void;
+    /****************************************************************************/
+    /**
+     * The render method creates the HTML structure for the component, including
+     * the label, select element, and any error or description messages. It also
+     * applies the appropriate CSS classes based on the readonly state and
+     * displayValue prop. This method is called when the component is rendered.
+     * @returns {HTMLStencilElement} The HTML element to render.
+     */
+    render(): any;
+}

package/dist/types/components/nv-fieldselect/nv-fieldselect.docs.d.ts

@@ -0,0 +1,4 @@
+import type { NovaDocs } from '../../nova-docs';
+import { Components } from '../../components';
+declare const NvFieldselectDocs: NovaDocs<Components.NvFieldselect>;
+export default NvFieldselectDocs;

package/dist/types/components/nv-fieldtext/nv-fieldtext.d.ts

@@ -0,0 +1,162 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { TextInputAutocomplete } from '../../utils/constants';
+/**
+ * @slot leading-input - Content to be placed before the input text, within the input container.
+ * @slot before-input - Content to be placed before the input text, outside the input container.
+ * @slot after-input - Content to be placed after the input text, outside the input container.
+ * @slot label - Content to be placed as the label, will override the label prop.
+ * @slot description - Content to be placed as the description, will override the description prop.
+ * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.
+ */
+export declare class NvFieldtext {
+    el: HTMLNvFieldtextElement;
+    private inputElement;
+    /****************************************************************************/
+    /**
+     * Message defines a 'hint ' message for the Text Field.
+     * @deprecated use description instead.
+     */
+    readonly message: string;
+    /**
+     * Add the message to the validation state.
+     * @deprecated use errorDescription and set the error prop instead.
+     */
+    readonly validation: string;
+    /**
+     * Type of the input.
+     * @deprecated use type instead.
+     */
+    readonly textInputType: 'text' | 'tel' | 'email';
+    componentWillRender(): void;
+    /****************************************************************************/
+    /**
+     * 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.
+     */
+    readonly 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.
+     */
+    readonly label: string;
+    /**
+     * 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;
+    /**
+     * 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.
+     */
+    readonly placeholder: string;
+    /**
+     * 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
+     */
+    readonly name: 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;
+    /**
+     * 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.
+     */
+    type: 'text' | 'tel' | 'email';
+    /**
+     * 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.
+     */
+    readonly disabled: boolean;
+    /**
+     * 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.
+     */
+    readonly readonly: boolean;
+    /**
+     * Marks the input field as required, ensuring that the user must fill it out
+     * before submitting the form.
+     */
+    readonly required: boolean;
+    /**
+     * Alters the input field’s appearance to indicate an error, helping users
+     * identify fields that need correction.
+     * @validator error
+     */
+    error: boolean;
+    /**
+     * A description that appears when there is an error related to the textfield
+     * field.
+     * @validator message
+     */
+    errorDescription: string;
+    /**
+     * Changes the input field’s appearance to indicate successful input or
+     * validation.
+     */
+    readonly success: boolean;
+    /**
+     * 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.
+     */
+    readonly 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.
+     */
+    readonly minlength: number;
+    /**
+     * 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.
+     */
+    readonly pattern: string;
+    /**
+     * 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.
+     */
+    readonly autocomplete: `${TextInputAutocomplete}`;
+    /**
+     * 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.
+     */
+    readonly multiple: boolean;
+    /****************************************************************************/
+    /**
+     * Emitted when the input value changes.
+     * @bind value
+     */
+    valueChanged: EventEmitter<string>;
+    /****************************************************************************/
+    /**
+     * Handles the input event on the input element.
+     * Emits the inputChanged event with the new value.
+     * @param {Event} event - Event object of the input event.
+     */
+    private handleInput;
+    /**
+     * Handles focus when the input container is clicked.
+     */
+    private handleInputContainerClick;
+    /****************************************************************************/
+    render(): any;
+}

package/dist/types/components/nv-fieldtext/nv-fieldtext.docs.d.ts

@@ -0,0 +1,4 @@
+import type { NovaDocs } from '../../nova-docs';
+import { Components } from '../../components';
+declare const NvFieldtextDocs: NovaDocs<Components.NvFieldtext>;
+export default NvFieldtextDocs;