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

@nova-design-system/nova-webcomponents 3.24.0 → 3.26.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 (1256) hide show

package/dist/esm/nv-sidebar.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"nv-sidebar.entry.js","sources":["src/components/nv-sidebar/styles/nv-sidebar.scss?tag=nv-sidebar","src/components/nv-sidebar/nv-sidebar.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n@use \"./global-overrides\";\n\nnv-sidebar {\n @include sidebar-container();\n @include sidebar-width(\"expanded\");\n\n &[collapsed] {\n @include sidebar-width(\"collapsed\");\n\n [data-hide-on-collapsed] {\n display: none !important;\n }\n\n // Collapsed mode: different padding\n .nv-sidebar-container {\n padding: var(--sidebar-padding-y) var(--sidebar-padding-x-collapsed);\n }\n }\n\n .nv-sidebar-container {\n @include sidebar-inner-container();\n }\n\n .nv-sidebar-toggle {\n @include sidebar-toggle-button();\n }\n}\n","import {\n Component,\n Host,\n Prop,\n Event,\n EventEmitter,\n Element,\n Watch,\n h,\n} from '@stencil/core';\n\n/**\n * Main sidebar container for navigation. Supports collapsible and persistent modes.\n * @slot default - All sidebar components (logo, header, content, footer).\n */\n@Component({\n tag: 'nv-sidebar',\n styleUrl: 'styles/nv-sidebar.scss',\n shadow: false,\n})\nexport class NvSidebar {\n @Element() el!: HTMLNvSidebarElement;\n private mutationObserver: MutationObserver;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * The type of sidebar behavior.\n * - collapsible: Can be toggled open/closed\n * - persistent: Always visible\n */\n @Prop({ reflect: true })\n readonly type: 'collapsible' | 'persistent' = 'persistent';\n\n /**\n * Whether the sidebar is currently open (only applies to collapsible type).\n */\n // eslint-disable-next-line @stencil-community/ban-default-true\n @Prop({ reflect: true, mutable: true })\n open: boolean = true;\n\n /**\n * The current active path. Used to automatically set the active state of nav items.\n * Example: \"/dashboard\" or \"/settings/profile\"\n */\n @Prop({ reflect: true })\n readonly activePath?: string;\n\n /**\n * Determines the type of notification bullets in the sidebar.\n * - neutral: Uses neutral colors (gray)\n * - brand: Uses brand colors (orange/teal depending on theme)\n */\n @Prop({ reflect: true })\n readonly notificationIntention: 'neutral' | 'brand' = 'brand';\n\n /**\n * Determines the emphasis of notification bullets in the sidebar.\n * - high: More prominent appearance\n * - low: Less prominent appearance\n */\n @Prop({ reflect: true })\n readonly notificationEmphasis: 'high' | 'low' = 'high';\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emitted when the open state changes.\n * @bind open\n */\n @Event({ bubbles: false })\n openChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region METHODS\n\n private handleToggle = () => {\n if (this.type === 'collapsible') {\n // Changing open will trigger @Watch which emits the event\n this.open = !this.open;\n }\n };\n\n private handleCollapsedSideEffects(isCollapsed: boolean) {\n if (!isCollapsed) {\n return;\n }\n\n this.el.querySelectorAll('nv-sidebarnavitem[open]').forEach(navItem => {\n (navItem as HTMLNvSidebarnavitemElement).open = false;\n });\n }\n\n /**\n * Sets the active state of navigation items based on activePath\n */\n private setActiveNavItems = () => {\n if (!this.activePath) return;\n\n // First, check all subitems to find if any matches exactly\n const activeSubitemHrefs = new Set<string>();\n this.el.querySelectorAll('nv-sidebarnavsubitem').forEach(subItem => {\n const link = subItem.querySelector('a');\n const href = link?.getAttribute('href');\n\n if (href) {\n const isActive = this.activePath === href;\n subItem.active = isActive;\n if (isActive) {\n activeSubitemHrefs.add(href);\n }\n }\n });\n\n // Then, set nav items active only if:\n // 1. Exact match with activePath AND no subitem matches\n // 2. OR the navitem has no subitems and activePath starts with its href\n this.el.querySelectorAll('nv-sidebarnavitem').forEach(navItem => {\n const link = navItem.querySelector(\n ':scope > a, :scope > .nv-sidebarnavitem-trigger a, .nv-sidebarnavitem-content > a',\n );\n const href = link?.getAttribute('href');\n const hasSubitems =\n navItem.querySelector('nv-sidebarnavsubitem') !== null;\n\n if (href) {\n if (hasSubitems) {\n // Parent with subitems: only active if exact match (not when subitem is active)\n navItem.active = this.activePath === href;\n } else {\n // Item without subitems: active on exact match\n navItem.active = this.activePath === href;\n }\n }\n });\n };\n\n private pendingActiveUpdate: number | null = null;\n\n /**\n * Sets up the MutationObserver to watch for changes in child elements.\n * Only triggers on new nav items being added, not on attribute changes.\n */\n private setupMutationObserver = (): void => {\n this.mutationObserver = new MutationObserver(mutations => {\n // Only react to new nav items being added, ignore other mutations\n const hasNewNavItems = mutations.some(mutation => {\n if (mutation.type !== 'childList') return false;\n return Array.from(mutation.addedNodes).some(node => {\n if (node.nodeType !== Node.ELEMENT_NODE) return false;\n const el = node as Element;\n return (\n el.tagName.toLowerCase() === 'nv-sidebarnavitem' ||\n el.tagName.toLowerCase() === 'nv-sidebarnavsubitem' ||\n el.querySelector('nv-sidebarnavitem, nv-sidebarnavsubitem')\n );\n });\n });\n\n if (hasNewNavItems) {\n // Debounce to prevent multiple rapid calls\n if (this.pendingActiveUpdate) {\n clearTimeout(this.pendingActiveUpdate);\n }\n this.pendingActiveUpdate = window.setTimeout(() => {\n this.setActiveNavItems();\n this.pendingActiveUpdate = null;\n }, 50);\n }\n });\n\n this.mutationObserver.observe(this.el, {\n childList: true,\n subtree: true,\n });\n };\n\n //#endregion METHODS\n /****************************************************************************/\n //#region WATCHERS\n\n @Watch('activePath')\n onActivePathChanged() {\n this.setActiveNavItems();\n }\n\n @Watch('open')\n protected onOpenChanged(newValue: boolean, oldValue: boolean) {\n this.handleCollapsedSideEffects(this.type === 'collapsible' && !newValue);\n // Only emit event when open state actually changes (not on re-render with same value)\n if (this.type === 'collapsible' && newValue !== oldValue) {\n this.openChanged.emit(newValue);\n }\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.setActiveNavItems();\n this.setupMutationObserver();\n this.handleCollapsedSideEffects(this.type === 'collapsible' && !this.open);\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n }\n if (this.pendingActiveUpdate) {\n clearTimeout(this.pendingActiveUpdate);\n }\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region RENDER\n\n render() {\n const isCollapsed = this.type === 'collapsible' && !this.open;\n\n return (\n <Host\n role=\"navigation\"\n collapsed={isCollapsed ? true : undefined}\n notification-intention={this.notificationIntention}\n notification-emphasis={this.notificationEmphasis}\n aria-expanded={\n this.type === 'collapsible' ? String(this.open) : undefined\n }\n >\n <div class=\"nv-sidebar-container\">\n <slot></slot>\n </div>\n {this.type === 'collapsible' && (\n <button\n class=\"nv-sidebar-toggle\"\n onClick={this.handleToggle}\n aria-label={this.open ? 'Collapse sidebar' : 'Expand sidebar'}\n >\n <nv-icon\n name={\n this.open\n ? 'layout-sidebar-left-collapse'\n : 'layout-sidebar-right-collapse'\n }\n size=\"sm\"\n ></nv-icon>\n </button>\n )}\n </Host>\n );\n }\n //#endregion RENDER\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/nv-sidebarcontent.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"nv-sidebarcontent.entry.js","sources":["src/components/nv-sidebarcontent/nv-sidebarcontent.scss?tag=nv-sidebarcontent","src/components/nv-sidebarcontent/nv-sidebarcontent.tsx"],"sourcesContent":["nv-sidebarcontent {\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n}","import { Component, Host, h } from '@stencil/core';\n\n/**\n * Scrollable main content area of the sidebar containing navigation groups and items.\n * @slot default - Navigation groups, items, and dividers.\n */\n@Component({\n tag: 'nv-sidebarcontent',\n styleUrl: 'nv-sidebarcontent.scss',\n shadow: false,\n})\nexport class NvSidebarcontent {\n /****************************************************************************/\n //#region RENDER\n render() {\n return (\n <Host role=\"list\">\n <slot></slot>\n </Host>\n );\n }\n //#endregion RENDER\n}\n"],"names":[],"mappings":";;AAAA,MAAM,mBAAmB,GAAG,gGAAgG;;MCW/G,gBAAgB,GAAA,MAAA;;;;;;IAG3B,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,EACf,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;"}

package/dist/esm/nv-sidebardivider.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"nv-sidebardivider.entry.js","sources":["src/components/nv-sidebardivider/nv-sidebardivider.scss?tag=nv-sidebardivider","src/components/nv-sidebardivider/nv-sidebardivider.tsx"],"sourcesContent":["nv-sidebardivider {\n display: block;\n height: var(--sidebar-divider-size);\n background-color: var(--components-sidebar-divider);\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * A horizontal divider for separating sidebar navigation groups.\n */\n@Component({\n tag: 'nv-sidebardivider',\n styleUrl: 'nv-sidebardivider.scss',\n shadow: false,\n})\nexport class NvSidebardivider {\n /****************************************************************************/\n //#region RENDER\n render() {\n return <Host role=\"separator\" aria-orientation=\"horizontal\"></Host>;\n }\n //#endregion RENDER\n}\n"],"names":[],"mappings":";;AAAA,MAAM,mBAAmB,GAAG,wHAAwH;;MCUvI,gBAAgB,GAAA,MAAA;;;;;;IAG3B,MAAM,GAAA;AACJ,QAAA,OAAO,CAAA,CAAC,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,WAAW,EAAA,kBAAA,EAAkB,YAAY,EAAA,CAAQ;;;;;;;"}

package/dist/esm/nv-sidebarfooter.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"nv-sidebarfooter.entry.js","sources":["src/components/nv-sidebarfooter/nv-sidebarfooter.scss?tag=nv-sidebarfooter","src/components/nv-sidebarfooter/nv-sidebarfooter.tsx"],"sourcesContent":["nv-sidebarfooter {\n display: block;\n margin-top: auto;\n}","import { Component, Host, h } from '@stencil/core';\n\n/**\n * Optional footer container for the sidebar. Use this to display custom elements\n * like user settings, logout buttons, or version information at the bottom of the sidebar.\n * @slot default - Custom content to display in the footer.\n */\n@Component({\n tag: 'nv-sidebarfooter',\n styleUrl: 'nv-sidebarfooter.scss',\n shadow: false,\n})\nexport class NvSidebarfooter {\n /****************************************************************************/\n //#region RENDER\n render() {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n //#endregion RENDER\n}\n"],"names":[],"mappings":";;AAAA,MAAM,kBAAkB,GAAG,iDAAiD;;MCY/D,eAAe,GAAA,MAAA;;;;;;IAG1B,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;"}

