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

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

@@ -0,0 +1,85 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { DeprecatedSemanticColors, FeedbackColors } from '../../utils/constants';
+/**
+ * @slot default - Use this slot to insert HTML into the alert content.
+ */
+export declare class NvAlert {
+    ref: HTMLNvAlertElement;
+    /****************************************************************************/
+    /**
+     * Defines color of the alert.
+     * @deprecated use feedback instead.
+     */
+    readonly color: `${DeprecatedSemanticColors}`;
+    componentWillRender(): void;
+    /****************************************************************************/
+    /**
+     * Specifies the alert type which determines the color and default icon.
+     */
+    feedback: `${FeedbackColors}`;
+    /**
+     * Main content of the alert. For more complex content, use the default slot
+     * instead.
+     */
+    readonly message: string;
+    /**
+     * Short and concise text for the alert title.
+     */
+    readonly heading: string;
+    /**
+     * Icon associated with the alert, defaults vary based on the feedback type.
+     */
+    readonly icon: string;
+    /**
+     * Allows the alert to be dismissed via a close button (x). The alert is not
+     * dismissible unless explicitly enabled.
+     */
+    readonly dismissible: boolean;
+    /**
+     * When true, the alert does not automatically close upon dismissing.
+     * Useful for externally controlled component behavior.
+     */
+    readonly preventAutoClose: boolean;
+    /**
+     * Controls the visibility of the alert. Will animate with fade and collapse.
+     */
+    hidden: boolean;
+    /****************************************************************************/
+    /**
+     * Emits when the 'hidden' prop changes, reflecting a change in visibility.
+     * Passes hidden value to the detail.
+     * @bind hidden
+     */
+    hiddenChanged: EventEmitter<boolean>;
+    /**
+     * Emitted when the animations complete, detail includes the hidden value.
+     */
+    hiddenChangedComplete: EventEmitter<boolean>;
+    /**
+     * Emitted when the close button is clicked.
+     */
+    closeClicked: EventEmitter<MouseEvent>;
+    /****************************************************************************/
+    /**
+     * Used for 2 way binding with the hidden property.
+     * Triggers open and close animations.
+     * @param {boolean} hidden - The visibility state of the alert.
+     */
+    handleHiddenChange(hidden: boolean): Promise<void>;
+    /****************************************************************************/
+    /**
+     * Handles the dismissal of the alert, considering the preventAutoClose prop.
+     * Passes the original event from the close button to the close event detail.
+     * @param {MouseEvent} originalEvent - The original event from the close button.
+     */
+    private handleDismiss;
+    /**
+     * By default an icon is linked to the feedback type
+     * @returns {string} - The default icon name.
+     */
+    private getDefaultIcon;
+    /****************************************************************************/
+    componentWillLoad(): void;
+    /****************************************************************************/
+    render(): any;
+}

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

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

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

@@ -0,0 +1,75 @@
+import { SemanticSizes } from '../../utils/constants';
+/**
+ * @slot icon - if you want to add an icon to the avatar, use this slot with an svg or nv-icon
+ */
+export declare class NvAvatar {
+    /****************************************************************************/
+    /**
+     * Set size to ExtraSmall to the avatar.
+     * @deprecated use size instead.
+     */
+    readonly xsmall: boolean;
+    /**
+     * Set size to Small to the avatar.
+     * @deprecated use size instead.
+     */
+    readonly small: boolean;
+    /**
+     * Set size to Medium to the avatar.
+     * @deprecated use size instead.
+     */
+    readonly medium: boolean;
+    /**
+     * Set size to Large to the avatar.
+     * @deprecated use size instead.
+     */
+    readonly large: boolean;
+    /**
+     * Set size to ExtraLarge to the avatar.
+     * @deprecated use size instead.
+     */
+    readonly xlarge: boolean;
+    /**
+     * Set initials to the avatar.
+     * @deprecated use initials instead.
+     */
+    readonly text: string;
+    /**
+     * Set src to the avatar.
+     * @deprecated use src instead.
+     */
+    readonly url: string;
+    componentWillRender(): void;
+    /****************************************************************************/
+    /**
+     * If and image is provided, add an alt tag to describe it.
+     */
+    readonly alt: string;
+    /**
+     * Will insert an image into the avatar.
+     */
+    src: string;
+    /**
+     * Initials of the avatar. Usually use two letters
+     * When filled with the src parameter, the text will not be rendered.
+     */
+    initials: string;
+    /**
+     * Define the size of the avatar. You can use t-shirt sizes.
+     */
+    size: `${SemanticSizes}`;
+    /**
+     * You can apply different colors on the Avatar.
+     * Use a string number between 1 and 10.
+     */
+    readonly color: string;
+    /****************************************************************************/
+    /**
+     * Makes sure the initials are trimmed to 2 letters.
+     * @param {string} initials - The initials to be trimmed.
+     * @returns {string} The trimmed initials.
+     */
+    private trimInitials;
+    /****************************************************************************/
+    render(): any;
+}

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

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

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

