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

package/dist/components/nv-sidebarnavitem.js

@@ -1,336 +1 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-C63Xpg9a.js';
-import { d as defineCustomElement$3 } from './p-nfYynlVq.js';
-import { d as defineCustomElement$2 } from './p-tyaJ-nGV.js';
-
-const nvSidebarnavitemCss = "nv-sidebarnavitem{display:flex;flex-direction:column;gap:0}nv-sidebarnavitem .nv-sidebarnavitem-trigger{display:flex;align-items:center;gap:var(--sidebar-item-gap-x);padding:var(--sidebar-item-padding-y) var(--sidebar-item-padding-x);border-radius:var(--sidebar-item-radius);cursor:pointer;transition:all 0.15s ease;font-size:var(--sidebar-item-font-size);font-weight:var(--font-weight-medium-emphasis);color:var(--color-content-low-text);background:var(--components-sidebar-background);text-decoration:none;--nv-component-background:var(--components-sidebar-background);--nv-sidebarnavitem-background:var(--components-sidebar-background)}nv-sidebarnavitem .nv-sidebarnavitem-trigger:hover{background-color:var(--color-interaction-container-neutral-background-hover);color:var(--color-content-medium-text);--nv-component-background:var(--color-interaction-container-neutral-background-hover);--nv-sidebarnavitem-background:var(--color-interaction-container-neutral-background-hover)}nv-sidebarnavitem .nv-sidebarnavitem-trigger:focus,nv-sidebarnavitem .nv-sidebarnavitem-trigger:focus-within{outline:none}nv-sidebarnavitem .nv-sidebarnavitem-trigger:focus-visible,nv-sidebarnavitem .nv-sidebarnavitem-trigger:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-sidebarnavitem[active] .nv-sidebarnavitem-trigger{background-color:var(--color-interaction-container-neutral-background-active);color:var(--color-interaction-container-neutral-text-active);font-weight:var(--font-weight-medium-emphasis);--nv-component-background:var(--color-interaction-container-neutral-background-active);--nv-sidebarnavitem-background:var(--color-interaction-container-neutral-background-active)}nv-sidebarnavitem .nv-sidebarnavitem-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit;width:var(--sidebar-item-icon-size);height:var(--sidebar-item-icon-size);position:relative}nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-icon{overflow:visible;margin:0;justify-content:center}nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-icon nv-notification-bullet{position:absolute;transform:translate(50%, -50%);z-index:1;--sidebar-notification-bullet-size-reduced:calc(\n    var(--sidebar-item-icon-size) * 0.4\n  )}nv-sidebarnavitem .nv-sidebarnavitem-content{flex:1;display:flex;align-items:center}nv-sidebarnavitem .nv-sidebarnavitem-content a{color:inherit !important;text-decoration:none !important;font-weight:var(--font-weight-medium-emphasis) !important;flex:1}nv-sidebarnavitem .nv-sidebarnavitem-trailing{display:flex;align-items:center;gap:var(--spacing-2);margin-left:auto}nv-sidebarnavitem .nv-sidebarnavitem-chevron{transition:transform 0.2s ease;color:inherit}nv-sidebarnavitem[open] .nv-sidebarnavitem-chevron{transform:rotate(180deg)}nv-sidebarnavitem .nv-sidebarnavitem-subitems{display:flex;flex-direction:column;gap:0;max-height:0;overflow:hidden;opacity:0;transition:max-height 0.3s ease, opacity 0.2s ease;padding-left:0}nv-sidebarnavitem[open] .nv-sidebarnavitem-subitems{opacity:1;margin-top:var(--spacing-1)}nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-trigger{justify-content:center;gap:0;padding:var(--sidebar-item-padding-y-collapsed) var(--sidebar-item-padding-x-collapsed)}nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-content{display:none}nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-trailing,nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-chevron{display:none}";
-
-const NvSidebarnavitem$1 = /*@__PURE__*/ proxyCustomElement(class NvSidebarnavitem extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        /**
-         * Whether this item represents the active/current page.
-         * Can be set automatically when a sub-item becomes active.
-         */
-        this.active = false;
-        /**
-         * Whether this item can be collapsed/expanded (has sub-items).
-         */
-        this.collapsible = false;
-        /**
-         * Whether the collapsible item is currently open (showing sub-items).
-         */
-        this.open = false;
-        //#endregion PROPERTIES
-        /****************************************************************************/
-        //#region STATE
-        this.hasSubitems = false;
-        this.isSidebarCollapsed = false;
-        this.wasActiveFromSubitem = false; // Track if active was set by subitem logic
-        //#endregion STATE
-        /****************************************************************************/
-        //#region METHODS
-        this.handleToggle = (event) => {
-            // Ignore clicks that originated from subitems (they bubble up but shouldn't toggle)
-            const target = event.target;
-            if (target.closest('nv-sidebarnavsubitem')) {
-                return; // Let the subitem's link handle navigation normally
-            }
-            // In collapsed sidebar mode, navigate to the main link instead of toggling
-            if (this.isSidebarCollapsed) {
-                // Find the first link that is NOT inside subitems
-                const link = this.el.querySelector('.nv-sidebarnavitem-content a, :scope > a');
-                if (link?.href) {
-                    // Check if click was directly on the link - if so, let it handle naturally
-                    if (target.closest('a')) {
-                        return;
-                    }
-                    // Trigger navigation by clicking the link programmatically
-                    link.click();
-                }
-                return;
-            }
-            // Only handle toggle for collapsible items when sidebar is expanded
-            if (this.collapsible) {
-                event.preventDefault();
-                event.stopPropagation();
-                this.open = !this.open;
-            }
-            // For non-collapsible items in expanded mode, let the link handle the navigation
-            // Don't prevent default or stop propagation - allow the link to work normally
-        };
-        this.isAnimating = false;
-        this.hasInitializedHeight = false;
-        /** Tracks the last open state that was animated to, to prevent redundant animations */
-        this.lastAnimatedOpenState = null;
-        this.updateSubitemsHeight = (force = false) => {
-            if (!this.subitemsRef)
-                return;
-            // Skip animation if we're already in the target state (prevents animation on active change)
-            // Only animate if:
-            // 1. forced (explicit toggle by user via @Watch)
-            // 2. OR this is the first animation (lastAnimatedOpenState is null)
-            // 3. OR the open state has actually changed since last animation
-            if (!force &&
-                this.lastAnimatedOpenState !== null &&
-                this.lastAnimatedOpenState === this.open) {
-                return;
-            }
-            // Don't re-animate if already animating and not forced
-            if (this.isAnimating && !force) {
-                return;
-            }
-            this.isAnimating = true;
-            this.lastAnimatedOpenState = this.open;
-            if (this.open) {
-                // Calculate real height and animate to it
-                this.subitemsRef.style.transition = 'none';
-                this.subitemsRef.style.maxHeight = '0px';
-                requestAnimationFrame(() => {
-                    if (this.subitemsRef) {
-                        this.subitemsRef.style.transition =
-                            'max-height 0.3s ease, opacity 0.2s ease';
-                        this.subitemsRef.style.maxHeight =
-                            this.subitemsRef.scrollHeight + 'px';
-                        // Reset animation flag after animation completes
-                        setTimeout(() => {
-                            this.isAnimating = false;
-                        }, 300); // Match animation duration
-                    }
-                });
-            }
-            else {
-                // Animate to 0
-                this.subitemsRef.style.transition = 'none';
-                this.subitemsRef.style.maxHeight = this.subitemsRef.scrollHeight + 'px';
-                requestAnimationFrame(() => {
-                    if (this.subitemsRef) {
-                        this.subitemsRef.style.transition =
-                            'max-height 0.3s ease, opacity 0.2s ease';
-                        this.subitemsRef.style.maxHeight = '0px';
-                        // Reset animation flag after animation completes
-                        setTimeout(() => {
-                            this.isAnimating = false;
-                        }, 300); // Match animation duration
-                    }
-                });
-            }
-        };
-        this.checkSidebarCollapsed = () => {
-            const sidebar = this.el.closest('nv-sidebar');
-            const wasCollapsed = this.isSidebarCollapsed;
-            this.isSidebarCollapsed = sidebar?.hasAttribute('collapsed') ?? false;
-            // When sidebar collapse state changes, update active state based on subitems
-            if (wasCollapsed !== this.isSidebarCollapsed) {
-                this.updateActiveFromSubitems();
-            }
-        };
-        /**
-         * Checks if any sub-item is active and updates parent active state.
-         * - When sidebar is collapsed: if a sub-item is active, parent should be active
-         * - When sidebar is expanded: if a sub-item is active AND parent is not open, parent should be active
-         *   (because sub-items are hidden, we need to indicate the parent contains an active child)
-         */
-        this.updateActiveFromSubitems = () => {
-            if (!this.hasSubitems)
-                return;
-            // Find all sub-items
-            const subItems = Array.from(this.el.querySelectorAll('nv-sidebarnavsubitem'));
-            // Check if any sub-item is active
-            const hasActiveSubitem = subItems.some(subItem => subItem.active);
-            if (this.isSidebarCollapsed) {
-                // When sidebar is collapsed AND a sub-item is active, make parent active
-                if (hasActiveSubitem) {
-                    this.active = true;
-                    this.wasActiveFromSubitem = true;
-                }
-                else {
-                    // When collapsed and no sub-item is active, remove active state only if we set it
-                    if (this.wasActiveFromSubitem) {
-                        this.active = false;
-                        this.wasActiveFromSubitem = false;
-                    }
-                }
-            }
-            else {
-                // When sidebar is expanded
-                if (hasActiveSubitem && !this.open) {
-                    // If a sub-item is active AND parent is not open (sub-items hidden),
-                    // make parent active to indicate it contains an active child
-                    this.active = true;
-                    this.wasActiveFromSubitem = true;
-                }
-                else if (hasActiveSubitem && this.open) {
-                    // If a sub-item is active BUT parent is open (sub-items visible),
-                    // remove active state from parent (only sub-item should be active)
-                    if (this.wasActiveFromSubitem) {
-                        this.active = false;
-                        this.wasActiveFromSubitem = false;
-                    }
-                }
-                else {
-                    // No active sub-item, remove active state if we set it
-                    if (this.wasActiveFromSubitem) {
-                        this.active = false;
-                        this.wasActiveFromSubitem = false;
-                    }
-                }
-                // Note: activePath logic in nv-sidebar can also manage parent active state
-                // (when parent href matches activePath exactly)
-            }
-        };
-    }
-    //#endregion METHODS
-    /****************************************************************************/
-    //#region LIFECYCLE
-    componentWillLoad() {
-        // Check if there are sub-items in any slot
-        const subItems = Array.from(this.el.children).filter(child => child.tagName.toLowerCase() === 'nv-sidebarnavsubitem');
-        this.hasSubitems = subItems.length > 0;
-        // Move sub-items to the subitems slot
-        if (this.hasSubitems) {
-            subItems.forEach(item => {
-                item.setAttribute('slot', 'subitems');
-            });
-        }
-        // Check sidebar collapsed state
-        this.checkSidebarCollapsed();
-        // Watch for sidebar state changes
-        const sidebar = this.el.closest('nv-sidebar');
-        if (sidebar) {
-            this.mutationObserver = new MutationObserver(() => {
-                this.checkSidebarCollapsed();
-            });
-            this.mutationObserver.observe(sidebar, {
-                attributes: true,
-                attributeFilter: ['collapsed'],
-            });
-        }
-        // Watch for sub-items active state changes
-        if (this.hasSubitems) {
-            // Observe the subitems container for changes (including new sub-items being added)
-            // Using subtree: true to catch all attribute changes in descendants
-            const subitemsContainer = this.el.querySelector('.nv-sidebarnavitem-subitems');
-            if (subitemsContainer) {
-                this.subitemsMutationObserver = new MutationObserver(() => {
-                    this.updateActiveFromSubitems();
-                });
-                // Observe the container for child list changes and attribute changes in descendants
-                this.subitemsMutationObserver.observe(subitemsContainer, {
-                    childList: true,
-                    subtree: true,
-                    attributes: true,
-                    attributeFilter: ['active'],
-                });
-            }
-            else {
-                // If container doesn't exist yet (not collapsible or not rendered), observe the element itself
-                // This handles cases where sub-items are direct children
-                this.subitemsMutationObserver = new MutationObserver(() => {
-                    this.updateActiveFromSubitems();
-                });
-                this.subitemsMutationObserver.observe(this.el, {
-                    childList: true,
-                    subtree: true,
-                    attributes: true,
-                    attributeFilter: ['active'],
-                });
-            }
-        }
-        // Initial check for active subitems
-        this.updateActiveFromSubitems();
-    }
-    disconnectedCallback() {
-        if (this.mutationObserver) {
-            this.mutationObserver.disconnect();
-        }
-        if (this.subitemsMutationObserver) {
-            this.subitemsMutationObserver.disconnect();
-        }
-    }
-    //#endregion LIFECYCLE
-    /****************************************************************************/
-    //#region WATCHERS
-    onOpenChanged(newValue, oldValue) {
-        // Only animate if the value actually changed (prevents false triggers from React re-renders)
-        if (newValue === oldValue) {
-            return;
-        }
-        // Force update when open state changes (user clicked toggle)
-        this.updateSubitemsHeight(true);
-        // Update active state based on subitems when open state changes
-        this.updateActiveFromSubitems();
-    }
-    //#endregion WATCHERS
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        const showNotificationBullet = this.notificationCount !== undefined && this.notificationCount > 0;
-        const notificationSize = this.isSidebarCollapsed ? 'reduced' : 'default';
-        return (h(Host, { key: '7a3523c68080b90ef262a2fa3fa63f1f34baaaf1', role: "listitem" }, h("div", { key: '21abd8cf4e5d4a368b25db79306cb0ac747edfce', class: "nv-sidebarnavitem-trigger", onClick: this.handleToggle, "aria-expanded": this.collapsible ? String(this.open) : undefined, "aria-current": this.active && !this.collapsible ? 'page' : undefined }, this.icon && (h("div", { key: '8255f2f75b751e5005b4bbb7178e553123c7c109', class: "nv-sidebarnavitem-icon" }, h("nv-icon", { key: '5396567c08fc46084f085b544aeee3f874b7b439', name: this.icon, size: "md" }), showNotificationBullet && this.isSidebarCollapsed && (h("nv-notification-bullet", { key: '63dfbd2a986124a9c1ba1741e4d1079ec2b38a18', count: this.notificationCount, size: notificationSize, contrastingBorder: true })))), h("div", { key: 'a4d8df28b532018d6961d6d779d77ba88bbea756', class: "nv-sidebarnavitem-content" }, h("slot", { key: '7394c3534de567f9230ff872b57b4211939bc142' })), h("div", { key: 'c8f8451e9ebc42e6ee16407a5ba9c6f6c32f4a66', class: "nv-sidebarnavitem-trailing" }, h("slot", { key: '2e901538498c62fe5a5bc21c76c66b493c215e32', name: "trailing" }), showNotificationBullet && !this.isSidebarCollapsed && (h("nv-notification-bullet", { key: '9a7c172f0b7dbf78068135344e469d261b80d368', count: this.notificationCount, size: notificationSize })), this.collapsible && (h("nv-icon", { key: 'f1caa3750edb35376d8b45121ffb443b033735d4', name: "chevron-down", size: "sm", class: "nv-sidebarnavitem-chevron" })))), this.collapsible && this.hasSubitems && (h("div", { key: '4b141fd9639afd78351b01df146866d4d091381f', class: "nv-sidebarnavitem-subitems", ref: el => {
-                // Only update ref and initialize if element changed or not yet initialized
-                if (el !== this.subitemsRef) {
-                    this.subitemsRef = el;
-                    if (el && !this.hasInitializedHeight) {
-                        // Initialize height only on first mount, not on re-renders
-                        this.hasInitializedHeight = true;
-                        requestAnimationFrame(() => {
-                            // Only animate if item is open, otherwise it will animate when opened
-                            if (this.open) {
-                                this.updateSubitemsHeight();
-                            }
-                        });
-                    }
-                }
-            } }, h("slot", { key: '6a38e07d0559b6eaf2fafb4c9928047a9cfd19b4', name: "subitems" })))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "open": ["onOpenChanged"]
-    }; }
-    static get style() { return nvSidebarnavitemCss; }
-}, [260, "nv-sidebarnavitem", {
-        "icon": [513],
-        "active": [1540],
-        "collapsible": [516],
-        "open": [1540],
-        "notificationCount": [514, "notification-count"],
-        "hasSubitems": [32],
-        "isSidebarCollapsed": [32]
-    }, undefined, {
-        "open": ["onOpenChanged"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["nv-sidebarnavitem", "nv-icon", "nv-notification-bullet"];
-    components.forEach(tagName => { switch (tagName) {
-        case "nv-sidebarnavitem":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, NvSidebarnavitem$1);
-            }
-            break;
-        case "nv-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "nv-notification-bullet":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const NvSidebarnavitem = NvSidebarnavitem$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { NvSidebarnavitem, defineCustomElement };
-//# sourceMappingURL=nv-sidebarnavitem.js.map
-
-//# sourceMappingURL=nv-sidebarnavitem.js.map
+import{t as i,p as e,H as t,h as n,d as a}from"./p-iXsbKJzR.js";import{d as s}from"./p-Bg-b6OWh.js";import{d as r}from"./p-yHGZRC6Q.js";const o=e(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.active=!1,this.collapsible=!1,this.open=!1,this.hasSubitems=!1,this.isSidebarCollapsed=!1,this.wasActiveFromSubitem=!1,this.handleToggle=i=>{const e=i.target;if(!e.closest("nv-sidebarnavsubitem"))if(this.isSidebarCollapsed){const i=this.el.querySelector(".nv-sidebarnavitem-content a, :scope > a");if(i?.href){if(e.closest("a"))return;i.click()}}else this.collapsible&&(i.preventDefault(),i.stopPropagation(),this.open=!this.open)},this.isAnimating=!1,this.hasInitializedHeight=!1,this.lastAnimatedOpenState=null,this.updateSubitemsHeight=(i=!1)=>{this.subitemsRef&&(i||null===this.lastAnimatedOpenState||this.lastAnimatedOpenState!==this.open)&&(this.isAnimating&&!i||(this.isAnimating=!0,this.lastAnimatedOpenState=this.open,this.open?(this.subitemsRef.style.transition="none",this.subitemsRef.style.maxHeight="0px",requestAnimationFrame((()=>{this.subitemsRef&&(this.subitemsRef.style.transition="max-height 0.3s ease, opacity 0.2s ease",this.subitemsRef.style.maxHeight=this.subitemsRef.scrollHeight+"px",setTimeout((()=>{this.isAnimating=!1}),300))}))):(this.subitemsRef.style.transition="none",this.subitemsRef.style.maxHeight=this.subitemsRef.scrollHeight+"px",requestAnimationFrame((()=>{this.subitemsRef&&(this.subitemsRef.style.transition="max-height 0.3s ease, opacity 0.2s ease",this.subitemsRef.style.maxHeight="0px",setTimeout((()=>{this.isAnimating=!1}),300))})))))},this.checkSidebarCollapsed=()=>{const i=this.el.closest("nv-sidebar"),e=this.isSidebarCollapsed;this.isSidebarCollapsed=i?.hasAttribute("collapsed")??!1,e!==this.isSidebarCollapsed&&this.updateActiveFromSubitems()},this.updateActiveFromSubitems=()=>{if(!this.hasSubitems)return;const i=Array.from(this.el.querySelectorAll("nv-sidebarnavsubitem")).some((i=>i.active));this.isSidebarCollapsed?i?(this.active=!0,this.wasActiveFromSubitem=!0):this.wasActiveFromSubitem&&(this.active=!1,this.wasActiveFromSubitem=!1):i&&!this.open?(this.active=!0,this.wasActiveFromSubitem=!0):this.wasActiveFromSubitem&&(this.active=!1,this.wasActiveFromSubitem=!1)}}componentWillLoad(){const i=this.el.querySelectorAll("nv-sidebarnavsubitem");this.hasSubitems=i.length>0,this.hasSubitems&&i.forEach((i=>{i.setAttribute("slot","subitems")})),this.checkSidebarCollapsed();const e=this.el.closest("nv-sidebar");if(e&&(this.mutationObserver=new MutationObserver((()=>{this.checkSidebarCollapsed()})),this.mutationObserver.observe(e,{attributes:!0,attributeFilter:["collapsed"]})),this.hasSubitems){const i=this.el.querySelector(".nv-sidebarnavitem-subitems");i?(this.subitemsMutationObserver=new MutationObserver((()=>{this.updateActiveFromSubitems()})),this.subitemsMutationObserver.observe(i,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["active"]})):(this.subitemsMutationObserver=new MutationObserver((()=>{this.updateActiveFromSubitems()})),this.subitemsMutationObserver.observe(this.el,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["active"]}))}this.updateActiveFromSubitems()}disconnectedCallback(){this.mutationObserver&&this.mutationObserver.disconnect(),this.subitemsMutationObserver&&this.subitemsMutationObserver.disconnect()}onOpenChanged(i,e){i!==e&&(this.updateSubitemsHeight(!0),this.updateActiveFromSubitems())}render(){const i=void 0!==this.notificationCount&&this.notificationCount>0,e=this.isSidebarCollapsed?"reduced":"default";return n(a,{key:"89dfabe76e3b309d8be7f32224ba9bf960afaa57",role:"listitem"},n("div",{key:"f953530dec5af473a9845eeefca3619d4cb58306",class:"nv-sidebarnavitem-trigger",onClick:this.handleToggle,"aria-expanded":this.collapsible?this.open+"":void 0,"aria-current":this.active&&!this.collapsible?"page":void 0},this.icon&&n("div",{key:"10853dd4ec6fff353bf893a206244baf6a6c47af",class:"nv-sidebarnavitem-icon"},n("nv-icon",{key:"12362c99a8a799b564d30775073f549904399286",name:this.icon,size:"md"}),i&&this.isSidebarCollapsed&&n("nv-notification-bullet",{key:"04c48fbaba743faed9cc59f3b214bec61d1c196c",count:this.notificationCount,size:e,contrastingBorder:!0})),n("div",{key:"eb7a19ff2e6bdfcf8b4c13a2bc1f381b3c148e2f",class:"nv-sidebarnavitem-content"},n("slot",{key:"081686d517d863eef0ce243f208df58dd5f4fc54"})),n("div",{key:"ae745270bdb4282aacb48b819589ef9c8d4e6819",class:"nv-sidebarnavitem-trailing"},n("slot",{key:"38c312ea17afec572d310c976670ff8290a0b4fb",name:"trailing"}),i&&!this.isSidebarCollapsed&&n("nv-notification-bullet",{key:"887bfe50c260545cfbebca24160d5556cbe73ce2",count:this.notificationCount,size:e}),this.collapsible&&n("nv-icon",{key:"0078974c65b7a8fb11d796c29d291b7011c01e57",name:"chevron-down",size:"sm",class:"nv-sidebarnavitem-chevron"}))),this.collapsible&&this.hasSubitems&&n("div",{key:"bc9369aad6f4ac18e12abf3a1c5a283f18f3a258",class:"nv-sidebarnavitem-subitems",ref:i=>{i!==this.subitemsRef&&(this.subitemsRef=i,i&&!this.hasInitializedHeight&&(this.hasInitializedHeight=!0,requestAnimationFrame((()=>{this.open&&this.updateSubitemsHeight()}))))}},n("slot",{key:"6dd9e45df235d3dc45f7174c4da6cc4fd46833ca",name:"subitems"})))}get el(){return this}static get watchers(){return{open:[{onOpenChanged:0}]}}static get style(){return"nv-sidebarnavitem{display:flex;flex-direction:column;gap:0}nv-sidebarnavitem .nv-sidebarnavitem-trigger{display:flex;align-items:center;gap:var(--sidebar-item-gap-x);padding:var(--sidebar-item-padding-y) var(--sidebar-item-padding-x);border-radius:var(--sidebar-item-radius);cursor:pointer;transition:all 0.15s ease;font-size:var(--sidebar-item-font-size);font-weight:var(--font-weight-medium-emphasis);color:var(--color-content-low-text);background:var(--components-sidebar-background);text-decoration:none;--nv-component-background:var(--components-sidebar-background);--nv-sidebarnavitem-background:var(--components-sidebar-background)}nv-sidebarnavitem .nv-sidebarnavitem-trigger:hover{background-color:var(--color-interaction-container-neutral-background-hover);color:var(--color-content-medium-text);--nv-component-background:var(--color-interaction-container-neutral-background-hover);--nv-sidebarnavitem-background:var(--color-interaction-container-neutral-background-hover)}nv-sidebarnavitem .nv-sidebarnavitem-trigger:focus,nv-sidebarnavitem .nv-sidebarnavitem-trigger:focus-within{outline:none}nv-sidebarnavitem .nv-sidebarnavitem-trigger:focus-visible,nv-sidebarnavitem .nv-sidebarnavitem-trigger:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-sidebarnavitem[active] .nv-sidebarnavitem-trigger{background-color:var(--color-interaction-container-neutral-background-active);color:var(--color-interaction-container-neutral-text-active);font-weight:var(--font-weight-medium-emphasis);--nv-component-background:var(--color-interaction-container-neutral-background-active);--nv-sidebarnavitem-background:var(--color-interaction-container-neutral-background-active)}nv-sidebarnavitem .nv-sidebarnavitem-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit;width:var(--sidebar-item-icon-size);height:var(--sidebar-item-icon-size);position:relative}nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-icon{overflow:visible;margin:0;justify-content:center}nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-icon nv-notification-bullet{position:absolute;transform:translate(50%, -50%);z-index:1;--sidebar-notification-bullet-size-reduced:calc(     var(--sidebar-item-icon-size) * 0.4   )}nv-sidebarnavitem .nv-sidebarnavitem-content{flex:1;display:flex;align-items:center}nv-sidebarnavitem .nv-sidebarnavitem-content a{color:inherit !important;text-decoration:none !important;font-weight:var(--font-weight-medium-emphasis) !important;flex:1}nv-sidebarnavitem .nv-sidebarnavitem-trailing{display:flex;align-items:center;gap:var(--spacing-2);margin-left:auto}nv-sidebarnavitem .nv-sidebarnavitem-chevron{transition:transform 0.2s ease;color:inherit}nv-sidebarnavitem[open] .nv-sidebarnavitem-chevron{transform:rotate(180deg)}nv-sidebarnavitem .nv-sidebarnavitem-subitems{display:flex;flex-direction:column;gap:0;max-height:0;overflow:hidden;opacity:0;transition:max-height 0.3s ease, opacity 0.2s ease;padding-left:0}nv-sidebarnavitem[open] .nv-sidebarnavitem-subitems{opacity:1;margin-top:var(--spacing-1)}nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-trigger{justify-content:center;gap:0;padding:var(--sidebar-item-padding-y-collapsed) var(--sidebar-item-padding-x-collapsed)}nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-content{display:none}nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-trailing,nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-chevron{display:none}"}},[260,"nv-sidebarnavitem",{icon:[513],active:[1540],collapsible:[516],open:[1540],notificationCount:[514,"notification-count"],hasSubitems:[32],isSidebarCollapsed:[32]},void 0,{open:[{onOpenChanged:0}]}]);function c(){"undefined"!=typeof customElements&&["nv-sidebarnavitem","nv-icon","nv-notification-bullet"].forEach((e=>{switch(e){case"nv-sidebarnavitem":customElements.get(i(e))||customElements.define(i(e),o);break;case"nv-icon":customElements.get(i(e))||s();break;case"nv-notification-bullet":customElements.get(i(e))||r()}}))}c();const d=o,v=c;export{d as NvSidebarnavitem,v as defineCustomElement}

