npm - @nanoporetech-digital/components - Versions diffs - 2.2.0 → 2.3.1 - Mend

@nanoporetech-digital/components 2.2.0 → 2.3.1

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

package/dist/cjs/nano-split-pane.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-split-pane.entry.cjs.js","mappings":"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","names":["clamp","raf","debounce","h","Host"],"sources":["./src/utils/drag.ts","./src/components/split-pane/split-pane.scss?tag=nano-split-pane&encapsulation=shadow","./src/components/split-pane/split-pane.tsx"],"sourcesContent":["export function drag(\n container: HTMLElement,\n onMove: (x: number, y: number) => void\n) {\n function move(pointerEvent: PointerEvent) {\n const dims = container.getBoundingClientRect();\n const defaultView = container.ownerDocument.defaultView!;\n const offsetX = dims.left + defaultView.pageXOffset;\n const offsetY = dims.top + defaultView.pageYOffset;\n const x = pointerEvent.pageX - offsetX;\n const y = pointerEvent.pageY - offsetY;\n\n onMove(x, y);\n }\n\n function stop() {\n document.removeEventListener('pointermove', move);\n document.removeEventListener('pointerup', stop);\n }\n\n document.addEventListener('pointermove', move, { passive: true });\n document.addEventListener('pointerup', stop);\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/form';\n\n:host {\n /*\n @prop --divider-width: The width of the visible divider. Default 4px.\n * @prop --divider-hit-area: The invisible region around the divider where dragging can occur. This is\n * usually wider than the divider to facilitate easier dragging. Default 12px.\n * @prop --min: The minimum allowed size of the primary panel. Default 0.\n * @prop --max: The maximum allowed size of the primary panel. Default 100%.\n * @prop --background-color: Handle background. Default #{map.get($colors, lightgrey)}.\n * @prop --content-color: Handle color. Default #{map.get($colors, dimgrey)}.\n /\n --divider-width: 12px;\n --divider-hit-area: 14px;\n --min: 0%;\n --max: 100%;\n --background-color: #{map.get($colors, lightgrey)};\n --content-color: #{map.get($colors, dimgrey)};\n\n display: grid;\n}\n\n.start,\n.end {\n overflow: hidden;\n}\n\n.divider {\n flex: 0 0 var(--divider-width);\n display: flex;\n position: relative;\n align-items: center;\n justify-content: center;\n background-color: var(--background-color);\n color: var(--content-color);\n z-index: 1;\n font-size: 0.8rem;\n}\n\n.divider:focus {\n outline: none;\n}\n\n:host(:not([disabled])) .divider:focus-visible {\n background-color: #{$control-focus-color};\n}\n\n:host([disabled]) .divider {\n cursor: not-allowed;\n}\n\n/ Horizontal /\n:host(:not([vertical], [disabled])) .divider {\n cursor: col-resize;\n}\n\n:host(:not([vertical])) .divider::after {\n display: flex;\n content: '';\n position: absolute;\n height: 100%;\n left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n width: var(--divider-hit-area);\n}\n\n/ Vertical /\n:host([vertical]) {\n flex-direction: column;\n}\n\n:host([vertical]:not([disabled])) .divider {\n cursor: row-resize;\n}\n\n:host([vertical]) .divider::after {\n content: '';\n position: absolute;\n width: 100%;\n top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n height: var(--divider-hit-area);\n}\n","import {\n Prop,\n Component,\n Watch,\n Event,\n EventEmitter,\n ComponentInterface,\n Element,\n Host,\n h,\n} from '@stencil/core';\nimport { clamp, raf, debounce } from '../../utils';\nimport { drag } from '../../utils/drag';\n\n/\n Split panes display two adjacent panels, allowing the user to reposition them.\n \n @part start - The start panel.\n * @part end - The end panel.\n * @part panel - Targets both the start and end panels.\n * @part divider - The divider that separates the start and end panels.\n \n @slot start - The start panel.\n * @slot end - The end panel.\n * @slot handle - An optional handle to render at the center of the divider.\n /\n@Component({\n tag: 'nano-split-pane',\n styleUrl: 'split-pane.scss',\n shadow: true,\n})\nexport class SplitPane implements ComponentInterface {\n @Element() host: HTMLNanoSplitPaneElement;\n private cachedPositionInPixels: number;\n private ro: ResizeObserver;\n private isAnimating = false;\n private didLoad = false;\n\n private get size() {\n const { width, height } = this.host.getBoundingClientRect();\n return this.vertical ? height : width;\n }\n\n private get shouldAnimate() {\n return this.didLoad && this._shouldAnimate;\n }\n private set shouldAnimate(sa: boolean) {\n this._shouldAnimate = sa;\n }\n private _shouldAnimate: boolean = true;\n\n constructor() {\n this.handlePositionChange = debounce(\n this.handlePositionChange.bind(this),\n 100\n );\n this.handleIsDragging = debounce(this.handleIsDragging, 200);\n }\n\n /\n The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the\n * container's initial size.\n /\n @Prop()\n get position() {\n return this._position;\n }\n set position(pos: number) {\n // override too high / low\n pos = Math.min(Math.max(pos, 0), 100);\n if (isNaN(pos) \|\| pos === this._position) return;\n\n if (this.shouldAnimate && this.animationDuration > 0) {\n this.animatePosition(pos);\n return;\n }\n this._position = pos;\n }\n private _position: number;\n\n // eslint-disable-next-line @stencil/no-unused-watch\n @Watch('position')\n handlePositionChange() {\n this.cachedPositionInPixels = this.percentageToPixels(this.position);\n this.positionInPixels = this.percentageToPixels(this.position);\n this.nanoReposition.emit();\n }\n\n /\n The current position of the divider from the primary panel's edge in pixels.\n /\n @Prop({ mutable: true }) positionInPixels: number;\n\n @Watch('positionInPixels')\n handlePositionInPixelsChange() {\n this.position = this.pixelsToPercentage(this.positionInPixels);\n }\n\n /* Draws the split panel in a vertical orientation with the start and end panels stacked. /\n @Prop({ reflect: true }) vertical = false;\n\n /* Disables resizing. Note that the position may still change as a result of resizing the host element. /\n @Prop({ reflect: true }) disabled = false;\n\n /\n If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a\n * primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the\n * host element is resized.\n /\n @Prop() primary?: 'start' \| 'end';\n\n /\n One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.\n * `\"100px 50%\"`.\n /\n @Prop() snap?: string;\n\n /* How close the divider must be to a snap point until snapping occurs. /\n @Prop() snapThreshold = 12;\n\n /* When changing `position` via property, the pane will animate into position. Make `animationDuration` 0 to disable. /\n @Prop() animationDuration = 0.6;\n\n /* @readonly - hook to know if the pane is currently being dragged /\n @Prop({ reflect: true }) get isDragging() {\n return this._isDragging;\n }\n private _isDragging = false;\n\n /* Emitted when the divider's position changes. /\n @Event() nanoReposition: EventEmitter;\n\n // Private logic\n\n private animatePosition(end: number) {\n if (this.isAnimating) return;\n\n const duration = this.animationDuration; // seconds\n const fps = 60;\n const start = this.position;\n const distance = end - start;\n\n let position = start;\n let time = 0;\n\n function easeInOutQuad(t: number, s: number, e: number, d: number) {\n if ((t /= d / 2) < 1) return (e / 2) t * t + s;\n else return (-e / 2) * (--t * (t - 2) - 1) + s;\n }\n\n const go = () => {\n time += 1 / fps;\n position = easeInOutQuad(time, start, distance, duration);\n\n if (\n (end > start && position >= end) \|\|\n (end < start && position <= end)\n ) {\n this.position = end;\n this.shouldAnimate = true;\n this.isAnimating = false;\n return;\n }\n this.position = position;\n raf(go);\n };\n\n this.shouldAnimate = false;\n this.isAnimating = true;\n raf(go);\n }\n\n private percentageToPixels(value: number) {\n return this.size * (value / 100);\n }\n\n private pixelsToPercentage(value: number) {\n return (value / this.size) * 100;\n }\n\n private attachRO() {\n this.detachRO();\n this.ro = new ResizeObserver(() => this.handleResize());\n this.ro.observe(this.host);\n }\n\n private detachRO() {\n if (!this.ro) return;\n this.ro.unobserve(this.host);\n this.ro = undefined;\n }\n\n private handleIsDragging = (dragging?: boolean) => {\n this._isDragging = dragging;\n };\n\n // Event handlers\n\n private handleDrag = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n // Prevent text selection when dragging\n e.preventDefault();\n\n drag(this.host, (x, y) => {\n this.handleIsDragging(true);\n let newPositionInPixels = this.vertical ? y : x;\n\n // Flip for end panels\n if (this.primary === 'end') {\n newPositionInPixels = this.size - newPositionInPixels;\n }\n\n // Check snap points\n if (this.snap) {\n const snaps = this.snap.split(' ');\n\n snaps.forEach((value) => {\n let snapPoint: number;\n\n if (value.endsWith('%')) {\n snapPoint = this.size * (parseFloat(value) / 100);\n } else {\n snapPoint = parseFloat(value);\n }\n\n if (\n newPositionInPixels >= snapPoint - this.snapThreshold &&\n newPositionInPixels <= snapPoint + this.snapThreshold\n ) {\n newPositionInPixels = snapPoint;\n }\n });\n }\n this.shouldAnimate = false;\n this.position = clamp(\n this.pixelsToPercentage(newPositionInPixels),\n 0,\n 100\n );\n raf(() => (this.shouldAnimate = true));\n this.handleIsDragging(false);\n });\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (this.disabled) {\n return;\n }\n\n if (\n [\n 'ArrowLeft',\n 'ArrowRight',\n 'ArrowUp',\n 'ArrowDown',\n 'Home',\n 'End',\n ].includes(event.key)\n ) {\n let newPosition = this.position;\n const incr =\n (event.shiftKey ? 10 : 1) * (this.primary === 'end' ? -1 : 1);\n\n event.preventDefault();\n\n if (\n (event.key === 'ArrowLeft' && !this.vertical) \|\|\n (event.key === 'ArrowUp' && this.vertical)\n ) {\n newPosition -= incr;\n }\n\n if (\n (event.key === 'ArrowRight' && !this.vertical) \|\|\n (event.key === 'ArrowDown' && this.vertical)\n ) {\n newPosition += incr;\n }\n\n if (event.key === 'Home') {\n newPosition = this.primary === 'end' ? 100 : 0;\n }\n\n if (event.key === 'End') {\n newPosition = this.primary === 'end' ? 0 : 100;\n }\n\n this.shouldAnimate = false;\n\n this.position = clamp(newPosition, 0, 100);\n raf(() => (this.shouldAnimate = true));\n }\n };\n\n private handleResize = () => {\n if (!this.didLoad \|\| this.isAnimating) return;\n\n // Resize when a primary panel is set\n if (this.primary) {\n this.shouldAnimate = false;\n this.position = this.pixelsToPercentage(this.cachedPositionInPixels);\n raf(() => (this.shouldAnimate = true));\n }\n };\n\n componentDidLoad(): void {\n if (this.positionInPixels) this.handlePositionInPixelsChange();\n setTimeout(() => (this.didLoad = true));\n }\n\n connectedCallback() {\n this.cachedPositionInPixels = this.percentageToPixels(this.position);\n this.attachRO();\n }\n\n disconnectedCallback() {\n this.detachRO();\n }\n\n componentDidRender(): void {\n // bit hacky ... because we use getter / setter for position, there's a render before `position` is passed in via attribute\n // if we set a default position in the class, this causes the divider to jump (from default to user set position)\n // so - wait a render, see if there's a position passed in via attribute, then set default if not\n raf(() => {\n if (this.position === undefined) this.position = 50;\n });\n }\n\n render() {\n if (!this.position) return;\n const styles: { gridTemplateRows?: string; gridTemplateColumns?: string } =\n {};\n const gridTemplate = this.vertical\n ? 'gridTemplateRows'\n : 'gridTemplateColumns';\n const primary = `\n clamp(\n 0%,\n clamp(\n var(--min),\n ${this.position}% - var(--divider-width) / 2,\n var(--max)\n ),\n calc(100% - var(--divider-width))\n )\n `;\n const secondary = 'auto';\n\n if (this.primary === 'end') {\n styles[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;\n } else {\n styles[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;\n }\n\n return (\n <Host style={styles}>\n <div part=\"panel start\" class=\"start\">\n <slot name=\"start\"></slot>\n </div>\n <div\n part=\"divider\"\n class=\"divider\"\n tabindex={this.disabled ? undefined : '0'}\n role=\"separator\"\n aria-label=\"Resize\"\n onKeyDown={this.handleKeyDown}\n onMouseDown={this.handleDrag}\n onTouchStart={this.handleDrag}\n >\n <slot name=\"handle\">\n {!this.disabled && this.vertical ? (\n <nano-icon slot=\"handle\" name=\"solid/grip-lines\" />\n ) : (\n <nano-icon slot=\"handle\" name=\"solid/grip-lines-vertical\" />\n )}\n </slot>\n </div>\n <div part=\"panel end\" class=\"end\">\n <slot name=\"end\"></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nano-split-pane.entry.cjs.js","mappings":"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","names":["clamp","raf","debounce","h","Host"],"sources":["./src/utils/drag.ts","./src/components/split-pane/split-pane.scss?tag=nano-split-pane&encapsulation=shadow","./src/components/split-pane/split-pane.tsx"],"sourcesContent":["export function drag(\n container: HTMLElement,\n onMove: (x: number, y: number) => void\n) {\n function move(pointerEvent: PointerEvent) {\n const dims = container.getBoundingClientRect();\n const defaultView = container.ownerDocument.defaultView!;\n const offsetX = dims.left + defaultView.pageXOffset;\n const offsetY = dims.top + defaultView.pageYOffset;\n const x = pointerEvent.pageX - offsetX;\n const y = pointerEvent.pageY - offsetY;\n\n onMove(x, y);\n }\n\n function stop() {\n document.removeEventListener('pointermove', move);\n document.removeEventListener('pointerup', stop);\n }\n\n document.addEventListener('pointermove', move, { passive: true });\n document.addEventListener('pointerup', stop);\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/form';\n\n:host {\n /*\n @prop --divider-width: The width of the visible divider. Default 4px.\n * @prop --divider-hit-area: The invisible region around the divider where dragging can occur. This is\n * usually wider than the divider to facilitate easier dragging. Default 12px.\n * @prop --min: The minimum allowed size of the primary panel. Default 0.\n * @prop --max: The maximum allowed size of the primary panel. Default 100%.\n * @prop --background-color: Handle background. Default #{map.get($colors, lightgrey)}.\n * @prop --content-color: Handle color. Default #{map.get($colors, dimgrey)}.\n /\n --divider-width: 12px;\n --divider-hit-area: 14px;\n --min: 0%;\n --max: 100%;\n --background-color: #{map.get($colors, lightgrey)};\n --content-color: #{map.get($colors, dimgrey)};\n\n display: grid;\n}\n\n.start,\n.end {\n overflow: hidden;\n}\n\n.divider {\n flex: 0 0 var(--divider-width);\n display: flex;\n position: relative;\n align-items: center;\n justify-content: center;\n background-color: var(--background-color);\n color: var(--content-color);\n z-index: 1;\n font-size: 0.8rem;\n}\n\n.divider:focus {\n outline: none;\n}\n\n:host(:not([disabled])) .divider:focus-visible {\n background-color: #{$control-focus-color};\n}\n\n:host([disabled]) .divider {\n cursor: not-allowed;\n}\n\n/ Horizontal /\n:host(:not([vertical], [disabled])) .divider {\n cursor: col-resize;\n}\n\n:host(:not([vertical])) .divider::after {\n display: flex;\n content: '';\n position: absolute;\n height: 100%;\n left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n width: var(--divider-hit-area);\n}\n\n/ Vertical /\n:host([vertical]) {\n flex-direction: column;\n}\n\n:host([vertical]:not([disabled])) .divider {\n cursor: row-resize;\n}\n\n:host([vertical]) .divider::after {\n content: '';\n position: absolute;\n width: 100%;\n top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n height: var(--divider-hit-area);\n}\n","import {\n Prop,\n Component,\n Watch,\n Event,\n EventEmitter,\n ComponentInterface,\n Element,\n Host,\n h,\n} from '@stencil/core';\nimport { clamp, raf, debounce } from '../../utils';\nimport { drag } from '../../utils/drag';\n\n/\n Split panes display two adjacent panels, allowing the user to reposition them.\n \n @part start - The start panel.\n * @part end - The end panel.\n * @part panel - Targets both the start and end panels.\n * @part divider - The divider that separates the start and end panels.\n \n @slot start - The start panel.\n * @slot end - The end panel.\n * @slot handle - An optional handle to render at the center of the divider.\n /\n@Component({\n tag: 'nano-split-pane',\n styleUrl: 'split-pane.scss',\n shadow: true,\n})\nexport class SplitPane implements ComponentInterface {\n @Element() host: HTMLNanoSplitPaneElement;\n private cachedPositionInPixels: number;\n private ro: ResizeObserver;\n private isAnimating = false;\n private didLoad = false;\n\n private get size() {\n const { width, height } = this.host.getBoundingClientRect();\n return this.vertical ? height : width;\n }\n\n private get shouldAnimate() {\n return this.didLoad && this._shouldAnimate;\n }\n private set shouldAnimate(sa: boolean) {\n this._shouldAnimate = sa;\n }\n private _shouldAnimate: boolean = true;\n\n constructor() {\n this.handlePositionChange = debounce(\n this.handlePositionChange.bind(this),\n 100\n );\n }\n\n /\n The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the\n * container's initial size.\n /\n @Prop()\n get position() {\n return this._position;\n }\n set position(pos: number) {\n // override too high / low\n pos = Math.min(Math.max(pos, 0), 100);\n if (isNaN(pos) \|\| pos === this._position) return;\n\n if (\n this.shouldAnimate &&\n this.animationDuration > 0 &&\n !isNaN(this.position)\n ) {\n this.animatePosition(pos);\n return;\n }\n this._position = pos;\n }\n private _position: number;\n\n // eslint-disable-next-line @stencil/no-unused-watch\n @Watch('position')\n handlePositionChange() {\n this.cachedPositionInPixels = this.percentageToPixels(this.position);\n this.positionInPixels = this.percentageToPixels(this.position);\n this.nanoReposition.emit();\n }\n\n /\n The current position of the divider from the primary panel's edge in pixels.\n /\n @Prop({ mutable: true }) positionInPixels: number;\n\n @Watch('positionInPixels')\n handlePositionInPixelsChange() {\n this.position = this.pixelsToPercentage(this.positionInPixels);\n }\n\n /* Draws the split panel in a vertical orientation with the start and end panels stacked. /\n @Prop({ reflect: true }) vertical = false;\n\n /* Disables resizing. Note that the position may still change as a result of resizing the host element. /\n @Prop({ reflect: true }) disabled = false;\n\n /\n If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a\n * primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the\n * host element is resized.\n /\n @Prop() primary?: 'start' \| 'end';\n\n /\n One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.\n * `\"100px 50%\"`.\n /\n @Prop() snap?: string;\n\n /* How close the divider must be to a snap point until snapping occurs. /\n @Prop() snapThreshold = 12;\n\n /* When changing `position` via property, the pane will animate into position. Make `animationDuration` 0 to disable. /\n @Prop() animationDuration = 0.6;\n\n /* Emitted when the divider's position changes. /\n @Event() nanoReposition: EventEmitter;\n\n /* Emitted when the divider is being dragged. /\n @Event() nanoDragging: EventEmitter<number>;\n\n // Private logic\n\n private animatePosition(end: number) {\n if (this.isAnimating) return;\n\n const duration = this.animationDuration; // seconds\n const fps = 60;\n const start = this.position;\n const distance = end - start;\n\n let position = start;\n let time = 0;\n\n function easeInOutQuad(t: number, s: number, e: number, d: number) {\n if ((t /= d / 2) < 1) return (e / 2) t * t + s;\n else return (-e / 2) * (--t * (t - 2) - 1) + s;\n }\n\n const go = () => {\n time += 1 / fps;\n position = easeInOutQuad(time, start, distance, duration);\n\n if (\n (end > start && position >= end) \|\|\n (end < start && position <= end)\n ) {\n this.position = end;\n this.shouldAnimate = true;\n this.isAnimating = false;\n return;\n }\n this.position = position;\n raf(go);\n };\n\n this.shouldAnimate = false;\n this.isAnimating = true;\n raf(go);\n }\n\n private percentageToPixels(value: number) {\n return this.size * (value / 100);\n }\n\n private pixelsToPercentage(value: number) {\n return (value / this.size) * 100;\n }\n\n private attachRO() {\n this.detachRO();\n this.ro = new ResizeObserver(() => this.handleResize());\n this.ro.observe(this.host);\n }\n\n private detachRO() {\n if (!this.ro) return;\n this.ro.unobserve(this.host);\n this.ro = undefined;\n }\n\n // Event handlers\n\n private handleDrag = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n // Prevent text selection when dragging\n e.preventDefault();\n\n drag(this.host, (x, y) => {\n let newPositionInPixels = this.vertical ? y : x;\n\n this.nanoDragging.emit(newPositionInPixels);\n\n // Flip for end panels\n if (this.primary === 'end') {\n newPositionInPixels = this.size - newPositionInPixels;\n }\n\n // Check snap points\n if (this.snap) {\n const snaps = this.snap.split(' ');\n\n snaps.forEach((value) => {\n let snapPoint: number;\n\n if (value.endsWith('%')) {\n snapPoint = this.size * (parseFloat(value) / 100);\n } else {\n snapPoint = parseFloat(value);\n }\n\n if (\n newPositionInPixels >= snapPoint - this.snapThreshold &&\n newPositionInPixels <= snapPoint + this.snapThreshold\n ) {\n newPositionInPixels = snapPoint;\n }\n });\n }\n this.shouldAnimate = false;\n this.position = clamp(\n this.pixelsToPercentage(newPositionInPixels),\n 0,\n 100\n );\n raf(() => (this.shouldAnimate = true));\n });\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (this.disabled) {\n return;\n }\n\n if (\n [\n 'ArrowLeft',\n 'ArrowRight',\n 'ArrowUp',\n 'ArrowDown',\n 'Home',\n 'End',\n ].includes(event.key)\n ) {\n let newPosition = this.position;\n const incr =\n (event.shiftKey ? 10 : 1) * (this.primary === 'end' ? -1 : 1);\n\n event.preventDefault();\n\n if (\n (event.key === 'ArrowLeft' && !this.vertical) \|\|\n (event.key === 'ArrowUp' && this.vertical)\n ) {\n newPosition -= incr;\n }\n\n if (\n (event.key === 'ArrowRight' && !this.vertical) \|\|\n (event.key === 'ArrowDown' && this.vertical)\n ) {\n newPosition += incr;\n }\n\n if (event.key === 'Home') {\n newPosition = this.primary === 'end' ? 100 : 0;\n }\n\n if (event.key === 'End') {\n newPosition = this.primary === 'end' ? 0 : 100;\n }\n\n this.shouldAnimate = false;\n\n this.position = clamp(newPosition, 0, 100);\n raf(() => (this.shouldAnimate = true));\n }\n };\n\n private handleResize = () => {\n if (!this.didLoad \|\| this.isAnimating) return;\n\n // Resize when a primary panel is set\n if (this.primary) {\n this.shouldAnimate = false;\n this.position = this.pixelsToPercentage(this.cachedPositionInPixels);\n raf(() => (this.shouldAnimate = true));\n }\n };\n\n componentDidLoad(): void {\n if (this.positionInPixels) this.handlePositionInPixelsChange();\n setTimeout(() => (this.didLoad = true));\n }\n\n connectedCallback() {\n this.cachedPositionInPixels = this.percentageToPixels(this.position);\n this.attachRO();\n }\n\n disconnectedCallback() {\n this.detachRO();\n }\n\n componentDidRender(): void {\n // bit hacky ... because we use getter / setter for position, there's a render before `position` is passed in via attribute\n // if we set a default position in the class, this causes the divider to jump (from default to user set position)\n // so - wait a render, see if there's a position passed in via attribute, then set default if not\n raf(() => {\n if (typeof this.position === 'undefined') {\n this.position = 50;\n }\n });\n }\n\n render() {\n if (typeof this.position === 'undefined') return;\n const styles: { gridTemplateRows?: string; gridTemplateColumns?: string } =\n {};\n const gridTemplate = this.vertical\n ? 'gridTemplateRows'\n : 'gridTemplateColumns';\n const primary = `\n clamp(\n 0%,\n clamp(\n var(--min),\n ${this.position}% - var(--divider-width) / 2,\n var(--max)\n ),\n calc(100% - var(--divider-width))\n )\n `;\n const secondary = 'auto';\n\n if (this.primary === 'end') {\n styles[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;\n } else {\n styles[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;\n }\n\n return (\n <Host style={styles}>\n <div part=\"panel start\" class=\"start\">\n <slot name=\"start\"></slot>\n </div>\n <div\n part=\"divider\"\n class=\"divider\"\n tabindex={this.disabled ? undefined : '0'}\n role=\"separator\"\n aria-label=\"Resize\"\n onKeyDown={this.handleKeyDown}\n onMouseDown={this.handleDrag}\n onTouchStart={this.handleDrag}\n >\n <slot name=\"handle\">\n {!this.disabled && this.vertical ? (\n <nano-icon slot=\"handle\" name=\"solid/grip-lines\" />\n ) : (\n <nano-icon slot=\"handle\" name=\"solid/grip-lines-vertical\" />\n )}\n </slot>\n </div>\n <div part=\"panel end\" class=\"end\">\n <slot name=\"end\"></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/nano-tooltip.cjs.entry.js CHANGED Viewed

@@ -6,7 +6,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-cb62df44.js');
-const popover = require('./popover-55c687c2.js');
+const popover = require('./popover-848d73ea.js');
+require('./index-53d02e05.js');
 const 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}";

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

	@@ -1 +1 @@
1	- {"file":"nano-tooltip.entry.cjs.js","mappings":"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","names":["Popover","h","Host"],"sources":["./src/components/tooltip/tooltip.scss?tag=nano-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx"],"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"],"version":3}
1	+ {"file":"nano-tooltip.entry.cjs.js","mappings":"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","names":["Popover","h","Host"],"sources":["./src/components/tooltip/tooltip.scss?tag=nano-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx"],"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"],"version":3}

package/dist/cjs/{popover-55c687c2.js → popover-848d73ea.js} RENAMED Viewed

@@ -3,6 +3,8 @@
  */
 'use strict';
+const index = require('./index-53d02e05.js');
 var top = 'top';
 var bottom = 'bottom';
 var right = 'right';
@@ -1837,7 +1839,7 @@ class Popover {
   show() {
     this.isVisible = true;
     this.popover.hidden = false;
-    requestAnimationFrame(() => this.popover.classList.add(this.options.visibleClass));
+    index.raf(() => this.popover.classList.add(this.options.visibleClass));
     if (this.popper) {
       this.popper.destroy();
     }
@@ -1896,4 +1898,4 @@ class Popover {
 exports.Popover = Popover;
-//# sourceMappingURL=popover-55c687c2.js.map
+//# sourceMappingURL=popover-848d73ea.js.map