npm - @nanoporetech-digital/components - Versions diffs - 2.2.1 → 2.4.0 - Mend

@nanoporetech-digital/components 2.2.1 → 2.4.0

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

Files changed (128) hide show

package/dist/esm-es5/nano-tab-group.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["src/components/tabs/tab-group.scss?tag=nano-tab-group&encapsulation=shadow","src/components/tabs/tab-group.tsx"],"names":["tabGroupCss","TabGroup","class_1","hostRef","_this","this","initialTouchX","initialTouchY","mutationObservers","WeakMap","hasScrollControls","hideControlRight","hideControlLeft","isLegacy","document","head","attachShadow","placement","noScrollControls","storeMethod","updateScrollControls","includes","nav","scrollWidth","clientWidth","tabs","handleClick","event","target","tab","closest","setActiveTab","handleKeyDown","key","preventDefault","activeEl","activeElement","tagName","toLowerCase","getAllActiveTabs","index_1","indexOf","length","isRtl","Math","max","min","setFocus","scrollIntoView","handleTabScroll","endRight","scrollLeft","endLeft","handleBtnClick","goRight","navWidth","getNavWidth","leftAmt","scroll","left","behavior","e","handleTouchStart","disableSwipe","touch","changedTouches","pageX","pageY","handleTouchEnd","distX","distY","threshold","xDiff","clientX","yDiff","clientY","isHorizontalSwipe","abs","currIndex","findIndex","el","active","toGo","activePanel","setAttribute","handleContentSlotChange","setTimeout","setAriaLabels","getActiveTab","handleTabSlotChange","ev","nodes","assignedNodes","flatten","forEach","node","get","mo","MutationObserver","syncActiveTabIndicator","set","observe","characterData","childList","subtree","prototype","handleTabNameChange","activeTab","panel","find","handlePlacementChange","handleNoScrollControlsChange","hideRightBtn","rightBtn","displayTransition","hideLeftBtn","leftBtn","watchScrollControls","_","show","Object","defineProperty","getAllTabs","filter","disabled","getDirectChildren","host","emitEvents","previousTab","map","getAllPanels","name","removeAttribute","nanoTabHide","emit","nanoTabShow","panels","getAttribute","width","_a","shadowRoot","querySelector","height","clientHeight","offset","getOffset","offsetTop","top","scrollTop","offsetLeft","activeTabIndicator","style","transform","computedStyle","getComputedStyle","parseFloat","paddingLeft","paddingRight","handleTabClose","tabIndex","stopImmediatePropagation","closeEv","nanoTabWillClose","defaultPrevented","prevTab","remove","nanoTabClose","componentDidLoad","observer","IntersectionObserver","entries","intersectionRatio","storeId","ComponentStore","init","unobserve","focusVisible","tabGroup","resizeObserver","ResizeObserver","raf","connectedCallback","dir","ownerDocument","disconnectedCallback","render","h","Host","class","assign","createColorClasses","color","legacy","part","ref","nano-tab-group","nano-tab-group--top","nano-tab-group--start","nano-tab-group--has-scroll-controls","nano-tab-group--has-scroll-controls-left","nano-tab-group--has-scroll-controls-right","onClick","onKeyDown","nano-tab-group__scroll-button","nano-tab-group__scroll-button--left","btn","onScroll","role","onSlotchange","nano-tab-group__scroll-button--right","onTouchStart","onTouchEnd"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n/*\n @prop --indicator-transition: Only relevant to placement 'start'. defaults to #{$transition-fast};\n * @prop --indicator-color: defaults to #{map.get($colors, lightblue)} on placement 'top' and #{map.get($colors, blue)} on placement 'start';\n * @prop --indicator-track-color: Only relevant to placement 'start'. defaults to #{map.get($colors, lightgrey)};\n * @prop --indicator-size: defaults to 5px on placement 'top' and 2px on placement 'start';\n\n * @prop --border-radius: defaults to #{$layer-border-radius};\n * @prop --background-rgb: will be used as the default background colour for tabs and content. defaults to #{$layer-bg-color-rgb};\n * @prop --shadow-opacity: opacity of the shadow behind tabs. defaults to 0.1;\n * @prop --scroll-btn-color: defaults to 'currentColor';\n\n * @prop --content-padding: defaults to 2rem 2.5rem;\n * @prop --content-bg: defaults to rgb(var(--background-rgb));\n * @prop --content-border-radius: defaults to var(--border-radius);\n\n * @prop --tabs-padding-start: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n * @prop --tabs-padding-end: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n * @prop --tabs-padding-top: defaults to 0;\n * @prop --tabs-padding-bottom: defaults to 0;\n * @prop --tabs-bg-rgb: defaults to var(--bg-color);\n * @prop --tab-border-radius: defaults to var(--border-radius);\n * @prop --tab-text-color: defaults to #{map.get($colors, blue)} on placement 'top' and #{map.get($colors, darkgrey)} on placement 'start';\n /\n\n:host {\n --indicator-transition: #{$transition-fast};\n --indicator-color: #{map.get($colors, lightblue)};\n --indicator-track-color: #{map.get($colors, lightgrey)};\n --indicator-size: 0;\n --border-radius: #{$layer-border-radius};\n --background-rgb: #{$layer-bg-color-rgb};\n --scroll-btn-color: 'currentColor';\n --content-padding: 2rem 2.5rem;\n --content-bg: rgb(var(--background-rgb));\n --content-border-radius: var(--border-radius);\n --tabs-padding-start: 2.5rem;\n --tabs-padding-end: 2.5rem;\n --tabs-padding-top: 0;\n --tabs-padding-bottom: 0;\n --tabs-container-bg: 'transparent';\n --tabs-bg-rgb: var(--background-rgb);\n --tab-border-radius: var(--border-radius);\n --tab-text-color: #{map.get($colors, blue)};\n --shadow-opacity: 0.1;\n\n display: block;\n position: relative;\n z-index: #{$layer-index-raised};\n\n @media only screen and (max-width: 768px) {\n --tabs-padding-start: 1.5rem;\n --tabs-padding-end: 1.5rem;\n }\n\n ::slotted(nano-tab) {\n --tab-indicator-color: var(--indicator-color);\n --bg-rgb: var(--tabs-bg-rgb);\n --border-radius: var(--tab-border-radius);\n }\n}\n\n// IE bugfix - set this stuff statically\n:host(.legacy) {\n ::slotted(nano-tab) {\n --tab-indicator-color: #{map.get($colors, lightblue)};\n --border-radius: 3px;\n --tab-indicator-size: 5px;\n --bg-rgb: 255, 255, 255;\n }\n}\n\n:host([placement='start']),\n:host([placement='end']) {\n --content-padding: 1rem;\n --tabs-padding-start: 0;\n --tabs-padding-end: 0;\n --tabs-padding-top: 0;\n --tabs-padding-bottom: 0;\n --tab-text-color: #{map.get($colors, darkgrey)};\n --indicator-color: #{map.get($colors, blue)};\n --indicator-size: 2px;\n}\n\n:host(.nano-color) {\n --indicator-color: var(--nano-color-tint, #{nano-color(primary, tint)});\n --tab-text-color: rgba(var(--nano-color-base-rgb), 0.7);\n\n ::slotted(nano-tab) {\n --active-text-color: var(--nano-color-shade, #{nano-color(primary, shade)});\n }\n}\n\n.nano-tab-group {\n display: flex;\n border-radius: 0;\n width: 100%;\n flex: inherit;\n\n &__tabs {\n display: flex;\n position: relative;\n width: 100%;\n }\n\n &__active-tab-indicator {\n position: absolute;\n transition: var(--indicator-transition) transform ease, var(--indicator-transition) width ease;\n }\n\n &__body {\n background: var(--content-bg);\n }\n\n &:not(.focus-visible) ::slotted(nano-tab) {\n --focus-shadow: none;\n }\n\n .nano-tab-group__nav-container {\n position: relative;\n display: flex;\n background: var(--tabs-container-bg);\n }\n\n button {\n appearance: none;\n background-color: transparent;\n }\n\n &__scroll-button {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: 0;\n bottom: 0;\n border: unset;\n z-index: 2;\n transition: #{$transition-fast} ease opacity;\n opacity: 0;\n color: var(--scroll-btn-color);\n\n &:focus {\n outline: none;\n }\n\n &.is-shown {\n opacity: 1;\n }\n\n &.focus-visible:focus {\n box-shadow: #{$control-focus-style} inset;\n }\n\n &--left {\n left: 0;\n }\n\n &--right {\n right: 0;\n }\n\n nano-icon {\n font-size: 16px;\n }\n }\n\n ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n // Top\n ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n &--top {\n flex-direction: column;\n\n .nano-tab-group__nav-container {\n &::after {\n content: '';\n width: 86%;\n box-shadow: 0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));\n height: 10px;\n position: absolute;\n left: 7%;\n bottom: -10px;\n border-radius: 10px;\n z-index: -1;\n }\n }\n\n .nano-tab-group__nav {\n @include hide-scrollbar();\n @include padding(\n var(--tabs-padding-top),\n var(--tabs-padding-end),\n var(--tabs-padding-bottom),\n var(--tabs-padding-start)\n );\n\n display: flex;\n overflow-x: auto;\n overflow-y: hidden;\n transition: #{$transition-medium} ease;\n background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);\n mask-repeat: no-repeat;\n mask-image:\n linear-gradient(\n to left,\n rgba(0, 0, 0, 0) 0,\n rgba(0, 0, 0, 0) var(--tabs-padding-start),\n rgba(0, 0, 0, 1) calc(var(--tabs-padding-start) 2),\n rgba(0, 0, 0, 1) calc(100% - (var(--tabs-padding-end) * 2)),\n rgba(0, 0, 0, 0) calc(100% - var(--tabs-padding-end)),\n rgba(0, 0, 0, 0)\n );\n mask-size: calc(100% + calc(var(--tabs-padding-end) * 4));\n mask-position: calc(var(--tabs-padding-end) * -2);\n\n &::after {\n content: ' ';\n\n @include padding(\n var(--tabs-padding-top),\n var(--tabs-padding-end),\n var(--tabs-padding-bottom),\n 0\n );\n\n line-height: 1;\n flex: 0 0 auto;\n }\n }\n\n &.nano-tab-group--has-scroll-controls-left {\n .nano-tab-group__nav {\n mask-position: 0;\n mask-size: calc(100% + (var(--tabs-padding-end) * 2));\n }\n }\n\n &.nano-tab-group--has-scroll-controls-right {\n .nano-tab-group__nav {\n mask-position: calc(var(--tabs-padding-end) * -1);\n mask-size: calc(100% + var(--tabs-padding-end));\n }\n }\n\n &.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right {\n .nano-tab-group__nav {\n mask-size: 100%;\n mask-position: 0;\n }\n }\n\n .nano-tab-group__tabs {\n flex: 1 1 auto;\n position: relative;\n flex-direction: row;\n text-align: center;\n color: var(--tab-text-color);\n width: auto;\n }\n\n .nano-tab-group__active-tab-indicator {\n bottom: -2px;\n border-bottom: solid var(--indicator-size) var(--indicator-color);\n }\n\n .nano-tab-group__body {\n order: 2;\n background: var(--content-bg);\n position: relative;\n overflow: hidden;\n width: auto;\n display: flex;\n justify-content: center;\n padding: var(--content-padding);\n border-radius: var(--content-border-radius);\n flex: 1 1 auto;\n }\n }\n\n ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n // Start\n ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n &--start {\n flex-direction: row;\n\n .nano-tab-group__tabs {\n flex: 0 0 auto;\n flex-direction: column;\n color: var(--tab-text-color);\n background: rgb(var(--tabs-bg-rgb));\n\n @include ltr-host() {\n border-left: solid var(--indicator-size) var(--indicator-track-color);\n text-align: left;\n }\n\n @include rtl-host() {\n border-right: solid var(--indicator-size) var(--indicator-track-color);\n text-align: right;\n }\n }\n\n .nano-tab-group__active-tab-indicator {\n @include ltr-host() {\n left: calc(-1 * 2px);\n border-left: solid var(--indicator-size) var(--indicator-color);\n }\n\n @include rtl-host() {\n right: calc(-1 * 2px);\n border-right: solid var(--indicator-size) var(--indicator-color);\n }\n }\n\n .nano-tab-group__body {\n flex: 1 1 auto;\n order: 2;\n padding: var(--content-padding);\n overflow: hidden;\n\n @include border-radius(\n 0,\n var(--content-border-radius),\n var(--content-border-radius),\n 0\n );\n }\n }\n}\n","import {\n Component,\n Element,\n ComponentInterface,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n Host,\n Listen,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport { scrollIntoView } from '../../utils/scroll';\nimport { focusVisible } from '../../utils/focus-visible';\nimport {\n displayTransition,\n createColorClasses,\n getOffset,\n getDirectChildren,\n raf,\n} from '../../utils';\nimport { Color } from '../../interface';\nimport {\n ComponentStore,\n StorageMethods,\n} from '../../utils/store/component-store';\n\n/*\n A tradtional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.\n \n Tabs can be stacked vertically or horizontally (which presents different styling variations) using the `placement` attribute.\n * Horizonal tabs that don't fit will overflow and scroll appropriately.\n * Tab-content can also be swiped to change tabs.\n \n @slot tabs - Add `nano-tab` elements to add clickable tabs.\n * @slot tab-content-header - a header bar displayed above tab content.\n * @slot - Add `nano-tab-content` elements to add tabbable content.\n \n @part base - the main tab-group wrapper\n * @part nav - the bar surrounding all the tabs and nav buttons\n * @part tabs - the wrapper around the `nano-tab` components\n * @part active-tab-indicator - the active indicator line\n * @part body - the wrapper around the `nano-tab-content` components\n /\n\n@Component({\n tag: 'nano-tab-group',\n styleUrl: 'tab-group.scss',\n shadow: true,\n})\nexport class TabGroup implements ComponentInterface {\n private activeTab: HTMLNanoTabElement;\n private activePanel: HTMLNanoTabContentElement;\n private activeTabIndicator: HTMLElement;\n private nav: HTMLElement;\n private tabGroup: HTMLElement;\n private tabs: HTMLElement;\n private rightBtn: HTMLButtonElement;\n private leftBtn: HTMLButtonElement;\n\n private isRtl: boolean;\n private initialTouchX: number = null;\n private initialTouchY: number = null;\n\n private resizeObserver: ResizeObserver;\n private mutationObservers: WeakMap<Node, MutationObserver> = new WeakMap();\n\n @Element() host: HTMLNanoTabGroupElement;\n\n @State() hasScrollControls = false;\n @State() hideControlRight = true;\n @State() hideControlLeft = true;\n @State() isLegacy = !document.head.attachShadow;\n @State() tab: string;\n\n /\n The placement of the tabs.\n /\n @Prop() placement: 'top' \| 'start' = 'top';\n\n /\n Disables the scroll arrows that appear when tabs overflow.\n /\n @Prop() noScrollControls = false;\n\n /\n The color to use from the application's color palette.\n /\n @Prop() color?: Color;\n\n /\n Store the currently open tab (against this ID) in the component store.\n * Use in conjunction with storeMethod\n /\n @Prop() storeId?: string;\n\n /\n The method of storage.\n * Either session storage, url hash (after the '#') or url query (after the '?').\n /\n @Prop() storeMethod: StorageMethods = 'session';\n\n /\n Disable 'swipe to change tab' on devices with touch\n /\n @Prop() disableSwipe: boolean;\n\n @Watch('tab')\n handleTabNameChange() {\n if (this.activeTab && this.activeTab.panel === this.tab) return;\n const tab = this.getAllActiveTabs.find((el) => el.panel === this.tab);\n this.setActiveTab(tab);\n }\n\n @Watch('placement')\n handlePlacementChange() {\n this.syncActiveTabIndicator();\n }\n\n @Watch('noScrollControls')\n handleNoScrollControlsChange() {\n this.updateScrollControls();\n }\n\n @Watch('hideControlRight')\n hideRightBtn() {\n if (!this.rightBtn) return;\n displayTransition(this.rightBtn, 'is-shown', !this.hideControlRight);\n }\n\n @Watch('hideControlLeft')\n hideLeftBtn() {\n if (!this.leftBtn) return;\n displayTransition(this.leftBtn, 'is-shown', !this.hideControlLeft);\n }\n\n @Watch('hasScrollControls')\n watchScrollControls() {\n if (this.hasScrollControls) setTimeout((_) => this.handleTabScroll(), 20);\n else\n setTimeout((_) => {\n this.hideControlLeft = this.hideControlRight = true;\n }, 20);\n }\n\n /* Emitted when a tab is shown. /\n @Event() nanoTabShow: EventEmitter<{ name: string }>;\n\n /* Emitted when a tab is hidden. /\n @Event() nanoTabHide: EventEmitter<{ name: string }>;\n\n /* Emitted when the tab is closable and the close button is activated. /\n @Event() nanoTabWillClose: EventEmitter<{ name: string }>;\n\n /* Emitted when a closable tab is removed. /\n @Event() nanoTabClose: EventEmitter<{ name: string }>;\n\n /* Shows the specified tab panel. /\n @Method()\n async show(panel: string) {\n if (this.activeTab && this.activeTab.panel === panel) return;\n\n const tab = this.getAllActiveTabs.find((el) => el.panel === panel);\n\n if (tab) this.setActiveTab(tab);\n }\n\n // Internal Methods\n\n get getAllActiveTabs() {\n return this.getAllTabs.filter((el: any) => !el.disabled);\n }\n\n get getAllTabs() {\n return getDirectChildren<HTMLNanoTabElement>(this.host, 'nano-tab');\n }\n\n get getAllPanels() {\n return getDirectChildren<HTMLNanoTabContentElement>(\n this.host,\n 'nano-tab-content'\n );\n }\n\n get getActiveTab() {\n return this.getAllActiveTabs.find((el) => el.active);\n }\n\n private updateScrollControls = () => {\n if (this.noScrollControls) {\n this.hasScrollControls = false;\n } else {\n this.hasScrollControls =\n ['top'].includes(this.placement) &&\n this.nav.scrollWidth > this.nav.clientWidth &&\n this.nav.scrollWidth > this.tabs.clientWidth;\n }\n };\n\n private setActiveTab(tab: HTMLNanoTabElement, emitEvents = true) {\n if (\n tab &&\n tab !== this.activeTab &&\n !tab.disabled &&\n this.getAllActiveTabs.includes(tab)\n ) {\n const previousTab = this.activeTab;\n this.activeTab = tab;\n this.tab = tab.panel;\n\n // Sync tabs and panels\n this.getAllActiveTabs.map((el) => (el.active = el === this.activeTab));\n this.getAllPanels.map((el) => {\n if (el.name === this.activeTab.panel) {\n el.active = true;\n this.activePanel = el;\n } else el.active = false;\n el.removeAttribute('animation-dir');\n });\n // active tab can be changed on init - this won't be ready. No big thing\n this.syncActiveTabIndicator();\n if (['top'].includes(this.placement)) {\n scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n }\n\n // Emit events\n if (emitEvents) {\n if (previousTab) {\n this.nanoTabHide.emit({ name: previousTab.panel });\n }\n\n this.nanoTabShow.emit({ name: this.activeTab.panel });\n }\n }\n }\n\n private setAriaLabels() {\n const tabs = this.getAllActiveTabs;\n const panels = this.getAllPanels;\n\n // Link each tab with its corresponding panel\n tabs.map((tab) => {\n const panel = 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 syncActiveTabIndicator() {\n this.getAllTabs.forEach((tab) =>\n tab.setAttribute(\n 'direction',\n this.placement === 'top' ? 'horizontal' : 'vertical'\n )\n );\n\n const tab = this.getActiveTab;\n const width = tab.shadowRoot.querySelector('.nanotab')?.clientWidth \|\| 0;\n const height = tab.clientHeight;\n const offset = getOffset(tab, this.tabs);\n const offsetTop = offset.top + this.nav.scrollTop;\n const offsetLeft = offset.left;\n\n switch (this.placement) {\n case 'top':\n this.activeTabIndicator.style.width = `${width}px`;\n this.activeTabIndicator.style.height = null;\n this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;\n break;\n\n case 'start':\n this.activeTabIndicator.style.width = null;\n this.activeTabIndicator.style.height = `${height}px`;\n this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;\n break;\n }\n }\n\n private getNavWidth() {\n if (!this.nav) return 0;\n const computedStyle = getComputedStyle(this.nav);\n let clientWidth = this.nav.clientWidth;\n return (clientWidth -=\n parseFloat(computedStyle.paddingLeft) +\n parseFloat(computedStyle.paddingRight));\n }\n\n // Event handlers\n\n @Listen('nanoTabClose')\n handleTabClose(ev: CustomEvent & { target: HTMLNanoTabElement }) {\n let tabIndex = this.getAllActiveTabs.indexOf(ev.target);\n const tab = ev.target;\n if (tabIndex < 0) return;\n\n const panel = this.getAllPanels.find((el) => el.name === tab.panel);\n if (!panel) return;\n\n ev.stopImmediatePropagation();\n\n const closeEv = this.nanoTabWillClose.emit({ name: tab.panel });\n if (closeEv.defaultPrevented) return;\n\n // Show the previous tab if the tab is currently active\n if (tab.active) {\n tabIndex = tabIndex === 0 ? 1 : tabIndex - 1;\n const prevTab = this.getAllActiveTabs[tabIndex]?.panel;\n if (prevTab) this.host.show(prevTab);\n }\n\n tab.remove();\n panel.remove();\n this.nanoTabClose.emit({ name: tab.panel });\n }\n\n private handleClick = (event: MouseEvent) => {\n const target = event.target as HTMLElement;\n const tab = target.closest('nano-tab');\n\n if (tab) this.setActiveTab(tab);\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Activate a tab\n if (['Enter', ' '].includes(event.key)) {\n const target = event.target as HTMLElement;\n const tab = target.closest('nano-tab');\n\n if (tab) {\n this.setActiveTab(tab);\n event.preventDefault();\n }\n }\n\n // Move focus left or right\n if (\n [\n 'ArrowLeft',\n 'ArrowRight',\n 'ArrowUp',\n 'ArrowDown',\n 'Home',\n 'End',\n ].includes(event.key)\n ) {\n const activeEl = document.activeElement as any;\n\n if (activeEl && activeEl.tagName.toLowerCase() === 'nano-tab') {\n const tabs = this.getAllActiveTabs;\n let index = tabs.indexOf(activeEl);\n\n if (event.key === 'Home') {\n index = 0;\n } else if (event.key === 'End') {\n index = tabs.length - 1;\n } else if (\n (this.isRtl && event.key === 'ArrowRight') \|\|\n (!this.isRtl && event.key === 'ArrowLeft')\n ) {\n index = Math.max(0, index - 1);\n } else if (\n (this.isRtl && event.key === 'ArrowLeft') \|\|\n (!this.isRtl && event.key === 'ArrowRight')\n ) {\n index = Math.min(tabs.length - 1, index + 1);\n }\n tabs[index].setFocus();\n\n if (['top'].includes(this.placement)) {\n scrollIntoView(tabs[index], this.nav, 'horizontal', 'center');\n }\n event.preventDefault();\n }\n }\n };\n\n private handleTabScroll = () => {\n if (!this.hasScrollControls) {\n this.hideControlLeft = this.hideControlRight = true;\n return;\n }\n let endRight = this.isRtl\n ? this.nav.scrollLeft === 0\n : this.nav.scrollWidth - this.nav.scrollLeft === this.nav.clientWidth;\n let endLeft = this.isRtl\n ? this.nav.scrollWidth + this.nav.scrollLeft === this.nav.clientWidth\n : this.nav.scrollLeft === 0;\n\n if (endLeft) {\n this.hideControlLeft = true;\n this.hideControlRight = false;\n } else if (endRight) {\n this.hideControlLeft = false;\n this.hideControlRight = true;\n } else {\n this.hideControlRight = false;\n this.hideControlLeft = false;\n }\n };\n\n private handleBtnClick = (goRight: boolean = false) => {\n const navWidth = this.getNavWidth();\n let leftAmt;\n if (goRight) leftAmt = this.nav.scrollLeft + navWidth - 20;\n else leftAmt = this.nav.scrollLeft - navWidth + 20;\n\n try {\n this.nav.scroll({\n left: leftAmt,\n behavior: 'smooth',\n });\n } catch (e) {\n this.nav.scrollLeft = leftAmt;\n }\n };\n\n private handleTouchStart = (event: TouchEvent) => {\n if (this.disableSwipe) return;\n const touch = event.changedTouches[0];\n this.initialTouchX = touch.pageX;\n this.initialTouchY = touch.pageY;\n };\n\n private handleTouchEnd = (event: TouchEvent) => {\n if (this.disableSwipe) return;\n const touch = event.changedTouches[0];\n const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled\n const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\n const threshold = 70;\n\n var xDiff = this.initialTouchX - touch.clientX;\n var yDiff = this.initialTouchY - touch.clientY;\n\n const isHorizontalSwipe =\n Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;\n\n const tabs = this.getAllActiveTabs;\n const currIndex = tabs.findIndex((el) => el.active);\n\n if (isHorizontalSwipe) {\n const toGo =\n (distX < 0 && this.placement === 'top') \|\|\n (distX > 0 && this.placement !== 'top')\n ? 1\n : -1;\n\n if (tabs[currIndex + toGo]) {\n this.setActiveTab(tabs[currIndex + toGo]);\n\n if (Math.abs(xDiff) > Math.abs(yDiff)) {\n if (xDiff > 0) this.activePanel.setAttribute('animation-dir', 'left');\n else this.activePanel.setAttribute('animation-dir', 'right');\n }\n }\n }\n this.initialTouchX = null;\n this.initialTouchY = null;\n };\n\n private handleContentSlotChange = () => {\n setTimeout(() => {\n this.setAriaLabels();\n this.setActiveTab(this.getActiveTab \|\| this.getAllActiveTabs[0], false);\n });\n };\n\n private handleTabSlotChange = (ev: Event & { target: HTMLSlotElement }) => {\n setTimeout(() => {\n this.setAriaLabels();\n this.handleTabScroll();\n this.setActiveTab(this.getActiveTab \|\| this.getAllActiveTabs[0], false);\n this.updateScrollControls();\n }, 500);\n\n /* maintain a weakmap of mutation observers to maintain tab / indicator position on all changes. */\n const nodes = ev.target.assignedNodes({ flatten: true });\n nodes.forEach((node) => {\n if (!this.mutationObservers.get(node)) {\n const mo = new MutationObserver(() => {\n setTimeout(() => {\n this.syncActiveTabIndicator();\n this.handleTabScroll();\n this.updateScrollControls();\n }, 500);\n });\n this.mutationObservers.set(node, mo);\n\n mo.observe(node, {\n characterData: true,\n childList: true,\n subtree: true,\n });\n }\n });\n };\n\n // Stencil hooks\n\n componentDidLoad() {\n // Initial IO - watching for all content to be loaded\n const observer = new IntersectionObserver((entries, observer) => {\n if (entries[0].intersectionRatio > 0) {\n this.setAriaLabels();\n this.setActiveTab(this.getActiveTab \|\| this.getAllActiveTabs[0], false);\n\n if (this.storeId)\n ComponentStore.init(this, ['tab'], this.storeMethod, this.storeId);\n observer.unobserve(entries[0].target);\n }\n });\n observer.observe(this.host);\n focusVisible.observe(this.tabGroup);\n\n if (this.leftBtn) {\n focusVisible.observe(this.leftBtn);\n focusVisible.observe(this.rightBtn);\n }\n\n this.resizeObserver = new ResizeObserver(() => {\n setTimeout(() => {\n this.updateScrollControls();\n this.syncActiveTabIndicator();\n scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n }, 500);\n });\n this.resizeObserver.observe(this.nav);\n\n raf(() => this.updateScrollControls());\n }\n\n connectedCallback() {\n this.isRtl =\n this.host.dir === 'rtl' \|\|\n (this.host.ownerDocument as Document).dir === 'rtl';\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.tabGroup);\n if (this.leftBtn) {\n focusVisible.unobserve(this.leftBtn);\n focusVisible.unobserve(this.rightBtn);\n }\n if (this.resizeObserver) this.resizeObserver.unobserve(this.nav);\n }\n\n render() {\n this.isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n return (\n <Host\n class={{ ...createColorClasses(this.color), legacy: this.isLegacy }}\n dir={this.isRtl ? 'rtl' : null}\n >\n <div\n part=\"base\"\n ref={(el) => (this.tabGroup = el)}\n class={{\n 'nano-tab-group': true,\n 'nano-tab-group--top': this.placement === 'top',\n 'nano-tab-group--start': this.placement === 'start',\n 'nano-tab-group--has-scroll-controls': this.hasScrollControls,\n 'nano-tab-group--has-scroll-controls-left': !this.hideControlLeft,\n 'nano-tab-group--has-scroll-controls-right': !this.hideControlRight,\n }}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <div class=\"nano-tab-group__nav-container\" part=\"nav\">\n {this.placement === 'top' && (\n <button\n class={{\n 'nano-tab-group__scroll-button': true,\n 'nano-tab-group__scroll-button--left': true,\n }}\n ref={(btn) => (this.leftBtn = btn)}\n onClick={() => this.handleBtnClick(false)}\n >\n <nano-icon name=\"light/chevron-left\"></nano-icon>\n </button>\n )}\n <div\n ref={(el) => (this.nav = el)}\n class=\"nano-tab-group__nav\"\n onScroll={this.handleTabScroll}\n >\n <div\n ref={(el) => (this.tabs = el)}\n part=\"tabs\"\n class=\"nano-tab-group__tabs\"\n role=\"tablist\"\n >\n <div\n ref={(el) => (this.activeTabIndicator = el)}\n part=\"active-tab-indicator\"\n class=\"nano-tab-group__active-tab-indicator\"\n />\n <slot name=\"tabs\" onSlotchange={this.handleTabSlotChange} />\n </div>\n </div>\n {this.placement === 'top' && (\n <button\n class={{\n 'nano-tab-group__scroll-button': true,\n 'nano-tab-group__scroll-button--right': true,\n }}\n ref={(btn) => (this.rightBtn = btn)}\n onClick={() => this.handleBtnClick(true)}\n >\n <nano-icon name=\"light/chevron-right\"></nano-icon>\n </button>\n )}\n </div>\n <slot name=\"tab-content-header\" />\n <div\n part=\"body\"\n class=\"nano-tab-group__body\"\n onTouchStart={this.handleTouchStart}\n onTouchEnd={this.handleTouchEnd}\n >\n <slot onSlotchange={this.handleContentSlotChange} />\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"sources":["src/components/tabs/tab-group.scss?tag=nano-tab-group&encapsulation=shadow","src/components/tabs/tab-group.tsx"],"names":["tabGroupCss","TabGroup","class_1","hostRef","_this","this","initialTouchX","initialTouchY","mutationObservers","WeakMap","hasScrollControls","hideControlRight","hideControlLeft","isLegacy","document","head","attachShadow","placement","noScrollControls","storeMethod","updateScrollControls","includes","nav","scrollWidth","clientWidth","tabs","handleClick","event","target","tab","closest","setActiveTab","handleKeyDown","key","preventDefault","activeEl","activeElement","tagName","toLowerCase","getAllActiveTabs","index_1","indexOf","length","isRtl","Math","max","min","setFocus","scrollIntoView","handleTabScroll","endRight","scrollLeft","endLeft","handleBtnClick","goRight","navWidth","getNavWidth","leftAmt","scroll","left","behavior","e","handleTouchStart","disableSwipe","touch","changedTouches","pageX","pageY","handleTouchEnd","distX","distY","threshold","xDiff","clientX","yDiff","clientY","isHorizontalSwipe","abs","currIndex","findIndex","el","active","toGo","activePanel","setAttribute","handleContentSlotChange","setTimeout","setAriaLabels","getActiveTab","handleTabSlotChange","ev","nodes","assignedNodes","flatten","forEach","node","get","mo","MutationObserver","syncActiveTabIndicator","set","observe","characterData","childList","subtree","prototype","handleTabNameChange","activeTab","panel","find","handlePlacementChange","handleNoScrollControlsChange","hideRightBtn","rightBtn","displayTransition","hideLeftBtn","leftBtn","watchScrollControls","_","show","Object","defineProperty","getAllTabs","filter","disabled","getDirectChildren","host","emitEvents","previousTab","map","getAllPanels","name","removeAttribute","nanoTabHide","emit","nanoTabShow","panels","getAttribute","width","_a","shadowRoot","querySelector","height","clientHeight","offset","getOffset","offsetTop","top","scrollTop","offsetLeft","activeTabIndicator","style","transform","computedStyle","getComputedStyle","parseFloat","paddingLeft","paddingRight","handleTabClose","tabIndex","stopImmediatePropagation","closeEv","nanoTabWillClose","defaultPrevented","prevTab","remove","nanoTabClose","componentDidLoad","observer","IntersectionObserver","entries","intersectionRatio","storeId","ComponentStore","init","unobserve","focusVisible","tabGroup","resizeObserver","ResizeObserver","raf","connectedCallback","dir","ownerDocument","disconnectedCallback","render","h","Host","class","assign","createColorClasses","color","legacy","part","ref","nano-tab-group","nano-tab-group--top","nano-tab-group--start","nano-tab-group--has-scroll-controls","nano-tab-group--has-scroll-controls-left","nano-tab-group--has-scroll-controls-right","onClick","onKeyDown","nano-tab-group__scroll-button","nano-tab-group__scroll-button--left","btn","onScroll","role","onSlotchange","nano-tab-group__scroll-button--right","onTouchStart","onTouchEnd"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n/*\n @prop --indicator-transition: Only relevant to placement 'start'. defaults to #{$transition-fast};\n * @prop --indicator-color: defaults to #{map.get($colors, lightblue)} on placement 'top' and #{map.get($colors, blue)} on placement 'start';\n * @prop --indicator-track-color: Only relevant to placement 'start'. defaults to #{map.get($colors, lightgrey)};\n * @prop --indicator-size: defaults to 5px on placement 'top' and 2px on placement 'start';\n\n * @prop --border-radius: defaults to #{$layer-border-radius};\n * @prop --background-rgb: will be used as the default background colour for tabs and content. defaults to #{$layer-bg-color-rgb};\n * @prop --shadow-opacity: opacity of the shadow behind tabs. defaults to 0.1;\n * @prop --scroll-btn-color: defaults to 'currentColor';\n\n * @prop --content-padding: defaults to 2rem 2.5rem;\n * @prop --content-bg: defaults to rgb(var(--background-rgb));\n * @prop --content-border-radius: defaults to var(--border-radius);\n\n * @prop --tabs-padding-start: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n * @prop --tabs-padding-end: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n * @prop --tabs-padding-top: defaults to 0;\n * @prop --tabs-padding-bottom: defaults to 0;\n * @prop --tabs-bg-rgb: defaults to var(--bg-color);\n * @prop --tab-border-radius: defaults to var(--border-radius);\n * @prop --tab-text-color: defaults to #{map.get($colors, blue)} on placement 'top' and #{map.get($colors, darkgrey)} on placement 'start';\n * @prop --fade-transparency: controls the strength of the fade on overflowing tabs, defaults to 0;\n /\n\n:host {\n --indicator-transition: #{$transition-fast};\n --indicator-color: #{map.get($colors, lightblue)};\n --indicator-track-color: #{map.get($colors, lightgrey)};\n --indicator-size: 0;\n --border-radius: #{$layer-border-radius};\n --background-rgb: #{$layer-bg-color-rgb};\n --scroll-btn-color: 'currentColor';\n --content-padding: 2rem 2.5rem;\n --content-bg: rgb(var(--background-rgb));\n --content-border-radius: var(--border-radius);\n --tabs-padding-start: 2.5rem;\n --tabs-padding-end: 2.5rem;\n --tabs-padding-top: 0;\n --tabs-padding-bottom: 0;\n --tabs-container-bg: 'transparent';\n --tabs-bg-rgb: var(--background-rgb);\n --tab-border-radius: var(--border-radius);\n --tab-text-color: #{map.get($colors, blue)};\n --shadow-opacity: 0.1;\n --fade-transparency: 0;\n\n display: block;\n position: relative;\n z-index: #{$layer-index-raised};\n\n @media only screen and (max-width: 768px) {\n --tabs-padding-start: 1.5rem;\n --tabs-padding-end: 1.5rem;\n }\n\n ::slotted(nano-tab) {\n --tab-indicator-color: var(--indicator-color);\n --bg-rgb: var(--tabs-bg-rgb);\n --border-radius: var(--tab-border-radius);\n }\n}\n\n// IE bugfix - set this stuff statically\n:host(.legacy) {\n ::slotted(nano-tab) {\n --tab-indicator-color: #{map.get($colors, lightblue)};\n --border-radius: 3px;\n --tab-indicator-size: 5px;\n --bg-rgb: 255, 255, 255;\n }\n}\n\n:host([placement='start']),\n:host([placement='end']) {\n --content-padding: 1rem;\n --tabs-padding-start: 0;\n --tabs-padding-end: 0;\n --tabs-padding-top: 0;\n --tabs-padding-bottom: 0;\n --tab-text-color: #{map.get($colors, darkgrey)};\n --indicator-color: #{map.get($colors, blue)};\n --indicator-size: 2px;\n}\n\n:host(.nano-color) {\n --indicator-color: var(--nano-color-tint, #{nano-color(primary, tint)});\n --tab-text-color: rgba(var(--nano-color-base-rgb), 0.7);\n\n ::slotted(nano-tab) {\n --active-text-color: var(--nano-color-shade, #{nano-color(primary, shade)});\n }\n}\n\n.nano-tab-group {\n display: flex;\n border-radius: 0;\n width: 100%;\n flex: inherit;\n\n &__tabs {\n display: flex;\n position: relative;\n width: 100%;\n }\n\n &__active-tab-indicator {\n position: absolute;\n transition: var(--indicator-transition) transform ease, var(--indicator-transition) width ease;\n }\n\n &__body {\n background: var(--content-bg);\n }\n\n &:not(.focus-visible) ::slotted(nano-tab) {\n --focus-shadow: none;\n }\n\n .nano-tab-group__nav-container {\n position: relative;\n display: flex;\n background: var(--tabs-container-bg);\n }\n\n button {\n appearance: none;\n background-color: transparent;\n }\n\n &__scroll-button {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: 0;\n bottom: 0;\n border: unset;\n z-index: 2;\n transition: #{$transition-fast} ease opacity;\n opacity: 0;\n color: var(--scroll-btn-color);\n\n &:focus {\n outline: none;\n }\n\n &.is-shown {\n opacity: 1;\n }\n\n &.focus-visible:focus {\n box-shadow: #{$control-focus-style} inset;\n }\n\n &--left {\n left: 0;\n }\n\n &--right {\n right: 0;\n }\n\n nano-icon {\n font-size: 16px;\n }\n }\n\n ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n // Top\n ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n &--top {\n flex-direction: column;\n\n .nano-tab-group__nav-container {\n &::after {\n content: '';\n width: 86%;\n box-shadow: 0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));\n height: 10px;\n position: absolute;\n left: 7%;\n bottom: -10px;\n border-radius: 10px;\n z-index: -1;\n }\n }\n\n .nano-tab-group__nav {\n @include hide-scrollbar();\n @include padding(\n var(--tabs-padding-top),\n var(--tabs-padding-end),\n var(--tabs-padding-bottom),\n var(--tabs-padding-start)\n );\n\n display: flex;\n overflow-x: auto;\n overflow-y: hidden;\n transition: #{$transition-medium} ease;\n background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);\n mask-repeat: no-repeat;\n mask-image:\n linear-gradient(\n to left,\n rgba(0, 0, 0, var(--fade-transparency)) 0,\n rgba(0, 0, 0, var(--fade-transparency)) var(--tabs-padding-start),\n rgba(0, 0, 0, 1) calc(var(--tabs-padding-start) 2),\n rgba(0, 0, 0, 1) calc(100% - (var(--tabs-padding-end) * 2)),\n rgba(0, 0, 0, var(--fade-transparency)) calc(100% - var(--tabs-padding-end)),\n rgba(0, 0, 0, var(--fade-transparency))\n );\n mask-size: calc(100% + calc(var(--tabs-padding-end) * 4));\n mask-position: calc(var(--tabs-padding-end) * -2);\n\n &::after {\n content: ' ';\n\n @include padding(\n var(--tabs-padding-top),\n var(--tabs-padding-end),\n var(--tabs-padding-bottom),\n 0\n );\n\n line-height: 1;\n flex: 0 0 auto;\n }\n }\n\n &.nano-tab-group--has-scroll-controls-left {\n .nano-tab-group__nav {\n mask-position: 0;\n mask-size: calc(100% + (var(--tabs-padding-end) * 2));\n }\n }\n\n &.nano-tab-group--has-scroll-controls-right {\n .nano-tab-group__nav {\n mask-position: calc(var(--tabs-padding-end) * -1);\n mask-size: calc(100% + var(--tabs-padding-end));\n }\n }\n\n &.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right {\n .nano-tab-group__nav {\n mask-size: 100%;\n mask-position: 0;\n }\n }\n\n .nano-tab-group__tabs {\n flex: 1 1 auto;\n position: relative;\n flex-direction: row;\n text-align: center;\n color: var(--tab-text-color);\n width: auto;\n }\n\n .nano-tab-group__active-tab-indicator {\n bottom: -2px;\n border-bottom: solid var(--indicator-size) var(--indicator-color);\n }\n\n .nano-tab-group__body {\n order: 2;\n background: var(--content-bg);\n position: relative;\n overflow: hidden;\n width: auto;\n display: flex;\n justify-content: center;\n padding: var(--content-padding);\n border-radius: var(--content-border-radius);\n flex: 1 1 auto;\n }\n }\n\n ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n // Start\n ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n &--start {\n flex-direction: row;\n\n .nano-tab-group__tabs {\n flex: 0 0 auto;\n flex-direction: column;\n color: var(--tab-text-color);\n background: rgb(var(--tabs-bg-rgb));\n\n @include ltr-host() {\n border-left: solid var(--indicator-size) var(--indicator-track-color);\n text-align: left;\n }\n\n @include rtl-host() {\n border-right: solid var(--indicator-size) var(--indicator-track-color);\n text-align: right;\n }\n }\n\n .nano-tab-group__active-tab-indicator {\n @include ltr-host() {\n left: calc(-1 * 2px);\n border-left: solid var(--indicator-size) var(--indicator-color);\n }\n\n @include rtl-host() {\n right: calc(-1 * 2px);\n border-right: solid var(--indicator-size) var(--indicator-color);\n }\n }\n\n .nano-tab-group__body {\n flex: 1 1 auto;\n order: 2;\n padding: var(--content-padding);\n overflow: hidden;\n\n @include border-radius(\n 0,\n var(--content-border-radius),\n var(--content-border-radius),\n 0\n );\n }\n }\n}\n","import {\n Component,\n Element,\n ComponentInterface,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n Host,\n Listen,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport { scrollIntoView } from '../../utils/scroll';\nimport { focusVisible } from '../../utils/focus-visible';\nimport {\n displayTransition,\n createColorClasses,\n getOffset,\n getDirectChildren,\n raf,\n} from '../../utils';\nimport { Color } from '../../interface';\nimport {\n ComponentStore,\n StorageMethods,\n} from '../../utils/store/component-store';\n\n/*\n A tradtional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.\n \n Tabs can be stacked vertically or horizontally (which presents different styling variations) using the `placement` attribute.\n * Horizonal tabs that don't fit will overflow and scroll appropriately.\n * Tab-content can also be swiped to change tabs.\n \n @slot tabs - Add `nano-tab` elements to add clickable tabs.\n * @slot tab-content-header - a header bar displayed above tab content.\n * @slot - Add `nano-tab-content` elements to add tabbable content.\n \n @part base - the main tab-group wrapper\n * @part nav - the bar surrounding all the tabs and nav buttons\n * @part tabs - the wrapper around the `nano-tab` components\n * @part active-tab-indicator - the active indicator line\n * @part body - the wrapper around the `nano-tab-content` components\n /\n\n@Component({\n tag: 'nano-tab-group',\n styleUrl: 'tab-group.scss',\n shadow: true,\n})\nexport class TabGroup implements ComponentInterface {\n private activeTab: HTMLNanoTabElement;\n private activePanel: HTMLNanoTabContentElement;\n private activeTabIndicator: HTMLElement;\n private nav: HTMLElement;\n private tabGroup: HTMLElement;\n private tabs: HTMLElement;\n private rightBtn: HTMLButtonElement;\n private leftBtn: HTMLButtonElement;\n\n private isRtl: boolean;\n private initialTouchX: number = null;\n private initialTouchY: number = null;\n\n private resizeObserver: ResizeObserver;\n private mutationObservers: WeakMap<Node, MutationObserver> = new WeakMap();\n\n @Element() host: HTMLNanoTabGroupElement;\n\n @State() hasScrollControls = false;\n @State() hideControlRight = true;\n @State() hideControlLeft = true;\n @State() isLegacy = !document.head.attachShadow;\n @State() tab: string;\n\n /\n The placement of the tabs.\n /\n @Prop() placement: 'top' \| 'start' = 'top';\n\n /\n Disables the scroll arrows that appear when tabs overflow.\n /\n @Prop() noScrollControls = false;\n\n /\n The color to use from the application's color palette.\n /\n @Prop() color?: Color;\n\n /\n Store the currently open tab (against this ID) in the component store.\n * Use in conjunction with storeMethod\n /\n @Prop() storeId?: string;\n\n /\n The method of storage.\n * Either session storage, url hash (after the '#') or url query (after the '?').\n /\n @Prop() storeMethod: StorageMethods = 'session';\n\n /\n Disable 'swipe to change tab' on devices with touch\n /\n @Prop() disableSwipe: boolean;\n\n @Watch('tab')\n handleTabNameChange() {\n if (this.activeTab && this.activeTab.panel === this.tab) return;\n const tab = this.getAllActiveTabs.find((el) => el.panel === this.tab);\n this.setActiveTab(tab);\n }\n\n @Watch('placement')\n handlePlacementChange() {\n this.syncActiveTabIndicator();\n }\n\n @Watch('noScrollControls')\n handleNoScrollControlsChange() {\n this.updateScrollControls();\n }\n\n @Watch('hideControlRight')\n hideRightBtn() {\n if (!this.rightBtn) return;\n displayTransition(this.rightBtn, 'is-shown', !this.hideControlRight);\n }\n\n @Watch('hideControlLeft')\n hideLeftBtn() {\n if (!this.leftBtn) return;\n displayTransition(this.leftBtn, 'is-shown', !this.hideControlLeft);\n }\n\n @Watch('hasScrollControls')\n watchScrollControls() {\n if (this.hasScrollControls) setTimeout((_) => this.handleTabScroll(), 20);\n else\n setTimeout((_) => {\n this.hideControlLeft = this.hideControlRight = true;\n }, 20);\n }\n\n /* Emitted when a tab is shown. /\n @Event() nanoTabShow: EventEmitter<{ name: string }>;\n\n /* Emitted when a tab is hidden. /\n @Event() nanoTabHide: EventEmitter<{ name: string }>;\n\n /* Emitted when the tab is closable and the close button is activated. /\n @Event() nanoTabWillClose: EventEmitter<{ name: string }>;\n\n /* Emitted when a closable tab is removed. /\n @Event() nanoTabClose: EventEmitter<{ name: string }>;\n\n /* Shows the specified tab panel. /\n @Method()\n async show(panel: string) {\n if (this.activeTab && this.activeTab.panel === panel) return;\n\n const tab = this.getAllActiveTabs.find((el) => el.panel === panel);\n\n if (tab) this.setActiveTab(tab);\n }\n\n // Internal Methods\n\n get getAllActiveTabs() {\n return this.getAllTabs.filter((el: any) => !el.disabled);\n }\n\n get getAllTabs() {\n return getDirectChildren<HTMLNanoTabElement>(this.host, 'nano-tab');\n }\n\n get getAllPanels() {\n return getDirectChildren<HTMLNanoTabContentElement>(\n this.host,\n 'nano-tab-content'\n );\n }\n\n get getActiveTab() {\n return this.getAllActiveTabs.find((el) => el.active);\n }\n\n private updateScrollControls = () => {\n if (this.noScrollControls) {\n this.hasScrollControls = false;\n } else {\n this.hasScrollControls =\n ['top'].includes(this.placement) &&\n this.nav.scrollWidth > this.nav.clientWidth &&\n this.nav.scrollWidth > this.tabs.clientWidth;\n }\n };\n\n private setActiveTab(tab: HTMLNanoTabElement, emitEvents = true) {\n if (\n tab &&\n tab !== this.activeTab &&\n !tab.disabled &&\n this.getAllActiveTabs.includes(tab)\n ) {\n const previousTab = this.activeTab;\n this.activeTab = tab;\n this.tab = tab.panel;\n\n // Sync tabs and panels\n this.getAllActiveTabs.map((el) => (el.active = el === this.activeTab));\n this.getAllPanels.map((el) => {\n if (el.name === this.activeTab.panel) {\n el.active = true;\n this.activePanel = el;\n } else el.active = false;\n el.removeAttribute('animation-dir');\n });\n // active tab can be changed on init - this won't be ready. No big thing\n this.syncActiveTabIndicator();\n if (['top'].includes(this.placement)) {\n scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n }\n\n // Emit events\n if (emitEvents) {\n if (previousTab) {\n this.nanoTabHide.emit({ name: previousTab.panel });\n }\n\n this.nanoTabShow.emit({ name: this.activeTab.panel });\n }\n }\n }\n\n private setAriaLabels() {\n const tabs = this.getAllActiveTabs;\n const panels = this.getAllPanels;\n\n // Link each tab with its corresponding panel\n tabs.map((tab) => {\n const panel = 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 syncActiveTabIndicator() {\n this.getAllTabs.forEach((tab) =>\n tab.setAttribute(\n 'direction',\n this.placement === 'top' ? 'horizontal' : 'vertical'\n )\n );\n\n const tab = this.getActiveTab;\n const width = tab.shadowRoot.querySelector('.nanotab')?.clientWidth \|\| 0;\n const height = tab.clientHeight;\n const offset = getOffset(tab, this.tabs);\n const offsetTop = offset.top + this.nav.scrollTop;\n const offsetLeft = offset.left;\n\n switch (this.placement) {\n case 'top':\n this.activeTabIndicator.style.width = `${width}px`;\n this.activeTabIndicator.style.height = null;\n this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;\n break;\n\n case 'start':\n this.activeTabIndicator.style.width = null;\n this.activeTabIndicator.style.height = `${height}px`;\n this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;\n break;\n }\n }\n\n private getNavWidth() {\n if (!this.nav) return 0;\n const computedStyle = getComputedStyle(this.nav);\n let clientWidth = this.nav.clientWidth;\n return (clientWidth -=\n parseFloat(computedStyle.paddingLeft) +\n parseFloat(computedStyle.paddingRight));\n }\n\n // Event handlers\n\n @Listen('nanoTabClose')\n handleTabClose(ev: CustomEvent & { target: HTMLNanoTabElement }) {\n let tabIndex = this.getAllActiveTabs.indexOf(ev.target);\n const tab = ev.target;\n if (tabIndex < 0) return;\n\n const panel = this.getAllPanels.find((el) => el.name === tab.panel);\n if (!panel) return;\n\n ev.stopImmediatePropagation();\n\n const closeEv = this.nanoTabWillClose.emit({ name: tab.panel });\n if (closeEv.defaultPrevented) return;\n\n // Show the previous tab if the tab is currently active\n if (tab.active) {\n tabIndex = tabIndex === 0 ? 1 : tabIndex - 1;\n const prevTab = this.getAllActiveTabs[tabIndex]?.panel;\n if (prevTab) this.host.show(prevTab);\n }\n\n tab.remove();\n panel.remove();\n this.nanoTabClose.emit({ name: tab.panel });\n }\n\n private handleClick = (event: MouseEvent) => {\n const target = event.target as HTMLElement;\n const tab = target.closest('nano-tab');\n\n if (tab) this.setActiveTab(tab);\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Activate a tab\n if (['Enter', ' '].includes(event.key)) {\n const target = event.target as HTMLElement;\n const tab = target.closest('nano-tab');\n\n if (tab) {\n this.setActiveTab(tab);\n event.preventDefault();\n }\n }\n\n // Move focus left or right\n if (\n [\n 'ArrowLeft',\n 'ArrowRight',\n 'ArrowUp',\n 'ArrowDown',\n 'Home',\n 'End',\n ].includes(event.key)\n ) {\n const activeEl = document.activeElement as any;\n\n if (activeEl && activeEl.tagName.toLowerCase() === 'nano-tab') {\n const tabs = this.getAllActiveTabs;\n let index = tabs.indexOf(activeEl);\n\n if (event.key === 'Home') {\n index = 0;\n } else if (event.key === 'End') {\n index = tabs.length - 1;\n } else if (\n (this.isRtl && event.key === 'ArrowRight') \|\|\n (!this.isRtl && event.key === 'ArrowLeft')\n ) {\n index = Math.max(0, index - 1);\n } else if (\n (this.isRtl && event.key === 'ArrowLeft') \|\|\n (!this.isRtl && event.key === 'ArrowRight')\n ) {\n index = Math.min(tabs.length - 1, index + 1);\n }\n tabs[index].setFocus();\n\n if (['top'].includes(this.placement)) {\n scrollIntoView(tabs[index], this.nav, 'horizontal', 'center');\n }\n event.preventDefault();\n }\n }\n };\n\n private handleTabScroll = () => {\n if (!this.hasScrollControls) {\n this.hideControlLeft = this.hideControlRight = true;\n return;\n }\n let endRight = this.isRtl\n ? this.nav.scrollLeft === 0\n : this.nav.scrollWidth - this.nav.scrollLeft === this.nav.clientWidth;\n let endLeft = this.isRtl\n ? this.nav.scrollWidth + this.nav.scrollLeft === this.nav.clientWidth\n : this.nav.scrollLeft === 0;\n\n if (endLeft) {\n this.hideControlLeft = true;\n this.hideControlRight = false;\n } else if (endRight) {\n this.hideControlLeft = false;\n this.hideControlRight = true;\n } else {\n this.hideControlRight = false;\n this.hideControlLeft = false;\n }\n };\n\n private handleBtnClick = (goRight: boolean = false) => {\n const navWidth = this.getNavWidth();\n let leftAmt;\n if (goRight) leftAmt = this.nav.scrollLeft + navWidth - 20;\n else leftAmt = this.nav.scrollLeft - navWidth + 20;\n\n try {\n this.nav.scroll({\n left: leftAmt,\n behavior: 'smooth',\n });\n } catch (e) {\n this.nav.scrollLeft = leftAmt;\n }\n };\n\n private handleTouchStart = (event: TouchEvent) => {\n if (this.disableSwipe) return;\n const touch = event.changedTouches[0];\n this.initialTouchX = touch.pageX;\n this.initialTouchY = touch.pageY;\n };\n\n private handleTouchEnd = (event: TouchEvent) => {\n if (this.disableSwipe) return;\n const touch = event.changedTouches[0];\n const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled\n const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\n const threshold = 70;\n\n var xDiff = this.initialTouchX - touch.clientX;\n var yDiff = this.initialTouchY - touch.clientY;\n\n const isHorizontalSwipe =\n Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;\n\n const tabs = this.getAllActiveTabs;\n const currIndex = tabs.findIndex((el) => el.active);\n\n if (isHorizontalSwipe) {\n const toGo =\n (distX < 0 && this.placement === 'top') \|\|\n (distX > 0 && this.placement !== 'top')\n ? 1\n : -1;\n\n if (tabs[currIndex + toGo]) {\n this.setActiveTab(tabs[currIndex + toGo]);\n\n if (Math.abs(xDiff) > Math.abs(yDiff)) {\n if (xDiff > 0) this.activePanel.setAttribute('animation-dir', 'left');\n else this.activePanel.setAttribute('animation-dir', 'right');\n }\n }\n }\n this.initialTouchX = null;\n this.initialTouchY = null;\n };\n\n private handleContentSlotChange = () => {\n setTimeout(() => {\n this.setAriaLabels();\n this.setActiveTab(this.getActiveTab \|\| this.getAllActiveTabs[0], false);\n });\n };\n\n private handleTabSlotChange = (ev: Event & { target: HTMLSlotElement }) => {\n setTimeout(() => {\n this.setAriaLabels();\n this.handleTabScroll();\n this.setActiveTab(this.getActiveTab \|\| this.getAllActiveTabs[0], false);\n this.updateScrollControls();\n }, 500);\n\n /* maintain a weakmap of mutation observers to maintain tab / indicator position on all changes. */\n const nodes = ev.target.assignedNodes({ flatten: true });\n nodes.forEach((node) => {\n if (!this.mutationObservers.get(node)) {\n const mo = new MutationObserver(() => {\n setTimeout(() => {\n this.syncActiveTabIndicator();\n this.handleTabScroll();\n this.updateScrollControls();\n }, 500);\n });\n this.mutationObservers.set(node, mo);\n\n mo.observe(node, {\n characterData: true,\n childList: true,\n subtree: true,\n });\n }\n });\n };\n\n // Stencil hooks\n\n componentDidLoad() {\n // Initial IO - watching for all content to be loaded\n const observer = new IntersectionObserver((entries, observer) => {\n if (entries[0].intersectionRatio > 0) {\n this.setAriaLabels();\n this.setActiveTab(this.getActiveTab \|\| this.getAllActiveTabs[0], false);\n\n if (this.storeId)\n ComponentStore.init(this, ['tab'], this.storeMethod, this.storeId);\n observer.unobserve(entries[0].target);\n }\n });\n observer.observe(this.host);\n focusVisible.observe(this.tabGroup);\n\n if (this.leftBtn) {\n focusVisible.observe(this.leftBtn);\n focusVisible.observe(this.rightBtn);\n }\n\n this.resizeObserver = new ResizeObserver(() => {\n setTimeout(() => {\n this.updateScrollControls();\n this.syncActiveTabIndicator();\n scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n }, 500);\n });\n this.resizeObserver.observe(this.nav);\n\n raf(() => this.updateScrollControls());\n }\n\n connectedCallback() {\n this.isRtl =\n this.host.dir === 'rtl' \|\|\n (this.host.ownerDocument as Document).dir === 'rtl';\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.tabGroup);\n if (this.leftBtn) {\n focusVisible.unobserve(this.leftBtn);\n focusVisible.unobserve(this.rightBtn);\n }\n if (this.resizeObserver) this.resizeObserver.unobserve(this.nav);\n }\n\n render() {\n this.isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n return (\n <Host\n class={{ ...createColorClasses(this.color), legacy: this.isLegacy }}\n dir={this.isRtl ? 'rtl' : null}\n >\n <div\n part=\"base\"\n ref={(el) => (this.tabGroup = el)}\n class={{\n 'nano-tab-group': true,\n 'nano-tab-group--top': this.placement === 'top',\n 'nano-tab-group--start': this.placement === 'start',\n 'nano-tab-group--has-scroll-controls': this.hasScrollControls,\n 'nano-tab-group--has-scroll-controls-left': !this.hideControlLeft,\n 'nano-tab-group--has-scroll-controls-right': !this.hideControlRight,\n }}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <div class=\"nano-tab-group__nav-container\" part=\"nav\">\n {this.placement === 'top' && (\n <button\n class={{\n 'nano-tab-group__scroll-button': true,\n 'nano-tab-group__scroll-button--left': true,\n }}\n ref={(btn) => (this.leftBtn = btn)}\n onClick={() => this.handleBtnClick(false)}\n >\n <nano-icon name=\"light/chevron-left\"></nano-icon>\n </button>\n )}\n <div\n ref={(el) => (this.nav = el)}\n class=\"nano-tab-group__nav\"\n onScroll={this.handleTabScroll}\n >\n <div\n ref={(el) => (this.tabs = el)}\n part=\"tabs\"\n class=\"nano-tab-group__tabs\"\n role=\"tablist\"\n >\n <div\n ref={(el) => (this.activeTabIndicator = el)}\n part=\"active-tab-indicator\"\n class=\"nano-tab-group__active-tab-indicator\"\n />\n <slot name=\"tabs\" onSlotchange={this.handleTabSlotChange} />\n </div>\n </div>\n {this.placement === 'top' && (\n <button\n class={{\n 'nano-tab-group__scroll-button': true,\n 'nano-tab-group__scroll-button--right': true,\n }}\n ref={(btn) => (this.rightBtn = btn)}\n onClick={() => this.handleBtnClick(true)}\n >\n <nano-icon name=\"light/chevron-right\"></nano-icon>\n </button>\n )}\n </div>\n <slot name=\"tab-content-header\" />\n <div\n part=\"body\"\n class=\"nano-tab-group__body\"\n onTouchStart={this.handleTouchStart}\n onTouchEnd={this.handleTouchEnd}\n >\n <slot onSlotchange={this.handleContentSlotChange} />\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/esm-es5/nano-tooltip.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 var __awaiter=this&&this.__awaiter||function(t,o,e,i){function n(t){return t instanceof e?t:new e((function(o){o(t)}))}return new(e||(e=Promise))((function(e,r){function a(t){try{p(i.next(t))}catch(o){r(o)}}function s(t){try{p(i["throw"](t))}catch(o){r(o)}}function p(t){t.done?e(t.value):n(t.value).then(a,s)}p((i=i.apply(t,o||[])).next())}))};var __generator=this&&this.__generator||function(t,o){var e={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},i,n,r,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(t){return function(o){return p([t,o])}}function p(a){if(i)throw new TypeError("Generator is already executing.");while(e)try{if(i=1,n&&(r=a[0]&2?n["return"]:a[0]?n["throw"]||((r=n["return"])&&r.call(n),0):n.next)&&!(r=r.call(n,a[1])).done)return r;if(n=0,r)a=[a[0]&2,r.value];switch(a[0]){case 0:case 1:r=a;break;case 4:e.label++;return{value:a[1],done:false};case 5:e.label++;n=a[1];a=[0];continue;case 7:a=e.ops.pop();e.trys.pop();continue;default:if(!(r=e.trys,r=r.length>0&&r[r.length-1])&&(a[0]===6||a[0]===2)){e=0;continue}if(a[0]===3&&(!r||a[1]>r[0]&&a[1]<r[3])){e.label=a[1];break}if(a[0]===6&&e.label<r[1]){e.label=r[1];r=a;break}if(r&&e.label<r[2]){e.label=r[2];e.ops.push(a);break}if(r[2])e.ops.pop();e.trys.pop();continue}a=o.call(t,e)}catch(s){a=[6,s];n=0}finally{i=r=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(t,o){for(var e=0,i=o.length,n=t.length;e<i;e++,n++)t[n]=o[e];return t};
 /*!
  * Web Components for Nanopore digital Web Apps
- */import{r as registerInstance,c as createEvent,h,e as Host,g as getElement}from"./index-5f8d16e7.js";import{P as Popover}from"./popover-d9dc8e13.js";var tooltipCss=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--max-width:20rem;--hide-delay:0s;--hide-duration:0.125s;--hide-timing-function:ease;--show-delay:0.125s;--show-duration:0.125s;--show-timing-function:ease;display:contents}.tooltip{max-width:var(--max-width);border-radius:var(--nano-tooltip-border-radius, var(--nano-border-radius-small, 2px));background-color:black;font-size:var(--nano-fontsize-small, 0.875rem);line-height:1.5;color:white;opacity:0;padding:var(--nano-tooltip-padding, var(--nano-spacing-xsmall, 4px) var(--nano-spacing-small, 8px));-webkit-transform:translateY(10px) translateZ(0);transform:translateY(10px) translateZ(0);-webkit-transform-origin:bottom;transform-origin:bottom;-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:opacity, transform;transition-property:opacity, transform, -webkit-transform;-webkit-transition-delay:var(--hide-delay);transition-delay:var(--hide-delay);-webkit-transition-duration:var(--hide-duration);transition-duration:var(--hide-duration);-webkit-transition-timing-function:var(--hide-timing-function);transition-timing-function:var(--hide-timing-function);white-space:normal}.tooltip-arrow{content:"";position:absolute;width:0;height:0;color:black;-webkit-transition:0.2s ease transform;transition:0.2s ease transform}.tooltip-positioner{position:absolute;z-index:var(--nano-layer-index-tooltip, 1000);pointer-events:none}.tooltip-positioner[data-popper-placement^=top] .tooltip{-webkit-transform-origin:bottom;transform-origin:bottom;-webkit-transform:translateY(-10px) translateZ(0);transform:translateY(-10px) translateZ(0)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{-webkit-transform-origin:top;transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{-webkit-transform-origin:right;transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{-webkit-transform-origin:left;transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;-webkit-transform:none;transform:none;-webkit-transition-delay:var(--show-delay);transition-delay:var(--show-delay);-webkit-transition-duration:var(--show-duration);transition-duration:var(--show-duration);-webkit-transition-timing-function:var(--show-timing-function);transition-timing-function:var(--show-timing-function)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip-arrow{bottom:100%;left:calc(50% - 5px);border-bottom:5px solid;border-left:5px solid transparent;border-right:5px solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip-arrow{left:5px}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip-arrow{right:5px;left:auto}.tooltip-positioner[data-popper-placement^=top] .tooltip-arrow{top:100%;left:calc(50% - 5px);border-top:5px solid;border-left:5px solid transparent;border-right:5px solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip-arrow{left:5px}.tooltip-positioner[data-popper-placement=top-end] .tooltip-arrow{right:5px;left:auto}.tooltip-positioner[data-popper-placement^=left] .tooltip-arrow{top:calc(50% - 5px);left:100%;border-left:5px solid;border-top:5px solid transparent;border-bottom:5px solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip-arrow{top:5px}.tooltip-positioner[data-popper-placement=left-end] .tooltip-arrow{top:auto;bottom:5px}.tooltip-positioner[data-popper-placement^=right] .tooltip-arrow{top:calc(50% - 5px);right:100%;border-right:5px solid;border-top:5px solid transparent;border-bottom:5px solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip-arrow{top:5px}.tooltip-positioner[data-popper-placement=right-end] .tooltip-arrow{top:auto;bottom:5px}';var id=0;var Tooltip=function(){function t(t){var o=this;registerInstance(this,t);this.nanoShow=createEvent(this,"nanoShow",7);this.nanoAfterShow=createEvent(this,"nanoAfterShow",7);this.nanoHide=createEvent(this,"nanoHide",7);this.nanoAfterHide=createEvent(this,"nanoAfterHide",7);this.componentId="tooltip-"+ ++id;this.isVisible=false;this.content="";this.placement="top";this.disabled=false;this.distance=10;this.open=false;this.skidding=0;this.trigger="hover focus";this.handleBlur=function(){if(o.hasTrigger("focus")){o.hide()}};this.handleClick=function(){if(o.hasTrigger("click")){o.open?o.hide():o.show()}};this.handleFocus=function(){if(o.hasTrigger("focus")){o.show()}};this.handleKeyDown=function(t){if(o.open&&t.key==="Escape"){t.stopPropagation();o.hide()}};this.handleMouseOver=function(){if(o.hasTrigger("hover")){o.show()}};this.handleMouseOut=function(){if(o.hasTrigger("hover")){o.hide()}};this.handleSlotChange=function(){o.target=o.getTarget()};this.handleTTSlotChange=function(){var t=o.host.querySelector('[id="'+o.componentId+'"]')||o.host.shadowRoot.getElementById(o.componentId);Array.from(o.host.querySelectorAll('[slot="content"]')).filter((function(o){return o!==t})).forEach((function(o){t.appendChild(o)}))}}Object.defineProperty(t.prototype,"target",{get:function(){return this._target},set:function(t){if(t!==this._target&&this._target){this._target.removeAttribute("aria-describedby")}t.setAttribute("aria-describedby",this.componentId);this._target=t},enumerable:false,configurable:true});t.prototype.handleOpenChange=function(){this.open?this.show():this.hide()};t.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(o){if(this.isVisible){return[2]}t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;return[2]}this.isVisible=true;this.open=true;this.popover.show();return[2]}))}))};t.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(o){if(!this.isVisible){return[2]}t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return[2]}this.isVisible=false;this.open=false;this.popover.hide();return[2]}))}))};t.prototype.getTarget=function(){var t=__spreadArray([],Array.from(this.host.children)).find((function(t){return t.tagName.toLowerCase()!=="style"&&t.getAttribute("slot")!=="content"}));if(!t){throw new Error("Invalid tooltip target: no child element was found.")}return t};t.prototype.hasTrigger=function(t){var o=this.trigger.split(" ");return o.includes(t)};t.prototype.syncOptions=function(){var t=this;this.popover.setOptions({placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.tooltip,onAfterHide:function(){return t.nanoAfterHide.emit()},onAfterShow:function(){return t.nanoAfterShow.emit()}})};t.prototype.componentDidLoad=function(){this.target=this.getTarget();this.popover=new Popover(this.target,this.tooltipPositioner);this.syncOptions();var t=this.host.shadowRoot.getElementById(this.componentId);t.slot="content";this.host.appendChild(t);this.handleTTSlotChange();this.tooltipPositioner.hidden=!this.open;if(this.open){this.show()}};t.prototype.componentDidUpdate=function(){this.syncOptions()};t.prototype.disconnectedCallback=function(){this.popover.destroy()};t.prototype.render=function(){var t=this;return h(Host,{onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onMouseOut:this.handleMouseOut,onBlur:this.handleBlur,onFocus:this.handleFocus,onClick:this.handleClick},h("slot",{onSlotchange:this.handleSlotChange}),!this.disabled&&h("div",{ref:function(o){return t.tooltipPositioner=o},class:"tooltip-positioner"},h("div",{part:"base",ref:function(o){return t.tooltip=o},class:{tooltip:true,"tooltip--open":this.open},role:"tooltip","aria-hidden":this.open?"false":"true"},h("slot",{name:"content",onSlotchange:this.handleTTSlotChange},h("div",{id:this.componentId},this.content)),h("div",{class:"tooltip-arrow","data-popper-arrow":true}))))};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{open:["handleOpenChange"]}},enumerable:false,configurable:true});return t}();Tooltip.style=tooltipCss;export{Tooltip as nano_tooltip};
+ */import{r as registerInstance,c as createEvent,h,e as Host,g as getElement}from"./index-5f8d16e7.js";import{P as Popover}from"./popover-46b5193d.js";import"./index-bf53664b.js";var tooltipCss=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--max-width:20rem;--hide-delay:0s;--hide-duration:0.125s;--hide-timing-function:ease;--show-delay:0.125s;--show-duration:0.125s;--show-timing-function:ease;display:contents}.tooltip{max-width:var(--max-width);border-radius:var(--nano-tooltip-border-radius, var(--nano-border-radius-small, 2px));background-color:black;font-size:var(--nano-fontsize-small, 0.875rem);line-height:1.5;color:white;opacity:0;padding:var(--nano-tooltip-padding, var(--nano-spacing-xsmall, 4px) var(--nano-spacing-small, 8px));-webkit-transform:translateY(10px) translateZ(0);transform:translateY(10px) translateZ(0);-webkit-transform-origin:bottom;transform-origin:bottom;-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:opacity, transform;transition-property:opacity, transform, -webkit-transform;-webkit-transition-delay:var(--hide-delay);transition-delay:var(--hide-delay);-webkit-transition-duration:var(--hide-duration);transition-duration:var(--hide-duration);-webkit-transition-timing-function:var(--hide-timing-function);transition-timing-function:var(--hide-timing-function);white-space:normal}.tooltip-arrow{content:"";position:absolute;width:0;height:0;color:black;-webkit-transition:0.2s ease transform;transition:0.2s ease transform}.tooltip-positioner{position:absolute;z-index:var(--nano-layer-index-tooltip, 1000);pointer-events:none}.tooltip-positioner[data-popper-placement^=top] .tooltip{-webkit-transform-origin:bottom;transform-origin:bottom;-webkit-transform:translateY(-10px) translateZ(0);transform:translateY(-10px) translateZ(0)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{-webkit-transform-origin:top;transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{-webkit-transform-origin:right;transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{-webkit-transform-origin:left;transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;-webkit-transform:none;transform:none;-webkit-transition-delay:var(--show-delay);transition-delay:var(--show-delay);-webkit-transition-duration:var(--show-duration);transition-duration:var(--show-duration);-webkit-transition-timing-function:var(--show-timing-function);transition-timing-function:var(--show-timing-function)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip-arrow{bottom:100%;left:calc(50% - 5px);border-bottom:5px solid;border-left:5px solid transparent;border-right:5px solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip-arrow{left:5px}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip-arrow{right:5px;left:auto}.tooltip-positioner[data-popper-placement^=top] .tooltip-arrow{top:100%;left:calc(50% - 5px);border-top:5px solid;border-left:5px solid transparent;border-right:5px solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip-arrow{left:5px}.tooltip-positioner[data-popper-placement=top-end] .tooltip-arrow{right:5px;left:auto}.tooltip-positioner[data-popper-placement^=left] .tooltip-arrow{top:calc(50% - 5px);left:100%;border-left:5px solid;border-top:5px solid transparent;border-bottom:5px solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip-arrow{top:5px}.tooltip-positioner[data-popper-placement=left-end] .tooltip-arrow{top:auto;bottom:5px}.tooltip-positioner[data-popper-placement^=right] .tooltip-arrow{top:calc(50% - 5px);right:100%;border-right:5px solid;border-top:5px solid transparent;border-bottom:5px solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip-arrow{top:5px}.tooltip-positioner[data-popper-placement=right-end] .tooltip-arrow{top:auto;bottom:5px}';var id=0;var Tooltip=function(){function t(t){var o=this;registerInstance(this,t);this.nanoShow=createEvent(this,"nanoShow",7);this.nanoAfterShow=createEvent(this,"nanoAfterShow",7);this.nanoHide=createEvent(this,"nanoHide",7);this.nanoAfterHide=createEvent(this,"nanoAfterHide",7);this.componentId="tooltip-"+ ++id;this.isVisible=false;this.content="";this.placement="top";this.disabled=false;this.distance=10;this.open=false;this.skidding=0;this.trigger="hover focus";this.handleBlur=function(){if(o.hasTrigger("focus")){o.hide()}};this.handleClick=function(){if(o.hasTrigger("click")){o.open?o.hide():o.show()}};this.handleFocus=function(){if(o.hasTrigger("focus")){o.show()}};this.handleKeyDown=function(t){if(o.open&&t.key==="Escape"){t.stopPropagation();o.hide()}};this.handleMouseOver=function(){if(o.hasTrigger("hover")){o.show()}};this.handleMouseOut=function(){if(o.hasTrigger("hover")){o.hide()}};this.handleSlotChange=function(){o.target=o.getTarget()};this.handleTTSlotChange=function(){var t=o.host.querySelector('[id="'+o.componentId+'"]')||o.host.shadowRoot.getElementById(o.componentId);Array.from(o.host.querySelectorAll('[slot="content"]')).filter((function(o){return o!==t})).forEach((function(o){t.appendChild(o)}))}}Object.defineProperty(t.prototype,"target",{get:function(){return this._target},set:function(t){if(t!==this._target&&this._target){this._target.removeAttribute("aria-describedby")}t.setAttribute("aria-describedby",this.componentId);this._target=t},enumerable:false,configurable:true});t.prototype.handleOpenChange=function(){this.open?this.show():this.hide()};t.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(o){if(this.isVisible){return[2]}t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;return[2]}this.isVisible=true;this.open=true;this.popover.show();return[2]}))}))};t.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(o){if(!this.isVisible){return[2]}t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return[2]}this.isVisible=false;this.open=false;this.popover.hide();return[2]}))}))};t.prototype.getTarget=function(){var t=__spreadArray([],Array.from(this.host.children)).find((function(t){return t.tagName.toLowerCase()!=="style"&&t.getAttribute("slot")!=="content"}));if(!t){throw new Error("Invalid tooltip target: no child element was found.")}return t};t.prototype.hasTrigger=function(t){var o=this.trigger.split(" ");return o.includes(t)};t.prototype.syncOptions=function(){var t=this;this.popover.setOptions({placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.tooltip,onAfterHide:function(){return t.nanoAfterHide.emit()},onAfterShow:function(){return t.nanoAfterShow.emit()}})};t.prototype.componentDidLoad=function(){this.target=this.getTarget();this.popover=new Popover(this.target,this.tooltipPositioner);this.syncOptions();var t=this.host.shadowRoot.getElementById(this.componentId);t.slot="content";this.host.appendChild(t);this.handleTTSlotChange();this.tooltipPositioner.hidden=!this.open;if(this.open){this.show()}};t.prototype.componentDidUpdate=function(){this.syncOptions()};t.prototype.disconnectedCallback=function(){this.popover.destroy()};t.prototype.render=function(){var t=this;return h(Host,{onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onMouseOut:this.handleMouseOut,onBlur:this.handleBlur,onFocus:this.handleFocus,onClick:this.handleClick},h("slot",{onSlotchange:this.handleSlotChange}),!this.disabled&&h("div",{ref:function(o){return t.tooltipPositioner=o},class:"tooltip-positioner"},h("div",{part:"base",ref:function(o){return t.tooltip=o},class:{tooltip:true,"tooltip--open":this.open},role:"tooltip","aria-hidden":this.open?"false":"true"},h("slot",{name:"content",onSlotchange:this.handleTTSlotChange},h("div",{id:this.componentId},this.content)),h("div",{class:"tooltip-arrow","data-popper-arrow":true}))))};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{open:["handleOpenChange"]}},enumerable:false,configurable:true});return t}();Tooltip.style=tooltipCss;export{Tooltip as nano_tooltip};
 //# sourceMappingURL=nano-tooltip.entry.js.map

package/dist/esm-es5/nano-tooltip.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["src/components/tooltip/tooltip.scss?tag=nano-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"names":["tooltipCss","id","Tooltip","class_1","hostRef","_this","this","componentId","isVisible","content","placement","disabled","distance","open","skidding","trigger","handleBlur","hasTrigger","hide","handleClick","show","handleFocus","handleKeyDown","event","key","stopPropagation","handleMouseOver","handleMouseOut","handleSlotChange","target","getTarget","handleTTSlotChange","contentDiv","host","querySelector","shadowRoot","getElementById","Array","from","querySelectorAll","filter","elm","forEach","appendChild","Object","defineProperty","prototype","_target","newTarget","removeAttribute","setAttribute","handleOpenChange","slShow","nanoShow","emit","defaultPrevented","popover","slHide","nanoHide","__spreadArray","children","find","el","tagName","toLowerCase","getAttribute","Error","triggerType","triggers","split","includes","syncOptions","setOptions","transitionElement","tooltip","onAfterHide","nanoAfterHide","onAfterShow","nanoAfterShow","componentDidLoad","Popover","tooltipPositioner","ele","slot","hidden","componentDidUpdate","disconnectedCallback","destroy","render","h","Host","onKeyDown","onMouseOver","onMouseOut","onBlur","onFocus","onClick","onSlotchange","ref","class","part","tooltip--open","role","aria-hidden","name","data-popper-arrow"],"mappings":";;;uJAAA,IAAMA,WAAa,4zHCanB,IAAIC,GAAK,MAYIC,QAAO,WALpB,SAAAC,EAAAC,GAAA,IAAAC,EAAAC,sOAMUA,KAAAC,YAAc,cAAaN,GAC3BK,KAAAE,UAAY,MAoBZF,KAAAG,QAAU,GAMVH,KAAAI,UAYS,MAGTJ,KAAAK,SAAW,MAGXL,KAAAM,SAAW,GAGqBN,KAAAO,KAAO,MAGvCP,KAAAQ,SAAW,EAOXR,KAAAS,QAAkB,cAgGlBT,KAAAU,WAAa,WACnB,GAAIX,EAAKY,WAAW,SAAU,CAC5BZ,EAAKa,SAIDZ,KAAAa,YAAc,WACpB,GAAId,EAAKY,WAAW,SAAU,CAC5BZ,EAAKQ,KAAOR,EAAKa,OAASb,EAAKe,SAI3Bd,KAAAe,YAAc,WACpB,GAAIhB,EAAKY,WAAW,SAAU,CAC5BZ,EAAKe,SAIDd,KAAAgB,cAAgB,SAACC,GAEvB,GAAIlB,EAAKQ,MAAQU,EAAMC,MAAQ,SAAU,CACvCD,EAAME,kBACNpB,EAAKa,SAIDZ,KAAAoB,gBAAkB,WACxB,GAAIrB,EAAKY,WAAW,SAAU,CAC5BZ,EAAKe,SAIDd,KAAAqB,eAAiB,WACvB,GAAItB,EAAKY,WAAW,SAAU,CAC5BZ,EAAKa,SAIDZ,KAAAsB,iBAAmB,WACzBvB,EAAKwB,OAASxB,EAAKyB,aAGbxB,KAAAyB,mBAAqB,WAC3B,IAAMC,EACJ3B,EAAK4B,KAAKC,cAAc,QAAQ7B,EAAKE,YAAW,OAChDF,EAAK4B,KAAKE,WAAWC,eAAe/B,EAAKE,aAC3C8B,MAAMC,KAAKjC,EAAK4B,KAAKM,iBAAiB,qBACnCC,QAAO,SAACC,GAAQ,OAAAA,IAAQT,KACxBU,SAAQ,SAACD,GACRT,EAAWW,YAAYF,OApM7BG,OAAAC,eAAY1C,EAAA2C,UAAA,SAAM,KAAlB,WACE,OAAOxC,KAAKyC,aAEd,SAAmBC,GACjB,GAAIA,IAAc1C,KAAKyC,SAAWzC,KAAKyC,QAAS,CAC9CzC,KAAKyC,QAAQE,gBAAgB,oBAE/BD,EAAUE,aAAa,mBAAoB5C,KAAKC,aAChDD,KAAKyC,QAAUC,wCA8CjB7C,EAAA2C,UAAAK,iBAAA,WACE7C,KAAKO,KAAOP,KAAKc,OAASd,KAAKY,QAqB3Bf,EAAA2C,UAAA1B,KAAN,sGAEE,GAAId,KAAKE,UAAW,CAClB,MAAA,CAAA,GAGI4C,EAAS9C,KAAK+C,SAASC,OAC7B,GAAIF,EAAOG,iBAAkB,CAC3BjD,KAAKO,KAAO,MACZ,MAAA,CAAA,GAGFP,KAAKE,UAAY,KACjBF,KAAKO,KAAO,KACZP,KAAKkD,QAAQpC,wBAKTjB,EAAA2C,UAAA5B,KAAN,sGAEE,IAAKZ,KAAKE,UAAW,CACnB,MAAA,CAAA,GAGIiD,EAASnD,KAAKoD,SAASJ,OAC7B,GAAIG,EAAOF,iBAAkB,CAC3BjD,KAAKO,KAAO,KACZ,MAAA,CAAA,GAGFP,KAAKE,UAAY,MACjBF,KAAKO,KAAO,MACZP,KAAKkD,QAAQtC,wBAKPf,EAAA2C,UAAAhB,UAAA,WAEN,IAAMD,EAAS8B,cAAA,GAAItB,MAAMC,KAAKhC,KAAK2B,KAAK2B,WAAWC,MACjD,SAACC,GACC,OAAAA,EAAGC,QAAQC,gBAAkB,SAC7BF,EAAGG,aAAa,UAAY,aAGhC,IAAKpC,EAAQ,CACX,MAAM,IAAIqC,MAAM,uDAGlB,OAAOrC,GAGD1B,EAAA2C,UAAA7B,WAAA,SAAWkD,GACjB,IAAMC,EAAW9D,KAAKS,QAAQsD,MAAM,KACpC,OAAOD,EAASE,SAASH,IAGnBhE,EAAA2C,UAAAyB,YAAA,WAAA,IAAAlE,EAAAC,KACNA,KAAKkD,QAAQgB,WAAW,CACtB9D,UAAWJ,KAAKI,UAChBE,SAAUN,KAAKM,SACfE,SAAUR,KAAKQ,SACf2D,kBAAmBnE,KAAKoE,QACxBC,YAAa,WAAM,OAAAtE,EAAKuE,cAActB,QACtCuB,YAAa,WAAM,OAAAxE,EAAKyE,cAAcxB,WA6D1CnD,EAAA2C,UAAAiC,iBAAA,WACEzE,KAAKuB,OAASvB,KAAKwB,YACnBxB,KAAKkD,QAAU,IAAIwB,QAAQ1E,KAAKuB,OAAQvB,KAAK2E,mBAC7C3E,KAAKiE,cAEL,IAAMW,EAAM5E,KAAK2B,KAAKE,WAAWC,eAAe9B,KAAKC,aACrD2E,EAAIC,KAAO,UACX7E,KAAK2B,KAAKU,YAAYuC,GACtB5E,KAAKyB,qBAGLzB,KAAK2E,kBAAkBG,QAAU9E,KAAKO,KACtC,GAAIP,KAAKO,KAAM,CACbP,KAAKc,SAITjB,EAAA2C,UAAAuC,mBAAA,WACE/E,KAAKiE,eAGPpE,EAAA2C,UAAAwC,qBAAA,WACEhF,KAAKkD,QAAQ+B,WAGfpF,EAAA2C,UAAA0C,OAAA,WAAA,IAAAnF,EAAAC,KACE,OACEmF,EAACC,KAAI,CACHC,UAAWrF,KAAKgB,cAChBsE,YAAatF,KAAKoB,gBAClBmE,WAAYvF,KAAKqB,eACjBmE,OAAQxF,KAAKU,WACb+E,QAASzF,KAAKe,YACd2E,QAAS1F,KAAKa,aAEdsE,EAAA,OAAA,CAAMQ,aAAc3F,KAAKsB,oBAEvBtB,KAAKK,UACL8E,EAAA,MAAA,CACES,IAAK,SAACpC,GAAE,OAAMzD,EAAK4E,kBAAoBnB,GACvCqC,MAAM,sBAENV,EAAA,MAAA,CACEW,KAAK,OACLF,IAAK,SAACpC,GAAE,OAAMzD,EAAKqE,QAAUZ,GAC7BqC,MAAO,CACLzB,QAAS,KACT2B,gBAAiB/F,KAAKO,MAExByF,KAAK,UAASC,cACDjG,KAAKO,KAAO,QAAU,QAEnC4E,EAAA,OAAA,CAAMe,KAAK,UAAUP,aAAc3F,KAAKyB,oBACtC0D,EAAA,MAAA,CAAKxF,GAAIK,KAAKC,aAAcD,KAAKG,UAEnCgF,EAAA,MAAA,CAAKU,MAAM,gBAAeM,oBAAA,sQAzQpB","sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/*\n @prop --hide-delay: The amount of time to wait before hiding the tooltip.\n * @prop --hide-duration: The amount of time the hide transition takes to complete.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --show-delay: The amount of time to wait before showing the tooltip.\n * @prop --show-duration: The amount of time the show transition takes to complete.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n /\n:host {\n --max-width: 20rem;\n --hide-delay: 0s;\n --hide-duration: 0.125s;\n --hide-timing-function: ease;\n --show-delay: 0.125s;\n --show-duration: 0.125s;\n --show-timing-function: ease;\n\n / autoprefixer: ignore next /\n display: contents;\n}\n\n.tooltip {\n $self: &;\n\n max-width: var(--max-width);\n border-radius: #{$tooltip-border-radius};\n background-color: black;\n font-size: #{$tooltip-fontsize};\n line-height: 1.5;\n color: white;\n opacity: 0;\n padding: #{$tooltip-padding};\n transform: translateY(10px) translateZ(0);\n transform-origin: bottom;\n transition-property: opacity, transform;\n transition-delay: var(--hide-delay);\n transition-duration: var(--hide-duration);\n transition-timing-function: var(--hide-timing-function);\n white-space: normal;\n\n &-arrow {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n color: black;\n transition: 0.2s ease transform;\n }\n\n &-positioner {\n position: absolute;\n z-index: #{$layer-index-tooltip};\n pointer-events: none;\n\n &[data-popper-placement^='top'] #{$self} {\n transform-origin: bottom;\n transform: translateY(-10px) translateZ(0);\n }\n\n &[data-popper-placement^='bottom'] #{$self} {\n transform-origin: top;\n }\n\n &[data-popper-placement^='left'] #{$self} {\n transform-origin: right;\n }\n\n &[data-popper-placement^='right'] #{$self} {\n transform-origin: left;\n }\n\n &.popover-visible #{$self} {\n opacity: 1;\n transform: none;\n transition-delay: var(--show-delay);\n transition-duration: var(--show-duration);\n transition-timing-function: var(--show-timing-function);\n }\n\n // Arrow + bottom\n &[data-popper-placement^='bottom'] #{$self}-arrow {\n bottom: 100%;\n left: calc(50% - #{$tooltip-arrow-size});\n border-bottom: #{$tooltip-arrow-size} solid;\n border-left: #{$tooltip-arrow-size} solid transparent;\n border-right: #{$tooltip-arrow-size} solid transparent;\n }\n\n &[data-popper-placement='bottom-start'] #{$self}-arrow {\n left: #{$tooltip-arrow-offset};\n }\n\n &[data-popper-placement='bottom-end'] #{$self}-arrow {\n right: #{$tooltip-arrow-offset};\n left: auto;\n }\n\n // Arrow + top\n &[data-popper-placement^='top'] #{$self}-arrow {\n top: 100%;\n left: calc(50% - #{$tooltip-arrow-size});\n border-top: #{$tooltip-arrow-size} solid;\n border-left: #{$tooltip-arrow-size} solid transparent;\n border-right: #{$tooltip-arrow-size} solid transparent;\n }\n\n &[data-popper-placement='top-start'] #{$self}-arrow {\n left: #{$tooltip-arrow-offset};\n }\n\n &[data-popper-placement='top-end'] #{$self}-arrow {\n right: #{$tooltip-arrow-offset};\n left: auto;\n }\n\n // Arrow + left\n &[data-popper-placement^='left'] #{$self}-arrow {\n top: calc(50% - #{$tooltip-arrow-size});\n left: 100%;\n border-left: #{$tooltip-arrow-size} solid;\n border-top: #{$tooltip-arrow-size} solid transparent;\n border-bottom: #{$tooltip-arrow-size} solid transparent;\n }\n\n &[data-popper-placement='left-start'] #{$self}-arrow {\n top: #{$tooltip-arrow-offset};\n }\n\n &[data-popper-placement='left-end'] #{$self}-arrow {\n top: auto;\n bottom: #{$tooltip-arrow-offset};\n }\n\n // Arrow + right\n &[data-popper-placement^='right'] #{$self}-arrow {\n top: calc(50% - #{$tooltip-arrow-size});\n right: 100%;\n border-right: #{$tooltip-arrow-size} solid;\n border-top: #{$tooltip-arrow-size} solid transparent;\n border-bottom: #{$tooltip-arrow-size} solid transparent;\n }\n\n &[data-popper-placement='right-start'] #{$self}-arrow {\n top: #{$tooltip-arrow-offset};\n }\n\n &[data-popper-placement='right-end'] #{$self}-arrow {\n top: auto;\n bottom: #{$tooltip-arrow-offset};\n }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Method,\n Prop,\n Watch,\n h,\n} from '@stencil/core';\nimport Popover from '../../utils/popover';\n\nlet id = 0;\n\n/\n Tooltips display additional information based on a specific action.\n * @slot - The tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n /\n@Component({\n tag: 'nano-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true,\n})\nexport class Tooltip {\n private componentId = `tooltip-${++id}`;\n private isVisible = false;\n private popover: Popover;\n private tooltipPositioner: HTMLElement;\n private tooltip: any;\n\n private _target: HTMLElement;\n private get target() {\n return this._target;\n }\n private set target(newTarget) {\n if (newTarget !== this._target && this._target) {\n this._target.removeAttribute('aria-describedby');\n }\n newTarget.setAttribute('aria-describedby', this.componentId);\n this._target = newTarget;\n }\n\n @Element() host: HTMLNanoTooltipElement;\n\n /* The tooltip's content. Alternatively, you can use the content slot. /\n @Prop() content = '';\n\n /\n The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n * inside of the viewport.\n /\n @Prop() placement:\n \| 'top'\n \| 'top-start'\n \| 'top-end'\n \| 'right'\n \| 'right-start'\n \| 'right-end'\n \| 'bottom'\n \| 'bottom-start'\n \| 'bottom-end'\n \| 'left'\n \| 'left-start'\n \| 'left-end' = 'top';\n\n /* Set to true to disable the tooltip so it won't show when triggered. /\n @Prop() disabled = false;\n\n /* The distance in pixels from which to offset the tooltip away from its target. /\n @Prop() distance = 10;\n\n /* Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /* The distance in pixels from which to offset the tooltip along its target. /\n @Prop() skidding = 0;\n\n /\n Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n /\n @Prop() trigger: string = 'hover focus';\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n // Events\n\n /* Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. /\n @Event() nanoShow: EventEmitter;\n\n /* Emitted after the tooltip has shown and all transitions are complete. /\n @Event() nanoAfterShow: EventEmitter;\n\n /* Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. /\n @Event() nanoHide: EventEmitter;\n\n /* Emitted after the tooltip has hidden and all transitions are complete. /\n @Event() nanoAfterHide: EventEmitter;\n\n // Public methods\n\n /* Shows the tooltip. /\n @Method()\n async show() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (this.isVisible) {\n return;\n }\n\n const slShow = this.nanoShow.emit();\n if (slShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.isVisible = true;\n this.open = true;\n this.popover.show();\n }\n\n /* Hides the tooltip. */\n @Method()\n async hide() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (!this.isVisible) {\n return;\n }\n\n const slHide = this.nanoHide.emit();\n if (slHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.isVisible = false;\n this.open = false;\n this.popover.hide();\n }\n\n // Private methods\n\n private getTarget() {\n // Get the first child that isn't a <style> or content slot\n const target = [...Array.from(this.host.children)].find(\n (el) =>\n el.tagName.toLowerCase() !== 'style' &&\n el.getAttribute('slot') !== 'content'\n ) as HTMLElement;\n\n if (!target) {\n throw new Error('Invalid tooltip target: no child element was found.');\n }\n\n return target;\n }\n\n private hasTrigger(triggerType: string) {\n const triggers = this.trigger.split(' ');\n return triggers.includes(triggerType);\n }\n\n private syncOptions() {\n this.popover.setOptions({\n placement: this.placement,\n distance: this.distance,\n skidding: this.skidding,\n transitionElement: this.tooltip,\n onAfterHide: () => this.nanoAfterHide.emit(),\n onAfterShow: () => this.nanoAfterShow.emit(),\n });\n }\n\n // Event Handlers\n\n private handleBlur = () => {\n if (this.hasTrigger('focus')) {\n this.hide();\n }\n };\n\n private handleClick = () => {\n if (this.hasTrigger('click')) {\n this.open ? this.hide() : this.show();\n }\n };\n\n private handleFocus = () => {\n if (this.hasTrigger('focus')) {\n this.show();\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Pressing escape when the target element has focus should dismiss the tooltip\n if (this.open && event.key === 'Escape') {\n event.stopPropagation();\n this.hide();\n }\n };\n\n private handleMouseOver = () => {\n if (this.hasTrigger('hover')) {\n this.show();\n }\n };\n\n private handleMouseOut = () => {\n if (this.hasTrigger('hover')) {\n this.hide();\n }\n };\n\n private handleSlotChange = () => {\n this.target = this.getTarget();\n };\n\n private handleTTSlotChange = () => {\n const contentDiv =\n this.host.querySelector(`[id=\"${this.componentId}\"]`) \|\|\n this.host.shadowRoot.getElementById(this.componentId);\n Array.from(this.host.querySelectorAll('[slot=\"content\"]'))\n .filter((elm) => elm !== contentDiv)\n .forEach((elm) => {\n contentDiv.appendChild(elm);\n });\n };\n\n // Stencil hooks\n\n componentDidLoad() {\n this.target = this.getTarget();\n this.popover = new Popover(this.target, this.tooltipPositioner);\n this.syncOptions();\n\n const ele = this.host.shadowRoot.getElementById(this.componentId);\n ele.slot = 'content';\n this.host.appendChild(ele);\n this.handleTTSlotChange();\n\n // Show on init if open\n this.tooltipPositioner.hidden = !this.open;\n if (this.open) {\n this.show();\n }\n }\n\n componentDidUpdate() {\n this.syncOptions();\n }\n\n disconnectedCallback() {\n this.popover.destroy();\n }\n\n render() {\n return (\n <Host\n onKeyDown={this.handleKeyDown}\n onMouseOver={this.handleMouseOver}\n onMouseOut={this.handleMouseOut}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onClick={this.handleClick}\n >\n <slot onSlotchange={this.handleSlotChange} />\n\n {!this.disabled && (\n <div\n ref={(el) => (this.tooltipPositioner = el)}\n class=\"tooltip-positioner\"\n >\n <div\n part=\"base\"\n ref={(el) => (this.tooltip = el)}\n class={{\n tooltip: true,\n 'tooltip--open': this.open,\n }}\n role=\"tooltip\"\n aria-hidden={this.open ? 'false' : 'true'}\n >\n <slot name=\"content\" onSlotchange={this.handleTTSlotChange}>\n <div id={this.componentId}>{this.content}</div>\n </slot>\n <div class=\"tooltip-arrow\" data-popper-arrow></div>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"sources":["src/components/tooltip/tooltip.scss?tag=nano-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"names":["tooltipCss","id","Tooltip","class_1","hostRef","_this","this","componentId","isVisible","content","placement","disabled","distance","open","skidding","trigger","handleBlur","hasTrigger","hide","handleClick","show","handleFocus","handleKeyDown","event","key","stopPropagation","handleMouseOver","handleMouseOut","handleSlotChange","target","getTarget","handleTTSlotChange","contentDiv","host","querySelector","shadowRoot","getElementById","Array","from","querySelectorAll","filter","elm","forEach","appendChild","Object","defineProperty","prototype","_target","newTarget","removeAttribute","setAttribute","handleOpenChange","slShow","nanoShow","emit","defaultPrevented","popover","slHide","nanoHide","__spreadArray","children","find","el","tagName","toLowerCase","getAttribute","Error","triggerType","triggers","split","includes","syncOptions","setOptions","transitionElement","tooltip","onAfterHide","nanoAfterHide","onAfterShow","nanoAfterShow","componentDidLoad","Popover","tooltipPositioner","ele","slot","hidden","componentDidUpdate","disconnectedCallback","destroy","render","h","Host","onKeyDown","onMouseOver","onMouseOut","onBlur","onFocus","onClick","onSlotchange","ref","class","part","tooltip--open","role","aria-hidden","name","data-popper-arrow"],"mappings":";;;mLAAA,IAAMA,WAAa,4zHCanB,IAAIC,GAAK,MAYIC,QAAO,WALpB,SAAAC,EAAAC,GAAA,IAAAC,EAAAC,sOAMUA,KAAAC,YAAc,cAAaN,GAC3BK,KAAAE,UAAY,MAoBZF,KAAAG,QAAU,GAMVH,KAAAI,UAYS,MAGTJ,KAAAK,SAAW,MAGXL,KAAAM,SAAW,GAGqBN,KAAAO,KAAO,MAGvCP,KAAAQ,SAAW,EAOXR,KAAAS,QAAkB,cAgGlBT,KAAAU,WAAa,WACnB,GAAIX,EAAKY,WAAW,SAAU,CAC5BZ,EAAKa,SAIDZ,KAAAa,YAAc,WACpB,GAAId,EAAKY,WAAW,SAAU,CAC5BZ,EAAKQ,KAAOR,EAAKa,OAASb,EAAKe,SAI3Bd,KAAAe,YAAc,WACpB,GAAIhB,EAAKY,WAAW,SAAU,CAC5BZ,EAAKe,SAIDd,KAAAgB,cAAgB,SAACC,GAEvB,GAAIlB,EAAKQ,MAAQU,EAAMC,MAAQ,SAAU,CACvCD,EAAME,kBACNpB,EAAKa,SAIDZ,KAAAoB,gBAAkB,WACxB,GAAIrB,EAAKY,WAAW,SAAU,CAC5BZ,EAAKe,SAIDd,KAAAqB,eAAiB,WACvB,GAAItB,EAAKY,WAAW,SAAU,CAC5BZ,EAAKa,SAIDZ,KAAAsB,iBAAmB,WACzBvB,EAAKwB,OAASxB,EAAKyB,aAGbxB,KAAAyB,mBAAqB,WAC3B,IAAMC,EACJ3B,EAAK4B,KAAKC,cAAc,QAAQ7B,EAAKE,YAAW,OAChDF,EAAK4B,KAAKE,WAAWC,eAAe/B,EAAKE,aAC3C8B,MAAMC,KAAKjC,EAAK4B,KAAKM,iBAAiB,qBACnCC,QAAO,SAACC,GAAQ,OAAAA,IAAQT,KACxBU,SAAQ,SAACD,GACRT,EAAWW,YAAYF,OApM7BG,OAAAC,eAAY1C,EAAA2C,UAAA,SAAM,KAAlB,WACE,OAAOxC,KAAKyC,aAEd,SAAmBC,GACjB,GAAIA,IAAc1C,KAAKyC,SAAWzC,KAAKyC,QAAS,CAC9CzC,KAAKyC,QAAQE,gBAAgB,oBAE/BD,EAAUE,aAAa,mBAAoB5C,KAAKC,aAChDD,KAAKyC,QAAUC,wCA8CjB7C,EAAA2C,UAAAK,iBAAA,WACE7C,KAAKO,KAAOP,KAAKc,OAASd,KAAKY,QAqB3Bf,EAAA2C,UAAA1B,KAAN,sGAEE,GAAId,KAAKE,UAAW,CAClB,MAAA,CAAA,GAGI4C,EAAS9C,KAAK+C,SAASC,OAC7B,GAAIF,EAAOG,iBAAkB,CAC3BjD,KAAKO,KAAO,MACZ,MAAA,CAAA,GAGFP,KAAKE,UAAY,KACjBF,KAAKO,KAAO,KACZP,KAAKkD,QAAQpC,wBAKTjB,EAAA2C,UAAA5B,KAAN,sGAEE,IAAKZ,KAAKE,UAAW,CACnB,MAAA,CAAA,GAGIiD,EAASnD,KAAKoD,SAASJ,OAC7B,GAAIG,EAAOF,iBAAkB,CAC3BjD,KAAKO,KAAO,KACZ,MAAA,CAAA,GAGFP,KAAKE,UAAY,MACjBF,KAAKO,KAAO,MACZP,KAAKkD,QAAQtC,wBAKPf,EAAA2C,UAAAhB,UAAA,WAEN,IAAMD,EAAS8B,cAAA,GAAItB,MAAMC,KAAKhC,KAAK2B,KAAK2B,WAAWC,MACjD,SAACC,GACC,OAAAA,EAAGC,QAAQC,gBAAkB,SAC7BF,EAAGG,aAAa,UAAY,aAGhC,IAAKpC,EAAQ,CACX,MAAM,IAAIqC,MAAM,uDAGlB,OAAOrC,GAGD1B,EAAA2C,UAAA7B,WAAA,SAAWkD,GACjB,IAAMC,EAAW9D,KAAKS,QAAQsD,MAAM,KACpC,OAAOD,EAASE,SAASH,IAGnBhE,EAAA2C,UAAAyB,YAAA,WAAA,IAAAlE,EAAAC,KACNA,KAAKkD,QAAQgB,WAAW,CACtB9D,UAAWJ,KAAKI,UAChBE,SAAUN,KAAKM,SACfE,SAAUR,KAAKQ,SACf2D,kBAAmBnE,KAAKoE,QACxBC,YAAa,WAAM,OAAAtE,EAAKuE,cAActB,QACtCuB,YAAa,WAAM,OAAAxE,EAAKyE,cAAcxB,WA6D1CnD,EAAA2C,UAAAiC,iBAAA,WACEzE,KAAKuB,OAASvB,KAAKwB,YACnBxB,KAAKkD,QAAU,IAAIwB,QAAQ1E,KAAKuB,OAAQvB,KAAK2E,mBAC7C3E,KAAKiE,cAEL,IAAMW,EAAM5E,KAAK2B,KAAKE,WAAWC,eAAe9B,KAAKC,aACrD2E,EAAIC,KAAO,UACX7E,KAAK2B,KAAKU,YAAYuC,GACtB5E,KAAKyB,qBAGLzB,KAAK2E,kBAAkBG,QAAU9E,KAAKO,KACtC,GAAIP,KAAKO,KAAM,CACbP,KAAKc,SAITjB,EAAA2C,UAAAuC,mBAAA,WACE/E,KAAKiE,eAGPpE,EAAA2C,UAAAwC,qBAAA,WACEhF,KAAKkD,QAAQ+B,WAGfpF,EAAA2C,UAAA0C,OAAA,WAAA,IAAAnF,EAAAC,KACE,OACEmF,EAACC,KAAI,CACHC,UAAWrF,KAAKgB,cAChBsE,YAAatF,KAAKoB,gBAClBmE,WAAYvF,KAAKqB,eACjBmE,OAAQxF,KAAKU,WACb+E,QAASzF,KAAKe,YACd2E,QAAS1F,KAAKa,aAEdsE,EAAA,OAAA,CAAMQ,aAAc3F,KAAKsB,oBAEvBtB,KAAKK,UACL8E,EAAA,MAAA,CACES,IAAK,SAACpC,GAAE,OAAMzD,EAAK4E,kBAAoBnB,GACvCqC,MAAM,sBAENV,EAAA,MAAA,CACEW,KAAK,OACLF,IAAK,SAACpC,GAAE,OAAMzD,EAAKqE,QAAUZ,GAC7BqC,MAAO,CACLzB,QAAS,KACT2B,gBAAiB/F,KAAKO,MAExByF,KAAK,UAASC,cACDjG,KAAKO,KAAO,QAAU,QAEnC4E,EAAA,OAAA,CAAMe,KAAK,UAAUP,aAAc3F,KAAKyB,oBACtC0D,EAAA,MAAA,CAAKxF,GAAIK,KAAKC,aAAcD,KAAKG,UAEnCgF,EAAA,MAAA,CAAKU,MAAM,gBAAeM,oBAAA,sQAzQpB","sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/*\n @prop --hide-delay: The amount of time to wait before hiding the tooltip.\n * @prop --hide-duration: The amount of time the hide transition takes to complete.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --show-delay: The amount of time to wait before showing the tooltip.\n * @prop --show-duration: The amount of time the show transition takes to complete.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n /\n:host {\n --max-width: 20rem;\n --hide-delay: 0s;\n --hide-duration: 0.125s;\n --hide-timing-function: ease;\n --show-delay: 0.125s;\n --show-duration: 0.125s;\n --show-timing-function: ease;\n\n / autoprefixer: ignore next /\n display: contents;\n}\n\n.tooltip {\n $self: &;\n\n max-width: var(--max-width);\n border-radius: #{$tooltip-border-radius};\n background-color: black;\n font-size: #{$tooltip-fontsize};\n line-height: 1.5;\n color: white;\n opacity: 0;\n padding: #{$tooltip-padding};\n transform: translateY(10px) translateZ(0);\n transform-origin: bottom;\n transition-property: opacity, transform;\n transition-delay: var(--hide-delay);\n transition-duration: var(--hide-duration);\n transition-timing-function: var(--hide-timing-function);\n white-space: normal;\n\n &-arrow {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n color: black;\n transition: 0.2s ease transform;\n }\n\n &-positioner {\n position: absolute;\n z-index: #{$layer-index-tooltip};\n pointer-events: none;\n\n &[data-popper-placement^='top'] #{$self} {\n transform-origin: bottom;\n transform: translateY(-10px) translateZ(0);\n }\n\n &[data-popper-placement^='bottom'] #{$self} {\n transform-origin: top;\n }\n\n &[data-popper-placement^='left'] #{$self} {\n transform-origin: right;\n }\n\n &[data-popper-placement^='right'] #{$self} {\n transform-origin: left;\n }\n\n &.popover-visible #{$self} {\n opacity: 1;\n transform: none;\n transition-delay: var(--show-delay);\n transition-duration: var(--show-duration);\n transition-timing-function: var(--show-timing-function);\n }\n\n // Arrow + bottom\n &[data-popper-placement^='bottom'] #{$self}-arrow {\n bottom: 100%;\n left: calc(50% - #{$tooltip-arrow-size});\n border-bottom: #{$tooltip-arrow-size} solid;\n border-left: #{$tooltip-arrow-size} solid transparent;\n border-right: #{$tooltip-arrow-size} solid transparent;\n }\n\n &[data-popper-placement='bottom-start'] #{$self}-arrow {\n left: #{$tooltip-arrow-offset};\n }\n\n &[data-popper-placement='bottom-end'] #{$self}-arrow {\n right: #{$tooltip-arrow-offset};\n left: auto;\n }\n\n // Arrow + top\n &[data-popper-placement^='top'] #{$self}-arrow {\n top: 100%;\n left: calc(50% - #{$tooltip-arrow-size});\n border-top: #{$tooltip-arrow-size} solid;\n border-left: #{$tooltip-arrow-size} solid transparent;\n border-right: #{$tooltip-arrow-size} solid transparent;\n }\n\n &[data-popper-placement='top-start'] #{$self}-arrow {\n left: #{$tooltip-arrow-offset};\n }\n\n &[data-popper-placement='top-end'] #{$self}-arrow {\n right: #{$tooltip-arrow-offset};\n left: auto;\n }\n\n // Arrow + left\n &[data-popper-placement^='left'] #{$self}-arrow {\n top: calc(50% - #{$tooltip-arrow-size});\n left: 100%;\n border-left: #{$tooltip-arrow-size} solid;\n border-top: #{$tooltip-arrow-size} solid transparent;\n border-bottom: #{$tooltip-arrow-size} solid transparent;\n }\n\n &[data-popper-placement='left-start'] #{$self}-arrow {\n top: #{$tooltip-arrow-offset};\n }\n\n &[data-popper-placement='left-end'] #{$self}-arrow {\n top: auto;\n bottom: #{$tooltip-arrow-offset};\n }\n\n // Arrow + right\n &[data-popper-placement^='right'] #{$self}-arrow {\n top: calc(50% - #{$tooltip-arrow-size});\n right: 100%;\n border-right: #{$tooltip-arrow-size} solid;\n border-top: #{$tooltip-arrow-size} solid transparent;\n border-bottom: #{$tooltip-arrow-size} solid transparent;\n }\n\n &[data-popper-placement='right-start'] #{$self}-arrow {\n top: #{$tooltip-arrow-offset};\n }\n\n &[data-popper-placement='right-end'] #{$self}-arrow {\n top: auto;\n bottom: #{$tooltip-arrow-offset};\n }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Method,\n Prop,\n Watch,\n h,\n} from '@stencil/core';\nimport Popover from '../../utils/popover';\n\nlet id = 0;\n\n/\n Tooltips display additional information based on a specific action.\n * @slot - The tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n /\n@Component({\n tag: 'nano-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true,\n})\nexport class Tooltip {\n private componentId = `tooltip-${++id}`;\n private isVisible = false;\n private popover: Popover;\n private tooltipPositioner: HTMLElement;\n private tooltip: any;\n\n private _target: HTMLElement;\n private get target() {\n return this._target;\n }\n private set target(newTarget) {\n if (newTarget !== this._target && this._target) {\n this._target.removeAttribute('aria-describedby');\n }\n newTarget.setAttribute('aria-describedby', this.componentId);\n this._target = newTarget;\n }\n\n @Element() host: HTMLNanoTooltipElement;\n\n /* The tooltip's content. Alternatively, you can use the content slot. /\n @Prop() content = '';\n\n /\n The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n * inside of the viewport.\n /\n @Prop() placement:\n \| 'top'\n \| 'top-start'\n \| 'top-end'\n \| 'right'\n \| 'right-start'\n \| 'right-end'\n \| 'bottom'\n \| 'bottom-start'\n \| 'bottom-end'\n \| 'left'\n \| 'left-start'\n \| 'left-end' = 'top';\n\n /* Set to true to disable the tooltip so it won't show when triggered. /\n @Prop() disabled = false;\n\n /* The distance in pixels from which to offset the tooltip away from its target. /\n @Prop() distance = 10;\n\n /* Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /* The distance in pixels from which to offset the tooltip along its target. /\n @Prop() skidding = 0;\n\n /\n Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n /\n @Prop() trigger: string = 'hover focus';\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n // Events\n\n /* Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. /\n @Event() nanoShow: EventEmitter;\n\n /* Emitted after the tooltip has shown and all transitions are complete. /\n @Event() nanoAfterShow: EventEmitter;\n\n /* Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. /\n @Event() nanoHide: EventEmitter;\n\n /* Emitted after the tooltip has hidden and all transitions are complete. /\n @Event() nanoAfterHide: EventEmitter;\n\n // Public methods\n\n /* Shows the tooltip. /\n @Method()\n async show() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (this.isVisible) {\n return;\n }\n\n const slShow = this.nanoShow.emit();\n if (slShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.isVisible = true;\n this.open = true;\n this.popover.show();\n }\n\n /* Hides the tooltip. */\n @Method()\n async hide() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (!this.isVisible) {\n return;\n }\n\n const slHide = this.nanoHide.emit();\n if (slHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.isVisible = false;\n this.open = false;\n this.popover.hide();\n }\n\n // Private methods\n\n private getTarget() {\n // Get the first child that isn't a <style> or content slot\n const target = [...Array.from(this.host.children)].find(\n (el) =>\n el.tagName.toLowerCase() !== 'style' &&\n el.getAttribute('slot') !== 'content'\n ) as HTMLElement;\n\n if (!target) {\n throw new Error('Invalid tooltip target: no child element was found.');\n }\n\n return target;\n }\n\n private hasTrigger(triggerType: string) {\n const triggers = this.trigger.split(' ');\n return triggers.includes(triggerType);\n }\n\n private syncOptions() {\n this.popover.setOptions({\n placement: this.placement,\n distance: this.distance,\n skidding: this.skidding,\n transitionElement: this.tooltip,\n onAfterHide: () => this.nanoAfterHide.emit(),\n onAfterShow: () => this.nanoAfterShow.emit(),\n });\n }\n\n // Event Handlers\n\n private handleBlur = () => {\n if (this.hasTrigger('focus')) {\n this.hide();\n }\n };\n\n private handleClick = () => {\n if (this.hasTrigger('click')) {\n this.open ? this.hide() : this.show();\n }\n };\n\n private handleFocus = () => {\n if (this.hasTrigger('focus')) {\n this.show();\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Pressing escape when the target element has focus should dismiss the tooltip\n if (this.open && event.key === 'Escape') {\n event.stopPropagation();\n this.hide();\n }\n };\n\n private handleMouseOver = () => {\n if (this.hasTrigger('hover')) {\n this.show();\n }\n };\n\n private handleMouseOut = () => {\n if (this.hasTrigger('hover')) {\n this.hide();\n }\n };\n\n private handleSlotChange = () => {\n this.target = this.getTarget();\n };\n\n private handleTTSlotChange = () => {\n const contentDiv =\n this.host.querySelector(`[id=\"${this.componentId}\"]`) \|\|\n this.host.shadowRoot.getElementById(this.componentId);\n Array.from(this.host.querySelectorAll('[slot=\"content\"]'))\n .filter((elm) => elm !== contentDiv)\n .forEach((elm) => {\n contentDiv.appendChild(elm);\n });\n };\n\n // Stencil hooks\n\n componentDidLoad() {\n this.target = this.getTarget();\n this.popover = new Popover(this.target, this.tooltipPositioner);\n this.syncOptions();\n\n const ele = this.host.shadowRoot.getElementById(this.componentId);\n ele.slot = 'content';\n this.host.appendChild(ele);\n this.handleTTSlotChange();\n\n // Show on init if open\n this.tooltipPositioner.hidden = !this.open;\n if (this.open) {\n this.show();\n }\n }\n\n componentDidUpdate() {\n this.syncOptions();\n }\n\n disconnectedCallback() {\n this.popover.destroy();\n }\n\n render() {\n return (\n <Host\n onKeyDown={this.handleKeyDown}\n onMouseOver={this.handleMouseOver}\n onMouseOut={this.handleMouseOut}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onClick={this.handleClick}\n >\n <slot onSlotchange={this.handleSlotChange} />\n\n {!this.disabled && (\n <div\n ref={(el) => (this.tooltipPositioner = el)}\n class=\"tooltip-positioner\"\n >\n <div\n part=\"base\"\n ref={(el) => (this.tooltip = el)}\n class={{\n tooltip: true,\n 'tooltip--open': this.open,\n }}\n role=\"tooltip\"\n aria-hidden={this.open ? 'false' : 'true'}\n >\n <slot name=\"content\" onSlotchange={this.handleTTSlotChange}>\n <div id={this.componentId}>{this.content}</div>\n </slot>\n <div class=\"tooltip-arrow\" data-popper-arrow></div>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/esm-es5/popover-46b5193d.js ADDED Viewed

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as raf}from"./index-bf53664b.js";var top="top";var bottom="bottom";var right="right";var left="left";var auto="auto";var basePlacements=[top,bottom,right,left];var start="start";var end="end";var clippingParents="clippingParents";var viewport="viewport";var popper="popper";var reference="reference";var variationPlacements=basePlacements.reduce((function(e,t){return e.concat([t+"-"+start,t+"-"+end])}),[]);var placements=[].concat(basePlacements,[auto]).reduce((function(e,t){return e.concat([t,t+"-"+start,t+"-"+end])}),[]);var beforeRead="beforeRead";var read="read";var afterRead="afterRead";var beforeMain="beforeMain";var main="main";var afterMain="afterMain";var beforeWrite="beforeWrite";var write="write";var afterWrite="afterWrite";var modifierPhases=[beforeRead,read,afterRead,beforeMain,main,afterMain,beforeWrite,write,afterWrite];function getNodeName(e){return e?(e.nodeName||"").toLowerCase():null}function getWindow(e){if(e==null){return window}if(e.toString()!=="[object Window]"){var t=e.ownerDocument;return t?t.defaultView||window:window}return e}function isElement(e){var t=getWindow(e).Element;return e instanceof t||e instanceof Element}function isHTMLElement(e){var t=getWindow(e).HTMLElement;return e instanceof t||e instanceof HTMLElement}function isShadowRoot(e){if(typeof ShadowRoot==="undefined"){return false}var t=getWindow(e).ShadowRoot;return e instanceof t||e instanceof ShadowRoot}function applyStyles(e){var t=e.state;Object.keys(t.elements).forEach((function(e){var r=t.styles[e]||{};var n=t.attributes[e]||{};var i=t.elements[e];if(!isHTMLElement(i)||!getNodeName(i)){return}Object.assign(i.style,r);Object.keys(n).forEach((function(e){var t=n[e];if(t===false){i.removeAttribute(e)}else{i.setAttribute(e,t===true?"":t)}}))}))}function effect$2(e){var t=e.state;var r={popper:{position:t.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};Object.assign(t.elements.popper.style,r.popper);t.styles=r;if(t.elements.arrow){Object.assign(t.elements.arrow.style,r.arrow)}return function(){Object.keys(t.elements).forEach((function(e){var n=t.elements[e];var i=t.attributes[e]||{};var o=Object.keys(t.styles.hasOwnProperty(e)?t.styles[e]:r[e]);var a=o.reduce((function(e,t){e[t]="";return e}),{});if(!isHTMLElement(n)||!getNodeName(n)){return}Object.assign(n.style,a);Object.keys(i).forEach((function(e){n.removeAttribute(e)}))}))}}var applyStyles$1={name:"applyStyles",enabled:true,phase:"write",fn:applyStyles,effect:effect$2,requires:["computeStyles"]};function getBasePlacement(e){return e.split("-")[0]}var max=Math.max;var min=Math.min;var round=Math.round;function getBoundingClientRect(e,t){if(t===void 0){t=false}var r=e.getBoundingClientRect();var n=1;var i=1;if(isHTMLElement(e)&&t){var o=e.offsetHeight;var a=e.offsetWidth;if(a>0){n=round(r.width)/a||1}if(o>0){i=round(r.height)/o||1}}return{width:r.width/n,height:r.height/i,top:r.top/i,right:r.right/n,bottom:r.bottom/i,left:r.left/n,x:r.left/n,y:r.top/i}}function getLayoutRect(e){var t=getBoundingClientRect(e);var r=e.offsetWidth;var n=e.offsetHeight;if(Math.abs(t.width-r)<=1){r=t.width}if(Math.abs(t.height-n)<=1){n=t.height}return{x:e.offsetLeft,y:e.offsetTop,width:r,height:n}}function contains(e,t){var r=t.getRootNode&&t.getRootNode();if(e.contains(t)){return true}else if(r&&isShadowRoot(r)){var n=t;do{if(n&&e.isSameNode(n)){return true}n=n.parentNode||n.host}while(n)}return false}function getComputedStyle(e){return getWindow(e).getComputedStyle(e)}function isTableElement(e){return["table","td","th"].indexOf(getNodeName(e))>=0}function getDocumentElement(e){return((isElement(e)?e.ownerDocument:e.document)||window.document).documentElement}function getParentNode(e){if(getNodeName(e)==="html"){return e}return e.assignedSlot||e.parentNode||(isShadowRoot(e)?e.host:null)||getDocumentElement(e)}function getTrueOffsetParent(e){if(!isHTMLElement(e)||getComputedStyle(e).position==="fixed"){return null}return e.offsetParent}function getContainingBlock(e){var t=navigator.userAgent.toLowerCase().indexOf("firefox")!==-1;var r=navigator.userAgent.indexOf("Trident")!==-1;if(r&&isHTMLElement(e)){var n=getComputedStyle(e);if(n.position==="fixed"){return null}}var i=getParentNode(e);if(isShadowRoot(i)){i=i.host}while(isHTMLElement(i)&&["html","body"].indexOf(getNodeName(i))<0){var o=getComputedStyle(i);if(o.transform!=="none"||o.perspective!=="none"||o.contain==="paint"||["transform","perspective"].indexOf(o.willChange)!==-1||t&&o.willChange==="filter"||t&&o.filter&&o.filter!=="none"){return i}else{i=i.parentNode}}return null}function getOffsetParent(e){var t=getWindow(e);var r=getTrueOffsetParent(e);while(r&&isTableElement(r)&&getComputedStyle(r).position==="static"){r=getTrueOffsetParent(r)}if(r&&(getNodeName(r)==="html"||getNodeName(r)==="body"&&getComputedStyle(r).position==="static")){return t}return r||getContainingBlock(e)||t}function getMainAxisFromPlacement(e){return["top","bottom"].indexOf(e)>=0?"x":"y"}function within(e,t,r){return max(e,min(t,r))}function withinMaxClamp(e,t,r){var n=within(e,t,r);return n>r?r:n}function getFreshSideObject(){return{top:0,right:0,bottom:0,left:0}}function mergePaddingObject(e){return Object.assign({},getFreshSideObject(),e)}function expandToHashMap(e,t){return t.reduce((function(t,r){t[r]=e;return t}),{})}var toPaddingObject=function e(t,r){t=typeof t==="function"?t(Object.assign({},r.rects,{placement:r.placement})):t;return mergePaddingObject(typeof t!=="number"?t:expandToHashMap(t,basePlacements))};function arrow(e){var t;var r=e.state,n=e.name,i=e.options;var o=r.elements.arrow;var a=r.modifiersData.popperOffsets;var s=getBasePlacement(r.placement);var f=getMainAxisFromPlacement(s);var l=[left,right].indexOf(s)>=0;var p=l?"height":"width";if(!o||!a){return}var c=toPaddingObject(i.padding,r);var d=getLayoutRect(o);var u=f==="y"?top:left;var v=f==="y"?bottom:right;var m=r.rects.reference[p]+r.rects.reference[f]-a[f]-r.rects.popper[p];var g=a[f]-r.rects.reference[f];var h=getOffsetParent(o);var y=h?f==="y"?h.clientHeight||0:h.clientWidth||0:0;var b=m/2-g/2;var w=c[u];var O=y-d[p]-c[v];var x=y/2-d[p]/2+b;var P=within(w,x,O);var E=f;r.modifiersData[n]=(t={},t[E]=P,t.centerOffset=P-x,t)}function effect$1(e){var t=e.state,r=e.options;var n=r.element,i=n===void 0?"[data-popper-arrow]":n;if(i==null){return}if(typeof i==="string"){i=t.elements.popper.querySelector(i);if(!i){return}}if(!contains(t.elements.popper,i)){return}t.elements.arrow=i}var arrow$1={name:"arrow",enabled:true,phase:"main",fn:arrow,effect:effect$1,requires:["popperOffsets"],requiresIfExists:["preventOverflow"]};function getVariation(e){return e.split("-")[1]}var unsetSides={top:"auto",right:"auto",bottom:"auto",left:"auto"};function roundOffsetsByDPR(e){var t=e.x,r=e.y;var n=window;var i=n.devicePixelRatio||1;return{x:round(t*i)/i||0,y:round(r*i)/i||0}}function mapToStyles(e){var t;var r=e.popper,n=e.popperRect,i=e.placement,o=e.variation,a=e.offsets,s=e.position,f=e.gpuAcceleration,l=e.adaptive,p=e.roundOffsets,c=e.isFixed;var d=a.x,u=d===void 0?0:d,v=a.y,m=v===void 0?0:v;var g=typeof p==="function"?p({x:u,y:m}):{x:u,y:m};u=g.x;m=g.y;var h=a.hasOwnProperty("x");var y=a.hasOwnProperty("y");var b=left;var w=top;var O=window;if(l){var x=getOffsetParent(r);var P="clientHeight";var E="clientWidth";if(x===getWindow(r)){x=getDocumentElement(r);if(getComputedStyle(x).position!=="static"&&s==="absolute"){P="scrollHeight";E="scrollWidth"}}x=x;if(i===top||(i===left||i===right)&&o===end){w=bottom;var S=c&&x===O&&O.visualViewport?O.visualViewport.height:x[P];m-=S-n.height;m*=f?1:-1}if(i===left||(i===top||i===bottom)&&o===end){b=right;var T=c&&x===O&&O.visualViewport?O.visualViewport.width:x[E];u-=T-n.width;u*=f?1:-1}}var C=Object.assign({position:s},l&&unsetSides);var L=p===true?roundOffsetsByDPR({x:u,y:m}):{x:u,y:m};u=L.x;m=L.y;if(f){var M;return Object.assign({},C,(M={},M[w]=y?"0":"",M[b]=h?"0":"",M.transform=(O.devicePixelRatio||1)<=1?"translate("+u+"px, "+m+"px)":"translate3d("+u+"px, "+m+"px, 0)",M))}return Object.assign({},C,(t={},t[w]=y?m+"px":"",t[b]=h?u+"px":"",t.transform="",t))}function computeStyles(e){var t=e.state,r=e.options;var n=r.gpuAcceleration,i=n===void 0?true:n,o=r.adaptive,a=o===void 0?true:o,s=r.roundOffsets,f=s===void 0?true:s;var l={placement:getBasePlacement(t.placement),variation:getVariation(t.placement),popper:t.elements.popper,popperRect:t.rects.popper,gpuAcceleration:i,isFixed:t.options.strategy==="fixed"};if(t.modifiersData.popperOffsets!=null){t.styles.popper=Object.assign({},t.styles.popper,mapToStyles(Object.assign({},l,{offsets:t.modifiersData.popperOffsets,position:t.options.strategy,adaptive:a,roundOffsets:f})))}if(t.modifiersData.arrow!=null){t.styles.arrow=Object.assign({},t.styles.arrow,mapToStyles(Object.assign({},l,{offsets:t.modifiersData.arrow,position:"absolute",adaptive:false,roundOffsets:f})))}t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-placement":t.placement})}var computeStyles$1={name:"computeStyles",enabled:true,phase:"beforeWrite",fn:computeStyles,data:{}};var passive={passive:true};function effect(e){var t=e.state,r=e.instance,n=e.options;var i=n.scroll,o=i===void 0?true:i,a=n.resize,s=a===void 0?true:a;var f=getWindow(t.elements.popper);var l=[].concat(t.scrollParents.reference,t.scrollParents.popper);if(o){l.forEach((function(e){e.addEventListener("scroll",r.update,passive)}))}if(s){f.addEventListener("resize",r.update,passive)}return function(){if(o){l.forEach((function(e){e.removeEventListener("scroll",r.update,passive)}))}if(s){f.removeEventListener("resize",r.update,passive)}}}var eventListeners={name:"eventListeners",enabled:true,phase:"write",fn:function e(){},effect:effect,data:{}};var hash$1={left:"right",right:"left",bottom:"top",top:"bottom"};function getOppositePlacement(e){return e.replace(/left|right|bottom|top/g,(function(e){return hash$1[e]}))}var hash={start:"end",end:"start"};function getOppositeVariationPlacement(e){return e.replace(/start|end/g,(function(e){return hash[e]}))}function getWindowScroll(e){var t=getWindow(e);var r=t.pageXOffset;var n=t.pageYOffset;return{scrollLeft:r,scrollTop:n}}function getWindowScrollBarX(e){return getBoundingClientRect(getDocumentElement(e)).left+getWindowScroll(e).scrollLeft}function getViewportRect(e){var t=getWindow(e);var r=getDocumentElement(e);var n=t.visualViewport;var i=r.clientWidth;var o=r.clientHeight;var a=0;var s=0;if(n){i=n.width;o=n.height;if(!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)){a=n.offsetLeft;s=n.offsetTop}}return{width:i,height:o,x:a+getWindowScrollBarX(e),y:s}}function getDocumentRect(e){var t;var r=getDocumentElement(e);var n=getWindowScroll(e);var i=(t=e.ownerDocument)==null?void 0:t.body;var o=max(r.scrollWidth,r.clientWidth,i?i.scrollWidth:0,i?i.clientWidth:0);var a=max(r.scrollHeight,r.clientHeight,i?i.scrollHeight:0,i?i.clientHeight:0);var s=-n.scrollLeft+getWindowScrollBarX(e);var f=-n.scrollTop;if(getComputedStyle(i||r).direction==="rtl"){s+=max(r.clientWidth,i?i.clientWidth:0)-o}return{width:o,height:a,x:s,y:f}}function isScrollParent(e){var t=getComputedStyle(e),r=t.overflow,n=t.overflowX,i=t.overflowY;return/auto|scroll|overlay|hidden/.test(r+i+n)}function getScrollParent(e){if(["html","body","#document"].indexOf(getNodeName(e))>=0){return e.ownerDocument.body}if(isHTMLElement(e)&&isScrollParent(e)){return e}return getScrollParent(getParentNode(e))}function listScrollParents(e,t){var r;if(t===void 0){t=[]}var n=getScrollParent(e);var i=n===((r=e.ownerDocument)==null?void 0:r.body);var o=getWindow(n);var a=i?[o].concat(o.visualViewport||[],isScrollParent(n)?n:[]):n;var s=t.concat(a);return i?s:s.concat(listScrollParents(getParentNode(a)))}function rectToClientRect(e){return Object.assign({},e,{left:e.x,top:e.y,right:e.x+e.width,bottom:e.y+e.height})}function getInnerBoundingClientRect(e){var t=getBoundingClientRect(e);t.top=t.top+e.clientTop;t.left=t.left+e.clientLeft;t.bottom=t.top+e.clientHeight;t.right=t.left+e.clientWidth;t.width=e.clientWidth;t.height=e.clientHeight;t.x=t.left;t.y=t.top;return t}function getClientRectFromMixedType(e,t){return t===viewport?rectToClientRect(getViewportRect(e)):isElement(t)?getInnerBoundingClientRect(t):rectToClientRect(getDocumentRect(getDocumentElement(e)))}function getClippingParents(e){var t=listScrollParents(getParentNode(e));var r=["absolute","fixed"].indexOf(getComputedStyle(e).position)>=0;var n=r&&isHTMLElement(e)?getOffsetParent(e):e;if(!isElement(n)){return[]}return t.filter((function(e){return isElement(e)&&contains(e,n)&&getNodeName(e)!=="body"}))}function getClippingRect(e,t,r){var n=t==="clippingParents"?getClippingParents(e):[].concat(t);var i=[].concat(n,[r]);var o=i[0];var a=i.reduce((function(t,r){var n=getClientRectFromMixedType(e,r);t.top=max(n.top,t.top);t.right=min(n.right,t.right);t.bottom=min(n.bottom,t.bottom);t.left=max(n.left,t.left);return t}),getClientRectFromMixedType(e,o));a.width=a.right-a.left;a.height=a.bottom-a.top;a.x=a.left;a.y=a.top;return a}function computeOffsets(e){var t=e.reference,r=e.element,n=e.placement;var i=n?getBasePlacement(n):null;var o=n?getVariation(n):null;var a=t.x+t.width/2-r.width/2;var s=t.y+t.height/2-r.height/2;var f;switch(i){case top:f={x:a,y:t.y-r.height};break;case bottom:f={x:a,y:t.y+t.height};break;case right:f={x:t.x+t.width,y:s};break;case left:f={x:t.x-r.width,y:s};break;default:f={x:t.x,y:t.y}}var l=i?getMainAxisFromPlacement(i):null;if(l!=null){var p=l==="y"?"height":"width";switch(o){case start:f[l]=f[l]-(t[p]/2-r[p]/2);break;case end:f[l]=f[l]+(t[p]/2-r[p]/2);break}}return f}function detectOverflow(e,t){if(t===void 0){t={}}var r=t,n=r.placement,i=n===void 0?e.placement:n,o=r.boundary,a=o===void 0?clippingParents:o,s=r.rootBoundary,f=s===void 0?viewport:s,l=r.elementContext,p=l===void 0?popper:l,c=r.altBoundary,d=c===void 0?false:c,u=r.padding,v=u===void 0?0:u;var m=mergePaddingObject(typeof v!=="number"?v:expandToHashMap(v,basePlacements));var g=p===popper?reference:popper;var h=e.rects.popper;var y=e.elements[d?g:p];var b=getClippingRect(isElement(y)?y:y.contextElement||getDocumentElement(e.elements.popper),a,f);var w=getBoundingClientRect(e.elements.reference);var O=computeOffsets({reference:w,element:h,strategy:"absolute",placement:i});var x=rectToClientRect(Object.assign({},h,O));var P=p===popper?x:w;var E={top:b.top-P.top+m.top,bottom:P.bottom-b.bottom+m.bottom,left:b.left-P.left+m.left,right:P.right-b.right+m.right};var S=e.modifiersData.offset;if(p===popper&&S){var T=S[i];Object.keys(E).forEach((function(e){var t=[right,bottom].indexOf(e)>=0?1:-1;var r=[top,bottom].indexOf(e)>=0?"y":"x";E[e]+=T[r]*t}))}return E}function computeAutoPlacement(e,t){if(t===void 0){t={}}var r=t,n=r.placement,i=r.boundary,o=r.rootBoundary,a=r.padding,s=r.flipVariations,f=r.allowedAutoPlacements,l=f===void 0?placements:f;var p=getVariation(n);var c=p?s?variationPlacements:variationPlacements.filter((function(e){return getVariation(e)===p})):basePlacements;var d=c.filter((function(e){return l.indexOf(e)>=0}));if(d.length===0){d=c}var u=d.reduce((function(t,r){t[r]=detectOverflow(e,{placement:r,boundary:i,rootBoundary:o,padding:a})[getBasePlacement(r)];return t}),{});return Object.keys(u).sort((function(e,t){return u[e]-u[t]}))}function getExpandedFallbackPlacements(e){if(getBasePlacement(e)===auto){return[]}var t=getOppositePlacement(e);return[getOppositeVariationPlacement(e),t,getOppositeVariationPlacement(t)]}function flip(e){var t=e.state,r=e.options,n=e.name;if(t.modifiersData[n]._skip){return}var i=r.mainAxis,o=i===void 0?true:i,a=r.altAxis,s=a===void 0?true:a,f=r.fallbackPlacements,l=r.padding,p=r.boundary,c=r.rootBoundary,d=r.altBoundary,u=r.flipVariations,v=u===void 0?true:u,m=r.allowedAutoPlacements;var g=t.options.placement;var h=getBasePlacement(g);var y=h===g;var b=f||(y||!v?[getOppositePlacement(g)]:getExpandedFallbackPlacements(g));var w=[g].concat(b).reduce((function(e,r){return e.concat(getBasePlacement(r)===auto?computeAutoPlacement(t,{placement:r,boundary:p,rootBoundary:c,padding:l,flipVariations:v,allowedAutoPlacements:m}):r)}),[]);var O=t.rects.reference;var x=t.rects.popper;var P=new Map;var E=true;var S=w[0];for(var T=0;T<w.length;T++){var C=w[T];var L=getBasePlacement(C);var M=getVariation(C)===start;var R=[top,bottom].indexOf(L)>=0;var A=R?"width":"height";var B=detectOverflow(t,{placement:C,boundary:p,rootBoundary:c,altBoundary:d,padding:l});var j=R?M?right:left:M?bottom:top;if(O[A]>x[A]){j=getOppositePlacement(j)}var W=getOppositePlacement(j);var D=[];if(o){D.push(B[L]<=0)}if(s){D.push(B[j]<=0,B[W]<=0)}if(D.every((function(e){return e}))){S=C;E=false;break}P.set(C,D)}if(E){var N=v?3:1;var H=function e(t){var r=w.find((function(e){var r=P.get(e);if(r){return r.slice(0,t).every((function(e){return e}))}}));if(r){S=r;return"break"}};for(var k=N;k>0;k--){var V=H(k);if(V==="break")break}}if(t.placement!==S){t.modifiersData[n]._skip=true;t.placement=S;t.reset=true}}var flip$1={name:"flip",enabled:true,phase:"main",fn:flip,requiresIfExists:["offset"],data:{_skip:false}};function getSideOffsets(e,t,r){if(r===void 0){r={x:0,y:0}}return{top:e.top-t.height-r.y,right:e.right-t.width+r.x,bottom:e.bottom-t.height+r.y,left:e.left-t.width-r.x}}function isAnySideFullyClipped(e){return[top,right,bottom,left].some((function(t){return e[t]>=0}))}function hide(e){var t=e.state,r=e.name;var n=t.rects.reference;var i=t.rects.popper;var o=t.modifiersData.preventOverflow;var a=detectOverflow(t,{elementContext:"reference"});var s=detectOverflow(t,{altBoundary:true});var f=getSideOffsets(a,n);var l=getSideOffsets(s,i,o);var p=isAnySideFullyClipped(f);var c=isAnySideFullyClipped(l);t.modifiersData[r]={referenceClippingOffsets:f,popperEscapeOffsets:l,isReferenceHidden:p,hasPopperEscaped:c};t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-reference-hidden":p,"data-popper-escaped":c})}var hide$1={name:"hide",enabled:true,phase:"main",requiresIfExists:["preventOverflow"],fn:hide};function distanceAndSkiddingToXY(e,t,r){var n=getBasePlacement(e);var i=[left,top].indexOf(n)>=0?-1:1;var o=typeof r==="function"?r(Object.assign({},t,{placement:e})):r,a=o[0],s=o[1];a=a||0;s=(s||0)*i;return[left,right].indexOf(n)>=0?{x:s,y:a}:{x:a,y:s}}function offset(e){var t=e.state,r=e.options,n=e.name;var i=r.offset,o=i===void 0?[0,0]:i;var a=placements.reduce((function(e,r){e[r]=distanceAndSkiddingToXY(r,t.rects,o);return e}),{});var s=a[t.placement],f=s.x,l=s.y;if(t.modifiersData.popperOffsets!=null){t.modifiersData.popperOffsets.x+=f;t.modifiersData.popperOffsets.y+=l}t.modifiersData[n]=a}var offset$1={name:"offset",enabled:true,phase:"main",requires:["popperOffsets"],fn:offset};function popperOffsets(e){var t=e.state,r=e.name;t.modifiersData[r]=computeOffsets({reference:t.rects.reference,element:t.rects.popper,strategy:"absolute",placement:t.placement})}var popperOffsets$1={name:"popperOffsets",enabled:true,phase:"read",fn:popperOffsets,data:{}};function getAltAxis(e){return e==="x"?"y":"x"}function preventOverflow(e){var t=e.state,r=e.options,n=e.name;var i=r.mainAxis,o=i===void 0?true:i,a=r.altAxis,s=a===void 0?false:a,f=r.boundary,l=r.rootBoundary,p=r.altBoundary,c=r.padding,d=r.tether,u=d===void 0?true:d,v=r.tetherOffset,m=v===void 0?0:v;var g=detectOverflow(t,{boundary:f,rootBoundary:l,padding:c,altBoundary:p});var h=getBasePlacement(t.placement);var y=getVariation(t.placement);var b=!y;var w=getMainAxisFromPlacement(h);var O=getAltAxis(w);var x=t.modifiersData.popperOffsets;var P=t.rects.reference;var E=t.rects.popper;var S=typeof m==="function"?m(Object.assign({},t.rects,{placement:t.placement})):m;var T=typeof S==="number"?{mainAxis:S,altAxis:S}:Object.assign({mainAxis:0,altAxis:0},S);var C=t.modifiersData.offset?t.modifiersData.offset[t.placement]:null;var L={x:0,y:0};if(!x){return}if(o){var M;var R=w==="y"?top:left;var A=w==="y"?bottom:right;var B=w==="y"?"height":"width";var j=x[w];var W=j+g[R];var D=j-g[A];var N=u?-E[B]/2:0;var H=y===start?P[B]:E[B];var k=y===start?-E[B]:-P[B];var V=t.elements.arrow;var F=u&&V?getLayoutRect(V):{width:0,height:0};var $=t.modifiersData["arrow#persistent"]?t.modifiersData["arrow#persistent"].padding:getFreshSideObject();var q=$[R];var I=$[A];var X=within(0,P[B],F[B]);var U=b?P[B]/2-N-X-q-T.mainAxis:H-X-q-T.mainAxis;var _=b?-P[B]/2+N+X+I+T.mainAxis:k+X+I+T.mainAxis;var Y=t.elements.arrow&&getOffsetParent(t.elements.arrow);var z=Y?w==="y"?Y.clientTop||0:Y.clientLeft||0:0;var G=(M=C==null?void 0:C[w])!=null?M:0;var J=j+U-G-z;var K=j+_-G;var Q=within(u?min(W,J):W,j,u?max(D,K):D);x[w]=Q;L[w]=Q-j}if(s){var Z;var ee=w==="x"?top:left;var te=w==="x"?bottom:right;var re=x[O];var ne=O==="y"?"height":"width";var ie=re+g[ee];var oe=re-g[te];var ae=[top,left].indexOf(h)!==-1;var se=(Z=C==null?void 0:C[O])!=null?Z:0;var fe=ae?ie:re-P[ne]-E[ne]-se+T.altAxis;var le=ae?re+P[ne]+E[ne]-se-T.altAxis:oe;var pe=u&&ae?withinMaxClamp(fe,re,le):within(u?fe:ie,re,u?le:oe);x[O]=pe;L[O]=pe-re}t.modifiersData[n]=L}var preventOverflow$1={name:"preventOverflow",enabled:true,phase:"main",fn:preventOverflow,requiresIfExists:["offset"]};function getHTMLElementScroll(e){return{scrollLeft:e.scrollLeft,scrollTop:e.scrollTop}}function getNodeScroll(e){if(e===getWindow(e)||!isHTMLElement(e)){return getWindowScroll(e)}else{return getHTMLElementScroll(e)}}function isElementScaled(e){var t=e.getBoundingClientRect();var r=round(t.width)/e.offsetWidth||1;var n=round(t.height)/e.offsetHeight||1;return r!==1||n!==1}function getCompositeRect(e,t,r){if(r===void 0){r=false}var n=isHTMLElement(t);var i=isHTMLElement(t)&&isElementScaled(t);var o=getDocumentElement(t);var a=getBoundingClientRect(e,i);var s={scrollLeft:0,scrollTop:0};var f={x:0,y:0};if(n||!n&&!r){if(getNodeName(t)!=="body"||isScrollParent(o)){s=getNodeScroll(t)}if(isHTMLElement(t)){f=getBoundingClientRect(t,true);f.x+=t.clientLeft;f.y+=t.clientTop}else if(o){f.x=getWindowScrollBarX(o)}}return{x:a.left+s.scrollLeft-f.x,y:a.top+s.scrollTop-f.y,width:a.width,height:a.height}}function order(e){var t=new Map;var r=new Set;var n=[];e.forEach((function(e){t.set(e.name,e)}));function i(e){r.add(e.name);var o=[].concat(e.requires||[],e.requiresIfExists||[]);o.forEach((function(e){if(!r.has(e)){var n=t.get(e);if(n){i(n)}}}));n.push(e)}e.forEach((function(e){if(!r.has(e.name)){i(e)}}));return n}function orderModifiers(e){var t=order(e);return modifierPhases.reduce((function(e,r){return e.concat(t.filter((function(e){return e.phase===r})))}),[])}function debounce(e){var t;return function(){if(!t){t=new Promise((function(r){Promise.resolve().then((function(){t=undefined;r(e())}))}))}return t}}function mergeByName(e){var t=e.reduce((function(e,t){var r=e[t.name];e[t.name]=r?Object.assign({},r,t,{options:Object.assign({},r.options,t.options),data:Object.assign({},r.data,t.data)}):t;return e}),{});return Object.keys(t).map((function(e){return t[e]}))}var DEFAULT_OPTIONS={placement:"bottom",modifiers:[],strategy:"absolute"};function areValidElements(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++){t[r]=arguments[r]}return!t.some((function(e){return!(e&&typeof e.getBoundingClientRect==="function")}))}function popperGenerator(e){if(e===void 0){e={}}var t=e,r=t.defaultModifiers,n=r===void 0?[]:r,i=t.defaultOptions,o=i===void 0?DEFAULT_OPTIONS:i;return function e(t,r,i){if(i===void 0){i=o}var a={placement:"bottom",orderedModifiers:[],options:Object.assign({},DEFAULT_OPTIONS,o),modifiersData:{},elements:{reference:t,popper:r},attributes:{},styles:{}};var s=[];var f=false;var l={state:a,setOptions:function e(i){var s=typeof i==="function"?i(a.options):i;c();a.options=Object.assign({},o,a.options,s);a.scrollParents={reference:isElement(t)?listScrollParents(t):t.contextElement?listScrollParents(t.contextElement):[],popper:listScrollParents(r)};var f=orderModifiers(mergeByName([].concat(n,a.options.modifiers)));a.orderedModifiers=f.filter((function(e){return e.enabled}));p();return l.update()},forceUpdate:function e(){if(f){return}var t=a.elements,r=t.reference,n=t.popper;if(!areValidElements(r,n)){return}a.rects={reference:getCompositeRect(r,getOffsetParent(n),a.options.strategy==="fixed"),popper:getLayoutRect(n)};a.reset=false;a.placement=a.options.placement;a.orderedModifiers.forEach((function(e){return a.modifiersData[e.name]=Object.assign({},e.data)}));for(var i=0;i<a.orderedModifiers.length;i++){if(a.reset===true){a.reset=false;i=-1;continue}var o=a.orderedModifiers[i],s=o.fn,p=o.options,c=p===void 0?{}:p,d=o.name;if(typeof s==="function"){a=s({state:a,options:c,name:d,instance:l})||a}}},update:debounce((function(){return new Promise((function(e){l.forceUpdate();e(a)}))})),destroy:function e(){c();f=true}};if(!areValidElements(t,r)){return l}l.setOptions(i).then((function(e){if(!f&&i.onFirstUpdate){i.onFirstUpdate(e)}}));function p(){a.orderedModifiers.forEach((function(e){var t=e.name,r=e.options,n=r===void 0?{}:r,i=e.effect;if(typeof i==="function"){var o=i({state:a,name:t,instance:l,options:n});var f=function e(){};s.push(o||f)}}))}function c(){s.forEach((function(e){return e()}));s=[]}return l}}var defaultModifiers=[eventListeners,popperOffsets$1,computeStyles$1,applyStyles$1,offset$1,flip$1,preventOverflow$1,arrow$1,hide$1];var createPopper=popperGenerator({defaultModifiers:defaultModifiers});var Popover=function(){function e(e,t,r){this.handleTransitionEnd=this.handleTransitionEnd.bind(this);this.anchor=e;this.popover=t;this.options=Object.assign({skidding:0,distance:0,placement:"bottom-start",strategy:"absolute",transitionElement:this.popover,visibleClass:"popover-visible",onAfterShow:function(){},onAfterHide:function(){},onTransitionEnd:function(){}},r);this.popover.hidden=true;this.popover.classList.remove(this.options.visibleClass);this.popover.addEventListener("transitionend",this.handleTransitionEnd)}e.prototype.handleTransitionEnd=function(e){var t=e.target;if(t===this.options.transitionElement){this.options.onTransitionEnd.call(this,e);if(this.isVisible===false&&!this.popover.hidden){this.popover.hidden=true;this.popover.classList.remove(this.options.visibleClass);this.options.onAfterHide.call(this)}}};e.prototype.destroy=function(){this.popover.removeEventListener("transitionend",this.handleTransitionEnd);if(this.popper){this.popper.destroy();this.popper=null}};e.prototype.show=function(){var e=this;this.isVisible=true;this.popover.hidden=false;raf((function(){return e.popover.classList.add(e.options.visibleClass)}));if(this.popper){this.popper.destroy()}this.popper=createPopper(this.anchor,this.popover,{placement:this.options.placement,strategy:this.options.strategy,modifiers:[{name:"sameWidth",enabled:true,fn:function(e){var t=e.state;t.styles.popper.minWidth=t.rects.reference.width+"px"},phase:"beforeWrite",requires:["computeStyles"]},{name:"flip",options:{boundary:"viewport"}},{name:"offset",options:{padding:5,offset:[this.options.skidding,this.options.distance]}}]});this.popover.addEventListener("transitionend",(function(){return e.options.onAfterShow.call(e)}),{once:true});requestAnimationFrame((function(){return e.popper.update()}))};e.prototype.hide=function(){this.isVisible=false;this.popover.classList.remove(this.options.visibleClass)};e.prototype.setOptions=function(e){var t=this;this.options=Object.assign(this.options,e);this.isVisible?this.popover.classList.add(this.options.visibleClass):this.popover.classList.remove(this.options.visibleClass);if(this.popper){this.popper.setOptions({placement:this.options.placement,strategy:this.options.strategy});requestAnimationFrame((function(){return t.popper.update()}))}};return e}();export{Popover as P};
+//# sourceMappingURL=popover-46b5193d.js.map