@nova-design-system/nova-webcomponents 3.24.0 → 3.25.0

package/dist/types/components.d.ts

@@ -608,7 +608,6 @@ export namespace Components {
           * Call this method to show the dialog, making it visible on the screen.
          */
         "show": () => Promise<void>;
-        "triggerElement": Element;
         /**
           * If true, the dialog cannot be closed by the user.
           * @default false
@@ -2707,6 +2706,87 @@ export namespace Components {
          */
         "position": `${NotificationPosition}`;
     }
+    interface NvPaginationtable {
+        /**
+          * Navigates to the first page.
+         */
+        "firstPage": () => Promise<void>;
+        /**
+          * Hides all arrow navigation controls when set to true. By default, all controls are visible.
+          * @default false
+         */
+        "hideControls": boolean;
+        /**
+          * Hides the first/last arrow controls when set to true.
+          * @default false
+         */
+        "hideFirstLast": boolean;
+        /**
+          * Hides the previous/next arrow controls when set to true.
+          * @default false
+         */
+        "hidePrevNext": boolean;
+        /**
+          * Label template for the page indicator. Supports placeholders: {pageIndex}, {pageCount}. Note: {pageIndex} is displayed as 1-based to users (internally 0-based).
+          * @example 'Page {pageIndex} of {pageCount}' → 'Page 1 of 14'
+          * @default 'Page {pageIndex} of {pageCount}'
+         */
+        "labelPage": string;
+        /**
+          * Label template for the page size dropdown options. Supports placeholder: {pageSize}.
+          * @example '{pageSize} per page' → '10 per page'
+          * @default '{pageSize} per page'
+         */
+        "labelPageSizeOption": string;
+        /**
+          * Label template for the total row count display. Supports placeholder: {rowCount}.
+          * @example 'Total: {rowCount} rows' → 'Total: 254 rows'
+          * @default 'Total: {rowCount} rows'
+         */
+        "labelTotal": string;
+        /**
+          * Navigates to the last page.
+         */
+        "lastPage": () => Promise<void>;
+        /**
+          * Navigates to the next page.
+         */
+        "nextPage": () => Promise<void>;
+        /**
+          * Total number of pages available.
+          * @default 0
+         */
+        "pageCount": number;
+        /**
+          * Indicates which page of table results is currently being shown, using a zero-based index.
+          * @default 0
+         */
+        "pageIndex": number;
+        /**
+          * Sets how many results appear at once before moving to the next page.
+          * @default 10
+         */
+        "pageSize": number;
+        /**
+          * Navigates to the previous page.
+         */
+        "previousPage": () => Promise<void>;
+        /**
+          * Total number of rows in the dataset.
+          * @default 0
+         */
+        "rowCount": number;
+        /**
+          * Navigates to a specific page by index.
+          * @param index The zero-based page index to navigate to.
+         */
+        "setPageIndex": (index: number) => Promise<void>;
+        /**
+          * Changes the number of rows displayed per page.
+          * @param size The new page size.
+         */
+        "setPageSize": (size: number) => Promise<void>;
+    }
     interface NvPopover {
         /**
           * Disables the automatic flipping of the popover when the trigger element is out of the viewport. The popover will flip automatically by default.
@@ -2769,7 +2849,7 @@ export namespace Components {
           * Call this method to toggle between showing and hiding the popover, based on its current state.
          */
         "toggle": () => Promise<void>;
-        "triggerElement": Element;
+        "triggerElement": Element | ChildNode;
         /**
           * Sets the interaction mode for triggering the popover. Options include: - `hover`: The popover is shown on trigger hover. - `click`: The popover toggles on trigger click. - `controlled`: The visibility is managed manually through methods or the   open prop.
           * @default 'click'
@@ -3099,7 +3179,7 @@ export namespace Components {
           * @default 'absolute'
          */
         "strategy": Strategy;
-        "triggerElement": Element;
+        "triggerElement": Element | ChildNode;
     }
 }
 export interface NvAccordionCustomEvent<T> extends CustomEvent<T> {
@@ -3214,6 +3294,10 @@ export interface NvNotificationCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNvNotificationElement;
 }
+export interface NvPaginationtableCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNvPaginationtableElement;
+}
 export interface NvPopoverCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNvPopoverElement;
@@ -3919,6 +4003,24 @@ declare global {
         prototype: HTMLNvNotificationcontainerElement;
         new (): HTMLNvNotificationcontainerElement;
     };
