@nova-design-system/nova-webcomponents 3.0.0-beta.24 → 3.0.0-beta.27

package/dist/types/components.d.ts

@@ -6,11 +6,13 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { ButtonEmphasis, ButtonSize, ButtonType, DeprecatedSemanticColors, FeedbackColors, FieldLabelPlacement, LoaderColors, SemanticSizes, TextInputAutocomplete } from "./utils/constants";
+import { DropdownItemSelectedEventDetail } from "./components/nv-fielddropdownitem/DropdownItemSelectedEventDetail";
 import { IconName } from "./components/nv-icon/nv-icons";
 import { Placement } from "@floating-ui/dom";
 import { MenuitemSelectedEventDetail } from "./components/nv-menuitem/nv-menuitem";
 import { Element } from "./stencil-public-runtime";
 export { ButtonEmphasis, ButtonSize, ButtonType, DeprecatedSemanticColors, FeedbackColors, FieldLabelPlacement, LoaderColors, SemanticSizes, TextInputAutocomplete } from "./utils/constants";
+export { DropdownItemSelectedEventDetail } from "./components/nv-fielddropdownitem/DropdownItemSelectedEventDetail";
 export { IconName } from "./components/nv-icon/nv-icons";
 export { Placement } from "@floating-ui/dom";
 export { MenuitemSelectedEventDetail } from "./components/nv-menuitem/nv-menuitem";
@@ -263,6 +265,93 @@ export namespace Components {
          */
         "value"?: string;
     }
