@nova-design-system/nova-react 3.29.0 → 3.31.0

package/dist/cjs/nv-sidebar.entry-C4HTjJmz.js

@@ -1,181 +0,0 @@
-'use strict';
-
-var index = require('./index-DgKzi_Pd.js');
-require('@stencil/react-output-target/runtime');
-require('react');
-require('react-dom');
-
-const nvSidebarCss = () => `nv-sidebarnavitem a,nv-sidebarnavitem a:link,nv-sidebarnavitem a:visited,nv-sidebarnavitem a:hover,nv-sidebarnavitem a:active,nv-sidebarnavsubitem a,nv-sidebarnavsubitem a:link,nv-sidebarnavsubitem a:visited,nv-sidebarnavsubitem a:hover,nv-sidebarnavsubitem a:active{color:inherit !important;text-decoration:none !important}nv-sidebar{display:flex;flex-direction:column;position:relative;height:100vh;background-color:var(--components-sidebar-background);border-right:var(--sidebar-divider-size) solid var(--components-sidebar-border);transition:width 0.3s ease;width:var(--sidebar-width)}nv-sidebar[collapsed]{width:var(--sidebar-width-collapsed)}nv-sidebar[collapsed] [data-hide-on-collapsed]{display:none !important}nv-sidebar[collapsed] .nv-sidebar-container{padding:var(--sidebar-padding-y) var(--sidebar-padding-x-collapsed)}nv-sidebar .nv-sidebar-container{display:flex;flex-direction:column;flex:1;overflow:hidden;padding:var(--sidebar-padding-y) var(--sidebar-padding-x);gap:var(--sidebar-gap-y)}nv-sidebar .nv-sidebar-toggle{position:absolute;top:var(--sidebar-collapsible-button-position-top);right:calc(-1 * var(--sidebar-collapsible-button-position-right));display:flex;align-items:center;justify-content:center;padding:var(--sidebar-collapsible-button-padding);background-color:var(--components-sidebar-background);border:1px solid var(--color-content-low-border);border-radius:var(--radius-rounded-full);cursor:pointer;transition:transform 0.2s ease;z-index:10}nv-sidebar .nv-sidebar-toggle:hover{background-color:var(--color-interaction-container-neutral-background-hover)}nv-sidebar .nv-sidebar-toggle:focus,nv-sidebar .nv-sidebar-toggle:focus-within{outline:none}nv-sidebar .nv-sidebar-toggle:focus-visible,nv-sidebar .nv-sidebar-toggle:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-sidebar .nv-sidebar-toggle nv-icon{width:var(--sidebar-collapsible-button-icon-size);height:var(--sidebar-collapsible-button-icon-size);color:var(--color-interaction-container-neutral-icon)}nv-sidebar .nv-sidebar-toggle nv-icon:hover{color:var(--color-interaction-container-neutral-icon-hover)}`;
-
-const NvSidebar = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.openChanged = index.createEvent(this, "openChanged", 3);
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * The type of sidebar behavior.
-         * - collapsible: Can be toggled open/closed
-         * - persistent: Always visible
-         */
-        this.type = 'persistent';
-        /**
-         * Whether the sidebar is currently open (only applies to collapsible type).
-         */
-        // eslint-disable-next-line @stencil-community/ban-default-true
-        this.open = true;
-        /**
-         * Determines the type of notification bullets in the sidebar.
-         * - neutral: Uses neutral colors (gray)
-         * - brand: Uses brand colors (orange/teal depending on theme)
-         */
-        this.notificationIntention = 'brand';
-        /**
-         * Determines the emphasis of notification bullets in the sidebar.
-         * - high: More prominent appearance
-         * - low: Less prominent appearance
-         */
-        this.notificationEmphasis = 'high';
-        //#endregion EVENTS
-        /****************************************************************************/
-        //#region METHODS
-        this.handleToggle = () => {
-            if (this.type === 'collapsible') {
-                // Changing open will trigger @Watch which emits the event
-                this.open = !this.open;
-            }
-        };
-        /**
-         * Sets the active state of navigation items based on activePath
-         */
-        this.setActiveNavItems = () => {
-            if (!this.activePath)
-                return;
-            // First, check all subitems to find if any matches exactly
-            const activeSubitemHrefs = new Set();
-            this.el.querySelectorAll('nv-sidebarnavsubitem').forEach(subItem => {
-                const link = subItem.querySelector('a');
-                const href = link?.getAttribute('href');
-                if (href) {
-                    const isActive = this.activePath === href;
-                    subItem.active = isActive;
-                    if (isActive) {
-                        activeSubitemHrefs.add(href);
-                    }
-                }
-            });
-            // Then, set nav items active only if:
-            // 1. Exact match with activePath AND no subitem matches
-            // 2. OR the navitem has no subitems and activePath starts with its href
-            this.el.querySelectorAll('nv-sidebarnavitem').forEach(navItem => {
-                const link = navItem.querySelector(':scope > a, :scope > .nv-sidebarnavitem-trigger a, .nv-sidebarnavitem-content > a');
-                const href = link?.getAttribute('href');
-                const hasSubitems = navItem.querySelector('nv-sidebarnavsubitem') !== null;
-                if (href) {
-                    if (hasSubitems) {
-                        // Parent with subitems: only active if exact match (not when subitem is active)
-                        navItem.active = this.activePath === href;
-                    }
-                    else {
-                        // Item without subitems: active on exact match
-                        navItem.active = this.activePath === href;
-                    }
-                }
-            });
-        };
-        this.pendingActiveUpdate = null;
-        /**
-         * Sets up the MutationObserver to watch for changes in child elements.
-         * Only triggers on new nav items being added, not on attribute changes.
-         */
-        this.setupMutationObserver = () => {
-            this.mutationObserver = new MutationObserver(mutations => {
-                // Only react to new nav items being added, ignore other mutations
-                const hasNewNavItems = mutations.some(mutation => {
-                    if (mutation.type !== 'childList')
-                        return false;
-                    return Array.from(mutation.addedNodes).some(node => {
-                        if (node.nodeType !== Node.ELEMENT_NODE)
-                            return false;
-                        const el = node;
-                        return (el.tagName.toLowerCase() === 'nv-sidebarnavitem' ||
-                            el.tagName.toLowerCase() === 'nv-sidebarnavsubitem' ||
-                            el.querySelector('nv-sidebarnavitem, nv-sidebarnavsubitem'));
-                    });
-                });
-                if (hasNewNavItems) {
-                    // Debounce to prevent multiple rapid calls
-                    if (this.pendingActiveUpdate) {
-                        clearTimeout(this.pendingActiveUpdate);
-                    }
-                    this.pendingActiveUpdate = window.setTimeout(() => {
-                        this.setActiveNavItems();
-                        this.pendingActiveUpdate = null;
-                    }, 50);
-                }
-            });
-            this.mutationObserver.observe(this.el, {
-                childList: true,
-                subtree: true,
-            });
-        };
-    }
-    handleCollapsedSideEffects(isCollapsed) {
-        if (!isCollapsed) {
-            return;
-        }
-        this.el.querySelectorAll('nv-sidebarnavitem[open]').forEach(navItem => {
-            navItem.open = false;
-        });
-    }
-    //#endregion METHODS
-    /****************************************************************************/
-    //#region WATCHERS
-    onActivePathChanged() {
-        this.setActiveNavItems();
-    }
-    onOpenChanged(newValue, oldValue) {
-        this.handleCollapsedSideEffects(this.type === 'collapsible' && !newValue);
-        // Only emit event when open state actually changes (not on re-render with same value)
-        if (this.type === 'collapsible' && newValue !== oldValue) {
-            this.openChanged.emit(newValue);
-        }
-    }
-    //#endregion WATCHERS
-    /****************************************************************************/
-    //#region LIFECYCLE
-    componentWillLoad() {
-        this.setActiveNavItems();
-        this.setupMutationObserver();
-        this.handleCollapsedSideEffects(this.type === 'collapsible' && !this.open);
-    }
-    disconnectedCallback() {
-        if (this.mutationObserver) {
-            this.mutationObserver.disconnect();
-        }
-        if (this.pendingActiveUpdate) {
-            clearTimeout(this.pendingActiveUpdate);
-        }
-    }
-    //#endregion LIFECYCLE
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        const isCollapsed = this.type === 'collapsible' && !this.open;
-        return (index.h(index.Host, { key: '7c77dc107335664b3844b38579f53c8805de09ca', role: "navigation", collapsed: isCollapsed ? true : undefined, "notification-intention": this.notificationIntention, "notification-emphasis": this.notificationEmphasis, "aria-expanded": this.type === 'collapsible' ? String(this.open) : undefined }, index.h("div", { key: '00e9958d45d311168ab3024eda4d0a45813a8152', class: "nv-sidebar-container" }, index.h("slot", { key: '047f6bda1730f65c403f6aefe52b7c06192001c3' })), this.type === 'collapsible' && (index.h("button", { key: '51174b4f74614dc1eb1bfc78aacc542d8c938a02', class: "nv-sidebar-toggle", onClick: this.handleToggle, "aria-label": this.open ? 'Collapse sidebar' : 'Expand sidebar' }, index.h("nv-icon", { key: '75fc4ce9ac319be982534d502d5c019ff7d8ebdf', name: this.open
-                ? 'layout-sidebar-left-collapse'
-                : 'layout-sidebar-right-collapse', size: "sm" })))));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "activePath": [{
-                "onActivePathChanged": 0
-            }],
-        "open": [{
-                "onOpenChanged": 0
-            }]
-    }; }
-};
-NvSidebar.style = nvSidebarCss();
-
-exports.nv_sidebar = NvSidebar;