+    interface HTMLNvPaginationtableElementEventMap {
+        "pageIndexChanged": number;
+        "pageSizeChanged": number;
+    }
+    interface HTMLNvPaginationtableElement extends Components.NvPaginationtable, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNvPaginationtableElementEventMap>(type: K, listener: (this: HTMLNvPaginationtableElement, ev: NvPaginationtableCustomEvent<HTMLNvPaginationtableElementEventMap[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 HTMLNvPaginationtableElementEventMap>(type: K, listener: (this: HTMLNvPaginationtableElement, ev: NvPaginationtableCustomEvent<HTMLNvPaginationtableElementEventMap[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 HTMLNvPaginationtableElement: {
+        prototype: HTMLNvPaginationtableElement;
+        new (): HTMLNvPaginationtableElement;
+    };
     interface HTMLNvPopoverElementEventMap {
         "openChanged": boolean;
     }
@@ -4205,6 +4307,7 @@ declare global {
         "nv-notification": HTMLNvNotificationElement;
         "nv-notification-bullet": HTMLNvNotificationBulletElement;
         "nv-notificationcontainer": HTMLNvNotificationcontainerElement;
+        "nv-paginationtable": HTMLNvPaginationtableElement;
         "nv-popover": HTMLNvPopoverElement;
         "nv-row": HTMLNvRowElement;
         "nv-sidebar": HTMLNvSidebarElement;
@@ -7083,6 +7186,70 @@ declare namespace LocalJSX {
          */
         "position"?: `${NotificationPosition}`;
     }
+    interface NvPaginationtable {
+        /**
+          * Hides all arrow navigation controls when set to true. By default, all controls are visible.
+          * @default false
+         */
+        "hideControls"?: boolean;
+        /**
+          * Hides the first/last arrow controls when set to true.
+          * @default false
+         */
+        "hideFirstLast"?: boolean;
+        /**
+          * Hides the previous/next arrow controls when set to true.
+          * @default false
+         */
+        "hidePrevNext"?: boolean;
+        /**
+          * Label template for the page indicator. Supports placeholders: {pageIndex}, {pageCount}. Note: {pageIndex} is displayed as 1-based to users (internally 0-based).
+          * @example 'Page {pageIndex} of {pageCount}' → 'Page 1 of 14'
+          * @default 'Page {pageIndex} of {pageCount}'
+         */
+        "labelPage"?: string;
+        /**
+          * Label template for the page size dropdown options. Supports placeholder: {pageSize}.
+          * @example '{pageSize} per page' → '10 per page'
+          * @default '{pageSize} per page'
+         */
+        "labelPageSizeOption"?: string;
+        /**
+          * Label template for the total row count display. Supports placeholder: {rowCount}.
+          * @example 'Total: {rowCount} rows' → 'Total: 254 rows'
+          * @default 'Total: {rowCount} rows'
+         */
+        "labelTotal"?: string;
+        /**
+          * Emitted when the page index changes.
+          * @bind pageIndex
+         */
+        "onPageIndexChanged"?: (event: NvPaginationtableCustomEvent<number>) => void;
+        /**
+          * Emitted when the page size changes.
+         */
+        "onPageSizeChanged"?: (event: NvPaginationtableCustomEvent<number>) => void;
+        /**
+          * Total number of pages available.
+          * @default 0
+         */
+        "pageCount"?: number;
+        /**
+          * Indicates which page of table results is currently being shown, using a zero-based index.
+          * @default 0
+         */
+        "pageIndex"?: number;
+        /**
+          * Sets how many results appear at once before moving to the next page.
+          * @default 10
+         */
+        "pageSize"?: number;
+        /**
+          * Total number of rows in the dataset.
+          * @default 0
+         */
+        "rowCount"?: number;
+    }
     interface NvPopover {
         /**
           * Disables the automatic flipping of the popover when the trigger element is out of the viewport. The popover will flip automatically by default.
@@ -7526,6 +7693,7 @@ declare namespace LocalJSX {
         "nv-notification": NvNotification;
         "nv-notification-bullet": NvNotificationBullet;
         "nv-notificationcontainer": NvNotificationcontainer;
+        "nv-paginationtable": NvPaginationtable;
         "nv-popover": NvPopover;
         "nv-row": NvRow;
         "nv-sidebar": NvSidebar;
@@ -7616,6 +7784,7 @@ declare module "@stencil/core" {
              * @experimental - Container for notifications TODO: add animations etc...
              */
             "nv-notificationcontainer": LocalJSX.NvNotificationcontainer & JSXBase.HTMLAttributes<HTMLNvNotificationcontainerElement>;
+            "nv-paginationtable": LocalJSX.NvPaginationtable & JSXBase.HTMLAttributes<HTMLNvPaginationtableElement>;
             "nv-popover": LocalJSX.NvPopover & JSXBase.HTMLAttributes<HTMLNvPopoverElement>;
             "nv-row": LocalJSX.NvRow & JSXBase.HTMLAttributes<HTMLNvRowElement>;
             /**

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

@@ -63,6 +63,12 @@ export interface ShadowRootOptions {
      * focusable part is given focus, and the shadow host is given any available `:focus` styling.
      */
     delegatesFocus?: boolean;
+    /**
+     * Sets the slot assignment mode for the shadow root. When set to `'manual'`, enables imperative
+     * slotting using the `HTMLSlotElement.assign()` method. Defaults to `'named'` for standard
+     * declarative slotting behavior.
+     */
+    slotAssignment?: 'manual' | 'named';
 }
 export interface ModeStyles {
     [modeName: string]: string | string[];
@@ -125,6 +131,9 @@ export interface AttachInternalsDecorator {
 export interface ListenDecorator {
     (eventName: string, opts?: ListenOptions): CustomMethodDecorator<any>;
 }
+export interface ResolveVarFunction {
+    <T>(variable: T): string;
+}
 export interface ListenOptions {
     /**
      * Handlers can also be registered for an event other than the host itself.
@@ -153,7 +162,9 @@ export interface StateDecorator {
     (): PropertyDecorator;
 }
 export interface WatchDecorator {
-    (propName: any): CustomMethodDecorator<(newValue?: any, oldValue?: any, propName?: any, ...args: any[]) => any | void>;
+    (propName: any, watchOptions?: {
+        immediate?: boolean;
+    }): CustomMethodDecorator<(newValue?: any, oldValue?: any, propName?: any, ...args: any[]) => any | void>;
 }
 export interface PropSerializeDecorator {
     (propName: any): CustomMethodDecorator<(newValue?: any, propName?: string, ...args: any[]) => string | null>;
@@ -208,6 +219,24 @@ export declare const AttachInternals: AttachInternalsDecorator;
  * https://stenciljs.com/docs/events#listen-decorator
  */
 export declare const Listen: ListenDecorator;
+/**
+ * The `resolveVar()` function is a compile-time utility that resolves const variables
+ * and object properties to their string literal values. This allows variables to be
+ * used in `@Listen` and `@Event` decorators instead of hardcoded strings.
+ *
+ * @example
+ * ```ts
+ * const MY_EVENT = 'myEvent';
+ * @Listen(resolveVar(MY_EVENT))
+ * ```
+ *
+ * @example
+ * ```ts
+ * const EVENTS = { MY_EVENT: 'myEvent' } as const;
+ * @Event({ eventName: resolveVar(EVENTS.MY_EVENT) })
+ * ```
+ */
+export declare const resolveVar: ResolveVarFunction;
 /**
  * The `@Method()` decorator is used to expose methods on the public API.
  * Class methods decorated with the @Method() decorator can be called directly
@@ -365,6 +394,27 @@ export declare function readTask(task: RafCallback): void;
  * Unhandled exception raised while rendering, during event handling, or lifecycles will trigger the custom event handler.
  */
 export declare const setErrorHandler: (handler: ErrorHandler) => void;
+export type TagTransformer = (tag: string) => string;
+/**
+ * Sets a tag transformer to be used when rendering your custom elements.
+ * ```ts
+ * setTagTransformer((tag) => {
+ *  if (tag.startsWith('my-')) return `new-${tag}`
+ *  return tag;
+ * });
+ * ```
+ * Will mean all your components that start with `my-` are defined instead with `new-my-` prefix.
+ *
+ * @param transformer the transformer function to use which must return a string.
+ */
+export declare function setTagTransformer(transformer: TagTransformer): void;
+/**
+ * Transforms a tag name using a transformer set via `setTagTransformer`
+ *
+ * @param tag - the tag to transform e.g. `my-tag`
+ * @returns the transformed tag e.g. `new-my-tag`
+ */
+export declare function transformTag(tag: string): string;
 /**
  * @deprecated - Use `MixedInCtor` instead:
  * ```ts
@@ -568,7 +618,7 @@ export interface FunctionalUtilities {
     map: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode) => VNode[];
 }
 export interface FunctionalComponent<T = {}> {
-    (props: T, children: VNode[], utils: FunctionalUtilities): VNode | VNode[];
+    (props: T, children: VNode[], utils: FunctionalUtilities): VNode | VNode[] | null;
 }
 /**
  * A Child VDOM node
@@ -623,6 +673,35 @@ export declare function h(sel: any, text: string): VNode;
 export declare function h(sel: any, children: Array<VNode | undefined | null>): VNode;
 export declare function h(sel: any, data: VNodeData | null, text: string): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: Array<VNode | undefined | null>): VNode;
+/**
+ * Automatic JSX runtime functions for TypeScript's react-jsx mode.
+ * These functions are called automatically by TypeScript when using "jsx": "react-jsx".
+ * @param type type of node
+ * @param props properties of node
+ * @param key optional key for the node
+ * @returns a jsx vnode
+ */
+export declare function jsx(type: any, props: any, key?: string): VNode;
+/**
+ * Automatic JSX runtime functions for TypeScript's react-jsxmode with multiple children.
+ * @param type type of node
+ * @param props properties of node
+ * @param key optional key for the node
+ * @returns a jsx vnode
+ */
+export declare function jsxs(type: any, props: any, key?: string): VNode;
+/**
+ * Automatic JSX runtime functions for TypeScript's react-jsxdev mode.
+ * These functions are called automatically by TypeScript when using "jsx": "react-jsxdev".
+ * @param type type of node
+ * @param props properties of node
+ * @param key optional key for the node
+ * @param isStaticChildren indicates if the children are static
+ * @param source source information
+ * @param self reference to the component instance
+ * @returns a jsx vnode
+ */
+export declare function jsxDEV(type: any, props: any, key?: string | number, isStaticChildren?: boolean, source?: any, self?: any): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: VNode): VNode;
 /**
  * A virtual DOM node
@@ -653,7 +732,7 @@ declare namespace LocalJSX {
 export { LocalJSX as JSX };
 export declare namespace JSXBase {
     interface IntrinsicElements {
-        slot: JSXBase.SlotAttributes;
+        slot: JSXBase.SlotAttributes<HTMLSlotElement>;
         a: JSXBase.AnchorHTMLAttributes<HTMLAnchorElement>;
         abbr: JSXBase.HTMLAttributes;
         address: JSXBase.HTMLAttributes;
@@ -823,7 +902,7 @@ export declare namespace JSXBase {
         use: JSXBase.SVGAttributes;
         view: JSXBase.SVGAttributes;
     }
-    interface SlotAttributes extends JSXAttributes {
+    interface SlotAttributes<T = HTMLSlotElement> extends JSXAttributes<T> {
         name?: string;
         slot?: string;
         onSlotchange?: (event: Event) => void;
@@ -879,6 +958,9 @@ export declare namespace JSXBase {
         popoverTargetAction?: string;
         popoverTargetElement?: Element | null;
         popoverTarget?: string;
+        command?: string;
+        commandFor?: string;
+        commandfor?: string;
     }
     interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> {
         height?: number | string;
@@ -1747,6 +1829,7 @@ export interface CustomElementsDefineOptions {
     exclude?: string[];
     resourcesUrl?: string;
     syncQueue?: boolean;
+    /** @deprecated in-favour of `setTagTransformer` and `transformTag` */
     transformTagName?: (tagName: string) => string;
     jmp?: (c: Function) => any;
     raf?: (c: FrameRequestCallback) => number;

package/dist/types/utils/dom.utils.d.ts

@@ -2,6 +2,12 @@
  * All properties that should be excluded from the deep copy of an HTML element.
  */
 export declare const excludedProps: Set<string>;
+/**
+ * Casts a node to an element, or returns null if the node is not an element.
+ * @param {ChildNode | Element | null} node - The node to cast.
+ * @returns {Element | null} - The casted element, or null if the node is not an element.
+ */
+export declare function asElement(node: Element | ChildNode | null): Element | null;
 /**
  * Deep copy an HTML element with all its attributes, properties, and child nodes.
  * This method is useful for creating a clone of an element that can be safely modified without affecting the original.

package/dist/types/utils/events.utils.d.ts

@@ -5,11 +5,11 @@ export type EventsAndListeners = [string, EventListener][];
  * @param {Element | Window | Document} target  - The target element or window to add the event listeners to.
  * @param {T} context - The class context to bind the event listeners to.
  */
-export declare function addEventListeners<T>(events: EventsAndListeners, target: Element | Window | Document, context: T): void;
+export declare function addEventListeners<T>(events: EventsAndListeners, target: Element | Window | Document | ChildNode, context: T): void;
 /**
  * Removes a set of event listeners from the given target.
  * @param {EventsAndListeners} events - The events and listeners to remove.
  * @param {Element | Window | Document} target  - The target element or window to remove the event listeners from.
  * @param {T} context - The class context to bind the event listeners to.
  */
-export declare function removeEventListeners<T>(events: EventsAndListeners, target: Element | Window | Document, context: T): void;
+export declare function removeEventListeners<T>(events: EventsAndListeners, target: Element | Window | Document | ChildNode, context: T): void;