@nova-design-system/nova-react 3.12.0 → 3.13.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,7 @@ 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 { 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 +327,13 @@ 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 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,21 @@ 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'
+    },
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
 export const NvPopover = createComponent({
     tagName: 'nv-popover',
     properties: {

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

@@ -35,6 +35,7 @@ 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 { 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 +206,10 @@ 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 NvPopoverEvents = {
     onOpenChanged: EventName<CustomEvent<boolean>>;
 };

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

@@ -35,6 +35,7 @@ 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 { 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 +208,10 @@ 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 NvPopoverEvents = {
     onOpenChanged: EventName<CustomEvent<boolean>>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-react",
-  "version": "3.12.0",
+  "version": "3.13.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",

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;