package/dist/esm/nv-sidebargroup.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"nv-sidebargroup.entry.js","sources":["src/components/nv-sidebargroup/nv-sidebargroup.scss?tag=nv-sidebargroup","src/components/nv-sidebargroup/nv-sidebargroup.tsx"],"sourcesContent":["nv-sidebargroup {\n display: flex;\n flex-direction: column;\n gap: var(--sidebar-group-gap-y);\n\n .nv-sidebargroup-label {\n display: block;\n font-size: var(--font-size-sm);\n line-height: var(--line-height-sm);\n font-weight: var(--font-weight-medium-emphasis);\n color: var(--color-content-lower-text);\n letter-spacing: 0;\n padding: var(--sidebar-title-padding-y) var(--sidebar-title-padding-x);\n }\n\n nv-sidebar[collapsed] & {\n .nv-sidebargroup-label {\n display: none;\n }\n }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * Groups navigation items together with an optional label.\n * @slot default - Navigation items (nv-sidebarnavitem) to display in this group.\n */\n@Component({\n tag: 'nv-sidebargroup',\n styleUrl: 'nv-sidebargroup.scss',\n shadow: false,\n})\nexport class NvSidebargroup {\n /****************************************************************************/\n //#region PROPERTIES\n /**\n * Optional label to display above the navigation group.\n */\n @Prop({ reflect: true })\n readonly label?: string;\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region RENDER\n render() {\n return (\n <Host role=\"group\" aria-label={this.label}>\n {this.label && <div class=\"nv-sidebargroup-label\">{this.label}</div>}\n <slot></slot>\n </Host>\n );\n }\n //#endregion RENDER\n}\n"],"names":[],"mappings":";;AAAA,MAAM,iBAAiB,GAAG,+bAA+b;;MCW5c,cAAc,GAAA,MAAA;;;;;;;IAWzB,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAA,YAAA,EAAa,IAAI,CAAC,KAAK,EAAA,EACtC,IAAI,CAAC,KAAK,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAE,EAAA,IAAI,CAAC,KAAK,CAAO,EACpE,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;"}

package/dist/esm/nv-sidebarheader.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"nv-sidebarheader.entry.js","sources":["src/components/nv-sidebarheader/nv-sidebarheader.scss?tag=nv-sidebarheader","src/components/nv-sidebarheader/nv-sidebarheader.tsx"],"sourcesContent":["nv-sidebarheader {\n display: block;\n}","import { Component, Host, h } from '@stencil/core';\n\n/**\n * Optional header container for the sidebar. Use this to display custom elements\n * like search bars, user profiles, or action buttons at the top of the sidebar.\n * @slot default - Custom content to display in the header.\n */\n@Component({\n tag: 'nv-sidebarheader',\n styleUrl: 'nv-sidebarheader.scss',\n shadow: false,\n})\nexport class NvSidebarheader {\n /****************************************************************************/\n //#region RENDER\n render() {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n //#endregion RENDER\n}\n"],"names":[],"mappings":";;AAAA,MAAM,kBAAkB,GAAG,iCAAiC;;MCY/C,eAAe,GAAA,MAAA;;;;;;IAG1B,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;"}

package/dist/esm/nv-sidebarlogo.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"nv-sidebarlogo.entry.js","sources":["src/components/nv-sidebarlogo/styles/nv-sidebarlogo.scss?tag=nv-sidebarlogo","src/components/nv-sidebarlogo/nv-sidebarlogo.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-sidebarlogo {\n @include logo-container-styles();\n\n .nv-sidebarlogo-container {\n @include logo-inner-container();\n }\n\n .nv-sidebarlogo-full,\n .nv-sidebarlogo-collapsed {\n @include logo-image();\n }\n\n .nv-sidebarlogo-collapsed {\n @include logo-collapsed-hidden();\n }\n\n .nv-sidebarlogo-title {\n @include logo-title();\n }\n\n nv-sidebar[collapsed] & {\n .nv-sidebarlogo-full {\n @include logo-collapsed-hidden();\n }\n\n .nv-sidebarlogo-collapsed {\n @include logo-collapsed-visible();\n }\n\n .nv-sidebarlogo-title {\n @include logo-title-collapsed();\n }\n\n .nv-sidebarlogo-container {\n @include logo-collapsed-centered();\n }\n }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * Displays the logo and title at the top of the sidebar.\n * Automatically switches between full and collapsed logos based on the sidebar state.\n */\n@Component({\n tag: 'nv-sidebarlogo',\n styleUrl: 'styles/nv-sidebarlogo.scss',\n shadow: false,\n})\nexport class NvSidebarlogo {\n /****************************************************************************/\n //#region PROPERTIES\n /**\n * The label/name to display next to the logo.\n */\n @Prop({ reflect: true })\n readonly label?: string;\n\n /**\n * URL of the full logo image (shown when sidebar is expanded).\n * If not provided, uses a default Nova logo.\n */\n @Prop({ reflect: true })\n readonly logo?: string;\n\n /**\n * URL of the collapsed logo image (shown when sidebar is collapsed).\n * If not provided, uses a default Nova icon.\n */\n @Prop({ reflect: true })\n readonly collapsedLogo?: string;\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region CONSTANTS\n // Default Nova logo SVG (expanded - icon only, text comes from label prop)\n private readonly defaultLogo =\n 'data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 40 40\"%3E%3Cstyle%3E.cls-1{fill:%23f0801a;}%3C/style%3E%3Cpath class=\"cls-1\" d=\"M25.71,2.13l-5.08,11.39c-.39.88-.38,1.92.13,2.73.74,1.17,2.19,1.59,3.42,1.07l14.26-6-3.14-2.27-10.89,4.66c-.15.06-.3-.09-.23-.24l4.34-9.31-2.81-2.03Z\"/%3E%3Cpath class=\"cls-1\" d=\"M4.29,10l9.22,8.4c.71.65,1.7.97,2.63.73,1.34-.34,2.2-1.58,2.09-2.91l-1.22-15.43-3.14,2.27,1.01,11.8c.01.16-.18.26-.3.15l-7.48-7.04-2.81,2.03Z\"/%3E%3Cpath class=\"cls-1\" d=\"M26.95,39.15l-2.59-12.2c-.2-.94-.82-1.78-1.71-2.13-1.29-.51-2.71,0-3.4,1.14l-8.01,13.24h3.87s6.07-10.18,6.07-10.18c.08-.14.3-.1.33.06l1.97,10.08h3.47Z\"/%3E%3Cpath class=\"cls-1\" d=\"M4.85,32.76l10.82-6.19c.83-.48,1.44-1.32,1.5-2.28.09-1.38-.83-2.58-2.13-2.89L0,17.82l1.2,3.68,11.54,2.67c.16.04.19.25.05.33l-9,4.96,1.07,3.3Z\"/%3E%3Cpath class=\"cls-1\" d=\"M40,20.11l-12.4-1.35c-.95-.1-1.94.22-2.56.96-.89,1.07-.84,2.58.03,3.58l10.08,11.74,1.2-3.69-7.77-8.94c-.11-.12,0-.32.16-.3l10.19,1.28,1.07-3.3Z\"/%3E%3C/svg%3E';\n\n // Default Nova icon (collapsed - same logo but will be displayed smaller)\n private readonly defaultCollapsedLogo =\n 'data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 40 40\"%3E%3Cstyle%3E.cls-1{fill:%23f0801a;}%3C/style%3E%3Cpath class=\"cls-1\" d=\"M25.71,2.13l-5.08,11.39c-.39.88-.38,1.92.13,2.73.74,1.17,2.19,1.59,3.42,1.07l14.26-6-3.14-2.27-10.89,4.66c-.15.06-.3-.09-.23-.24l4.34-9.31-2.81-2.03Z\"/%3E%3Cpath class=\"cls-1\" d=\"M4.29,10l9.22,8.4c.71.65,1.7.97,2.63.73,1.34-.34,2.2-1.58,2.09-2.91l-1.22-15.43-3.14,2.27,1.01,11.8c.01.16-.18.26-.3.15l-7.48-7.04-2.81,2.03Z\"/%3E%3Cpath class=\"cls-1\" d=\"M26.95,39.15l-2.59-12.2c-.2-.94-.82-1.78-1.71-2.13-1.29-.51-2.71,0-3.4,1.14l-8.01,13.24h3.87s6.07-10.18,6.07-10.18c.08-.14.3-.1.33.06l1.97,10.08h3.47Z\"/%3E%3Cpath class=\"cls-1\" d=\"M4.85,32.76l10.82-6.19c.83-.48,1.44-1.32,1.5-2.28.09-1.38-.83-2.58-2.13-2.89L0,17.82l1.2,3.68,11.54,2.67c.16.04.19.25.05.33l-9,4.96,1.07,3.3Z\"/%3E%3Cpath class=\"cls-1\" d=\"M40,20.11l-12.4-1.35c-.95-.1-1.94.22-2.56.96-.89,1.07-.84,2.58.03,3.58l10.08,11.74,1.2-3.69-7.77-8.94c-.11-.12,0-.32.16-.3l10.19,1.28,1.07-3.3Z\"/%3E%3C/svg%3E';\n //#endregion CONSTANTS\n /****************************************************************************/\n //#region RENDER\n render() {\n const logoSrc = this.logo || this.defaultLogo;\n const collapsedLogoSrc = this.collapsedLogo || this.defaultCollapsedLogo;\n\n return (\n <Host>\n <div class=\"nv-sidebarlogo-container\">\n <img\n src={logoSrc}\n alt={this.label || 'Logo'}\n class=\"nv-sidebarlogo-full\"\n />\n <img\n src={collapsedLogoSrc}\n alt={this.label || 'Logo'}\n class=\"nv-sidebarlogo-collapsed\"\n />\n {this.label && <span class=\"nv-sidebarlogo-title\">{this.label}</span>}\n </div>\n </Host>\n );\n }\n //#endregion RENDER\n}\n"],"names":[],"mappings":";;AAAA,MAAM,gBAAgB,GAAG,gmCAAgmC;;MCW5mC,aAAa,GAAA,MAAA;AAL1B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;;AA+BmB,QAAA,IAAW,CAAA,WAAA,GAC1B,u/BAAu/B;;AAGx+B,QAAA,IAAoB,CAAA,oBAAA,GACnC,u/BAAu/B;AA2B1/B;;;;IAvBC,MAAM,GAAA;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW;QAC7C,MAAM,gBAAgB,GAAG,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,oBAAoB;QAExE,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,KAAK,IAAI,MAAM,EACzB,KAAK,EAAC,qBAAqB,EAC3B,CAAA,EACF,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,gBAAgB,EACrB,GAAG,EAAE,IAAI,CAAC,KAAK,IAAI,MAAM,EACzB,KAAK,EAAC,0BAA0B,EAChC,CAAA,EACD,IAAI,CAAC,KAAK,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,sBAAsB,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,CACjE,CACD;;;;;;;"}

