npm - @nanoporetech-digital/components - Versions diffs - 7.9.2 → 8.0.0-alpha.1 - Mend

@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.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 (1782) hide show

package/dist/esm/nano-sortable.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"nano-sortable.entry.js","mappings":"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","names":["nanoDebounce"],"sources":["src/components/sortable/sortable.scss?tag=nano-sortable&encapsulation=shadow","src/components/sortable/sortable.tsx"],"sourcesContent":["@use '../../global/style/utilities/mixins' as mx;\n\n:host {\n position: relative;\n display: block;\n}\n\n.sortable__live-region {\n @include mx.visually-hide();\n}\n","import {\n Prop,\n Element,\n Event,\n EventEmitter,\n Component,\n ComponentInterface,\n Watch,\n Method,\n State,\n Host,\n readTask,\n writeTask,\n Build,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { drag } from '../../utils/drag';\nimport { nanoDebounce } from '../..';\nimport { addListeners } from '../../utils/events';\n\n// Orientation map to limit dragging to horizontal or vertical.\nconst orientationMap = {\n horizontal: { x: 1, y: 0 },\n vertical: { x: 0, y: 1 },\n};\n\nlet sortableIds = 0;\n\n/**\n * An accessible and flexible re-order / sort utility component.\n *\n *- Drag and drop via mouse, touch or keyboard\n *- Live announcements for screen readers\n *- Works with or without an explicit handle (although with is preferable)\n\n * @part announcements - the a11y, live region. Visually hidden by default\n *\n * @slot - The default slot containing any items you might want to sort\n */\n@Component({\n tag: 'nano-sortable',\n shadow: true,\n styleUrl: 'sortable.scss',\n})\nexport class Sortable implements ComponentInterface {\n /// Public API & surface ///\n\n /** A css query selector which matches a set of elements that should be sortable. e.g. `<li>` or `<tr>` */\n @Prop() itemSelector = 'li';\n @Watch('itemSelector')\n handleItemSelectorChange() {\n this.refreshKeyboardHandles();\n }\n\n /** A css query selector which matches an element *within* the `itemSelector` element\n * which will act like a drag handle. **Note** For keyboard a11y it's recommended\n * to use `handleSelector` when possible. Alternatively, the `createKeyboardHandle` prop will be used */\n @Prop() handleSelector?: string;\n @Watch('handleSelector')\n handleHandleSelectorChange() {\n this.refreshKeyboardHandles();\n this.attachMutationObserver();\n }\n\n /** When dragging between grouped collections of items, it is possible to drag all sortable items from one group to another.\n * At that point, you will not be able to drag items back to the original group.\n * A `dropzoneSelector` allows you to define a placeholder area where items can always be dropped.\n */\n @Prop() dropzoneSelector?: string;\n\n /** Accessibility helper text applied to handle controls */\n @Prop() helperText =\n 'Press \"Space\" or \"Enter\" to enable element reordering and use the arrow keys to reorder items.' +\n 'Press \"Escape\" to cancel reordering. Alternatively, use your mouse to drag / reorder.';\n\n /**\n * As a sortable element is interacted with, announcements are made to screen readers\n * - informing the user what is changing.\n * By default, the text from the element is extracted to describe the interacted with element.\n * Use this function to provide a more meaningful, concise item descriptor\n * @param el the element being interacted with\n * @returns a string, describing the element being interacted with\n */\n @Prop() itemDescriptor = (el: Element) => `\"${el?.textContent.trim()}\"`;\n\n /**\n * Used to generate a screen reader live update, informing the user of the current element being grabbed.\n * @param el the element that has been grabbed by the user\n * @returns a string, describing the element being grabbed\n */\n @Prop() grabbedHelperText = (el: Element) =>\n `${this.itemDescriptor(el)} grabbed`;\n\n /**\n * Used to generate a screen reader live update, informing the user of the current element being dropped.\n * @param el the element that has been dropped by the user\n * @returns a string, describing the element that has been dropped\n */\n @Prop() droppedHelperText = (el: Element) =>\n `${this.itemDescriptor(el)} dropped`;\n\n /**\n * Used to generate a screen reader live update, informing the user when items have been reordered.\n * @param el the element that has been reordered by the user\n * @param elements the elements in the sortable list\n * @param position the new position of the dropped element\n * @returns a string, describing the element being dropped\n */\n @Prop() reorderHelperText = (\n el: Element,\n elements: Element[],\n position: number\n ) =>\n `The list has been reordered, ${this.itemDescriptor(\n el\n )} is now item ${position} of ${elements.length}`;\n\n /**\n * A function that should attach a keyboard accessible control.\n * When a `handleSelector` is not used - to allow keyboard accessibility -\n * `createKeyboardHandle` should render a focusable element.\n *\n * If your sortable item is itself focusable,\n * you must use this function to render a control *outside* of the focusable element.\n * @param _number\n * @param _element\n * @returns a function that attaches a keyboard accessible handle control element.\n * The function itself *must* return the handle element.\n */\n @Prop() createKeyboardHandle = (_number: number, _element: Element) => {\n const handleTpl = /* html */ `\n <nano-icon-button\n slot=\"end\"\n icon-name=\"light/arrows-up-down-left-right\"\n class=\"nano-sortable__keyboard-handle visually-hidden\"\n label=\"Re-order this item\"\n ></nano-icon-button>`;\n const div = document.createElement('div');\n div.innerHTML = handleTpl;\n\n const handle = div.children[0] as HTMLElement;\n _element.append(handle);\n return handle;\n };\n @Watch('createKeyboardHandle')\n handleCreateKeyboardHandleChange() {\n this.refreshKeyboardHandles();\n }\n\n /** use `sortableHostElement` to watch a sortable list without needing to wrap in `nano-sortable`.\n * Note that the `sortableHostElement` element css `position` will be set to `relative` */\n @Prop() sortableHostElement?: HTMLElement;\n @Watch('sortableHostElement')\n handleSortableHostElement(_newVal?, oldVal?: HTMLElement) {\n if (oldVal) this.removeEventHandlers(oldVal);\n\n this.addEventHandlers();\n this.refreshKeyboardHandles();\n this.attachMutationObserver();\n\n if (this.sortableHostElement) {\n // sortable host must have position relative\n this.sortableHostElement.style.position = 'relative';\n }\n }\n\n /** Items being sorted will animate into place */\n @Prop() animationEnabled = true;\n\n /** Use this class to change how the element looks whilst being sorted */\n @Prop() draggedClass = 'nano-sortable__dragged';\n\n /** Use this class to change how the handle looks whilst being sorted */\n @Prop() handleDraggedClass = 'nano-sortable__handle-dragged';\n\n /** Use this class to change how the element looks when acting as a placeholder */\n @Prop() placeholderClass = 'nano-sortable__placeholder';\n\n /** Used in-conjunction with `dropzoneSelector`, applied when a dropzone is dragged over */\n @Prop() dropzoneActiveClass?: string = '';\n\n /** The css animation timing applied when `animationEnabled` is `true` */\n @Prop() animationTiming: any = { duration: 200, easing: 'ease-out' };\n\n /** The axis to lock dragging elements to. `undefined` means any axis */\n @Prop() orientation?: 'horizontal' | 'vertical';\n\n /** Dragged items by default, will take whatever default css is applied in situ.\n * When sortable items' dimensions are dynamic (i.e they can shrink / grow via the space allowed) dragging items can look 'wrong'.\n * Apply `dragResize` to read & recreate the dragged items current dimensions when dragged. */\n @Prop() dragResize = false;\n\n /** Fired when an the order changes. Use this to update any underlying data model.\n * `event.preventDefault()` to prevent the element being moved; will revert to original position. */\n @Event() nanoOrderChange: EventEmitter<{\n element: HTMLElement;\n originalIndex: number;\n targetIndex: number;\n }>;\n\n /** Fired when a sortable element is picked-up; via keyboard, mouse or touch.\n * `event.preventDefault()` to prevent the element being picked-up. */\n @Event() nanoGrabbed: EventEmitter<{ element: HTMLElement; index: number }>;\n\n /** Fired when a sortable element is dropped after having been picked up. */\n @Event() nanoDropped: EventEmitter<{ element: HTMLElement }>;\n\n /** If sortable elements change dynamically, use this method to add handle controls to new elements */\n @Method()\n async refreshKeyboardHandles() {\n if (this.handleSelector) {\n if (this.keyboardHandleMap?.size) {\n this.keyboardHandleMap.clear();\n }\n\n this.sortableHost\n .querySelectorAll<HTMLElement>(this.handleSelector)\n .forEach((handle) => {\n if (!handle.getAttribute('aria-describedby'))\n handle.setAttribute('aria-describedby', this.sortableId);\n const sortEle = handle.closest<HTMLElement>(this.itemSelector);\n if (sortEle) this.keyboardHandleMap.set(handle, sortEle);\n });\n return;\n }\n\n if (this.keyboardHandleMap?.size) {\n this.keyboardHandleMap?.forEach((_ele, handle) => handle.remove());\n this.keyboardHandleMap.clear();\n }\n this.sortableHost\n .querySelectorAll<HTMLElement>(this.itemSelector)\n .forEach((ele, i) => {\n const handle = this.createKeyboardHandle(i, ele);\n if (!handle) {\n console.error(\n '`createKeyboardHandle` *must* return the handle element it creates'\n );\n return;\n }\n this.keyboardHandleMap.set(handle, ele);\n handle.setAttribute('aria-describedby', this.sortableId);\n });\n }\n\n /// Private state & logic ///\n\n @Element() host: HTMLNanoSortableElement;\n private dragRequestPending = false;\n private draggedElement?: HTMLElement;\n private draggedElementClone?: HTMLElement;\n private draggedElementOrigin?: HTMLElement;\n private sortableNodes: HTMLElement[] = [];\n private dropzoneNodes: HTMLElement[] = [];\n private animatedElements: HTMLElement[] = [];\n private animationPromise?: Promise<void>;\n private keyboardHandleMap: Map<HTMLElement, HTMLElement> = new Map();\n private sortableId = `nano-sortable-${sortableIds++}`;\n private mouseDownTimer: number;\n private mutationObserver: MutationObserver;\n\n @State() keyboardSortActive = false;\n @State() ariaTextList: string[] = [];\n\n /**\n * Get instance of sortable host.\n * By default it is `nano-sortable` which can be overridden by property `sortableHostElement`\n */\n get sortableHost() {\n if (this.sortableHostElement) return this.sortableHostElement;\n return this.host;\n }\n\n /**\n * Queues aria messages which are then displayed in a 'live' region.\n * Messages are cleared after 10s\n * @param msg aria message to announce\n */\n private addAriaMsg(msg: string) {\n this.ariaTextList = [...this.ariaTextList, msg];\n\n setTimeout(() => {\n const mIdx = this.ariaTextList.indexOf(msg);\n this.ariaTextList.splice(mIdx, 1);\n this.ariaTextList = [...this.ariaTextList];\n }, 10000);\n }\n\n /**\n * Try to stop text highlight whilst dragging\n * @param userSelect\n */\n private updateUserSelectStyle(userSelect: '' | 'none') {\n this.host.style.userSelect = userSelect;\n }\n\n /**\n * Fast and simple hit test to check whether the center of a node intersects with the rectangle of any of the\n * given targets. Returns an array of matches.\n * @param node\n * @param targets\n * @returns all the items that currently intersect with the target node\n */\n private hitTest(node: HTMLElement, targets: HTMLElement[]): HTMLElement[] {\n const {\n left: l,\n top: t,\n width: w,\n height: h,\n } = node.getBoundingClientRect();\n const x = l + w / 2;\n const y = t + h / 2;\n\n return targets.filter((item) => {\n const { left, right, top, bottom } = item.getBoundingClientRect();\n return !(x < left || x > right || y < top || y > bottom);\n });\n }\n\n /**\n * Returns a boolean indicating whether the node is currently in an animation.\n * @param node\n * @returns whether a node is currently animating or not\n */\n private isAnimating(node: HTMLElement) {\n return this.animatedElements.indexOf(node) !== -1;\n }\n\n /**\n * Triggers a CSS animation on a node with the given dx and dy. Used following dom updates to make it appear as\n * if nodes animate from their old to their new position in the dom. */\n private animateNode(node: HTMLElement, dx = 0, dy = 0) {\n if (!node.animate) {\n return;\n }\n\n // keep a stack of currently animating nodes to exclude as drag & drop targets.\n this.animatedElements.push(node);\n\n node.style.willChange = 'transform';\n\n // animate from dx/dy (old node position) to none (new node position)\n writeTask(() => {\n this.animationPromise = new Promise((resolve) => {\n node\n .animate(\n [\n { transform: `translate3d(${dx}px, ${dy}px, 0)` },\n { transform: 'none' },\n ],\n this.animationTiming\n )\n .addEventListener(\n 'finish',\n () => {\n const index = this.animatedElements.indexOf(node);\n node.style.willChange = '';\n\n if (index !== -1) {\n // splice out when done to unlock as a valid target\n this.animatedElements.splice(index, 1);\n }\n\n resolve();\n delete this.animationPromise;\n },\n { once: true }\n );\n });\n });\n }\n\n /**\n * Inserts node at target to update sibling sorting. If the node precedes the target, it is inserted after it;\n * If it follows the target, it is inserted before it. This ensures any node can be dragged from the very\n * beginning to the very end and vice versa. The animateNode function is called for all nodes that moved because\n * of this dom update */\n private insertAtTarget(node: Element, target: HTMLElement) {\n if (!node || !target) return;\n\n let offsets: any[] = [];\n if (this.animationEnabled) {\n offsets = this.sortableNodes.map((item) => ({\n x: item.offsetLeft,\n y: item.offsetTop,\n }));\n }\n\n if (!node.isConnected || !target.isConnected) return;\n\n if (this.dropzoneNodes.indexOf(target) > -1) {\n target.append(node);\n } else {\n const nodeComparison = node.compareDocumentPosition(target);\n let position;\n\n if (nodeComparison & this.host.DOCUMENT_POSITION_FOLLOWING) {\n position =\n target.parentNode === node.parentNode ? 'afterend' : 'beforebegin';\n }\n if (nodeComparison & this.host.DOCUMENT_POSITION_PRECEDING) {\n position =\n target.parentNode === node.parentNode ? 'beforebegin' : 'afterend';\n }\n if (position) target.insertAdjacentElement(position, node);\n }\n\n if (this.animationEnabled) {\n this.sortableNodes.forEach((sortableNode, i) => {\n const { x, y } = offsets[i];\n const dx = x - sortableNode.offsetLeft;\n const dy = y - sortableNode.offsetTop;\n if (dx !== 0 || dy !== 0) {\n this.animateNode(sortableNode, dx, dy);\n }\n });\n }\n }\n\n private reset() {\n if (\n this.draggedElementClone !== undefined &&\n this.draggedElementClone.parentNode !== null\n ) {\n this.draggedElementClone.parentNode.removeChild(this.draggedElementClone);\n }\n\n if (\n this.draggedElement &&\n this.draggedElement.parentNode &&\n this.draggedElementOrigin\n ) {\n this.draggedElement.classList.remove(this.placeholderClass);\n }\n\n if (this.dropzoneActiveClass && this.dropzoneNodes.length) {\n this.dropzoneNodes.forEach((dze) =>\n dze.classList.remove(this.dropzoneActiveClass)\n );\n }\n\n delete this.draggedElementClone;\n delete this.draggedElement;\n\n this.dropzoneNodes = [];\n this.sortableNodes = [];\n this.animatedElements = [];\n this.dragRequestPending = false;\n this.updateUserSelectStyle('');\n }\n\n /**\n * Clones a given node to visually drag around. The original node is left in the same flow as its siblings.\n * Clone styles are added onto the style object directly, since the ::slotted()\n * selector can't universally target nodes that may be nested an unknown amount of shadow dom levels deep\n * @param node html node to clone\n * @returns the cloned html node\n */\n private createClone(node: HTMLElement): HTMLElement {\n const clone = node.cloneNode(true) as HTMLElement;\n if (node.id) clone.id = 'clone__' + clone.id;\n\n /**\n * Bugfix for table row sorting.\n * During dragging table rows shrink, so we manually set them width of original node.\n */\n Array.from(clone.children).forEach((nodeChild: HTMLElement, index) => {\n const clonedNodeChild = nodeChild;\n const originalNodeChild = node.children.item(index) as HTMLElement;\n\n if (originalNodeChild) {\n clonedNodeChild.style.width = `${originalNodeChild.offsetWidth}px`;\n }\n });\n const {\n offsetLeft: x,\n offsetTop: y,\n offsetWidth: w,\n offsetHeight: h,\n } = node;\n\n Object.assign(clone.style, {\n position: 'absolute',\n left: `calc(${x}px - var(--grab-offset-x, 0px))`,\n top: `calc(${y}px - var(--grab-offset-y, 0px))`,\n height: this.dragResize ? `${h}px` : undefined,\n width: this.dragResize ? `${w}px` : undefined,\n willChange: 'transform,opacity',\n });\n\n clone.classList.add(this.draggedClass);\n\n return node.parentNode.appendChild(clone);\n }\n\n /// Event handlers ///\n\n private removeEventHandlers(ele?: HTMLElement) {\n ele = ele || this.sortableHost;\n ele.removeEventListener('mousedown', this.handleTrack);\n ele.removeEventListener('touchstart', this.handleTrack);\n ele.removeEventListener('keydown', this.handleKeydown);\n }\n\n private addEventHandlers(ele?: HTMLElement) {\n ele = ele || this.sortableHost;\n addListeners(ele, 'mousedown touchstart', this.handleTrack, {\n passive: true,\n });\n ele.addEventListener('keydown', this.handleKeydown);\n }\n\n /**\n * Watch for any changes in grab-able handle elements.\n */\n private attachMutationObserver() {\n if (!Build.isBrowser) return;\n\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = undefined;\n }\n\n this.mutationObserver = new MutationObserver(() => {\n const currHandles = Array.from(this.keyboardHandleMap.values());\n const newHandles = Array.from(\n this.sortableHost.querySelectorAll<HTMLElement>(this.itemSelector)\n );\n\n // simple test for equality\n if (\n currHandles.length !== newHandles.length ||\n !!newHandles.find((h) => !currHandles.includes(h))\n ) {\n this.refreshKeyboardHandles();\n }\n });\n this.mutationObserver.observe(this.sortableHost, {\n subtree: true,\n childList: true,\n });\n }\n\n private handleKeydown(e: KeyboardEvent) {\n const targetElement = e.target as HTMLElement;\n let foundHandle: HTMLElement;\n let sortEle: HTMLElement;\n\n if (this.handleSelector) {\n foundHandle = targetElement.closest(this.handleSelector);\n sortEle = targetElement.closest(this.itemSelector);\n } else {\n sortEle = this.keyboardHandleMap.get(targetElement);\n foundHandle = targetElement;\n }\n\n // have we found a handle and matching sort element from the keydown element\n if (!foundHandle || !sortEle) return;\n\n const activateSort = (isActive: boolean) => {\n this.keyboardSortActive = isActive;\n this.draggedElement = isActive ? sortEle : undefined;\n sortEle.classList.toggle(this.draggedClass, isActive);\n foundHandle.classList.toggle(this.handleDraggedClass, isActive);\n\n if (isActive) {\n this.addAriaMsg(this.grabbedHelperText(sortEle));\n document.addEventListener('mousedown', () => activateSort(false), {\n once: true,\n });\n } else {\n this.addAriaMsg(this.droppedHelperText(sortEle));\n }\n };\n\n // start editing this element's order?\n if ([' ', 'Space', 'Enter'].includes(e.key)) {\n e.preventDefault();\n\n if (!this.keyboardSortActive) {\n // grabbed the element\n activateSort(true);\n\n this.sortableNodes =\n Array.from(this.sortableHost.querySelectorAll(this.itemSelector)) ||\n [];\n const nanoGrabbedEv = this.nanoGrabbed.emit({\n element: sortEle,\n index: this.sortableNodes.indexOf(sortEle),\n });\n\n if (nanoGrabbedEv.defaultPrevented) {\n activateSort(false);\n return;\n }\n } else {\n // dropped the element\n activateSort(false);\n this.nanoDropped.emit({ element: sortEle });\n }\n return;\n }\n if (!this.keyboardSortActive) return;\n\n // Tabbing away from this handle - deactivate\n if (['Escape', 'Tab'].includes(e.key)) activateSort(false);\n\n let moveKeys = ['Home', 'End'];\n if (!this.orientation || this.orientation === 'horizontal')\n moveKeys = [...moveKeys, 'ArrowRight', 'ArrowLeft'];\n if (!this.orientation || this.orientation === 'vertical')\n moveKeys = [...moveKeys, 'ArrowUp', 'ArrowDown'];\n\n if (!moveKeys.includes(e.key)) return;\n\n // move the element with the keyboard\n e.preventDefault();\n\n /** Collect all elements that have drag positions.\n * Both sortable elements and 'dropzones' (placeholders where items can always be placed) */\n\n this.sortableNodes =\n Array.from(this.sortableHost.querySelectorAll(this.itemSelector)) || [];\n this.dropzoneNodes =\n Array.from(this.sortableHost.querySelectorAll(this.dropzoneSelector)) ||\n [];\n const currIdx = this.sortableNodes.indexOf(this.draggedElement);\n let curDzIdx: number = -1;\n\n if (this.dropzoneNodes.length) {\n const curDropzone = this.draggedElement.closest<HTMLElement>(\n this.dropzoneSelector\n );\n curDzIdx = this.dropzoneNodes.indexOf(curDropzone);\n curDzIdx = curDzIdx > -1 ? curDzIdx : -1;\n }\n\n /** If we don't have a next / prev sortable element in our list, test to see if there's a dropzone instead */\n const prevEle =\n currIdx - 1 < 0 && curDzIdx > -1\n ? this.dropzoneNodes[curDzIdx - 1]\n : this.sortableNodes[currIdx - 1];\n const nextEle =\n currIdx + 1 === this.sortableNodes.length && curDzIdx > -1\n ? this.dropzoneNodes[curDzIdx + 1]\n : this.sortableNodes[currIdx + 1];\n\n if (e.key === 'Home') {\n this.insertAtTarget(this.draggedElement, this.sortableNodes[0]);\n }\n if (e.key === 'End') {\n this.insertAtTarget(\n this.draggedElement,\n this.sortableNodes[this.sortableNodes.length - 1]\n );\n }\n if (['ArrowRight', 'ArrowDown'].includes(e.key)) {\n this.insertAtTarget(this.draggedElement, nextEle);\n }\n if (['ArrowLeft', 'ArrowUp'].includes(e.key)) {\n this.insertAtTarget(this.draggedElement, prevEle);\n }\n\n this.finishOrder();\n this.draggedElement = sortEle;\n\n const focus = () => {\n requestAnimationFrame(() => {\n if (typeof foundHandle['setFocus'] === 'function')\n (foundHandle as HTMLNanoIconButtonElement).setFocus();\n else foundHandle.focus();\n });\n };\n\n // replace focus to handle so we don't 'drop' the element\n if (this.animationPromise) this.animationPromise.then(() => focus());\n else focus();\n }\n\n /** Tracks a pointer from touchstart/mousedown to touchend/mouseup. */\n private handleTrack(e: PointerEvent) {\n // ignore if we've started dragging or right click\n if (this.dragRequestPending || (e.button && e.button !== 1)) return;\n\n // ignore touchmove events (namespace it so we can remove it)\n const handleMove = (e: Event) => {\n if (e.cancelable) e.preventDefault();\n clearTimeout(this.mouseDownTimer);\n };\n\n // remove temporary events and reset timer\n const resetTrack = () => {\n clearTimeout(this.mouseDownTimer);\n document.removeEventListener('touchmove', handleMove);\n document.removeEventListener('contextmenu', this.finishOrder);\n };\n resetTrack();\n\n // start a timer - only start dragging if pressed for 150ms\n this.mouseDownTimer = window?.setTimeout(() => {\n // ignore if this is not a valid drag target\n if (!this.trackStart(e)) return;\n\n // ignore touchmove events (they scroll the screen)\n document.addEventListener('touchmove', handleMove, {\n passive: false,\n });\n // cancel if user presses and holds (without move) for context menu\n document.addEventListener('contextmenu', this.finishOrder);\n\n this.addAriaMsg(this.grabbedHelperText(this.draggedElement));\n\n drag(this.sortableHost, {\n initialEvent: e,\n relative: true,\n onMove: (x, y) => {\n this.trackMove(x, y);\n },\n onStop: () => {\n this.nanoDropped.emit({ element: this.draggedElement });\n resetTrack();\n\n const didStop = () => {\n this.addAriaMsg(this.droppedHelperText(this.draggedElement));\n requestAnimationFrame(() => this.finishOrder());\n };\n if (this.animationPromise) {\n this.animationPromise.then(() => didStop());\n } else didStop();\n },\n });\n }, 150);\n\n // reset track timer & cancel DnD on mouseup / touchend / touchmove\n addListeners(\n document,\n 'mouseup touchend touchmove',\n () => clearTimeout(this.mouseDownTimer),\n { once: true }\n );\n }\n\n /**\n * Initialized a drag and drop sequence if a child node was clicked that matches the itemSelector property.\n * OR If a handleSelector is defined, a node matching this selector must be clicked instead\n * @returns boolean - whether tracking for this event should continue or not\n */\n private trackStart(e: Event) {\n const targetElement = e.target as HTMLElement;\n let targetHandle: HTMLElement;\n\n // If we have a handle set, return now if not being pressed\n if (this.handleSelector) {\n targetHandle = targetElement.closest(this.handleSelector);\n\n if (!targetHandle) return;\n targetHandle.classList.add(this.handleDraggedClass);\n }\n\n // Check that we've found the target element via itemSelector\n const node = targetElement.closest<HTMLElement>(this.itemSelector);\n if (!node) return false;\n\n this.sortableNodes =\n Array.from(this.sortableHost.querySelectorAll(this.itemSelector)) || [];\n const nanoGrabbedEv = this.nanoGrabbed.emit({\n element: node,\n index: this.sortableNodes.indexOf(node),\n });\n if (nanoGrabbedEv.defaultPrevented) return false;\n\n // Element found... start everything\n e.preventDefault();\n this.updateUserSelectStyle('none');\n this.dragRequestPending = true;\n this.draggedElement = node;\n this.dropzoneNodes =\n Array.from(this.sortableHost.querySelectorAll(this.dropzoneSelector)) ||\n [];\n this.draggedElementClone = this.createClone(node);\n this.draggedElementOrigin = node.nextSibling as HTMLElement;\n this.animatedElements = [];\n this.draggedElement.classList.add(this.placeholderClass);\n return true;\n }\n\n /** Ends re-ordering */\n private finishOrder = () => {\n if (!this.draggedElement) return;\n\n const updated = Array.from(\n this.sortableHost.querySelectorAll<HTMLElement>(this.itemSelector)\n ).filter((ele) => ele !== this.draggedElementClone);\n const originalIndex = this.sortableNodes.indexOf(this.draggedElement);\n const targetIndex = updated.indexOf(this.draggedElement);\n\n if (this.handleSelector) {\n const targetHandle = this.draggedElement.querySelector(\n this.handleSelector\n );\n targetHandle.classList.remove(this.handleDraggedClass);\n }\n\n if (originalIndex !== targetIndex) {\n const orderChangeEv = this.nanoOrderChange.emit({\n element: this.draggedElement,\n originalIndex,\n targetIndex,\n });\n\n if (orderChangeEv.defaultPrevented) {\n /** Event was prevented, wait a moment to send element back to whence it came - gives a nicer visual queue */\n this.animationPromise = new Promise((resolve) => {\n setTimeout(() => {\n this.insertAtTarget(this.draggedElement, updated[originalIndex]);\n this.reset();\n this.dragRequestPending = false;\n resolve();\n }, 200);\n });\n return;\n }\n this.addAriaMsg(\n this.reorderHelperText(this.draggedElement, updated, targetIndex + 1)\n );\n }\n\n this.reset();\n this.dragRequestPending = false;\n };\n\n /**\n * Moves the active node's clone to follow the pointer. The node that the clone intersects with (via hitTest) is\n * the insert point for updated sorting */\n private trackMove = (x: number, y: number) => {\n if (!this.draggedElementClone) {\n return;\n }\n\n if (this.orientation) {\n x = x * orientationMap[this.orientation].x;\n y = y * orientationMap[this.orientation].y;\n }\n\n writeTask(() => {\n Object.assign(this.draggedElementClone.style, {\n transform: `translate3d(${x}px, ${y}px, 0)`,\n });\n });\n\n let target = this.hitTest(this.draggedElementClone, this.sortableNodes)[0];\n let activeDropzone: HTMLElement;\n\n if (this.dropzoneSelector && this.dropzoneActiveClass) {\n readTask(() => {\n activeDropzone = this.draggedElement.closest(this.dropzoneSelector);\n\n writeTask(() => {\n this.dropzoneNodes\n .filter((dze) => dze !== activeDropzone)\n .forEach((dze) => dze.classList.remove(this.dropzoneActiveClass));\n activeDropzone.classList.add(this.dropzoneActiveClass);\n });\n });\n }\n\n // didn't find a target - let's test to see if we can use a drop-zone instead\n if (!target && this.dropzoneNodes.length) {\n target = this.hitTest(this.draggedElementClone, this.dropzoneNodes)[0];\n if (this.draggedElement.closest(this.dropzoneSelector) === target) return;\n }\n\n if (\n // if clone intersects with a valid target,\n target &&\n // other than its own origin,\n target !== this.draggedElement &&\n // and the target isn't currently animating, which causes false hit tests,\n !this.isAnimating(target)\n ) {\n this.insertAtTarget(this.draggedElement, target);\n }\n };\n\n /// Component lifecycle ///\n\n constructor() {\n this.handleTrack = this.handleTrack.bind(this);\n this.handleKeydown = this.handleKeydown.bind(this);\n this.refreshKeyboardHandles = this.refreshKeyboardHandles.bind(this);\n this.refreshKeyboardHandles = nanoDebounce(\n this.refreshKeyboardHandles,\n 500\n );\n }\n\n connectedCallback() {\n this.addEventHandlers();\n this.refreshKeyboardHandles();\n this.attachMutationObserver();\n\n if (Build.isBrowser && !this.host.querySelector(`#${this.sortableId}`)) {\n // inject a light-dom / a11y description that we can connect sortable items to\n this.host.insertAdjacentHTML(\n 'beforeend',\n `<div class=\"visually-hidden\" id=\"${this.sortableId}\">${this.helperText}</div>`\n );\n }\n }\n\n disconnectedCallback() {\n this.removeEventHandlers();\n this.host.querySelector(`#${this.sortableId}`)?.remove();\n\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = undefined;\n }\n }\n\n render() {\n return (\n <Host class=\"nano-sortable\">\n <div\n class=\"sortable__live-region\"\n aria-live=\"polite\"\n aria-relevant=\"additions\"\n aria-atomic=\"true\"\n role=\"log\"\n part=\"announcements\"\n >\n {this.ariaTextList.map((str) => (\n <div>{str}</div>\n ))}\n </div>\n <slot />\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/nano-spinner.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"nano-spinner.entry.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,uiHAAuiH,CAAC;AAC3jH,0BAAe,UAAU;;MCkBZ,OAAO;;;;;IAET,OAAO,GAAY,KAAK,CAAC;;IAG1B,IAAI,GAAqB,QAAQ,CAAC;;IAGjB,OAAO,GAAY,KAAK,CAAC;IAElD,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC;KAC5C;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,cAAc,IACxB,4DAAK,KAAK,EAAC,SAAS,eAAW,MAAM,eAAW,QAAQ,IACtD,4DAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,IAAI,KAAK,KAAK,KAClB,4DAAK,KAAK,EAAC,cAAc,IACvB,4DAAK,KAAK,EAAC,wCAAwC,IACjD,4DAAK,KAAK,EAAC,oCAAoC,GAAO,EACtD,4DAAK,KAAK,EAAC,oCAAoC,GAAO,CAClD,EACN,4DAAK,KAAK,EAAC,wCAAwC,IACjD,4DAAK,KAAK,EAAC,oCAAoC,GAAO,EACtD,4DAAK,KAAK,EAAC,oCAAoC,GAAO,CAClD,EACN,4DAAK,KAAK,EAAC,wCAAwC,IACjD,4DAAK,KAAK,EAAC,oCAAoC,GAAO,EACtD,4DAAK,KAAK,EAAC,oCAAoC,GAAO,CAClD,EACN,4DAAK,KAAK,EAAC,wCAAwC,IACjD,4DAAK,KAAK,EAAC,oCAAoC,GAAO,EACtD,4DAAK,KAAK,EAAC,oCAAoC,GAAO,CAClD,EACN,4DAAK,KAAK,EAAC,wCAAwC,IACjD,4DAAK,KAAK,EAAC,oCAAoC,GAAO,EACtD,4DAAK,KAAK,EAAC,qCAAqC,GAAO,CACnD,CACF,CACP,EACA,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,6DAAM,KAAK,EAAC,eAAe,GAAQ,CAC1D,EACL,IAAI,CAAC,OAAO,KACX,WAAK,KAAK,EAAC,eAAe,EAAC,GAAG,EAAC,cAAc,IAC3C,8DAAQ,CACJ,CACP,EACA,IAAI,CAAC,OAAO,KACX,WAAK,KAAK,EAAC,kBAAkB,EAAC,GAAG,EAAC,iBAAiB,GAAO,CAC3D,CACG,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/spinner/spinner.scss?tag=nano-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx"],"sourcesContent":["@use '../../global/style/nano-theme/tokens';\n\n:host {\n /**\n * @prop --base-color-rgb: default #{tokens.$progress-indicator-color-rgb}\n * @prop --indicator-color: default var(--nano-indicator-color, rgb(var(--base-color-rgb) / 10%));\n * @prop --track-color: default var(--nano-track-color, rgb(var(--base-color-rgb) / 20%));\n * @prop --spinner-scale: optional scaling of the spinner. default contextual font-size\n * @prop --overlay-color: #{tokens.$layer-overlay-light};\n */\n\n display: inline-block;\n\n // --spinner-scale: 5em;\n --base-color-rgb: #{tokens.$progress-indicator-color-rgb};\n --indicator-color:\n var(\n --nano-indicator-color,\n rgb(var(--base-color-rgb) / 100%)\n );\n --track-color: var(--nano-track-color, rgb(var(--base-color-rgb) / 20%));\n --overlay-color: #{tokens.$layer-overlay-light};\n}\n\n.spinner {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n\n :host([overlay]:not([overlay='false'])) & {\n position: absolute;\n inset: 0;\n\n .spinner__loader,\n .spinner__text {\n z-index: 1;\n }\n }\n\n &__overlay {\n background: var(--overlay-color);\n position: absolute;\n inset: 0;\n z-index: 0;\n backdrop-filter: blur(#{tokens.$layer-overlay-blur});\n }\n\n &__loader {\n font-size: var(--spinner-scale, 1em);\n }\n\n &__spin {\n display: block;\n margin: auto;\n inline-size: 1em;\n block-size: 1em;\n border-radius: 50%;\n border: solid 0.1em var(--track-color);\n border-block-start-color: var(--indicator-color);\n border-inline-end-color: var(--indicator-color);\n border-inline-start-color: var(--indicator-color);\n animation: 1s linear infinite spin;\n }\n\n &__dna {\n font-size: 0.2286em;\n display: flex;\n }\n\n &__dnatrack {\n position: relative;\n padding-block: 0;\n padding-inline: 0.625em;\n block-size: 4.375em;\n inline-size: 0.625em;\n overflow: hidden;\n\n &::before {\n content: '';\n position: absolute;\n inset-block-start: 1.875em;\n inset-inline-start: 50%;\n transform: translateX(-50%) translateZ(0);\n inline-size: 0.0625em;\n inline-size: #{'max(.0625em, 1px)'};\n block-size: 0.625em;\n background: var(--track-color);\n animation: flex 1.5s linear infinite;\n transform-origin: center center;\n }\n\n &--2::before {\n animation: flex 1.5s -1.3s linear infinite;\n }\n\n &--3::before {\n animation: flex 1.5s -1.1s linear infinite;\n }\n\n &--4::before {\n animation: flex 1.5s -0.9s linear infinite;\n }\n\n &--5::before {\n animation: flex 1.5s -0.75s linear infinite;\n }\n }\n\n &__dnadot {\n position: absolute;\n inline-size: 0.5em;\n block-size: 0.5em;\n border-radius: 50%;\n background: var(--indicator-color);\n animation: rotate 1.5s linear infinite;\n transform-origin: center center;\n inset-inline-start: 50%;\n transform: translateX(-50%) translateZ(0) translateY(0);\n\n &--2 {\n animation: rotate 1.5s -0.75s linear infinite;\n }\n\n &--3 {\n animation: rotate 1.5s -1.3s linear infinite;\n }\n\n &--4 {\n animation: rotate 1.5s -0.55s linear infinite;\n }\n\n &--5 {\n animation: rotate 1.5s -1.1s linear infinite;\n }\n\n &--6 {\n animation: rotate 1.5s -0.35s linear infinite;\n }\n\n &--7 {\n animation: rotate 1.5s -0.9s linear infinite;\n }\n\n &--8 {\n animation: rotate 1.5s -0.15s linear infinite;\n }\n\n &--9 {\n animation: rotate 1.5s -0.75s linear infinite;\n }\n\n &--10 {\n animation: rotate 1.5s 0s linear infinite;\n }\n }\n\n &__text {\n text-align: center;\n position: relative;\n margin-block-start: 0.5em;\n }\n\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n }\n\n @keyframes rotate {\n 0%,\n 100% {\n transform: translateX(-50%) translateY(0) scale(1);\n }\n\n 25% {\n transform: translateX(-50%) translateY(1.875em) scale(2);\n }\n\n 50% {\n transform: translateX(-50%) translateY(3.75em) scale(1);\n }\n\n 75% {\n transform: translateX(-50%) translateY(1.875em) scale(0.3);\n }\n }\n\n @keyframes flex {\n 0%,\n 100% {\n transform: translateX(-50%) scaleY(5);\n }\n\n 25% {\n transform: translateX(-50%) scaleY(1);\n }\n\n 50% {\n transform: translateX(-50%) scaleY(5);\n }\n\n 75% {\n transform: translateX(-50%) scaleY(1);\n }\n }\n}\n","import {\n Component,\n ComponentInterface,\n Prop,\n Element,\n State,\n Host,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\n\n/**\n * Spinners are used to show the progress of an indeterminate operation.\n * @slot - Used for loading messages\n */\n@Component({\n tag: 'nano-spinner',\n styleUrl: 'spinner.scss',\n shadow: true,\n})\nexport class Spinner implements ComponentInterface {\n @Element() el: HTMLNanoSpinnerElement;\n @State() hasText: boolean = false;\n\n /** The type of spinner animation */\n @Prop() type: 'dna' | 'circle' = 'circle';\n\n /** Displays absolutely with an overlay */\n @Prop({ reflect: true }) overlay: boolean = false;\n\n componentWillLoad() {\n this.hasText = !!this.el.childNodes.length;\n }\n\n render() {\n return (\n <Host class=\"nano-spinner\">\n <div class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\">\n <div class=\"spinner__loader\">\n {this.type === 'dna' && (\n <div class=\"spinner__dna\">\n <div class=\"spinner__dnatrack spinner__dnatrack--1\">\n <div class=\"spinner__dnadot spinner__dnadot--1\"></div>\n <div class=\"spinner__dnadot spinner__dnadot--2\"></div>\n </div>\n <div class=\"spinner__dnatrack spinner__dnatrack--2\">\n <div class=\"spinner__dnadot spinner__dnadot--3\"></div>\n <div class=\"spinner__dnadot spinner__dnadot--4\"></div>\n </div>\n <div class=\"spinner__dnatrack spinner__dnatrack--3\">\n <div class=\"spinner__dnadot spinner__dnadot--5\"></div>\n <div class=\"spinner__dnadot spinner__dnadot--6\"></div>\n </div>\n <div class=\"spinner__dnatrack spinner__dnatrack--4\">\n <div class=\"spinner__dnadot spinner__dnadot--7\"></div>\n <div class=\"spinner__dnadot spinner__dnadot--8\"></div>\n </div>\n <div class=\"spinner__dnatrack spinner__dnatrack--5\">\n <div class=\"spinner__dnadot spinner__dnadot--9\"></div>\n <div class=\"spinner__dnadot spinner__dnadot--10\"></div>\n </div>\n </div>\n )}\n {this.type === 'circle' && <span class=\"spinner__spin\"></span>}\n </div>\n {this.hasText && (\n <div class=\"spinner__text\" key=\"spinner-text\">\n <slot />\n </div>\n )}\n {this.overlay && (\n <div class=\"spinner__overlay\" key=\"spinner-overlay\"></div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1 +0,0 @@

- {"file":"nano-split-pane.entry.js","mappings":"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","names":[],"sources":["src/components/split-pane/split-pane.scss?tag=nano-split-pane&encapsulation=shadow","src/components/split-pane/split-pane.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/nano-theme/tokens';\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(tokens.$colors, lightgrey)}.\n * @prop --content-color: Handle color. Default #{map.get(tokens.$colors, dimgrey)}.\n */\n --divider-width: 12px;\n --divider-hit-area: 14px;\n --min: 0%;\n --max: 100%;\n --background-color: #{map.get(tokens.$colors, lightgrey)};\n --content-color: #{map.get(tokens.$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: #{tokens.$control-focus-color};\n}\n\n:host([disabled]) .divider {\n cursor: not-allowed;\n}\n\n/* Horizontal */\n:host(:not([vertical]):not([disabled])) .divider {\n cursor: col-resize;\n}\n\n:host(:not([vertical])) .divider::after {\n display: flex;\n content: '';\n position: absolute;\n block-size: 100%;\n inset-inline-start:\n calc(\n var(--divider-hit-area) / -2 + var(--divider-width) / 2\n );\n inline-size: 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 inline-size: 100%;\n inset-block-start:\n calc(\n var(--divider-hit-area) / -2 + var(--divider-width) / 2\n );\n block-size: var(--divider-hit-area);\n}\n","import {\n Prop,\n Component,\n Watch,\n Event,\n EventEmitter,\n ComponentInterface,\n Element,\n Host,\n Method,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { drag } from '../../utils/drag';\nimport { clamp } from '../../utils/math';\nimport { debounce } from '../../utils/throttle';\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\n * as a percentage 0-100. Defaults to 50% of the 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 @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 /**\n * Utility to convert % to pixels\n * @param value to convert\n * @returns converted value as pixels\n */\n @Method()\n async getPercentageToPixels(value: number) {\n return this.percentageToPixels(value);\n }\n\n /**\n * Utility to convert pixels to % (`position`)\n * @param value to convert\n * @returns converted value as a %\n */\n @Method()\n async getPixelsToPercentage(value: number) {\n return this.pixelsToPercentage(value);\n }\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 requestAnimationFrame(go);\n };\n\n this.shouldAnimate = false;\n this.isAnimating = true;\n requestAnimationFrame(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 if (!window['ResizeObserver']) return;\n\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, {\n onMove: (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 requestAnimationFrame(() => (this.shouldAnimate = true));\n },\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 requestAnimationFrame(() => (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 requestAnimationFrame(() => (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 requestAnimationFrame(() => {\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} class=\"nano-split-pane\">\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/esm/nano-sticker.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"nano-sticker.entry.js","mappings":"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","names":[],"sources":["src/components/sticker/sticker.scss?tag=nano-sticker&encapsulation=shadow","src/components/sticker/sticker.tsx"],"sourcesContent":["@use '../../global/style/nano-theme/tokens/layers';\n\n:host {\n /**\n * @prop --stuck-left: The left position when your sticker is stuck. This can be useful to force your sticker to fill the viewport for example. Defaults to initial\n * @prop --stuck-right: The right position when your sticker is stuck. This can be useful to force your sticker to fill the viewport for example. Defaults to initial\n * @prop --stuck-z-index: The z-index order to display your sticker. Can be useful when displaying multiple stickers simultaneously. Defaults to #{layers.$layer-index-menubar};\n * @prop --top-hide: This is used for the hide transform animation (e.g. when quiet-mode is on). Defaults to translateY(-110%);\n * @prop --bottom-hide: This is used for the hide transform animation (e.g. when quiet-mode is on). Defaults to translateY(110%);\n */\n\n --stuck-left: initial;\n --stuck-right: initial;\n --stuck-z-index: #{layers.$layer-index-menubar};\n --top-hide: translateY(-110%);\n --bottom-hide: translateY(110%);\n\n display: block;\n max-inline-size: 100%;\n}\n\n:host([sticky]) {\n position: sticky;\n transition: 0.3s ease transform;\n will-change: min-block-size;\n}\n\n:host([sticky][stuck]) {\n inset-inline: var(--stuck-left) var(--stuck-right);\n z-index: var(--stuck-z-index) !important;\n}\n\n:host([sticky][hide][placed-top]) {\n transform: var(--top-hide);\n}\n\n:host([sticky][hide][placed-bottom]) {\n transform: var(--bottom-hide);\n}\n\n:host([sticky][index='1']) {\n z-index: calc(var(--stuck-z-index) + 1);\n}\n\n:host([sticky][index='2']) {\n z-index: calc(var(--stuck-z-index) + 2);\n}\n\n:host([sticky][index='3']) {\n z-index: calc(var(--stuck-z-index) + 3);\n}\n\n:host([sticky][index='4']) {\n z-index: calc(var(--stuck-z-index) + 4);\n}\n\n:host([sticky][index='5']) {\n z-index: calc(var(--stuck-z-index) + 5);\n}\n\n.sticker {\n display: inherit;\n max-inline-size: inherit;\n inline-size: 100%;\n\n &:not(.stuck) {\n inline-size: auto !important;\n }\n\n &.sticky {\n transition: 0.3s ease all;\n position: relative;\n\n :host([index='1']) & {\n z-index: calc(var(--stuck-z-index) + 1);\n }\n\n :host([index='2']) & {\n z-index: calc(var(--stuck-z-index) + 2);\n }\n\n :host([index='3']) & {\n z-index: calc(var(--stuck-z-index) + 3);\n }\n\n :host([index='4']) & {\n z-index: calc(var(--stuck-z-index) + 4);\n }\n\n :host([index='5']) & {\n z-index: calc(var(--stuck-z-index) + 5);\n }\n }\n\n &.stuck {\n position: fixed;\n inset-inline: var(--stuck-left) var(--stuck-right);\n z-index: var(--stuck-z-index);\n transform: translateY(0);\n\n :host([placed-top]) & {\n inset-block-start: 0;\n }\n\n :host([placed-bottom]) & {\n inset-block-end: 0;\n }\n\n &.hide {\n :host([placed-top]) & {\n transform: var(--top-hide);\n }\n\n :host([placed-bottom]) & {\n transform: var(--bottom-hide);\n }\n }\n }\n}\n\n.sticker-content {\n display: flex;\n flex-wrap: wrap;\n}\n","import {\n Component,\n ComponentInterface,\n Host,\n Prop,\n State,\n Watch,\n Element,\n Event,\n EventEmitter,\n Method,\n} from '@stencil/core';\nimport { getOffset } from '../../utils/dom';\nimport { debounce } from '../../utils/throttle';\nimport { findScrollParent } from '../../utils/scroll-parent';\nimport { transformTag, h } from '../../utils/renderer';\n\nfunction _getScrollTop(ele: HTMLElement | Document) {\n return ele instanceof Document ? window.pageYOffset : ele.scrollTop;\n}\n\nfunction _getOffset(ele: HTMLElement, parent: HTMLElement | Document) {\n const parentEle =\n parent instanceof Document ? document.documentElement : parent;\n return getOffset(ele, parentEle);\n}\n\ntype Positions = 'top' | 'bottom' | 'start' | 'end';\n\n/**\n * The Sticker component is a toolbox for 'sticking' items to scrolling containers.\n *\n */\n@Component({\n tag: 'nano-sticker',\n styleUrl: 'sticker.scss',\n shadow: true,\n})\nexport class Sticker implements ComponentInterface {\n private isRtl: boolean = false;\n private io: IntersectionObserver;\n private contentSizeObserver: ResizeObserver;\n private parentSizeObserver: ResizeObserver;\n private sticker: HTMLDivElement;\n private content: HTMLDivElement;\n private scrollPosCache = 0;\n private scrollPosThresholdCache = 0;\n private cacheOffset: number | { v: number; h: number } = 0;\n private slottedContent: Element[];\n private pauseResizeWatcher = false;\n private listenForScrollParent = false;\n private stickToEleInitSize?: DOMRect;\n private positions: Positions[] = [];\n private pauseHide: boolean = false;\n private hasBootstrapped = false;\n\n @Element() host: HTMLNanoStickerElement;\n\n // Internal State\n\n @State() isStuck = false;\n @State() isRootSticker = true;\n @State() hide = false;\n @State() scrollHide = false;\n @State() multiStickerHide = false;\n @State() scrollingTo = false;\n @State() quietModeIsOn = false;\n @State() stuckCounter = 0;\n @State() stickerIndex = 0;\n @State() stickToEle?: HTMLNanoStickerElement;\n @State() triggerPos: { top: number; left: number };\n @State() trigger: HTMLDivElement;\n @State() _offset: number | { v: number; h: number } = 0;\n\n // Public API\n\n /** Only applicable to root stickers. When applied the sticker will grow or shrink to the scrollParent size */\n @Prop() autoResize = true;\n\n /** Manually enable / disabled sticky behaviour */\n @Prop({ mutable: true }) isSticky = true;\n\n /** Distance the item should be stuck from the sticky edge. */\n @Prop({ mutable: true }) offset: number | { v: number; h: number } = 0;\n\n /** The edge of the scroll-parent to stick to */\n @Prop() position: 'top' | 'bottom' = 'top';\n // other opts I'd like one day. 'start' | 'end' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'\n\n /** When applied, the sticker will hide when the scroll-parent\n * is scrolling away from the sticker's stuck position and show when scrolling toward it.\n * By default this will apply when the parent is below either the h or w dimensions */\n @Prop() quietMode: 'on' | 'off' | { h: number; w: number } = {\n h: 600,\n w: 600,\n };\n\n /** When applied stickers will hide upon new stickers being stuck to the same position */\n @Prop() hideOnNewStickers = true;\n\n /** The max width of the item to implement sticky behaviour. */\n @Prop() breakPointMax: null | number = null;\n\n /** The min width of the item to implement sticky behaviour. */\n @Prop() breakPointMin: null | number = null;\n\n /** Define which scroll element to listen & stick to.\n * By default, it will find traverse the DOM to find the closest. */\n @Prop({ mutable: true }) scrollParent?: HTMLElement | Document;\n\n /** Upon being stuck, attach the sticker to another sticker element.\n * JS query selector string or DOM element pointing to a `<nano-sticker>` */\n @Prop() stickTo: string | HTMLNanoStickerElement;\n\n // Broadcasted Events\n\n /** Emitted when a sticker is stuck */\n @Event() nanoStuck!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n /** Emitted when a sticker is unstuck */\n @Event() nanoUnstuck!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n /** Emitted when a sticker is hidden */\n @Event() nanoHide!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n /** Emitted when a sticker is showing */\n @Event() nanoShow!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n // Public methods\n\n /**\n * Method to return the visibility status of the sticker\n * @returns boolean\n */\n @Method()\n async isHiding() {\n return this.hide;\n }\n\n /**\n * Method to return the stuck status of the sticker\n * @returns boolean\n */\n @Method()\n async isSticking() {\n this.shouldStick();\n return this.isStuck;\n }\n\n /**\n * @internal\n * @param offset\n * @returns the trigger position\n */\n @Method()\n async setTriggerPos(offset: number | { v: number; h: number }) {\n return (this._offset = offset);\n }\n\n /**\n * @internal\n * @returns the trigger position\n */\n @Method()\n async getTriggerPos() {\n return this.triggerPos;\n }\n\n /**\n * @internal\n * @param pause\n */\n @Method()\n async pauseHiding(pause: boolean) {\n this.pauseHide = pause;\n }\n\n // Watchers\n\n /** Keep a note of trigger position. Need this to track sticker order in the DOM */\n @Watch('trigger')\n @Watch('scrollParent')\n updateTriggerOffset() {\n if (!this.trigger || !this.scrollParent || !this.listenForScrollParent)\n return;\n this.triggerPos = _getOffset(this.trigger, this.scrollParent);\n }\n\n /** A root sticker is a fixed element Or this sticker is sticking to another.\n * We need a content resize watcher to make sure we maintain a correct placeholder size in the body */\n @Watch('position')\n stickerResizeListener() {\n if (!this.content || !window['ResizeObserver']) return;\n\n if (this.contentSizeObserver) {\n this.contentSizeObserver.disconnect();\n this.contentSizeObserver = undefined;\n }\n\n this.contentSizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n if (this.pauseResizeWatcher) return;\n\n if (entry.contentRect.height) {\n if (this.position === 'top')\n this.host.style.height = entry.contentRect.height + 'px';\n if (this.position === 'bottom')\n this.host.style.minHeight = entry.contentRect.height + 'px';\n }\n }\n });\n this.contentSizeObserver.observe(this.content);\n }\n\n @Watch('quietMode')\n quietModeChange() {\n if (this.quietMode === 'on')\n requestAnimationFrame(() => (this.quietModeIsOn = true));\n else if (this.quietMode === 'off')\n requestAnimationFrame(() => (this.quietModeIsOn = false));\n }\n\n /** offset is part of the public API but we also use it to manipulate trigger points */\n @Watch('offset')\n @Watch('_offset')\n setOffset() {\n if (this.trigger) this.trigger.setAttribute('style', '');\n let v: number, h: number, _v: number, _h: number;\n const sticker: HTMLElement =\n this.isRootSticker || this.stickToEle ? this.sticker : this.host;\n\n if (!sticker) return;\n\n if (typeof this.offset === 'object') ({ v, h } = this.offset);\n else v = h = this.offset;\n\n if (typeof this._offset === 'object') ({ v = _v, h = _h } = this._offset);\n else _v = _h = this._offset;\n\n const setPos = (pos: 'top' | 'bottom' | 'left' | 'right') => {\n const u = pos.match(/(top|bottom)/) ? v : h;\n setTriggetPos(pos);\n sticker.style[pos] = u + 'px';\n if (u)\n this.host.style.setProperty(\n '--hide-transform-amount',\n `(110% + ${u}px)`\n );\n else this.host.style.setProperty('--hide-transform-amount', null);\n };\n\n const setTriggetPos = (pos: 'top' | 'bottom' | 'left' | 'right') => {\n const u = pos.match(/(top|bottom)/) ? v + _v : h + _h;\n this.trigger.style[pos] = u * -1 + 'px';\n this.trigger.style.position = 'relative';\n this.trigger.style.minHeight = '1px';\n this.trigger.style.maxHeight = '1px';\n this.trigger.style.overflow = 'hidden';\n };\n\n if (\n (this.positions.includes('start') && this.isRtl) ||\n (this.positions.includes('end') && !this.isRtl)\n )\n setPos('right');\n\n if (\n (this.positions.includes('end') && this.isRtl) ||\n (this.positions.includes('start') && !this.isRtl)\n )\n setPos('left');\n\n if (this.positions.includes('top')) setPos('top');\n if (this.positions.includes('bottom')) setPos('bottom');\n }\n\n @Watch('position')\n positionChange() {\n this.positions = this.position.split('-') as Positions[];\n this.setOffset();\n }\n\n /** If this sticker is attached to a 'master' sticker (stickToEle),\n * here we move the content of this sticker in and out accordingly */\n @Watch('isStuck')\n async stuckChange() {\n if (this.isStuck) {\n if (this.stickToEle) {\n const content = this.host.children;\n this.slottedContent = Array.from(content);\n\n this.slottedContent.forEach((child: HTMLElement) => {\n this.stickToEle.appendChild(child);\n child.style.order = this.stickerIndex + '';\n });\n\n this.nanoStuck.emit({ sticker: this.stickToEle });\n } else this.nanoStuck.emit({ sticker: this.host });\n } else {\n this.scrollHide = false;\n\n if (this.stickToEle) {\n this.slottedContent.forEach((child: HTMLElement) => {\n this.host.appendChild(child);\n child.style.order = '';\n });\n this.nanoUnstuck.emit({ sticker: this.stickToEle });\n } else this.nanoUnstuck.emit({ sticker: this.host });\n }\n }\n\n /** attach scroll listener. 'hides' stickers when scrolling away from trigger and 'shows' when scrolling toward */\n @Watch('quietModeIsOn')\n attachScrollListeners() {\n if (this.quietModeIsOn)\n this.scrollParent.addEventListener('scroll', this.onScroll, {\n passive: true,\n capture: false,\n });\n else if (this.scrollParent) {\n this.scrollParent.removeEventListener('scroll', this.onScroll);\n this.moveTrigger(true);\n }\n }\n\n /** Add / remove parent scrolling listeners. If there's stickToEle we need to remove them */\n @Watch('scrollParent')\n @Watch('stickToEle')\n handleParentEvents(_, oldParent: null | HTMLElement = null) {\n if (!this.listenForScrollParent) return;\n if (oldParent) this.manageListenersOnParent(false, oldParent);\n if (this.scrollParent) this.manageListenersOnParent(!this.stickToEle);\n }\n\n /** Add remove specific listeners if we're sticking to a sticker.\n * We need to adjust triggers according to the status of the 'master' */\n @Watch('stickToEle')\n stickToEleChange(_, oldEle: null | HTMLNanoStickerElement) {\n if (this.stickToEle) {\n this.stickToEle.addEventListener('nanoHide', this.onStickToDisplayEvent);\n this.stickToEle.addEventListener('nanoShow', this.onStickToDisplayEvent);\n this.stickToEle.addEventListener('nanoStuck', this.onStickToDisplayEvent);\n this.stickToEle.addEventListener(\n 'nanoUnstuck',\n this.onStickToDisplayEvent\n );\n }\n if (oldEle) {\n oldEle.removeEventListener('nanoHide', this.onStickToDisplayEvent);\n oldEle.removeEventListener('nanoShow', this.onStickToDisplayEvent);\n oldEle.removeEventListener('nanoStuck', this.onStickToDisplayEvent);\n oldEle.removeEventListener('nanoUnstuck', this.onStickToDisplayEvent);\n }\n }\n\n /** Find and set the stickToEle from the public, selector string */\n @Watch('stickTo')\n stickToChange() {\n if (typeof this.stickTo === 'string')\n this.stickToEle = this.scrollParent.querySelector(this.stickTo);\n else if (this.stickTo) this.stickToEle = this.stickTo;\n else this.stickToEle = undefined;\n }\n\n /** 2 potential criteria for hiding. Multi-stickers or quiet mode. */\n @Watch('multiStickerHide')\n @Watch('scrollHide')\n visibilityDecisionHandler() {\n if (this.multiStickerHide || this.scrollHide) this.hide = true;\n else this.hide = false;\n }\n\n @Watch('hide')\n handleHideChange() {\n if (this.hide) this.nanoHide.emit({ sticker: this.host });\n else this.nanoShow.emit({ sticker: this.host });\n }\n\n @Watch('scrollParent')\n setupIO() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n if (!this.scrollParent || !this.hasBootstrapped || !this.trigger) return;\n\n this.isRootSticker = this.scrollParent instanceof Document;\n let root = this.scrollParent;\n if (this.scrollParent instanceof Document) root = null;\n\n this.io = new window.IntersectionObserver(\n (_) => {\n if (this.pauseResizeWatcher || !this.isSticky) return;\n this.shouldStick(_.slice(-1)[0]);\n },\n { root: root as HTMLElement }\n );\n\n this.io.observe(this.trigger);\n }\n\n // Private methods / handlers\n\n /** Assesses the public API quitemode and works out if it should be applied atm.\n * If 'small screen', or there is a breakpointmax / min it will add a resizeobserver to conditionally add behaviour */\n private setupParentResizeListener = () => {\n if (!window['ResizeObserver']) return;\n\n if (this.parentSizeObserver) {\n this.parentSizeObserver.disconnect();\n this.parentSizeObserver = undefined;\n }\n\n this.parentSizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n let height: number, width: number;\n if (entry.contentRect.height) height = entry.contentRect.height;\n if (entry.contentRect.width) width = entry.contentRect.width;\n\n if (typeof this.quietMode === 'object') {\n if (width < this.quietMode.w || height < this.quietMode.h)\n this.quietModeIsOn = true;\n else this.quietModeIsOn = false;\n }\n\n if (this.breakPointMin) {\n if (width > this.breakPointMin) this.isSticky = true;\n else this.isSticky = false;\n }\n\n if (this.breakPointMax) {\n if (width < this.breakPointMax) this.isSticky = true;\n else this.isSticky = false;\n }\n\n if (this.isRootSticker && this.sticker && this.autoResize)\n this.sticker.style.width = this.host.scrollWidth + 'px';\n }\n });\n\n const toWatch =\n this.scrollParent instanceof Document\n ? this.scrollParent.documentElement\n : this.scrollParent;\n if (toWatch) this.parentSizeObserver.observe(toWatch);\n };\n\n /** For stickTo stickers. We listen to the events from the 'master' sticker to amend the hide/show trigger\n * Main diffs from root-stickers / non is height being on 'master' */\n private onStickToDisplayEvent = (\n e: CustomEvent<{ sticker: HTMLNanoStickerElement }>\n ) => {\n if (e.detail.sticker !== this.stickToEle) return;\n\n switch (e.type) {\n case 'nanoHide':\n this._offset = 0;\n this.cacheOffset = this.offset;\n this.offset = 0;\n /** trigger moves down, underneath sticker if the main sticker hides */\n if (!this.isStuck) this.moveTrigger(false);\n\n /** If it's an actual 'position: sticky' element, we need to give the sticker an appropriate height.\n * This minimises content jumping around as items are added */\n if (!this.isRootSticker && this.quietModeIsOn) {\n requestAnimationFrame(() => {\n this.stickToEle.style.minHeight =\n this.stickToEleInitSize.height +\n (this.host.scrollHeight +\n (typeof this.cacheOffset === 'object'\n ? this.cacheOffset.v\n : this.cacheOffset)) +\n 'px';\n this.stickToEle.setTriggerPos(this.stickToEleInitSize.height * -1);\n });\n }\n break;\n case 'nanoShow':\n this._offset = this.stickToEleInitSize.height;\n this.offset = this.cacheOffset;\n this.moveTrigger(true);\n\n /** reset master sticker size */\n if (!this.isRootSticker && this.quietModeIsOn) {\n requestAnimationFrame(() => {\n this.stickToEle.style.minHeight = '';\n this.stickToEle.setTriggerPos(0);\n });\n }\n break;\n case 'nanoStuck':\n this.stickToEleInitSize = this.stickToEle.getBoundingClientRect();\n this._offset = this.stickToEleInitSize.height;\n break;\n }\n };\n\n /** Add or removes event listeners / observers on scrolling parent\n * for when the scrolling parent changes, or, this sticker is sticking to another */\n private manageListenersOnParent(\n addEvents: boolean,\n ele?: HTMLElement | Document\n ) {\n const scrollParent = ele || this.scrollParent;\n\n if (!scrollParent) return;\n\n if (!addEvents) {\n try {\n if (this.quietModeIsOn)\n scrollParent.removeEventListener('scroll', this.onScroll);\n scrollParent.removeEventListener('nanoStuck', this.onStickEvent);\n scrollParent.removeEventListener('nanoUnstuck', this.onStickEvent);\n } catch (_e) {\n console.error('Events haven`t been added');\n }\n } else {\n scrollParent.addEventListener('nanoStuck', this.onStickEvent);\n scrollParent.addEventListener('nanoUnstuck', this.onStickEvent);\n\n if (this.quietModeIsOn) this.attachScrollListeners();\n }\n this.setupParentResizeListener();\n }\n\n /** Handler applied to scrolling parent. When 'hideOnNewStickers' is true, hide this sticker on subsequent stuck stickers. */\n private onStickEvent = async (\n e: CustomEvent<{ sticker: HTMLNanoStickerElement }>\n ) => {\n const sticker = e.detail ? e.detail.sticker : null;\n if (!sticker || sticker.position !== this.position) return;\n\n const incomingTriggerPos = await sticker.getTriggerPos();\n\n if (\n e.type === 'nanoStuck' &&\n sticker !== this.host &&\n sticker.scrollParent === this.host.scrollParent\n ) {\n this.stickerIndex++;\n\n if (!this.hideOnNewStickers) return;\n\n if (\n (this.positions.includes('top') &&\n this.triggerPos.top < incomingTriggerPos.top) ||\n (this.positions.includes('bottom') &&\n this.triggerPos.top > incomingTriggerPos.top)\n ) {\n this.multiStickerHide = true;\n this.stuckCounter++;\n }\n }\n\n if (\n e.type === 'nanoUnstuck' &&\n sticker !== this.host &&\n sticker.scrollParent === this.host.scrollParent\n ) {\n this.stickerIndex--;\n\n if (!this.hideOnNewStickers) return;\n\n if (\n (this.positions.includes('top') &&\n this.triggerPos.top < incomingTriggerPos.top) ||\n (this.positions.includes('bottom') &&\n this.triggerPos.top > incomingTriggerPos.top)\n ) {\n this.stuckCounter--;\n if (this.stuckCounter < 1) this.multiStickerHide = false;\n }\n }\n };\n\n /** Scroll handler applied to scrolling parent. Only applied when quietmode is on.\n * 'hides' stickers when scrolling over 100px away from trigger and 'shows' when scrolling toward */\n private onScroll = () => {\n const y: number = _getScrollTop(this.scrollParent);\n\n // scrolling up\n if (y < this.scrollPosCache) {\n if (!this.positions.includes('bottom')) this.handleScrollTo();\n else this.handleScrollAway(y);\n }\n\n // scrolling down\n if (y > this.scrollPosCache) {\n if (!this.positions.includes('bottom')) this.handleScrollAway(y);\n else this.handleScrollTo();\n }\n this.scrollPosCache = y;\n };\n\n /** Watch for scroll direction. Only applies when quietmode is on.\n * We need to addjust the position of the trigger when the sticker is hidden */\n private handleScrollTo() {\n this.scrollPosThresholdCache = null;\n if (!this.scrollHide) return;\n\n if (this.scrollingTo !== true) {\n this._offset = this.cacheOffset || this._offset;\n }\n this.scrollingTo = true;\n this.scrollHide = false;\n }\n\n private handleScrollAway(currScroll: number) {\n if (this.scrollHide) return;\n\n if (!this.isStuck) return;\n\n if (this.scrollingTo !== false) {\n this.cacheOffset = this._offset;\n this._offset = 0;\n }\n this.scrollingTo = false;\n\n if (!this.scrollPosThresholdCache)\n this.scrollPosThresholdCache = currScroll;\n else if (\n !this.pauseHide &&\n Math.abs(currScroll - this.scrollPosThresholdCache) > 100\n )\n this.scrollHide = true;\n }\n\n private moveTrigger(toInitial?: boolean) {\n if (\n (this.positions.includes('bottom') && !toInitial) ||\n (!this.positions.includes('bottom') && toInitial)\n ) {\n this.host.parentNode.insertBefore(this.trigger, this.host);\n } else\n this.host.parentNode.insertBefore(this.trigger, this.host.nextSibling);\n }\n\n private shouldStick(data?: IntersectionObserverEntry) {\n let scrollAmt: number;\n\n if (this.positions.includes('top')) {\n if (!this.isRootSticker) {\n scrollAmt = _getOffset(this.trigger, this.scrollParent).top;\n } else {\n scrollAmt = this.trigger.getBoundingClientRect().top;\n }\n this.isStuck = scrollAmt < -1;\n } else if (this.positions.includes('bottom')) {\n scrollAmt = this.trigger.getBoundingClientRect().top;\n const parentBounding =\n data && data.rootBounds\n ? data.rootBounds\n : (this.scrollParent instanceof Document\n ? document.documentElement\n : this.scrollParent\n ).getBoundingClientRect();\n this.isStuck =\n !data.isIntersecting ||\n scrollAmt > parentBounding.height + parentBounding.top;\n }\n }\n\n private bootstrapGurantor() {\n this.hasBootstrapped = true;\n\n const scrollParent = this.scrollParent || findScrollParent(this.host);\n this.scrollParent =\n scrollParent === document.documentElement ? document : scrollParent;\n this.isRootSticker = this.scrollParent instanceof Document;\n\n this.trigger = this.trigger || document.createElement('div');\n this.trigger.innerHTML = ' ';\n this.trigger.classList.add('sticker-trigger');\n\n this.positionChange();\n this.moveTrigger(true);\n this.quietModeChange();\n\n this.listenForScrollParent = true;\n this.handleParentEvents(true);\n\n this.stickerIndex = Array.from(\n this.scrollParent.querySelectorAll(transformTag('nano-sticker'))\n )\n .filter(\n (sticker: HTMLNanoStickerElement) => sticker.position === this.position\n )\n .findIndex((sticker) => sticker === this.host);\n\n this.setOffset();\n this.stickerResizeListener();\n this.setupParentResizeListener();\n\n // bit of a hack ... add default 'order'. Required for 'stickTo' elements.\n this.slottedContent = Array.from(this.host.children);\n this.slottedContent.forEach((child: HTMLElement) => {\n child.style.order = this.stickerIndex + '';\n });\n\n this.updateTriggerOffset();\n this.stickToChange();\n this.setupIO();\n this.onStickToDisplayEvent = debounce(this.onStickToDisplayEvent, 50);\n }\n\n // Stencil methods\n\n connectedCallback() {\n this.isRtl =\n this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';\n\n // this is all horrible.... shrug\n document.documentElement.addEventListener('nanoComponentsReady', () => {\n setTimeout((_) => this.bootstrapGurantor(), 200);\n });\n setTimeout((_) => {\n if (!this.hasBootstrapped) this.bootstrapGurantor();\n }, 1000);\n }\n\n disconnectedCallback() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n\n if (this.parentSizeObserver) {\n this.parentSizeObserver.disconnect();\n this.parentSizeObserver = undefined;\n }\n\n this.scrollParent = null;\n this.hasBootstrapped = false;\n }\n\n render() {\n return (\n <Host\n sticky={!this.isRootSticker && !this.stickToEle && this.isSticky}\n hide={this.hide && this.isStuck}\n siblings={this.stuckCounter}\n index={this.stickerIndex}\n stuck={this.isStuck && this.isSticky}\n placed-bottom={this.positions.includes('bottom')}\n placed-top={this.positions.includes('top')}\n placed-end={this.positions.includes('end')}\n placed-start={this.positions.includes('start')}\n class=\"nano-sticker\"\n >\n <div\n class={{\n sticker: true,\n sticky: this.isRootSticker && this.isSticky,\n stuck: this.isStuck && this.isRootSticker && this.isSticky,\n hide: this.isRootSticker && this.hide && this.isStuck,\n }}\n ref={(div) => (this.sticker = div)}\n >\n <div class=\"sticker-content\" ref={(div) => (this.content = div)}>\n <slot />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/nano-tab-content.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"nano-tab-content.entry.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,8+BAA8+B,CAAC;AACrgC,6BAAe,aAAa;;ACS5B,IAAI,EAAE,GAAG,CAAC,CAAC;MAUE,QAAQ;;;;IACX,YAAY,GAAG,oBAAoB,EAAE,EAAE,EAAE,CAAC;IACzC,KAAK,GAAG,KAAK,CAAC;;;IAKE,IAAI,GAAG,EAAE,CAAC;;IAGV,MAAM,GAAG,KAAK,CAAC;IAExC,gBAAgB;QACd,qBAAqB,CAAC,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC;KAClD;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,YAAY,EACrC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,EAClD,IAAI,EAAC,UAAU,iBACF,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,EAC3C,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,kBAAkB,EAAE,IAAI;aACzB,IAED,4DAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,kBAAkB,IACvC,8DAAQ,CACJ,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/tabs/tab-content.scss?tag=nano-tab-content&encapsulation=shadow","src/components/tabs/tab-content.tsx"],"sourcesContent":[":host {\n display: block;\n opacity: 1;\n animation: opacity 0.3s ease-in-out forwards;\n animation-duration: 0s !important;\n}\n\n:host(.ready) {\n animation-duration: 0.3s !important;\n}\n\n@media only screen and (width <= 768px) {\n :host([animation-dir='left']) {\n animation: slide-right 0.3s ease-in-out;\n opacity: 1;\n }\n\n :host([animation-dir='right']) {\n animation: slide-left 0.3s ease-in-out;\n opacity: 1;\n }\n}\n\n.nano-tab-content {\n position: relative;\n}\n\n@keyframes opacity {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes slide-left {\n 0% {\n transform: translate3d(-100%, 0, 0);\n }\n\n 50% {\n transform: translate3d(0%) translate3d(-0.9em);\n }\n\n 100% {\n transform: translate3d(0, 0, 0);\n }\n}\n\n@keyframes slide-right {\n 0% {\n transform: translate3d(100%, 0, 0);\n }\n\n 50% {\n transform: translateX(0%) translate3d(0.9em);\n }\n\n 100% {\n transform: translate3d(0, 0, 0);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n * {\n animation: none !important;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n ComponentInterface,\n State,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\n\nlet id = 0;\n\n/**\n * @slot - The tab panel's content.\n */\n@Component({\n tag: 'nano-tab-content',\n styleUrl: 'tab-content.scss',\n shadow: true,\n})\nexport class TabPanel implements ComponentInterface {\n private tabContentId = `nano-tab-content-${++id}`;\n @State() ready = false;\n\n @Element() host: HTMLNanoTabContentElement;\n\n /** The tab panel's name. */\n @Prop({ reflect: true }) name = '';\n\n /** When true, the tab content will be shown. */\n @Prop({ reflect: true }) active = false;\n\n componentDidLoad(): void {\n requestAnimationFrame(() => (this.ready = true));\n }\n\n render() {\n return (\n <Host\n id={this.host.id || this.tabContentId}\n style={{ display: this.active ? 'block' : 'none' }}\n role=\"tabpanel\"\n aria-hidden={this.active ? 'false' : 'true'}\n class={{\n ready: this.ready,\n 'nano-tab-content': true,\n }}\n >\n <div part=\"base\" class=\"nano-tab-content\">\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1 +0,0 @@

- {"file":"nano-tab-group.entry.js","mappings":"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","names":[],"sources":["src/components/tabs/tab-group.scss?tag=nano-tab-group&encapsulation=shadow","src/components/tabs/tab-group.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n/**\n * @prop --indicator-transition: Only relevant to placement 'start'. defaults to #{tokens.$transition-fast};\n * @prop --indicator-color: defaults to #{map.get(tokens.$colors, lightblue)} on placement 'top' and #{map.get(tokens.$colors, blue)} on placement 'start';\n * @prop --indicator-track-color: Only relevant to placement 'start'. defaults to #{map.get(tokens.$colors, lightgrey)};\n * @prop --indicator-size: defaults to 5px on placement 'top' and 2px on placement 'start';\n\n * @prop --border-radius: defaults to #{tokens.$layer-border-radius};\n * @prop --background-rgb: will be used as the default background colour for tabs and content. defaults to #{tokens.$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)` `position=\"top\"`. `0 var(--border-radius) var(--border-radius) 0` `position=\"start\"`;\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) var(--border-radius) 0 0` `position=\"top\"`. `0` `position=\"start\"`. ;\n * @prop --tab-text-color: defaults to #{map.get(tokens.$colors, blue)} on placement 'top' and #{map.get(tokens.$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: #{tokens.$transition-fast};\n --indicator-color: #{map.get(tokens.$colors, lightblue)};\n --indicator-track-color: #{map.get(tokens.$colors, lightgrey)};\n --indicator-size: 0;\n --border-radius: #{tokens.$layer-border-radius};\n --background-rgb: #{tokens.$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) var(--border-radius) 0 0;\n --tab-text-color: #{map.get(tokens.$colors, blue)};\n --shadow-opacity: 0.1;\n --fade-transparency: 0;\n\n display: block;\n position: relative;\n z-index: #{tokens.$layer-index-raised};\n\n @media only screen and (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 --grab-offset-x: var(--tabs-padding-start);\n }\n}\n\n:host([placement='start']) {\n --content-border-radius: 0 var(--border-radius) var(--border-radius) 0;\n --content-padding: 1rem;\n --tab-border-radius: 0;\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(tokens.$colors, darkgrey)};\n --indicator-color: #{map.get(tokens.$colors, blue)};\n --indicator-size: 2px;\n}\n\n:host(.nano-color) {\n --indicator-color: var(--nano-color-tint, #{tokens.nano-color(primary, tint)});\n --tab-text-color: rgb(var(--nano-color-base-rgb) / 70%);\n\n ::slotted(.nano-tab) {\n --active-text-color: var(--nano-color-shade, #{tokens.nano-color(primary, shade)});\n }\n}\n\n.nano-tab-group {\n display: flex;\n border-radius: 0;\n inline-size: 100%;\n flex: inherit;\n\n &__tabs {\n display: flex;\n position: relative;\n inline-size: 100%;\n }\n\n &__active-tab-indicator {\n position: absolute;\n transition:\n var(--indicator-transition) transform ease,\n var(--indicator-transition) width ease;\n }\n\n &__body {\n background: var(--content-bg);\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 inset-block: 0;\n border: unset;\n z-index: 2;\n transition: #{tokens.$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 {\n box-shadow: #{tokens.$control-focus-style} inset;\n }\n\n &--left {\n inset-inline-start: 0;\n }\n\n &--right {\n inset-inline-end: 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 inline-size: 86%;\n box-shadow: 0 10px 40px 10px rgb(0 0 0 / var(--shadow-opacity));\n block-size: 10px;\n position: absolute;\n inset-inline-start: 7%;\n inset-block-end: -10px;\n border-radius: 10px;\n z-index: -1;\n }\n }\n\n .nano-tab-group__nav {\n @include mx.hide-scrollbar();\n\n padding-inline: var(--tabs-padding-start) var(--tabs-padding-end);\n padding-block: var(--tabs-padding-top) var(--tabs-padding-bottom);\n display: flex;\n overflow: auto hidden;\n transition: #{tokens.$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 rgb(0 0 0 / var(--fade-transparency)) 0,\n rgb(0 0 0 / var(--fade-transparency)) var(--tabs-padding-start),\n rgb(0 0 0 / 100%) calc(var(--tabs-padding-start) * 2),\n rgb(0 0 0 / 100%) calc(100% - (var(--tabs-padding-end) * 2)),\n rgb(0 0 0 / var(--fade-transparency))\n calc(100% - var(--tabs-padding-end)),\n rgb(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 padding-inline: 0 var(--tabs-padding-end);\n padding-block: var(--tabs-padding-top) var(--tabs-padding-bottom);\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 inline-size: auto;\n }\n\n .nano-tab-group__active-tab-indicator {\n inset-block-end: -2px;\n border-block-end: 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 inline-size: 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__nav {\n background: var(--content-bg);\n }\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 border-inline-start:\n solid var(--indicator-size)\n var(--indicator-track-color);\n text-align: start;\n }\n\n .nano-tab-group__active-tab-indicator {\n inset-inline-start: calc(-1 * 2px);\n border-inline-start: solid var(--indicator-size) var(--indicator-color);\n }\n\n .nano-tab-group__body {\n flex: 1 1 auto;\n order: 2;\n padding: var(--content-padding);\n overflow: hidden;\n border-radius: var(--content-border-radius);\n }\n }\n}\n","import {\n Component,\n Element,\n ComponentInterface,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n Host,\n Listen,\n Build,\n} from '@stencil/core';\n\nimport { getDirectChildren, getOffset } from '../../utils/dom';\nimport { scrollIntoView } from '../../utils/scroll';\nimport {\n ComponentStore,\n StorageMethods,\n} from '../../utils/store/component-store';\nimport { createColorClasses } from '../../utils/theme';\nimport { displayTransition } from '../../utils/transitions';\nimport { transformTag, h } from '../../utils/renderer';\nimport type { Color } from '../../types/shared';\n\nlet id = 0;\n\n/**\n * A traditional 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 * Horizontal 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 baseId = `nano-tab-group-${++id}`;\n private activeTab: HTMLNanoTabElement;\n private activePanel: HTMLNanoTabContentElement;\n private activeTabIndicator: HTMLElement;\n private nav: 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() tab: string;\n\n /**\n * The placement of the tabs.\n */\n @Prop({ reflect: true }) 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, {\n className: 'is-shown',\n show: !this.hideControlRight,\n });\n }\n\n @Watch('hideControlLeft')\n hideLeftBtn() {\n if (!this.leftBtn) return;\n displayTransition(this.leftBtn, {\n className: 'is-shown',\n show: !this.hideControlLeft,\n });\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>(\n this.host,\n transformTag('nano-tab')\n );\n }\n\n get getAllPanels() {\n return getDirectChildren<HTMLNanoTabContentElement>(\n this.host,\n transformTag('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\n this.syncActiveTabIndicator();\n\n // active tab can be changed on init - this won't be ready. No big thing\n if (this.nav && ['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, i) => {\n const panel = panels.find((el) => el.name === tab.panel);\n if (panel) {\n if (!panel.id) panel.id = `${this.baseId}-panel-${i}`;\n if (!tab.id) tab.id = `${this.baseId}-tab-${i}`;\n\n tab.setAttribute('aria-controls', panel.id);\n panel.setAttribute('aria-labelledby', tab.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 if (!tab) return;\n\n const width = tab.shadowRoot.querySelector('.nanotab')?.clientWidth || 0;\n const height = tab.clientHeight;\n const offset = getOffset(tab, this.tabs);\n\n if (!this.activeTabIndicator) return;\n\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<HTMLNanoTabElement>(transformTag('nano-tab'));\n\n if (tab) this.setActiveTab(tab);\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n const activeEl = document.activeElement as any;\n if (\n !activeEl ||\n activeEl.tagName.toLowerCase() !== transformTag('nano-tab')\n )\n return;\n\n // Activate a tab\n if (['Enter', ' '].includes(event.key)) {\n const target = event.target as HTMLElement;\n const tab = target.closest<HTMLNanoTabElement>(transformTag('nano-tab'));\n\n if (tab) {\n this.setActiveTab(tab);\n event.preventDefault();\n event.stopPropagation();\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 return;\n\n const tabs = this.getAllActiveTabs;\n let index = tabs.indexOf(activeEl);\n\n if (event.key === 'Home') index = 0;\n if (event.key === 'End') index = tabs.length - 1;\n\n if (this.placement === 'top') {\n if (\n (this.isRtl && event.key === 'ArrowRight') ||\n (!this.isRtl && event.key === 'ArrowLeft')\n ) {\n index = Math.max(0, index - 1);\n }\n 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 }\n\n if (this.placement === 'start') {\n if (event.key === 'ArrowUp') index = Math.max(0, index - 1);\n if (event.key === 'ArrowDown')\n index = Math.min(tabs.length - 1, index + 1);\n }\n\n tabs[index].setFocus();\n\n if (this.placement === 'top') {\n scrollIntoView(tabs[index], this.nav, 'horizontal', 'center');\n }\n // need to stop bubbling otherwise it will focus on parent tabs if nested\n event.stopPropagation();\n // stop the browser moving about\n event.preventDefault();\n };\n\n private handleTabScroll = () => {\n if (!this.hasScrollControls) {\n this.hideControlLeft = this.hideControlRight = true;\n return;\n }\n const endRight = this.isRtl\n ? this.nav.scrollLeft === 0\n : this.nav.scrollWidth - this.nav.scrollLeft === this.nav.clientWidth;\n const 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 travelled\n const threshold = 70;\n\n const xDiff = this.initialTouchX - touch.clientX;\n const yDiff = this.initialTouchY - touch.clientY;\n\n const isHorizontalSwipe =\n Math.abs(distX) >= threshold && Math.abs(yDiff) <= 50;\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.assignedElements({ 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\n requestAnimationFrame(() => this.updateScrollControls());\n\n if (!window['ResizeObserver']) return;\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\n connectedCallback() {\n this.isRtl =\n this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';\n\n if (Build.isServer) {\n this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n this.setAriaLabels();\n }\n }\n\n disconnectedCallback() {\n if (this.resizeObserver) this.resizeObserver.unobserve(this.nav);\n }\n\n render() {\n this.isRtl = this.host.ownerDocument.dir === 'rtl';\n\n return (\n <Host\n class={{ ...createColorClasses(this.color), 'nano-tab-group': true }}\n dir={this.isRtl ? 'rtl' : null}\n >\n <div\n part=\"base\"\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 disabled={!this.hasScrollControls}\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\n name=\"light/chevron-left\"\n ariaLabel=\"Scroll tabs towards the start\"\n ></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 aria-orientation={\n this.placement === 'start' ? 'vertical' : 'horizontal'\n }\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 disabled={!this.hasScrollControls}\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\n name=\"light/chevron-right\"\n ariaLabel=\"Scroll tabs towards the end\"\n ></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"],"version":3}

package/dist/esm/nano-tab.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"nano-tab.entry.js","mappings":";;;;;;AAAA,MAAM,MAAM,GAAG,kuGAAkuG,CAAC;AAClvG,sBAAe,MAAM;;ACWrB,IAAI,EAAE,GAAG,CAAC,CAAC;MAiBE,GAAG;;;;;IACN,KAAK,GAAG,YAAY,EAAE,EAAE,EAAE,CAAC;IAC3B,GAAG,CAAc;;;IAKA,KAAK,GAAG,EAAE,CAAC;;IAGX,MAAM,GAAG,KAAK,CAAC;;IAGf,QAAQ,GAAG,KAAK,CAAC;;IAGlC,QAAQ,GAAG,KAAK,CAAC;;IAGhB,YAAY,CAAe;;IAIpC,MAAM,QAAQ;QACZ,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;KACzC;;IAID,MAAM,WAAW;QACf,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;KACjB;IAEO,gBAAgB,GAAG;QACzB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B,CAAC;IAEM,kBAAkB,GAAG,CAAC,CAAgB;QAC5C,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;YAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC;KAC5C,CAAC;IAEF,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,KAAK,EAC9B,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAC7C,KAAK,EAAC,UAAU,IAEhB,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI;gBACb,iBAAiB,EAAE,IAAI,CAAC,MAAM;gBAC9B,mBAAmB,EAAE,IAAI,CAAC,QAAQ;gBAClC,mBAAmB,EAAE,IAAI,CAAC,QAAQ;aACnC,IAED,6DAAM,IAAI,EAAC,OAAO,GAAG,EACrB,4DACE,IAAI,EAAC,KAAK,EACV,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,GAAG,EACpD,KAAK,EAAC,cAAc,IAEpB,8DAAQ,CACJ,EACL,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,KAC9B,yEACE,KAAK,EAAC,gBAAgB,EACtB,QAAQ,EAAC,aAAa,EACtB,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAClC,IAAI,EAAC,WAAW,GAChB,CACH,EACD,6DAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/tabs/tab.scss?tag=nano-tab&encapsulation=shadow","src/components/tabs/tab.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n/**\n * @prop --focus-shadow: Defaults to #{tokens.$control-focus-style};\n\n * @prop --padding: Defaults to .75rem 1rem on placement 'top' and 1rem on placement 'start';\n\n * @prop --bg-rgb: Defaults to #{tokens.$layer-bg-color-rgb};\n * @prop --active-bg: Defaults to rgb(var(--bg-rgb) / 10%);\n * @prop --disabled-bg-rgb: Defaults to var(--bg-rgb);\n * @prop --inactive-bg: Defaults to rgb(var(--bg-rgb) / 70%);\n\n * @prop --text-color: Defaults to #{map.get(tokens.$colors, blue)};\n * @prop --disabled-text-color: Defaults to #{map.get(tokens.$colors, darkgrey)};\n * @prop --active-text-color: Defaults to #{map.get(tokens.$colors, darkblue)};\n\n * @prop --h-font-size: Defaults to .93em;\n * @prop --v-font-size: Defaults to .875em;\n * @prop --tab-spacing: Gap between tabs. Defaults to 1rem;\n * @prop --tab-divider-size: Defaults to 0;\n * @prop --tab-divider-color: Defaults to #{map.get(tokens.$colors, lightblue)};\n * @prop --border-radius: inherit;\n */\n\n:host {\n --focus-shadow: #{tokens.$control-focus-style};\n --padding-v: 0.75rem;\n --padding-h: 1rem;\n --bg-rgb: #{tokens.$layer-bg-color-rgb};\n --active-bg: rgb(var(--bg-rgb) / 100%);\n --inactive-bg: rgb(var(--bg-rgb) / 70%);\n --disabled-bg-rgb: var(--bg-rgb);\n --text-color: #{map.get(tokens.$colors, blue)};\n --disabled-text-color: #{map.get(tokens.$colors, darkgrey)};\n --active-text-color: #{map.get(tokens.$colors, darkblue)};\n --h-font-size: 0.93em;\n --v-font-size: 0.875em;\n --tab-spacing: 0.5rem;\n --tab-divider-size: 0;\n --tab-divider-color: #{map.get(tokens.$colors, lightblue)};\n --tab-indicator-size: 5px;\n --border-radius: inherit;\n\n display: inline-block;\n cursor: pointer;\n border-radius: var(--border-radius);\n}\n\n:host([direction='vertical']) {\n --padding-v: 1rem;\n --padding-h: 1rem;\n\n .nanotab {\n font-size: var(--v-font-size);\n\n &.nanotab--active {\n font-weight: 600;\n color: var(--active-text-color);\n }\n }\n}\n\n:host(.nano-sortable__dragged) {\n box-shadow: none;\n\n .nanotab {\n box-shadow: tokens.$layer-shadow-large;\n }\n}\n\n:host([direction='horizontal']) {\n .nanotab {\n font-size: var(--h-font-size);\n margin-block-start: var(--tab-indicator-size);\n border-inline-end: solid var(--tab-divider-size) var(--tab-divider-color);\n\n &.nanotab--active {\n margin-block-start: 0;\n border-block-start:\n solid var(--tab-indicator-size)\n var(--tab-indicator-color);\n background: var(--active-bg);\n color: var(--active-text-color);\n }\n }\n}\n\n.nanotab {\n @include mx.text-inherit();\n\n border-radius: var(--border-radius);\n margin-inline-end: var(--tab-spacing);\n padding-block: var(--padding-v);\n padding-inline: var(--padding-h);\n display: flex;\n block-size: 100%;\n inline-size: auto;\n background: var(--inactive-bg);\n user-select: none;\n overflow: visible;\n white-space: nowrap;\n align-items: center;\n position: relative;\n\n & ::slotted(*) {\n display: flex;\n align-items: center;\n }\n\n & ::slotted(.nano-sortable__keyboard-handle) {\n position: absolute;\n inset-inline-end: -1em;\n background: var(--inactive-bg);\n z-index: 1;\n }\n\n :host(:last-of-type) & {\n margin-inline-end: 0;\n }\n\n &--disabled {\n background: rgb(var(--disabled-bg-rgb) / 100%);\n opacity: 0.5;\n cursor: not-allowed;\n color: var(--disabled-text-color);\n }\n\n &--closable {\n padding-inline-end: 0;\n }\n\n &__tab {\n display: flex;\n border-radius: inherit;\n\n &:hover:not(.tab--disabled) {\n text-shadow: 0 0 0.01px var(--text-color);\n }\n\n &:focus {\n outline: none;\n outline-style: none;\n box-shadow: none;\n border-color: transparent;\n }\n\n &::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n }\n\n &:focus-visible:not(.nanotab--disabled)::before {\n box-shadow: var(--focus-shadow) inset;\n\n .nanotab--active & {\n box-shadow: var(--focus-shadow);\n }\n }\n }\n\n &__close-button {\n margin-inline: #{tokens.$spacing-small} calc(var(--padding-h) / 2);\n appearance: none !important;\n\n --padding: #{tokens.$spacing-xsmall} !important;\n }\n}\n","import {\n Component,\n Element,\n Host,\n ComponentInterface,\n Method,\n Prop,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\n\nlet id = 0;\n\n/**\n * @slot start - start of the tab, content. Outside of the focusable element\n * @slot end - end of the tab, content. Outside of the focusable element\n * @slot - The tab's label.\n *\n * @part base - the wrapper around the whole control\n * @part tab - the main tab control that controls the active state\n * @part close-btn - the close button of the tab (if `closable=true`)\n */\n\n@Component({\n tag: 'nano-tab',\n styleUrl: 'tab.scss',\n shadow: true,\n})\nexport class Tab implements ComponentInterface {\n private tabId = `nano-tab-${++id}`;\n private tab: HTMLElement;\n\n @Element() host: HTMLNanoTabElement;\n\n /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n @Prop({ reflect: true }) panel = '';\n\n /** The active, selected tab. If none active, the first will automatically be selected. */\n @Prop({ reflect: true }) active = false;\n\n /** Set to true to draw the tab in an active state. */\n @Prop({ reflect: true }) disabled = false;\n\n /** When true, the tab will be rendered with a close icon. */\n @Prop() closable = false;\n\n /** Emitted when the tab is closable and the close button is activated. */\n @Event() nanoTabClose: EventEmitter;\n\n /** Sets focus to the tab. */\n @Method()\n async setFocus() {\n this.tab.focus({ preventScroll: true });\n }\n\n /** Removes focus from the tab. */\n @Method()\n async removeFocus() {\n this.tab.blur();\n }\n\n private handleCloseClick = () => {\n this.nanoTabClose.emit();\n };\n\n private handleCloseKeydown = (e: KeyboardEvent) => {\n if (e.key === ' ') this.handleCloseClick();\n };\n\n render() {\n return (\n <Host\n id={this.host.id || this.tabId}\n role=\"tab\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-selected={this.active ? 'true' : 'false'}\n class=\"nano-tab\"\n >\n <div\n part=\"base\"\n class={{\n nanotab: true,\n 'nanotab--active': this.active,\n 'nanotab--disabled': this.disabled,\n 'nanotab--closable': this.closable,\n }}\n >\n <slot name=\"start\" />\n <div\n part=\"tab\"\n ref={(el) => (this.tab = el)}\n tabindex={this.disabled || !this.active ? '-1' : '0'}\n class=\"nanotab__tab\"\n >\n <slot />\n </div>\n {this.closable && !this.disabled && (\n <nano-icon-button\n label=\"Close this tab\"\n iconName=\"light/xmark\"\n class=\"nanotab__close-button\"\n onClick={this.handleCloseClick}\n onKeyDown={this.handleCloseKeydown}\n part=\"close-btn\"\n />\n )}\n <slot name=\"end\" />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}