npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.23.0 → 3.24.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (792) hide show

package/dist/components/nv-sidebarnavitem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nv-sidebarnavitem.js","mappings":"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","names":["NvSidebarnavitem","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/nv-sidebarnavitem/styles/nv-sidebarnavitem.scss?tag=nv-sidebarnavitem","src/components/nv-sidebarnavitem/nv-sidebarnavitem.tsx"],"sourcesContent":["@use \"./mixins\" as ;\n\nnv-sidebarnavitem {\n @include navitem-container();\n\n .nv-sidebarnavitem-trigger {\n @include navitem-trigger();\n }\n\n &[active] .nv-sidebarnavitem-trigger {\n @include navitem-active();\n }\n\n .nv-sidebarnavitem-icon {\n @include navitem-icon();\n position: relative;\n\n // Position notification bullet on icon when sidebar is collapsed\n nv-sidebar[collapsed] & {\n overflow: visible; // Allow cross-border backdrop to be visible\n margin: 0;\n justify-content: center;\n \n nv-notification-bullet {\n position: absolute;\n // Position at top-right corner of the icon container\n // Transform to center the bullet on the corner\n // Move it up and right by half its size to center it on the corner\n transform: translate(50%, -50%);\n z-index: 1;\n // Decrease size proportionally to icon (about 40% of icon size for better visibility)\n --sidebar-notification-bullet-size-reduced: calc(\n var(--sidebar-item-icon-size) 0.4\n );\n }\n }\n }\n\n .nv-sidebarnavitem-content {\n @include navitem-content();\n\n a {\n color: inherit !important;\n text-decoration: none !important;\n font-weight: var(--font-weight-medium-emphasis) !important;\n flex: 1;\n }\n }\n\n .nv-sidebarnavitem-trailing {\n @include navitem-trailing();\n }\n\n .nv-sidebarnavitem-chevron {\n @include navitem-chevron();\n }\n\n &[open] .nv-sidebarnavitem-chevron {\n @include navitem-chevron-open();\n }\n\n .nv-sidebarnavitem-subitems {\n @include navitem-subitems();\n }\n\n &[open] .nv-sidebarnavitem-subitems {\n @include navitem-subitems-open();\n }\n\n // Collapsed state handled by parent sidebar\n nv-sidebar[collapsed] & {\n .nv-sidebarnavitem-trigger {\n justify-content: center;\n gap: 0;\n padding: var(--sidebar-item-padding-y-collapsed) var(--sidebar-item-padding-x-collapsed);\n }\n\n .nv-sidebarnavitem-content {\n display: none;\n }\n\n .nv-sidebarnavitem-trailing,\n .nv-sidebarnavitem-chevron {\n display: none;\n }\n }\n}\n","import { Component, Host, Prop, State, Element, Watch, h } from '@stencil/core';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/*\n A navigation item in the sidebar. Can be a simple link or a collapsible parent with sub-items.\n * @slot default - The link or content of the item (usually an <a> tag).\n * @slot subitems - Sub-navigation items (nv-sidebarnavsubitem elements). Automatically assigned.\n * @slot trailing - Optional content displayed at the end of the item (e.g., badges, icons, chevron).\n /\n@Component({\n tag: 'nv-sidebarnavitem',\n styleUrl: 'styles/nv-sidebarnavitem.scss',\n shadow: false,\n})\nexport class NvSidebarnavitem {\n @Element() el: HTMLNvSidebarnavitemElement;\n /*************************************************************************/\n //#region PROPERTIES\n /\n * Optional icon to display before the label.\n /\n @Prop({ reflect: true })\n readonly icon?: IconName;\n\n /\n Whether this item represents the active/current page.\n * Can be set automatically when a sub-item becomes active.\n /\n @Prop({ reflect: true, mutable: true })\n active: boolean = false;\n\n /\n Whether this item can be collapsed/expanded (has sub-items).\n /\n @Prop({ reflect: true })\n readonly collapsible: boolean = false;\n\n /\n Whether the collapsible item is currently open (showing sub-items).\n /\n @Prop({ reflect: true, mutable: true })\n open: boolean = false;\n\n /\n Number of notifications to display. When provided, a notification bullet will be automatically rendered.\n * The bullet will be positioned in the trailing slot when sidebar is open, and on the icon when collapsed.\n /\n @Prop({ reflect: true })\n readonly notificationCount?: number;\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region STATE\n @State()\n private hasSubitems: boolean = false;\n\n @State()\n private isSidebarCollapsed: boolean = false;\n\n private mutationObserver?: MutationObserver;\n private subitemsMutationObserver?: MutationObserver;\n private wasActiveFromSubitem: boolean = false; // Track if active was set by subitem logic\n //#endregion STATE\n /************************************************************************/\n //#region METHODS\n private handleToggle = (event: MouseEvent) => {\n // Ignore clicks that originated from subitems (they bubble up but shouldn't toggle)\n const target = event.target as HTMLElement;\n if (target.closest('nv-sidebarnavsubitem')) {\n return; // Let the subitem's link handle navigation normally\n }\n\n // In collapsed sidebar mode, navigate to the main link instead of toggling\n if (this.isSidebarCollapsed) {\n // Find the first link that is NOT inside subitems\n const link = this.el.querySelector(\n '.nv-sidebarnavitem-content a, :scope > a',\n ) as HTMLAnchorElement;\n if (link?.href) {\n // Check if click was directly on the link - if so, let it handle naturally\n if (target.closest('a')) {\n return;\n }\n // Trigger navigation by clicking the link programmatically\n link.click();\n }\n return;\n }\n\n // Only handle toggle for collapsible items when sidebar is expanded\n if (this.collapsible) {\n event.preventDefault();\n event.stopPropagation();\n this.open = !this.open;\n }\n // For non-collapsible items in expanded mode, let the link handle the navigation\n // Don't prevent default or stop propagation - allow the link to work normally\n };\n\n private subitemsRef?: HTMLDivElement;\n private isAnimating: boolean = false;\n private hasInitializedHeight: boolean = false;\n / Tracks the last open state that was animated to, to prevent redundant animations /\n private lastAnimatedOpenState: boolean \| null = null;\n\n private updateSubitemsHeight = (force: boolean = false) => {\n if (!this.subitemsRef) return;\n\n // Skip animation if we're already in the target state (prevents animation on active change)\n // Only animate if:\n // 1. forced (explicit toggle by user via @Watch)\n // 2. OR this is the first animation (lastAnimatedOpenState is null)\n // 3. OR the open state has actually changed since last animation\n if (\n !force &&\n this.lastAnimatedOpenState !== null &&\n this.lastAnimatedOpenState === this.open\n ) {\n return;\n }\n\n // Don't re-animate if already animating and not forced\n if (this.isAnimating && !force) {\n return;\n }\n\n this.isAnimating = true;\n this.lastAnimatedOpenState = this.open;\n\n if (this.open) {\n // Calculate real height and animate to it\n this.subitemsRef.style.transition = 'none';\n this.subitemsRef.style.maxHeight = '0px';\n void this.subitemsRef.offsetHeight; // Force reflow\n requestAnimationFrame(() => {\n if (this.subitemsRef) {\n this.subitemsRef.style.transition =\n 'max-height 0.3s ease, opacity 0.2s ease';\n this.subitemsRef.style.maxHeight =\n this.subitemsRef.scrollHeight + 'px';\n // Reset animation flag after animation completes\n setTimeout(() => {\n this.isAnimating = false;\n }, 300); // Match animation duration\n }\n });\n } else {\n // Animate to 0\n this.subitemsRef.style.transition = 'none';\n this.subitemsRef.style.maxHeight = this.subitemsRef.scrollHeight + 'px';\n void this.subitemsRef.offsetHeight; // Force reflow\n requestAnimationFrame(() => {\n if (this.subitemsRef) {\n this.subitemsRef.style.transition =\n 'max-height 0.3s ease, opacity 0.2s ease';\n this.subitemsRef.style.maxHeight = '0px';\n // Reset animation flag after animation completes\n setTimeout(() => {\n this.isAnimating = false;\n }, 300); // Match animation duration\n }\n });\n }\n };\n private checkSidebarCollapsed = () => {\n const sidebar = this.el.closest('nv-sidebar');\n const wasCollapsed = this.isSidebarCollapsed;\n this.isSidebarCollapsed = sidebar?.hasAttribute('collapsed') ?? false;\n\n // When sidebar collapse state changes, update active state based on subitems\n if (wasCollapsed !== this.isSidebarCollapsed) {\n this.updateActiveFromSubitems();\n }\n };\n\n /\n Checks if any sub-item is active and updates parent active state.\n * - When sidebar is collapsed: if a sub-item is active, parent should be active\n * - When sidebar is expanded: if a sub-item is active AND parent is not open, parent should be active\n * (because sub-items are hidden, we need to indicate the parent contains an active child)\n /\n private updateActiveFromSubitems = () => {\n if (!this.hasSubitems) return;\n\n // Find all sub-items\n const subItems = Array.from(\n this.el.querySelectorAll('nv-sidebarnavsubitem'),\n ) as HTMLNvSidebarnavsubitemElement[];\n\n // Check if any sub-item is active\n const hasActiveSubitem = subItems.some(subItem => subItem.active);\n\n if (this.isSidebarCollapsed) {\n // When sidebar is collapsed AND a sub-item is active, make parent active\n if (hasActiveSubitem) {\n this.active = true;\n this.wasActiveFromSubitem = true;\n } else {\n // When collapsed and no sub-item is active, remove active state only if we set it\n if (this.wasActiveFromSubitem) {\n this.active = false;\n this.wasActiveFromSubitem = false;\n }\n }\n } else {\n // When sidebar is expanded\n if (hasActiveSubitem && !this.open) {\n // If a sub-item is active AND parent is not open (sub-items hidden),\n // make parent active to indicate it contains an active child\n this.active = true;\n this.wasActiveFromSubitem = true;\n } else if (hasActiveSubitem && this.open) {\n // If a sub-item is active BUT parent is open (sub-items visible),\n // remove active state from parent (only sub-item should be active)\n if (this.wasActiveFromSubitem) {\n this.active = false;\n this.wasActiveFromSubitem = false;\n }\n } else {\n // No active sub-item, remove active state if we set it\n if (this.wasActiveFromSubitem) {\n this.active = false;\n this.wasActiveFromSubitem = false;\n }\n }\n // Note: activePath logic in nv-sidebar can also manage parent active state\n // (when parent href matches activePath exactly)\n }\n };\n\n //#endregion METHODS\n /*************************************************************************/\n //#region LIFECYCLE\n componentWillLoad() {\n // Check if there are sub-items in any slot\n const subItems = Array.from(this.el.children).filter(\n child => child.tagName.toLowerCase() === 'nv-sidebarnavsubitem',\n );\n this.hasSubitems = subItems.length > 0;\n\n // Move sub-items to the subitems slot\n if (this.hasSubitems) {\n subItems.forEach(item => {\n item.setAttribute('slot', 'subitems');\n });\n }\n\n // Check sidebar collapsed state\n this.checkSidebarCollapsed();\n\n // Watch for sidebar state changes\n const sidebar = this.el.closest('nv-sidebar');\n if (sidebar) {\n this.mutationObserver = new MutationObserver(() => {\n this.checkSidebarCollapsed();\n });\n this.mutationObserver.observe(sidebar, {\n attributes: true,\n attributeFilter: ['collapsed'],\n });\n }\n\n // Watch for sub-items active state changes\n if (this.hasSubitems) {\n // Observe the subitems container for changes (including new sub-items being added)\n // Using subtree: true to catch all attribute changes in descendants\n const subitemsContainer = this.el.querySelector(\n '.nv-sidebarnavitem-subitems',\n );\n if (subitemsContainer) {\n this.subitemsMutationObserver = new MutationObserver(() => {\n this.updateActiveFromSubitems();\n });\n\n // Observe the container for child list changes and attribute changes in descendants\n this.subitemsMutationObserver.observe(subitemsContainer, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['active'],\n });\n } else {\n // If container doesn't exist yet (not collapsible or not rendered), observe the element itself\n // This handles cases where sub-items are direct children\n this.subitemsMutationObserver = new MutationObserver(() => {\n this.updateActiveFromSubitems();\n });\n\n this.subitemsMutationObserver.observe(this.el, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['active'],\n });\n }\n }\n\n // Initial check for active subitems\n this.updateActiveFromSubitems();\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n }\n if (this.subitemsMutationObserver) {\n this.subitemsMutationObserver.disconnect();\n }\n }\n //#endregion LIFECYCLE\n /************************************************************************/\n //#region WATCHERS\n @Watch('open')\n onOpenChanged(newValue: boolean, oldValue: boolean) {\n // Only animate if the value actually changed (prevents false triggers from React re-renders)\n if (newValue === oldValue) {\n return;\n }\n // Force update when open state changes (user clicked toggle)\n this.updateSubitemsHeight(true);\n // Update active state based on subitems when open state changes\n this.updateActiveFromSubitems();\n }\n //#endregion WATCHERS\n /**************************************************************************/\n //#region RENDER\n render() {\n const showNotificationBullet =\n this.notificationCount !== undefined && this.notificationCount > 0;\n const notificationSize = this.isSidebarCollapsed ? 'reduced' : 'default';\n\n return (\n <Host role=\"listitem\">\n <div\n class=\"nv-sidebarnavitem-trigger\"\n onClick={this.handleToggle}\n aria-expanded={this.collapsible ? String(this.open) : undefined}\n aria-current={this.active && !this.collapsible ? 'page' : undefined}\n >\n {this.icon && (\n <div class=\"nv-sidebarnavitem-icon\">\n <nv-icon name={this.icon} size=\"md\"></nv-icon>\n {showNotificationBullet && this.isSidebarCollapsed && (\n <nv-notification-bullet\n count={this.notificationCount}\n size={notificationSize}\n contrastingBorder\n ></nv-notification-bullet>\n )}\n </div>\n )}\n <div class=\"nv-sidebarnavitem-content\">\n <slot></slot>\n </div>\n <div class=\"nv-sidebarnavitem-trailing\">\n <slot name=\"trailing\"></slot>\n {showNotificationBullet && !this.isSidebarCollapsed && (\n <nv-notification-bullet\n count={this.notificationCount}\n size={notificationSize}\n ></nv-notification-bullet>\n )}\n {this.collapsible && (\n <nv-icon\n name=\"chevron-down\"\n size=\"sm\"\n class=\"nv-sidebarnavitem-chevron\"\n ></nv-icon>\n )}\n </div>\n </div>\n {this.collapsible && this.hasSubitems && (\n <div\n class=\"nv-sidebarnavitem-subitems\"\n ref={el => {\n // Only update ref and initialize if element changed or not yet initialized\n if (el !== this.subitemsRef) {\n this.subitemsRef = el;\n if (el && !this.hasInitializedHeight) {\n // Initialize height only on first mount, not on re-renders\n this.hasInitializedHeight = true;\n requestAnimationFrame(() => {\n // Only animate if item is open, otherwise it will animate when opened\n if (this.open) {\n this.updateSubitemsHeight();\n }\n });\n }\n }\n }}\n >\n <slot name=\"subitems\"></slot>\n </div>\n )}\n </Host>\n );\n }\n //#endregion RENDER\n}\n"],"version":3}
1	+ {"file":"nv-sidebarnavitem.js","mappings":"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","names":["NvSidebarnavitem","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/nv-sidebarnavitem/styles/nv-sidebarnavitem.scss?tag=nv-sidebarnavitem","src/components/nv-sidebarnavitem/nv-sidebarnavitem.tsx"],"sourcesContent":["@use \"./mixins\" as ;\n\nnv-sidebarnavitem {\n @include navitem-container();\n\n .nv-sidebarnavitem-trigger {\n @include navitem-trigger();\n }\n\n &[active] .nv-sidebarnavitem-trigger {\n @include navitem-active();\n }\n\n .nv-sidebarnavitem-icon {\n @include navitem-icon();\n position: relative;\n\n // Position notification bullet on icon when sidebar is collapsed\n nv-sidebar[collapsed] & {\n overflow: visible; // Allow cross-border backdrop to be visible\n margin: 0;\n justify-content: center;\n \n nv-notification-bullet {\n position: absolute;\n // Position at top-right corner of the icon container\n // Transform to center the bullet on the corner\n // Move it up and right by half its size to center it on the corner\n transform: translate(50%, -50%);\n z-index: 1;\n // Decrease size proportionally to icon (about 40% of icon size for better visibility)\n --sidebar-notification-bullet-size-reduced: calc(\n var(--sidebar-item-icon-size) 0.4\n );\n }\n }\n }\n\n .nv-sidebarnavitem-content {\n @include navitem-content();\n\n a {\n color: inherit !important;\n text-decoration: none !important;\n font-weight: var(--font-weight-medium-emphasis) !important;\n flex: 1;\n }\n }\n\n .nv-sidebarnavitem-trailing {\n @include navitem-trailing();\n }\n\n .nv-sidebarnavitem-chevron {\n @include navitem-chevron();\n }\n\n &[open] .nv-sidebarnavitem-chevron {\n @include navitem-chevron-open();\n }\n\n .nv-sidebarnavitem-subitems {\n @include navitem-subitems();\n }\n\n &[open] .nv-sidebarnavitem-subitems {\n @include navitem-subitems-open();\n }\n\n // Collapsed state handled by parent sidebar\n nv-sidebar[collapsed] & {\n .nv-sidebarnavitem-trigger {\n justify-content: center;\n gap: 0;\n padding: var(--sidebar-item-padding-y-collapsed) var(--sidebar-item-padding-x-collapsed);\n }\n\n .nv-sidebarnavitem-content {\n display: none;\n }\n\n .nv-sidebarnavitem-trailing,\n .nv-sidebarnavitem-chevron {\n display: none;\n }\n }\n}\n","import { Component, Host, Prop, State, Element, Watch, h } from '@stencil/core';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/*\n A navigation item in the sidebar. Can be a simple link or a collapsible parent with sub-items.\n * @slot default - The link or content of the item (usually an <a> tag).\n * @slot subitems - Sub-navigation items (nv-sidebarnavsubitem elements). Automatically assigned.\n * @slot trailing - Optional content displayed at the end of the item (e.g., badges, icons, chevron).\n /\n@Component({\n tag: 'nv-sidebarnavitem',\n styleUrl: 'styles/nv-sidebarnavitem.scss',\n shadow: false,\n})\nexport class NvSidebarnavitem {\n @Element() el: HTMLNvSidebarnavitemElement;\n /*************************************************************************/\n //#region PROPERTIES\n /\n * Optional icon to display before the label.\n /\n @Prop({ reflect: true })\n readonly icon?: IconName;\n\n /\n Whether this item represents the active/current page.\n * Can be set automatically when a sub-item becomes active.\n /\n @Prop({ reflect: true, mutable: true })\n active: boolean = false;\n\n /\n Whether this item can be collapsed/expanded (has sub-items).\n /\n @Prop({ reflect: true })\n readonly collapsible: boolean = false;\n\n /\n Whether the collapsible item is currently open (showing sub-items).\n /\n @Prop({ reflect: true, mutable: true })\n open: boolean = false;\n\n /\n Number of notifications to display. When provided, a notification bullet will be automatically rendered.\n * The bullet will be positioned in the trailing slot when sidebar is open, and on the icon when collapsed.\n /\n @Prop({ reflect: true })\n readonly notificationCount?: number;\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region STATE\n @State()\n private hasSubitems: boolean = false;\n\n @State()\n private isSidebarCollapsed: boolean = false;\n\n private mutationObserver?: MutationObserver;\n private subitemsMutationObserver?: MutationObserver;\n private wasActiveFromSubitem: boolean = false; // Track if active was set by subitem logic\n //#endregion STATE\n /************************************************************************/\n //#region METHODS\n private handleToggle = (event: MouseEvent) => {\n // Ignore clicks that originated from subitems (they bubble up but shouldn't toggle)\n const target = event.target as HTMLElement;\n if (target.closest('nv-sidebarnavsubitem')) {\n return; // Let the subitem's link handle navigation normally\n }\n\n // In collapsed sidebar mode, navigate to the main link instead of toggling\n if (this.isSidebarCollapsed) {\n // Find the first link that is NOT inside subitems\n const link = this.el.querySelector(\n '.nv-sidebarnavitem-content a, :scope > a',\n ) as HTMLAnchorElement;\n if (link?.href) {\n // Check if click was directly on the link - if so, let it handle naturally\n if (target.closest('a')) {\n return;\n }\n // Trigger navigation by clicking the link programmatically\n link.click();\n }\n return;\n }\n\n // Only handle toggle for collapsible items when sidebar is expanded\n if (this.collapsible) {\n event.preventDefault();\n event.stopPropagation();\n this.open = !this.open;\n }\n // For non-collapsible items in expanded mode, let the link handle the navigation\n // Don't prevent default or stop propagation - allow the link to work normally\n };\n\n private subitemsRef?: HTMLDivElement;\n private isAnimating: boolean = false;\n private hasInitializedHeight: boolean = false;\n / Tracks the last open state that was animated to, to prevent redundant animations /\n private lastAnimatedOpenState: boolean \| null = null;\n\n private updateSubitemsHeight = (force: boolean = false) => {\n if (!this.subitemsRef) return;\n\n // Skip animation if we're already in the target state (prevents animation on active change)\n // Only animate if:\n // 1. forced (explicit toggle by user via @Watch)\n // 2. OR this is the first animation (lastAnimatedOpenState is null)\n // 3. OR the open state has actually changed since last animation\n if (\n !force &&\n this.lastAnimatedOpenState !== null &&\n this.lastAnimatedOpenState === this.open\n ) {\n return;\n }\n\n // Don't re-animate if already animating and not forced\n if (this.isAnimating && !force) {\n return;\n }\n\n this.isAnimating = true;\n this.lastAnimatedOpenState = this.open;\n\n if (this.open) {\n // Calculate real height and animate to it\n this.subitemsRef.style.transition = 'none';\n this.subitemsRef.style.maxHeight = '0px';\n void this.subitemsRef.offsetHeight; // Force reflow\n requestAnimationFrame(() => {\n if (this.subitemsRef) {\n this.subitemsRef.style.transition =\n 'max-height 0.3s ease, opacity 0.2s ease';\n this.subitemsRef.style.maxHeight =\n this.subitemsRef.scrollHeight + 'px';\n // Reset animation flag after animation completes\n setTimeout(() => {\n this.isAnimating = false;\n }, 300); // Match animation duration\n }\n });\n } else {\n // Animate to 0\n this.subitemsRef.style.transition = 'none';\n this.subitemsRef.style.maxHeight = this.subitemsRef.scrollHeight + 'px';\n void this.subitemsRef.offsetHeight; // Force reflow\n requestAnimationFrame(() => {\n if (this.subitemsRef) {\n this.subitemsRef.style.transition =\n 'max-height 0.3s ease, opacity 0.2s ease';\n this.subitemsRef.style.maxHeight = '0px';\n // Reset animation flag after animation completes\n setTimeout(() => {\n this.isAnimating = false;\n }, 300); // Match animation duration\n }\n });\n }\n };\n private checkSidebarCollapsed = () => {\n const sidebar = this.el.closest('nv-sidebar');\n const wasCollapsed = this.isSidebarCollapsed;\n this.isSidebarCollapsed = sidebar?.hasAttribute('collapsed') ?? false;\n\n // When sidebar collapse state changes, update active state based on subitems\n if (wasCollapsed !== this.isSidebarCollapsed) {\n this.updateActiveFromSubitems();\n }\n };\n\n /\n Checks if any sub-item is active and updates parent active state.\n * - When sidebar is collapsed: if a sub-item is active, parent should be active\n * - When sidebar is expanded: if a sub-item is active AND parent is not open, parent should be active\n * (because sub-items are hidden, we need to indicate the parent contains an active child)\n /\n private updateActiveFromSubitems = () => {\n if (!this.hasSubitems) return;\n\n // Find all sub-items\n const subItems = Array.from(\n this.el.querySelectorAll('nv-sidebarnavsubitem'),\n ) as HTMLNvSidebarnavsubitemElement[];\n\n // Check if any sub-item is active\n const hasActiveSubitem = subItems.some(subItem => subItem.active);\n\n if (this.isSidebarCollapsed) {\n // When sidebar is collapsed AND a sub-item is active, make parent active\n if (hasActiveSubitem) {\n this.active = true;\n this.wasActiveFromSubitem = true;\n } else {\n // When collapsed and no sub-item is active, remove active state only if we set it\n if (this.wasActiveFromSubitem) {\n this.active = false;\n this.wasActiveFromSubitem = false;\n }\n }\n } else {\n // When sidebar is expanded\n if (hasActiveSubitem && !this.open) {\n // If a sub-item is active AND parent is not open (sub-items hidden),\n // make parent active to indicate it contains an active child\n this.active = true;\n this.wasActiveFromSubitem = true;\n } else if (hasActiveSubitem && this.open) {\n // If a sub-item is active BUT parent is open (sub-items visible),\n // remove active state from parent (only sub-item should be active)\n if (this.wasActiveFromSubitem) {\n this.active = false;\n this.wasActiveFromSubitem = false;\n }\n } else {\n // No active sub-item, remove active state if we set it\n if (this.wasActiveFromSubitem) {\n this.active = false;\n this.wasActiveFromSubitem = false;\n }\n }\n // Note: activePath logic in nv-sidebar can also manage parent active state\n // (when parent href matches activePath exactly)\n }\n };\n\n //#endregion METHODS\n /*************************************************************************/\n //#region LIFECYCLE\n componentWillLoad() {\n // Check if there are sub-items in any slot\n const subItems = Array.from(this.el.children).filter(\n child => child.tagName.toLowerCase() === 'nv-sidebarnavsubitem',\n );\n this.hasSubitems = subItems.length > 0;\n\n // Move sub-items to the subitems slot\n if (this.hasSubitems) {\n subItems.forEach(item => {\n item.setAttribute('slot', 'subitems');\n });\n }\n\n // Check sidebar collapsed state\n this.checkSidebarCollapsed();\n\n // Watch for sidebar state changes\n const sidebar = this.el.closest('nv-sidebar');\n if (sidebar) {\n this.mutationObserver = new MutationObserver(() => {\n this.checkSidebarCollapsed();\n });\n this.mutationObserver.observe(sidebar, {\n attributes: true,\n attributeFilter: ['collapsed'],\n });\n }\n\n // Watch for sub-items active state changes\n if (this.hasSubitems) {\n // Observe the subitems container for changes (including new sub-items being added)\n // Using subtree: true to catch all attribute changes in descendants\n const subitemsContainer = this.el.querySelector(\n '.nv-sidebarnavitem-subitems',\n );\n if (subitemsContainer) {\n this.subitemsMutationObserver = new MutationObserver(() => {\n this.updateActiveFromSubitems();\n });\n\n // Observe the container for child list changes and attribute changes in descendants\n this.subitemsMutationObserver.observe(subitemsContainer, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['active'],\n });\n } else {\n // If container doesn't exist yet (not collapsible or not rendered), observe the element itself\n // This handles cases where sub-items are direct children\n this.subitemsMutationObserver = new MutationObserver(() => {\n this.updateActiveFromSubitems();\n });\n\n this.subitemsMutationObserver.observe(this.el, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['active'],\n });\n }\n }\n\n // Initial check for active subitems\n this.updateActiveFromSubitems();\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n }\n if (this.subitemsMutationObserver) {\n this.subitemsMutationObserver.disconnect();\n }\n }\n //#endregion LIFECYCLE\n /************************************************************************/\n //#region WATCHERS\n @Watch('open')\n onOpenChanged(newValue: boolean, oldValue: boolean) {\n // Only animate if the value actually changed (prevents false triggers from React re-renders)\n if (newValue === oldValue) {\n return;\n }\n // Force update when open state changes (user clicked toggle)\n this.updateSubitemsHeight(true);\n // Update active state based on subitems when open state changes\n this.updateActiveFromSubitems();\n }\n //#endregion WATCHERS\n /**************************************************************************/\n //#region RENDER\n render() {\n const showNotificationBullet =\n this.notificationCount !== undefined && this.notificationCount > 0;\n const notificationSize = this.isSidebarCollapsed ? 'reduced' : 'default';\n\n return (\n <Host role=\"listitem\">\n <div\n class=\"nv-sidebarnavitem-trigger\"\n onClick={this.handleToggle}\n aria-expanded={this.collapsible ? String(this.open) : undefined}\n aria-current={this.active && !this.collapsible ? 'page' : undefined}\n >\n {this.icon && (\n <div class=\"nv-sidebarnavitem-icon\">\n <nv-icon name={this.icon} size=\"md\"></nv-icon>\n {showNotificationBullet && this.isSidebarCollapsed && (\n <nv-notification-bullet\n count={this.notificationCount}\n size={notificationSize}\n contrastingBorder\n ></nv-notification-bullet>\n )}\n </div>\n )}\n <div class=\"nv-sidebarnavitem-content\">\n <slot></slot>\n </div>\n <div class=\"nv-sidebarnavitem-trailing\">\n <slot name=\"trailing\"></slot>\n {showNotificationBullet && !this.isSidebarCollapsed && (\n <nv-notification-bullet\n count={this.notificationCount}\n size={notificationSize}\n ></nv-notification-bullet>\n )}\n {this.collapsible && (\n <nv-icon\n name=\"chevron-down\"\n size=\"sm\"\n class=\"nv-sidebarnavitem-chevron\"\n ></nv-icon>\n )}\n </div>\n </div>\n {this.collapsible && this.hasSubitems && (\n <div\n class=\"nv-sidebarnavitem-subitems\"\n ref={el => {\n // Only update ref and initialize if element changed or not yet initialized\n if (el !== this.subitemsRef) {\n this.subitemsRef = el;\n if (el && !this.hasInitializedHeight) {\n // Initialize height only on first mount, not on re-renders\n this.hasInitializedHeight = true;\n requestAnimationFrame(() => {\n // Only animate if item is open, otherwise it will animate when opened\n if (this.open) {\n this.updateSubitemsHeight();\n }\n });\n }\n }\n }}\n >\n <slot name=\"subitems\"></slot>\n </div>\n )}\n </Host>\n );\n }\n //#endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-sidebarnavsubitem.js CHANGED Viewed

@@ -25,7 +25,7 @@ const NvSidebarnavsubitem$1 = /*@__PURE__*/ proxyCustomElement(class NvSidebarna
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '8ae8c5e2038145bd458a35d237495a06fde97294', role: "listitem", "aria-current": this.active ? 'page' : undefined }, h("div", { key: '559a99d72973f7af43091c5c920e77d8cad3944c', class: "nv-sidebarnavsubitem-indicator" }), h("div", { key: '204c7ad681d51310f43b618ef14a12d0ccc93ddc', class: "nv-sidebarnavsubitem-content" }, h("slot", { key: 'f4717aee216fbeac4dbfe0d98b34fe7e83476701' })), h("div", { key: 'b5db84c75ae4e51d8a048000a49697eaf4b20f1d', class: "nv-sidebarnavsubitem-trailing" }, h("slot", { key: 'b6d0afcd6b4ace60b32f531f414b70aba513a274', name: "trailing" }))));
+        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", {