package/dist/esm/nv-sidebarnavitem.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"nv-sidebarnavitem.entry.js","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"],"names":[],"mappings":"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"}

package/dist/esm/nv-sidebarnavsubitem.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"nv-sidebarnavsubitem.entry.js","sources":["src/components/nv-sidebarnavsubitem/styles/nv-sidebarnavsubitem.scss?tag=nv-sidebarnavsubitem","src/components/nv-sidebarnavsubitem/nv-sidebarnavsubitem.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-sidebarnavsubitem {\n @include subitem-container();\n\n .nv-sidebarnavsubitem-indicator {\n @include subitem-indicator();\n }\n\n .nv-sidebarnavsubitem-content {\n @include subitem-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 &:hover .nv-sidebarnavsubitem-content {\n @include subitem-content-hover();\n }\n\n &[active] {\n background-color: var(--color-interaction-container-neutral-background-active);\n --nv-component-background: var(--color-interaction-container-neutral-background-active);\n \n .nv-sidebarnavsubitem-content {\n @include subitem-content-active();\n }\n }\n\n .nv-sidebarnavsubitem-trailing {\n @include subitem-trailing();\n }\n\n nv-sidebar[collapsed] & {\n .nv-sidebarnavsubitem-content {\n max-width: 0;\n opacity: 0;\n margin: 0;\n overflow: hidden;\n transition:\n opacity 0.2s ease,\n max-width 0.2s ease;\n }\n\n .nv-sidebarnavsubitem-indicator {\n margin-right: 0;\n width: var(--spacing-6);\n justify-content: center;\n }\n\n .nv-sidebarnavsubitem-trailing {\n display: none;\n }\n }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * A sub-item in the sidebar navigation, typically used as a child of nv-sidebarnavitem.\n * @slot default - The link or content of the sub-item (usually an <a> tag).\n * @slot trailing - Optional content displayed at the end of the sub-item (e.g., badges, icons).\n */\n@Component({\n tag: 'nv-sidebarnavsubitem',\n styleUrl: 'styles/nv-sidebarnavsubitem.scss',\n shadow: false,\n})\nexport class NvSidebarnavsubitem {\n /****************************************************************************/\n //#region PROPERTIES\n /**\n * Whether this sub-item represents the active/current page.\n */\n @Prop({ reflect: true })\n readonly active: boolean = false;\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region METHODS\n // Note: We no longer use stopPropagation() here because it prevents React Router\n // (and other SPA routers) from receiving the click event due to event delegation.\n // Instead, the parent nv-sidebarnavitem checks if clicks originate from subitems.\n //#endregion METHODS\n /****************************************************************************/\n //#region RENDER\n render() {\n return (\n <Host role=\"listitem\" aria-current={this.active ? 'page' : undefined}>\n <div class=\"nv-sidebarnavsubitem-indicator\"></div>\n <div class=\"nv-sidebarnavsubitem-content\">\n <slot></slot>\n </div>\n <div class=\"nv-sidebarnavsubitem-trailing\">\n <slot name=\"trailing\"></slot>\n </div>\n </Host>\n );\n }\n //#endregion RENDER\n}\n"],"names":[],"mappings":";;AAAA,MAAM,sBAAsB,GAAG,o3EAAo3E;;MCYt4E,mBAAmB,GAAA,MAAA;AALhC,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAQE;;AAEG;AAEM,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAwBjC;;;;;;;;;;IAdC,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,qDAAC,IAAI,EAAC,UAAU,EAAe,cAAA,EAAA,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,EAAA,EAClE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gCAAgC,EAAO,CAAA,EAClD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,8BAA8B,EAAA,EACvC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAA,EACxC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,CACD;;;;;;;"}