+    interface NvFielddropdown {
+        /**
+          * 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}`;
+        /**
+          * 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.
+         */
+        "disabled": boolean;
+        /**
+          * The text to display when no items match the filter.
+         */
+        "emptyresult": string;
+        /**
+          * 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 dropdown field.
+          * @validator message
+         */
+        "errorDescription": string;
+        /**
+          * Enables or disables the filtering feature for the dropdown items.
+         */
+        "filterable": boolean;
+        /**
+          * Retrieves the current filter text entered by the user.
+          * @returns The filter text.
+         */
+        "getFilterText": () => Promise<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.
+         */
+        "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;
+        /**
+          * 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 dropdown popover.
+         */
+        "open": 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.
+         */
+        "readonly": boolean;
+        /**
+          * Marks the input field as required, ensuring that the user must fill it out before submitting the form.
+         */
+        "required": 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 NvFielddropdownitem {
+        /**
+          * Disables the item, preventing any user interaction.
+         */
+        "disabled": boolean;
+        /**
+          * Label used as the value for the default layout.
+         */
+        "label"?: string;
+        /**
+          * Indicates if the item is selected.
+         */
+        "selected": boolean;
+        /**
+          * Value associated with the item.
+         */
+        "value"?: string;
+    }
     interface NvFieldnumber {
         /**
           * 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.
@@ -652,6 +741,10 @@ export namespace Components {
           * @validator message
          */
         "errorDescription": 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.
+         */
+        "inputId": string;
         /**
           * Lets you define the text that explains what users should enter in the text textarea field. It’s a crucial element for making forms clear and user-friendly.
          */
@@ -697,10 +790,6 @@ export namespace Components {
           * Changes the textarea field’s appearance to indicate successful textarea or validation.
          */
         "success": boolean;
-        /**
-          * Sets the ID for the textarea 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.
-         */
-        "textareaId": string;
         /**
           * Add the message to the validation state.
           * @deprecated use errorDescription and set the error prop instead.
@@ -990,6 +1079,14 @@ export interface NvFieldcheckboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNvFieldcheckboxElement;
 }
+export interface NvFielddropdownCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNvFielddropdownElement;
+}
+export interface NvFielddropdownitemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNvFielddropdownitemElement;
+}
 export interface NvFieldnumberCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNvFieldnumberElement;
@@ -1109,6 +1206,41 @@ declare global {
         prototype: HTMLNvFieldcheckboxElement;
         new (): HTMLNvFieldcheckboxElement;
     };
+    interface HTMLNvFielddropdownElementEventMap {
+        "dropdownItemSelected": DropdownItemSelectedEventDetail;
+        "valueChanged": string;
+    }
+    interface HTMLNvFielddropdownElement extends Components.NvFielddropdown, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNvFielddropdownElementEventMap>(type: K, listener: (this: HTMLNvFielddropdownElement, ev: NvFielddropdownCustomEvent<HTMLNvFielddropdownElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLNvFielddropdownElementEventMap>(type: K, listener: (this: HTMLNvFielddropdownElement, ev: NvFielddropdownCustomEvent<HTMLNvFielddropdownElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLNvFielddropdownElement: {
+        prototype: HTMLNvFielddropdownElement;
+        new (): HTMLNvFielddropdownElement;
+    };
+    interface HTMLNvFielddropdownitemElementEventMap {
+        "itemSelected": DropdownItemSelectedEventDetail;
+    }
+    interface HTMLNvFielddropdownitemElement extends Components.NvFielddropdownitem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNvFielddropdownitemElementEventMap>(type: K, listener: (this: HTMLNvFielddropdownitemElement, ev: NvFielddropdownitemCustomEvent<HTMLNvFielddropdownitemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLNvFielddropdownitemElementEventMap>(type: K, listener: (this: HTMLNvFielddropdownitemElement, ev: NvFielddropdownitemCustomEvent<HTMLNvFielddropdownitemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLNvFielddropdownitemElement: {
+        prototype: HTMLNvFielddropdownitemElement;
+        new (): HTMLNvFielddropdownitemElement;
+    };
     interface HTMLNvFieldnumberElementEventMap {
         "valueChanged": number;
     }
@@ -1315,6 +1447,8 @@ declare global {
         "nv-button": HTMLNvButtonElement;
         "nv-col": HTMLNvColElement;
         "nv-fieldcheckbox": HTMLNvFieldcheckboxElement;
+        "nv-fielddropdown": HTMLNvFielddropdownElement;
+        "nv-fielddropdownitem": HTMLNvFielddropdownitemElement;
         "nv-fieldnumber": HTMLNvFieldnumberElement;
         "nv-fieldpassword": HTMLNvFieldpasswordElement;
         "nv-fieldradio": HTMLNvFieldradioElement;
@@ -1611,6 +1745,101 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface NvFielddropdown {
+        /**
+          * 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}`;
+        /**
+          * 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.
+         */
+        "disabled"?: boolean;
+        /**
+          * The text to display when no items match the filter.
+         */
+        "emptyresult"?: string;
+        /**
+          * 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 dropdown field.
+          * @validator message
+         */
+        "errorDescription"?: string;
+        /**
+          * Enables or disables the filtering feature for the dropdown items.
+         */
+        "filterable"?: 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.
+         */
+        "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;
+        /**
+          * 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;
+        /**
+          * Event emitted when an item is selected.
+         */
+        "onDropdownItemSelected"?: (event: NvFielddropdownCustomEvent<DropdownItemSelectedEventDetail>) => void;
+        /**
+          * Emitted when the input value changes.
+          * @bind value
+         */
+        "onValueChanged"?: (event: NvFielddropdownCustomEvent<string>) => void;
+        /**
+          * State of the dropdown popover.
+         */
+        "open"?: 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.
+         */
+        "readonly"?: boolean;
+        /**
+          * Marks the input field as required, ensuring that the user must fill it out before submitting the form.
+         */
+        "required"?: 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 NvFielddropdownitem {
+        /**
+          * Disables the item, preventing any user interaction.
+         */
+        "disabled"?: boolean;
+        /**
+          * Label used as the value for the default layout.
+         */
+        "label"?: string;
+        /**
+          * Event emitted when an item is clicked.
+         */
+        "onItemSelected"?: (event: NvFielddropdownitemCustomEvent<DropdownItemSelectedEventDetail>) => void;
+        /**
+          * Indicates if the item is selected.
+         */
+        "selected"?: boolean;
+        /**
+          * Value associated with the item.
+         */
+        "value"?: string;
+    }
     interface NvFieldnumber {
         /**
           * 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.
@@ -2025,6 +2254,10 @@ declare namespace LocalJSX {
           * @validator message
          */
         "errorDescription"?: 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.
+         */
+        "inputId"?: string;
         /**
           * Lets you define the text that explains what users should enter in the text textarea field. It’s a crucial element for making forms clear and user-friendly.
          */
@@ -2075,10 +2308,6 @@ declare namespace LocalJSX {
           * Changes the textarea field’s appearance to indicate successful textarea or validation.
          */
         "success"?: boolean;
-        /**
-          * Sets the ID for the textarea 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.
-         */
-        "textareaId"?: string;
         /**
           * Add the message to the validation state.
           * @deprecated use errorDescription and set the error prop instead.
@@ -2356,6 +2585,8 @@ declare namespace LocalJSX {
         "nv-button": NvButton;
         "nv-col": NvCol;
         "nv-fieldcheckbox": NvFieldcheckbox;
+        "nv-fielddropdown": NvFielddropdown;
+        "nv-fielddropdownitem": NvFielddropdownitem;
         "nv-fieldnumber": NvFieldnumber;
         "nv-fieldpassword": NvFieldpassword;
         "nv-fieldradio": NvFieldradio;
@@ -2388,6 +2619,8 @@ declare module "@stencil/core" {
             "nv-button": LocalJSX.NvButton & JSXBase.HTMLAttributes<HTMLNvButtonElement>;
             "nv-col": LocalJSX.NvCol & JSXBase.HTMLAttributes<HTMLNvColElement>;
             "nv-fieldcheckbox": LocalJSX.NvFieldcheckbox & JSXBase.HTMLAttributes<HTMLNvFieldcheckboxElement>;
+            "nv-fielddropdown": LocalJSX.NvFielddropdown & JSXBase.HTMLAttributes<HTMLNvFielddropdownElement>;
+            "nv-fielddropdownitem": LocalJSX.NvFielddropdownitem & JSXBase.HTMLAttributes<HTMLNvFielddropdownitemElement>;
             "nv-fieldnumber": LocalJSX.NvFieldnumber & JSXBase.HTMLAttributes<HTMLNvFieldnumberElement>;
             "nv-fieldpassword": LocalJSX.NvFieldpassword & JSXBase.HTMLAttributes<HTMLNvFieldpasswordElement>;
             "nv-fieldradio": LocalJSX.NvFieldradio & JSXBase.HTMLAttributes<HTMLNvFieldradioElement>;

package/dist/types/stencil-public-runtime.d.ts

@@ -1015,6 +1015,8 @@ export declare namespace JSXBase {
         autoPlay?: boolean;
         autoplay?: boolean | string;
         controls?: boolean;
+        controlslist?: 'nodownload' | 'nofullscreen' | 'noremoteplayback';
+        controlsList?: 'nodownload' | 'nofullscreen' | 'noremoteplayback';
         crossOrigin?: string;
         crossorigin?: string;
         loop?: boolean;