npm - @aquera/nile-elements - Versions diffs - 0.1.22 → 0.1.24 - Mend

@aquera/nile-elements 0.1.22 → 0.1.24

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 (62) hide show

package/dist/nile-tab-group/nile-tab-group.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-tab-group.cjs.js","sources":["../../../src/nile-tab-group/nile-tab-group.ts"],"sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport {styles} from './nile-tab-group.css';\n\nimport '../nile-icon-button/nile-icon-button';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query, state } from 'lit/decorators.js';\nimport { scrollIntoView } from '../internal/scroll';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup, PropertyValueMap } from 'lit';\nimport type NileTab from '../nile-tab/nile-tab';\nimport type NileTabPanel from '../nile-tab-panel/nile-tab-panel';\n\n/\n Nile icon component.\n \n @tag nile-tab-group\n \n @slot - Used for grouping tab panels in the tab group. Must be `<nile-tab-panel>` elements.\n * @slot nav - Used for grouping tabs in the tab group. Must be `<nile-tab>` elements.\n \n @event {{ name: String }} nile-tab-show - Emitted when a tab is shown.\n * @event {{ name: String }} nile-tab-hide - Emitted when a tab is hidden.\n \n @csspart base - The component's base wrapper.\n * @csspart nav - The tab group's navigation container where tabs are slotted in.\n * @csspart tabs - The container that wraps the tabs.\n * @csspart active-tab-indicator - The line that highlights the currently selected tab.\n * @csspart body - The tab group's body where tab panels are slotted in.\n * @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an `<nile-icon-button>`.\n * @csspart scroll-button--start - The starting scroll button.\n * @csspart scroll-button--end - The ending scroll button.\n * @csspart scroll-button__base - The scroll button's exported `base` part.\n \n @cssproperty --indicator-color - The color of the active tab indicator.\n * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).\n * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).\n \n /\n@customElement('nile-tab-group')\nexport class NileTabGroup extends NileElement {\n\n static styles: CSSResultGroup = styles;\n\n private activeTab?: NileTab;\n private mutationObserver: MutationObserver;\n private resizeObserver: ResizeObserver;\n private tabs: NileTab[] = [];\n private panels: NileTabPanel[] = [];\n\n @query('.tab-group') tabGroup: HTMLElement;\n @query('.tab-group__body') body: HTMLSlotElement;\n @query('.tab-group__nav') nav: HTMLElement;\n @query('.tab-group__indicator') indicator: HTMLElement;\n\n @state() hasScrollControls = false;\n\n /** The placement of the tabs. /\n @property() placement: 'top' \| 'bottom' \| 'start' \| 'end' = 'top';\n\n /* The placement of the tabs. /\n @property({ reflect: true, attribute: 'value', type: String }) activeTabProp: string = '';\n\n /* Track for showing Indicators and Background. /\n @property({ type: Boolean, reflect: true, attribute:'no-track'}) noTrack = false;\n\n /\n When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\n * manual, the tab will receive focus but will not show until the user presses spacebar or enter.\n /\n @property() activation: 'auto' \| 'manual' = 'auto';\n\n /* Disables the scroll arrows that appear when tabs overflow. /\n @property({ attribute: 'no-scroll-controls', type: Boolean }) noScrollControls = false;\n\n /* Controls whether tabs are centered and have equal width */\n @property({ type: Boolean, reflect: true }) centered = false;\n\n @state() activeTabName: string = '';\n\n connectedCallback() {\n const whenAllDefined = Promise.allSettled([\n customElements.whenDefined('nile-tab'),\n customElements.whenDefined('nile-tab-panel')\n ]);\n\n super.connectedCallback();\n\n this.resizeObserver = new ResizeObserver(() => {\n this.repositionIndicator();\n // this.updateScrollControls();\n });\n\n this.mutationObserver = new MutationObserver(mutations => {\n // Update aria labels when the DOM changes\n if (mutations.some(m => !['aria-labelledby', 'aria-controls'].includes(m.attributeName!))) {\n setTimeout(() => this.setAriaLabels());\n }\n\n // Sync tabs when disabled states change\n if (mutations.some(m => m.attributeName === 'disabled')) {\n this.syncTabsAndPanels();\n }\n });\n\n // After the first update...\n this.updateComplete.then(() => {\n this.syncTabsAndPanels();\n if(this.activeTabProp) this.activeTabName=this.activeTabProp;\n else this.activeTabName=this.getActiveTab().panel;\n this.syncIndicator();\n\n this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });\n this.resizeObserver.observe(this.nav);\n // Wait for tabs and tab panels to be registered\n whenAllDefined.then(() => {\n // Set initial tab state when the tabs become visible\n const intersectionObserver = new IntersectionObserver((entries, observer) => {\n if (entries[0].intersectionRatio > 0) {\n this.setAriaLabels();\n observer.unobserve(entries[0].target);\n }\n });\n intersectionObserver.observe(this.tabGroup);\n });\n });\n }\n\n disconnectedCallback() {\n this.mutationObserver.disconnect();\n this.resizeObserver.unobserve(this.nav);\n }\n \n protected firstUpdated(_changedProperties: PropertyValueMap<any> \| Map<PropertyKey, unknown>): void {\n this.addEventListener('nile-toggle-change', this.handleToggleFromTab);\n }\n\n protected updated(_changedProperties: PropertyValueMap<any> \| Map<PropertyKey, unknown>): void {\n if(_changedProperties.has('activeTabName')){\n const tab=this.getActiveTab()\n if(!tab) return;\n this.setActiveTab(tab, {scrollBehavior: 'smooth' });\n }\n if(_changedProperties.has('activeTabProp')){\n this.activeTabName=this.activeTabProp;\n }\n }\n\n // @watch('noScrollControls', { waitUntilFirstUpdate: true })\n // updateScrollControls() {\n // this.setScrollControls()\n // }\n\n @watch('placement', { waitUntilFirstUpdate: true })\n syncIndicator() {\n if(!this.indicator) return;\n const tab = this.getActiveTab();\n\n if (tab) {\n this.indicator.style.display = 'block';\n this.repositionIndicator();\n } else {\n this.indicator.style.display = 'none';\n }\n }\n \n render() {\n return html`\n <div\n part=\"base\"\n class=${classMap({\n 'tab-group': true,\n 'tab-group--top': this.placement === 'top',\n 'tab-group--bottom': this.placement === 'bottom',\n 'tab-group--start': this.placement === 'start',\n 'tab-group--end': this.placement === 'end',\n 'tab-group--rtl': true,\n 'tab-group--has-scroll-controls': this.hasScrollControls,\n 'hide__track':this.noTrack\n })}\n @click=${this.handleClick}\n @keydown=${this.handleKeyDown}\n >\n <div class=\"tab-group__nav-container\" part=\"nav\">\n ${this.hasScrollControls\n ? html`\n <nile-icon-button\n part=\"scroll-button scroll-button--start\"\n exportparts=\"base:scroll-button__base\"\n class=\"tab-group__scroll-button tab-group__scroll-button--start\"\n name='arrowright'\n library=\"system\"\n label=\"scrollToStart\"\n @click=${this.handleScrollToEnd}\n ></nile-icon-button>\n `\n : ''}\n\n <div class=\"tab-group__nav\">\n <div part=\"tabs\" class=\"tab-group__tabs\" role=\"tablist\">\n <div\n part=\"active-tab-indicator\"\n class=${classMap({\n 'tab-group__indicator': !this.noTrack,\n })}\n ></div>\n <slot name=\"nav\" @slotchange=${this.syncTabsAndPanels}></slot>\n </div>\n </div>\n\n ${this.hasScrollControls\n ? html`\n <nile-icon-button\n part=\"scroll-button scroll-button--end\"\n exportparts=\"base:scroll-button__base\"\n class=\"tab-group__scroll-button tab-group__scroll-button--end\"\n name='arrowleft'\n library=\"system\"\n label=\"scrollToEnd\"\n @click=${this.handleScrollToStart}\n ></nile-icon-button>\n `\n : ''}\n </div>\n\n <slot part=\"body\" class=\"tab-group__body\" @slotchange=${this.syncTabsAndPanels}></slot>\n </div>\n `;\n }\n\n private getAllTabs(options: { includeDisabled: boolean } = { includeDisabled: true }) {\n const slot = this.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=\"nav\"]')!;\n\n return [...(slot.assignedElements() as NileTab[])].filter(el => {\n return options.includeDisabled\n ? el.tagName.toLowerCase() === 'nile-tab'\n : el.tagName.toLowerCase() === 'nile-tab' && !el.disabled;\n });\n }\n\n private getAllPanels() {\n return [...this.body.assignedElements()].filter(el => el.tagName.toLowerCase() === 'nile-tab-panel') as [NileTabPanel];\n }\n\n private getActiveTab() {\n return this.tabs.find(el => this.activeTabName?el.panel==this.activeTabName:el.active) ?? this.tabs[0];\n }\n\n private handleClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n const tab = target.closest('nile-tab');\n const tabGroup = tab?.closest('nile-tab-group');\n\n // Ensure the target tab is in this tab group\n if (tabGroup !== this) {\n return;\n }\n\n if (tab !== null && !tab.disabled) {\n this.activeTabName=tab.panel\n }\n }\n\n setScrollControls(){\n if (this.noScrollControls) {\n this.hasScrollControls = false;\n } else {\n this.hasScrollControls = ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth;\n }\n this.hasScrollControls = false;\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n const target = event.target as HTMLElement;\n const tab = target.closest('nile-tab');\n const tabGroup = tab?.closest('nile-tab-group');\n\n // Ensure the target tab is in this tab group\n if (tabGroup !== this) {\n return;\n }\n\n // Activate a tab\n if (['Enter', ' '].includes(event.key)) {\n if (tab !== null) {\n this.activeTabName=tab.panel\n event.preventDefault();\n }\n }\n\n // Move focus left or right\n if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n const activeEl = tab;\n const isRtl = false;\n\n if (activeEl?.tagName.toLowerCase() === 'nile-tab') {\n let index = this.tabs.indexOf(activeEl);\n\n if (event.key === 'Home') {\n index = 0;\n } else if (event.key === 'End') {\n index = this.tabs.length - 1;\n } else if (\n (['top', 'bottom'].includes(this.placement) && event.key === (isRtl ? 'ArrowRight' : 'ArrowLeft')) \|\|\n (['start', 'end'].includes(this.placement) && event.key === 'ArrowUp')\n ) {\n index--;\n } else if (\n (['top', 'bottom'].includes(this.placement) && event.key === (isRtl ? 'ArrowLeft' : 'ArrowRight')) \|\|\n (['start', 'end'].includes(this.placement) && event.key === 'ArrowDown')\n ) {\n index++;\n }\n\n if (index < 0) {\n index = this.tabs.length - 1;\n }\n\n if (index > this.tabs.length - 1) {\n index = 0;\n }\n\n this.tabs[index].focus({ preventScroll: true });\n\n if (this.activation === 'auto') {\n this.activeTabName=this.tabs[index].panel\n }\n\n if (['top', 'bottom'].includes(this.placement)) {\n scrollIntoView(this.tabs[index], this.nav, 'horizontal');\n }\n\n event.preventDefault();\n }\n }\n }\n\n private handleScrollToStart() {\n this.nav.scroll({\n left:-this.nav.scrollWidth,\n behavior: 'smooth'\n });\n }\n\n private handleScrollToEnd() {\n this.nav.scroll({\n left:this.nav.scrollWidth,\n behavior: 'smooth'\n });\n }\n\n private setActiveTab(tab: NileTab, options?: { emitEvents?: boolean; scrollBehavior?: 'auto' \| 'smooth' }) {\n options = {\n emitEvents: true,\n scrollBehavior: 'auto',\n ...options\n };\n\n if (tab !== this.activeTab && !tab.disabled) {\n\n const previousTab = this.activeTab;\n this.activeTab = tab;\n\n // Sync active tab and panel\n this.tabs.map(el => (el.active = el === this.activeTab));\n this.panels.map(el => (el.active = el.name === this.activeTab?.panel));\n this.syncIndicator();\n\n if (['top', 'bottom'].includes(this.placement)) {\n scrollIntoView(this.activeTab, this.nav, 'horizontal', options.scrollBehavior);\n }\n\n // Emit events\n if (options.emitEvents) {\n if (previousTab) {\n this.emit('nile-tab-hide', { value: previousTab.panel });\n }\n\n this.emit('nile-tab-show', { value: this.activeTab.panel });\n }\n }\n }\n\n private setAriaLabels() {\n // Link each tab with its corresponding panel\n this.tabs.forEach(tab => {\n const panel = this.panels.find(el => el.name === tab.panel);\n if (panel) {\n tab.setAttribute('aria-controls', panel.getAttribute('id')!);\n panel.setAttribute('aria-labelledby', tab.getAttribute('id')!);\n }\n });\n }\n\n private repositionIndicator() {\n const currentTab = this.getActiveTab();\n\n if (!currentTab \|\| !this.indicator) {\n return;\n }\n\n const width = currentTab.clientWidth;\n const height = currentTab.clientHeight;\n const isRtl = false;\n\n // We can't used offsetLeft/offsetTop here due to a shadow parent issue where neither can getBoundingClientRect\n // because it provides invalid values for animating elements: https://bugs.chromium.org/p/chromium/issues/detail?id=920069\n const allTabs = this.getAllTabs();\n const precedingTabs = allTabs.slice(0, allTabs.indexOf(currentTab));\n const offset = precedingTabs.reduce(\n (previous, current) => ({\n left: previous.left + current.clientWidth + 12,\n top: previous.top + current.clientHeight + 12\n }),\n { left: 0, top: 0 }\n );\n\n switch (this.placement) {\n case 'top':\n case 'bottom':\n this.indicator.style.width = `${width - 5}px`;\n this.indicator.style.height = 'auto';\n this.indicator.style.translate = `${offset.left + 2}px`;\n break;\n\n case 'start':\n case 'end':\n this.indicator.style.width = 'auto';\n this.indicator.style.height = `${height}px`;\n this.indicator.style.translate = `0 ${offset.top}px`;\n break;\n }\n }\n\n // This stores tabs and panels so we can refer to a cache instead of calling querySelectorAll() multiple times.\n private syncTabsAndPanels() {\n this.tabs = this.getAllTabs({ includeDisabled: false });\n this.panels = this.getAllPanels();\n\n this.tabs.forEach((tab:any) => {\n tab.centered = this.centered;\n });\n\n // After updating, show or hide scroll controls as needed\n // this.updateComplete.then(() => this.updateScrollControls());\n }\n \n private handleToggleFromTab(e:CustomEvent){\n e.stopPropagation();\n this.activeTabName=e.detail.value;\n }\n\n}\n\nexport default NileTabGroup;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-tab-group': NileTabGroup;\n }\n}\n"],"names":["NileTabGroup","m","this","tabs","panels","hasScrollControls","placement","activeTabProp","noTrack","activation","noScrollControls","centered","activeTabName","_this","_inherits","_p","_createClass","key","value","connectedCallback","whenAllDefined","Promise","allSettled","customElements","whenDefined","super","resizeObserver","ResizeObserver","repositionIndicator","mutationObserver","MutationObserver","mutations","some","includes","attributeName","setTimeout","setAriaLabels","syncTabsAndPanels","updateComplete","then","getActiveTab","panel","syncIndicator","observe","attributes","childList","subtree","nav","IntersectionObserver","entries","observer","intersectionRatio","unobserve","target","tabGroup","disconnectedCallback","disconnect","firstUpdated","_changedProperties","addEventListener","handleToggleFromTab","updated","has","tab","setActiveTab","scrollBehavior","indicator","style","display","render","html","_templateObject","_taggedTemplateLiteral","classMap","hide__track","handleClick","handleKeyDown","_templateObject2","handleScrollToEnd","_templateObject3","handleScrollToStart","getAllTabs","options","includeDisabled","_toConsumableArray","shadowRoot","querySelector","assignedElements","filter","el","tagName","toLowerCase","disabled","getAllPanels","body","_this$tabs$find","_this3","find","active","event","closest","setScrollControls","scrollWidth","clientWidth","preventDefault","activeEl","index","indexOf","length","focus","preventScroll","scrollIntoView","scroll","left","behavior","emitEvents","activeTab","previousTab","map","name","emit","forEach","setAttribute","getAttribute","currentTab","width","height","clientHeight","allTabs","offset","slice","reduce","previous","current","top","translate","e","stopPropagation","detail","NileElement","styles","__decorate","query","prototype","state","property","reflect","attribute","type","String","Boolean","watch","waitUntilFirstUpdate","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"nile-tab-group.cjs.js","sources":["../../../src/nile-tab-group/nile-tab-group.ts"],"sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport {styles} from './nile-tab-group.css';\n\nimport '../nile-icon-button/nile-icon-button';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query, state } from 'lit/decorators.js';\nimport { scrollIntoView } from '../internal/scroll';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup, PropertyValueMap } from 'lit';\nimport type NileTab from '../nile-tab/nile-tab';\nimport type NileTabPanel from '../nile-tab-panel/nile-tab-panel';\n\n/\n Nile icon component.\n \n @tag nile-tab-group\n \n @slot - Used for grouping tab panels in the tab group. Must be `<nile-tab-panel>` elements.\n * @slot nav - Used for grouping tabs in the tab group. Must be `<nile-tab>` elements.\n \n @event {{ name: String }} nile-tab-show - Emitted when a tab is shown.\n * @event {{ name: String }} nile-tab-hide - Emitted when a tab is hidden.\n \n @csspart base - The component's base wrapper.\n * @csspart nav - The tab group's navigation container where tabs are slotted in.\n * @csspart tabs - The container that wraps the tabs.\n * @csspart active-tab-indicator - The line that highlights the currently selected tab.\n * @csspart body - The tab group's body where tab panels are slotted in.\n * @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an `<nile-icon-button>`.\n * @csspart scroll-button--start - The starting scroll button.\n * @csspart scroll-button--end - The ending scroll button.\n * @csspart scroll-button__base - The scroll button's exported `base` part.\n \n @cssproperty --indicator-color - The color of the active tab indicator.\n * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).\n * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).\n \n /\n@customElement('nile-tab-group')\nexport class NileTabGroup extends NileElement {\n\n static styles: CSSResultGroup = styles;\n\n private activeTab?: NileTab;\n private mutationObserver: MutationObserver;\n private resizeObserver: ResizeObserver;\n private tabs: NileTab[] = [];\n private panels: NileTabPanel[] = [];\n\n @query('.tab-group') tabGroup: HTMLElement;\n @query('.tab-group__body') body: HTMLSlotElement;\n @query('.tab-group__nav') nav: HTMLElement;\n @query('.tab-group__indicator') indicator: HTMLElement;\n\n @state() hasScrollControls = false;\n\n /** The placement of the tabs. /\n @property() placement: 'top' \| 'bottom' \| 'start' \| 'end' = 'top';\n\n /* The placement of the tabs. /\n @property({ reflect: true, attribute: 'value', type: String }) activeTabProp: string = '';\n\n /* Track for showing Indicators and Background. /\n @property({ type: Boolean, reflect: true, attribute:'no-track'}) noTrack = false;\n\n /\n When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\n * manual, the tab will receive focus but will not show until the user presses spacebar or enter.\n /\n @property() activation: 'auto' \| 'manual' = 'auto';\n\n /* Disables the scroll arrows that appear when tabs overflow. /\n @property({ attribute: 'no-scroll-controls', type: Boolean }) noScrollControls = false;\n\n /* Controls whether tabs are centered and have equal width */\n @property({ type: Boolean, reflect: true }) centered = false;\n\n @state() activeTabName: string = '';\n\n connectedCallback() {\n const whenAllDefined = Promise.allSettled([\n customElements.whenDefined('nile-tab'),\n customElements.whenDefined('nile-tab-panel')\n ]);\n\n super.connectedCallback();\n\n this.resizeObserver = new ResizeObserver(() => {\n this.repositionIndicator();\n // this.updateScrollControls();\n });\n\n this.mutationObserver = new MutationObserver(mutations => {\n // Update aria labels when the DOM changes\n if (mutations.some(m => !['aria-labelledby', 'aria-controls'].includes(m.attributeName!))) {\n setTimeout(() => this.setAriaLabels());\n }\n\n // Sync tabs when disabled states change\n if (mutations.some(m => m.attributeName === 'disabled')) {\n this.syncTabsAndPanels();\n }\n });\n\n // After the first update...\n this.updateComplete.then(() => {\n this.syncTabsAndPanels();\n if(this.activeTabProp) this.activeTabName=this.activeTabProp;\n else this.activeTabName=this.getActiveTab().panel;\n this.syncIndicator();\n\n this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });\n this.resizeObserver.observe(this.nav);\n // Wait for tabs and tab panels to be registered\n whenAllDefined.then(() => {\n // Set initial tab state when the tabs become visible\n const intersectionObserver = new IntersectionObserver((entries, observer) => {\n if (entries[0].intersectionRatio > 0) {\n this.setAriaLabels();\n observer.unobserve(entries[0].target);\n }\n });\n intersectionObserver.observe(this.tabGroup);\n });\n });\n }\n\n disconnectedCallback() {\n this.mutationObserver.disconnect();\n this.resizeObserver.unobserve(this.nav);\n }\n \n protected firstUpdated(_changedProperties: PropertyValueMap<any> \| Map<PropertyKey, unknown>): void {\n this.addEventListener('nile-toggle-change', this.handleToggleFromTab);\n }\n\n protected updated(_changedProperties: PropertyValueMap<any> \| Map<PropertyKey, unknown>): void {\n if(_changedProperties.has('activeTabName')){\n const tab=this.getActiveTab()\n if(!tab) return;\n this.setActiveTab(tab, {scrollBehavior: 'smooth' });\n }\n if(_changedProperties.has('activeTabProp')){\n this.activeTabName=this.activeTabProp;\n }\n }\n\n // @watch('noScrollControls', { waitUntilFirstUpdate: true })\n // updateScrollControls() {\n // this.setScrollControls()\n // }\n\n @watch('placement', { waitUntilFirstUpdate: true })\n syncIndicator() {\n if(!this.indicator) return;\n const tab = this.getActiveTab();\n\n if (tab) {\n this.indicator.style.display = 'block';\n this.repositionIndicator();\n } else {\n this.indicator.style.display = 'none';\n }\n }\n \n render() {\n return html`\n <div\n part=\"base\"\n class=${classMap({\n 'tab-group': true,\n 'tab-group--top': this.placement === 'top',\n 'tab-group--bottom': this.placement === 'bottom',\n 'tab-group--start': this.placement === 'start',\n 'tab-group--end': this.placement === 'end',\n 'tab-group--rtl': true,\n 'tab-group--has-scroll-controls': this.hasScrollControls,\n 'hide__track':this.noTrack\n })}\n @click=${this.handleClick}\n @keydown=${this.handleKeyDown}\n >\n <div class=\"tab-group__nav-container\" part=\"nav\">\n ${this.hasScrollControls\n ? html`\n <nile-icon-button\n part=\"scroll-button scroll-button--start\"\n exportparts=\"base:scroll-button__base\"\n class=\"tab-group__scroll-button tab-group__scroll-button--start\"\n name='arrowright'\n library=\"system\"\n label=\"scrollToStart\"\n @click=${this.handleScrollToEnd}\n ></nile-icon-button>\n `\n : ''}\n\n <div class=\"tab-group__nav\">\n <div part=\"tabs\" class=\"tab-group__tabs\" role=\"tablist\">\n <div part=\"active-tab-indicator-path\" class=\"tab-group__indicator__path\"></div>\n <div\n part=\"active-tab-indicator\"\n class=${classMap({\n 'tab-group__indicator': !this.noTrack,\n })}\n ></div>\n\n <slot name=\"nav\" @slotchange=${this.syncTabsAndPanels}></slot>\n </div>\n </div>\n\n ${this.hasScrollControls\n ? html`\n <nile-icon-button\n part=\"scroll-button scroll-button--end\"\n exportparts=\"base:scroll-button__base\"\n class=\"tab-group__scroll-button tab-group__scroll-button--end\"\n name='arrowleft'\n library=\"system\"\n label=\"scrollToEnd\"\n @click=${this.handleScrollToStart}\n ></nile-icon-button>\n `\n : ''}\n </div>\n\n <slot part=\"body\" class=\"tab-group__body\" @slotchange=${this.syncTabsAndPanels}></slot>\n </div>\n `;\n }\n\n private getAllTabs(options: { includeDisabled: boolean } = { includeDisabled: true }) {\n const slot = this.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=\"nav\"]')!;\n\n return [...(slot.assignedElements() as NileTab[])].filter(el => {\n return options.includeDisabled\n ? el.tagName.toLowerCase() === 'nile-tab'\n : el.tagName.toLowerCase() === 'nile-tab' && !el.disabled;\n });\n }\n\n private getAllPanels() {\n return [...this.body.assignedElements()].filter(el => el.tagName.toLowerCase() === 'nile-tab-panel') as [NileTabPanel];\n }\n\n private getActiveTab() {\n return this.tabs.find(el => this.activeTabName?el.panel==this.activeTabName:el.active) ?? this.tabs[0];\n }\n\n private handleClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n const tab = target.closest('nile-tab');\n const tabGroup = tab?.closest('nile-tab-group');\n\n // Ensure the target tab is in this tab group\n if (tabGroup !== this) {\n return;\n }\n\n if (tab !== null && !tab.disabled) {\n this.activeTabName=tab.panel\n }\n }\n\n setScrollControls(){\n if (this.noScrollControls) {\n this.hasScrollControls = false;\n } else {\n this.hasScrollControls = ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth;\n }\n this.hasScrollControls = false;\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n const target = event.target as HTMLElement;\n const tab = target.closest('nile-tab');\n const tabGroup = tab?.closest('nile-tab-group');\n\n // Ensure the target tab is in this tab group\n if (tabGroup !== this) {\n return;\n }\n\n // Activate a tab\n if (['Enter', ' '].includes(event.key)) {\n if (tab !== null) {\n this.activeTabName=tab.panel\n event.preventDefault();\n }\n }\n\n // Move focus left or right\n if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n const activeEl = tab;\n const isRtl = false;\n\n if (activeEl?.tagName.toLowerCase() === 'nile-tab') {\n let index = this.tabs.indexOf(activeEl);\n\n if (event.key === 'Home') {\n index = 0;\n } else if (event.key === 'End') {\n index = this.tabs.length - 1;\n } else if (\n (['top', 'bottom'].includes(this.placement) && event.key === (isRtl ? 'ArrowRight' : 'ArrowLeft')) \|\|\n (['start', 'end'].includes(this.placement) && event.key === 'ArrowUp')\n ) {\n index--;\n } else if (\n (['top', 'bottom'].includes(this.placement) && event.key === (isRtl ? 'ArrowLeft' : 'ArrowRight')) \|\|\n (['start', 'end'].includes(this.placement) && event.key === 'ArrowDown')\n ) {\n index++;\n }\n\n if (index < 0) {\n index = this.tabs.length - 1;\n }\n\n if (index > this.tabs.length - 1) {\n index = 0;\n }\n\n this.tabs[index].focus({ preventScroll: true });\n\n if (this.activation === 'auto') {\n this.activeTabName=this.tabs[index].panel\n }\n\n if (['top', 'bottom'].includes(this.placement)) {\n scrollIntoView(this.tabs[index], this.nav, 'horizontal');\n }\n\n event.preventDefault();\n }\n }\n }\n\n private handleScrollToStart() {\n this.nav.scroll({\n left:-this.nav.scrollWidth,\n behavior: 'smooth'\n });\n }\n\n private handleScrollToEnd() {\n this.nav.scroll({\n left:this.nav.scrollWidth,\n behavior: 'smooth'\n });\n }\n\n private setActiveTab(tab: NileTab, options?: { emitEvents?: boolean; scrollBehavior?: 'auto' \| 'smooth' }) {\n options = {\n emitEvents: true,\n scrollBehavior: 'auto',\n ...options\n };\n\n if (tab !== this.activeTab && !tab.disabled) {\n\n const previousTab = this.activeTab;\n this.activeTab = tab;\n\n // Sync active tab and panel\n this.tabs.map(el => (el.active = el === this.activeTab));\n this.panels.map(el => (el.active = el.name === this.activeTab?.panel));\n this.syncIndicator();\n\n if (['top', 'bottom'].includes(this.placement)) {\n scrollIntoView(this.activeTab, this.nav, 'horizontal', options.scrollBehavior);\n }\n\n // Emit events\n if (options.emitEvents) {\n if (previousTab) {\n this.emit('nile-tab-hide', { value: previousTab.panel });\n }\n\n this.emit('nile-tab-show', { value: this.activeTab.panel });\n }\n }\n }\n\n private setAriaLabels() {\n // Link each tab with its corresponding panel\n this.tabs.forEach(tab => {\n const panel = this.panels.find(el => el.name === tab.panel);\n if (panel) {\n tab.setAttribute('aria-controls', panel.getAttribute('id')!);\n panel.setAttribute('aria-labelledby', tab.getAttribute('id')!);\n }\n });\n }\n\n private repositionIndicator() {\n const currentTab = this.getActiveTab();\n\n if (!currentTab \|\| !this.indicator) {\n return;\n }\n\n const width = currentTab.clientWidth;\n const height = currentTab.clientHeight;\n const isRtl = false;\n\n // We can't used offsetLeft/offsetTop here due to a shadow parent issue where neither can getBoundingClientRect\n // because it provides invalid values for animating elements: https://bugs.chromium.org/p/chromium/issues/detail?id=920069\n const allTabs = this.getAllTabs();\n const precedingTabs = allTabs.slice(0, allTabs.indexOf(currentTab));\n const offset = precedingTabs.reduce(\n (previous, current) => ({\n left: previous.left + current.clientWidth + 12,\n top: previous.top + current.clientHeight + 12\n }),\n { left: 0, top: 0 }\n );\n\n switch (this.placement) {\n case 'top':\n case 'bottom':\n this.indicator.style.width = `${width - 5}px`;\n this.indicator.style.height = 'auto';\n this.indicator.style.translate = `${offset.left + 2}px`;\n break;\n\n case 'start':\n case 'end':\n this.indicator.style.width = 'auto';\n this.indicator.style.height = `${height}px`;\n this.indicator.style.translate = `0 ${offset.top}px`;\n break;\n }\n }\n\n // This stores tabs and panels so we can refer to a cache instead of calling querySelectorAll() multiple times.\n private syncTabsAndPanels() {\n this.tabs = this.getAllTabs({ includeDisabled: false });\n this.panels = this.getAllPanels();\n\n this.tabs.forEach((tab:any) => {\n tab.centered = this.centered;\n });\n\n // After updating, show or hide scroll controls as needed\n // this.updateComplete.then(() => this.updateScrollControls());\n }\n \n private handleToggleFromTab(e:CustomEvent){\n e.stopPropagation();\n this.activeTabName=e.detail.value;\n }\n\n}\n\nexport default NileTabGroup;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-tab-group': NileTabGroup;\n }\n}\n"],"names":["NileTabGroup","m","this","tabs","panels","hasScrollControls","placement","activeTabProp","noTrack","activation","noScrollControls","centered","activeTabName","_this","_inherits","_p","_createClass","key","value","connectedCallback","whenAllDefined","Promise","allSettled","customElements","whenDefined","super","resizeObserver","ResizeObserver","repositionIndicator","mutationObserver","MutationObserver","mutations","some","includes","attributeName","setTimeout","setAriaLabels","syncTabsAndPanels","updateComplete","then","getActiveTab","panel","syncIndicator","observe","attributes","childList","subtree","nav","IntersectionObserver","entries","observer","intersectionRatio","unobserve","target","tabGroup","disconnectedCallback","disconnect","firstUpdated","_changedProperties","addEventListener","handleToggleFromTab","updated","has","tab","setActiveTab","scrollBehavior","indicator","style","display","render","html","_templateObject","_taggedTemplateLiteral","classMap","hide__track","handleClick","handleKeyDown","_templateObject2","handleScrollToEnd","_templateObject3","handleScrollToStart","getAllTabs","options","includeDisabled","_toConsumableArray","shadowRoot","querySelector","assignedElements","filter","el","tagName","toLowerCase","disabled","getAllPanels","body","_this$tabs$find","_this3","find","active","event","closest","setScrollControls","scrollWidth","clientWidth","preventDefault","activeEl","index","indexOf","length","focus","preventScroll","scrollIntoView","scroll","left","behavior","emitEvents","activeTab","previousTab","map","name","emit","forEach","setAttribute","getAttribute","currentTab","width","height","clientHeight","allTabs","offset","slice","reduce","previous","current","top","translate","e","stopPropagation","detail","NileElement","styles","__decorate","query","prototype","state","property","reflect","attribute","type","String","Boolean","watch","waitUntilFirstUpdate","customElement"],"mappings":"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"}

package/dist/nile-tab-group/nile-tab-group.css.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var t,_templateObject,o;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){t=_lit.css;}],execute:function execute(){_export("s",o=t(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    --indicator-color: var(--nile-colors-primary-600);\n    --track-color: var(--nile-colors-neutral-400);\n    --track-width: 2px;\n    --tab-gap: 12px;\n\n    display: block;\n  }\n\n  .tab-group {\n    display: flex;\n    border-radius: 0;\n  }\n\n  .tab-group__tabs {\n    display: flex;\n    position: relative;\n    gap: var(--tab-gap);\n  }\n\n  .hide__track {\n    --track-width: 0px;\n    --tab-gap: 3px;\n  }\n\n  .tab-group__indicator {\n    position: absolute;\n    transition: 0.3s translate ease, 0.3s width ease;\n  }\n\n  .tab-group--has-scroll-controls .tab-group__nav-container {\n    position: relative;\n    padding: 0 10px;\n  }\n\n  .tab-group__body {\n    display: block;\n    overflow: auto;\n  }\n\n  .tab-group__scroll-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: 20px;\n  }\n\n  .tab-group__scroll-button--start {\n    left: 0;\n  }\n\n  .tab-group__scroll-button--end {\n    right: 0;\n  }\n\n  .tab-group--rtl .tab-group__scroll-button--start {\n    left: auto;\n    right: 0;\n  }\n\n  .tab-group--rtl .tab-group__scroll-button--end {\n    left: 0;\n    right: auto;\n  }\n\n  /*\n   * Top\n   */\n\n  .tab-group--top {\n    flex-direction: column;\n  }\n\n  .tab-group--top .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group--top .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n\n    /* Hide scrollbar in Firefox */\n    scrollbar-width: none;\n  }\n\n  /* Hide scrollbar in Chrome/Safari */\n  .tab-group--top .tab-group__nav::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  .tab-group--top .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n    border-bottom: solid var(--track-width)\n      var(--nile-colors-gray-light-mode-200);\n  }\n\n  .tab-group--top .tab-group__indicator {\n    bottom: -2px;\n    border-bottom: 2px solid var(--nile-colors-primary-600);\n  }\n\n  .tab-group--top .tab-group__body {\n    order: 2;\n  }\n\n  .tab-group--top ::slotted(nile-tab-panel) {\n    --padding: 10px 0;\n  }\n\n  /*\n   * Bottom\n   */\n\n  .tab-group--bottom {\n    flex-direction: column;\n  }\n\n  .tab-group--bottom .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group--bottom .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n\n    /* Hide scrollbar in Firefox */\n    scrollbar-width: none;\n  }\n\n  /* Hide scrollbar in Chrome/Safari */\n  .tab-group--bottom .tab-group__nav::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  .tab-group--bottom .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n    border-top: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--bottom .tab-group__indicator {\n    top: calc(-1 * var(--track-width));\n    border-top: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--bottom .tab-group__body {\n    order: 1;\n  }\n\n  .tab-group--bottom ::slotted(nile-tab-panel) {\n    --padding: 10px 0;\n  }\n\n  /*\n   * Start\n   */\n\n  .tab-group--start {\n    flex-direction: row;\n  }\n\n  .tab-group--start .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group--start .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n    border-inline-end: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--start .tab-group__indicator {\n    right: calc(-1 * var(--track-width));\n    border-right: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--start.tab-group--rtl .tab-group__indicator {\n    right: auto;\n    left: calc(-1 * var(--track-width));\n  }\n\n  .tab-group--start .tab-group__body {\n    flex: 1 1 auto;\n    order: 2;\n  }\n\n  .tab-group--start ::slotted(nile-tab-panel) {\n    --padding: 0 10px;\n  }\n\n  /*\n   * End\n   */\n\n  .tab-group--end {\n    flex-direction: row;\n  }\n\n  .tab-group--end .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group--end .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n    border-left: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--end .tab-group__indicator {\n    left: calc(-1 * var(--track-width));\n    border-inline-start: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--end.tab-group--rtl .tab-group__indicator {\n    right: calc(-1 * var(--track-width));\n    left: auto;\n  }\n\n  .tab-group--end .tab-group__body {\n    flex: 1 1 auto;\n    order: 1;\n  }\n\n  .tab-group--end ::slotted(nile-tab-panel) {\n    --padding: 0 10px;\n  }\n\n  .hide__track slot::slotted(nile-tab) {\n    --tab-border-radius: 4px;\n    --tab-padding:8px 12px;\n    --tab-hover-background-color: var(--nile-colors-neutral-100);\n    --tab-active-background-color: var(--nile-colors-brand-50);\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var t,_templateObject,o;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){t=_lit.css;}],execute:function execute(){_export("s",o=t(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    --indicator-color: var(--nile-colors-primary-600);\n    --track-color: var(--nile-colors-neutral-400);\n    --track-width: 2px;\n    --tab-gap: 12px;\n\n    display: block;\n  }\n\n  .tab-group {\n    display: flex;\n    border-radius: 0;\n  }\n\n  .tab-group__tabs {\n    display: flex;\n    position: relative;\n    gap: var(--tab-gap);\n  }\n\n  .hide__track {\n    --track-width: 0px;\n    --tab-gap: 3px;\n  }\n\n  .tab-group__indicator {\n    position: absolute;\n    transition: 0.3s translate ease, 0.3s width ease;\n  }\n\n  .tab-group__indicator__path{\n    position: absolute;\n    height: var(--track-width);\n    width: 100%;\n    background: var(--nile-colors-neutral-400);\n    bottom:0px;\n    z-index:-1;\n  }\n\n  .tab-group--has-scroll-controls .tab-group__nav-container {\n    position: relative;\n    padding: 0 10px;\n  }\n\n  .tab-group__body {\n    display: block;\n    overflow: auto;\n  }\n\n  .tab-group__scroll-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: 20px;\n  }\n\n  .tab-group__scroll-button--start {\n    left: 0;\n  }\n\n  .tab-group__scroll-button--end {\n    right: 0;\n  }\n\n  .tab-group--rtl .tab-group__scroll-button--start {\n    left: auto;\n    right: 0;\n  }\n\n  .tab-group--rtl .tab-group__scroll-button--end {\n    left: 0;\n    right: auto;\n  }\n\n  /*\n   * Top\n   */\n\n  .tab-group--top {\n    flex-direction: column;\n  }\n\n  .tab-group--top .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group--top .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n\n    /* Hide scrollbar in Firefox */\n    scrollbar-width: none;\n  }\n\n  /* Hide scrollbar in Chrome/Safari */\n  .tab-group--top .tab-group__nav::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  .tab-group--top .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n  }\n\n  .tab-group--top .tab-group__indicator {\n    bottom: 0px;\n    border-bottom: 2px solid var(--nile-colors-primary-600);\n    z-index:-1;\n  }\n\n  .tab-group--top .tab-group__body {\n    order: 2;\n  }\n\n  .tab-group--top ::slotted(nile-tab-panel) {\n    --padding: 10px 0;\n  }\n\n  /*\n   * Bottom\n   */\n\n  .tab-group--bottom {\n    flex-direction: column;\n  }\n\n  .tab-group--bottom .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group--bottom .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n\n    /* Hide scrollbar in Firefox */\n    scrollbar-width: none;\n  }\n\n  /* Hide scrollbar in Chrome/Safari */\n  .tab-group--bottom .tab-group__nav::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  .tab-group--bottom .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n    border-top: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--bottom .tab-group__indicator {\n    top: calc(-1 * var(--track-width));\n    border-top: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--bottom .tab-group__body {\n    order: 1;\n  }\n\n  .tab-group--bottom ::slotted(nile-tab-panel) {\n    --padding: 10px 0;\n  }\n\n  /*\n   * Start\n   */\n\n  .tab-group--start {\n    flex-direction: row;\n  }\n\n  .tab-group--start .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group--start .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n    border-inline-end: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--start .tab-group__indicator {\n    right: calc(-1 * var(--track-width));\n    border-right: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--start.tab-group--rtl .tab-group__indicator {\n    right: auto;\n    left: calc(-1 * var(--track-width));\n  }\n\n  .tab-group--start .tab-group__body {\n    flex: 1 1 auto;\n    order: 2;\n  }\n\n  .tab-group--start ::slotted(nile-tab-panel) {\n    --padding: 0 10px;\n  }\n\n  /*\n   * End\n   */\n\n  .tab-group--end {\n    flex-direction: row;\n  }\n\n  .tab-group--end .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group--end .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n    border-left: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--end .tab-group__indicator {\n    left: calc(-1 * var(--track-width));\n    border-inline-start: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--end.tab-group--rtl .tab-group__indicator {\n    right: calc(-1 * var(--track-width));\n    left: auto;\n  }\n\n  .tab-group--end .tab-group__body {\n    flex: 1 1 auto;\n    order: 1;\n  }\n\n  .tab-group--end ::slotted(nile-tab-panel) {\n    --padding: 0 10px;\n  }\n\n  .hide__track slot::slotted(nile-tab) {\n    --tab-border-radius: 4px;\n    --tab-padding:8px 12px;\n    --tab-hover-background-color: var(--nile-colors-neutral-100);\n    --tab-active-background-color: var(--nile-colors-brand-50);\n  }\n"]))));}};});
 //# sourceMappingURL=nile-tab-group.css.cjs.js.map

package/dist/nile-tab-group/nile-tab-group.css.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-tab-group.css.cjs.js","sources":["../../../src/nile-tab-group/nile-tab-group.css.ts"],"sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { css } from 'lit';\n\n/\n TabGroup CSS\n /\nexport const styles = css`\n [hidden] {\n display: none !important;\n }\n\n :host {\n --indicator-color: var(--nile-colors-primary-600);\n --track-color: var(--nile-colors-neutral-400);\n --track-width: 2px;\n --tab-gap: 12px;\n\n display: block;\n }\n\n .tab-group {\n display: flex;\n border-radius: 0;\n }\n\n .tab-group__tabs {\n display: flex;\n position: relative;\n gap: var(--tab-gap);\n }\n\n .hide__track {\n --track-width: 0px;\n --tab-gap: 3px;\n }\n\n .tab-group__indicator {\n position: absolute;\n transition: 0.3s translate ease, 0.3s width ease;\n }\n\n .tab-group--has-scroll-controls .tab-group__nav-container {\n position: relative;\n padding: 0 10px;\n }\n\n .tab-group__body {\n display: block;\n overflow: auto;\n }\n\n .tab-group__scroll-button {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: 0;\n bottom: 0;\n width: 20px;\n }\n\n .tab-group__scroll-button--start {\n left: 0;\n }\n\n .tab-group__scroll-button--end {\n right: 0;\n }\n\n .tab-group--rtl .tab-group__scroll-button--start {\n left: auto;\n right: 0;\n }\n\n .tab-group--rtl .tab-group__scroll-button--end {\n left: 0;\n right: auto;\n }\n\n /\n * Top\n /\n\n .tab-group--top {\n flex-direction: column;\n }\n\n .tab-group--top .tab-group__nav-container {\n order: 1;\n }\n\n .tab-group--top .tab-group__nav {\n display: flex;\n overflow-x: auto;\n\n / Hide scrollbar in Firefox /\n scrollbar-width: none;\n }\n\n / Hide scrollbar in Chrome/Safari /\n .tab-group--top .tab-group__nav::-webkit-scrollbar {\n width: 0;\n height: 0;\n }\n\n .tab-group--top .tab-group__tabs {\n flex: 1 1 auto;\n position: relative;\n flex-direction: row;\n ~~border-bottom: solid var(--track-width)\n var(--nile-colors-gray-light-mode-200);\n~~ }\n\n .tab-group--top .tab-group__indicator {\n bottom: ~~-2px~~;\n border-bottom: 2px solid var(--nile-colors-primary-600);\n }\n\n .tab-group--top .tab-group__body {\n order: 2;\n }\n\n .tab-group--top ::slotted(nile-tab-panel) {\n --padding: 10px 0;\n }\n\n /\n * Bottom\n /\n\n .tab-group--bottom {\n flex-direction: column;\n }\n\n .tab-group--bottom .tab-group__nav-container {\n order: 2;\n }\n\n .tab-group--bottom .tab-group__nav {\n display: flex;\n overflow-x: auto;\n\n / Hide scrollbar in Firefox /\n scrollbar-width: none;\n }\n\n / Hide scrollbar in Chrome/Safari /\n .tab-group--bottom .tab-group__nav::-webkit-scrollbar {\n width: 0;\n height: 0;\n }\n\n .tab-group--bottom .tab-group__tabs {\n flex: 1 1 auto;\n position: relative;\n flex-direction: row;\n border-top: solid var(--track-width) var(--track-color);\n }\n\n .tab-group--bottom .tab-group__indicator {\n top: calc(-1 var(--track-width));\n border-top: solid var(--track-width) var(--indicator-color);\n }\n\n .tab-group--bottom .tab-group__body {\n order: 1;\n }\n\n .tab-group--bottom ::slotted(nile-tab-panel) {\n --padding: 10px 0;\n }\n\n /\n Start\n /\n\n .tab-group--start {\n flex-direction: row;\n }\n\n .tab-group--start .tab-group__nav-container {\n order: 1;\n }\n\n .tab-group--start .tab-group__tabs {\n flex: 0 0 auto;\n flex-direction: column;\n border-inline-end: solid var(--track-width) var(--track-color);\n }\n\n .tab-group--start .tab-group__indicator {\n right: calc(-1 var(--track-width));\n border-right: solid var(--track-width) var(--indicator-color);\n }\n\n .tab-group--start.tab-group--rtl .tab-group__indicator {\n right: auto;\n left: calc(-1 * var(--track-width));\n }\n\n .tab-group--start .tab-group__body {\n flex: 1 1 auto;\n order: 2;\n }\n\n .tab-group--start ::slotted(nile-tab-panel) {\n --padding: 0 10px;\n }\n\n /\n End\n /\n\n .tab-group--end {\n flex-direction: row;\n }\n\n .tab-group--end .tab-group__nav-container {\n order: 2;\n }\n\n .tab-group--end .tab-group__tabs {\n flex: 0 0 auto;\n flex-direction: column;\n border-left: solid var(--track-width) var(--track-color);\n }\n\n .tab-group--end .tab-group__indicator {\n left: calc(-1 var(--track-width));\n border-inline-start: solid var(--track-width) var(--indicator-color);\n }\n\n .tab-group--end.tab-group--rtl .tab-group__indicator {\n right: calc(-1 * var(--track-width));\n left: auto;\n }\n\n .tab-group--end .tab-group__body {\n flex: 1 1 auto;\n order: 1;\n }\n\n .tab-group--end ::slotted(nile-tab-panel) {\n --padding: 0 10px;\n }\n\n .hide__track slot::slotted(nile-tab) {\n --tab-border-radius: 4px;\n --tab-padding:8px 12px;\n --tab-hover-background-color: var(--nile-colors-neutral-100);\n --tab-active-background-color: var(--nile-colors-brand-50);\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
1	+ {"version":3,"file":"nile-tab-group.css.cjs.js","sources":["../../../src/nile-tab-group/nile-tab-group.css.ts"],"sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { css } from 'lit';\n\n/\n TabGroup CSS\n /\nexport const styles = css`\n [hidden] {\n display: none !important;\n }\n\n :host {\n --indicator-color: var(--nile-colors-primary-600);\n --track-color: var(--nile-colors-neutral-400);\n --track-width: 2px;\n --tab-gap: 12px;\n\n display: block;\n }\n\n .tab-group {\n display: flex;\n border-radius: 0;\n }\n\n .tab-group__tabs {\n display: flex;\n position: relative;\n gap: var(--tab-gap);\n }\n\n .hide__track {\n --track-width: 0px;\n --tab-gap: 3px;\n }\n\n .tab-group__indicator {\n position: absolute;\n transition: 0.3s translate ease, 0.3s width ease;\n }\n\n .tab-group__indicator__path{\n position: absolute;\n height: var(--track-width);\n width: 100%;\n background: var(--nile-colors-neutral-400);\n bottom:0px;\n z-index:-1;\n }\n\n .tab-group--has-scroll-controls .tab-group__nav-container {\n position: relative;\n padding: 0 10px;\n }\n\n .tab-group__body {\n display: block;\n overflow: auto;\n }\n\n .tab-group__scroll-button {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: 0;\n bottom: 0;\n width: 20px;\n }\n\n .tab-group__scroll-button--start {\n left: 0;\n }\n\n .tab-group__scroll-button--end {\n right: 0;\n }\n\n .tab-group--rtl .tab-group__scroll-button--start {\n left: auto;\n right: 0;\n }\n\n .tab-group--rtl .tab-group__scroll-button--end {\n left: 0;\n right: auto;\n }\n\n /\n * Top\n /\n\n .tab-group--top {\n flex-direction: column;\n }\n\n .tab-group--top .tab-group__nav-container {\n order: 1;\n }\n\n .tab-group--top .tab-group__nav {\n display: flex;\n overflow-x: auto;\n\n / Hide scrollbar in Firefox /\n scrollbar-width: none;\n }\n\n / Hide scrollbar in Chrome/Safari /\n .tab-group--top .tab-group__nav::-webkit-scrollbar {\n width: 0;\n height: 0;\n }\n\n .tab-group--top .tab-group__tabs {\n flex: 1 1 auto;\n position: relative;\n flex-direction: row;\n }\n\n .tab-group--top .tab-group__indicator {\n bottom: 0px;\n border-bottom: 2px solid var(--nile-colors-primary-600);\n z-index:-1;\n }\n\n .tab-group--top .tab-group__body {\n order: 2;\n }\n\n .tab-group--top ::slotted(nile-tab-panel) {\n --padding: 10px 0;\n }\n\n /\n * Bottom\n /\n\n .tab-group--bottom {\n flex-direction: column;\n }\n\n .tab-group--bottom .tab-group__nav-container {\n order: 2;\n }\n\n .tab-group--bottom .tab-group__nav {\n display: flex;\n overflow-x: auto;\n\n / Hide scrollbar in Firefox /\n scrollbar-width: none;\n }\n\n / Hide scrollbar in Chrome/Safari /\n .tab-group--bottom .tab-group__nav::-webkit-scrollbar {\n width: 0;\n height: 0;\n }\n\n .tab-group--bottom .tab-group__tabs {\n flex: 1 1 auto;\n position: relative;\n flex-direction: row;\n border-top: solid var(--track-width) var(--track-color);\n }\n\n .tab-group--bottom .tab-group__indicator {\n top: calc(-1 var(--track-width));\n border-top: solid var(--track-width) var(--indicator-color);\n }\n\n .tab-group--bottom .tab-group__body {\n order: 1;\n }\n\n .tab-group--bottom ::slotted(nile-tab-panel) {\n --padding: 10px 0;\n }\n\n /\n Start\n /\n\n .tab-group--start {\n flex-direction: row;\n }\n\n .tab-group--start .tab-group__nav-container {\n order: 1;\n }\n\n .tab-group--start .tab-group__tabs {\n flex: 0 0 auto;\n flex-direction: column;\n border-inline-end: solid var(--track-width) var(--track-color);\n }\n\n .tab-group--start .tab-group__indicator {\n right: calc(-1 var(--track-width));\n border-right: solid var(--track-width) var(--indicator-color);\n }\n\n .tab-group--start.tab-group--rtl .tab-group__indicator {\n right: auto;\n left: calc(-1 * var(--track-width));\n }\n\n .tab-group--start .tab-group__body {\n flex: 1 1 auto;\n order: 2;\n }\n\n .tab-group--start ::slotted(nile-tab-panel) {\n --padding: 0 10px;\n }\n\n /\n End\n /\n\n .tab-group--end {\n flex-direction: row;\n }\n\n .tab-group--end .tab-group__nav-container {\n order: 2;\n }\n\n .tab-group--end .tab-group__tabs {\n flex: 0 0 auto;\n flex-direction: column;\n border-left: solid var(--track-width) var(--track-color);\n }\n\n .tab-group--end .tab-group__indicator {\n left: calc(-1 var(--track-width));\n border-inline-start: solid var(--track-width) var(--indicator-color);\n }\n\n .tab-group--end.tab-group--rtl .tab-group__indicator {\n right: calc(-1 * var(--track-width));\n left: auto;\n }\n\n .tab-group--end .tab-group__body {\n flex: 1 1 auto;\n order: 1;\n }\n\n .tab-group--end ::slotted(nile-tab-panel) {\n --padding: 0 10px;\n }\n\n .hide__track slot::slotted(nile-tab) {\n --tab-border-radius: 4px;\n --tab-padding:8px 12px;\n --tab-hover-background-color: var(--nile-colors-neutral-100);\n --tab-active-background-color: var(--nile-colors-brand-50);\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-tab-group/nile-tab-group.css.esm.js CHANGED Viewed

@@ -33,6 +33,15 @@ import{css as t}from"lit";const o=t`
     transition: 0.3s translate ease, 0.3s width ease;
   }
+  .tab-group__indicator__path{
+    position: absolute;
+    height: var(--track-width);
+    width: 100%;
+    background: var(--nile-colors-neutral-400);
+    bottom:0px;
+    z-index:-1;
+  }
   .tab-group--has-scroll-controls .tab-group__nav-container {
     position: relative;
     padding: 0 10px;
@@ -101,13 +110,12 @@ import{css as t}from"lit";const o=t`
     flex: 1 1 auto;
     position: relative;
     flex-direction: row;
-    border-bottom: solid var(--track-width)
-      var(--nile-colors-gray-light-mode-200);
   }
   .tab-group--top .tab-group__indicator {
-    bottom: -2px;
+    bottom: 0px;
     border-bottom: 2px solid var(--nile-colors-primary-600);
+    z-index:-1;
   }
   .tab-group--top .tab-group__body {

package/dist/nile-tab-group/nile-tab-group.esm.js CHANGED Viewed

@@ -20,10 +20,12 @@ import{__decorate as i}from"tslib";import{html as s}from"lit";import{query as o,
           <div class="tab-group__nav">
             <div part="tabs" class="tab-group__tabs" role="tablist">
+              <div part="active-tab-indicator-path" class="tab-group__indicator__path"></div>
               <div
                 part="active-tab-indicator"
                 class=${m({"tab-group__indicator":!this.noTrack})}
               ></div>
               <slot name="nav"  @slotchange=${this.syncTabsAndPanels}></slot>
             </div>
           </div>

package/dist/src/nile-auto-complete/nile-auto-complete.css.js CHANGED Viewed

@@ -10,12 +10,21 @@ import { css } from 'lit';
  */
 export const styles = css `
   :host {
+    --virtual-scroll-container-width:100px;
   }
   .nile-dropdown--input {
     width: 100%;
   }
+  .nile-dropdown--input lit-virtualizer{
+    min-width: var(--virtual-scroll-container-width)!important;
+  }
+  .nile-dropdown--input nile-menu-item{
+    width:100%;
+  }
   .nile-auto-complete--input {
     width: 100%;
   }

package/dist/src/nile-auto-complete/nile-auto-complete.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-auto-complete.css.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/nile-auto-complete.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;CAWxB~~,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { css } from 'lit';\n\n/\n AutoComplete CSS\n */\nexport const styles = css`\n :host {\n }\n\n .nile-dropdown--input {\n width: 100%;\n }\n\n .nile-auto-complete--input {\n width: 100%;\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-auto-complete.css.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/nile-auto-complete.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;CAoBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { css } from 'lit';\n\n/\n AutoComplete CSS\n */\nexport const styles = css`\n :host {\n --virtual-scroll-container-width:100px;\n }\n\n .nile-dropdown--input {\n width: 100%;\n }\n\n .nile-dropdown--input lit-virtualizer{\n min-width: var(--virtual-scroll-container-width)!important;\n }\n\n .nile-dropdown--input nile-menu-item{\n width:100%;\n }\n\n .nile-auto-complete--input {\n width: 100%;\n }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-auto-complete/nile-auto-complete.d.ts CHANGED Viewed

@@ -2,10 +2,12 @@ import { TemplateResult } from 'lit';
 import NileElement from '../internal/nile-element';
 import type { CSSResultGroup, PropertyValues } from 'lit';
 import { NileDropdown } from '../nile-dropdown';
+import '@lit-labs/virtualizer';
 export declare class NileAutoComplete extends NileElement {
     static styles: CSSResultGroup;
     dropdownElement: NileDropdown;
     isDropdownOpen: boolean;
+    enableVirtualScroll: boolean;
     openOnFocus: boolean;
     value: string;
     placeholder: string;
@@ -18,6 +20,9 @@ export declare class NileAutoComplete extends NileElement {
     connectedCallback(): void;
     protected updated(changedProperties: PropertyValues): void;
     render(): TemplateResult;
+    getVirtualizedContent(): TemplateResult;
+    getContent(): TemplateResult;
+    getItemRenderFunction(item: any): TemplateResult;
     private handleSelect;
     private handleSearch;
     handleFocus(): void;

package/dist/src/nile-auto-complete/nile-auto-complete.js CHANGED Viewed

@@ -3,12 +3,14 @@ import { html, nothing, } from 'lit';
 import { customElement, query, state, property } from 'lit/decorators.js';
 import { styles } from './nile-auto-complete.css';
 import NileElement from '../internal/nile-element';
+import '@lit-labs/virtualizer';
 // Define the custom element 'nile-auto-complete'
 let NileAutoComplete = class NileAutoComplete extends NileElement {
     constructor() {
         super(...arguments);
         // Define component properties
         this.isDropdownOpen = false;
+        this.enableVirtualScroll = false;
         this.openOnFocus = false;
         this.value = '';
         this.placeholder = 'Type here ..';
@@ -31,6 +33,7 @@ let NileAutoComplete = class NileAutoComplete extends NileElement {
             this.menuItems = this.applyFilter(this.allMenuItems, this.filterFunction);
     }
     render() {
+        const content = this.enableVirtualScroll ? this.getVirtualizedContent() : this.getContent();
         return html `
       <nile-dropdown class="nile-dropdown--input" ?open=${this.isDropdownOpen} noOpenOnCLick>
         <nile-input class="nile-auto-complete--input"
@@ -45,20 +48,35 @@ let NileAutoComplete = class NileAutoComplete extends NileElement {
           ${this.loading ? html `<nile-icon slot="suffix" color="var(--nile-colors-primary-600)" name="button-loading-blue-animated"></nile-icon>` : nothing}
         </nile-input>
         ${this.menuItems.length > 0 && !this.loading
-            ? html `
-              <nile-menu @nile-select=${this.handleSelect} exportparts="menu__items-wrapper:options__wrapper">
-                ${this.menuItems.map((item) => {
-                const renderItem = this.renderItemFunction(item);
-                return html `
-                    <nile-menu-item value=${renderItem}>${renderItem}</nile-menu-item>
-                  `;
-            })}
-              </nile-menu>
-            `
-            : ''}
+            ? content
+            : nothing}
       </nile-dropdown>
     `;
     }
+    getVirtualizedContent() {
+        return html `
+      <nile-menu @nile-select=${this.handleSelect} id="content-menu" exportparts="menu__items-wrapper:options__wrapper">
+        <lit-virtualizer
+          .items=${this.menuItems}
+          .renderItem=${(item) => this.getItemRenderFunction(item)}
+        ></lit-virtualizer>
+      </nile-menu>
+    `;
+    }
+    getContent() {
+        return html `
+      <nile-menu id="content-menu" @nile-select=${this.handleSelect} exportparts="menu__items-wrapper:options__wrapper">
+        ${this.menuItems.map((item) => this.getItemRenderFunction(item))}
+      </nile-menu>`;
+    }
+    getItemRenderFunction(item) {
+        const value = this.renderItemFunction(item);
+        return html `
+      <nile-menu-item value=${value}>
+        ${value}
+      </nile-menu-item>
+    `;
+    }
     handleSelect(event) {
         this.value = event.detail.value;
         this.emit('nile-complete', { value: event.detail.value });
@@ -101,6 +119,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], NileAutoComplete.prototype, "isDropdownOpen", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileAutoComplete.prototype, "enableVirtualScroll", void 0);
 __decorate([
     property({ type: Boolean })
 ], NileAutoComplete.prototype, "openOnFocus", void 0);

package/dist/src/nile-auto-complete/nile-auto-complete.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-auto-complete.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/nile-auto-complete.ts"],"names":[],"mappings":";AAAA,OAAO,EAEL,IAAI,EAGJ,OAAO,GACR,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,WAAW,MAAM,0BAA0B,CAAC;~~AAInD~~,iDAAiD;AAE1C,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,WAAW;IAA1C;;QAML,8BAA8B;QAED,mBAAc,GAAY,KAAK,CAAC;QAEhC,gBAAW,GAAY,KAAK,CAAC;QAE9B,UAAK,GAAW,EAAE,CAAC;QAEnB,gBAAW,GAAW,cAAc,CAAC;QAEpC,aAAQ,GAAY,KAAK,CAAC;QAE1B,YAAO,GAAY,KAAK,CAAC;QAExB,mBAAc,GAAQ,CAAC,IAAW,EAAC,aAAoB,EAAC,EAAE,CAAA,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC,WAAW,EAAE,CAAC,CAAC;QAEnH,uBAAkB,GAAQ,CAAC,IAAQ,EAAC,EAAE,CAAA,IAAI,CAAC;QAE9C,iBAAY,GAAQ,EAAE,CAAC;QAEzC,cAAS,GAAQ,EAAE,CAAC;~~IAsF~~/B,CAAC;~~IApFC~~,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC;IAC1C,CAAC;IAES,OAAO,CAAC,iBAAiC;QACjD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,cAAc,CAAC;YAAE,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC;QACnF,IAAI,iBAAiB,CAAC,GAAG,CAAC,gBAAgB,CAAC;YAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,EAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IACxH,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;0DAC2C,IAAI,CAAC,cAAc;;uBAEtD,IAAI,CAAC,QAAQ;mBACjB,IAAI,CAAC,KAAK;wBACL,IAAI,CAAC,YAAY;mBACtB,IAAI,CAAC,WAAW;mBAChB,IAAI,CAAC,WAAW;;wBAEX,IAAI,CAAC,WAAW;;YAE5B,IAAI,CAAC,OAAO,CAAA,CAAC,CAAA,IAAI,CAAA,kHAAkH,CAAA,CAAC,CAAA,OAAO;;UAE7I,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO;YAC1C,CAAC,CAAC,IAAI,CAAA;~~wCACwB~~,IAAI,CAAC,YAAY~~;kBACvC~~,IAAI,CAAC,SAAS,CAAC,~~GAAG~~,~~CAClB~~,CAAC,~~IAAS~~,~~EAAG~~,~~EAAE~~;~~gBACf~~,~~MAAM~~,UAAU,~~GAAC~~,IAAI,~~CAAC~~,~~kBAAkB~~,CAAC,IAAI,CAAC,~~CAAA;gBAC9C~~,~~OAAO~~,IAAI,~~CAAA;4CACe~~,~~UAAU~~,IAAI,~~UAAU~~;~~mBACjD~~,CAAA;~~YACD~~,CAAC,~~CACF;;aAEJ~~;~~YACH~~,CAAC,CAAC,~~EAAE~~;;~~KAET~~,CAAC;IACJ,CAAC;IAEO,YAAY,CAAC,KAAkB;QACrC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAChC,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;QAC1D,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAC5B,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,CAAC;IAC/B,CAAC;IAEO,YAAY,CAAC,KAAkB;QACrC,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;QACrD,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC;QAEzB,8CAA8C;QAC9C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,EAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAEzE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;QAChD,IAAI,IAAI,CAAC,cAAc;YAAE,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,CAAC;IACxD,CAAC;IAEM,WAAW;QAChB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACtB,OAAO;QACT,CAAC;QAED,2DAA2D;QAC3D,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAC3B,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,CAAC;QAC/B,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,CAAC;IAC/B,CAAC;IAED,WAAW,CAAI,IAAS,EAAE,QAAkD;QAC1E,MAAM,GAAG,GAAK,EAAE,CAAA;QAChB,IAAI,CAAC,OAAO,CAAE,EAAE,CAAA,EAAE,CAAC,QAAQ,CAAC,EAAE,EAAC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAE,CAAA;QAC5D,OAAO,GAAG,CAAA;IACZ,CAAC;;~~AA5GM~~,uBAAM,GAAmB,MAAM,AAAzB,CAA0B;AAEf;IAAvB,KAAK,CAAC,eAAe,CAAC;yDAA+B;AAIzB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDAAiC;AAEhC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDAA8B;AAE9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAsC;AAEpC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAA2B;AAE1B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAA0B;AAExB;IAA7B,QAAQ,CAAC,EAAE,SAAS,EAAC,KAAK,EAAC,CAAC;wDAAoH;AAEnH;IAA7B,QAAQ,CAAC,EAAE,SAAS,EAAC,KAAK,EAAC,CAAC;4DAA4C;AAE9C;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;sDAAwB;AAEzC;IAAR,KAAK,EAAE;mDAAqB;~~AA1BlB~~,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,~~CAgH5B~~;;AAED,eAAe,gBAAgB,CAAC","sourcesContent":["import {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n nothing,\n} from 'lit';\nimport { customElement, query, state, property } from 'lit/decorators.js';\nimport { styles } from './nile-auto-complete.css';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup, PropertyValues } from 'lit';\nimport { NileDropdown } from '../nile-dropdown';\n\n// Define the custom element 'nile-auto-complete'\n@customElement('nile-auto-complete')\nexport class NileAutoComplete extends NileElement {\n\n static styles: CSSResultGroup = styles;\n\n @query('nile-dropdown') dropdownElement: NileDropdown;\n\n // Define component properties\n\n @property({ type: Boolean }) isDropdownOpen: boolean = false;\n\n @property({ type: Boolean }) openOnFocus: boolean = false;\n\n @property({ type: String }) value: string = '';\n\n @property({ type: String }) placeholder: string = 'Type here ..';\n\n @property({ type: Boolean }) noBorder: boolean = false;\n\n @property({ type: Boolean }) loading: boolean = false;\n\n @property({ attribute:false}) filterFunction: any = (item:string,searchedValue:string)=>item.toLowerCase().includes(searchedValue.toLowerCase());\n\n @property({ attribute:false}) renderItemFunction: any = (item:any)=>item;\n\n @property({ type: Array }) allMenuItems: any = [];\n\n @state() menuItems: any = [];\n\n connectedCallback() {\n super.connectedCallback();\n this.menuItems = [...this.allMenuItems];\n }\n\n protected updated(changedProperties: PropertyValues): void {\n super.updated(changedProperties);\n if (changedProperties.has('allMenuItems')) this.menuItems = [...this.allMenuItems];\n if (changedProperties.has('isDropdownOpen')) this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n }\n\n public render(): TemplateResult {\n return html`\n <nile-dropdown class=\"nile-dropdown--input\" ?open=${this.isDropdownOpen} noOpenOnCLick>\n <nile-input class=\"nile-auto-complete--input\"\n ?no-border=${this.noBorder}\n .value=${this.value}\n @nile-input=${this.handleSearch}\n @focus=${this.handleFocus}\n @click=${this.handleClick}\n slot=\"trigger\"\n placeholder=${this.placeholder}\n >\n ${this.loading?html`<nile-icon slot=\"suffix\" color=\"var(--nile-colors-primary-600)\" name=\"button-loading-blue-animated\"></nile-icon>`:nothing}\n </nile-input>\n ${this.menuItems.length > 0 && !this.loading\n ? html`\n <nile-menu @nile-select=${this.handleSelect} exportparts=\"menu__items-wrapper:options__wrapper\">\n ${this.menuItems~~.map(~~\n (item: any) => ~~{\n const renderItem=~~this.~~renderItemFunction~~(item)\n return html`\n <nile-menu-~~item~~ ~~value~~=${~~renderItem~~}>${~~renderItem~~}</nile-menu~~-item>\~~n ~~`\n~~ }\n )}\n </nile-menu>\n ~~`\n : ''~~}\n </nile-~~dropdown~~>\n `;\n } \n \n private handleSelect(event: CustomEvent) {\n this.value = event.detail.value;\n this.emit('nile-complete', { value: event.detail.value });\n this.isDropdownOpen = false;\n this.dropdownElement?.hide();\n }\n\n private handleSearch(event: CustomEvent) {\n const searchValue = event.detail.value.toLowerCase();\n this.value = searchValue;\n\n // Filter menu items based on the search value\n this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n\n this.isDropdownOpen = this.menuItems.length > 0;\n if (this.isDropdownOpen) this.dropdownElement?.show();\n }\n\n public handleFocus() {\n if (!this.openOnFocus) {\n return;\n }\n\n // Delay opening the dropdown to allow focus to take effect\n setTimeout(() => {\n this.isDropdownOpen = true;\n this.dropdownElement?.show();\n }, 300);\n }\n\n private handleClick() {\n this.isDropdownOpen = true;\n this.dropdownElement?.show();\n }\n\n applyFilter<T>(list: T[], filterFn: (item: T,searchValue?:string) => boolean): T[] {\n const res:T[]=[]\n list.forEach( el=> filterFn(el,this.value) && res.push(el) )\n return res\n }\n\n}\n\nexport default NileAutoComplete;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-auto-complete': NileAutoComplete;\n }\n}\n"]}
1	+ {"version":3,"file":"nile-auto-complete.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/nile-auto-complete.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n nothing,\n} from 'lit';\nimport { customElement, query, state, property } from 'lit/decorators.js';\nimport { styles } from './nile-auto-complete.css';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup, PropertyValues } from 'lit';\nimport { NileDropdown } from '../nile-dropdown';\nimport '@lit-labs/virtualizer';\n\n// Define the custom element 'nile-auto-complete'\n@customElement('nile-auto-complete')\nexport class NileAutoComplete extends NileElement {\n\n static styles: CSSResultGroup = styles;\n\n @query('nile-dropdown') dropdownElement: NileDropdown;\n\n // Define component properties\n\n @property({ type: Boolean }) isDropdownOpen: boolean = false;\n\n @property({ type: Boolean }) enableVirtualScroll: boolean = false;\n\n @property({ type: Boolean }) openOnFocus: boolean = false;\n\n @property({ type: String }) value: string = '';\n\n @property({ type: String }) placeholder: string = 'Type here ..';\n\n @property({ type: Boolean }) noBorder: boolean = false;\n\n @property({ type: Boolean }) loading: boolean = false;\n\n @property({ attribute:false}) filterFunction: any = (item:string,searchedValue:string)=>item.toLowerCase().includes(searchedValue.toLowerCase());\n\n @property({ attribute:false}) renderItemFunction: any = (item:any)=>item;\n\n @property({ type: Array }) allMenuItems: any = [];\n\n @state() menuItems: any = [];\n\n connectedCallback() {\n super.connectedCallback();\n this.menuItems = [...this.allMenuItems];\n }\n\n protected updated(changedProperties: PropertyValues): void {\n super.updated(changedProperties);\n if (changedProperties.has('allMenuItems')) this.menuItems = [...this.allMenuItems];\n if (changedProperties.has('isDropdownOpen')) this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n }\n\n public render(): TemplateResult {\n const content=this.enableVirtualScroll?this.getVirtualizedContent():this.getContent();\n return html`\n <nile-dropdown class=\"nile-dropdown--input\" ?open=${this.isDropdownOpen} noOpenOnCLick>\n <nile-input class=\"nile-auto-complete--input\"\n ?no-border=${this.noBorder}\n .value=${this.value}\n @nile-input=${this.handleSearch}\n @focus=${this.handleFocus}\n @click=${this.handleClick}\n slot=\"trigger\"\n placeholder=${this.placeholder}\n >\n ${this.loading?html`<nile-icon slot=\"suffix\" color=\"var(--nile-colors-primary-600)\" name=\"button-loading-blue-animated\"></nile-icon>`:nothing}\n </nile-input>\n ${this.menuItems.length > 0 && !this.loading\n ? content\n : nothing}\n </nile-dropdown>\n `;\n } \n \n getVirtualizedContent():TemplateResult{\n return html`\n <nile-menu @nile-select=${this.handleSelect} id=\"content-menu\" exportparts=\"menu__items-wrapper:options__wrapper\">\n <lit-virtualizer\n .items=${this.menuItems}\n .renderItem=${(item:any):TemplateResult=>this.getItemRenderFunction(item)}\n ></lit-virtualizer>\n </nile-menu>\n `\n }\n\n getContent():TemplateResult{\n return html`\n <nile-menu id=\"content-menu\" @nile-select=${this.handleSelect} exportparts=\"menu__items-wrapper:options__wrapper\">\n ${this.menuItems.map((item: any) => this.getItemRenderFunction(item))}\n </nile-menu>`\n }\n\n getItemRenderFunction(item:any):TemplateResult{\n const value=this.renderItemFunction(item)\n return html`\n <nile-menu-item value=${value}>\n ${value}\n </nile-menu-item>\n `;\n }\n\n private handleSelect(event: CustomEvent) {\n this.value = event.detail.value;\n this.emit('nile-complete', { value: event.detail.value });\n this.isDropdownOpen = false;\n this.dropdownElement?.hide();\n }\n\n private handleSearch(event: CustomEvent) {\n const searchValue = event.detail.value.toLowerCase();\n this.value = searchValue;\n\n // Filter menu items based on the search value\n this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n\n this.isDropdownOpen = this.menuItems.length > 0;\n if (this.isDropdownOpen) this.dropdownElement?.show();\n }\n\n public handleFocus() {\n if (!this.openOnFocus) {\n return;\n }\n\n // Delay opening the dropdown to allow focus to take effect\n setTimeout(() => {\n this.isDropdownOpen = true;\n this.dropdownElement?.show();\n }, 300);\n }\n\n private handleClick() {\n this.isDropdownOpen = true;\n this.dropdownElement?.show();\n }\n\n applyFilter<T>(list: T[], filterFn: (item: T,searchValue?:string) => boolean): T[] {\n const res:T[]=[]\n list.forEach( el=> filterFn(el,this.value) && res.push(el) )\n return res\n }\n\n}\n\nexport default NileAutoComplete;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-auto-complete': NileAutoComplete;\n }\n}\n"]}

package/dist/src/nile-chip/nile-chip.d.ts CHANGED Viewed

@@ -33,6 +33,8 @@ export declare class NileChip extends NileElement {
     readonly: boolean;
     /** Disables the input. */
     disabled: boolean;
+    /** Virtual scroll in  dropdown options. */
+    enableVirtualScroll: boolean;
     autoCompleteOptions: any[];
     filteredAutoCompleteOptions: any[];
     value: any[];

package/dist/src/nile-chip/nile-chip.js CHANGED Viewed

@@ -38,7 +38,9 @@ let NileChip = class NileChip extends NileElement {
         this.readonly = false;
         /** Disables the input. */
         this.disabled = false;
-        // Auto-complete options
+        // AUTO-COMPLETE-OPTIONS
+        /** Virtual scroll in  dropdown options. */
+        this.enableVirtualScroll = false;
         this.autoCompleteOptions = [];
         this.filteredAutoCompleteOptions = [];
         this.value = [];
@@ -134,6 +136,7 @@ let NileChip = class NileChip extends NileElement {
             `)}
           <div class="nile-chip__auto-complete">
             <nile-auto-complete
+              .enableVirtualScroll=${this.enableVirtualScroll}
               .allMenuItems=${this.filteredAutoCompleteOptions}
               .filterFunction=${this.filterFunction}
               .renderItemFunction=${this.renderItemFunction}
@@ -277,6 +280,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileChip.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileChip.prototype, "enableVirtualScroll", void 0);
 __decorate([
     property({ type: Array })
 ], NileChip.prototype, "autoCompleteOptions", void 0);

package/dist/src/nile-chip/nile-chip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-chip.js","sourceRoot":"","sources":["../../../src/nile-chip/nile-chip.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n PropertyValues,\n} from 'lit';\nimport { customElement, query, state, property } from 'lit/decorators.js';\nimport { styles } from './nile-chip.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../internal/slot';\nimport NileElement, { NileFormControl } from '../internal/nile-element';\n\ninterface CustomEventDetail {\n value: string;\n}\n\n@customElement('nile-chip')\nexport class NileChip extends NileElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n private readonly hasSlotController = new HasSlotController(\n this,\n 'help-text',\n 'label'\n );\n\n @state() tags: string[] = [];\n\n @state() inputValue: string = '';\n\n @state() isDropdownOpen: boolean = false;\n\n @query('nile-auto-complete') autoComplete!: any;\n\n /* Sets the input to a warning state, changing its visual appearance. /\n @property({ type: Boolean }) warning = false;\n\n /* Sets the input to an error state, changing its visual appearance. /\n @property({ type: Boolean }) error = false;\n\n /* Sets the input to a success state, changing its visual appearance. /\n @property({ type: Boolean }) success = false;\n\n /* Disables the duplicate entries. /\n @property({ type: Boolean }) noDuplicates = false;\n\n /* The input's label. If you need to display HTML, use the `label` slot instead. /\n @property() label = '';\n\n /* Adds a clear button when the input is not empty. /\n @property({ type: Boolean }) acceptUserInput = false;\n\n /* Adds a clear button when the input is not empty. /\n @property({ type: Boolean }) clearable = false;\n\n /* Placeholder text to show as a hint when the input is empty. /\n @property() placeholder = 'type here...';\n\n /* Makes the input readonly. /\n @property({ type: Boolean, reflect: true }) readonly = false;\n\n /* Disables the input. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n // Auto-complete options\n @property({ type: Array }) autoCompleteOptions: any[] = [];\n\n @property({ type: Array }) filteredAutoCompleteOptions: any[] = [];\n\n @property({ type: Array }) value: any[] = [];\n\n @property({ type: Boolean }) noWrap: boolean = false;\n\n @property({ type: Boolean }) loading: boolean = false;\n\n @property({ type: Array }) errorIndexes: number[] = [];\n\n @property({ attribute: 'help-text', reflect: true }) helpText = '';\n\n @property({ attribute: 'error-message', reflect: true }) errorMessage = '';\n\n @property({ attribute:false}) filterFunction: any = (item:string,searchedValue:string)=>item.toLowerCase().includes(searchedValue.toLowerCase());\n\n @property({ attribute:false}) renderItemFunction: any = (item:any)=>item;\n\n protected updated(changedProperties: PropertyValues): void {\n super.updated(changedProperties);\n if (changedProperties.has('autoCompleteOptions')) {\n this.filteredAutoCompleteOptions = [...this.autoCompleteOptions];\n if (this.noDuplicates) {\n this.filteredAutoCompleteOptions =\n this.filteredAutoCompleteOptions.filter(\n option => !this.value.includes(option)\n );\n }\n }\n if (changedProperties.has('value')){\n this.tags = [...this.value];\n this.onTagsChanged();\n }\n if (changedProperties.has('tags')){\n this.onTagsChanged();\n }\n }\n\n connectedCallback() {\n super.connectedCallback();\n if (this.noDuplicates) {\n this.filteredAutoCompleteOptions =\n this.filteredAutoCompleteOptions.filter(\n option => !this.value.includes(option)\n );\n }\n this.emit('nile-init');\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.emit('nile-destroy');\n }\n\n render() {\n // Check if slots are present\n const hasLabelSlot = this.hasSlotController.test('label');\n const hasHelpTextSlot = this.hasSlotController.test('help-text');\n\n // Check if label and help text are present\n const hasLabel = this.label ? true : !!hasLabelSlot;\n\n const hasHelpText = this.helpText ? true : false;\n const hasErrorMessage = this.errorMessage ? true : false;\n\n return html`\n <div\n part=\"form-control\"\n class=${classMap({\n 'form-control': true,\n 'form-control--medium': true,\n 'form-control--has-label': hasLabel,\n 'form-control--has-help-text': hasHelpText,\n 'nile-chip--disabled': this.disabled,\n })}\n >\n <label\n part=\"form-control-label\"\n class=\"form-control__label\"\n for=\"input\"\n aria-hidden=${hasLabel ? 'false' : 'true'}\n >\n <slot name=\"label\">${this.label}</slot>\n </label>\n\n <div\n class=${classMap({\n 'nile-chip': true,\n 'nile-chip--warning': this.warning,\n 'nile-chip--error': this.error,\n 'nile-chip--success': this.success,\n 'nile-chip--no-wrap': this.noWrap,\n })}\n >\n ${this.tags.map(\n (tag, index) => html`\n <nile-tag\n class=${classMap({\n 'nile-chip__tags': true,\n })}\n .variant=${this.errorIndexes.includes(index) ? 'error' : 'normal'}\n @nile-remove=${() => this.handleRemove(tag)}\n removable\n pill\n >\n ${tag}\n </nile-tag>\n `\n )}\n <div class=\"nile-chip__auto-complete\">\n <nile-auto-complete\n .allMenuItems=${this.filteredAutoCompleteOptions}\n .filterFunction=${this.filterFunction}\n .renderItemFunction=${this.renderItemFunction}\n .loading=\"${this.loading}\"\n .value=${this.inputValue}\n ?isDropdownOpen=${this.isDropdownOpen}\n .noBorder=${true}\n openOnFocus\n exportparts=\"options__wrapper\"\n .placeholder=${this.placeholder}\n @nile-input=${this.handleInputChange}\n @keydown=${this.handleInputKeydown}\n @nile-focus=${this.handleFocus}\n @nile-complete=${this.handleSelect}\n ></nile-auto-complete>\n </div>\n <slot\n name=\"help-text\"\n part=\"form-control-help-text\"\n id=\"help-text\"\n class=\"form-control__help-text\"\n aria-hidden=${hasHelpText ? 'false' : 'true'}\n >\n ${this.helpText}\n </slot>\n </div>\n ${\n hasHelpText\n ? html`\n <nile-form-help-text>${this.helpText}</nile-form-help-text>\n `\n : ``\n }\n\n ${\n hasErrorMessage\n ? html`\n <nile-form-error-message\n >${this.errorMessage}</nile-form-error-message\n >\n `\n : ``\n }\n </div>\n `;\n }\n\n private handleSelect(event: CustomEvent<CustomEventDetail>) {\n // Add the selected value to the tags array only if it doesn't already exist\n if (!this.noDuplicates \|\| !this.tags.includes(event.detail.value)) {\n this.tags = [...this.tags, event.detail.value];\n this.emit('nile-chip-change', { value: this.tags });\n this.resetInput();\n }\n }\n\n private handleRemove(value: string) {\n // Remove the tag from the tags array\n this.tags = this.tags.filter(tag => tag !== value);\n\n if (this.noDuplicates && this.autoCompleteOptions.includes(value)) {\n this.filteredAutoCompleteOptions = [\n ...this.filteredAutoCompleteOptions,\n value,\n ];\n }\n this.emit('nile-chip-change', { value: this.tags });\n }\n\n private handleInputChange(event: CustomEvent<CustomEventDetail>) {\n // Update the input value\n this.inputValue = event.detail.value;\n }\n\n private handleInputKeydown(event: KeyboardEvent) {\n if (!this.acceptUserInput) {\n return;\n }\n\n if(event.key === 'Tab'){\n event.preventDefault()\n }\n \n if (\n (event.key === 'Enter' \|\| event.key === 'Tab' ) \n && this.inputValue \n && (!this.noDuplicates \|\| !this.tags.includes(this.inputValue))\n ) {\n event.preventDefault()\n this.tags = [...this.tags, this.inputValue];\n this.resetInput();\n this.emit('nile-chip-change', { value: this.tags });\n }\n\n if(\n (event.key === 'Enter'\|\| event.key === 'Tab' ) \n && this.inputValue \n && (this.noDuplicates \|\| this.tags.includes(this.inputValue))\n ){\n this.emit('nile-duplicates-blocked');\n }\n }\n\n private handleFocus() {\n this.isDropdownOpen = true;\n }\n\n onTagsChanged() {\n if (this.noDuplicates)\n this.filteredAutoCompleteOptions = this.filteredAutoCompleteOptions.filter(option => !this.tags.includes(option));\n }\n\n\n private resetInput() {\n // Reset the input-related properties\n this.inputValue = '';\n this.isDropdownOpen = false;\n this.autoComplete.value = '';\n this.autoComplete.handleFocus();\n }\n}\n\nexport default NileChip;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-chip': NileChip;\n }\n}\n"]}
1	+ {"version":3,"file":"nile-chip.js","sourceRoot":"","sources":["../../../src/nile-chip/nile-chip.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n PropertyValues,\n} from 'lit';\nimport { customElement, query, state, property } from 'lit/decorators.js';\nimport { styles } from './nile-chip.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../internal/slot';\nimport NileElement, { NileFormControl } from '../internal/nile-element';\n\ninterface CustomEventDetail {\n value: string;\n}\n\n@customElement('nile-chip')\nexport class NileChip extends NileElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n private readonly hasSlotController = new HasSlotController(\n this,\n 'help-text',\n 'label'\n );\n\n @state() tags: string[] = [];\n\n @state() inputValue: string = '';\n\n @state() isDropdownOpen: boolean = false;\n\n @query('nile-auto-complete') autoComplete!: any;\n\n /* Sets the input to a warning state, changing its visual appearance. /\n @property({ type: Boolean }) warning = false;\n\n /* Sets the input to an error state, changing its visual appearance. /\n @property({ type: Boolean }) error = false;\n\n /* Sets the input to a success state, changing its visual appearance. /\n @property({ type: Boolean }) success = false;\n\n /* Disables the duplicate entries. /\n @property({ type: Boolean }) noDuplicates = false;\n\n /* The input's label. If you need to display HTML, use the `label` slot instead. /\n @property() label = '';\n\n /* Adds a clear button when the input is not empty. /\n @property({ type: Boolean }) acceptUserInput = false;\n\n /* Adds a clear button when the input is not empty. /\n @property({ type: Boolean }) clearable = false;\n\n /* Placeholder text to show as a hint when the input is empty. /\n @property() placeholder = 'type here...';\n\n /* Makes the input readonly. /\n @property({ type: Boolean, reflect: true }) readonly = false;\n\n /* Disables the input. /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n // AUTO-COMPLETE-OPTIONS\n\n /* Virtual scroll in dropdown options. */\n @property({ type: Boolean }) enableVirtualScroll = false;\n\n @property({ type: Array }) autoCompleteOptions: any[] = [];\n\n @property({ type: Array }) filteredAutoCompleteOptions: any[] = [];\n\n @property({ type: Array }) value: any[] = [];\n\n @property({ type: Boolean }) noWrap: boolean = false;\n\n @property({ type: Boolean }) loading: boolean = false;\n\n @property({ type: Array }) errorIndexes: number[] = [];\n\n @property({ attribute: 'help-text', reflect: true }) helpText = '';\n\n @property({ attribute: 'error-message', reflect: true }) errorMessage = '';\n\n @property({ attribute:false}) filterFunction: any = (item:string,searchedValue:string)=>item.toLowerCase().includes(searchedValue.toLowerCase());\n\n @property({ attribute:false}) renderItemFunction: any = (item:any)=>item;\n\n protected updated(changedProperties: PropertyValues): void {\n super.updated(changedProperties);\n if (changedProperties.has('autoCompleteOptions')) {\n this.filteredAutoCompleteOptions = [...this.autoCompleteOptions];\n if (this.noDuplicates) {\n this.filteredAutoCompleteOptions =\n this.filteredAutoCompleteOptions.filter(\n option => !this.value.includes(option)\n );\n }\n }\n if (changedProperties.has('value')){\n this.tags = [...this.value];\n this.onTagsChanged();\n }\n if (changedProperties.has('tags')){\n this.onTagsChanged();\n }\n }\n\n connectedCallback() {\n super.connectedCallback();\n if (this.noDuplicates) {\n this.filteredAutoCompleteOptions =\n this.filteredAutoCompleteOptions.filter(\n option => !this.value.includes(option)\n );\n }\n this.emit('nile-init');\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.emit('nile-destroy');\n }\n\n render() {\n // Check if slots are present\n const hasLabelSlot = this.hasSlotController.test('label');\n const hasHelpTextSlot = this.hasSlotController.test('help-text');\n\n // Check if label and help text are present\n const hasLabel = this.label ? true : !!hasLabelSlot;\n\n const hasHelpText = this.helpText ? true : false;\n const hasErrorMessage = this.errorMessage ? true : false;\n\n return html`\n <div\n part=\"form-control\"\n class=${classMap({\n 'form-control': true,\n 'form-control--medium': true,\n 'form-control--has-label': hasLabel,\n 'form-control--has-help-text': hasHelpText,\n 'nile-chip--disabled': this.disabled,\n })}\n >\n <label\n part=\"form-control-label\"\n class=\"form-control__label\"\n for=\"input\"\n aria-hidden=${hasLabel ? 'false' : 'true'}\n >\n <slot name=\"label\">${this.label}</slot>\n </label>\n\n <div\n class=${classMap({\n 'nile-chip': true,\n 'nile-chip--warning': this.warning,\n 'nile-chip--error': this.error,\n 'nile-chip--success': this.success,\n 'nile-chip--no-wrap': this.noWrap,\n })}\n >\n ${this.tags.map(\n (tag, index) => html`\n <nile-tag\n class=${classMap({\n 'nile-chip__tags': true,\n })}\n .variant=${this.errorIndexes.includes(index) ? 'error' : 'normal'}\n @nile-remove=${() => this.handleRemove(tag)}\n removable\n pill\n >\n ${tag}\n </nile-tag>\n `\n )}\n <div class=\"nile-chip__auto-complete\">\n <nile-auto-complete\n .enableVirtualScroll=${this.enableVirtualScroll}\n .allMenuItems=${this.filteredAutoCompleteOptions}\n .filterFunction=${this.filterFunction}\n .renderItemFunction=${this.renderItemFunction}\n .loading=\"${this.loading}\"\n .value=${this.inputValue}\n ?isDropdownOpen=${this.isDropdownOpen}\n .noBorder=${true}\n openOnFocus\n exportparts=\"options__wrapper\"\n .placeholder=${this.placeholder}\n @nile-input=${this.handleInputChange}\n @keydown=${this.handleInputKeydown}\n @nile-focus=${this.handleFocus}\n @nile-complete=${this.handleSelect}\n ></nile-auto-complete>\n </div>\n <slot\n name=\"help-text\"\n part=\"form-control-help-text\"\n id=\"help-text\"\n class=\"form-control__help-text\"\n aria-hidden=${hasHelpText ? 'false' : 'true'}\n >\n ${this.helpText}\n </slot>\n </div>\n ${\n hasHelpText\n ? html`\n <nile-form-help-text>${this.helpText}</nile-form-help-text>\n `\n : ``\n }\n\n ${\n hasErrorMessage\n ? html`\n <nile-form-error-message\n >${this.errorMessage}</nile-form-error-message\n >\n `\n : ``\n }\n </div>\n `;\n }\n\n private handleSelect(event: CustomEvent<CustomEventDetail>) {\n // Add the selected value to the tags array only if it doesn't already exist\n if (!this.noDuplicates \|\| !this.tags.includes(event.detail.value)) {\n this.tags = [...this.tags, event.detail.value];\n this.emit('nile-chip-change', { value: this.tags });\n this.resetInput();\n }\n }\n\n private handleRemove(value: string) {\n // Remove the tag from the tags array\n this.tags = this.tags.filter(tag => tag !== value);\n\n if (this.noDuplicates && this.autoCompleteOptions.includes(value)) {\n this.filteredAutoCompleteOptions = [\n ...this.filteredAutoCompleteOptions,\n value,\n ];\n }\n this.emit('nile-chip-change', { value: this.tags });\n }\n\n private handleInputChange(event: CustomEvent<CustomEventDetail>) {\n // Update the input value\n this.inputValue = event.detail.value;\n }\n\n private handleInputKeydown(event: KeyboardEvent) {\n if (!this.acceptUserInput) {\n return;\n }\n\n if(event.key === 'Tab'){\n event.preventDefault()\n }\n \n if (\n (event.key === 'Enter' \|\| event.key === 'Tab' ) \n && this.inputValue \n && (!this.noDuplicates \|\| !this.tags.includes(this.inputValue))\n ) {\n event.preventDefault()\n this.tags = [...this.tags, this.inputValue];\n this.resetInput();\n this.emit('nile-chip-change', { value: this.tags });\n }\n\n if(\n (event.key === 'Enter'\|\| event.key === 'Tab' ) \n && this.inputValue \n && (this.noDuplicates \|\| this.tags.includes(this.inputValue))\n ){\n this.emit('nile-duplicates-blocked');\n }\n }\n\n private handleFocus() {\n this.isDropdownOpen = true;\n }\n\n onTagsChanged() {\n if (this.noDuplicates)\n this.filteredAutoCompleteOptions = this.filteredAutoCompleteOptions.filter(option => !this.tags.includes(option));\n }\n\n\n private resetInput() {\n // Reset the input-related properties\n this.inputValue = '';\n this.isDropdownOpen = false;\n this.autoComplete.value = '';\n this.autoComplete.handleFocus();\n }\n}\n\nexport default NileChip;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-chip': NileChip;\n }\n}\n"]}

package/dist/src/nile-code-editor/nile-code-editor.d.ts CHANGED Viewed

@@ -27,6 +27,7 @@ export declare class NileCodeEditor extends NileElement {
     error: boolean;
     noborder: boolean;
     multiline: boolean;
+    enableFoldGutters: boolean;
     allowVariableInCustomSuggestion: boolean;
     lineNumbers: boolean;
     disableSyntaxHighlighting: boolean;

package/dist/src/nile-code-editor/nile-code-editor.js CHANGED Viewed

@@ -42,6 +42,7 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
         this.error = false;
         this.noborder = false;
         this.multiline = false;
+        this.enableFoldGutters = false;
         this.allowVariableInCustomSuggestion = false;
         this.lineNumbers = false;
         this.disableSyntaxHighlighting = false;
@@ -228,7 +229,7 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
             extensions: [
                 basicSetup({
                     highlightActiveLine: false,
-                    foldGutter: true,
+                    foldGutter: this.enableFoldGutters,
                 }),
                 lineNumbersExtension,
                 readOnlyExtension,
@@ -423,6 +424,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: true })
 ], NileCodeEditor.prototype, "multiline", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: true })
+], NileCodeEditor.prototype, "enableFoldGutters", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: true })
 ], NileCodeEditor.prototype, "allowVariableInCustomSuggestion", void 0);