package/dist/esm/nv-split.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"nv-split.entry.js","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"],"names":[],"mappings":";;AAAA,MAAM,UAAU,GAAG,s0GAAs0G;;MCuB50G,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;AAWE;;;;AAIG;AAEM,QAAA,IAAS,CAAA,SAAA,GAA8B,YAAY;AAE5D;;;;AAIG;AAEH,QAAA,IAAK,CAAA,KAAA,GAAa,EAAE;AAUpB;;;AAGG;AAEM,QAAA,IAAU,CAAA,UAAA,GAAW,EAAE;;;;AAOxB,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AAE3B,QAAA,IAAS,CAAA,SAAA,GAAW,EAAE;AACtB,QAAA,IAAQ,CAAA,QAAA,GAAW,CAAC;AACpB,QAAA,IAAU,CAAA,UAAA,GAAa,EAAE;;AAIzB,QAAA,IAAA,CAAA,SAAS,GAAG,CAAC,CAAa,KAAK,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;QACtD,IAAO,CAAA,OAAA,GAAG,MAAM,IAAI,CAAC,YAAY,EAAE;AA+W5C;;;;IA7VW,cAAc,GAAA;;QAEtB,IAAI,CAAC,UAAU,EAAE;;IAIT,kBAAkB,GAAA;;QAE1B,IAAI,CAAC,aAAa,EAAE;QACpB,IAAI,CAAC,UAAU,EAAE;;;;;IAOnB,gBAAgB,GAAA;;QAEd,IAAI,CAAC,aAAa,EAAE;;QAGpB,qBAAqB,CAAC,MAAK;YACzB,IAAI,CAAC,UAAU,EAAE;YACjB,IAAI,CAAC,eAAe,EAAE;AACxB,SAAC,CAAC;;AAGF,QAAA,IAAI,CAAC,EAAE,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC;QAC1D,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;AAExB,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC;;IAGjE,oBAAoB,GAAA;;QAElB,IAAI,CAAC,uBAAuB,EAAE;AAC9B,QAAA,IAAI,CAAC,EAAE,EAAE,UAAU,EAAE;AACrB,QAAA,IAAI,CAAC,EAAE,GAAG,SAAS;;;;;AAOrB;;;;AAIG;IAEH,MAAM,QAAQ,CAAC,KAAe,EAAA;AAC5B,QAAA,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,UAAU,EAAE;AACjB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;QACvC,IAAI,CAAC,eAAe,EAAE;;AAGxB;;;AAGG;AAEH,IAAA,MAAM,QAAQ,GAAA;AACZ,QAAA,OAAO,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;;AAGxB;;;;AAIG;IAEH,MAAM,QAAQ,CAAC,KAAa,EAAA;AAC1B,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;QAC7B,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM;YAAE;;AAGxC,QAAA,MAAM,IAAI,GAAG,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;QAC5C,MAAM,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC;QAC/D,IAAI,MAAM,IAAI,CAAC;AAAE,YAAA,IAAI,CAAC,MAAM,CAAC,GAAG,GAAG;AAEnC,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI;QACjB,IAAI,CAAC,UAAU,EAAE;AACjB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;QACvC,IAAI,CAAC,eAAe,EAAE;;AAGxB;;;AAGG;AAEH,IAAA,MAAM,OAAO,GAAA;AACX,QAAA,IAAI,CAAC,KAAK,GAAG,EAAE;AACf,QAAA,IAAI,CAAC,UAAU,GAAG,KAAK;AACvB,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;QACnB,IAAI,CAAC,gBAAgB,EAAE;QACvB,IAAI,CAAC,uBAAuB,EAAE;AAC9B,QAAA,IAAI,CAAC,EAAE,EAAE,UAAU,EAAE;;;;;AAOvB;;;AAGG;IACK,QAAQ,GAAA;;AAEd,QAAA,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAc,wBAAwB,CAAC,CAChE;;AAGH;;;AAGG;IACK,aAAa,GAAA;;AAEnB,QAAA,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,EAAE,CAAC,gBAAgB,CACtB,6CAA6C,CAC9C,CACF;;AAGH;;AAEG;IACK,gBAAgB,GAAA;AACtB,QAAA,IAAI,CAAC,aAAa,EAAE,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,CAAC;;AAG/C;;AAEG;IACK,aAAa,GAAA;AACnB,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;;QAG7B,IAAI,CAAC,gBAAgB,EAAE;AAEvB,QAAA,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC;YAAE;;QAGvB,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,KAAI;AACxB,YAAA,IAAI,CAAC,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;gBAAE;YAE3B,MAAM,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AACvC,YAAA,CAAC,CAAC,SAAS,GAAG,iBAAiB;AAC/B,YAAA,CAAC,CAAC,YAAY,CAAC,WAAW,EAAE,MAAM,CAAC;AAEnC,YAAA,IAAI,IAAI,CAAC,SAAS,KAAK,YAAY,EAAE;gBACnC,CAAC,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,UAAU,CAAA,EAAA,CAAI;AACtC,gBAAA,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,YAAY;;iBACxB;gBACL,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAAA,EAAA,CAAI;AACvC,gBAAA,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,YAAY;;;YAI/B,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC;AAC7C,YAAA,MAAM,CAAC,IAAI,GAAG,QAAQ;AACtB,YAAA,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC;;AAGrB,YAAA,CAAC,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,EAAc,KAC7C,IAAI,CAAC,aAAa,CAAC,EAAE,EAAE,CAAC,CAAC,CAC1B;;AAGD,YAAA,IAAI,CAAC,qBAAqB,CAAC,UAAU,EAAE,CAAC,CAAC;AAC3C,SAAC,CAAC;QAEF,IAAI,CAAC,eAAe,EAAE;;AAGxB;;AAEG;IACK,UAAU,GAAA;AAChB,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;AAC7B,QAAA,MAAM,CAAC,GAAG,KAAK,CAAC,MAAM;QACtB,IAAI,CAAC,KAAK,CAAC;YAAE;;AAGb,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;AAC1C,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC;;QAGrC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,KAAI;AACxB,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,GAAG,GAAG,CAAC,CAAC;YAClD,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,CAAO,IAAA,EAAA,IAAI,GAAG;AAChC,YAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG;AACzB,YAAA,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG;AAC1B,YAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ;AAC9B,YAAA,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM;AAC3B,YAAA,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,QAAQ;AACnC,YAAA,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,YAAY;AACrC,SAAC,CAAC;QAEF,IAAI,CAAC,eAAe,EAAE;;AAGxB;;AAEG;IACK,uBAAuB,GAAA;QAC7B,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC;QACtD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC;;AAGpD;;AAEG;IACK,uBAAuB,GAAA;QAC7B,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC;QACzD,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC;;AAGvD;;AAEG;IACK,eAAe,GAAA;AACrB,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;AAC7B,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,EAAE;QACpC,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;YAAE;AAE/C,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,KAAK,YAAY;QAClD,IAAI,MAAM,GAAG,CAAC;AAEd,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACvC,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,GAAG,GAAG,KAAK,CAAC,MAAM;YACrD,MAAM,IAAI,OAAO;AAEjB,YAAA,MAAM,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC;AACpB,YAAA,CAAC,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU;YAE7B,IAAI,UAAU,EAAE;gBACd,CAAC,CAAC,KAAK,CAAC,IAAI,GAAG,CAAG,EAAA,MAAM,GAAG;AAC3B,gBAAA,CAAC,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG;AACjB,gBAAA,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG;AACpB,gBAAA,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM;AACvB,gBAAA,CAAC,CAAC,KAAK,CAAC,SAAS,GAAG,kBAAkB;;iBACjC;gBACL,CAAC,CAAC,KAAK,CAAC,GAAG,GAAG,CAAG,EAAA,MAAM,GAAG;AAC1B,gBAAA,CAAC,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG;AAClB,gBAAA,CAAC,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG;AACnB,gBAAA,CAAC,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;AACtB,gBAAA,CAAC,CAAC,KAAK,CAAC,SAAS,GAAG,kBAAkB;;;;AAK5C;;;;AAIG;IACK,aAAa,CAAC,CAAa,EAAE,KAAa,EAAA;QAChD,CAAC,CAAC,cAAc,EAAE;AAClB,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI;AACtB,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;QACtB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,SAAS,KAAK,YAAY,GAAG,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,OAAO;QACvE,IAAI,CAAC,UAAU,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QACjC,IAAI,CAAC,uBAAuB,EAAE;AAC9B,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;;AAGzC;;;AAGG;AACK,IAAA,eAAe,CAAC,CAAa,EAAA;QACnC,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,GAAG,CAAC;YAAE;AAE5C,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;AAC7B,QAAA,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;YAAE;QAEtB,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,qBAAqB,EAAE;AAC5C,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,KAAK,YAAY;QAClD,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QAElE,MAAM,OAAO,GAAG,CAAC,UAAU,GAAG,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ;QACpE,MAAM,QAAQ,GAAG,CAAC,OAAO,GAAG,OAAO,IAAI,GAAG;AAE1C,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS;AACxB,QAAA,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC;QAEf,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;QACpC,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;;AAGrC,QAAA,IAAI,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,OAAO,IAAI,GAAG;AAC5D,QAAA,IAAI,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,OAAO,IAAI,GAAG;AAE7D,QAAA,MAAM,MAAM,GAAG,UAAU,GAAG,WAAW;AACvC,QAAA,MAAM,YAAY,GAAG,SAAS,GAAG,UAAU;AAC3C,QAAA,IAAI,MAAM,GAAG,YAAY,EAAE;AACzB,YAAA,MAAM,KAAK,GAAG,YAAY,GAAG,MAAM;YACnC,UAAU,IAAI,KAAK;YACnB,WAAW,IAAI,KAAK;;AAGtB,QAAA,MAAM,QAAQ,GAAG,UAAU,GAAG,SAAS;AACvC,QAAA,MAAM,QAAQ,GAAG,UAAU,GAAG,WAAW;AACzC,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAE,QAAQ,CAAC;AAErE,QAAA,MAAM,IAAI,GAAG,SAAS,GAAG,YAAY;AACrC,QAAA,MAAM,KAAK,GAAG,UAAU,GAAG,YAAY;QAEvC,MAAM,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC;AACjC,QAAA,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI;AACd,QAAA,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK;AAEf,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI;QACjB,IAAI,CAAC,UAAU,EAAE;QACjB,IAAI,CAAC,eAAe,EAAE;;AAGxB;;AAEG;IACK,YAAY,GAAA;QAClB,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE;AACtB,QAAA,IAAI,CAAC,UAAU,GAAG,KAAK;AACvB,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;QACnB,IAAI,CAAC,uBAAuB,EAAE;AAC9B,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;;;;;IAOzC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,eAAA,EAAgB,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,EAAA,EAC7C,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAQ,CAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAQ,CAAA,CACtB;;;;;;;;;;;;"}

package/dist/esm/nv-stack.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"nv-stack.entry.js","sources":["src/components/nv-stack/nv-stack.scss?tag=nv-stack","src/components/nv-stack/nv-stack.tsx"],"sourcesContent":["nv-stack {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n flex-direction: row;\n\n nv-col {\n display: flex;\n }\n\n &:not(nv-row) {\n flex-wrap: nowrap;\n }\n\n > .nv-stack-item-flex {\n flex-shrink: 1;\n flex-grow: 1;\n }\n\n > .nv-stack-item-lead {\n margin-right: auto;\n }\n\n > .nv-stack-item-lead + * {\n margin-left: 0;\n }\n\n > .nv-stack-item-center {\n margin-right: auto;\n margin-left: auto;\n }\n\n > .nv-stack-item-tail {\n margin-left: auto;\n }\n\n > .nv-stack-nowrap {\n white-space: nowrap;\n }\n\n // Vertical\n &.nv-stack-vertical {\n align-items: stretch;\n flex-direction: column;\n\n > .nv-stack-item-lead {\n margin-right: 0;\n margin-bottom: auto;\n }\n\n > .nv-stack-item-lead + * {\n margin-top: 0;\n }\n\n > .nv-stack-item-tail {\n margin-left: 0;\n margin-top: auto;\n }\n\n > .nv-stack-item-center {\n margin: auto 0;\n }\n }\n\n &.nv-stack-flex {\n > * {\n flex-shrink: 1;\n flex-grow: 1;\n }\n }\n\n &.nv-stack-fill {\n > * {\n height: 100%;\n }\n\n &.nv-stack-vertical {\n > * {\n height: auto;\n width: 100%;\n }\n }\n }\n}","import { Component, Host, Prop, h } from '@stencil/core';\nimport clsx from 'clsx';\n\n/**\n * @deprecated Please use tailwind classes instead\n * @slot default - Content of the stack\n */\n@Component({\n tag: 'nv-stack',\n styleUrl: './nv-stack.scss',\n shadow: false,\n})\nexport class NvStack {\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Gutter refers to the space that exists between children components inside\n * the stack container.\n */\n @Prop({ reflect: true })\n readonly gutter: number = 2;\n\n /**\n * Fill will force the children to fill the stack depending of the direction\n * of the stack. In horizontal position, the children take the height of the\n * stack. In vertical position, the children take the width of the stack.\n */\n @Prop({ reflect: true })\n readonly fill: boolean;\n\n /**\n * Flex will force the children to share the stack between the children\n * depending of the direction of the stack. In horizontal position, the\n * children width will share the width of the stack. In vertical position,\n * the children height will share the height of the stack.\n */\n @Prop({ reflect: true })\n readonly flex: boolean;\n\n /**\n * Full set the width of the stack to 100%.\n * (same effect as WFull props)\n */\n @Prop({ reflect: true })\n readonly full: boolean;\n\n /**\n * Display the element of the stack vertically.\n */\n @Prop({ reflect: true })\n readonly vertical: boolean;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(\n this.fill && 'nv-stack-fill',\n this.flex && 'nv-stack-flex',\n this.full && 'w-full',\n this.gutter && !this.vertical && `gap-x-${this.gutter}`,\n this.gutter && this.vertical && `gap-y-${this.gutter}`,\n this.vertical && 'nv-stack-vertical',\n )}\n >\n <slot></slot>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,UAAU,GAAG,s8BAAs8B;;MCY58B,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AASE;;;AAGG;AAEM,QAAA,IAAM,CAAA,MAAA,GAAW,CAAC;AAsD5B;;;;IAlBC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE,IAAI,CACT,IAAI,CAAC,IAAI,IAAI,eAAe,EAC5B,IAAI,CAAC,IAAI,IAAI,eAAe,EAC5B,IAAI,CAAC,IAAI,IAAI,QAAQ,EACrB,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAA,MAAA,EAAS,IAAI,CAAC,MAAM,CAAE,CAAA,EACvD,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,IAAI,SAAS,IAAI,CAAC,MAAM,CAAE,CAAA,EACtD,IAAI,CAAC,QAAQ,IAAI,mBAAmB,CACrC,EAAA,EAED,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;"}