package/dist/components/nv-split.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-C63Xpg9a.js';
-const nvSplitCss = "nv-split{display:flex;width:100%;height:100%;position:relative}nv-split[direction=horizontal]{flex-direction:row}nv-split[direction=vertical]{flex-direction:column}nv-split .nv-split-gutter{position:absolute;z-index:10;background:transparent;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background-color 0.2s ease}nv-split .nv-split-gutter::after{content:\"\";position:absolute;background:var(--components-splitter-line-background);transition:background-color 0.2s ease}nv-split .nv-split-gutter:hover::after{background:var(--components-splitter-line-background-hover)}nv-split .nv-split-gutter::before{content:\"\";background:var(--components-splitter-handle-background);position:absolute;background-repeat:no-repeat;background-position:center;transition:all 0.2s ease;pointer-events:none}nv-split[direction=horizontal]>.nv-split-gutter{width:var(--splitter-gutter);top:0;bottom:0;transform:translateX(-50%);cursor:col-resize}nv-split[direction=horizontal]>.nv-split-gutter::after{width:var(--splitter-line-width);background-color:var(--components-splitter-line-background);height:100%;left:50%;top:0%;transform:translateX(-50%)}nv-split[direction=horizontal]>.nv-split-gutter:hover::after{background-color:var(--components-splitter-line-background-hover)}nv-split[direction=horizontal]>.nv-split-gutter:active::after{background-color:var(--components-splitter-line-background-active)}nv-split[direction=horizontal]>.nv-split-gutter::before{background-color:var(--components-splitter-handle-background);width:var(--splitter-handle-wide);height:var(--splitter-handle-long);border-radius:var(--splitter-handle-radius);z-index:11;transition:all 0.2s ease}nv-split[direction=horizontal]>.nv-split-gutter:hover::before{background-color:var(--components-splitter-handle-background-hover)}nv-split[direction=horizontal]>.nv-split-gutter:active::before{background-color:var(--components-splitter-handle-background-active)}nv-split[direction=vertical]>.nv-split-gutter{height:var(--splitter-gutter);left:0;right:0;transform:translateY(-50%);cursor:row-resize}nv-split[direction=vertical]>.nv-split-gutter::after{height:var(--splitter-line-width);background-color:var(--components-splitter-line-background);width:100%;top:50%;left:0%;transform:translateY(-50%)}nv-split[direction=vertical]>.nv-split-gutter:hover::after{background-color:var(--components-splitter-line-background-hover)}nv-split[direction=vertical]>.nv-split-gutter:active::after{background-color:var(--components-splitter-line-background-active)}nv-split[direction=vertical]>.nv-split-gutter::before{background-color:var(--components-splitter-handle-background);width:var(--splitter-handle-long);height:var(--splitter-handle-wide);border-radius:var(--splitter-handle-radius);z-index:11;transition:all 0.2s ease}nv-split[direction=vertical]>.nv-split-gutter:hover::before{background-color:var(--components-splitter-handle-background-hover)}nv-split[direction=vertical]>.nv-split-gutter:active::before{background-color:var(--components-splitter-handle-background-active)}nv-split[data-dragging=true]>.nv-split-gutter::after{background:var(--components-splitter-line-background-active)}nv-split>[slot=pane]{flex:1 1 auto;overflow:hidden;min-width:0;min-height:0;display:flex;flex-direction:column}nv-split>[slot=pane]>nv-split{flex:1 1 auto;width:100%;height:100%}";
+const nvSplitCss = "nv-split{display:flex;width:100%;height:100%;position:relative}nv-split[direction=horizontal]{flex-direction:row}nv-split[direction=vertical]{flex-direction:column}nv-split .nv-split-gutter{position:absolute;z-index:10;background:transparent;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background-color 0.2s ease}nv-split .nv-split-gutter::after{content:\"\";position:absolute;background:var(--components-splitter-line-background);transition:background-color 0.2s ease}nv-split .nv-split-gutter:hover::after{background:var(--components-splitter-line-background-hover)}nv-split .nv-split-gutter::before{content:\"\";background:var(--components-splitter-handle-background);position:absolute;background-repeat:no-repeat;background-position:center;transition:all 0.2s ease;pointer-events:none}nv-split[direction=horizontal]>.nv-split-gutter{width:var(--splitter-gutter);top:0;bottom:0;transform:translateX(-50%);cursor:col-resize}nv-split[direction=horizontal]>.nv-split-gutter::after{width:var(--splitter-line-width);background-color:var(--components-splitter-line-background);height:100%;left:50%;top:0%;transform:translateX(-50%)}nv-split[direction=horizontal]>.nv-split-gutter:hover::after{background-color:var(--components-splitter-line-background-hover)}nv-split[direction=horizontal]>.nv-split-gutter:active::after{background-color:var(--components-splitter-line-background-active)}nv-split[direction=horizontal]>.nv-split-gutter::before{background-color:var(--components-splitter-handle-background);width:var(--splitter-handle-wide);height:var(--splitter-handle-long);border-radius:var(--splitter-handle-radius);z-index:11;transition:all 0.2s ease}nv-split[direction=horizontal]>.nv-split-gutter:hover::before{background-color:var(--components-splitter-handle-background-hover)}nv-split[direction=horizontal]>.nv-split-gutter:active::before{background-color:var(--components-splitter-handle-background-active)}nv-split[direction=vertical]>.nv-split-gutter{height:var(--splitter-gutter);left:0;right:0;transform:translateY(-50%);cursor:row-resize}nv-split[direction=vertical]>.nv-split-gutter::after{height:var(--splitter-line-width);background-color:var(--components-splitter-line-background);width:100%;top:50%;left:0%;transform:translateY(-50%)}nv-split[direction=vertical]>.nv-split-gutter:hover::after{background-color:var(--components-splitter-line-background-hover)}nv-split[direction=vertical]>.nv-split-gutter:active::after{background-color:var(--components-splitter-line-background-active)}nv-split[direction=vertical]>.nv-split-gutter::before{background-color:var(--components-splitter-handle-background);width:var(--splitter-handle-long);height:var(--splitter-handle-wide);border-radius:var(--splitter-handle-radius);z-index:11;transition:all 0.2s ease}nv-split[direction=vertical]>.nv-split-gutter:hover::before{background-color:var(--components-splitter-handle-background-hover)}nv-split[direction=vertical]>.nv-split-gutter:active::before{background-color:var(--components-splitter-handle-background-active)}nv-split[data-dragging=true]>.nv-split-gutter::after{background:var(--components-splitter-line-background-active)}nv-split>[slot=pane]{box-sizing:border-box;flex:1 1 auto;overflow:hidden;min-width:0;min-height:0;display:flex;flex-direction:column;margin:0 !important}nv-split>[slot=pane]>nv-split{flex:1 1 auto;width:100%;height:100%}";
 const NvSplit$1 = /*@__PURE__*/ proxyCustomElement(class NvSplit extends H {
     constructor(registerHost) {
@@ -36,7 +36,7 @@ const NvSplit$1 = /*@__PURE__*/ proxyCustomElement(class NvSplit extends H {
         this.startPos = 0;
         this.startSizes = [];
         // Handlers stored to be able to detach them
-        this.onDocMove = (ev) => this.handleMouseMove(ev);
+        this.onDocMove = (e) => this.handleMouseMove(e);
         this.onDocUp = () => this.stopDragging();
     }
     //#endregion
@@ -57,18 +57,20 @@ const NvSplit$1 = /*@__PURE__*/ proxyCustomElement(class NvSplit extends H {
     componentDidLoad() {
         // Initialization (once)
         this.ensureGutters();
-        this.applySizes();
-        this.positionGutters();
-        // Observer: reposition gutters when resized (nested or parent split changes)
+        // Defer applySizes to ensure CSS (margins, padding) is computed
+        requestAnimationFrame(() => {
+            this.applySizes();
+            this.positionGutters();
+        });
+        // Observer: reposition gutters when resized
         this.ro = new ResizeObserver(() => this.positionGutters());
         this.ro.observe(this.el);
         window.addEventListener('resize', () => this.positionGutters());
     }
     disconnectedCallback() {
-        var _a;
         // Security cleanup (in case a drag was in progress)
         this.detachDocumentListeners();
-        (_a = this.ro) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.ro?.disconnect();
         this.ro = undefined;
     }
     //#endregion
@@ -116,13 +118,12 @@ const NvSplit$1 = /*@__PURE__*/ proxyCustomElement(class NvSplit extends H {
      * @returns {Promise<void>}
      */
     async destroy() {
-        var _a;
         this.sizes = [];
         this.isDragging = false;
         this.dragIndex = -1;
         this.removeOwnGutters();
         this.detachDocumentListeners();
-        (_a = this.ro) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.ro?.disconnect();
     }
     //#endregion
     /****************************************************************************/
@@ -197,15 +198,14 @@ const NvSplit$1 = /*@__PURE__*/ proxyCustomElement(class NvSplit extends H {
             this.sizes = Array(n).fill(100 / n);
         }
         panes.forEach((pane, i) => {
-            var _a;
-            const size = Math.max(0, (_a = this.sizes[i]) !== null && _a !== void 0 ? _a : 100 / n);
-            // Flex-basis via flex shorthand (https://developer.mozilla.org/en-US/docs/Web/CSS/flex)
+            const size = Math.max(0, this.sizes[i] ?? 100 / n);
             pane.style.flex = `0 0 ${size}%`;
             pane.style.minWidth = '0';
             pane.style.minHeight = '0';
-            pane.style.overflow = 'hidden'; // let a nv-split child extend
+            pane.style.overflow = 'hidden';
             pane.style.display = 'flex';
             pane.style.flexDirection = 'column';
+            pane.style.boxSizing = 'border-box';
         });
         this.positionGutters();
     }
@@ -227,7 +227,6 @@ const NvSplit$1 = /*@__PURE__*/ proxyCustomElement(class NvSplit extends H {
      * Positions the gutters based on the current sizes of the panes.
      */
     positionGutters() {
-        var _a, _b;
         const panes = this.getPanes();
         const gutters = this.getOwnGutters();
         if (panes.length <= 1 || gutters.length === 0)
@@ -235,7 +234,7 @@ const NvSplit$1 = /*@__PURE__*/ proxyCustomElement(class NvSplit extends H {
         const horizontal = this.direction === 'horizontal';
         let cumPct = 0;
         for (let i = 0; i < gutters.length; i++) {
-            const sizePct = (_b = (_a = this.sizes) === null || _a === void 0 ? void 0 : _a[i]) !== null && _b !== void 0 ? _b : 100 / panes.length;
+            const sizePct = this.sizes?.[i] ?? 100 / panes.length;
             cumPct += sizePct;
             const g = gutters[i];
             g.style.position = 'absolute';
@@ -244,68 +243,70 @@ const NvSplit$1 = /*@__PURE__*/ proxyCustomElement(class NvSplit extends H {
                 g.style.top = '0';
                 g.style.bottom = '0';
                 g.style.height = '100%';
+                g.style.transform = 'translateX(-50%)';
             }
             else {
                 g.style.top = `${cumPct}%`;
                 g.style.left = '0';
                 g.style.right = '0';
                 g.style.width = '100%';
+                g.style.transform = 'translateY(-50%)';
             }
         }
     }
     /**
      * Starts the dragging process.
-     * @param {MouseEvent} ev - The mouse event.
+     * @param {MouseEvent} e - The mouse event.
      * @param {number} index - The index of the gutter.
      */
-    startDragging(ev, index) {
+    startDragging(e, index) {
+        e.preventDefault();
         this.isDragging = true;
         this.dragIndex = index;
-        this.startPos = this.direction === 'horizontal' ? ev.clientX : ev.clientY;
+        this.startPos = this.direction === 'horizontal' ? e.clientX : e.clientY;
         this.startSizes = [...this.sizes];
         this.attachDocumentListeners();
+        this.sizesChanged.emit([...this.sizes]);
     }
     /**
      * Handles the mouse movement during dragging.
-     * @param {MouseEvent} ev - The mouse event.
+     * @param {MouseEvent} e - The mouse event.
      */
-    handleMouseMove(ev) {
-        var _a, _b, _c, _d;
+    handleMouseMove(e) {
         if (!this.isDragging || this.dragIndex < 0)
             return;
         const panes = this.getPanes();
         if (panes.length < 2)
             return;
         const rect = this.el.getBoundingClientRect();
-        // Ensure we never divide by zero if the element has zero width/height
-        const rawSize = this.direction === 'horizontal' ? rect.width : rect.height;
-        const totalPx = Math.max(rawSize, 1);
-        const deltaPx = (this.direction === 'horizontal' ? ev.clientX : ev.clientY) -
-            this.startPos;
+        const horizontal = this.direction === 'horizontal';
+        const totalPx = Math.max(horizontal ? rect.width : rect.height, 1);
+        const deltaPx = (horizontal ? e.clientX : e.clientY) - this.startPos;
         const deltaPct = (deltaPx / totalPx) * 100;
         const i = this.dragIndex;
         const j = i + 1;
-        let left = this.startSizes[i] + deltaPct;
-        let right = this.startSizes[j] - deltaPct;
+        const startLeft = this.startSizes[i];
+        const startRight = this.startSizes[j];
         // minSizes (px) -> %
-        const minLeftPct = (((_b = (_a = this.minSizes) === null || _a === void 0 ? void 0 : _a[i]) !== null && _b !== void 0 ? _b : 0) / totalPx) * 100;
-        const minRightPct = (((_d = (_c = this.minSizes) === null || _c === void 0 ? void 0 : _c[j]) !== null && _d !== void 0 ? _d : 0) / totalPx) * 100;
-        left = Math.max(left, minLeftPct);
-        right = Math.max(right, minRightPct);
-        // Keep the sum of the pair i/j constant
-        const pairSum = left + right;
-        const targetSum = this.startSizes[i] + this.startSizes[j];
-        if (Math.abs(pairSum - targetSum) > 0.0001) {
-            const k = targetSum / (pairSum || 1);
-            left *= k;
-            right *= k;
+        let minLeftPct = ((this.minSizes?.[i] ?? 0) / totalPx) * 100;
+        let minRightPct = ((this.minSizes?.[j] ?? 0) / totalPx) * 100;
+        const minSum = minLeftPct + minRightPct;
+        const availableSum = startLeft + startRight;
+        if (minSum > availableSum) {
+            const scale = availableSum / minSum;
+            minLeftPct *= scale;
+            minRightPct *= scale;
         }
+        const minDelta = minLeftPct - startLeft;
+        const maxDelta = startRight - minRightPct;
+        const clampedDelta = Math.min(Math.max(deltaPct, minDelta), maxDelta);
+        const left = startLeft + clampedDelta;
+        const right = startRight - clampedDelta;
         const next = [...this.startSizes];
         next[i] = left;
         next[j] = right;
         this.sizes = next;
         this.applySizes();
-        this.sizesChanged.emit([...this.sizes]);
         this.positionGutters();
     }
     /**
@@ -317,12 +318,13 @@ const NvSplit$1 = /*@__PURE__*/ proxyCustomElement(class NvSplit extends H {
         this.isDragging = false;
         this.dragIndex = -1;
         this.detachDocumentListeners();
+        this.sizesChanged.emit([...this.sizes]);
     }
     //#endregion
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '2266f982349909b08637721e0bf5d8792fa2f3aa', "data-dragging": this.isDragging.toString() }, h("slot", { key: '0b0845ae2f93bb137692fd570beaa2e26816c1c9', name: "pane" }), h("slot", { key: 'ac322712eb7024dde9efc41dac946196fd15a786', name: "gutter" })));
+        return (h(Host, { key: '850cf8fb9d492e1da39da0037c1fd8d414960d28', "data-dragging": this.isDragging.toString() }, h("slot", { key: '4d2f540ca147abe4778bcc0d02be2e87ee2cf3b4', name: "pane" }), h("slot", { key: '1ceb2dc6375c50fe7786ba03fb2a753f852980ba', name: "gutter" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/nv-split.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nv-split.js","mappings":"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","names":["NvSplit","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/nv-split/styles/nv-split.scss?tag=nv-split","src/components/nv-split/nv-split.tsx"],"sourcesContent":["@use './mixins' as ;\n@use './variables' as ;\n\nnv-split {\n display: flex;\n width: 100%;\n height: 100%;\n position: relative;\n\n &[direction='horizontal'] {\n flex-direction: row;\n }\n\n &[direction='vertical'] {\n flex-direction: column;\n }\n\n .nv-split-gutter {\n @include split-gutter-base;\n }\n\n &[direction='horizontal'] > .nv-split-gutter {\n @include split-gutter-horizontal;\n }\n\n &[direction='vertical'] > .nv-split-gutter {\n @include split-gutter-vertical;\n }\n\n &[data-dragging='true'] > .nv-split-gutter::after {\n background: $nv-split-line-background-active;\n }\n\n > [slot='pane'] {\n flex: 1 1 auto;\n overflow: hidden;\n min-width: 0;\n min-height: 0;\n display: flex;\n flex-direction: column;\n }\n\n > [slot='pane'] > nv-split {\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Method,\n State,\n Watch,\n} from '@stencil/core';\n\n/*\n The `nv-split` component is an advanced layout container that enables the creation of interactively resizable panels. It provides a flexible solution for dividing available space between multiple interface sections, with precise control over dimensions and constraints for each panel.\n * @slot pane - Content of each split pane. Use multiple `<div slot=\"pane\">` elements.\n * @slot gutter - Optional custom content inside every gutter handle.\n /\n@Component({\n tag: 'nv-split',\n styleUrl: 'styles/nv-split.scss',\n shadow: false,\n})\nexport class NvSplit {\n @Element() el: HTMLNvSplitElement;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Direction of the split layout.\n * - `horizontal`: panes side by side\n * - `vertical`: panes stacked\n /\n @Prop({ reflect: true })\n readonly direction: 'horizontal' \| 'vertical' = 'horizontal';\n\n /\n Initial sizes of the panes in percentages.\n * Example: `[50, 50]` means two equal panes.\n * Explicitly `reflect: false` (array) for framework compatibility.\n /\n @Prop({ mutable: true, reflect: false })\n sizes: number[] = [];\n\n /\n Minimum sizes (in px) for each pane.\n * Example: `[100, 200]` => first pane min 100px, second min 200px.\n * Explicitly `reflect: false` (array) for framework compatibility.\n /\n @Prop({ reflect: false })\n readonly minSizes?: number[];\n\n /\n Width or height of the gutter (in px) depending on the split direction.\n * Default is 24px to meet WCAG 2.2 target size requirements for touch accessibility.\n /\n @Prop({ reflect: true })\n readonly gutterSize: number = 24;\n\n //#endregion\n /*************************************************************************/\n //#region STATE\n\n @State()\n private isDragging: boolean = false;\n\n private dragIndex: number = -1;\n private startPos: number = 0;\n private startSizes: number[] = [];\n private ro?: ResizeObserver;\n\n // Handlers stored to be able to detach them\n private onDocMove = (ev: MouseEvent) => this.handleMouseMove(ev);\n private onDocUp = () => this.stopDragging();\n\n //#endregion\n /************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when pane sizes are updated (either via dragging or programmatically).\n * @bind sizes\n /\n @Event({ bubbles: false })\n sizesChanged: EventEmitter<number[]>;\n\n //#endregion\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('sizes')\n protected onSizesChanged(): void {\n // Re-apply sizes if modified from the outside\n this.applySizes();\n }\n\n @Watch('direction')\n protected onDirectionChanged(): void {\n // Update the orientation and the cursors of the gutters\n this.ensureGutters();\n this.applySizes();\n }\n\n //#endregion\n /************************************************************************/\n //#region LIFECYCLE\n\n componentDidLoad(): void {\n // Initialization (once)\n this.ensureGutters();\n this.applySizes();\n this.positionGutters();\n\n // Observer: reposition gutters when resized (nested or parent split changes)\n this.ro = new ResizeObserver(() => this.positionGutters());\n this.ro.observe(this.el);\n\n window.addEventListener('resize', () => this.positionGutters());\n }\n\n disconnectedCallback(): void {\n // Security cleanup (in case a drag was in progress)\n this.detachDocumentListeners();\n this.ro?.disconnect();\n this.ro = undefined;\n }\n\n //#endregion\n /************************************************************************/\n //#region PUBLIC METHODS\n\n /\n * Programmatically set pane sizes.\n * @param {Array<number>} sizes Array of pane sizes in percentages.\n * @returns {Promise<void>}\n /\n @Method()\n async setSizes(sizes: number[]): Promise<void> {\n this.sizes = [...sizes];\n this.applySizes();\n this.sizesChanged.emit([...this.sizes]);\n this.positionGutters();\n }\n\n /\n Returns the current pane sizes.\n * @returns {Promise<number[]>} Array of pane sizes in percentages.\n /\n @Method()\n async getSizes(): Promise<number[]> {\n return [...this.sizes];\n }\n\n /\n Collapse a specific pane to 0 size.\n * @param {number} index Index of the pane to collapse.\n * @returns {Promise<void>}\n /\n @Method()\n async collapse(index: number): Promise<void> {\n const panes = this.getPanes();\n if (index < 0 \|\| index >= panes.length) return;\n\n // Simple strategy: 0% for the index, the rest (100%) for its nearest neighbor\n const next = new Array(panes.length).fill(0);\n const target = index < panes.length - 1 ? index + 1 : index - 1;\n if (target >= 0) next[target] = 100;\n\n this.sizes = next;\n this.applySizes();\n this.sizesChanged.emit([...this.sizes]);\n this.positionGutters();\n }\n\n /\n Destroy the split instance: removes gutters and resets layout state.\n * @returns {Promise<void>}\n /\n @Method()\n async destroy(): Promise<void> {\n this.sizes = [];\n this.isDragging = false;\n this.dragIndex = -1;\n this.removeOwnGutters();\n this.detachDocumentListeners();\n this.ro?.disconnect();\n }\n\n //#endregion\n /*************************************************************************/\n //#region INTERNAL HELPERS\n\n /\n * Returns the panes of the split.\n * @returns {HTMLElement[]} The panes of the split.\n /\n private getPanes(): HTMLElement[] {\n // Only the direct children slot=\"pane\"\n return Array.from(\n this.el.querySelectorAll<HTMLElement>(':scope > [slot=\"pane\"]'),\n );\n }\n\n /\n Returns the own gutters of the split.\n * @returns {HTMLElement[]} The own gutters of the split.\n /\n private getOwnGutters(): HTMLElement[] {\n // Only the direct gutters of THIS instance\n return Array.from(\n this.el.querySelectorAll<HTMLElement>(\n ':scope > .nv-split-gutter[data-auto=\"true\"]',\n ),\n );\n }\n\n /\n Removes the own gutters of the split.\n /\n private removeOwnGutters(): void {\n this.getOwnGutters().forEach(g => g.remove());\n }\n\n /\n Ensures the gutters of the split.\n /\n private ensureGutters(): void {\n const panes = this.getPanes();\n\n // 1) Clean ONLY the old direct gutters of THIS instance\n this.removeOwnGutters();\n\n if (panes.length <= 1) return;\n\n // 2) Add the gutters (directs) between the panes\n panes.forEach((pane, i) => {\n if (i >= panes.length - 1) return;\n\n const g = document.createElement('div');\n g.className = 'nv-split-gutter';\n g.setAttribute('data-auto', 'true');\n\n if (this.direction === 'horizontal') {\n g.style.width = `${this.gutterSize}px`;\n g.style.cursor = 'col-resize';\n } else {\n g.style.height = `${this.gutterSize}px`;\n g.style.cursor = 'row-resize';\n }\n\n // Customizable internal slot\n const slotEl = document.createElement('slot');\n slotEl.name = 'gutter';\n g.appendChild(slotEl);\n\n // Listener drag (index = gutter between pane i and i+1)\n g.addEventListener('mousedown', (ev: MouseEvent) =>\n this.startDragging(ev, i),\n );\n\n // Insert just after the pane\n pane.insertAdjacentElement('afterend', g);\n });\n\n this.positionGutters();\n }\n\n /\n Applies the sizes to the panes.\n /\n private applySizes(): void {\n const panes = this.getPanes();\n const n = panes.length;\n if (n === 0) return;\n\n // Default values if inconsistent\n if (!this.sizes \|\| this.sizes.length !== n) {\n this.sizes = Array(n).fill(100 / n);\n }\n\n panes.forEach((pane, i) => {\n const size = Math.max(0, this.sizes[i] ?? 100 / n);\n // Flex-basis via flex shorthand (https://developer.mozilla.org/en-US/docs/Web/CSS/flex)\n pane.style.flex = `0 0 ${size}%`;\n pane.style.minWidth = '0';\n pane.style.minHeight = '0';\n pane.style.overflow = 'hidden'; // let a nv-split child extend\n pane.style.display = 'flex';\n pane.style.flexDirection = 'column';\n });\n\n this.positionGutters();\n }\n\n /\n Attaches the document listeners.\n /\n private attachDocumentListeners(): void {\n document.addEventListener('mousemove', this.onDocMove);\n document.addEventListener('mouseup', this.onDocUp);\n }\n\n /\n Detaches the document listeners.\n /\n private detachDocumentListeners(): void {\n document.removeEventListener('mousemove', this.onDocMove);\n document.removeEventListener('mouseup', this.onDocUp);\n }\n\n /\n Positions the gutters based on the current sizes of the panes.\n /\n private positionGutters(): void {\n const panes = this.getPanes();\n const gutters = this.getOwnGutters();\n if (panes.length <= 1 \|\| gutters.length === 0) return;\n\n const horizontal = this.direction === 'horizontal';\n let cumPct = 0;\n\n for (let i = 0; i < gutters.length; i++) {\n const sizePct = this.sizes?.[i] ?? 100 / panes.length;\n cumPct += sizePct;\n\n const g = gutters[i];\n g.style.position = 'absolute';\n\n if (horizontal) {\n g.style.left = `${cumPct}%`;\n g.style.top = '0';\n g.style.bottom = '0';\n g.style.height = '100%';\n } else {\n g.style.top = `${cumPct}%`;\n g.style.left = '0';\n g.style.right = '0';\n g.style.width = '100%';\n }\n }\n }\n\n /\n Starts the dragging process.\n * @param {MouseEvent} ev - The mouse event.\n * @param {number} index - The index of the gutter.\n /\n private startDragging(ev: MouseEvent, index: number): void {\n this.isDragging = true;\n this.dragIndex = index;\n this.startPos = this.direction === 'horizontal' ? ev.clientX : ev.clientY;\n this.startSizes = [...this.sizes];\n this.attachDocumentListeners();\n }\n\n /\n Handles the mouse movement during dragging.\n * @param {MouseEvent} ev - The mouse event.\n /\n private handleMouseMove(ev: MouseEvent): void {\n if (!this.isDragging \|\| this.dragIndex < 0) return;\n\n const panes = this.getPanes();\n if (panes.length < 2) return;\n\n const rect = this.el.getBoundingClientRect();\n\n // Ensure we never divide by zero if the element has zero width/height\n const rawSize = this.direction === 'horizontal' ? rect.width : rect.height;\n const totalPx = Math.max(rawSize, 1);\n\n const deltaPx =\n (this.direction === 'horizontal' ? ev.clientX : ev.clientY) -\n this.startPos;\n const deltaPct = (deltaPx / totalPx) 100;\n\n const i = this.dragIndex;\n const j = i + 1;\n\n let left = this.startSizes[i] + deltaPct;\n let right = this.startSizes[j] - deltaPct;\n\n // minSizes (px) -> %\n const minLeftPct = ((this.minSizes?.[i] ?? 0) / totalPx) * 100;\n const minRightPct = ((this.minSizes?.[j] ?? 0) / totalPx) * 100;\n\n left = Math.max(left, minLeftPct);\n right = Math.max(right, minRightPct);\n\n // Keep the sum of the pair i/j constant\n const pairSum = left + right;\n const targetSum = this.startSizes[i] + this.startSizes[j];\n if (Math.abs(pairSum - targetSum) > 0.0001) {\n const k = targetSum / (pairSum \|\| 1);\n left = k;\n right = k;\n }\n\n const next = [...this.startSizes];\n next[i] = left;\n next[j] = right;\n\n this.sizes = next;\n this.applySizes();\n this.sizesChanged.emit([...this.sizes]);\n this.positionGutters();\n }\n\n /*\n Stops the dragging process.\n /\n private stopDragging(): void {\n if (!this.isDragging) return;\n this.isDragging = false;\n this.dragIndex = -1;\n this.detachDocumentListeners();\n }\n\n //#endregion\n /*************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host data-dragging={this.isDragging.toString()}>\n <slot name=\"pane\"></slot>\n <slot name=\"gutter\"></slot>\n </Host>\n );\n }\n\n //#endregion\n /**************************************************************************/\n}\n"],"version":3}
1	+ {"file":"nv-split.js","mappings":"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","names":["NvSplit","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/nv-split/styles/nv-split.scss?tag=nv-split","src/components/nv-split/nv-split.tsx"],"sourcesContent":["@use './mixins' as ;\n@use './variables' as ;\n\nnv-split {\n display: flex;\n width: 100%;\n height: 100%;\n position: relative;\n\n &[direction='horizontal'] {\n flex-direction: row;\n }\n\n &[direction='vertical'] {\n flex-direction: column;\n }\n\n .nv-split-gutter {\n @include split-gutter-base;\n }\n\n &[direction='horizontal'] > .nv-split-gutter {\n @include split-gutter-horizontal;\n }\n\n &[direction='vertical'] > .nv-split-gutter {\n @include split-gutter-vertical;\n }\n\n &[data-dragging='true'] > .nv-split-gutter::after {\n background: $nv-split-line-background-active;\n }\n\n > [slot='pane'] {\n box-sizing: border-box;\n flex: 1 1 auto;\n overflow: hidden;\n min-width: 0;\n min-height: 0;\n display: flex;\n flex-direction: column;\n // Margins break flex-basis calculations - apply margins on content inside pane instead\n margin: 0 !important;\n }\n\n > [slot='pane'] > nv-split {\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Method,\n State,\n Watch,\n} from '@stencil/core';\n\n/*\n The `nv-split` component is an advanced layout container that enables the creation of interactively resizable panels. It provides a flexible solution for dividing available space between multiple interface sections, with precise control over dimensions and constraints for each panel. Slot=“pane” elements have margin: 0 !important by default. This is a necessary technical constraint because CSS margins are not included in the flex-basis calculation, which would distort the sizing of the panes. Solution for the user: Apply margins/padding to the content inside the pane, not to the pane itself.\n * @slot pane - Content of each split pane. Use multiple `<div slot=\"pane\">` elements.\n * @slot gutter - Optional custom content inside every gutter handle.\n /\n@Component({\n tag: 'nv-split',\n styleUrl: 'styles/nv-split.scss',\n shadow: false,\n})\nexport class NvSplit {\n @Element() el: HTMLNvSplitElement;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Direction of the split layout.\n * - `horizontal`: panes side by side\n * - `vertical`: panes stacked\n /\n @Prop({ reflect: true })\n readonly direction: 'horizontal' \| 'vertical' = 'horizontal';\n\n /\n Initial sizes of the panes in percentages.\n * Example: `[50, 50]` means two equal panes.\n * Explicitly `reflect: false` (array) for framework compatibility.\n /\n @Prop({ mutable: true, reflect: false })\n sizes: number[] = [];\n\n /\n Minimum sizes (in px) for each pane.\n * Example: `[100, 200]` => first pane min 100px, second min 200px.\n * Explicitly `reflect: false` (array) for framework compatibility.\n /\n @Prop({ reflect: false })\n readonly minSizes?: number[];\n\n /\n Width or height of the gutter (in px) depending on the split direction.\n * Default is 24px to meet WCAG 2.2 target size requirements for touch accessibility.\n /\n @Prop({ reflect: true })\n readonly gutterSize: number = 24;\n\n //#endregion\n /*************************************************************************/\n //#region STATE\n\n @State()\n private isDragging: boolean = false;\n\n private dragIndex: number = -1;\n private startPos: number = 0;\n private startSizes: number[] = [];\n private ro?: ResizeObserver;\n\n // Handlers stored to be able to detach them\n private onDocMove = (e: MouseEvent) => this.handleMouseMove(e);\n private onDocUp = () => this.stopDragging();\n\n //#endregion\n /************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when pane sizes are updated (drag start/stop or programmatically).\n * @bind sizes\n /\n @Event({ bubbles: false })\n sizesChanged: EventEmitter<number[]>;\n\n //#endregion\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('sizes')\n protected onSizesChanged(): void {\n // Re-apply sizes if modified from the outside\n this.applySizes();\n }\n\n @Watch('direction')\n protected onDirectionChanged(): void {\n // Update the orientation and the cursors of the gutters\n this.ensureGutters();\n this.applySizes();\n }\n\n //#endregion\n /************************************************************************/\n //#region LIFECYCLE\n\n componentDidLoad(): void {\n // Initialization (once)\n this.ensureGutters();\n\n // Defer applySizes to ensure CSS (margins, padding) is computed\n requestAnimationFrame(() => {\n this.applySizes();\n this.positionGutters();\n });\n\n // Observer: reposition gutters when resized\n this.ro = new ResizeObserver(() => this.positionGutters());\n this.ro.observe(this.el);\n\n window.addEventListener('resize', () => this.positionGutters());\n }\n\n disconnectedCallback(): void {\n // Security cleanup (in case a drag was in progress)\n this.detachDocumentListeners();\n this.ro?.disconnect();\n this.ro = undefined;\n }\n\n //#endregion\n /************************************************************************/\n //#region PUBLIC METHODS\n\n /\n * Programmatically set pane sizes.\n * @param {Array<number>} sizes Array of pane sizes in percentages.\n * @returns {Promise<void>}\n /\n @Method()\n async setSizes(sizes: number[]): Promise<void> {\n this.sizes = [...sizes];\n this.applySizes();\n this.sizesChanged.emit([...this.sizes]);\n this.positionGutters();\n }\n\n /\n Returns the current pane sizes.\n * @returns {Promise<number[]>} Array of pane sizes in percentages.\n /\n @Method()\n async getSizes(): Promise<number[]> {\n return [...this.sizes];\n }\n\n /\n Collapse a specific pane to 0 size.\n * @param {number} index Index of the pane to collapse.\n * @returns {Promise<void>}\n /\n @Method()\n async collapse(index: number): Promise<void> {\n const panes = this.getPanes();\n if (index < 0 \|\| index >= panes.length) return;\n\n // Simple strategy: 0% for the index, the rest (100%) for its nearest neighbor\n const next = new Array(panes.length).fill(0);\n const target = index < panes.length - 1 ? index + 1 : index - 1;\n if (target >= 0) next[target] = 100;\n\n this.sizes = next;\n this.applySizes();\n this.sizesChanged.emit([...this.sizes]);\n this.positionGutters();\n }\n\n /\n Destroy the split instance: removes gutters and resets layout state.\n * @returns {Promise<void>}\n /\n @Method()\n async destroy(): Promise<void> {\n this.sizes = [];\n this.isDragging = false;\n this.dragIndex = -1;\n this.removeOwnGutters();\n this.detachDocumentListeners();\n this.ro?.disconnect();\n }\n\n //#endregion\n /*************************************************************************/\n //#region INTERNAL HELPERS\n\n /\n * Returns the panes of the split.\n * @returns {HTMLElement[]} The panes of the split.\n /\n private getPanes(): HTMLElement[] {\n // Only the direct children slot=\"pane\"\n return Array.from(\n this.el.querySelectorAll<HTMLElement>(':scope > [slot=\"pane\"]'),\n );\n }\n\n /\n Returns the own gutters of the split.\n * @returns {HTMLElement[]} The own gutters of the split.\n /\n private getOwnGutters(): HTMLElement[] {\n // Only the direct gutters of THIS instance\n return Array.from(\n this.el.querySelectorAll<HTMLElement>(\n ':scope > .nv-split-gutter[data-auto=\"true\"]',\n ),\n );\n }\n\n /\n Removes the own gutters of the split.\n /\n private removeOwnGutters(): void {\n this.getOwnGutters().forEach(g => g.remove());\n }\n\n /\n Ensures the gutters of the split.\n /\n private ensureGutters(): void {\n const panes = this.getPanes();\n\n // 1) Clean ONLY the old direct gutters of THIS instance\n this.removeOwnGutters();\n\n if (panes.length <= 1) return;\n\n // 2) Add the gutters (directs) between the panes\n panes.forEach((pane, i) => {\n if (i >= panes.length - 1) return;\n\n const g = document.createElement('div');\n g.className = 'nv-split-gutter';\n g.setAttribute('data-auto', 'true');\n\n if (this.direction === 'horizontal') {\n g.style.width = `${this.gutterSize}px`;\n g.style.cursor = 'col-resize';\n } else {\n g.style.height = `${this.gutterSize}px`;\n g.style.cursor = 'row-resize';\n }\n\n // Customizable internal slot\n const slotEl = document.createElement('slot');\n slotEl.name = 'gutter';\n g.appendChild(slotEl);\n\n // Listener drag (index = gutter between pane i and i+1)\n g.addEventListener('mousedown', (ev: MouseEvent) =>\n this.startDragging(ev, i),\n );\n\n // Insert just after the pane\n pane.insertAdjacentElement('afterend', g);\n });\n\n this.positionGutters();\n }\n\n /\n Applies the sizes to the panes.\n /\n private applySizes(): void {\n const panes = this.getPanes();\n const n = panes.length;\n if (n === 0) return;\n\n // Default values if inconsistent\n if (!this.sizes \|\| this.sizes.length !== n) {\n this.sizes = Array(n).fill(100 / n);\n }\n\n panes.forEach((pane, i) => {\n const size = Math.max(0, this.sizes[i] ?? 100 / n);\n pane.style.flex = `0 0 ${size}%`;\n pane.style.minWidth = '0';\n pane.style.minHeight = '0';\n pane.style.overflow = 'hidden';\n pane.style.display = 'flex';\n pane.style.flexDirection = 'column';\n pane.style.boxSizing = 'border-box';\n });\n\n this.positionGutters();\n }\n\n /\n Attaches the document listeners.\n /\n private attachDocumentListeners(): void {\n document.addEventListener('mousemove', this.onDocMove);\n document.addEventListener('mouseup', this.onDocUp);\n }\n\n /\n Detaches the document listeners.\n /\n private detachDocumentListeners(): void {\n document.removeEventListener('mousemove', this.onDocMove);\n document.removeEventListener('mouseup', this.onDocUp);\n }\n\n /\n Positions the gutters based on the current sizes of the panes.\n /\n private positionGutters(): void {\n const panes = this.getPanes();\n const gutters = this.getOwnGutters();\n if (panes.length <= 1 \|\| gutters.length === 0) return;\n\n const horizontal = this.direction === 'horizontal';\n let cumPct = 0;\n\n for (let i = 0; i < gutters.length; i++) {\n const sizePct = this.sizes?.[i] ?? 100 / panes.length;\n cumPct += sizePct;\n\n const g = gutters[i];\n g.style.position = 'absolute';\n\n if (horizontal) {\n g.style.left = `${cumPct}%`;\n g.style.top = '0';\n g.style.bottom = '0';\n g.style.height = '100%';\n g.style.transform = 'translateX(-50%)';\n } else {\n g.style.top = `${cumPct}%`;\n g.style.left = '0';\n g.style.right = '0';\n g.style.width = '100%';\n g.style.transform = 'translateY(-50%)';\n }\n }\n }\n\n /\n Starts the dragging process.\n * @param {MouseEvent} e - The mouse event.\n * @param {number} index - The index of the gutter.\n /\n private startDragging(e: MouseEvent, index: number): void {\n e.preventDefault();\n this.isDragging = true;\n this.dragIndex = index;\n this.startPos = this.direction === 'horizontal' ? e.clientX : e.clientY;\n this.startSizes = [...this.sizes];\n this.attachDocumentListeners();\n this.sizesChanged.emit([...this.sizes]);\n }\n\n /\n Handles the mouse movement during dragging.\n * @param {MouseEvent} e - The mouse event.\n /\n private handleMouseMove(e: MouseEvent): void {\n if (!this.isDragging \|\| this.dragIndex < 0) return;\n\n const panes = this.getPanes();\n if (panes.length < 2) return;\n\n const rect = this.el.getBoundingClientRect();\n const horizontal = this.direction === 'horizontal';\n const totalPx = Math.max(horizontal ? rect.width : rect.height, 1);\n\n const deltaPx = (horizontal ? e.clientX : e.clientY) - this.startPos;\n const deltaPct = (deltaPx / totalPx) 100;\n\n const i = this.dragIndex;\n const j = i + 1;\n\n const startLeft = this.startSizes[i];\n const startRight = this.startSizes[j];\n\n // minSizes (px) -> %\n let minLeftPct = ((this.minSizes?.[i] ?? 0) / totalPx) * 100;\n let minRightPct = ((this.minSizes?.[j] ?? 0) / totalPx) * 100;\n\n const minSum = minLeftPct + minRightPct;\n const availableSum = startLeft + startRight;\n if (minSum > availableSum) {\n const scale = availableSum / minSum;\n minLeftPct = scale;\n minRightPct = scale;\n }\n\n const minDelta = minLeftPct - startLeft;\n const maxDelta = startRight - minRightPct;\n const clampedDelta = Math.min(Math.max(deltaPct, minDelta), maxDelta);\n\n const left = startLeft + clampedDelta;\n const right = startRight - clampedDelta;\n\n const next = [...this.startSizes];\n next[i] = left;\n next[j] = right;\n\n this.sizes = next;\n this.applySizes();\n this.positionGutters();\n }\n\n /*\n Stops the dragging process.\n /\n private stopDragging(): void {\n if (!this.isDragging) return;\n this.isDragging = false;\n this.dragIndex = -1;\n this.detachDocumentListeners();\n this.sizesChanged.emit([...this.sizes]);\n }\n\n //#endregion\n /*************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host data-dragging={this.isDragging.toString()}>\n <slot name=\"pane\"></slot>\n <slot name=\"gutter\"></slot>\n </Host>\n );\n }\n\n //#endregion\n /**************************************************************************/\n}\n"],"version":3}

package/dist/components/nv-stack.js CHANGED Viewed

@@ -21,7 +21,7 @@ const NvStack$1 = /*@__PURE__*/ proxyCustomElement(class NvStack extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'fbdaf5b2fb134b050883a512b4aeb96b070017c1', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, h("slot", { key: '6c7c231b8ff2575a1b509539d227468629fae6ab' })));
+        return (h(Host, { key: '7b44b30e42b8df1c456f70b1f3be986e2fce1617', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, h("slot", { key: 'd38b6f0c043959ed97b3e90d21309ab832713b4e' })));
     }
     static get style() { return nvStackCss; }
 }, [260, "nv-stack", {

package/dist/components/nv-table.js CHANGED Viewed

@@ -63,7 +63,7 @@ function calculateNewWidth(startWidth, delta, minWidth = TABLE_CONSTANTS.MIN_W)
  * @returns {element is HTMLTableCellElement} Type guard for table cell elements
  */
 function isValidTableCell(element) {
-    return (element === null || element === void 0 ? void 0 : element.tagName) === 'TH' || (element === null || element === void 0 ? void 0 : element.tagName) === 'TD';
+    return element?.tagName === 'TH' || element?.tagName === 'TD';
 }
 /**
  * Finds the closest table cell element from an event target
@@ -83,12 +83,11 @@ function getClosestTableCell(target) {
  * @returns {boolean} True if capture was successfully set
  */
 function setPointerCapture(cell, pointerId) {
-    var _a;
     try {
-        (_a = cell.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(cell, pointerId);
+        cell.setPointerCapture?.(pointerId);
         return true;
     }
-    catch (_b) {
+    catch {
         return false;
     }
 }
@@ -99,12 +98,11 @@ function setPointerCapture(cell, pointerId) {
  * @returns {boolean} True if release was successful
  */
 function releasePointerCapture(cell, pointerId) {
-    var _a;
     try {
-        (_a = cell.releasePointerCapture) === null || _a === void 0 ? void 0 : _a.call(cell, pointerId);
+        cell.releasePointerCapture?.(pointerId);
         return true;
     }
-    catch (_b) {
+    catch {
         return false;
     }
 }
@@ -234,7 +232,7 @@ const NvTable$1 = /*@__PURE__*/ proxyCustomElement(class NvTable extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'ec194bed7ec58642be9f6b52a737e2f9375a152e' }, h("slot", { key: '009ce0f20491156ca93141c85683f0be499a9938' })));
+        return (h(Host, { key: '6d13efcd059cca60b2f6bc092b75b65e36738913' }, h("slot", { key: '33c715acec9e561586c9059f20e77b403307c134' })));
     }
     get host() { return this; }
     static get style() { return nvTableCss; }

package/dist/components/nv-table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nv-table.js","mappings":"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","names":["NvTable","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/nv-table/nv-table.utils.ts","src/components/nv-table/styles/nv-table.scss?tag=nv-table","src/components/nv-table/nv-table.tsx"],"sourcesContent":["/*\n Table utility functions and constants for nv-table component\n \n This module contains pure utility functions for table column resizing logic,\n * pointer event handling calculations, and related helper functions.\n /\n\n/\n Constants for table column resizing behavior\n /\nexport const TABLE_CONSTANTS = Object.freeze({\n /* Handle width for fine pointers (mouse) in pixels /\n HANDLE_W: 12,\n /* Handle width for coarse pointers (touch) in pixels /\n HANDLE_W_TOUCH: 24,\n /* Minimum column width in pixels /\n MIN_W: 40,\n} as const);\n\n/\n Determines the appropriate handle width based on the current pointer type\n * @returns {number} Handle width in pixels (10px for fine pointers, 24px for coarse/touch)\n /\nexport function getHandleWidthForCurrentPointer(): number {\n // Match the CSS media query: wider handle on coarse pointers (touch)\n return matchMedia('(pointer: coarse)').matches\n ? TABLE_CONSTANTS.HANDLE_W_TOUCH\n : TABLE_CONSTANTS.HANDLE_W;\n}\n\n/\n Calculates the pointer's horizontal offset within a table cell\n * @param {PointerEvent} event - The pointer event\n * @param {HTMLTableCellElement} cell - The table cell element\n * @returns {number} The horizontal offset from the left edge of the cell\n /\nexport function getPointerOffsetInCell(\n event: PointerEvent,\n cell: HTMLTableCellElement,\n): number {\n const rect = cell.getBoundingClientRect();\n return event.clientX - rect.left;\n}\n\n/\n Determines if the pointer is within the resize handle area of a table cell\n * @param {number} offsetX - Horizontal offset within the cell\n * @param {number} cellWidth - Total width of the cell\n * @param {number} handleWidth - Width of the resize handle area\n * @returns {boolean} True if the pointer is in the resize handle area\n /\nexport function isInResizeHandle(\n offsetX: number,\n cellWidth: number,\n handleWidth: number,\n): boolean {\n return offsetX >= cellWidth - handleWidth;\n}\n\n/\n Calculates the new column width based on resize delta and constraints\n * @param {number} startWidth - Original width of the column\n * @param {number} delta - Change in pixels from the start position\n * @param {number} minWidth - Minimum allowed width for the column\n * @returns {number} The calculated new width, constrained by minimum\n /\nexport function calculateNewWidth(\n startWidth: number,\n delta: number,\n minWidth: number = TABLE_CONSTANTS.MIN_W,\n): number {\n return Math.max(minWidth, startWidth + delta);\n}\n\n/\n Validates that a table cell element is suitable for resizing\n * @param {HTMLElement \| null} element - The element to check\n * @returns {element is HTMLTableCellElement} Type guard for table cell elements\n /\nexport function isValidTableCell(\n element: HTMLElement \| null,\n): element is HTMLTableCellElement {\n return element?.tagName === 'TH' \|\| element?.tagName === 'TD';\n}\n\n/\n Finds the closest table cell element from an event target\n * @param {EventTarget \| null} target - The event target\n * @returns {HTMLTableCellElement \| null} The closest table cell or null\n /\nexport function getClosestTableCell(\n target: EventTarget \| null,\n): HTMLTableCellElement \| null {\n if (!(target instanceof HTMLElement)) return null;\n\n const cell = target.closest('th, td') as HTMLTableCellElement \| null;\n return isValidTableCell(cell) ? cell : null;\n}\n\n/\n Sets up pointer capture for consistent drag behavior across browsers\n * @param {HTMLTableCellElement} cell - The table cell element\n * @param {number} pointerId - The pointer ID from the pointer event\n * @returns {boolean} True if capture was successfully set\n /\nexport function setPointerCapture(\n cell: HTMLTableCellElement,\n pointerId: number,\n): boolean {\n try {\n cell.setPointerCapture?.(pointerId);\n return true;\n } catch {\n return false;\n }\n}\n\n/\n Releases pointer capture\n * @param {HTMLTableCellElement} cell - The table cell element\n * @param {number} pointerId - The pointer ID from the pointer event\n * @returns {boolean} True if release was successful\n /\nexport function releasePointerCapture(\n cell: HTMLTableCellElement,\n pointerId: number,\n): boolean {\n try {\n cell.releasePointerCapture?.(pointerId);\n return true;\n } catch {\n return false;\n }\n}\n\n/\n Prevents text selection during drag operations\n * @param {boolean} prevent - Whether to prevent selection\n /\nexport function setUserSelectPrevention(prevent: boolean): void {\n document.body.style.userSelect = prevent ? 'none' : '';\n}\n\n/\n Gets the current width of a table cell element\n * @param {HTMLTableCellElement} cell - The table cell element\n * @returns {number} The current width in pixels\n /\nexport function getCellWidth(cell: HTMLTableCellElement): number {\n return cell.offsetWidth;\n}\n\n/\n Applies a width to a table cell element\n * @param {HTMLTableCellElement} cell - The table cell element\n * @param {number} width - The width to apply in pixels\n /\nexport function setCellWidth(cell: HTMLTableCellElement, width: number): void {\n cell.style.width = `${width}px`;\n}\n\n/\n Calculates the delta (change) in horizontal position between two pointer events\n * @param {number} currentX - Current clientX position\n * @param {number} startX - Starting clientX position\n * @returns {number} The horizontal delta\n /\nexport function calculatePointerDelta(\n currentX: number,\n startX: number,\n): number {\n return currentX - startX;\n}\n\n/\n Interface for resize operation state\n /\nexport interface ResizeState {\n /* The table cell being resized /\n resizingCell: HTMLTableCellElement;\n /* The pointer ID for this resize operation /\n pointerId: number;\n /* Starting X coordinate /\n startX: number;\n /* Starting width of the cell /\n startWidth: number;\n}\n\n/\n Creates a new resize state object\n * @param {HTMLTableCellElement} cell - The cell being resized\n * @param {PointerEvent} event - The initiating pointer event\n * @returns {ResizeState} A new resize state object\n /\nexport function createResizeState(\n cell: HTMLTableCellElement,\n event: PointerEvent,\n): ResizeState {\n return {\n resizingCell: cell,\n pointerId: event.pointerId,\n startX: event.clientX,\n startWidth: getCellWidth(cell),\n };\n}\n\n/\n Validates that a resize state is active and matches the given pointer event\n * @param {ResizeState \| null} state - The current resize state\n * @param {PointerEvent} event - The pointer event to validate against\n * @returns {boolean} True if the state is valid for this event\n /\nexport function isValidResizeState(\n state: ResizeState \| null,\n event: PointerEvent,\n): boolean {\n return state !== null && state.pointerId === event.pointerId;\n}\n\n/\n Updates the width of a cell during a resize operation\n * @param {ResizeState} state - The current resize state\n * @param {PointerEvent} event - The current pointer event\n * @param {number} minWidth - Minimum width constraint\n /\nexport function updateCellWidthFromResize(\n state: ResizeState,\n event: PointerEvent,\n minWidth: number = TABLE_CONSTANTS.MIN_W,\n): void {\n const delta = calculatePointerDelta(event.clientX, state.startX);\n const newWidth = calculateNewWidth(state.startWidth, delta, minWidth);\n setCellWidth(state.resizingCell, newWidth);\n}\n","@use \"./mixins\" as ;\n\nnv-table {\n table {\n @include table-styles();\n }\n\n [data-sticky-left] {\n @include sticky-styles('left');\n }\n\n [data-sticky-right] {\n @include sticky-styles('right');\n }\n\n [data-sticky-top] {\n th {\n @include sticky-styles('top');\n }\n }\n}\n","/* eslint-disable @stencil-community/prefer-vdom-listener /\n\n// Useful link for styling help ->\n// https://css-tricks.com/complete-guide-table-element/\n\nimport { Component, Host, h, Listen, Element } from '@stencil/core';\nimport {\n TABLE_CONSTANTS,\n ResizeState,\n getHandleWidthForCurrentPointer,\n getClosestTableCell,\n getPointerOffsetInCell,\n isInResizeHandle,\n createResizeState,\n isValidResizeState,\n updateCellWidthFromResize,\n setPointerCapture,\n releasePointerCapture,\n setUserSelectPrevention,\n getCellWidth,\n} from './nv-table.utils';\n\n/\n @slot default - Child content of the component.\n /\n@Component({\n tag: 'nv-table',\n styleUrl: 'styles/nv-table.scss',\n shadow: false,\n})\nexport class NvTable {\n @Element() host!: HTMLNvTableElement;\n\n private resizeState: ResizeState \| null = null;\n\n /*************************************************************************/\n //#region PROPERTIES\n //#endregion PROPERTIES\n /************************************************************************/\n //#region METHODS\n //#endregion METHODS\n /************************************************************************/\n //#region LISTENERS\n\n @Listen('pointerdown')\n onPointerDown(ev: PointerEvent) {\n const th = getClosestTableCell(ev.target);\n if (!th) return;\n\n // Skip resize if the cell has data-no-resize attribute\n if (th.hasAttribute('data-no-resize')) return;\n\n const offsetX = getPointerOffsetInCell(ev, th);\n const handleWidth = getHandleWidthForCurrentPointer();\n const cellWidth = getCellWidth(th);\n\n // Start only if we're in the resize handle area\n if (!isInResizeHandle(offsetX, cellWidth, handleWidth)) return;\n\n this.resizeState = createResizeState(th, ev);\n\n // Capture so move/up still fire even if the finger leaves the th\n setPointerCapture(th, ev.pointerId);\n\n // Prevent scrolling/selection during drag\n setUserSelectPrevention(true);\n }\n\n @Listen('pointermove', { target: 'window' })\n onPointerMove(ev: PointerEvent) {\n if (!isValidResizeState(this.resizeState, ev)) return;\n\n updateCellWidthFromResize(this.resizeState!, ev, TABLE_CONSTANTS.MIN_W);\n }\n\n @Listen('pointerup', { target: 'window' })\n @Listen('pointercancel', { target: 'window' })\n onPointerUp(ev: PointerEvent) {\n if (!isValidResizeState(this.resizeState, ev)) return;\n\n releasePointerCapture(\n this.resizeState!.resizingCell,\n this.resizeState!.pointerId,\n );\n this.resizeState = null;\n setUserSelectPrevention(false);\n }\n\n //#endregion LISTENERS\n /************************************************************************/\n //#region LIFECYCLE\n //#endregion LIFECYCLE\n /************************************************************************/\n //#region EVENTS\n //#endregion EVENTS\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n\n // #endregion RENDER\n}\n"],"version":3}
1	+ {"file":"nv-table.js","mappings":"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","names":["NvTable","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/nv-table/nv-table.utils.ts","src/components/nv-table/styles/nv-table.scss?tag=nv-table","src/components/nv-table/nv-table.tsx"],"sourcesContent":["/*\n Table utility functions and constants for nv-table component\n \n This module contains pure utility functions for table column resizing logic,\n * pointer event handling calculations, and related helper functions.\n /\n\n/\n Constants for table column resizing behavior\n /\nexport const TABLE_CONSTANTS = Object.freeze({\n /* Handle width for fine pointers (mouse) in pixels /\n HANDLE_W: 12,\n /* Handle width for coarse pointers (touch) in pixels /\n HANDLE_W_TOUCH: 24,\n /* Minimum column width in pixels /\n MIN_W: 40,\n} as const);\n\n/\n Determines the appropriate handle width based on the current pointer type\n * @returns {number} Handle width in pixels (10px for fine pointers, 24px for coarse/touch)\n /\nexport function getHandleWidthForCurrentPointer(): number {\n // Match the CSS media query: wider handle on coarse pointers (touch)\n return matchMedia('(pointer: coarse)').matches\n ? TABLE_CONSTANTS.HANDLE_W_TOUCH\n : TABLE_CONSTANTS.HANDLE_W;\n}\n\n/\n Calculates the pointer's horizontal offset within a table cell\n * @param {PointerEvent} event - The pointer event\n * @param {HTMLTableCellElement} cell - The table cell element\n * @returns {number} The horizontal offset from the left edge of the cell\n /\nexport function getPointerOffsetInCell(\n event: PointerEvent,\n cell: HTMLTableCellElement,\n): number {\n const rect = cell.getBoundingClientRect();\n return event.clientX - rect.left;\n}\n\n/\n Determines if the pointer is within the resize handle area of a table cell\n * @param {number} offsetX - Horizontal offset within the cell\n * @param {number} cellWidth - Total width of the cell\n * @param {number} handleWidth - Width of the resize handle area\n * @returns {boolean} True if the pointer is in the resize handle area\n /\nexport function isInResizeHandle(\n offsetX: number,\n cellWidth: number,\n handleWidth: number,\n): boolean {\n return offsetX >= cellWidth - handleWidth;\n}\n\n/\n Calculates the new column width based on resize delta and constraints\n * @param {number} startWidth - Original width of the column\n * @param {number} delta - Change in pixels from the start position\n * @param {number} minWidth - Minimum allowed width for the column\n * @returns {number} The calculated new width, constrained by minimum\n /\nexport function calculateNewWidth(\n startWidth: number,\n delta: number,\n minWidth: number = TABLE_CONSTANTS.MIN_W,\n): number {\n return Math.max(minWidth, startWidth + delta);\n}\n\n/\n Validates that a table cell element is suitable for resizing\n * @param {HTMLElement \| null} element - The element to check\n * @returns {element is HTMLTableCellElement} Type guard for table cell elements\n /\nexport function isValidTableCell(\n element: HTMLElement \| null,\n): element is HTMLTableCellElement {\n return element?.tagName === 'TH' \|\| element?.tagName === 'TD';\n}\n\n/\n Finds the closest table cell element from an event target\n * @param {EventTarget \| null} target - The event target\n * @returns {HTMLTableCellElement \| null} The closest table cell or null\n /\nexport function getClosestTableCell(\n target: EventTarget \| null,\n): HTMLTableCellElement \| null {\n if (!(target instanceof HTMLElement)) return null;\n\n const cell = target.closest('th, td') as HTMLTableCellElement \| null;\n return isValidTableCell(cell) ? cell : null;\n}\n\n/\n Sets up pointer capture for consistent drag behavior across browsers\n * @param {HTMLTableCellElement} cell - The table cell element\n * @param {number} pointerId - The pointer ID from the pointer event\n * @returns {boolean} True if capture was successfully set\n /\nexport function setPointerCapture(\n cell: HTMLTableCellElement,\n pointerId: number,\n): boolean {\n try {\n cell.setPointerCapture?.(pointerId);\n return true;\n } catch {\n return false;\n }\n}\n\n/\n Releases pointer capture\n * @param {HTMLTableCellElement} cell - The table cell element\n * @param {number} pointerId - The pointer ID from the pointer event\n * @returns {boolean} True if release was successful\n /\nexport function releasePointerCapture(\n cell: HTMLTableCellElement,\n pointerId: number,\n): boolean {\n try {\n cell.releasePointerCapture?.(pointerId);\n return true;\n } catch {\n return false;\n }\n}\n\n/\n Prevents text selection during drag operations\n * @param {boolean} prevent - Whether to prevent selection\n /\nexport function setUserSelectPrevention(prevent: boolean): void {\n document.body.style.userSelect = prevent ? 'none' : '';\n}\n\n/\n Gets the current width of a table cell element\n * @param {HTMLTableCellElement} cell - The table cell element\n * @returns {number} The current width in pixels\n /\nexport function getCellWidth(cell: HTMLTableCellElement): number {\n return cell.offsetWidth;\n}\n\n/\n Applies a width to a table cell element\n * @param {HTMLTableCellElement} cell - The table cell element\n * @param {number} width - The width to apply in pixels\n /\nexport function setCellWidth(cell: HTMLTableCellElement, width: number): void {\n cell.style.width = `${width}px`;\n}\n\n/\n Calculates the delta (change) in horizontal position between two pointer events\n * @param {number} currentX - Current clientX position\n * @param {number} startX - Starting clientX position\n * @returns {number} The horizontal delta\n /\nexport function calculatePointerDelta(\n currentX: number,\n startX: number,\n): number {\n return currentX - startX;\n}\n\n/\n Interface for resize operation state\n /\nexport interface ResizeState {\n /* The table cell being resized /\n resizingCell: HTMLTableCellElement;\n /* The pointer ID for this resize operation /\n pointerId: number;\n /* Starting X coordinate /\n startX: number;\n /* Starting width of the cell /\n startWidth: number;\n}\n\n/\n Creates a new resize state object\n * @param {HTMLTableCellElement} cell - The cell being resized\n * @param {PointerEvent} event - The initiating pointer event\n * @returns {ResizeState} A new resize state object\n /\nexport function createResizeState(\n cell: HTMLTableCellElement,\n event: PointerEvent,\n): ResizeState {\n return {\n resizingCell: cell,\n pointerId: event.pointerId,\n startX: event.clientX,\n startWidth: getCellWidth(cell),\n };\n}\n\n/\n Validates that a resize state is active and matches the given pointer event\n * @param {ResizeState \| null} state - The current resize state\n * @param {PointerEvent} event - The pointer event to validate against\n * @returns {boolean} True if the state is valid for this event\n /\nexport function isValidResizeState(\n state: ResizeState \| null,\n event: PointerEvent,\n): boolean {\n return state !== null && state.pointerId === event.pointerId;\n}\n\n/\n Updates the width of a cell during a resize operation\n * @param {ResizeState} state - The current resize state\n * @param {PointerEvent} event - The current pointer event\n * @param {number} minWidth - Minimum width constraint\n /\nexport function updateCellWidthFromResize(\n state: ResizeState,\n event: PointerEvent,\n minWidth: number = TABLE_CONSTANTS.MIN_W,\n): void {\n const delta = calculatePointerDelta(event.clientX, state.startX);\n const newWidth = calculateNewWidth(state.startWidth, delta, minWidth);\n setCellWidth(state.resizingCell, newWidth);\n}\n","@use \"./mixins\" as ;\n\nnv-table {\n table {\n @include table-styles();\n }\n\n [data-sticky-left] {\n @include sticky-styles('left');\n }\n\n [data-sticky-right] {\n @include sticky-styles('right');\n }\n\n [data-sticky-top] {\n th {\n @include sticky-styles('top');\n }\n }\n}\n","/* eslint-disable @stencil-community/prefer-vdom-listener /\n\n// Useful link for styling help ->\n// https://css-tricks.com/complete-guide-table-element/\n\nimport { Component, Host, h, Listen, Element } from '@stencil/core';\nimport {\n TABLE_CONSTANTS,\n ResizeState,\n getHandleWidthForCurrentPointer,\n getClosestTableCell,\n getPointerOffsetInCell,\n isInResizeHandle,\n createResizeState,\n isValidResizeState,\n updateCellWidthFromResize,\n setPointerCapture,\n releasePointerCapture,\n setUserSelectPrevention,\n getCellWidth,\n} from './nv-table.utils';\n\n/\n @slot default - Child content of the component.\n /\n@Component({\n tag: 'nv-table',\n styleUrl: 'styles/nv-table.scss',\n shadow: false,\n})\nexport class NvTable {\n @Element() host!: HTMLNvTableElement;\n\n private resizeState: ResizeState \| null = null;\n\n /*************************************************************************/\n //#region PROPERTIES\n //#endregion PROPERTIES\n /************************************************************************/\n //#region METHODS\n //#endregion METHODS\n /************************************************************************/\n //#region LISTENERS\n\n @Listen('pointerdown')\n onPointerDown(ev: PointerEvent) {\n const th = getClosestTableCell(ev.target);\n if (!th) return;\n\n // Skip resize if the cell has data-no-resize attribute\n if (th.hasAttribute('data-no-resize')) return;\n\n const offsetX = getPointerOffsetInCell(ev, th);\n const handleWidth = getHandleWidthForCurrentPointer();\n const cellWidth = getCellWidth(th);\n\n // Start only if we're in the resize handle area\n if (!isInResizeHandle(offsetX, cellWidth, handleWidth)) return;\n\n this.resizeState = createResizeState(th, ev);\n\n // Capture so move/up still fire even if the finger leaves the th\n setPointerCapture(th, ev.pointerId);\n\n // Prevent scrolling/selection during drag\n setUserSelectPrevention(true);\n }\n\n @Listen('pointermove', { target: 'window' })\n onPointerMove(ev: PointerEvent) {\n if (!isValidResizeState(this.resizeState, ev)) return;\n\n updateCellWidthFromResize(this.resizeState!, ev, TABLE_CONSTANTS.MIN_W);\n }\n\n @Listen('pointerup', { target: 'window' })\n @Listen('pointercancel', { target: 'window' })\n onPointerUp(ev: PointerEvent) {\n if (!isValidResizeState(this.resizeState, ev)) return;\n\n releasePointerCapture(\n this.resizeState!.resizingCell,\n this.resizeState!.pointerId,\n );\n this.resizeState = null;\n setUserSelectPrevention(false);\n }\n\n //#endregion LISTENERS\n /************************************************************************/\n //#region LIFECYCLE\n //#endregion LIFECYCLE\n /************************************************************************/\n //#region EVENTS\n //#endregion EVENTS\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n\n // #endregion RENDER\n}\n"],"version":3}