@@ -0,0 +1,93 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot leading-icon - Icon before the label.
+ */
+export declare class NvBadge {
+    ref: HTMLNvBadgeElement;
+    /****************************************************************************/
+    /**
+     * Whether the badge is dismissible.
+     * @deprecated use dismissible instead.
+     */
+    readonly dismissal: boolean;
+    /**
+     * The icon to display in the badge.
+     * @deprecated use leadIcon or slot="leading-icon" instead.
+     */
+    readonly icon: string;
+    /**
+     * The location of the icon in the badge.
+     * @deprecated only leadIcon now.
+     */
+    readonly iconLocation: 'left' | 'right';
+    /****************************************************************************/
+    /**
+     * The color of the badge. Use a string between 1 to 5
+     */
+    readonly color?: string;
+    /**
+     * Main content of the badge.
+     */
+    readonly label?: string | null;
+    /**
+     * The lead icon of the badge.
+     */
+    leadIcon?: string | null;
+    /**
+     * Whether the badge is dismissible.
+     */
+    dismissible: boolean;
+    /**
+     * Controls the visibility of the badge. Will animate with fade and collapse.
+     */
+    hidden: boolean;
+    private _isHidden;
+    /**
+     * When true, the alert does not automatically close upon dismissing.
+     * Useful for externally controlled component behavior.
+     */
+    readonly preventAutoClose: boolean;
+    /****************************************************************************/
+    /**
+     * Emitted when the badge is dismissed.
+     */
+    closeClicked: EventEmitter<MouseEvent>;
+    /**
+     * Emits when the 'hidden' prop changes, reflecting a change in visibility.
+     * Passes hidden value to the detail.
+     */
+    hiddenChanged: EventEmitter<boolean>;
+    /**
+     * Emitted when the animations complete, detail includes the hidden value.
+     */
+    hiddenChangedComplete: EventEmitter<boolean>;
+    /****************************************************************************/
+    /**
+     * Handles the dismissal prop change.
+     * @param {boolean} dismissal - The new dismissal value.
+     */
+    handleDismissalChange(dismissal: boolean): void;
+    /**
+     * Handles the icon prop change.
+     * @param {string} icon - The new icon value.
+     */
+    handleIconChange(icon: string): void;
+    /**
+     * Handles the hidden prop change.
+     * @param {boolean} hidden - The new hidden value.
+     */
+    handleHiddenChange(hidden: boolean): Promise<void>;
+    /****************************************************************************/
+    /**
+     * Component will load.
+     */
+    componentWillLoad(): void;
+    /****************************************************************************/
+    /**
+     * Handles the close button click.
+     * @param {MouseEvent} originalEvent - The original event.
+     */
+    private readonly handleClose;
+    /****************************************************************************/
+    render(): any;
+}

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

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

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

@@ -0,0 +1,17 @@
+/**
+ * @slot default - render children
+ * @deprecated This is only to help with the migration from v2 to v3. It will be removed in the next major release.
+ */
+export declare class NvBaseComponent {
+    el: HTMLNvBaseElement;
+    private mutationObserver;
+    /****************************************************************************/
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    /****************************************************************************/
+    private applyClassesOnInitialRender;
+    private observeElements;
+    /****************************************************************************/
+    render(): any;
+}

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

@@ -0,0 +1,5 @@
+declare const _default: {
+    component: "nv-base";
+    skip: true;
+};
+export default _default;

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