package/dist/esm/nv-table.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"nv-table.entry.js","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"],"names":[],"mappings":"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"}

package/dist/esm/nv-tableheader.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"nv-tableheader.entry.js","sources":["src/components/nv-tableheader/nv-tableheader.scss?tag=nv-tableheader","src/components/nv-tableheader/nv-tableheader.tsx"],"sourcesContent":["// include focus ring\n@use \"../../styles/focus-ring\" as focus;\n\n@mixin root-styles() {\n display: inline-flex;\n width: 100%;\n align-items: center;\n gap: var(--spacing-2);\n}\n\n@mixin focus-styles() {\n @include focus.focus-ring();\n border-radius: var(--radius-rounded-sm);\n}\n\n@mixin nv-icon-styles() {\n transition: transform 120ms ease, opacity 120ms ease;\n svg {\n transition: transform 240ms ease;\n }\n &.is-none { opacity: .5; }\n &.is-desc {\n svg {\n transform: rotate(180deg);\n }\n }\n}\n\nnv-tableheader {\n @include root-styles();\n\n &:focus-visible {\n @include focus-styles();\n }\n\n nv-iconbutton {\n @include nv-icon-styles();\n }\n}","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n/**\n * @slot default - Child content of the component.\n */\n@Component({\n tag: 'nv-tableheader',\n styleUrl: 'nv-tableheader.scss',\n shadow: false,\n})\nexport class NvTableheader {\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Will render the header as sortable with the corresponding icon button.\n * Allows the header to be tabbed, and trigger sorting via click or keyboard\n * navigation\n */\n @Prop({ reflect: true })\n readonly sortable: boolean = false;\n\n /**\n * The current sort direction of the header. Will be 'none' if the header is\n * not sortable or if the sort direction is not set.\n */\n @Prop({ reflect: true, mutable: true })\n sortDirection: 'none' | 'asc' | 'desc' = 'none';\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region METHODS\n\n private cycleSortDirection(e?: Event) {\n if (!this.sortable) return;\n e?.preventDefault();\n\n const next = {\n none: 'asc',\n asc: 'desc',\n desc: 'none',\n } as const;\n\n this.sortDirection = next[this.sortDirection];\n this.sortDirectionChanged.emit(this.sortDirection);\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (!this.sortable) return;\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.cycleSortDirection();\n }\n }\n\n get ariaSort() {\n const sortMap = {\n none: 'none',\n asc: 'ascending',\n desc: 'descending',\n } as const;\n\n if (!this.sortable) return sortMap.none;\n return sortMap[this.sortDirection];\n }\n\n //#endregion METHODS\n /****************************************************************************/\n //#region WATCHERS\n //#endregion WATCHERS\n /****************************************************************************/\n //#region LIFECYCLE\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Event emitted when the sort direction changes. Payload is the new sort\n * direction.\n */\n @Event({ bubbles: false })\n sortDirectionChanged: EventEmitter<string>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n role=\"columnheader\"\n aria-sort={this.ariaSort}\n tabindex={this.sortable ? 0 : undefined}\n onKeyDown={this.handleKeyDown.bind(this)}\n onClick={this.cycleSortDirection.bind(this)}\n >\n <slot></slot>\n\n {this.sortable && (\n <span class=\"sort-icon-wrap\" aria-hidden=\"true\">\n <nv-iconbutton\n disableTabindex\n name=\"arrow-up\"\n size=\"xs\"\n emphasis={this.sortDirection === 'none' ? 'lower' : 'low'}\n // prevent mousedown from selecting text\n onMouseDown={(e: MouseEvent) => e.preventDefault()}\n class={{\n 'is-none': this.sortDirection === 'none',\n 'is-desc': this.sortDirection === 'desc',\n }}\n />\n </span>\n )}\n </Host>\n );\n }\n // #endregion RENDER\n}\n"],"names":[],"mappings":";;AAAA,MAAM,gBAAgB,GAAG,ytBAAytB;;MCUruB,aAAa,GAAA,MAAA;AAL1B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;AASE;;;;AAIG;AAEM,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAElC;;;AAGG;AAEH,QAAA,IAAa,CAAA,aAAA,GAA4B,MAAM;AA2FhD;;;;AArFS,IAAA,kBAAkB,CAAC,CAAS,EAAA;QAClC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE;QACpB,CAAC,EAAE,cAAc,EAAE;AAEnB,QAAA,MAAM,IAAI,GAAG;AACX,YAAA,IAAI,EAAE,KAAK;AACX,YAAA,GAAG,EAAE,MAAM;AACX,YAAA,IAAI,EAAE,MAAM;SACJ;QAEV,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;QAC7C,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;;AAG5C,IAAA,aAAa,CAAC,KAAoB,EAAA;QACxC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE;AACpB,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE;YACtB,IAAI,CAAC,kBAAkB,EAAE;;;AAI7B,IAAA,IAAI,QAAQ,GAAA;AACV,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,GAAG,EAAE,WAAW;AAChB,YAAA,IAAI,EAAE,YAAY;SACV;QAEV,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO,OAAO,CAAC,IAAI;AACvC,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC;;;;;IAwBpC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,cAAc,eACR,IAAI,CAAC,QAAQ,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,SAAS,EACvC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EACxC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,EAE3C,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EAEZ,IAAI,CAAC,QAAQ,KACZ,6DAAM,KAAK,EAAC,gBAAgB,EAAA,aAAA,EAAa,MAAM,EAAA,EAC7C,CACE,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,eAAe,EACf,IAAA,EAAA,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,IAAI,EACT,QAAQ,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM,GAAG,OAAO,GAAG,KAAK;;AAEzD,YAAA,WAAW,EAAE,CAAC,CAAa,KAAK,CAAC,CAAC,cAAc,EAAE,EAClD,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM;AACxC,gBAAA,SAAS,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM;AACzC,aAAA,EAAA,CACD,CACG,CACR,CACI;;;;;;;"}

