@nova-design-system/nova-webcomponents 3.0.0-beta.36 → 3.0.0-beta.38

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

@@ -0,0 +1,132 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot default - Body of the dialog.
+ * @slot trigger - Content to be placed as the trigger, will override the trigger prop.
+ * @slot header - Content to be placed as the header, will override the header prop.
+ * @slot footer - Content to be placed as the footer, will override the footer prop.
+ */
+export declare class NvDialog {
+    el: HTMLNvDialogElement;
+    private dialogElement;
+    private eventsAttached;
+    /****************************************************************************/
+    /**
+     * @internal
+     * Accepts a reference to the DOM element acting as the popover trigger. This
+     * should be used when the slot for the trigger is not defined.
+     */
+    triggerElement: Element;
+    /**
+     * @internal
+     * Accepts a reference to the DOM element acting as the header. This should
+     * be used when the slot for the header is not defined.
+     */
+    headerElement: Element;
+    /**
+     * @internal
+     * Accepts a reference to the DOM element acting as the footer. This should
+     * be used when the slot for the footer is not defined.
+     */
+    footerElement: Element;
+    /**
+     * Use this prop to toggle the visibility of the dialog. Set to true to show
+     * the dialog and false to hide it.
+     */
+    open: boolean;
+    /**
+     * If true, the dialog cannot be closed by the user.
+     */
+    readonly undismissable: boolean;
+    /**
+     * If true, the dialog will be closed when the backdrop is clicked.
+     */
+    readonly clickOutside: boolean;
+    /**
+     * Controls the dialog's autofocus behavior. When false (default), the dialog will
+     * automatically focus the first focusable element. When true, automatic focus is
+     * disabled and you must manually set focus on an element for accessibility compliance.
+     */
+    readonly manualFocus: boolean;
+    /**
+     * If true, the dialog visibility is managed manually through methods or the open prop.
+     */
+    readonly controlled: boolean;
+    /**
+     * If true, the dialog takes full width styling.
+     */
+    readonly full: boolean;
+    /****************************************************************************/
+    /**
+     * Call this method to show the dialog, making it visible on the screen.
+     */
+    show(): Promise<void>;
+    /**
+     * Call this method to hide the dialog, making it disappear from view.
+     */
+    hide(): Promise<void>;
+    /**
+     * Handles the close button click.
+     */
+    private handleCloseButton;
+    /**
+     * Handles the cancel button click.
+     */
+    private handleCancelButton;
+    /**
+     * Sets the autofocus on the first focusable element in the dialog.
+     */
+    private setAutofocus;
+    /**
+     * Attaches event listeners to the dialog.
+     */
+    private attachEventListeners;
+    /**
+     * Prevents the body from scrolling when the dialog is open.
+     */
+    private preventScroll;
+    /**
+     * Allows the body to scroll when the dialog is closed.
+     */
+    private allowScroll;
+    /****************************************************************************/
+    /**
+     * Emitted when the dialog is closing in order to allow for cleanup, data-capture, etc.
+     */
+    close: EventEmitter<void>;
+    /**
+     * Handles the dialog close event.
+     */
+    private handleDialogClose;
+    /**
+     * Handles the keydown event to optionally prevent the native dialog from closing when the escape key is pressed.
+  
+     * @param {KeyboardEvent} event - The keydown event.
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Handles the click event to close the dialog when clickOutside is true.
+     * @param {MouseEvent} event - The click event.
+     */
+    handleDocumentClick(event: MouseEvent): void;
+    /**
+     * Handles the touchstart event to close the dialog when clickOutside is true.
+     * @param {TouchEvent} event - The touchstart event.
+     */
+    handleDocumentTouch(event: TouchEvent): void;
+    private handleClickOutside;
+    private triggerClickEvents;
+    /****************************************************************************/
+    handleDialogOpenChange(open: boolean): Promise<void>;
+    /****************************************************************************/
+    /**
+     * Lifecycle method that runs before the component loads.
+     * Initializes the trigger, header, and footer elements by finding them in the component's children.
+     * Elements are found either by their slot attribute or by their tag name (for dialog header/footer)
+     */
+    componentWillLoad(): void;
+    componentWillUpdate(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    /****************************************************************************/
+    render(): any;
+}

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

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

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

@@ -0,0 +1,63 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot default - Custom content for the dialog footer. When provided, the default buttons will not be rendered.
+ */
+export declare class NvDialogfooter {
+    internals: ElementInternals;
+    el: HTMLNvDialogfooterElement;
+    private hasSlot;
+    /****************************************************************************/
+    /**
+     * Disables the confirm button, preventing user interaction.
+     */
+    readonly disabled: boolean;
+    /**
+     * Controls the visibility of the cancel button. When true, the cancel button is
+     * hidden.
+     */
+    readonly undismissable: boolean;
+    /**
+     * Sets the leading icon for the submit button.
+     */
+    readonly leadingIcon: string;
+    /**
+     * Sets the trailing icon for the submit button.
+     */
+    readonly trailingIcon: string;
+    /**
+     * Sets the danger state for the submit button.
+     */
+    readonly danger: boolean;
+    /**
+     * Sets the label for the cancel button.
+     */
+    readonly cancelLabel: string;
+    /**
+     * Sets the label for the submit button.
+     */
+    readonly submitLabel: string;
+    /****************************************************************************/
+    /**
+     * Emitted when the cancel button is clicked. This will close the dialog.
+     */
+    nvDialogCanceled: EventEmitter<void>;
+    /**
+     * Emitted when the submit button is clicked. This allows to handle the submit action and potential data capture before closing the dialog.
+     */
+    nvDialogConfirmed: EventEmitter<void>;
+    /****************************************************************************/
+    /**
+     * Handles the submit action when the submit button is clicked.
+     * @param {Event} event - The click event.
+     */
+    private handleConfirm;
+    /**
+     * Handles the cancel action when the cancel button is clicked. This will close the dialog.
+     * @param {Event} event - The click event.
+     */
+    private handleCancel;
+    /****************************************************************************/
+    componentWillLoad(): void;
+    /****************************************************************************/
+    render(): any;
+}

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

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

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

@@ -0,0 +1,20 @@
+/**
+ * @slot default - Custom content for the dialog header. When provided, the default header will not be rendered.
+ */
+export declare class NvDialogheader {
+    el: HTMLNvDialogheaderElement;
+    private hasSlot;
+    /****************************************************************************/
+    /**
+     * Sets the heading text for the dialog.
+     */
+    readonly heading: string;
+    /**
+     * Sets the subheading text for the dialog.
+     */
+    readonly subheading: string;
+    /****************************************************************************/
+    componentWillLoad(): void;
+    /****************************************************************************/
+    render(): any;
+}

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

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

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { type FieldLabelPlacement } from '../../utils/constants';
+import { type LabelPlacement } 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.
@@ -17,7 +17,7 @@ export declare class NvFieldcheckbox {
     readonly message?: string;
     /**
      * The text for the validation message.
-     * @deprecated Use `errorDescription` instead.
+     * @deprecated Use `errorDescription` and set the error prop instead.
      * */
     readonly validation?: string;
     /**
@@ -25,7 +25,6 @@ export declare class NvFieldcheckbox {
      * @deprecated Use `labelPlacement = end` instead.
      * */
     readonly labelBefore?: boolean;
-    componentWillRender(): void;
     /****************************************************************************/
     /**
      * Sets the ID for the radio button’s input element and the for attribute of
@@ -53,7 +52,7 @@ export declare class NvFieldcheckbox {
      * Determines the position of the label relative to the checkbox, either
      * 'start' (before) or 'end' (after).
      */
-    labelPlacement: `${FieldLabelPlacement}`;
+    labelPlacement: `${LabelPlacement}`;
     /**
      * Hides the label visually while still keeping it available for screen
      * readers.
@@ -67,10 +66,12 @@ export declare class NvFieldcheckbox {
     /**
      * Signals that there is an error associated with the checkbox, which can
      * trigger visual cues.
+     * @validator error
      */
-    readonly error: boolean;
+    error: boolean;
     /**
      * A description that appears when there is an error related to the checkbox.
+     * @validator message
      */
     errorDescription?: string;
     /**
@@ -103,11 +104,6 @@ export declare class NvFieldcheckbox {
      */
     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.
-     */
-    onCheckedChanged(checked: boolean): void;
     /**
      * Listens for the change event on the checkbox input element and updates the
      * checked state.
@@ -115,5 +111,13 @@ export declare class NvFieldcheckbox {
      */
     handleChange(event: Event): void;
     /****************************************************************************/
+    /**
+     * Watches for changes to the checked state and emits the new value.
+     * @param {boolean} checked - The new value of the checked state.
+     */
+    onCheckedChanged(checked: boolean): void;
+    /****************************************************************************/
+    componentWillRender(): void;
+    /****************************************************************************/
     render(): any;
 }

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

@@ -24,7 +24,7 @@ export declare class NVFieldDropDown {
     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
+     * input field. It's a crucial element for making forms clear and
      * user-friendly.
      */
     readonly label: string;
@@ -36,7 +36,7 @@ export declare class NVFieldDropDown {
     readonly 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
+     * 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.
      */
@@ -44,7 +44,7 @@ export declare class NVFieldDropDown {
     /**
      * 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
+     * the server, representing the input's data in form submissions. It should be
      * unique within the form to avoid conflicts.
      */
     readonly name: string;
@@ -54,7 +54,7 @@ export declare class NVFieldDropDown {
     open: boolean;
     /**
      * The autocomplete prop helps users fill out the input field faster by
-     * suggesting entries they’ve used before, like their email or address.
+     * 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.
      */
@@ -62,7 +62,7 @@ export declare class NVFieldDropDown {
     /**
      * 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.
+     * where the input's value is managed by the component's state.
      */
     value: string;
     /**
@@ -71,7 +71,7 @@ export declare class NVFieldDropDown {
      */
     readonly required: boolean;
     /**
-     * Alters the input field’s appearance to indicate an error, helping users
+     * Alters the input field's appearance to indicate an error, helping users
      * identify fields that need correction.
      * @validator error
      */
@@ -83,14 +83,14 @@ export declare class NVFieldDropDown {
      */
     readonly errorDescription: 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
+     * 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;
     /**
-     * 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
+     * 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;
@@ -108,6 +108,25 @@ export declare class NVFieldDropDown {
     filterable: boolean;
     isFilterable: boolean;
     selectedValues: Set<string>;
+    /**
+     * List of options available in the dropdown.
+     * @description The options are passed as a JSON string.
+     * @example options='[{"label": "Option 1", "value": "option1", "selected": true}, {"label": "Option 2", "value": "option2"}]'
+     */
+    readonly options?: string;
+    /**
+     * Options configuration for the dropdown items.
+     */
+    parsedOptions: Array<{
+        /** Label to display for the option */
+        label: string;
+        /** Value associated with the option */
+        value: string;
+        /** Whether this option is disabled */
+        disabled?: boolean;
+        /** Whether this option is pre-selected */
+        selected?: boolean;
+    }>;
     /****************************************************************************/
     /**
      * Event emitted when an item is selected.
@@ -122,6 +141,11 @@ export declare class NVFieldDropDown {
     handleOpenChanged(event: CustomEvent<boolean>): void;
     watchFilterableHandler(newValue: boolean): void;
     watchValueHandler(newValue: string): void;
+    /**
+     * Watch for changes in the options prop
+     * @param {string} newValue - The new value of the options prop
+     */
+    handleOptionsChange(newValue: string): void;
     /****************************************************************************/
     componentWillLoad(): void;
     componentDidLoad(): void;

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

@@ -67,11 +67,15 @@ export declare class NvFieldmultiselect {
      */
     readonly required: boolean;
     /**
-     * Alters the input field's appearance to indicate an error.
+     * 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.
+     * A description that appears when there is an error related to the multiselect
+     * field.
+     * @validator message
      */
     readonly errorDescription: string;
     /**

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

@@ -13,12 +13,12 @@ export declare class NvFieldnumber {
     /****************************************************************************/
     /**
      * Message defines a 'hint ' message for the number field.
-     * @deprecated use description instead.
+     * @deprecated Use `description` instead.
      */
     readonly message: string;
     /**
      * Add the message to the validation state.
-     * @deprecated use errorDescription and set the error prop instead.
+     * @deprecated Use `errorDescription` and set the error prop instead.
      */
     readonly validation: string;
     /****************************************************************************/
@@ -111,8 +111,6 @@ export declare class NvFieldnumber {
      */
     value: number;
     /****************************************************************************/
-    componentWillRender(): void;
-    /****************************************************************************/
     /**
      * Emitted when the input value changes.
      * @bind value
@@ -128,5 +126,7 @@ export declare class NvFieldnumber {
     private isMinValueReached;
     private isMaxValueReached;
     /****************************************************************************/
+    componentWillRender(): void;
+    /****************************************************************************/
     render(): any;
 }

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { type FieldLabelPlacement } from '../../utils/constants';
+import { type LabelPlacement } 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.
@@ -50,7 +50,7 @@ export declare class NvFieldradio {
     /**
      * Defines the position of the label relative to the radio button.
      */
-    labelPlacement: `${FieldLabelPlacement}`;
+    labelPlacement: `${LabelPlacement}`;
     /**
      * Adds a helpful hint message below the label. This description provides
      * extra information or context about the radio button option, assisting users

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

@@ -13,20 +13,28 @@ export declare class NvFieldselect {
     private selectElement;
     private internals;
     /****************************************************************************/
-    private computedDisplayValue;
-    private internalReadonly;
-    /****************************************************************************/
     /**
      * Message defines a 'hint ' message for the Select Field.
-     * @deprecated use description instead.
+     * @deprecated Use `description` instead.
      */
     readonly message: string;
     /**
      * Add the message to the validation state.
-     * @deprecated use errorDescription and set the error prop instead.
+     * @deprecated Use `errorDescription` and set the error prop instead.
      */
     readonly validation: string;
-    componentWillRender(): void;
+    /****************************************************************************/
+    private computedDisplayValue;
+    private internalReadonly;
+    /**
+     * Options to display in the select. Can be passed as a JSON string.
+     * Format: [{ label: string, value: string, selected?: boolean, disabled?: boolean }]
+     */
+    readonly options?: string;
+    /**
+     * Parsed options stored internally
+     */
+    private parsedOptions;
     /****************************************************************************/
     /**
      * Sets the ID for the select element and the for attribute of the associated
@@ -130,6 +138,11 @@ export declare class NvFieldselect {
      * @param {boolean} newValue - The new value of readonly.
      */
     handleReadonlyChange(newValue: boolean): void;
+    /**
+     * Parse options and update the internal state
+     * @param {string} newValue - The new value of options
+     */
+    handleOptionsChange(newValue: string): void;
     /****************************************************************************/
     /**
      * Handles the change event on the select element. This method is used to
@@ -172,6 +185,7 @@ export declare class NvFieldselect {
      */
     private ensureSelectElement;
     /****************************************************************************/
+    componentWillRender(): void;
     /**
      * Lifecycle method that is called before the component is rendered. This is
      * where the internal state is set up before rendering occurs.

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

@@ -14,12 +14,12 @@ export declare class NvFieldtext {
     /****************************************************************************/
     /**
      * Message defines a 'hint ' message for the Text Field.
-     * @deprecated use description instead.
+     * @deprecated Use `description` instead.
      */
     readonly message: string;
     /**
      * Add the message to the validation state.
-     * @deprecated use errorDescription and set the error prop instead.
+     * @deprecated Use `errorDescription` and set the error prop instead.
      */
     readonly validation: string;
     /**
@@ -27,7 +27,6 @@ export declare class NvFieldtext {
      * @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
@@ -102,7 +101,7 @@ export declare class NvFieldtext {
      * field.
      * @validator message
      */
-    errorDescription: string;
+    errorDescription?: string;
     /**
      * Changes the input field’s appearance to indicate successful input or
      * validation.
@@ -158,5 +157,7 @@ export declare class NvFieldtext {
      */
     private handleInputContainerClick;
     /****************************************************************************/
+    componentWillRender(): void;
+    /****************************************************************************/
     render(): any;
 }

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

@@ -10,15 +10,14 @@ export declare class NvFieldtextarea {
     /****************************************************************************/
     /**
      * Message defines a 'hint ' message for the Text Field.
-     * @deprecated use description instead.
+     * @deprecated Use `description` instead.
      */
     readonly message: string;
     /**
      * Add the message to the validation state.
-     * @deprecated use errorDescription and set the error prop instead.
+     * @deprecated Use `errorDescription` and set the error prop instead.
      */
     readonly validation: string;
-    componentWillRender(): void;
     /****************************************************************************/
     /**
      * Sets the ID for the input element and the for attribute of the associated
@@ -151,6 +150,7 @@ export declare class NvFieldtextarea {
     private handleTextareaContainerClick;
     private adjustTextareaHeight;
     /****************************************************************************/
+    componentWillRender(): void;
     componentDidLoad(): void;
     /****************************************************************************/
     render(): any;