@@ -0,0 +1,63 @@
+import { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';
+/**
+ * @slot default - Content of the button.
+ * @slot leading-icon - Icon before the label.
+ * @slot trailing-icon - Icon after the label.
+ */
+export declare class NvButton {
+    internals: ElementInternals;
+    el: HTMLNvButtonElement;
+    /****************************************************************************/
+    /**
+     * Determines how large or small the button appears, allowing for
+     * customization of the button's dimensions to fit different design
+     * specifications and user needs.
+     */
+    readonly size: `${ButtonSize}`;
+    /**
+     * 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
+     */
+    readonly emphasis: `${ButtonEmphasis}`;
+    /**
+     * Applies styling that visually indicates the button represents a dangerous
+     * action.
+     */
+    readonly danger: boolean;
+    /**
+     * 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.
+     */
+    loading: boolean;
+    /**
+     * Disables the button, preventing user interaction.
+     */
+    disabled: boolean;
+    /**
+     * Allows the button to stretch and fill the entire width of its container.
+     */
+    readonly fluid: boolean;
+    /**
+     * 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.
+     */
+    readonly type: `${ButtonType}`;
+    /****************************************************************************/
+    /**
+     * Handles form-related actions when the button is clicked.
+     * - Submits the form if the button type is 'submit'.
+     * - Resets the form if the button type is 'reset'.
+     * @param {Event} event - The click event.
+     */
+    private handleClick;
+    /****************************************************************************/
+    handleLoadingChange(loading: boolean): void;
+    handleDisabledChange(disabled: boolean): void;
+    /****************************************************************************/
+    componentWillLoad(): void;
+    /****************************************************************************/
+    render(): any;
+}

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

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

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

@@ -0,0 +1,18 @@
+/**
+ * @slot default - The column content.
+ */
+export declare class NvCol {
+    /****************************************************************************/
+    /**
+     * Defines the column size based on a 12 column grid system.
+     */
+    readonly size: number;
+    /****************************************************************************/
+    /**
+     * Get the column size class.
+     * @returns {string | undefined} The column size class.
+     */
+    private getColSize;
+    /****************************************************************************/
+    render(): any;
+}

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

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

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

@@ -0,0 +1,119 @@
+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.
+ * @slot checked-icon - Content to be placed as the checked icon, will override the checkedIcon prop.
+ * @slot indeterminate-icon - Content to be placed as the indeterminate icon, will override the indeterminateIcon prop.
+ */
+export declare class NvFieldcheckbox {
+    el: HTMLNvFieldcheckboxElement;
+    /****************************************************************************/
+    /**
+     * Message define a 'hint ' message for the Field.
+     * @deprecated Use `description` instead.
+     * */
+    readonly message?: string;
+    /**
+     * The text for the validation message.
+     * @deprecated Use `errorDescription` instead.
+     * */
+    readonly validation?: string;
+    /**
+     * When true, the label will be placed before the checkbox.
+     * @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
+     * 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;
+    /**
+     * The name attribute for the checkbox input, used to reference the form data
+     * after submission.
+     */
+    readonly name?: 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.
+     */
+    readonly value?: string;
+    /**
+     * The label displayed next to the checkbox.
+     */
+    readonly label?: string;
+    /**
+     * Determines the position of the label relative to the checkbox, either
+     * 'start' (before) or 'end' (after).
+     */
+    labelPlacement: `${FieldLabelPlacement}`;
+    /**
+     * Hides the label visually while still keeping it available for screen
+     * readers.
+     */
+    readonly hideLabel: boolean;
+    /**
+     * A description providing additional context or information about the
+     * checkbox.
+     */
+    description?: string;
+    /**
+     * Signals that there is an error associated with the checkbox, which can
+     * trigger visual cues.
+     */
+    readonly error: boolean;
+    /**
+     * A description that appears when there is an error related to the checkbox.
+     */
+    errorDescription?: string;
+    /**
+     * Indicates whether the checkbox is checked or not.
+     */
+    checked: boolean;
+    /**
+     * Indicates whether the checkbox is in an indeterminate state, typically used
+     * for hierarchical checkboxes.
+     */
+    indeterminate: boolean;
+    /**
+     * Disables the checkbox, preventing user interaction.
+     */
+    readonly disabled: boolean;
+    /**
+     * Sets the checkbox to read-only, preventing user changes but still allowing
+     * focus and selection of text.
+     */
+    readonly readonly: boolean;
+    /**
+     * Marks the checkbox as required, indicating that it must be checked for
+     * form submission.
+     */
+    readonly required: 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.
+     */
+    onCheckedChanged(checked: boolean): void;
+    /**
+     * Listens for the change event on the checkbox input element and updates the
+     * checked state.
+     * @param {Event} event - The change event.
+     */
+    handleChange(event: Event): void;
+    /****************************************************************************/
+    render(): any;
+}

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

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

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

@@ -0,0 +1,132 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @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 NvFieldnumber {
+    el: HTMLNvFieldnumberElement;
+    private inputElement;
+    /****************************************************************************/
+    /**
+     * Message defines a 'hint ' message for the number 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;
+    /****************************************************************************/
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * Changes the input field’s appearance to indicate successful input or
+     * validation.
+     */
+    readonly success: boolean;
+    /**
+     * The maximum value that the input field can accept. Use this in combination
+     * with min to create a range of valid values.
+     */
+    readonly max: number;
+    /**
+     * The minimum value that the input field can accept. Use this in combination
+     * with max to create a range of valid values.
+     */
+    readonly min: number;
+    /**
+     * 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.
+     */
+    readonly step: number;
+    /**
+     * 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;
+    /****************************************************************************/
+    componentWillRender(): void;
+    /****************************************************************************/
+    /**
+     * Emitted when the input value changes.
+     * @bind value
+     */
+    valueChanged: EventEmitter<number>;
+    /****************************************************************************/
+    watchValueHandler(newValue: number): void;
+    /****************************************************************************/
+    private handleInput;
+    private handleInputContainerClick;
+    private handlePlus;
+    private handleMinus;
+    private isMinValueReached;
+    private isMaxValueReached;
+    /****************************************************************************/
+    render(): any;
+}

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

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