package/dist/esm/nv-toggle.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"nv-toggle.entry.js","sources":["src/components/nv-toggle/nv-toggle.scss?tag=nv-toggle","src/components/nv-toggle/nv-toggle.tsx"],"sourcesContent":["@use \"../../styles/utils\" as utils;\n@use \"../../styles/focus-ring\" as focus;\n\n@mixin root-styles() {\n display: inline-flex;\n align-items: flex-start;\n gap: var(--form-gap-x);\n position: relative;\n\n &:not([disabled], [readonly]) {\n input,\n label {\n cursor: pointer;\n }\n }\n}\n\n@mixin label-before-styles() {\n flex-direction: row-reverse;\n}\n\n@mixin label-styles() {\n align-self: stretch;\n color: var(--components-form-text-label-default);\n font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;\n font-size: var(--form-label-font-size);\n font-style: normal;\n font-weight: var(--font-weight-medium-emphasis);\n line-height: var(--form-label-line-height);\n}\n\n@mixin description-styles() {\n align-self: stretch;\n color: var(--components-form-text-description-default);\n font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;\n font-size: var(--form-description-font-size);\n font-style: normal;\n font-weight: 450;\n line-height: var(--form-description-line-height);\n}\n\n@mixin text-container-styles() {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex: 1 0 0;\n}\n\n@mixin input-container-styles() {\n position: relative;\n color: var(--components-form-shape-foreground-default);\n\n &:has(input[type=\"checkbox\"]:disabled:not([readonly])) {\n color: var(--components-form-shape-foreground-disabled);\n }\n}\n\n@mixin input-styles() {\n appearance: none;\n position: relative;\n display: flex;\n width: var(--form-toggle-width);\n height: var(--form-toggle-height);\n flex-direction: column;\n align-items: flex-start;\n border-radius: var(--form-toggle-radius);\n border-width: var(--form-toggle-border-width);\n border-style: solid;\n border-color: var(--components-toggle-border-default);\n background: var(--components-toggle-background-default);\n\n &::after {\n content: '';\n display: block;\n width: var(--form-toggle-switch-dot-default);\n height: var(--form-toggle-switch-dot-default);\n background-color: var(--components-toggle-shape-default);\n border-radius: var(--radius-rounded-full);\n position: absolute;\n top: 50%;\n left: 25%;\n transform: translate(-50%, -50%);\n }\n\n &:hover {\n border-color: var(--components-toggle-border-hover);\n\n &::after {\n background-color: var(--components-toggle-shape-hover);\n }\n }\n\n &:focus {\n border-color: var(--components-toggle-border-default);\n\n &::after {\n background-color: var(--components-toggle-shape-default);\n }\n }\n\n @include focus.focus-ring();\n\n &:checked {\n background: var(--components-toggle-background-default-checked);\n border-color: var(--components-toggle-border-default-checked);\n\n &::after {\n content: '';\n display: block;\n width: var(--form-toggle-switch-dot-default);\n height: var(--form-toggle-switch-dot-default);\n background-color: var(--components-toggle-shape-default-checked);\n border-radius: var(--radius-rounded-full);\n position: absolute;\n top: 50%;\n left: 75%;\n transform: translate(-50%, -50%);\n }\n\n &:focus {\n background: var(--components-toggle-background-default-checked);\n border-color: var(--components-toggle-border-default-checked);\n }\n }\n\n &:disabled:not([readonly]) {\n box-shadow: unset;\n background: var(--components-toggle-background-disabled);\n border-color: var(--components-toggle-border-default);\n\n &:checked {\n background: var(--components-toggle-background-disabled-checked);\n border-color: var(--components-toggle-border-disabled-checked);\n &::after {\n background-color: var(--components-toggle-shape-disabled-checked);\n }\n }\n }\n}\n\nnv-toggle {\n @include root-styles();\n\n &.label-placement-before {\n @include label-before-styles();\n }\n\n &[disabled] {\n // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n // opacity: var(--components-form-opacity-disabled); Error: Invalid value for --components-form-opacity-disabled (expected a <number> but got \"50px\")\n opacity: 0.5;\n }\n label {\n @include label-styles();\n\n &.visually-hidden {\n @include utils.visually-hidden();\n }\n }\n\n .input-container {\n @include input-container-styles();\n\n input[type=\"checkbox\"] {\n @include input-styles();\n }\n }\n\n .description {\n @include description-styles();\n }\n\n .text-container {\n @include text-container-styles();\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Watch,\n Event,\n EventEmitter,\n Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type LabelPlacement } from '../../utils/constants';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n */\n@Component({\n tag: 'nv-toggle',\n styleUrl: 'nv-toggle.scss',\n shadow: false,\n formAssociated: true,\n})\nexport class NvToggle {\n @Element() el!: HTMLNvToggleElement;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Sets the ID for the radio button’s input element and the for attribute of\n * the associated label. If no ID is provided, a random one will be\n * automatically generated to ensure unique identification, facilitating\n * proper label association and accessibility.\n */\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /**\n * The name attribute for the toggle input, used to reference the form data\n * after submission.\n */\n @Prop({ reflect: true })\n readonly name?: string;\n\n /**\n * The value attribute of the toggle input, representing the value sent on\n * form submission when the toggle is checked.\n */\n @Prop({ reflect: true })\n readonly value?: string;\n\n /** The label displayed next to the toggle.*/\n @Prop({ reflect: true })\n readonly label?: string;\n\n /**\n * Determines the position of the label relative to the toggle, either\n * 'start' (before) or 'end' (after).\n */\n @Prop({ reflect: true })\n readonly labelPlacement: `${LabelPlacement}`;\n\n /**\n * Hides the label visually while still keeping it available for screen\n * readers.\n */\n @Prop({ reflect: true })\n readonly hideLabel: boolean = false;\n\n /**\n * A description providing additional context or information about the\n * toggle.\n */\n @Prop({ reflect: true })\n readonly description?: string;\n\n /** Indicates whether the toggle is checked or not. */\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /** Disables the toggle, preventing user interaction. */\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /**\n * Sets the toggle to read-only, preventing user changes but still allowing\n * focus and selection of text.\n */\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emits when the checked state changes.\n * @bind checked\n */\n @Event({ bubbles: false })\n checkedChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region WATCHERS\n\n /**\n * Watches for changes to the checked state and emits the new value.\n * @param {boolean} checked - The new value of the checked state.\n */\n @Watch('checked')\n onCheckedChanged(checked: boolean) {\n this.checkedChanged.emit(checked);\n }\n\n /**\n * Listens for the change event on the toggle input element and updates the checked state.\n * the checked state of the host elements.\n * @param {Event} event - The change event.\n */\n @Listen('change')\n handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n\n if (target.type === 'checkbox' && target.id === this.inputId) {\n if (this.readonly || this.disabled) {\n event.preventDefault();\n return;\n }\n\n this.checked = target.checked;\n }\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(\n this.labelPlacement === 'before' && 'label-placement-before',\n )}\n >\n <div class=\"input-container\">\n <input\n type=\"checkbox\"\n id={this.inputId}\n name={this.name}\n autocomplete=\"off\"\n value={this.value}\n checked={Boolean(this.checked)}\n disabled={this.disabled || this.readonly}\n readonly={this.readonly}\n />\n </div>\n\n <div class=\"text-container\">\n {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n <label\n htmlFor={this.inputId}\n class={clsx(this.hideLabel && 'visually-hidden')}\n >\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\n\n {(this.description ||\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n </div>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"names":["uuidv4"],"mappings":";;;;AAAA,MAAM,WAAW,GAAG,mpIAAmpI;;MC0B1pI,QAAQ,GAAA,MAAA;AANrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;AAYE;;;;;AAKG;AAEM,QAAA,IAAO,CAAA,OAAA,GAAWA,EAAM,EAAE;AA2BnC;;;AAGG;AAEM,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;;AAWnC,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;;AAIf,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAElC;;;AAGG;AAEM,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AA2FnC;;;;AA1EC;;;AAGG;AAEH,IAAA,gBAAgB,CAAC,OAAgB,EAAA;AAC/B,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC;;AAGnC;;;;AAIG;AAEH,IAAA,YAAY,CAAC,KAAY,EAAA;AACvB,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAE/C,QAAA,IAAI,MAAM,CAAC,IAAI,KAAK,UAAU,IAAI,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,OAAO,EAAE;YAC5D,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;gBAClC,KAAK,CAAC,cAAc,EAAE;gBACtB;;AAGF,YAAA,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO;;;;;;IAQjC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE,IAAI,CACT,IAAI,CAAC,cAAc,KAAK,QAAQ,IAAI,wBAAwB,CAC7D,EAAA,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,EAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CACvB,CACE,EAEN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACxB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,MACrD,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,iBAAiB,CAAC,EAAA,EAEhD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACT,EAEA,CAAC,IAAI,CAAC,WAAW;YAChB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,MAC7C,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,EAAA,EAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACP,CACG,CACD;;;;;;;;;;;;"}

package/dist/esm/nv-togglebutton.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"nv-togglebutton.entry.js","sources":["src/components/nv-togglebutton/styles/nv-togglebutton.scss?tag=nv-togglebutton","src/components/nv-togglebutton/nv-togglebutton.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-togglebutton {\n @include root-styles();\n\n @each $size in $sizes {\n &[size=\"#{$size}\"] {\n @include button-size-styles($size);\n @include togglegroup-button-size-styles($size);\n }\n }\n\n &[emphasis=\"high\"] {\n @include button-emphasis-styles('low');\n &[active]:not([active=\"false\"]) {\n @include button-active-styles('low');\n }\n }\n &[emphasis=\"low\"] {\n @include button-emphasis-styles('lower');\n &[active]:not([active=\"false\"]), &:active {\n @include button-hover-styles('lower');\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n Element,\n Listen,\n EventEmitter,\n} from '@stencil/core';\nimport { ToggleButtonEmphasis, ToggleButtonSize } from '../../utils/constants';\n\n/**\n * @slot default - Child content of the toggle button.\n */\n@Component({\n tag: 'nv-togglebutton',\n styleUrl: 'styles/nv-togglebutton.scss',\n shadow: false,\n})\nexport class NvTogglebutton {\n @Element() el: HTMLNvTogglebuttonElement;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Determines how large or small the togglebutton appears, allowing for\n * customization of the togglebutton's dimensions to fit different design\n * specifications and user needs.\n */\n @Prop({ reflect: true })\n readonly size: `${ToggleButtonSize}` = 'md';\n\n /**\n * The value to associated with the button when selected in a\n * Togglebuttongroup.\n */\n @Prop({ reflect: true })\n readonly value: string;\n\n /**\n * Prevents all interaction, rendering the toggle in a non-interactive state.\n */\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /**\n * Whether the button is active or not. Will not toggle automatically but\n * needs to be controlled externally.\n */\n @Prop({ reflect: true })\n readonly active: boolean = false;\n\n /**\n * Make it more or less visually prominent to users.\n */\n @Prop({ reflect: true })\n readonly emphasis: `${ToggleButtonEmphasis}` = 'high';\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region METHODS\n\n private handleClick = () => {\n if (this.disabled) return;\n\n this.toggled.emit({\n value: this.value,\n active: this.active,\n });\n };\n\n //#endregion METHODS\n /****************************************************************************/\n //#region LISTENERS\n\n @Listen('keydown', { passive: false })\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.el.click();\n }\n }\n\n //#endregion LISTENERS\n /****************************************************************************/\n //#region EVENTS\n\n /* eslint-disable nova/event-bubbling */\n /**\n * Emitted when the button is toggled. Will bubble up so that the\n * nv-togglebuttongroup can update the state.\n */\n @Event({ eventName: 'toggled', bubbles: true })\n toggled: EventEmitter<{\n /** The value associated with the button. */\n value: string;\n /** If the button is active when clicked. */\n active: boolean;\n }>;\n /* eslint-enable nova/event-bubbling */\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region RENDER\n render() {\n return (\n <Host\n role=\"button\"\n tabindex=\"0\"\n aria-pressed={String(this.active)}\n onClick={this.handleClick}\n >\n <slot></slot>\n </Host>\n );\n }\n // #endregion RENDER\n}\n"],"names":[],"mappings":";;AAAA,MAAM,iBAAiB,GAAG,+4KAA+4K;;MCoB55K,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;AAWE;;;;AAIG;AAEM,QAAA,IAAI,CAAA,IAAA,GAA0B,IAAI;AAS3C;;AAEG;AAEM,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAElC;;;AAGG;AAEM,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAEhC;;AAEG;AAEM,QAAA,IAAQ,CAAA,QAAA,GAA8B,MAAM;;;;AAM7C,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;YACzB,IAAI,IAAI,CAAC,QAAQ;gBAAE;AAEnB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;gBAChB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,MAAM,EAAE,IAAI,CAAC,MAAM;AACpB,aAAA,CAAC;AACJ,SAAC;AAgDF;;;;AAzCC,IAAA,aAAa,CAAC,KAAoB,EAAA;AAChC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE;;;;;;;IAyBnB,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,GAAG,kBACE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,EACjC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAEzB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;"}

