@nova-design-system/nova-react 3.12.0 → 3.14.0-beta.0

package/dist/cjs/{timeline.animation-adf35ecb-CE6Dsdxr.js → timeline.animation-79215cd4-KteJaZPb.js}

@@ -19,5 +19,24 @@ const timeline = (...animations) => ({
         return animations.reduce((promise, animation) => promise.then(() => animation()), Promise.resolve());
     },
 });
+/**
+ * Will execute a series of animation promises in parallel.
+ * This is useful for running multiple animations simultaneously.
+ *
+ * @param {Array<() => Promise<void>>} animations - The array of animation functions.
+ * @returns {Object} - An object with a `start` method to begin the parallel animations.
+ *
+ * @example
+ * const { fadeOut } = useFade(this.ref);
+ * const { slideOut } = useSlide(this.containerRef);
+ *
+ * parallel(fadeOut, slideOut).start();
+ */
+const parallel = (...animations) => ({
+    start: () => {
+        return Promise.all(animations.map(animation => animation()));
+    },
+});
 
+exports.parallel = parallel;
 exports.timeline = timeline;

package/dist/generated/components.js

@@ -35,6 +35,8 @@ import { NvIconbutton as NvIconbuttonElement, defineCustomElement as defineNvIco
 import { NvLoader as NvLoaderElement, defineCustomElement as defineNvLoader } from "@nova-design-system/nova-webcomponents/dist/components/nv-loader.js";
 import { NvMenu as NvMenuElement, defineCustomElement as defineNvMenu } from "@nova-design-system/nova-webcomponents/dist/components/nv-menu.js";
 import { NvMenuitem as NvMenuitemElement, defineCustomElement as defineNvMenuitem } from "@nova-design-system/nova-webcomponents/dist/components/nv-menuitem.js";
+import { NvNotification as NvNotificationElement, defineCustomElement as defineNvNotification } from "@nova-design-system/nova-webcomponents/dist/components/nv-notification.js";
+import { NvNotificationcontainer as NvNotificationcontainerElement, defineCustomElement as defineNvNotificationcontainer } from "@nova-design-system/nova-webcomponents/dist/components/nv-notificationcontainer.js";
 import { NvPopover as NvPopoverElement, defineCustomElement as defineNvPopover } from "@nova-design-system/nova-webcomponents/dist/components/nv-popover.js";
 import { NvRow as NvRowElement, defineCustomElement as defineNvRow } from "@nova-design-system/nova-webcomponents/dist/components/nv-row.js";
 import { NvStack as NvStackElement, defineCustomElement as defineNvStack } from "@nova-design-system/nova-webcomponents/dist/components/nv-stack.js";
@@ -326,6 +328,20 @@ export const NvMenuitem = createComponent({
     events: { onMenuitemSelected: 'menuitemSelected' },
     defineCustomElement: defineNvMenuitem
 });
+export const NvNotification = createComponent({
+    tagName: 'nv-notification',
+    elementClass: NvNotificationElement,
+    react: React,
+    events: { onHiddenChanged: 'hiddenChanged' },
+    defineCustomElement: defineNvNotification
+});
+export const NvNotificationcontainer = createComponent({
+    tagName: 'nv-notificationcontainer',
+    elementClass: NvNotificationcontainerElement,
+    react: React,
+    events: {},
+    defineCustomElement: defineNvNotificationcontainer
+});
 export const NvPopover = createComponent({
     tagName: 'nv-popover',
     elementClass: NvPopoverElement,

package/dist/generated/components.server.js

@@ -128,7 +128,9 @@ export const NvCalendar = createComponent({
         shortcutsPlacement: 'shortcuts-placement',
         selectionType: 'selection-type',
         showActions: 'show-actions',
-        showWeekNumbers: 'show-week-numbers'
+        showWeekNumbers: 'show-week-numbers',
+        cancelLabel: 'cancel-label',
+        primaryLabel: 'primary-label'
     },
     hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
     serializeShadowRoot
@@ -646,6 +648,28 @@ export const NvMenuitem = createComponent({
     hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
     serializeShadowRoot
 });
+export const NvNotification = createComponent({
+    tagName: 'nv-notification',
+    properties: {
+        uid: 'uid',
+        feedback: 'feedback',
+        emphasis: 'emphasis',
+        heading: 'heading',
+        message: 'message',
+        icon: 'icon',
+        dismissible: 'dismissible',
+        hidden: 'hidden',
+        initiallyHidden: 'initially-hidden'
+    },
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
+export const NvNotificationcontainer = createComponent({
+    tagName: 'nv-notificationcontainer',
+    properties: { position: 'position' },
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
 export const NvPopover = createComponent({
     tagName: 'nv-popover',
     properties: {

package/dist/index.js

@@ -1,3 +1,4 @@
 export * from './generated/components';
 export * from '@nova-design-system/nova-webcomponents/constants';
 export { defineCustomElements } from '@nova-design-system/nova-webcomponents/loader';
+export { useNotifications, NotificationProvider, } from './providers/NotificationProvider';

package/dist/providers/NotificationProvider.js

@@ -0,0 +1,83 @@
+import React, { createContext, useContext, useState, useCallback, createRef, useEffect, useRef, } from 'react';
+import { createPortal } from 'react-dom';
+import { NvNotificationcontainer, NvNotification, NvButton, } from '../generated/components';
+const NotificationContext = createContext(null);
+const DEFAULT_POSITION = 'top-right';
+const DEFAULT_MAX_NOTIFICATIONS = 50;
+const generateId = () => {
+    return `notification-${Date.now()}-${Math.random()
+        .toString(36)
+        .substr(2, 9)}`;
+};
+export const NotificationProvider = ({ children, position = DEFAULT_POSITION, maxNotifications = DEFAULT_MAX_NOTIFICATIONS, className, }) => {
+    const [notifications, setNotifications] = useState([]);
+    const notificationsRef = useRef([]);
+    useEffect(() => {
+        notificationsRef.current = notifications;
+    }, [notifications]);
+    const show = useCallback((options) => {
+        const id = options.id || generateId();
+        const ref = createRef();
+        const notification = {
+            id,
+            heading: options.heading,
+            message: options.message,
+            dismissible: options.dismissible ?? true,
+            emphasis: options.emphasis ?? 'medium',
+            feedback: options.feedback ?? 'information',
+            icon: options.icon,
+            actions: options.actions ?? [],
+            actionSlot: options.actionSlot,
+            createdAt: Date.now(),
+            ref,
+        };
+        setNotifications((prev) => {
+            const newNotifications = [notification, ...prev];
+            if (newNotifications.length > maxNotifications) {
+                return newNotifications.slice(0, maxNotifications);
+            }
+            return newNotifications;
+        });
+        setTimeout(() => {
+            notification.ref.current?.show();
+        }, 0);
+        return id;
+    }, [maxNotifications]);
+    const dismiss = useCallback((id) => {
+        const n = notificationsRef.current.find((item) => item.id === id);
+        n?.ref.current?.dismiss();
+    }, []);
+    const remove = useCallback((id) => {
+        setNotifications((prev) => prev.filter((notification) => notification.id !== id));
+    }, []);
+    const removeAll = useCallback(() => {
+        setNotifications([]);
+    }, []);
+    const handleNotificationClose = useCallback((id) => {
+        remove(id);
+    }, [remove]);
+    const contextValue = {
+        notifications,
+        show,
+        dismiss,
+        remove,
+        removeAll,
+    };
+    return (React.createElement(NotificationContext.Provider, { value: contextValue },
+        children,
+        createPortal(React.createElement(NvNotificationcontainer, { position: position, className: className, "data-testid": "notification-container" }, notifications.map((notification) => (React.createElement(NvNotification, { key: notification.id, heading: notification.heading, message: notification.message, dismissible: notification.dismissible, emphasis: notification.emphasis, feedback: notification.feedback, icon: notification.icon, onHiddenChanged: (event) => {
+                if (event.detail) {
+                    handleNotificationClose(notification.id);
+                }
+            }, initiallyHidden: true, ref: notification.ref }, (Boolean(notification.actionSlot) ||
+            Boolean(notification.actions.length)) && (React.createElement("div", { slot: "actions" },
+            notification.actions.map((action) => (React.createElement(NvButton, { key: action.label, emphasis: "low", size: "md", onClick: action.onClick }, action.label))),
+            notification.actionSlot)))))), document.body)));
+};
+export const useNotifications = () => {
+    const context = useContext(NotificationContext);
+    if (!context) {
+        throw new Error('useNotifications must be used within a NotificationProvider');
+    }
+    return context;
+};

package/dist/types/generated/components.d.ts

@@ -35,6 +35,8 @@ import { NvIconbutton as NvIconbuttonElement } from "@nova-design-system/nova-we
 import { NvLoader as NvLoaderElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-loader.js";
 import { NvMenu as NvMenuElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-menu.js";
 import { NvMenuitem as NvMenuitemElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-menuitem.js";
+import { NvNotification as NvNotificationElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-notification.js";
+import { NvNotificationcontainer as NvNotificationcontainerElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-notificationcontainer.js";
 import { NvPopover as NvPopoverElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-popover.js";
 import { NvRow as NvRowElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-row.js";
 import { NvStack as NvStackElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-stack.js";
@@ -205,6 +207,12 @@ export type NvMenuitemEvents = {
     }>>;
 };
 export declare const NvMenuitem: StencilReactComponent<NvMenuitemElement, NvMenuitemEvents>;
+export type NvNotificationEvents = {
+    onHiddenChanged: EventName<CustomEvent<boolean>>;
+};
+export declare const NvNotification: StencilReactComponent<NvNotificationElement, NvNotificationEvents>;
+export type NvNotificationcontainerEvents = NonNullable<unknown>;
+export declare const NvNotificationcontainer: StencilReactComponent<NvNotificationcontainerElement, NvNotificationcontainerEvents>;
 export type NvPopoverEvents = {
     onOpenChanged: EventName<CustomEvent<boolean>>;
 };

package/dist/types/generated/components.server.d.ts

@@ -35,6 +35,8 @@ import { NvIconbutton as NvIconbuttonElement } from "@nova-design-system/nova-we
 import { NvLoader as NvLoaderElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-loader.js";
 import { NvMenu as NvMenuElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-menu.js";
 import { NvMenuitem as NvMenuitemElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-menuitem.js";
+import { NvNotification as NvNotificationElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-notification.js";
+import { NvNotificationcontainer as NvNotificationcontainerElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-notificationcontainer.js";
 import { NvPopover as NvPopoverElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-popover.js";
 import { NvRow as NvRowElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-row.js";
 import { NvStack as NvStackElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-stack.js";
@@ -207,6 +209,12 @@ export type NvMenuitemEvents = {
     }>>;
 };
 export declare const NvMenuitem: StencilReactComponent<NvMenuitemElement, NvMenuitemEvents>;
+export type NvNotificationEvents = {
+    onHiddenChanged: EventName<CustomEvent<boolean>>;
+};
+export declare const NvNotification: StencilReactComponent<NvNotificationElement, NvNotificationEvents>;
+export type NvNotificationcontainerEvents = NonNullable<unknown>;
+export declare const NvNotificationcontainer: StencilReactComponent<NvNotificationcontainerElement, NvNotificationcontainerEvents>;
 export type NvPopoverEvents = {
     onOpenChanged: EventName<CustomEvent<boolean>>;
 };

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
 export * from './generated/components';
 export * from '@nova-design-system/nova-webcomponents/constants';
 export { defineCustomElements } from '@nova-design-system/nova-webcomponents/loader';
+export { useNotifications, NotificationProvider, type NotificationOptions, type NotificationContextValue, type NotificationProviderProps, type Notification, } from './providers/NotificationProvider';

package/dist/types/providers/NotificationProvider.d.ts

@@ -0,0 +1,36 @@
+import React, { ReactNode } from 'react';
+import { type NotificationPosition, type NotificationEmphasis, FeedbackColors } from '../index';
+export interface NotificationAction {
+    label: string;
+    onClick: () => void;
+}
+export interface NotificationOptions {
+    id?: string;
+    heading?: string;
+    message?: string;
+    dismissible?: boolean;
+    emphasis?: `${NotificationEmphasis}`;
+    feedback?: `${FeedbackColors}`;
+    icon?: string;
+    actions?: NotificationAction[];
+    actionSlot?: React.ReactElement;
+}
+export interface Notification extends NotificationOptions {
+    createdAt: number;
+    ref: React.RefObject<HTMLNvNotificationElement>;
+}
+export interface NotificationContextValue {
+    notifications: Notification[];
+    show: (options: NotificationOptions) => string;
+    dismiss: (id: string) => void;
+    remove: (id: string) => void;
+    removeAll: () => void;
+}
+export interface NotificationProviderProps {
+    children: ReactNode;
+    position?: `${NotificationPosition}`;
+    maxNotifications?: number;
+    className?: string;
+}
+export declare const NotificationProvider: React.FC<NotificationProviderProps>;
+export declare const useNotifications: () => NotificationContextValue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-react",
-  "version": "3.12.0",
+  "version": "3.14.0-beta.0",
   "description": "Nova is a design system created by Elia Group to empower creators to efficiently build solutions that people love to use.",
   "author": "Elia Group",
   "homepage": "https://nova.eliagroup.io",
@@ -27,7 +27,10 @@
   "scripts": {
     "build": "npm run build:cjs && npm run tsc",
     "build:cjs": "rollup -c",
+    "build:watch": "npm run build:cjs:watch & npm run tsc:watch",
+    "build:cjs:watch": "rollup -c --watch",
     "tsc": "tsc -p . --outDir ./dist --declarationDir ./dist/types --declaration true",
+    "tsc:watch": "tsc -p . --outDir ./dist --declarationDir ./dist/types --declaration true --watch",
     "storybook": "storybook dev -p 6006",
     "storybook.build": "storybook build -o ../../storybook-static/react",
     "clean": "rimraf dist lib/generated",

package/dist/cjs/collapse.animation-16e3af45-CChx_tQJ.js

@@ -1,84 +0,0 @@
-'use strict';
-
-var stylefire_es74da334a = require('./stylefire.es-74da334a-y0piPjlz.js');
-
-const useCollapse = (node, { duration } = { duration: 200 }) => {
-    const nodeStyler = stylefire_es74da334a.index(node);
-    /**
-     * Will set the overflow to hidden, and animate the max height to 0. Make sure
-     * the element has no border or y padding set, otherwise the animation will
-     * not work as expected.
-     */
-    function collapse() {
-        return new Promise(resolve => {
-            const height = node.getBoundingClientRect().height;
-            nodeStyler.set({ overflow: 'hidden' });
-            stylefire_es74da334a.animate({
-                from: height,
-                to: 0,
-                duration,
-                onUpdate: value => {
-                    nodeStyler.set({
-                        maxHeight: value,
-                    });
-                },
-                onComplete: () => {
-                    resolve();
-                },
-            });
-        });
-    }
-    /**
-     * Apply the collapsed styles without animating, useful when initial state
-     * is collapsed.
-     */
-    function setCollapsed() {
-        node.style.maxHeight = '0';
-        node.style.overflow = 'hidden';
-    }
-    /**
-     * Apply the expanded styles without animating, useful when initial state
-     * is expanded.
-     */
-    function setExpanded() {
-        node.style.maxHeight = '';
-        node.style.overflow = '';
-    }
-    /**
-     * Will set the overflow to hidden, and animate the max height to the value
-     * of the scrollHeight. Make sure the element has no border or y padding set,
-     * otherwise the animation will not work as expected. Once complete, the
-     * max-height and overflow style properties will be removed.
-     */
-    function expand() {
-        return new Promise(resolve => {
-            const scrollHeight = node.scrollHeight;
-            nodeStyler.set({
-                overflow: 'hidden',
-            });
-            stylefire_es74da334a.animate({
-                from: 0,
-                to: scrollHeight,
-                duration,
-                onUpdate: value => {
-                    nodeStyler.set({
-                        maxHeight: value,
-                    });
-                },
-                onComplete: () => {
-                    node.style.removeProperty('max-height');
-                    node.style.removeProperty('overflow');
-                    resolve();
-                },
-            });
-        });
-    }
-    return {
-        collapse,
-        expand,
-        setCollapsed,
-        setExpanded,
-    };
-};
-
-exports.useCollapse = useCollapse;

package/dist/cjs/fade.animation-71e8e34c-BAw_TYsB.js

@@ -1,68 +0,0 @@
-'use strict';
-
-var stylefire_es74da334a = require('./stylefire.es-74da334a-y0piPjlz.js');
-
-const useFade = (node, { duration } = { duration: 200 }) => {
-    const nodeStyler = stylefire_es74da334a.index(node);
-    /**
-     * Will animate the opacity to 1, and removes the opacity style attribute once
-     * complete.
-     */
-    function fadeIn() {
-        return new Promise(resolve => {
-            stylefire_es74da334a.animate({
-                from: { opacity: 0 },
-                to: { opacity: 1 },
-                duration,
-                onUpdate(latest) {
-                    nodeStyler.set({ opacity: latest.opacity });
-                },
-                onComplete() {
-                    resolve();
-                    node.style.removeProperty('opacity');
-                },
-            });
-        });
-    }
-    /**
-     * Applies the fadeOut styles without animating, useful when initial state
-     * is hidden.
-     */
-    function setFadeOut() {
-        node.style.opacity = '0';
-    }
-    /**
-     * Applies the fadeIn styles without animating, useful when initial state
-     * is visible.
-     */
-    function setFadeIn() {
-        node.style.opacity = '1';
-    }
-    /**
-     * Will animate the opacity to 0, once complete, the opacity style attribute
-     * will stay on the element.
-     */
-    function fadeOut() {
-        return new Promise(resolve => {
-            stylefire_es74da334a.animate({
-                from: { opacity: 1 },
-                to: { opacity: 0 },
-                duration,
-                onUpdate(latest) {
-                    nodeStyler.set({ opacity: latest.opacity });
-                },
-                onComplete() {
-                    resolve();
-                },
-            });
-        });
-    }
-    return {
-        fadeIn,
-        fadeOut,
-        setFadeOut,
-        setFadeIn,
-    };
-};
-
-exports.useFade = useFade;

package/dist/cjs/nv-accordion.entry-hi3M0POV.js

@@ -1,164 +0,0 @@
-'use strict';
-
-var index = require('./index-jBgPO7HC.js');
-require('react');
-
-const nvAccordionCss = "nv-accordion{display:block;border:var(--spacing-px) solid var(--color-content-low-border);border-radius:var(--radius-rounded-lg)}nv-accordion .nv-accordion__footer{padding:var(--spacing-3);background:var(--color-level-05-background);border-radius:0 0 var(--radius-rounded-lg) var(--radius-rounded-lg);margin-top:calc(var(--spacing-px) * -1);border-top:var(--spacing-px) solid var(--color-content-low-border)}nv-accordion .nv-accordion__footer:empty{display:none}";
-const NvAccordionStyle0 = nvAccordionCss;
-
-const NvAccordion = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.openChanged = index.createEvent(this, "openChanged");
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Data to display as a list of items (title, subtitle, content).
-         */
-        this.data = [];
-        /**
-         * Expansion mode: 'accordion' (single open) or 'multi' (multiple open)
-         */
-        this.mode = 'accordion';
-        //#endregion PROPERTIES
-        /****************************************************************************/
-        //#region STATE
-        /**
-         * Internal index of open items (not exposed)
-         */
-        this.internalOpenIndexes = [];
-    }
-    //#endregion EVENTS
-    /****************************************************************************/
-    //#region METHODS
-    /**
-     * Opens an item by its index (Public API)
-     * @param {number} index Index of the item to open
-     */
-    async open(index) {
-        this.toggleItem(index, true);
-    }
-    /**
-     * Closes an item by its index (Public API)
-     * @param {number} index Index of the item to close
-     */
-    async close(index) {
-        this.toggleItem(index, false);
-    }
-    /**
-     * Toggles an item's state (internal)
-     * @param {number} index Item index
-     * @param {boolean} [forceOpen] Force open (true) or close (false)
-     */
-    toggleItem(index, forceOpen) {
-        let openIndexes = this.openIndexes !== undefined
-            ? [...this.openIndexes]
-            : [...(this.internalOpenIndexes || [])];
-        const isOpen = openIndexes.includes(index);
-        if (this.mode === 'accordion') {
-            openIndexes = forceOpen === false || isOpen ? [] : [index];
-        }
-        else {
-            if (forceOpen === false) {
-                openIndexes = openIndexes.filter(i => i !== index);
-            }
-            else if (!isOpen) {
-                openIndexes.push(index);
-            }
-        }
-        this.internalOpenIndexes = openIndexes;
-        this.openChanged.emit({ openIndexes });
-        if (this.openIndexes !== undefined) {
-            this.openIndexes =
-                this.mode === 'accordion'
-                    ? [openIndexes[0]].filter(x => x !== undefined)
-                    : [...openIndexes];
-        }
-        // Update child elements state - for both data and slot usage
-        this.updateChildrenState();
-    }
-    /**
-     * Updates the open state of child elements based on internalOpenIndexes
-     */
-    async updateChildrenState() {
-        // Force a re-render by updating the state
-        this.internalOpenIndexes = [...(this.internalOpenIndexes || [])];
-    }
-    /**
-     * Listens to itemToggle events from nv-accordion-item elements
-     * @param {CustomEvent<boolean>} event Event emitted by nv-accordion-item
-     */
-    onItemToggle(event) {
-        // Find the index of the item that emitted the event
-        const items = Array.from(this.el.querySelectorAll('nv-accordion-item'));
-        const targetItem = event.target;
-        const index = items.indexOf(targetItem);
-        if (index !== -1) {
-            // If the event comes from an item that is opening, handle accordion mode
-            if (event.detail === true) {
-                if (this.mode === 'accordion') {
-                    // Close all other items
-                    items.forEach((item, i) => {
-                        if (i !== index && item.open) {
-                            item.open = false;
-                        }
-                    });
-                    this.internalOpenIndexes = [index];
-                }
-                else {
-                    // Add index to internalOpenIndexes if not already present
-                    if (!this.internalOpenIndexes.includes(index)) {
-                        this.internalOpenIndexes = [...this.internalOpenIndexes, index];
-                    }
-                }
-            }
-            else {
-                // If the item is closing, remove it from internalOpenIndexes
-                this.internalOpenIndexes = this.internalOpenIndexes.filter(i => i !== index);
-            }
-            // Emit openChanged event
-            this.openChanged.emit({ openIndexes: this.internalOpenIndexes });
-            if (this.openIndexes !== undefined) {
-                this.openIndexes =
-                    this.mode === 'accordion'
-                        ? [this.internalOpenIndexes[0]].filter(x => x !== undefined)
-                        : [...this.internalOpenIndexes];
-            }
-        }
-    }
-    //#endregion METHODS
-    /****************************************************************************/
-    //#region WATCHERS
-    //#endregion WATCHERS
-    /****************************************************************************/
-    //#region LIFECYCLE
-    componentWillLoad() {
-        if (this.openIndexes !== undefined) {
-            this.internalOpenIndexes = [...this.openIndexes];
-        }
-    }
-    componentDidLoad() {
-        // If using direct child elements, initialize their state
-        if (!this.data || this.data.length === 0) {
-            this.updateChildrenState();
-        }
-    }
-    componentWillUpdate() {
-        if (this.openIndexes !== undefined) {
-            this.internalOpenIndexes = [...this.openIndexes];
-        }
-    }
-    //#endregion LIFECYCLE
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        return (index.h(index.Host, { key: 'a6cb21b274024a00e60e0d0db780f25fab6e5bc2', role: "list", class: "nv-accordion" }, this.data && this.data.length > 0 ? (this.data.map((item, i) => {
-            var _a;
-            return (index.h("nv-accordion-item", { key: (_a = item.id) !== null && _a !== void 0 ? _a : i, itemTitle: item.title, disabled: item.disabled, open: (this.internalOpenIndexes || []).includes(i) }, item.subtitle ? (index.h("div", { slot: "header" }, index.h("div", { class: "nv-accordion-item__header-content" }, index.h("span", { class: "nv-accordion-item__title" }, item.title), index.h("span", { class: "nv-accordion-item__subtitle" }, item.subtitle)))) : null, index.h("div", { slot: "content" }, item.content), item.footer && index.h("div", { slot: "footer" }, item.footer)));
-        })) : (index.h("slot", null))));
-    }
-    get el() { return index.getElement(this); }
-};
-NvAccordion.style = NvAccordionStyle0;
-
-exports.nv_accordion = NvAccordion;