package/dist/components/nv-sidebarnavsubitem.js

@@ -1,55 +1 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-C63Xpg9a.js';
-
-const nvSidebarnavsubitemCss = "nv-sidebarnavsubitem{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--sidebar-item-padding-y) var(--sidebar-item-padding-x) var(--sidebar-item-padding-y) calc(var(--sidebar-sub-item-padding-left) + var(--sidebar-item-padding-x));cursor:pointer;transition:all 0.15s ease;position:relative;min-height:var(--spacing-10);background-color:var(--color-interaction-container-neutral-background);border-radius:var(--sidebar-item-radius);--nv-component-background:var(--color-interaction-container-neutral-background)}nv-sidebarnavsubitem:hover{background-color:var(--color-interaction-container-neutral-background-hover);--nv-component-background:var(--color-interaction-container-neutral-background-hover)}nv-sidebarnavsubitem:focus,nv-sidebarnavsubitem:focus-within{outline:none}nv-sidebarnavsubitem:focus-visible,nv-sidebarnavsubitem:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-sidebarnavsubitem .nv-sidebarnavsubitem-indicator{display:none}nv-sidebarnavsubitem .nv-sidebarnavsubitem-content{flex:1;display:flex;align-items:center;gap:var(--spacing-2);font-size:var(--font-size-sm);color:var(--color-content-medium-text);text-decoration:none;font-weight:var(--font-weight-medium-emphasis)}nv-sidebarnavsubitem .nv-sidebarnavsubitem-content a{color:inherit !important;text-decoration:none !important;font-weight:var(--font-weight-medium-emphasis) !important;flex:1}nv-sidebarnavsubitem:hover .nv-sidebarnavsubitem-content{color:var(--color-content-medium-text)}nv-sidebarnavsubitem[active]{background-color:var(--color-interaction-container-neutral-background-active);--nv-component-background:var(--color-interaction-container-neutral-background-active)}nv-sidebarnavsubitem[active] .nv-sidebarnavsubitem-content{color:var(--color-interaction-container-neutral-text-active);font-weight:var(--font-weight-high-emphasis)}nv-sidebarnavsubitem .nv-sidebarnavsubitem-trailing{display:flex;align-items:center}nv-sidebar[collapsed] nv-sidebarnavsubitem .nv-sidebarnavsubitem-content{max-width:0;opacity:0;margin:0;overflow:hidden;transition:opacity 0.2s ease, max-width 0.2s ease}nv-sidebar[collapsed] nv-sidebarnavsubitem .nv-sidebarnavsubitem-indicator{margin-right:0;width:var(--spacing-6);justify-content:center}nv-sidebar[collapsed] nv-sidebarnavsubitem .nv-sidebarnavsubitem-trailing{display:none}";
-
-const NvSidebarnavsubitem$1 = /*@__PURE__*/ proxyCustomElement(class NvSidebarnavsubitem extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Whether this sub-item represents the active/current page.
-         */
-        this.active = false;
-    }
-    //#endregion PROPERTIES
-    /****************************************************************************/
-    //#region METHODS
-    // Note: We no longer use stopPropagation() here because it prevents React Router
-    // (and other SPA routers) from receiving the click event due to event delegation.
-    // Instead, the parent nv-sidebarnavitem checks if clicks originate from subitems.
-    //#endregion METHODS
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        return (h(Host, { key: '7e9b3aaf42bc7ca19cc3ceeed4afc74058ea48f2', role: "listitem", "aria-current": this.active ? 'page' : undefined }, h("div", { key: 'd865d9cff0e9632dd0ca5f97334e09ae3ad6ddf8', class: "nv-sidebarnavsubitem-indicator" }), h("div", { key: '28bddb32eea17dbc3b33f2e1c3ef6744e6646cbe', class: "nv-sidebarnavsubitem-content" }, h("slot", { key: '0f58fbe30b054e42ac3f431cb8cafe0374994856' })), h("div", { key: '3b1b74c67b1e338e158a67dab828941f40f3a147', class: "nv-sidebarnavsubitem-trailing" }, h("slot", { key: '98ad3fde4a5295f6835ba6b15ac832fc0426b75b', name: "trailing" }))));
-    }
-    static get style() { return nvSidebarnavsubitemCss; }
-}, [260, "nv-sidebarnavsubitem", {
-        "active": [516]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["nv-sidebarnavsubitem"];
-    components.forEach(tagName => { switch (tagName) {
-        case "nv-sidebarnavsubitem":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, NvSidebarnavsubitem$1);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const NvSidebarnavsubitem = NvSidebarnavsubitem$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { NvSidebarnavsubitem, defineCustomElement };
-//# sourceMappingURL=nv-sidebarnavsubitem.js.map
-
-//# sourceMappingURL=nv-sidebarnavsubitem.js.map
+import{t as e,p as a,H as n,h as i,d as t}from"./p-iXsbKJzR.js";const r=a(class extends n{constructor(e){super(),!1!==e&&this.__registerHost(),this.active=!1}render(){return i(t,{key:"633d2842e116a9de48d5638c3f85a390543f0d0b",role:"listitem","aria-current":this.active?"page":void 0},i("div",{key:"fb16e478af164c6bde7b6d79394e87c167b1490a",class:"nv-sidebarnavsubitem-indicator"}),i("div",{key:"f4959009a6e027abe887b6236b4cd6d66dfe75e0",class:"nv-sidebarnavsubitem-content"},i("slot",{key:"5f8d806af8307c81960c1adb6297630e8692fa83"})),i("div",{key:"ab2c3cbcdeec6178e1a328b35a614501f62e5ca1",class:"nv-sidebarnavsubitem-trailing"},i("slot",{key:"21669437e202532277def87f84e67876cadd1877",name:"trailing"})))}static get style(){return"nv-sidebarnavsubitem{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--sidebar-item-padding-y) var(--sidebar-item-padding-x) var(--sidebar-item-padding-y) calc(var(--sidebar-sub-item-padding-left) + var(--sidebar-item-padding-x));cursor:pointer;transition:all 0.15s ease;position:relative;min-height:var(--spacing-10);background-color:var(--color-interaction-container-neutral-background);border-radius:var(--sidebar-item-radius);--nv-component-background:var(--color-interaction-container-neutral-background)}nv-sidebarnavsubitem:hover{background-color:var(--color-interaction-container-neutral-background-hover);--nv-component-background:var(--color-interaction-container-neutral-background-hover)}nv-sidebarnavsubitem:focus,nv-sidebarnavsubitem:focus-within{outline:none}nv-sidebarnavsubitem:focus-visible,nv-sidebarnavsubitem:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-sidebarnavsubitem .nv-sidebarnavsubitem-indicator{display:none}nv-sidebarnavsubitem .nv-sidebarnavsubitem-content{flex:1;display:flex;align-items:center;gap:var(--spacing-2);font-size:var(--font-size-sm);color:var(--color-content-medium-text);text-decoration:none;font-weight:var(--font-weight-medium-emphasis)}nv-sidebarnavsubitem .nv-sidebarnavsubitem-content a{color:inherit !important;text-decoration:none !important;font-weight:var(--font-weight-medium-emphasis) !important;flex:1}nv-sidebarnavsubitem:hover .nv-sidebarnavsubitem-content{color:var(--color-content-medium-text)}nv-sidebarnavsubitem[active]{background-color:var(--color-interaction-container-neutral-background-active);--nv-component-background:var(--color-interaction-container-neutral-background-active)}nv-sidebarnavsubitem[active] .nv-sidebarnavsubitem-content{color:var(--color-interaction-container-neutral-text-active);font-weight:var(--font-weight-high-emphasis)}nv-sidebarnavsubitem .nv-sidebarnavsubitem-trailing{display:flex;align-items:center}nv-sidebar[collapsed] nv-sidebarnavsubitem .nv-sidebarnavsubitem-content{max-width:0;opacity:0;margin:0;overflow:hidden;transition:opacity 0.2s ease, max-width 0.2s ease}nv-sidebar[collapsed] nv-sidebarnavsubitem .nv-sidebarnavsubitem-indicator{margin-right:0;width:var(--spacing-6);justify-content:center}nv-sidebar[collapsed] nv-sidebarnavsubitem .nv-sidebarnavsubitem-trailing{display:none}"}},[260,"nv-sidebarnavsubitem",{active:[516]}]);function s(){"undefined"!=typeof customElements&&["nv-sidebarnavsubitem"].forEach((a=>{"nv-sidebarnavsubitem"===a&&(customElements.get(e(a))||customElements.define(e(a),r))}))}s();const o=r,c=s;export{o as NvSidebarnavsubitem,c as defineCustomElement}