package/dist/esm/nv-togglebuttongroup.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"nv-togglebuttongroup.entry.js","sources":["src/components/nv-togglebuttongroup/styles/nv-togglebuttongroup.scss?tag=nv-togglebuttongroup","src/components/nv-togglebuttongroup/nv-togglebuttongroup.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-togglebuttongroup {\n @include root-styles();\n\n &[emphasis=\"high\"] {\n @include high-emphasis-styles();\n }\n &[emphasis=\"low\"] {\n @include low-emphasis-styles();\n }\n @each $size in $sizes {\n &[size=\"#{$size}\"] {\n @include size-styles($size);\n \n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Listen,\n Watch,\n Element,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { ToggleButtonEmphasis, ToggleButtonSize } from '../../utils/constants';\n\n/**\n * @slot default - Child content of the component, pass the nv-togglebutton components here.\n */\n@Component({\n tag: 'nv-togglebuttongroup',\n styleUrl: 'styles/nv-togglebuttongroup.scss',\n shadow: false,\n})\nexport class NvTogglebuttongroup {\n @Element() el!: HTMLNvTogglebuttongroupElement;\n private mutationObserver: MutationObserver;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * The active toggle buttons in the group. Is an array of one string when in\n * exclusive mode, and an array of strings when in non-exclusive mode.\n */\n @Prop({ reflect: false, mutable: true })\n value: string[];\n\n /**\n * Activates single-selection mode so only one button can be active at a time.\n */\n @Prop({ reflect: true })\n readonly exclusive: boolean = false;\n\n /**\n * Ensures at least one toggle stays selected at all times.\n */\n @Prop({ reflect: true })\n readonly enforceValue: boolean = false;\n\n /**\n * Make it more or less visually prominent to users.\n */\n @Prop({ reflect: true })\n readonly emphasis: `${ToggleButtonEmphasis}` = 'high';\n\n /**\n * Determines how large or small the togglebutton appears, allowing for\n * customization of the togglebutton's dimensions to fit different design\n * specifications and user needs.\n */\n @Prop({ reflect: true })\n readonly size: `${ToggleButtonSize}` = 'md';\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Sets the active state of all toggle buttons depending on the value of the\n * group.\n */\n private setActiveToggleButtons = () => {\n this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {\n const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);\n if (!btn) return;\n btn.active = (this.value ?? []).includes(btn.value);\n });\n };\n\n /**\n * Sets the emphasis of all toggle buttons to the same value.\n */\n private setEmphasisToggleButtons = () => {\n this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {\n const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);\n if (!btn) return;\n btn.emphasis = this.emphasis;\n });\n };\n\n /**\n * Sets the size of all toggle buttons to the same value.\n */\n private setSizeToggleButtons = () => {\n this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {\n const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);\n if (!btn) return;\n btn.size = this.size;\n });\n };\n\n /**\n * Sets up the MutationObserver to watch for changes in child elements\n */\n private setupMutationObserver = (): void => {\n this.mutationObserver = new MutationObserver(mutations => {\n mutations.forEach(mutation => {\n if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {\n this.setEmphasisToggleButtons();\n this.setSizeToggleButtons();\n }\n });\n });\n\n this.mutationObserver.observe(this.el, {\n childList: true,\n subtree: true,\n });\n };\n\n /**\n * Narrow Type used locally to interact with nv-togglebutton child elements.\n * @param {Element} element - The element to check.\n * @returns {(HTMLElement & {\n * active: boolean;\n * value: string;\n * emphasis: `${ToggleButtonEmphasis}`;\n * size: `${ToggleButtonSize}`;\n * }) | null} The element as a toggle button, or null if it is not a toggle button.\n */\n private static asToggleButton(element: Element):\n | (HTMLElement & {\n /**\n * Whether the button is active or not. Will not toggle automatically but\n * needs to be controlled externally.\n */\n active: boolean;\n /**\n * The value to associated with the button when selected in a\n * Togglebuttongroup.\n */\n value: string;\n /**\n * Make it more or less visually prominent to users.\n */\n emphasis: `${ToggleButtonEmphasis}`;\n /**\n * Determines how large or small the togglebutton appears, allowing for\n * customization of the togglebutton's dimensions to fit different design\n * specifications and user needs.\n */\n size: `${ToggleButtonSize}`;\n })\n | null {\n return element instanceof HTMLElement\n ? (element as unknown as HTMLElement & {\n /**\n * Whether the button is active or not. Will not toggle automatically but\n * needs to be controlled externally.\n */\n active: boolean;\n /**\n * The value to associated with the button when selected in a\n * Togglebuttongroup.\n */\n value: string;\n /**\n * Make it more or less visually prominent to users.\n */\n emphasis: `${ToggleButtonEmphasis}`;\n /**\n * Determines how large or small the togglebutton appears, allowing for\n * customization of the togglebutton's dimensions to fit different design\n * specifications and user needs.\n */\n size: `${ToggleButtonSize}`;\n })\n : null;\n }\n //#endregion METHODS\n /****************************************************************************/\n //#region WATCHERS\n\n @Watch('value')\n onValueChanged(newValue: typeof this.value) {\n this.setActiveToggleButtons();\n this.valueChanged.emit(newValue);\n }\n\n @Watch('emphasis')\n onEmphasisChanged() {\n this.setEmphasisToggleButtons();\n }\n\n @Watch('size')\n onSizeChanged() {\n this.setSizeToggleButtons();\n }\n\n /* eslint-disable nova/native-event-listener */\n @Listen('toggled')\n onToggled(event: CustomEvent<HTMLNvTogglebuttonElementEventMap['toggled']>) {\n event.stopPropagation();\n\n const valueSet = new Set(this.value);\n\n if (this.exclusive && this.enforceValue) {\n this.value = [event.detail.value];\n return;\n }\n\n if (this.exclusive) {\n if (valueSet.has(event.detail.value)) {\n this.value = [];\n } else {\n this.value = [event.detail.value];\n }\n return;\n }\n\n toggle: if (event.detail.active) {\n if (this.enforceValue && valueSet.size === 1) break toggle;\n valueSet.delete(event.detail.value);\n } else {\n valueSet.add(event.detail.value);\n }\n this.value = [...valueSet];\n }\n /* eslint-enable nova/native-event-listener */\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.setActiveToggleButtons();\n this.setEmphasisToggleButtons();\n this.setSizeToggleButtons();\n this.setupMutationObserver();\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n }\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emitted when the selected toggle buttons change.\n * @bind value\n */\n @Event({ bubbles: false })\n valueChanged: EventEmitter<string[]>;\n\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"],"names":[],"mappings":"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"}

package/dist/esm/nv-tooltip.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"nv-tooltip.entry.js","sources":["src/components/nv-tooltip/nv-tooltip.scss?tag=nv-tooltip","src/components/nv-tooltip/nv-tooltip.tsx"],"sourcesContent":["@mixin root-styles() {\n display: inline-block;\n position: relative;\n user-select: none;\n &:has([fluid]:not([fluid='false'])) {\n display: block;\n }\n}\n\n@mixin tooltip-styles() {\n background: var(--components-tooltip-background);\n color: var(--components-tooltip-text);\n font-weight: var(--font-weight-medium-emphasis);\n padding: var(--tooltip-padding-y) var(--tooltip-padding-x);\n font-size: var(--tooltip-font-size);\n border-radius: var(--tooltip-radius);\n border: none;\n box-shadow:\n 0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1)\n var(--shadow-spread-lg-1) var(--shadow-color-opacity-1),\n 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2)\n var(--shadow-spread-lg-2) var(--shadow-color-opacity-2);\n}\n\n@mixin arrow-styles() {\n background: var(--components-tooltip-background);\n box-shadow: none;\n border: none;\n}\n\nnv-tooltip {\n @include root-styles();\n\n nv-popover > [data-scope='popover'] {\n @include tooltip-styles();\n\n [data-scope='arrow'] {\n @include arrow-styles();\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport type { Placement, Strategy } from '@floating-ui/dom';\n\n/**\n * @slot default - Content to be placed as the trigger.\n * @slot content - Content to be placed within the popover. Use for custom html, will render under the message.\n */\n@Component({\n tag: 'nv-tooltip',\n styleUrl: 'nv-tooltip.scss',\n shadow: false,\n})\nexport class NvTooltip {\n @Element() el: HTMLNvTooltipElement;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * @internal\n * Accepts a reference to the DOM element acting as the popover trigger. This\n * should be used when the slot for the trigger is not defined.\n */\n @Prop({ reflect: false, mutable: true })\n triggerElement: Element;\n\n /**\n * A string representing the text to be displayed inside the tooltip. This\n * content is shown when the tooltip is activated by the user, such as on\n * hover or focus events.\n */\n @Prop({ reflect: true })\n readonly message: string;\n\n /**\n * Decides where the tooltip shows up next to the element it’s linked to\n * (above, below, to the sides). If there isn’t enough room, it will adjust\n * it's position on the axis to fit on the screen, so users can always see it.\n */\n @Prop({ reflect: true })\n readonly placement: Placement = 'bottom';\n\n /**\n * Controls how long (in milliseconds) the tooltip waits to show after you\n * hover over or focus on an element. If you move away before the delay is up,\n * the tooltip won't appear.\n */\n @Prop({ reflect: true })\n readonly enterDelay: number = 0;\n\n /**\n * Sets the positioning strategy for the tooltip. Options include:\n * - `absolute`: Positions the tooltip relative to the trigger element\n * (default).\n * - `fixed`: Positions the tooltip relative to the viewport, useful when you\n * need the tooltip to break out of overflow hidden containers, it will not\n * scroll inside a scroll container due to the fixed positioning.\n */\n @Prop({ reflect: true })\n readonly strategy: Strategy = 'absolute';\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emitted when the tooltip is opened or closed. Bubbles up from the popover\n * element.\n */\n @Event({ bubbles: false })\n openChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n if (!this.triggerElement)\n this.triggerElement = Array.from(this.el.children).find(child => {\n return child.getAttribute('slot') === null;\n });\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n <slot></slot>\n\n <nv-popover\n triggerMode=\"hover\"\n hasArrow\n placement={this.placement}\n strategy={this.strategy}\n triggerElement={this.triggerElement}\n groupName={'tooltip'}\n enterDelay={this.enterDelay}\n onOpenChanged={e => this.openChanged.emit(e.detail)}\n >\n <p slot=\"content\">{this.message}</p>\n <slot name=\"content\"></slot>\n </nv-popover>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,4yBAA4yB;;MCoBpzB,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AA2BE;;;;AAIG;AAEM,QAAA,IAAS,CAAA,SAAA,GAAc,QAAQ;AAExC;;;;AAIG;AAEM,QAAA,IAAU,CAAA,UAAA,GAAW,CAAC;AAE/B;;;;;;;AAOG;AAEM,QAAA,IAAQ,CAAA,QAAA,GAAa,UAAU;AAmDzC;;;;IAlCC,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,CAAC,cAAc;AACtB,YAAA,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,IAAG;gBAC9D,OAAO,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI;AAC5C,aAAC,CAAC;;;;;IAON,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EAEb,CACE,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAW,EAAC,OAAO,EACnB,QAAQ,EACR,IAAA,EAAA,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,EAAA,EAEnD,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAK,EACpC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,GAAQ,CACjB,CACR;;;;;;;;"}

package/dist/esm/slide.animation-CmH5d1of.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"slide.animation-CmH5d1of.js","sources":["src/animations/slide.animation.ts"],"sourcesContent":["import { animate, easeOut } from 'popmotion';\nimport styler from 'stylefire';\n\nexport type SlideOptions = {\n /** How long the animation should take in ms @default 200 */\n duration?: number;\n};\n\nconst useSlide = (\n node: HTMLElement,\n { duration }: SlideOptions = { duration: 200 },\n) => {\n const nodeStyler = styler(node);\n\n /**\n * Will animate the translateX property.\n *\n * @param {object} options - The options for the animation.\n * @param {number} options.from - The starting value for the translateX property.\n * @param {number} options.to - The ending value for the translateX property.\n * @returns {Promise<void>} - A promise that resolves when the animation is\n * complete.\n */\n const slideX =\n (\n options: {\n /** The starting percentage for the translateX property. */\n from: number;\n /** The ending percentage for the translateX property. */\n to: number;\n } = { from: 0, to: 100 },\n ) =>\n () => {\n return new Promise<void>(resolve => {\n animate({\n from: { x: options.from },\n to: { x: options.to },\n ease: easeOut,\n duration,\n onUpdate(latest) {\n nodeStyler.set({ transform: `translateX(${latest.x}%)` });\n },\n onComplete() {\n resolve();\n },\n });\n });\n };\n\n /**\n * Will animate the translateY property.\n *\n * @param {object} options - The options for the animation.\n * @param {number} options.from - The starting value for the translateY property.\n * @param {number} options.to - The ending value for the translateY property.\n * @returns {Promise<void>} - A promise that resolves when the animation is\n * complete.\n */\n const slideY =\n (\n options: {\n /** The starting percentage for the translateY property. */\n from: number;\n /** The ending percentage for the translateY property. */\n to: number;\n } = { from: 0, to: 100 },\n ) =>\n () => {\n return new Promise<void>(resolve => {\n animate({\n from: { y: options.from },\n to: { y: options.to },\n ease: easeOut,\n duration,\n onUpdate(latest) {\n nodeStyler.set({ transform: `translateY(${latest.y}%)` });\n },\n onComplete() {\n resolve();\n },\n });\n });\n };\n\n /**\n * Applies the slideX styles without animating, useful when initial state\n * is slid out.\n *\n * @param {number} amount - The amount to translate the element by.\n * @returns {function} - A function that applies the slideX styles.\n */\n const setSlideX = (amount = 100) =>\n nodeStyler.set({ transform: `translateX(${amount}%)` });\n\n /**\n * Applies the slideY styles without animating, useful when initial state\n * is slid out.\n *\n * @param {number} amount - The amount to translate the element by.\n * @returns {function} - A function that applies the slideY styles.\n */\n const setSlideY = (amount = 100) =>\n nodeStyler.set({ transform: `translateY(${amount}%)` });\n\n /**\n * Applies the slideIn styles without animating, useful when initial state\n * is slid in.\n */\n function setSlideReset() {\n nodeStyler.set({ transform: `translateX(${0}%) translateY(${0}%)` });\n }\n\n return {\n slideX,\n slideY,\n setSlideX,\n setSlideY,\n setSlideReset,\n };\n};\n\nexport { useSlide };\n"],"names":["styler"],"mappings":";;;AAQA,MAAM,QAAQ,GAAG,CACf,IAAiB,EACjB,EAAE,QAAQ,EAAmB,GAAA,EAAE,QAAQ,EAAE,GAAG,EAAE,KAC5C;AACF,IAAA,MAAM,UAAU,GAAGA,KAAM,CAAC,IAAI,CAAC;AAE/B;;;;;;;;AAQG;AACH,IAAA,MAAM,MAAM,GACV,CACE,OAKI,GAAA,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,KAE1B,MAAK;AACH,QAAA,OAAO,IAAI,OAAO,CAAO,OAAO,IAAG;AACjC,YAAA,OAAO,CAAC;AACN,gBAAA,IAAI,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,EAAE;AACzB,gBAAA,EAAE,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,EAAE,EAAE;AACrB,gBAAA,IAAI,EAAE,OAAO;gBACb,QAAQ;AACR,gBAAA,QAAQ,CAAC,MAAM,EAAA;AACb,oBAAA,UAAU,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,CAAc,WAAA,EAAA,MAAM,CAAC,CAAC,CAAI,EAAA,CAAA,EAAE,CAAC;iBAC1D;gBACD,UAAU,GAAA;AACR,oBAAA,OAAO,EAAE;iBACV;AACF,aAAA,CAAC;AACJ,SAAC,CAAC;AACJ,KAAC;AAEH;;;;;;;;AAQG;AACH,IAAA,MAAM,MAAM,GACV,CACE,OAKI,GAAA,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,KAE1B,MAAK;AACH,QAAA,OAAO,IAAI,OAAO,CAAO,OAAO,IAAG;AACjC,YAAA,OAAO,CAAC;AACN,gBAAA,IAAI,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,EAAE;AACzB,gBAAA,EAAE,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,EAAE,EAAE;AACrB,gBAAA,IAAI,EAAE,OAAO;gBACb,QAAQ;AACR,gBAAA,QAAQ,CAAC,MAAM,EAAA;AACb,oBAAA,UAAU,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,CAAc,WAAA,EAAA,MAAM,CAAC,CAAC,CAAI,EAAA,CAAA,EAAE,CAAC;iBAC1D;gBACD,UAAU,GAAA;AACR,oBAAA,OAAO,EAAE;iBACV;AACF,aAAA,CAAC;AACJ,SAAC,CAAC;AACJ,KAAC;AAEH;;;;;;AAMG;IACH,MAAM,SAAS,GAAG,CAAC,MAAM,GAAG,GAAG,KAC7B,UAAU,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,MAAM,CAAA,EAAA,CAAI,EAAE,CAAC;AAEzD;;;;;;AAMG;IACH,MAAM,SAAS,GAAG,CAAC,MAAM,GAAG,GAAG,KAC7B,UAAU,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,MAAM,CAAA,EAAA,CAAI,EAAE,CAAC;AAEzD;;;AAGG;AACH,IAAA,SAAS,aAAa,GAAA;AACpB,QAAA,UAAU,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,CAAc,WAAA,EAAA,CAAC,CAAiB,cAAA,EAAA,CAAC,CAAI,EAAA,CAAA,EAAE,CAAC;;IAGtE,OAAO;QACL,MAAM;QACN,MAAM;QACN,SAAS;QACT,SAAS;QACT,aAAa;KACd;AACH;;;;"}