npm - @nanoporetech-digital/components - Versions diffs - 4.4.1 → 4.5.1 - Mend

@nanoporetech-digital/components 4.4.1 → 4.5.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 (161) hide show

package/dist/components/nano-overflow-nav.js CHANGED Viewed

@@ -4,8 +4,9 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { g as getDirectChildren, a as getOffset } from './dom.js';
 import { d as debounce } from './throttle.js';
-import { d as defineCustomElement$3 } from './icon.js';
-import { d as defineCustomElement$2 } from './icon-button.js';
+import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$3 } from './icon-button.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
 const overflowNavCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-size:0;--indicator-track-color:#e4e6e8;--indicator-track-size:var(--indicator-size);--scroll-btn-color:\"currentColor\";--fade-size:1.75rem;--fade-transparency:0;--padding:var(--fade-size);position:relative;z-index:var(--nano-layer-index-raised, 5)}:host([orientation=horizontal]){display:block}:host([orientation=vertical]){display:flex}.onav--no-transitions *{transition-duration:0s !important}.onav__scroller{scrollbar-width:none;-ms-overflow-style:none;display:flex;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\");-webkit-mask-size:calc(100% + var(--fade-size) * 4);mask-size:calc(100% + var(--fade-size) * 4);-webkit-mask-position:calc(var(--fade-size) * -2);mask-position:calc(var(--fade-size) * -2)}.onav__scroller::-webkit-scrollbar{inline-size:0;block-size:0}.onav__scroller::after{content:\" \";line-height:1;flex:0 0 auto;display:block}.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:calc(var(--fade-size) * -1);mask-position:calc(var(--fade-size) * -1);-webkit-mask-size:calc(100% + var(--fade-size));mask-size:calc(100% + var(--fade-size))}.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.onav__items{flex:1 1 auto;position:relative;width:auto;flex-wrap:nowrap;display:flex}.onav__items::before{content:\"\";background:var(--indicator-track-color);display:block;position:absolute;z-index:1}.onav__active-indicator{position:absolute;z-index:10;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease, var(--indicator-transition) height ease}.onav nano-icon-button.onav__scroll-button{--nano-color-base:var(--scroll-btn-color);display:flex;align-items:center;justify-content:center;position:absolute;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color);pointer-events:none}.onav nano-icon-button.onav__scroll-button:focus{outline:none}.onav nano-icon-button.onav__scroll-button.is-shown{opacity:1;pointer-events:all}.onav nano-icon-button.onav__scroll-button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.onav--horizontal .onav__scroller{overflow-x:auto;overflow-y:hidden;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding-inline:var(--padding);-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)))}.onav--horizontal .onav__scroller::after{padding-inline:0 var(--fade-size);padding-block:0 0}.onav--horizontal.onav--has-scroll-controls .onav__scroller{padding-inline:var(--fade-size) 0;-webkit-padding-before:0;padding-block-start:0;-webkit-padding-after:0;padding-block-end:0}.onav--horizontal .onav__items{flex-direction:row}.onav--horizontal .onav__items::before{content:\"\";width:100%;height:var(--indicator-track-size);inset-block-end:0}.onav--horizontal .onav__active-indicator{inset-block-end:0;-webkit-border-after:solid var(--indicator-size) var(--indicator-color);border-block-end:solid var(--indicator-size) var(--indicator-color)}.onav--horizontal .onav__scroll-button{inset-block:0}.onav--horizontal .onav__scroll-button--start{inset-inline-start:0}.onav--horizontal .onav__scroll-button--end{inset-inline-end:0}.onav--vertical{width:100%}.onav--vertical .onav__nav{max-height:100%;display:flex}.onav--vertical .onav__scroller{width:100%;overflow-y:auto;overflow-x:hidden;flex-direction:column;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding-block:var(--padding);-webkit-mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));padding-inline:0 0;-webkit-padding-before:calc(var(--fade-size) + 12px);padding-block-start:calc(var(--fade-size) + 12px);-webkit-padding-after:var(--fade-size);padding-block-end:var(--fade-size)}.onav--vertical .onav__scroller::after{padding-inline:0 0;padding-block:0 var(--fade-size)}.onav--vertical .onav__items{flex-direction:column;width:-moz-fit-content;width:fit-content}.onav--vertical .onav__items::before{content:\"\";height:100%;width:var(--indicator-track-size);inset-inline-start:0}.onav--vertical .onav__active-indicator{inset-inline-start:0;-webkit-border-start:solid var(--indicator-size) var(--indicator-color);border-inline-start:solid var(--indicator-size) var(--indicator-color)}.onav--vertical .onav__scroll-button{inset-inline:0}.onav--vertical .onav__scroll-button--start{inset-block-start:0}.onav--vertical .onav__scroll-button--end{inset-block-end:0}";
@@ -322,7 +323,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["nano-overflow-nav", "nano-icon", "nano-icon-button"];
+  const components = ["nano-overflow-nav", "nano-icon", "nano-icon-button", "nano-tooltip"];
   components.forEach(tagName => { switch (tagName) {
     case "nano-overflow-nav":
       if (!customElements.get(tagName)) {
@@ -331,10 +332,15 @@ function defineCustomElement$1() {
       break;
     case "nano-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$4();
       }
       break;
     case "nano-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "nano-tooltip":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/components/nano-overflow-nav.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-overflow-nav.js","mappings":"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","names":[],"sources":["./src/components/overflow-nav/overflow-nav.scss?tag=nano-overflow-nav&encapsulation=shadow","./src/components/overflow-nav/overflow-nav.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n /*\n @prop --indicator-transition: Defaults to #{$transition-fast}\n * @prop --indicator-color: Defaults to #{map.get($colors, lightblue)};\n * @prop --indicator-size: Defaults to 0;\n * @prop --indicator-track-color: Defaults to #{map.get($colors, lightgrey)};\n * @prop --indicator-track-size: Defaults to var(--indicator-size);\n\n * @prop --scroll-btn-color: Defaults to 'currentColor';\n * @prop --fade-size: The size of the fade areas (when items do not fit). Defaults to 1.75rem;\n * @prop --fade-transparency: Defaults to 0;\n \n @prop --padding: Padding that matches the fade size will stop items shifting if fade areas are added (i.e when items do not fit). Defaults to var(--fade-size);\n /\n\n --indicator-transition: #{$transition-fast};\n --indicator-color: #{map.get($colors, lightblue)};\n --indicator-size: 0;\n --indicator-track-color: #{map.get($colors, lightgrey)};\n --indicator-track-size: var(--indicator-size);\n --scroll-btn-color: 'currentColor';\n --fade-size: 1.75rem;\n --fade-transparency: 0;\n --padding: var(--fade-size);\n\n position: relative;\n z-index: #{$layer-index-raised};\n}\n\n:host([orientation=\"horizontal\"]) {\n display: block;\n}\n\n:host([orientation=\"vertical\"]) {\n display: flex;\n}\n\n.onav {\n $root: &;\n\n &--no-transitions {\n transition-duration: 0s !important;\n }\n\n &__scroller {\n @include hide-scrollbar();\n\n display: flex;\n transition: #{$transition-medium} ease;\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');\n mask-size: calc(100% + calc(var(--fade-size) * 4));\n mask-position: calc(var(--fade-size) * -2);\n\n &::after {\n content: ' ';\n line-height: 1;\n flex: 0 0 auto;\n display: block;\n }\n\n #{$root}--has-scroll-controls-start & {\n mask-position: 0;\n mask-size: calc(100% + (var(--fade-size) * 2));\n }\n\n #{$root}--has-scroll-controls-end & {\n mask-position: calc(var(--fade-size) * -1);\n mask-size: calc(100% + var(--fade-size));\n }\n\n #{$root}--has-scroll-controls-start#{$root}--has-scroll-controls-end & {\n mask-size: 100%;\n mask-position: 0;\n }\n }\n\n &__items {\n flex: 1 1 auto;\n position: relative;\n width: auto;\n flex-wrap: nowrap;\n display: flex;\n\n &::before {\n content: '';\n background: var(--indicator-track-color);\n display: block;\n position: absolute;\n z-index: 1;\n }\n }\n\n &__active-indicator {\n position: absolute;\n z-index: 10;\n transition:\n var(--indicator-transition) transform ease,\n var(--indicator-transition) width ease,\n var(--indicator-transition) height ease;\n }\n\n nano-icon-button.onav__scroll-button {\n --nano-color-base: var(--scroll-btn-color);\n\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n border: unset;\n z-index: 2;\n transition: #{$transition-fast} ease opacity;\n opacity: 0;\n color: var(--scroll-btn-color);\n pointer-events: none;\n\n &:focus {\n outline: none;\n }\n\n &.is-shown {\n opacity: 1;\n pointer-events: all;\n }\n\n &:focus-visible {\n box-shadow: #{$control-focus-style} inset;\n }\n }\n\n ///////////// HORIZONTAL ///////////////\n\n &--horizontal {\n\n #{$root}__scroller {\n overflow-x: auto;\n overflow-y: hidden;\n mask-repeat: no-repeat;\n padding-inline: var(--padding);\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(--fade-size),\n rgb(0 0 0 / 100%) calc(var(--fade-size) * 2),\n rgb(0 0 0 / 100%) calc(100% - (var(--fade-size) * 2)),\n rgb(0 0 0 / var(--fade-transparency))\n calc(100% - var(--fade-size)),\n rgb(0 0 0 / var(--fade-transparency))\n );\n\n &::after {\n padding-inline: 0 var(--fade-size);\n padding-block: 0 0;\n }\n }\n\n &#{$root}--has-scroll-controls #{$root}__scroller {\n padding-inline: var(--fade-size) 0;\n padding-block-start: 0;\n padding-block-end: 0;\n }\n\n #{$root}__items {\n flex-direction: row;\n\n &::before {\n content: '';\n width: 100%;\n height: var(--indicator-track-size);\n inset-block-end: 0;\n }\n }\n\n #{$root}__active-indicator {\n inset-block-end: 0;\n border-block-end: solid var(--indicator-size) var(--indicator-color);\n }\n\n #{$root}__scroll-button {\n inset-block: 0;\n\n &--start {\n inset-inline-start: 0;\n }\n\n &--end {\n inset-inline-end: 0;\n }\n }\n }\n\n ///////////// VERTICAL ///////////////\n\n &--vertical {\n width: 100%;\n\n #{$root}__nav {\n max-height: 100%;\n display: flex;\n }\n\n #{$root}__scroller {\n width: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n flex-direction: column;\n mask-repeat: no-repeat;\n padding-block: var(--padding);\n mask-image:\n linear-gradient(\n to top,\n rgb(0 0 0 / var(--fade-transparency)) 0,\n rgb(0 0 0 / var(--fade-transparency)) var(--fade-size),\n rgb(0 0 0 / 100%) calc(var(--fade-size) * 2),\n rgb(0 0 0 / 100%) calc(100% - (var(--fade-size) * 2)),\n rgb(0 0 0 / var(--fade-transparency))\n calc(100% - var(--fade-size)),\n rgb(0 0 0 / var(--fade-transparency))\n );\n padding-inline: 0 0;\n padding-block-start: calc(var(--fade-size) + 12px);\n padding-block-end: var(--fade-size);\n\n &::after {\n padding-inline: 0 0;\n padding-block: 0 var(--fade-size);\n }\n }\n\n #{$root}__items {\n flex-direction: column;\n width: fit-content;\n\n &::before {\n content: '';\n height: 100%;\n width: var(--indicator-track-size);\n inset-inline-start: 0;\n }\n }\n\n #{$root}__active-indicator {\n inset-inline-start: 0;\n border-inline-start: solid var(--indicator-size) var(--indicator-color);\n }\n\n #{$root}__scroll-button {\n inset-inline: 0;\n\n &--start {\n inset-block-start: 0;\n }\n\n &--end {\n inset-block-end: 0;\n }\n }\n }\n}\n","import {\n Component,\n ComponentInterface,\n Host,\n h,\n Element,\n Prop,\n Watch,\n State,\n Method,\n} from '@stencil/core';\nimport { getDirectChildren, getOffset } from '../../utils/dom';\nimport { debounce } from '../../utils/throttle';\n\n/*\n Primarily used to display navigational items that may not fit on smaller screens.\n \n - Accepts any collection of elements\n * - Gives visual cues of 'more' with auto display fade effect and scroll buttons\n * - Auto scrolls to the active item onload\n \n @slot - Default slot to place items.\n \n @part base - root, wrapper element\n * @part scroller - the scrolling element\n * @part items - the item wrapper element\n * @part indicator - the animated, indicator element\n * @part scroll-button - The buttons shown at either side of the scrolling area\n * @part scroll-button-prev - The button shown at the start of the scrolling area\n * @part scroll-button-next - The button shown at the end of the scrolling area\n /\n\n@Component({\n tag: 'nano-overflow-nav',\n styleUrl: 'overflow-nav.scss',\n shadow: true,\n})\nexport class OverflowNav implements ComponentInterface {\n // public surface\n\n /* Disables the scroll arrow buttons that appear when content overflows /\n @Prop() scrollControls = true;\n\n /* The flex direction of the element /\n @Prop({ reflect: true }) orientation: 'horizontal' \| 'vertical' =\n 'horizontal';\n\n /\n A function called when an item becomes 'active' (via click or keyboard)\n * @param item - html element currently being assessed\n * @param _index - the index of the html element currently being assessed\n * @returns void /\n @Prop() activeHandler = (item: HTMLElement, _index: number) =>\n item.classList.add('active');\n\n /\n A function called when an item becomes 'inactive'\n * (because another item was made active)\n * @param item - html element currently being assessed\n * @param _index - the index of the html element currently being assessed\n * @returns void /\n @Prop() inActiveHandler = (item: HTMLElement, _index: number) =>\n item.classList.remove('active');\n\n /\n A function called to assess an initial, active item\n * @param item - html element currently being assessed\n * @param _index - the index of the html element currently being assessed\n * @returns void /\n @Prop() isActiveHandler = (item: HTMLElement, _index: number) =>\n item.classList.contains('active');\n\n @Watch('isActiveHandler')\n watchIsActiveHandler() {\n this.instantReCalc = true;\n this.activeItem = this.allActiveItems.find((el, i) =>\n this.isActiveHandler(el, i)\n );\n setTimeout(() => (this.instantReCalc = false), 300);\n }\n\n /\n Sync up the view to the active item.\n * Use this when the active item changes outside of this component.\n /\n @Method()\n async syncActiveItem() {\n this.activeItem = this.allActiveItems.find((el, i) =>\n this.isActiveHandler(el, i)\n );\n }\n\n // private state\n\n constructor() {\n this.recalculatePositions = debounce(\n this.recalculatePositions.bind(this),\n 80\n );\n }\n\n private ro?: ResizeObserver;\n private nav?: HTMLElement;\n private itemContainer?: HTMLElement;\n private isRtl?: boolean;\n private endBtn: HTMLNanoIconButtonElement;\n private startBtn: HTMLNanoIconButtonElement;\n private activeIndicator: HTMLElement;\n private mutationObservers: WeakMap<Node, MutationObserver> = new WeakMap();\n\n get scrollProp() {\n return this.orientation === 'horizontal' ? 'scrollWidth' : 'scrollHeight';\n }\n\n get clientDimProp() {\n return this.orientation === 'horizontal' ? 'clientWidth' : 'clientHeight';\n }\n\n get scrollOffset() {\n return this.orientation === 'horizontal' ? 'scrollLeft' : 'scrollTop';\n }\n\n @Element() host: HTMLNanoOverflowNavElement;\n\n @State() instantReCalc = false;\n @State() hasScrollControls = false;\n\n @Watch('hasScrollControls')\n watchScrollControls() {\n if (this.hasScrollControls) this.handleScroll();\n else this.hideControlStart = this.hideControlEnd = true;\n }\n\n @State() hideControlEnd = true;\n\n @Watch('hideControlEnd')\n hideEndBtn() {\n if (!this.endBtn) return;\n this.activateBtn(this.endBtn, !this.hideControlEnd);\n }\n\n @State() hideControlStart = true;\n\n @Watch('hideControlStart')\n hideStartBtn() {\n if (!this.startBtn) return;\n this.activateBtn(this.startBtn, !this.hideControlStart);\n }\n\n // private logic\n\n private activateBtn(btn: HTMLNanoIconButtonElement, activate = true) {\n if (!activate) {\n btn.tabIndex = -1;\n btn.disabled = true;\n btn.classList.remove('is-shown');\n return;\n }\n btn.tabIndex = 0;\n btn.disabled = false;\n btn.classList.add('is-shown');\n }\n\n get allActiveItems() {\n return this.allItems.filter(\n (el: any) => !el.disabled \|\| el.classList.contains('disabled')\n );\n }\n\n get allItems() {\n return getDirectChildren<HTMLElement>(this.host, '', true);\n }\n\n get activeItem() {\n return this._activeItem;\n }\n\n set activeItem(item: HTMLElement) {\n if (\n !item \|\|\n item === this.activeItem \|\|\n (item as any).disabled \|\|\n !this.allActiveItems.includes(item)\n ) {\n return;\n }\n\n this._activeItem = item;\n this.allActiveItems.forEach((el, i) => {\n if (el === this._activeItem) this.activeHandler(el, i);\n else this.inActiveHandler(el, i);\n });\n\n this.recalculatePositions();\n }\n private _activeItem: HTMLElement;\n\n get navDim() {\n if (!this.nav) return 0;\n\n const computedStyle = getComputedStyle(this.nav);\n let clientDim = this.nav[this.clientDimProp];\n\n if (this.orientation === 'horizontal') {\n return (clientDim -=\n parseFloat(computedStyle.paddingLeft) +\n parseFloat(computedStyle.paddingRight));\n } else {\n return (clientDim -=\n parseFloat(computedStyle.paddingTop) +\n parseFloat(computedStyle.paddingBottom));\n }\n }\n\n private scrollToActiveItem() {\n if (!this.nav \|\| !this.activeItem) return;\n setTimeout(() => {\n this.activeItem.scrollIntoView({\n behavior: this.instantReCalc ? 'auto' : 'smooth',\n block: 'center',\n inline: 'center',\n });\n }, 100);\n }\n\n private syncActiveItemIndicator() {\n if (!this.activeItem) return;\n\n const item = this.activeItem;\n const width = item.clientWidth \|\| 0;\n const height = item.clientHeight + 2 \|\| 0;\n const offset = getOffset(item, this.itemContainer);\n\n if (!this.activeIndicator) return;\n\n const offsetTop = offset.top;\n const offsetLeft = offset.left;\n\n if (this.instantReCalc) this.activeIndicator.style.transition = 'none';\n\n switch (this.orientation) {\n case 'horizontal':\n this.activeIndicator.style.width = `${width}px`;\n this.activeIndicator.style.height = null;\n this.activeIndicator.style.transform = `translateX(${offsetLeft}px)`;\n break;\n\n case 'vertical':\n this.activeIndicator.style.width = null;\n this.activeIndicator.style.height = `${height}px`;\n this.activeIndicator.style.transform = `translateY(${offsetTop}px)`;\n break;\n }\n setTimeout(() => (this.activeIndicator.style.transition = null), 400);\n }\n\n private updateScrollControls = () => {\n if (!this.nav) return;\n\n this.hasScrollControls =\n this.nav[this.scrollProp] > this.nav[this.clientDimProp] &&\n this.nav[this.scrollProp] > this.itemContainer[this.clientDimProp];\n this.handleScroll();\n };\n\n private handleScroll = () => {\n if (!this.hasScrollControls) {\n this.hideControlStart = this.hideControlEnd = true;\n return;\n }\n const finishEnd = this.isRtl\n ? this.nav[this.scrollOffset] === 0\n : Math.abs(\n this.nav[this.clientDimProp] -\n (this.nav[this.scrollProp] - this.nav[this.scrollOffset])\n ) < 2;\n\n const finishStart = this.isRtl\n ? Math.abs(\n this.nav[this.scrollProp] +\n this.nav[this.scrollOffset] -\n this.nav[this.clientDimProp]\n ) < 2\n : this.nav[this.scrollOffset] === 0;\n\n if (finishStart) {\n this.hideControlStart = true;\n this.hideControlEnd = false;\n } else if (finishEnd) {\n this.hideControlStart = false;\n this.hideControlEnd = true;\n } else {\n this.hideControlEnd = false;\n this.hideControlStart = false;\n }\n };\n\n private handleBtnClick = (goEnd: boolean = false) => {\n const navDim = this.navDim;\n let scrollAmt;\n if (goEnd) scrollAmt = this.nav[this.scrollOffset] + navDim - 20;\n else scrollAmt = this.nav[this.scrollOffset] - navDim + 20;\n\n try {\n this.nav.scroll({\n left: this.orientation === 'horizontal' ? scrollAmt : 0,\n top: this.orientation === 'vertical' ? scrollAmt : 0,\n behavior: 'smooth',\n });\n } catch (e) {\n this.nav[this.scrollOffset] = scrollAmt;\n }\n };\n\n private slotChangeHandler = () => {\n if (this.allActiveItems.length < 2) return;\n const item = this.allActiveItems.find((el, i) =>\n this.isActiveHandler(el, i)\n );\n if (item) this.activeItem = item;\n this.recalculatePositions();\n\n /** maintain a weakmap of mutation observers to maintain item / indicator position on all changes. */\n this.allActiveItems.forEach((item) => {\n if (this.mutationObservers.get(item)) return;\n\n const mo = new MutationObserver(() => this.syncActiveItemIndicator());\n mo.observe(item, {\n characterData: true,\n childList: true,\n subtree: true,\n });\n\n this.mutationObservers.set(item, mo);\n });\n };\n\n private handleClick = (event: MouseEvent) => {\n if (this.allActiveItems.length < 2) return;\n const foundItem = event\n .composedPath()\n .find((e) => this.allActiveItems.includes(e as any)) as HTMLElement;\n if (foundItem) this.activeItem = foundItem;\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Activate a tab\n if (['Enter', ' '].includes(event.key)) {\n const foundItem = event\n .composedPath()\n .find((e) => this.allActiveItems.includes(e as any)) as HTMLElement;\n if (foundItem) this.activeItem = foundItem;\n }\n };\n\n private recalculatePositions = () => {\n this.updateScrollControls();\n this.syncActiveItemIndicator();\n this.scrollToActiveItem();\n };\n\n // lifecycle\n\n connectedCallback(): void {\n this.instantReCalc = true;\n this.isRtl =\n this.orientation === 'horizontal' && !!this.host.closest('[dir=\"rtl\"]');\n\n if (window['MutationObserver']) this.slotChangeHandler();\n\n if (!window['ResizeObserver']) return;\n\n if (this.ro) {\n this.ro.disconnect();\n this.ro = undefined;\n }\n const mo = (this.ro = new ResizeObserver(this.recalculatePositions));\n mo.observe(this.host);\n }\n\n componentDidLoad(): void {\n this.activeItem = this.allActiveItems.find((el, i) =>\n this.isActiveHandler(el, i)\n );\n this.instantReCalc = false;\n }\n\n disconnectedCallback(): void {\n if (this.ro) {\n this.ro.disconnect();\n this.ro = undefined;\n }\n }\n\n render() {\n return (\n <Host dir={this.isRtl ? 'rtl' : null}>\n <div\n part=\"base\"\n class={{\n onav: true,\n [`onav--${this.orientation}`]: true,\n 'onav--has-scroll-controls': this.hasScrollControls,\n 'onav--has-scroll-controls-start': !this.hideControlStart,\n 'onav--has-scroll-controls-end': !this.hideControlEnd,\n 'onav--no-transitions': this.instantReCalc,\n }}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <div class=\"onav__nav\">\n {this.scrollControls && (\n <nano-icon-button\n part=\"scroll-button scroll-button-prev\"\n class={{\n 'onav__scroll-button': true,\n 'onav__scroll-button--start': true,\n }}\n ref={(btn) => (this.startBtn = btn)}\n onClick={() => this.handleBtnClick(false)}\n label=\"Click to scroll\"\n iconName={\n this.orientation === 'horizontal'\n ? 'light/chevron-left'\n : 'light/chevron-up'\n }\n />\n )}\n\n <div\n part=\"scroller\"\n ref={(el) => (this.nav = el)}\n class=\"onav__scroller\"\n onScroll={this.handleScroll}\n >\n <div\n part=\"items\"\n ref={(el) => (this.itemContainer = el)}\n class=\"onav__items\"\n >\n <div\n part=\"indicator\"\n ref={(el) => (this.activeIndicator = el)}\n class=\"onav__active-indicator\"\n />\n <slot onSlotchange={this.slotChangeHandler} />\n </div>\n </div>\n\n {this.scrollControls && (\n <nano-icon-button\n part=\"scroll-button scroll-button-next\"\n class={{\n 'onav__scroll-button': true,\n 'onav__scroll-button--end': true,\n }}\n ref={(btn) => (this.endBtn = btn)}\n onClick={() => this.handleBtnClick(true)}\n label=\"Click to scroll\"\n iconName={\n this.orientation === 'horizontal'\n ? 'light/chevron-right'\n : 'light/chevron-down'\n }\n />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nano-overflow-nav.js","mappings":"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","names":[],"sources":["./src/components/overflow-nav/overflow-nav.scss?tag=nano-overflow-nav&encapsulation=shadow","./src/components/overflow-nav/overflow-nav.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n /*\n @prop --indicator-transition: Defaults to #{$transition-fast}\n * @prop --indicator-color: Defaults to #{map.get($colors, lightblue)};\n * @prop --indicator-size: Defaults to 0;\n * @prop --indicator-track-color: Defaults to #{map.get($colors, lightgrey)};\n * @prop --indicator-track-size: Defaults to var(--indicator-size);\n\n * @prop --scroll-btn-color: Defaults to 'currentColor';\n * @prop --fade-size: The size of the fade areas (when items do not fit). Defaults to 1.75rem;\n * @prop --fade-transparency: Defaults to 0;\n \n @prop --padding: Padding that matches the fade size will stop items shifting if fade areas are added (i.e when items do not fit). Defaults to var(--fade-size);\n /\n\n --indicator-transition: #{$transition-fast};\n --indicator-color: #{map.get($colors, lightblue)};\n --indicator-size: 0;\n --indicator-track-color: #{map.get($colors, lightgrey)};\n --indicator-track-size: var(--indicator-size);\n --scroll-btn-color: 'currentColor';\n --fade-size: 1.75rem;\n --fade-transparency: 0;\n --padding: var(--fade-size);\n\n position: relative;\n z-index: #{$layer-index-raised};\n}\n\n:host([orientation=\"horizontal\"]) {\n display: block;\n}\n\n:host([orientation=\"vertical\"]) {\n display: flex;\n}\n\n.onav {\n $root: &;\n\n &--no-transitions {\n transition-duration: 0s !important;\n }\n\n &__scroller {\n @include hide-scrollbar();\n\n display: flex;\n transition: #{$transition-medium} ease;\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');\n mask-size: calc(100% + calc(var(--fade-size) * 4));\n mask-position: calc(var(--fade-size) * -2);\n\n &::after {\n content: ' ';\n line-height: 1;\n flex: 0 0 auto;\n display: block;\n }\n\n #{$root}--has-scroll-controls-start & {\n mask-position: 0;\n mask-size: calc(100% + (var(--fade-size) * 2));\n }\n\n #{$root}--has-scroll-controls-end & {\n mask-position: calc(var(--fade-size) * -1);\n mask-size: calc(100% + var(--fade-size));\n }\n\n #{$root}--has-scroll-controls-start#{$root}--has-scroll-controls-end & {\n mask-size: 100%;\n mask-position: 0;\n }\n }\n\n &__items {\n flex: 1 1 auto;\n position: relative;\n width: auto;\n flex-wrap: nowrap;\n display: flex;\n\n &::before {\n content: '';\n background: var(--indicator-track-color);\n display: block;\n position: absolute;\n z-index: 1;\n }\n }\n\n &__active-indicator {\n position: absolute;\n z-index: 10;\n transition:\n var(--indicator-transition) transform ease,\n var(--indicator-transition) width ease,\n var(--indicator-transition) height ease;\n }\n\n nano-icon-button.onav__scroll-button {\n --nano-color-base: var(--scroll-btn-color);\n\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n border: unset;\n z-index: 2;\n transition: #{$transition-fast} ease opacity;\n opacity: 0;\n color: var(--scroll-btn-color);\n pointer-events: none;\n\n &:focus {\n outline: none;\n }\n\n &.is-shown {\n opacity: 1;\n pointer-events: all;\n }\n\n &:focus-visible {\n box-shadow: #{$control-focus-style} inset;\n }\n }\n\n ///////////// HORIZONTAL ///////////////\n\n &--horizontal {\n\n #{$root}__scroller {\n overflow-x: auto;\n overflow-y: hidden;\n mask-repeat: no-repeat;\n padding-inline: var(--padding);\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(--fade-size),\n rgb(0 0 0 / 100%) calc(var(--fade-size) * 2),\n rgb(0 0 0 / 100%) calc(100% - (var(--fade-size) * 2)),\n rgb(0 0 0 / var(--fade-transparency))\n calc(100% - var(--fade-size)),\n rgb(0 0 0 / var(--fade-transparency))\n );\n\n &::after {\n padding-inline: 0 var(--fade-size);\n padding-block: 0 0;\n }\n }\n\n &#{$root}--has-scroll-controls #{$root}__scroller {\n padding-inline: var(--fade-size) 0;\n padding-block-start: 0;\n padding-block-end: 0;\n }\n\n #{$root}__items {\n flex-direction: row;\n\n &::before {\n content: '';\n width: 100%;\n height: var(--indicator-track-size);\n inset-block-end: 0;\n }\n }\n\n #{$root}__active-indicator {\n inset-block-end: 0;\n border-block-end: solid var(--indicator-size) var(--indicator-color);\n }\n\n #{$root}__scroll-button {\n inset-block: 0;\n\n &--start {\n inset-inline-start: 0;\n }\n\n &--end {\n inset-inline-end: 0;\n }\n }\n }\n\n ///////////// VERTICAL ///////////////\n\n &--vertical {\n width: 100%;\n\n #{$root}__nav {\n max-height: 100%;\n display: flex;\n }\n\n #{$root}__scroller {\n width: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n flex-direction: column;\n mask-repeat: no-repeat;\n padding-block: var(--padding);\n mask-image:\n linear-gradient(\n to top,\n rgb(0 0 0 / var(--fade-transparency)) 0,\n rgb(0 0 0 / var(--fade-transparency)) var(--fade-size),\n rgb(0 0 0 / 100%) calc(var(--fade-size) * 2),\n rgb(0 0 0 / 100%) calc(100% - (var(--fade-size) * 2)),\n rgb(0 0 0 / var(--fade-transparency))\n calc(100% - var(--fade-size)),\n rgb(0 0 0 / var(--fade-transparency))\n );\n padding-inline: 0 0;\n padding-block-start: calc(var(--fade-size) + 12px);\n padding-block-end: var(--fade-size);\n\n &::after {\n padding-inline: 0 0;\n padding-block: 0 var(--fade-size);\n }\n }\n\n #{$root}__items {\n flex-direction: column;\n width: fit-content;\n\n &::before {\n content: '';\n height: 100%;\n width: var(--indicator-track-size);\n inset-inline-start: 0;\n }\n }\n\n #{$root}__active-indicator {\n inset-inline-start: 0;\n border-inline-start: solid var(--indicator-size) var(--indicator-color);\n }\n\n #{$root}__scroll-button {\n inset-inline: 0;\n\n &--start {\n inset-block-start: 0;\n }\n\n &--end {\n inset-block-end: 0;\n }\n }\n }\n}\n","import {\n Component,\n ComponentInterface,\n Host,\n h,\n Element,\n Prop,\n Watch,\n State,\n Method,\n} from '@stencil/core';\nimport { getDirectChildren, getOffset } from '../../utils/dom';\nimport { debounce } from '../../utils/throttle';\n\n/*\n Primarily used to display navigational items that may not fit on smaller screens.\n \n - Accepts any collection of elements\n * - Gives visual cues of 'more' with auto display fade effect and scroll buttons\n * - Auto scrolls to the active item onload\n \n @slot - Default slot to place items.\n \n @part base - root, wrapper element\n * @part scroller - the scrolling element\n * @part items - the item wrapper element\n * @part indicator - the animated, indicator element\n * @part scroll-button - The buttons shown at either side of the scrolling area\n * @part scroll-button-prev - The button shown at the start of the scrolling area\n * @part scroll-button-next - The button shown at the end of the scrolling area\n /\n\n@Component({\n tag: 'nano-overflow-nav',\n styleUrl: 'overflow-nav.scss',\n shadow: true,\n})\nexport class OverflowNav implements ComponentInterface {\n // public surface\n\n /* Disables the scroll arrow buttons that appear when content overflows /\n @Prop() scrollControls = true;\n\n /* The flex direction of the element /\n @Prop({ reflect: true }) orientation: 'horizontal' \| 'vertical' =\n 'horizontal';\n\n /\n A function called when an item becomes 'active' (via click or keyboard)\n * @param item - html element currently being assessed\n * @param _index - the index of the html element currently being assessed\n * @returns void /\n @Prop() activeHandler = (item: HTMLElement, _index: number) =>\n item.classList.add('active');\n\n /\n A function called when an item becomes 'inactive'\n * (because another item was made active)\n * @param item - html element currently being assessed\n * @param _index - the index of the html element currently being assessed\n * @returns void /\n @Prop() inActiveHandler = (item: HTMLElement, _index: number) =>\n item.classList.remove('active');\n\n /\n A function called to assess an initial, active item\n * @param item - html element currently being assessed\n * @param _index - the index of the html element currently being assessed\n * @returns void /\n @Prop() isActiveHandler = (item: HTMLElement, _index: number) =>\n item.classList.contains('active');\n\n @Watch('isActiveHandler')\n watchIsActiveHandler() {\n this.instantReCalc = true;\n this.activeItem = this.allActiveItems.find((el, i) =>\n this.isActiveHandler(el, i)\n );\n setTimeout(() => (this.instantReCalc = false), 300);\n }\n\n /\n Sync up the view to the active item.\n * Use this when the active item changes outside of this component.\n /\n @Method()\n async syncActiveItem() {\n this.activeItem = this.allActiveItems.find((el, i) =>\n this.isActiveHandler(el, i)\n );\n }\n\n // private state\n\n constructor() {\n this.recalculatePositions = debounce(\n this.recalculatePositions.bind(this),\n 80\n );\n }\n\n private ro?: ResizeObserver;\n private nav?: HTMLElement;\n private itemContainer?: HTMLElement;\n private isRtl?: boolean;\n private endBtn: HTMLNanoIconButtonElement;\n private startBtn: HTMLNanoIconButtonElement;\n private activeIndicator: HTMLElement;\n private mutationObservers: WeakMap<Node, MutationObserver> = new WeakMap();\n\n get scrollProp() {\n return this.orientation === 'horizontal' ? 'scrollWidth' : 'scrollHeight';\n }\n\n get clientDimProp() {\n return this.orientation === 'horizontal' ? 'clientWidth' : 'clientHeight';\n }\n\n get scrollOffset() {\n return this.orientation === 'horizontal' ? 'scrollLeft' : 'scrollTop';\n }\n\n @Element() host: HTMLNanoOverflowNavElement;\n\n @State() instantReCalc = false;\n @State() hasScrollControls = false;\n\n @Watch('hasScrollControls')\n watchScrollControls() {\n if (this.hasScrollControls) this.handleScroll();\n else this.hideControlStart = this.hideControlEnd = true;\n }\n\n @State() hideControlEnd = true;\n\n @Watch('hideControlEnd')\n hideEndBtn() {\n if (!this.endBtn) return;\n this.activateBtn(this.endBtn, !this.hideControlEnd);\n }\n\n @State() hideControlStart = true;\n\n @Watch('hideControlStart')\n hideStartBtn() {\n if (!this.startBtn) return;\n this.activateBtn(this.startBtn, !this.hideControlStart);\n }\n\n // private logic\n\n private activateBtn(btn: HTMLNanoIconButtonElement, activate = true) {\n if (!activate) {\n btn.tabIndex = -1;\n btn.disabled = true;\n btn.classList.remove('is-shown');\n return;\n }\n btn.tabIndex = 0;\n btn.disabled = false;\n btn.classList.add('is-shown');\n }\n\n get allActiveItems() {\n return this.allItems.filter(\n (el: any) => !el.disabled \|\| el.classList.contains('disabled')\n );\n }\n\n get allItems() {\n return getDirectChildren<HTMLElement>(this.host, '', true);\n }\n\n get activeItem() {\n return this._activeItem;\n }\n\n set activeItem(item: HTMLElement) {\n if (\n !item \|\|\n item === this.activeItem \|\|\n (item as any).disabled \|\|\n !this.allActiveItems.includes(item)\n ) {\n return;\n }\n\n this._activeItem = item;\n this.allActiveItems.forEach((el, i) => {\n if (el === this._activeItem) this.activeHandler(el, i);\n else this.inActiveHandler(el, i);\n });\n\n this.recalculatePositions();\n }\n private _activeItem: HTMLElement;\n\n get navDim() {\n if (!this.nav) return 0;\n\n const computedStyle = getComputedStyle(this.nav);\n let clientDim = this.nav[this.clientDimProp];\n\n if (this.orientation === 'horizontal') {\n return (clientDim -=\n parseFloat(computedStyle.paddingLeft) +\n parseFloat(computedStyle.paddingRight));\n } else {\n return (clientDim -=\n parseFloat(computedStyle.paddingTop) +\n parseFloat(computedStyle.paddingBottom));\n }\n }\n\n private scrollToActiveItem() {\n if (!this.nav \|\| !this.activeItem) return;\n setTimeout(() => {\n this.activeItem.scrollIntoView({\n behavior: this.instantReCalc ? 'auto' : 'smooth',\n block: 'center',\n inline: 'center',\n });\n }, 100);\n }\n\n private syncActiveItemIndicator() {\n if (!this.activeItem) return;\n\n const item = this.activeItem;\n const width = item.clientWidth \|\| 0;\n const height = item.clientHeight + 2 \|\| 0;\n const offset = getOffset(item, this.itemContainer);\n\n if (!this.activeIndicator) return;\n\n const offsetTop = offset.top;\n const offsetLeft = offset.left;\n\n if (this.instantReCalc) this.activeIndicator.style.transition = 'none';\n\n switch (this.orientation) {\n case 'horizontal':\n this.activeIndicator.style.width = `${width}px`;\n this.activeIndicator.style.height = null;\n this.activeIndicator.style.transform = `translateX(${offsetLeft}px)`;\n break;\n\n case 'vertical':\n this.activeIndicator.style.width = null;\n this.activeIndicator.style.height = `${height}px`;\n this.activeIndicator.style.transform = `translateY(${offsetTop}px)`;\n break;\n }\n setTimeout(() => (this.activeIndicator.style.transition = null), 400);\n }\n\n private updateScrollControls = () => {\n if (!this.nav) return;\n\n this.hasScrollControls =\n this.nav[this.scrollProp] > this.nav[this.clientDimProp] &&\n this.nav[this.scrollProp] > this.itemContainer[this.clientDimProp];\n this.handleScroll();\n };\n\n private handleScroll = () => {\n if (!this.hasScrollControls) {\n this.hideControlStart = this.hideControlEnd = true;\n return;\n }\n const finishEnd = this.isRtl\n ? this.nav[this.scrollOffset] === 0\n : Math.abs(\n this.nav[this.clientDimProp] -\n (this.nav[this.scrollProp] - this.nav[this.scrollOffset])\n ) < 2;\n\n const finishStart = this.isRtl\n ? Math.abs(\n this.nav[this.scrollProp] +\n this.nav[this.scrollOffset] -\n this.nav[this.clientDimProp]\n ) < 2\n : this.nav[this.scrollOffset] === 0;\n\n if (finishStart) {\n this.hideControlStart = true;\n this.hideControlEnd = false;\n } else if (finishEnd) {\n this.hideControlStart = false;\n this.hideControlEnd = true;\n } else {\n this.hideControlEnd = false;\n this.hideControlStart = false;\n }\n };\n\n private handleBtnClick = (goEnd: boolean = false) => {\n const navDim = this.navDim;\n let scrollAmt;\n if (goEnd) scrollAmt = this.nav[this.scrollOffset] + navDim - 20;\n else scrollAmt = this.nav[this.scrollOffset] - navDim + 20;\n\n try {\n this.nav.scroll({\n left: this.orientation === 'horizontal' ? scrollAmt : 0,\n top: this.orientation === 'vertical' ? scrollAmt : 0,\n behavior: 'smooth',\n });\n } catch (e) {\n this.nav[this.scrollOffset] = scrollAmt;\n }\n };\n\n private slotChangeHandler = () => {\n if (this.allActiveItems.length < 2) return;\n const item = this.allActiveItems.find((el, i) =>\n this.isActiveHandler(el, i)\n );\n if (item) this.activeItem = item;\n this.recalculatePositions();\n\n /** maintain a weakmap of mutation observers to maintain item / indicator position on all changes. */\n this.allActiveItems.forEach((item) => {\n if (this.mutationObservers.get(item)) return;\n\n const mo = new MutationObserver(() => this.syncActiveItemIndicator());\n mo.observe(item, {\n characterData: true,\n childList: true,\n subtree: true,\n });\n\n this.mutationObservers.set(item, mo);\n });\n };\n\n private handleClick = (event: MouseEvent) => {\n if (this.allActiveItems.length < 2) return;\n const foundItem = event\n .composedPath()\n .find((e) => this.allActiveItems.includes(e as any)) as HTMLElement;\n if (foundItem) this.activeItem = foundItem;\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Activate a tab\n if (['Enter', ' '].includes(event.key)) {\n const foundItem = event\n .composedPath()\n .find((e) => this.allActiveItems.includes(e as any)) as HTMLElement;\n if (foundItem) this.activeItem = foundItem;\n }\n };\n\n private recalculatePositions = () => {\n this.updateScrollControls();\n this.syncActiveItemIndicator();\n this.scrollToActiveItem();\n };\n\n // lifecycle\n\n connectedCallback(): void {\n this.instantReCalc = true;\n this.isRtl =\n this.orientation === 'horizontal' && !!this.host.closest('[dir=\"rtl\"]');\n\n if (window['MutationObserver']) this.slotChangeHandler();\n\n if (!window['ResizeObserver']) return;\n\n if (this.ro) {\n this.ro.disconnect();\n this.ro = undefined;\n }\n const mo = (this.ro = new ResizeObserver(this.recalculatePositions));\n mo.observe(this.host);\n }\n\n componentDidLoad(): void {\n this.activeItem = this.allActiveItems.find((el, i) =>\n this.isActiveHandler(el, i)\n );\n this.instantReCalc = false;\n }\n\n disconnectedCallback(): void {\n if (this.ro) {\n this.ro.disconnect();\n this.ro = undefined;\n }\n }\n\n render() {\n return (\n <Host dir={this.isRtl ? 'rtl' : null}>\n <div\n part=\"base\"\n class={{\n onav: true,\n [`onav--${this.orientation}`]: true,\n 'onav--has-scroll-controls': this.hasScrollControls,\n 'onav--has-scroll-controls-start': !this.hideControlStart,\n 'onav--has-scroll-controls-end': !this.hideControlEnd,\n 'onav--no-transitions': this.instantReCalc,\n }}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <div class=\"onav__nav\">\n {this.scrollControls && (\n <nano-icon-button\n part=\"scroll-button scroll-button-prev\"\n class={{\n 'onav__scroll-button': true,\n 'onav__scroll-button--start': true,\n }}\n ref={(btn) => (this.startBtn = btn)}\n onClick={() => this.handleBtnClick(false)}\n label=\"Click to scroll\"\n iconName={\n this.orientation === 'horizontal'\n ? 'light/chevron-left'\n : 'light/chevron-up'\n }\n />\n )}\n\n <div\n part=\"scroller\"\n ref={(el) => (this.nav = el)}\n class=\"onav__scroller\"\n onScroll={this.handleScroll}\n >\n <div\n part=\"items\"\n ref={(el) => (this.itemContainer = el)}\n class=\"onav__items\"\n >\n <div\n part=\"indicator\"\n ref={(el) => (this.activeIndicator = el)}\n class=\"onav__active-indicator\"\n />\n <slot onSlotchange={this.slotChangeHandler} />\n </div>\n </div>\n\n {this.scrollControls && (\n <nano-icon-button\n part=\"scroll-button scroll-button-next\"\n class={{\n 'onav__scroll-button': true,\n 'onav__scroll-button--end': true,\n }}\n ref={(btn) => (this.endBtn = btn)}\n onClick={() => this.handleBtnClick(true)}\n label=\"Click to scroll\"\n iconName={\n this.orientation === 'horizontal'\n ? 'light/chevron-right'\n : 'light/chevron-down'\n }\n />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nano-tab-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-tab-group.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 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n/*\n @prop --indicator-transition: Only relevant to placement 'start'. defaults to #{$transition-fast};\n * @prop --indicator-color: defaults to #{map.get($colors, lightblue)} on placement 'top' and #{map.get($colors, blue)} on placement 'start';\n * @prop --indicator-track-color: Only relevant to placement 'start'. defaults to #{map.get($colors, lightgrey)};\n * @prop --indicator-size: defaults to 5px on placement 'top' and 2px on placement 'start';\n\n * @prop --border-radius: defaults to #{$layer-border-radius};\n * @prop --background-rgb: will be used as the default background colour for tabs and content. defaults to #{$layer-bg-color-rgb};\n * @prop --shadow-opacity: opacity of the shadow behind tabs. defaults to 0.1;\n * @prop --scroll-btn-color: defaults to 'currentcolor';\n\n * @prop --content-padding: defaults to 2rem 2.5rem;\n * @prop --content-bg: defaults to rgb(var(--background-rgb));\n * @prop --content-border-radius: defaults to var(--border-radius);\n\n * @prop --tabs-padding-start: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n * @prop --tabs-padding-end: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n * @prop --tabs-padding-top: defaults to 0;\n * @prop --tabs-padding-bottom: defaults to 0;\n * @prop --tabs-bg-rgb: defaults to var(--bg-color);\n * @prop --tab-border-radius: defaults to var(--border-radius);\n * @prop --tab-text-color: defaults to #{map.get($colors, blue)} on placement 'top' and #{map.get($colors, darkgrey)} on placement 'start';\n * @prop --fade-transparency: controls the strength of the fade on overflowing tabs, defaults to 0;\n /\n\n:host {\n --indicator-transition: #{$transition-fast};\n --indicator-color: #{map.get($colors, lightblue)};\n --indicator-track-color: #{map.get($colors, lightgrey)};\n --indicator-size: 0;\n --border-radius: #{$layer-border-radius};\n --background-rgb: #{$layer-bg-color-rgb};\n --scroll-btn-color: 'currentColor';\n --content-padding: 2rem 2.5rem;\n --content-bg: rgb(var(--background-rgb));\n --content-border-radius: var(--border-radius);\n --tabs-padding-start: 2.5rem;\n --tabs-padding-end: 2.5rem;\n --tabs-padding-top: 0;\n --tabs-padding-bottom: 0;\n --tabs-container-bg: 'transparent';\n --tabs-bg-rgb: var(--background-rgb);\n --tab-border-radius: var(--border-radius);\n --tab-text-color: #{map.get($colors, blue)};\n --shadow-opacity: 0.1;\n --fade-transparency: 0;\n\n display: block;\n position: relative;\n z-index: #{$layer-index-raised};\n\n @media only screen and (max-width: 768px) {\n --tabs-padding-start: 1.5rem;\n --tabs-padding-end: 1.5rem;\n }\n\n ::slotted(nano-tab) {\n --tab-indicator-color: var(--indicator-color);\n --bg-rgb: var(--tabs-bg-rgb);\n --border-radius: var(--tab-border-radius);\n }\n}\n\n:host([placement='start']),\n:host([placement='end']) {\n --content-padding: 1rem;\n --tabs-padding-start: 0;\n --tabs-padding-end: 0;\n --tabs-padding-top: 0;\n --tabs-padding-bottom: 0;\n --tab-text-color: #{map.get($colors, darkgrey)};\n --indicator-color: #{map.get($colors, blue)};\n --indicator-size: 2px;\n}\n\n:host(.nano-color) {\n --indicator-color: var(--nano-color-tint, #{nano-color(primary, tint)});\n --tab-text-color: rgb(var(--nano-color-base-rgb) / 70%);\n\n ::slotted(nano-tab) {\n --active-text-color: var(--nano-color-shade, #{nano-color(primary, shade)});\n }\n}\n\n.nano-tab-group {\n display: flex;\n border-radius: 0;\n width: 100%;\n flex: inherit;\n\n &__tabs {\n display: flex;\n position: relative;\n width: 100%;\n }\n\n &__active-tab-indicator {\n position: absolute;\n transition:\n var(--indicator-transition) transform ease,\n var(--indicator-transition) width ease;\n }\n\n &__body {\n background: var(--content-bg);\n }\n\n &:not(.focus-visible) ::slotted(nano-tab) {\n --focus-shadow: none;\n }\n\n .nano-tab-group__nav-container {\n position: relative;\n display: flex;\n background: var(--tabs-container-bg);\n }\n\n button {\n appearance: none;\n background-color: transparent;\n }\n\n &__scroll-button {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n inset-block: 0;\n border: unset;\n z-index: 2;\n transition: #{$transition-fast} ease opacity;\n opacity: 0;\n color: var(--scroll-btn-color);\n\n &:focus {\n outline: none;\n }\n\n &.is-shown {\n opacity: 1;\n }\n\n &.focus-visible:focus {\n box-shadow: #{$control-focus-style} inset;\n }\n\n &--left {\n 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 width: 86%;\n box-shadow: 0 10px 40px 10px rgb(0 0 0 / var(--shadow-opacity));\n height: 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 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-x: auto;\n overflow-y: hidden;\n transition: #{$transition-medium} ease;\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');\n mask-repeat: no-repeat;\n mask-image:\n linear-gradient(\n to left,\n 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 width: 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 width: auto;\n display: flex;\n justify-content: center;\n padding: var(--content-padding);\n border-radius: var(--content-border-radius);\n flex: 1 1 auto;\n }\n }\n\n ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n // Start\n ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n &--start {\n flex-direction: row;\n\n .nano-tab-group__tabs {\n flex: 0 0 auto;\n flex-direction: column;\n color: var(--tab-text-color);\n background: rgb(var(--tabs-bg-rgb));\n 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-start-start-radius: 0;\n border-start-end-radius: var(--content-border-radius);\n border-end-end-radius: var(--content-border-radius);\n border-end-start-radius: 0;\n }\n }\n}\n","import {\n Component,\n Element,\n ComponentInterface,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n Host,\n Listen,\n Build,\n} from '@stencil/core';\n\nimport { getDirectChildren, getOffset } from '../../utils/dom';\nimport { focusVisible } from '../../utils/focus-visible';\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 type { Color } from '../../interface';\n\n/*\n A tradtional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.\n \n Tabs can be stacked vertically or horizontally (which presents different styling variations) using the `placement` attribute.\n * Horizonal tabs that don't fit will overflow and scroll appropriately.\n * Tab-content can also be swiped to change tabs.\n \n @slot tabs - Add `nano-tab` elements to add clickable tabs.\n * @slot tab-content-header - a header bar displayed above tab content.\n * @slot - Add `nano-tab-content` elements to add tabbable content.\n \n @part base - the main tab-group wrapper\n * @part nav - the bar surrounding all the tabs and nav buttons\n * @part tabs - the wrapper around the `nano-tab` components\n * @part active-tab-indicator - the active indicator line\n * @part body - the wrapper around the `nano-tab-content` components\n /\n\n@Component({\n tag: 'nano-tab-group',\n styleUrl: 'tab-group.scss',\n shadow: true,\n})\nexport class TabGroup implements ComponentInterface {\n private activeTab: HTMLNanoTabElement;\n private activePanel: HTMLNanoTabContentElement;\n private activeTabIndicator: HTMLElement;\n private nav: HTMLElement;\n private tabGroup: HTMLElement;\n private tabs: HTMLElement;\n private rightBtn: HTMLButtonElement;\n private leftBtn: HTMLButtonElement;\n\n private isRtl: boolean;\n private initialTouchX: number = null;\n private initialTouchY: number = null;\n\n private resizeObserver: ResizeObserver;\n private mutationObservers: WeakMap<Node, MutationObserver> = new WeakMap();\n\n @Element() host: HTMLNanoTabGroupElement;\n\n @State() hasScrollControls = false;\n @State() hideControlRight = true;\n @State() hideControlLeft = true;\n @State() tab: string;\n\n /\n The placement of the tabs.\n /\n @Prop() placement: 'top' \| 'start' = 'top';\n\n /\n Disables the scroll arrows that appear when tabs overflow.\n /\n @Prop() noScrollControls = false;\n\n /\n The color to use from the application's color palette.\n /\n @Prop() color?: Color;\n\n /\n Store the currently open tab (against this ID) in the component store.\n * Use in conjunction with storeMethod\n /\n @Prop() storeId?: string;\n\n /\n The method of storage.\n * Either session storage, url hash (after the '#') or url query (after the '?').\n /\n @Prop() storeMethod: StorageMethods = 'session';\n\n /\n Disable 'swipe to change tab' on devices with touch\n /\n @Prop() disableSwipe: boolean;\n\n @Watch('tab')\n handleTabNameChange() {\n if (this.activeTab && this.activeTab.panel === this.tab) return;\n const tab = this.getAllActiveTabs.find((el) => el.panel === this.tab);\n this.setActiveTab(tab);\n }\n\n @Watch('placement')\n handlePlacementChange() {\n this.syncActiveTabIndicator();\n }\n\n @Watch('noScrollControls')\n handleNoScrollControlsChange() {\n this.updateScrollControls();\n }\n\n @Watch('hideControlRight')\n hideRightBtn() {\n if (!this.rightBtn) return;\n displayTransition(this.rightBtn, 'is-shown', !this.hideControlRight);\n }\n\n @Watch('hideControlLeft')\n hideLeftBtn() {\n if (!this.leftBtn) return;\n displayTransition(this.leftBtn, 'is-shown', !this.hideControlLeft);\n }\n\n @Watch('hasScrollControls')\n watchScrollControls() {\n if (this.hasScrollControls) setTimeout((_) => this.handleTabScroll(), 20);\n else\n setTimeout((_) => {\n this.hideControlLeft = this.hideControlRight = true;\n }, 20);\n }\n\n /* Emitted when a tab is shown. /\n @Event() nanoTabShow: EventEmitter<{ name: string }>;\n\n /* Emitted when a tab is hidden. /\n @Event() nanoTabHide: EventEmitter<{ name: string }>;\n\n /* Emitted when the tab is closable and the close button is activated. /\n @Event() nanoTabWillClose: EventEmitter<{ name: string }>;\n\n /* Emitted when a closable tab is removed. /\n @Event() nanoTabClose: EventEmitter<{ name: string }>;\n\n /* Shows the specified tab panel. /\n @Method()\n async show(panel: string) {\n if (this.activeTab && this.activeTab.panel === panel) return;\n\n const tab = this.getAllActiveTabs.find((el) => el.panel === panel);\n\n if (tab) this.setActiveTab(tab);\n }\n\n // Internal Methods\n\n get getAllActiveTabs() {\n return this.getAllTabs.filter((el: any) => !el.disabled);\n }\n\n get getAllTabs() {\n return getDirectChildren<HTMLNanoTabElement>(this.host, 'nano-tab');\n }\n\n get getAllPanels() {\n return getDirectChildren<HTMLNanoTabContentElement>(\n this.host,\n 'nano-tab-content'\n );\n }\n\n get getActiveTab() {\n return this.getAllActiveTabs.find((el) => el.active);\n }\n\n private updateScrollControls = () => {\n if (this.noScrollControls) {\n this.hasScrollControls = false;\n } else {\n this.hasScrollControls =\n ['top'].includes(this.placement) &&\n this.nav.scrollWidth > this.nav.clientWidth &&\n this.nav.scrollWidth > this.tabs.clientWidth;\n }\n };\n\n private setActiveTab(tab: HTMLNanoTabElement, emitEvents = true) {\n if (\n tab &&\n tab !== this.activeTab &&\n !tab.disabled &&\n this.getAllActiveTabs.includes(tab)\n ) {\n const previousTab = this.activeTab;\n this.activeTab = tab;\n this.tab = tab.panel;\n\n // Sync tabs and panels\n this.getAllActiveTabs.map((el) => (el.active = el === this.activeTab));\n this.getAllPanels.map((el) => {\n if (el.name === this.activeTab.panel) {\n el.active = true;\n this.activePanel = el;\n } else el.active = false;\n el.removeAttribute('animation-dir');\n });\n\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) => {\n const panel = panels.find((el) => el.name === tab.panel);\n if (panel) {\n tab.setAttribute('aria-controls', panel.getAttribute('id'));\n panel.setAttribute('aria-labelledby', tab.getAttribute('id'));\n }\n });\n }\n\n private syncActiveTabIndicator() {\n this.getAllTabs.forEach((tab) =>\n tab.setAttribute(\n 'direction',\n this.placement === 'top' ? 'horizontal' : 'vertical'\n )\n );\n\n const tab = this.getActiveTab;\n const width = tab.shadowRoot.querySelector('.nanotab')?.clientWidth \|\| 0;\n const height = tab.clientHeight;\n const offset = getOffset(tab, this.tabs);\n\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('nano-tab');\n\n if (tab) this.setActiveTab(tab);\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Activate a tab\n if (['Enter', ' '].includes(event.key)) {\n const target = event.target as HTMLElement;\n const tab = target.closest('nano-tab');\n\n if (tab) {\n this.setActiveTab(tab);\n event.preventDefault();\n }\n }\n\n // Move focus left or right\n if (\n [\n 'ArrowLeft',\n 'ArrowRight',\n 'ArrowUp',\n 'ArrowDown',\n 'Home',\n 'End',\n ].includes(event.key)\n ) {\n const activeEl = document.activeElement as any;\n\n if (activeEl && activeEl.tagName.toLowerCase() === 'nano-tab') {\n const tabs = this.getAllActiveTabs;\n let index = tabs.indexOf(activeEl);\n\n if (event.key === 'Home') {\n index = 0;\n } else if (event.key === 'End') {\n index = tabs.length - 1;\n } else if (\n (this.isRtl && event.key === 'ArrowRight') \|\|\n (!this.isRtl && event.key === 'ArrowLeft')\n ) {\n index = Math.max(0, index - 1);\n } else if (\n (this.isRtl && event.key === 'ArrowLeft') \|\|\n (!this.isRtl && event.key === 'ArrowRight')\n ) {\n index = Math.min(tabs.length - 1, index + 1);\n }\n tabs[index].setFocus();\n\n if (['top'].includes(this.placement)) {\n scrollIntoView(tabs[index], this.nav, 'horizontal', 'center');\n }\n // 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 };\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 traveled\n const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\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(distY) <= threshold;\n\n const tabs = this.getAllActiveTabs;\n const currIndex = tabs.findIndex((el) => el.active);\n\n if (isHorizontalSwipe) {\n const toGo =\n (distX < 0 && this.placement === 'top') \|\|\n (distX > 0 && this.placement !== 'top')\n ? 1\n : -1;\n\n if (tabs[currIndex + toGo]) {\n this.setActiveTab(tabs[currIndex + toGo]);\n\n if (Math.abs(xDiff) > Math.abs(yDiff)) {\n if (xDiff > 0) this.activePanel.setAttribute('animation-dir', 'left');\n else this.activePanel.setAttribute('animation-dir', 'right');\n }\n }\n }\n this.initialTouchX = null;\n this.initialTouchY = null;\n };\n\n private handleContentSlotChange = () => {\n setTimeout(() => {\n this.setAriaLabels();\n this.setActiveTab(this.getActiveTab \|\| this.getAllActiveTabs[0], false);\n });\n };\n\n private handleTabSlotChange = (ev: Event & { target: HTMLSlotElement }) => {\n setTimeout(() => {\n this.setAriaLabels();\n this.handleTabScroll();\n this.setActiveTab(this.getActiveTab \|\| this.getAllActiveTabs[0], false);\n this.updateScrollControls();\n }, 500);\n\n /* maintain a weakmap of mutation observers to maintain tab / indicator position on all changes. */\n const nodes = ev.target.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 focusVisible.observe(this.tabGroup);\n\n if (this.leftBtn) {\n focusVisible.observe(this.leftBtn);\n focusVisible.observe(this.rightBtn);\n }\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' \|\|\n (this.host.ownerDocument as Document).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 focusVisible.unobserve(this.tabGroup);\n if (this.leftBtn) {\n focusVisible.unobserve(this.leftBtn);\n focusVisible.unobserve(this.rightBtn);\n }\n if (this.resizeObserver) this.resizeObserver.unobserve(this.nav);\n }\n\n render() {\n this.isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n return (\n <Host\n class={{ ...createColorClasses(this.color) }}\n dir={this.isRtl ? 'rtl' : null}\n >\n <div\n part=\"base\"\n ref={(el) => (this.tabGroup = el)}\n class={{\n 'nano-tab-group': true,\n 'nano-tab-group--top': this.placement === 'top',\n 'nano-tab-group--start': this.placement === 'start',\n 'nano-tab-group--has-scroll-controls': this.hasScrollControls,\n 'nano-tab-group--has-scroll-controls-left': !this.hideControlLeft,\n 'nano-tab-group--has-scroll-controls-right': !this.hideControlRight,\n }}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <div class=\"nano-tab-group__nav-container\" part=\"nav\">\n {this.placement === 'top' && (\n <button\n class={{\n 'nano-tab-group__scroll-button': true,\n 'nano-tab-group__scroll-button--left': true,\n }}\n ref={(btn) => (this.leftBtn = btn)}\n onClick={() => this.handleBtnClick(false)}\n >\n <nano-icon name=\"light/chevron-left\"></nano-icon>\n </button>\n )}\n <div\n ref={(el) => (this.nav = el)}\n class=\"nano-tab-group__nav\"\n onScroll={this.handleTabScroll}\n >\n <div\n ref={(el) => (this.tabs = el)}\n part=\"tabs\"\n class=\"nano-tab-group__tabs\"\n role=\"tablist\"\n >\n <div\n ref={(el) => (this.activeTabIndicator = el)}\n part=\"active-tab-indicator\"\n class=\"nano-tab-group__active-tab-indicator\"\n />\n <slot name=\"tabs\" onSlotchange={this.handleTabSlotChange} />\n </div>\n </div>\n {this.placement === 'top' && (\n <button\n class={{\n 'nano-tab-group__scroll-button': true,\n 'nano-tab-group__scroll-button--right': true,\n }}\n ref={(btn) => (this.rightBtn = btn)}\n onClick={() => this.handleBtnClick(true)}\n >\n <nano-icon name=\"light/chevron-right\"></nano-icon>\n </button>\n )}\n </div>\n <slot name=\"tab-content-header\" />\n <div\n part=\"body\"\n class=\"nano-tab-group__body\"\n onTouchStart={this.handleTouchStart}\n onTouchEnd={this.handleTouchEnd}\n >\n <slot onSlotchange={this.handleContentSlotChange} />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nano-tab-group.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 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n/*\n @prop --indicator-transition: Only relevant to placement 'start'. defaults to #{$transition-fast};\n * @prop --indicator-color: defaults to #{map.get($colors, lightblue)} on placement 'top' and #{map.get($colors, blue)} on placement 'start';\n * @prop --indicator-track-color: Only relevant to placement 'start'. defaults to #{map.get($colors, lightgrey)};\n * @prop --indicator-size: defaults to 5px on placement 'top' and 2px on placement 'start';\n\n * @prop --border-radius: defaults to #{$layer-border-radius};\n * @prop --background-rgb: will be used as the default background colour for tabs and content. defaults to #{$layer-bg-color-rgb};\n * @prop --shadow-opacity: opacity of the shadow behind tabs. defaults to 0.1;\n * @prop --scroll-btn-color: defaults to 'currentcolor';\n\n * @prop --content-padding: defaults to 2rem 2.5rem;\n * @prop --content-bg: defaults to rgb(var(--background-rgb));\n * @prop --content-border-radius: defaults to var(--border-radius);\n\n * @prop --tabs-padding-start: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n * @prop --tabs-padding-end: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n * @prop --tabs-padding-top: defaults to 0;\n * @prop --tabs-padding-bottom: defaults to 0;\n * @prop --tabs-bg-rgb: defaults to var(--bg-color);\n * @prop --tab-border-radius: defaults to var(--border-radius);\n * @prop --tab-text-color: defaults to #{map.get($colors, blue)} on placement 'top' and #{map.get($colors, darkgrey)} on placement 'start';\n * @prop --fade-transparency: controls the strength of the fade on overflowing tabs, defaults to 0;\n /\n\n:host {\n --indicator-transition: #{$transition-fast};\n --indicator-color: #{map.get($colors, lightblue)};\n --indicator-track-color: #{map.get($colors, lightgrey)};\n --indicator-size: 0;\n --border-radius: #{$layer-border-radius};\n --background-rgb: #{$layer-bg-color-rgb};\n --scroll-btn-color: 'currentColor';\n --content-padding: 2rem 2.5rem;\n --content-bg: rgb(var(--background-rgb));\n --content-border-radius: var(--border-radius);\n --tabs-padding-start: 2.5rem;\n --tabs-padding-end: 2.5rem;\n --tabs-padding-top: 0;\n --tabs-padding-bottom: 0;\n --tabs-container-bg: 'transparent';\n --tabs-bg-rgb: var(--background-rgb);\n --tab-border-radius: var(--border-radius);\n --tab-text-color: #{map.get($colors, blue)};\n --shadow-opacity: 0.1;\n --fade-transparency: 0;\n\n display: block;\n position: relative;\n z-index: #{$layer-index-raised};\n\n @media only screen and (max-width: 768px) {\n --tabs-padding-start: 1.5rem;\n --tabs-padding-end: 1.5rem;\n }\n\n ::slotted(nano-tab) {\n --tab-indicator-color: var(--indicator-color);\n --bg-rgb: var(--tabs-bg-rgb);\n --border-radius: var(--tab-border-radius);\n }\n}\n\n:host([placement='start']),\n:host([placement='end']) {\n --content-padding: 1rem;\n --tabs-padding-start: 0;\n --tabs-padding-end: 0;\n --tabs-padding-top: 0;\n --tabs-padding-bottom: 0;\n --tab-text-color: #{map.get($colors, darkgrey)};\n --indicator-color: #{map.get($colors, blue)};\n --indicator-size: 2px;\n}\n\n:host(.nano-color) {\n --indicator-color: var(--nano-color-tint, #{nano-color(primary, tint)});\n --tab-text-color: rgb(var(--nano-color-base-rgb) / 70%);\n\n ::slotted(nano-tab) {\n --active-text-color: var(--nano-color-shade, #{nano-color(primary, shade)});\n }\n}\n\n.nano-tab-group {\n display: flex;\n border-radius: 0;\n width: 100%;\n flex: inherit;\n\n &__tabs {\n display: flex;\n position: relative;\n width: 100%;\n }\n\n &__active-tab-indicator {\n position: absolute;\n transition:\n var(--indicator-transition) transform ease,\n var(--indicator-transition) width ease;\n }\n\n &__body {\n background: var(--content-bg);\n }\n\n &:not(.focus-visible) ::slotted(nano-tab) {\n --focus-shadow: none;\n }\n\n .nano-tab-group__nav-container {\n position: relative;\n display: flex;\n background: var(--tabs-container-bg);\n }\n\n button {\n appearance: none;\n background-color: transparent;\n }\n\n &__scroll-button {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n inset-block: 0;\n border: unset;\n z-index: 2;\n transition: #{$transition-fast} ease opacity;\n opacity: 0;\n color: var(--scroll-btn-color);\n\n &:focus {\n outline: none;\n }\n\n &.is-shown {\n opacity: 1;\n }\n\n &.focus-visible:focus {\n box-shadow: #{$control-focus-style} inset;\n }\n\n &--left {\n 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 width: 86%;\n box-shadow: 0 10px 40px 10px rgb(0 0 0 / var(--shadow-opacity));\n height: 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 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-x: auto;\n overflow-y: hidden;\n transition: #{$transition-medium} ease;\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');\n mask-repeat: no-repeat;\n mask-image:\n linear-gradient(\n to left,\n 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 width: 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 width: auto;\n display: flex;\n justify-content: center;\n padding: var(--content-padding);\n border-radius: var(--content-border-radius);\n flex: 1 1 auto;\n }\n }\n\n ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n // Start\n ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n &--start {\n flex-direction: row;\n\n .nano-tab-group__tabs {\n flex: 0 0 auto;\n flex-direction: column;\n color: var(--tab-text-color);\n background: rgb(var(--tabs-bg-rgb));\n 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-start-start-radius: 0;\n border-start-end-radius: var(--content-border-radius);\n border-end-end-radius: var(--content-border-radius);\n border-end-start-radius: 0;\n }\n }\n}\n","import {\n Component,\n Element,\n ComponentInterface,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n Host,\n Listen,\n Build,\n} from '@stencil/core';\n\nimport { getDirectChildren, getOffset } from '../../utils/dom';\nimport { focusVisible } from '../../utils/focus-visible';\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 type { Color } from '../../interface';\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 activeTab: HTMLNanoTabElement;\n private activePanel: HTMLNanoTabContentElement;\n private activeTabIndicator: HTMLElement;\n private nav: HTMLElement;\n private tabGroup: HTMLElement;\n private tabs: HTMLElement;\n private rightBtn: HTMLButtonElement;\n private leftBtn: HTMLButtonElement;\n\n private isRtl: boolean;\n private initialTouchX: number = null;\n private initialTouchY: number = null;\n\n private resizeObserver: ResizeObserver;\n private mutationObservers: WeakMap<Node, MutationObserver> = new WeakMap();\n\n @Element() host: HTMLNanoTabGroupElement;\n\n @State() hasScrollControls = false;\n @State() hideControlRight = true;\n @State() hideControlLeft = true;\n @State() tab: string;\n\n /\n The placement of the tabs.\n /\n @Prop() placement: 'top' \| 'start' = 'top';\n\n /\n Disables the scroll arrows that appear when tabs overflow.\n /\n @Prop() noScrollControls = false;\n\n /\n The color to use from the application's color palette.\n /\n @Prop() color?: Color;\n\n /\n Store the currently open tab (against this ID) in the component store.\n * Use in conjunction with storeMethod\n /\n @Prop() storeId?: string;\n\n /\n The method of storage.\n * Either session storage, url hash (after the '#') or url query (after the '?').\n /\n @Prop() storeMethod: StorageMethods = 'session';\n\n /\n Disable 'swipe to change tab' on devices with touch\n /\n @Prop() disableSwipe: boolean;\n\n @Watch('tab')\n handleTabNameChange() {\n if (this.activeTab && this.activeTab.panel === this.tab) return;\n const tab = this.getAllActiveTabs.find((el) => el.panel === this.tab);\n this.setActiveTab(tab);\n }\n\n @Watch('placement')\n handlePlacementChange() {\n this.syncActiveTabIndicator();\n }\n\n @Watch('noScrollControls')\n handleNoScrollControlsChange() {\n this.updateScrollControls();\n }\n\n @Watch('hideControlRight')\n hideRightBtn() {\n if (!this.rightBtn) return;\n displayTransition(this.rightBtn, 'is-shown', !this.hideControlRight);\n }\n\n @Watch('hideControlLeft')\n hideLeftBtn() {\n if (!this.leftBtn) return;\n displayTransition(this.leftBtn, 'is-shown', !this.hideControlLeft);\n }\n\n @Watch('hasScrollControls')\n watchScrollControls() {\n if (this.hasScrollControls) setTimeout((_) => this.handleTabScroll(), 20);\n else\n setTimeout((_) => {\n this.hideControlLeft = this.hideControlRight = true;\n }, 20);\n }\n\n /* Emitted when a tab is shown. /\n @Event() nanoTabShow: EventEmitter<{ name: string }>;\n\n /* Emitted when a tab is hidden. /\n @Event() nanoTabHide: EventEmitter<{ name: string }>;\n\n /* Emitted when the tab is closable and the close button is activated. /\n @Event() nanoTabWillClose: EventEmitter<{ name: string }>;\n\n /* Emitted when a closable tab is removed. /\n @Event() nanoTabClose: EventEmitter<{ name: string }>;\n\n /* Shows the specified tab panel. /\n @Method()\n async show(panel: string) {\n if (this.activeTab && this.activeTab.panel === panel) return;\n\n const tab = this.getAllActiveTabs.find((el) => el.panel === panel);\n\n if (tab) this.setActiveTab(tab);\n }\n\n // Internal Methods\n\n get getAllActiveTabs() {\n return this.getAllTabs.filter((el: any) => !el.disabled);\n }\n\n get getAllTabs() {\n return getDirectChildren<HTMLNanoTabElement>(this.host, 'nano-tab');\n }\n\n get getAllPanels() {\n return getDirectChildren<HTMLNanoTabContentElement>(\n this.host,\n 'nano-tab-content'\n );\n }\n\n get getActiveTab() {\n return this.getAllActiveTabs.find((el) => el.active);\n }\n\n private updateScrollControls = () => {\n if (this.noScrollControls) {\n this.hasScrollControls = false;\n } else {\n this.hasScrollControls =\n ['top'].includes(this.placement) &&\n this.nav.scrollWidth > this.nav.clientWidth &&\n this.nav.scrollWidth > this.tabs.clientWidth;\n }\n };\n\n private setActiveTab(tab: HTMLNanoTabElement, emitEvents = true) {\n if (\n tab &&\n tab !== this.activeTab &&\n !tab.disabled &&\n this.getAllActiveTabs.includes(tab)\n ) {\n const previousTab = this.activeTab;\n this.activeTab = tab;\n this.tab = tab.panel;\n\n // Sync tabs and panels\n this.getAllActiveTabs.map((el) => (el.active = el === this.activeTab));\n this.getAllPanels.map((el) => {\n if (el.name === this.activeTab.panel) {\n el.active = true;\n this.activePanel = el;\n } else el.active = false;\n el.removeAttribute('animation-dir');\n });\n\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) => {\n const panel = panels.find((el) => el.name === tab.panel);\n if (panel) {\n tab.setAttribute('aria-controls', panel.getAttribute('id'));\n panel.setAttribute('aria-labelledby', tab.getAttribute('id'));\n }\n });\n }\n\n private syncActiveTabIndicator() {\n this.getAllTabs.forEach((tab) =>\n tab.setAttribute(\n 'direction',\n this.placement === 'top' ? 'horizontal' : 'vertical'\n )\n );\n\n const tab = this.getActiveTab;\n const width = tab.shadowRoot.querySelector('.nanotab')?.clientWidth \|\| 0;\n const height = tab.clientHeight;\n const offset = getOffset(tab, this.tabs);\n\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('nano-tab');\n\n if (tab) this.setActiveTab(tab);\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Activate a tab\n if (['Enter', ' '].includes(event.key)) {\n const target = event.target as HTMLElement;\n const tab = target.closest('nano-tab');\n\n if (tab) {\n this.setActiveTab(tab);\n event.preventDefault();\n }\n }\n\n // Move focus left or right\n if (\n [\n 'ArrowLeft',\n 'ArrowRight',\n 'ArrowUp',\n 'ArrowDown',\n 'Home',\n 'End',\n ].includes(event.key)\n ) {\n const activeEl = document.activeElement as any;\n\n if (activeEl && activeEl.tagName.toLowerCase() === 'nano-tab') {\n const tabs = this.getAllActiveTabs;\n let index = tabs.indexOf(activeEl);\n\n if (event.key === 'Home') {\n index = 0;\n } else if (event.key === 'End') {\n index = tabs.length - 1;\n } else if (\n (this.isRtl && event.key === 'ArrowRight') \|\|\n (!this.isRtl && event.key === 'ArrowLeft')\n ) {\n index = Math.max(0, index - 1);\n } else if (\n (this.isRtl && event.key === 'ArrowLeft') \|\|\n (!this.isRtl && event.key === 'ArrowRight')\n ) {\n index = Math.min(tabs.length - 1, index + 1);\n }\n tabs[index].setFocus();\n\n if (['top'].includes(this.placement)) {\n scrollIntoView(tabs[index], this.nav, 'horizontal', 'center');\n }\n // 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 };\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 traveled\n const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\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(distY) <= threshold;\n\n const tabs = this.getAllActiveTabs;\n const currIndex = tabs.findIndex((el) => el.active);\n\n if (isHorizontalSwipe) {\n const toGo =\n (distX < 0 && this.placement === 'top') \|\|\n (distX > 0 && this.placement !== 'top')\n ? 1\n : -1;\n\n if (tabs[currIndex + toGo]) {\n this.setActiveTab(tabs[currIndex + toGo]);\n\n if (Math.abs(xDiff) > Math.abs(yDiff)) {\n if (xDiff > 0) this.activePanel.setAttribute('animation-dir', 'left');\n else this.activePanel.setAttribute('animation-dir', 'right');\n }\n }\n }\n this.initialTouchX = null;\n this.initialTouchY = null;\n };\n\n private handleContentSlotChange = () => {\n setTimeout(() => {\n this.setAriaLabels();\n this.setActiveTab(this.getActiveTab \|\| this.getAllActiveTabs[0], false);\n });\n };\n\n private handleTabSlotChange = (ev: Event & { target: HTMLSlotElement }) => {\n setTimeout(() => {\n this.setAriaLabels();\n this.handleTabScroll();\n this.setActiveTab(this.getActiveTab \|\| this.getAllActiveTabs[0], false);\n this.updateScrollControls();\n }, 500);\n\n /* maintain a weakmap of mutation observers to maintain tab / indicator position on all changes. */\n const nodes = ev.target.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 focusVisible.observe(this.tabGroup);\n\n if (this.leftBtn) {\n focusVisible.observe(this.leftBtn);\n focusVisible.observe(this.rightBtn);\n }\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' \|\|\n (this.host.ownerDocument as Document).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 focusVisible.unobserve(this.tabGroup);\n if (this.leftBtn) {\n focusVisible.unobserve(this.leftBtn);\n focusVisible.unobserve(this.rightBtn);\n }\n if (this.resizeObserver) this.resizeObserver.unobserve(this.nav);\n }\n\n render() {\n this.isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n return (\n <Host\n class={{ ...createColorClasses(this.color) }}\n dir={this.isRtl ? 'rtl' : null}\n >\n <div\n part=\"base\"\n ref={(el) => (this.tabGroup = el)}\n class={{\n 'nano-tab-group': true,\n 'nano-tab-group--top': this.placement === 'top',\n 'nano-tab-group--start': this.placement === 'start',\n 'nano-tab-group--has-scroll-controls': this.hasScrollControls,\n 'nano-tab-group--has-scroll-controls-left': !this.hideControlLeft,\n 'nano-tab-group--has-scroll-controls-right': !this.hideControlRight,\n }}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <div class=\"nano-tab-group__nav-container\" part=\"nav\">\n {this.placement === 'top' && (\n <button\n class={{\n 'nano-tab-group__scroll-button': true,\n 'nano-tab-group__scroll-button--left': true,\n }}\n ref={(btn) => (this.leftBtn = btn)}\n onClick={() => this.handleBtnClick(false)}\n >\n <nano-icon name=\"light/chevron-left\"></nano-icon>\n </button>\n )}\n <div\n ref={(el) => (this.nav = el)}\n class=\"nano-tab-group__nav\"\n onScroll={this.handleTabScroll}\n >\n <div\n ref={(el) => (this.tabs = el)}\n part=\"tabs\"\n class=\"nano-tab-group__tabs\"\n role=\"tablist\"\n >\n <div\n ref={(el) => (this.activeTabIndicator = el)}\n part=\"active-tab-indicator\"\n class=\"nano-tab-group__active-tab-indicator\"\n />\n <slot name=\"tabs\" onSlotchange={this.handleTabSlotChange} />\n </div>\n </div>\n {this.placement === 'top' && (\n <button\n class={{\n 'nano-tab-group__scroll-button': true,\n 'nano-tab-group__scroll-button--right': true,\n }}\n ref={(btn) => (this.rightBtn = btn)}\n onClick={() => this.handleBtnClick(true)}\n >\n <nano-icon name=\"light/chevron-right\"></nano-icon>\n </button>\n )}\n </div>\n <slot name=\"tab-content-header\" />\n <div\n part=\"body\"\n class=\"nano-tab-group__body\"\n onTouchStart={this.handleTouchStart}\n onTouchEnd={this.handleTouchEnd}\n >\n <slot onSlotchange={this.handleContentSlotChange} />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nano-tab.js CHANGED Viewed

@@ -2,8 +2,9 @@
  * Web Components for Nanopore digital Web Apps
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$3 } from './icon.js';
-import { d as defineCustomElement$2 } from './icon-button.js';
+import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$3 } from './icon-button.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
 const tabCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--padding:0.75rem 1rem;--bg-rgb:var(--nano-layer-bg-rgb, 255 255 255);--active-bg:rgb(var(--bg-rgb) / 100%);--inactive-bg:rgb(var(--bg-rgb) / 70%);--disabled-bg-rgb:var(--bg-rgb);--text-color:#007495;--disabled-text-color:#455556;--active-text-color:#0c5a71;--h-font-size:0.93em;--v-font-size:0.875em;--tab-spacing:0.5rem;--tab-divider-size:0;--tab-divider-color:#90c6e7;--tab-indicator-size:5px;display:inline-block}:host([direction=vertical]){--padding:1rem}:host([direction=vertical]) .nanotab{font-size:var(--v-font-size)}:host([direction=vertical]) .nanotab.nanotab--active{font-weight:600;color:var(--active-text-color)}:host([direction=horizontal]) .nanotab{font-size:var(--h-font-size);-webkit-margin-before:var(--tab-indicator-size);margin-block-start:var(--tab-indicator-size);-webkit-border-end:solid var(--tab-divider-size) var(--tab-divider-color);border-inline-end:solid var(--tab-divider-size) var(--tab-divider-color)}:host([direction=horizontal]) .nanotab.nanotab--active{-webkit-margin-before:0;margin-block-start:0;-webkit-border-before:solid var(--tab-indicator-size) var(--tab-indicator-color);border-block-start:solid var(--tab-indicator-size) var(--tab-indicator-color);background:var(--active-bg);color:var(--active-text-color)}.nanotab{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;-webkit-margin-end:var(--tab-spacing);margin-inline-end:var(--tab-spacing);padding:var(--padding);display:flex;block-size:100%;inline-size:auto;background:var(--inactive-bg);border-radius:var(--border-radius) var(--border-radius) 0 0;-webkit-user-select:none;user-select:none;cursor:pointer;overflow:visible;white-space:nowrap;align-items:center}.nanotab ::slotted(*){display:flex;align-items:center}:host(:last-of-type) .nanotab{-webkit-margin-end:0;margin-inline-end:0}.nanotab:hover:not(.tab--disabled){text-shadow:0 0 0.01px var(--text-color)}.nanotab:focus{outline:none;outline-style:none;box-shadow:none;border-color:transparent}.nanotab:focus:not(.nanotab--disabled){box-shadow:var(--focus-shadow) inset}.nanotab--disabled{background:rgb(var(--disabled-bg-rgb)/100%);opacity:0.5;cursor:not-allowed;color:var(--disabled-text-color)}.nanotab__close-button{-webkit-margin-start:var(--nano-spacing-small, 8px);margin-inline-start:var(--nano-spacing-small, 8px);-webkit-appearance:none !important;appearance:none !important;--padding:var(--nano-spacing-xsmall, 4px) 0 var(--nano-spacing-xsmall, 4px) var(--nano-spacing-xsmall, 4px) !important}";
@@ -57,7 +58,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["nano-tab", "nano-icon", "nano-icon-button"];
+  const components = ["nano-tab", "nano-icon", "nano-icon-button", "nano-tooltip"];
   components.forEach(tagName => { switch (tagName) {
     case "nano-tab":
       if (!customElements.get(tagName)) {
@@ -66,10 +67,15 @@ function defineCustomElement$1() {
       break;
     case "nano-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$4();
       }
       break;
     case "nano-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "nano-tooltip":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/components/nano-tab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-tab.js","mappings":"~~;;;;;;;~~AAAA,MAAM,MAAM,GAAG,q0FAAq0F;;ACYp1F,IAAI,EAAE,GAAG,CAAC,CAAC;MAWE,GAAG;;;;;;IACN,UAAK,GAAG,YAAY,EAAE,EAAE,EAAE,CAAC;IAgC3B,qBAAgB,GAAG;MACzB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B,CAAC;IAEM,uBAAkB,GAAG,CAAC,CAAgB;MAC5C,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;QAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC;KAC5C,CAAC;iBAhC+B,EAAE;kBAGD,KAAK;oBAGH,KAAK;oBAGtB,KAAK;;;EAOxB,MAAM,QAAQ;IACZ,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;GACzC;;EAID,MAAM,WAAW;IACf,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;GACjB;EAUD,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,KAAK,IAClC,WACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;QACb,iBAAiB,EAAE,IAAI,CAAC,MAAM;QAC9B,mBAAmB,EAAE,IAAI,CAAC,QAAQ;QAClC,mBAAmB,EAAE,IAAI,CAAC,QAAQ;OACnC,EACD,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,GAAG,IAEpD,eAAQ,EACP,IAAI,CAAC,QAAQ,KACZ,wBACE,KAAK,EAAC,gBAAgB,EACtB,QAAQ,EAAC,aAAa,EACtB,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAClC,QAAQ,EAAE,CAAC,CAAC,GACZ,CACH,CACG,CACD,EACP;GACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["./src/components/tabs/tab.scss?tag=nano-tab&encapsulation=shadow","./src/components/tabs/tab.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n/*\n @prop --focus-shadow: Defaults to #{$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 #{$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($colors, blue)};\n * @prop --disabled-text-color: Defaults to #{map.get($colors, darkgrey)};\n * @prop --active-text-color: Defaults to #{map.get($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($colors, lightblue)};\n /\n\n:host {\n --focus-shadow: #{$control-focus-style};\n --padding: 0.75rem 1rem;\n --bg-rgb: #{$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($colors, blue)};\n --disabled-text-color: #{map.get($colors, darkgrey)};\n --active-text-color: #{map.get($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($colors, lightblue)};\n --tab-indicator-size: 5px;\n\n display: inline-block;\n}\n\n:host([direction='vertical']) {\n --padding: 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([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 text-inherit();\n\n margin-inline-end: var(--tab-spacing);\n padding: var(--padding);\n display: flex;\n block-size: 100%;\n inline-size: auto;\n background: var(--inactive-bg);\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n user-select: none;\n cursor: pointer;\n overflow: visible;\n white-space: nowrap;\n align-items: center;\n\n & ::slotted() {\n display: flex;\n align-items: center;\n }\n\n :host(:last-of-type) & {\n margin-inline-end: 0;\n }\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 &:focus:not(.nanotab--disabled) {\n box-shadow: var(--focus-shadow) inset;\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 &__close-button {\n margin-inline-start: #{$spacing-small};\n appearance: none !important;\n\n --padding: #{$spacing-xsmall} 0 #{$spacing-xsmall} #{$spacing-xsmall} !important;\n }\n}\n","import {\n Component,\n Element,\n Host,\n ComponentInterface,\n Method,\n Prop,\n h,\n Event,\n EventEmitter,\n} from '@stencil/core';\n\nlet id = 0;\n\n/*\n @slot - The tab's label.\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 id={this.host.id \|\| this.tabId}>\n <div\n part=\"base\"\n ref={(el) => (this.tab = el)}\n class={{\n nanotab: true,\n 'nanotab--active': this.active,\n 'nanotab--disabled': this.disabled,\n 'nanotab--closable': this.closable,\n }}\n role=\"tab\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-selected={this.active ? 'true' : 'false'}\n tabindex={this.disabled \|\| !this.active ? '-1' : '0'}\n >\n <slot />\n {this.closable && (\n <nano-icon-button\n label=\"Close this tab\"\n iconName=\"light/times\"\n class=\"nanotab__close-button\"\n onClick={this.handleCloseClick}\n onKeyDown={this.handleCloseKeydown}\n tabIndex={-1}\n />\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nano-tab.js","mappings":";;;;;;;;AAAA,MAAM,MAAM,GAAG,q0FAAq0F;;ACYp1F,IAAI,EAAE,GAAG,CAAC,CAAC;MAWE,GAAG;;;;;;IACN,UAAK,GAAG,YAAY,EAAE,EAAE,EAAE,CAAC;IAgC3B,qBAAgB,GAAG;MACzB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B,CAAC;IAEM,uBAAkB,GAAG,CAAC,CAAgB;MAC5C,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;QAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC;KAC5C,CAAC;iBAhC+B,EAAE;kBAGD,KAAK;oBAGH,KAAK;oBAGtB,KAAK;;;EAOxB,MAAM,QAAQ;IACZ,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;GACzC;;EAID,MAAM,WAAW;IACf,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;GACjB;EAUD,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,KAAK,IAClC,WACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;QACb,iBAAiB,EAAE,IAAI,CAAC,MAAM;QAC9B,mBAAmB,EAAE,IAAI,CAAC,QAAQ;QAClC,mBAAmB,EAAE,IAAI,CAAC,QAAQ;OACnC,EACD,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,GAAG,IAEpD,eAAQ,EACP,IAAI,CAAC,QAAQ,KACZ,wBACE,KAAK,EAAC,gBAAgB,EACtB,QAAQ,EAAC,aAAa,EACtB,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAClC,QAAQ,EAAE,CAAC,CAAC,GACZ,CACH,CACG,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/tabs/tab.scss?tag=nano-tab&encapsulation=shadow","./src/components/tabs/tab.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n/*\n @prop --focus-shadow: Defaults to #{$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 #{$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($colors, blue)};\n * @prop --disabled-text-color: Defaults to #{map.get($colors, darkgrey)};\n * @prop --active-text-color: Defaults to #{map.get($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($colors, lightblue)};\n /\n\n:host {\n --focus-shadow: #{$control-focus-style};\n --padding: 0.75rem 1rem;\n --bg-rgb: #{$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($colors, blue)};\n --disabled-text-color: #{map.get($colors, darkgrey)};\n --active-text-color: #{map.get($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($colors, lightblue)};\n --tab-indicator-size: 5px;\n\n display: inline-block;\n}\n\n:host([direction='vertical']) {\n --padding: 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([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 text-inherit();\n\n margin-inline-end: var(--tab-spacing);\n padding: var(--padding);\n display: flex;\n block-size: 100%;\n inline-size: auto;\n background: var(--inactive-bg);\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n user-select: none;\n cursor: pointer;\n overflow: visible;\n white-space: nowrap;\n align-items: center;\n\n & ::slotted() {\n display: flex;\n align-items: center;\n }\n\n :host(:last-of-type) & {\n margin-inline-end: 0;\n }\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 &:focus:not(.nanotab--disabled) {\n box-shadow: var(--focus-shadow) inset;\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 &__close-button {\n margin-inline-start: #{$spacing-small};\n appearance: none !important;\n\n --padding: #{$spacing-xsmall} 0 #{$spacing-xsmall} #{$spacing-xsmall} !important;\n }\n}\n","import {\n Component,\n Element,\n Host,\n ComponentInterface,\n Method,\n Prop,\n h,\n Event,\n EventEmitter,\n} from '@stencil/core';\n\nlet id = 0;\n\n/*\n @slot - The tab's label.\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 id={this.host.id \|\| this.tabId}>\n <div\n part=\"base\"\n ref={(el) => (this.tab = el)}\n class={{\n nanotab: true,\n 'nanotab--active': this.active,\n 'nanotab--disabled': this.disabled,\n 'nanotab--closable': this.closable,\n }}\n role=\"tab\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-selected={this.active ? 'true' : 'false'}\n tabindex={this.disabled \|\| !this.active ? '-1' : '0'}\n >\n <slot />\n {this.closable && (\n <nano-icon-button\n label=\"Close this tab\"\n iconName=\"light/times\"\n class=\"nanotab__close-button\"\n onClick={this.handleCloseClick}\n onKeyDown={this.handleCloseKeydown}\n tabIndex={-1}\n />\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/slot.js CHANGED Viewed

@@ -17,11 +17,9 @@ function getTextContent(slot) {
   const nodes = slot.assignedNodes({ flatten: true });
   let text = '';
   [...nodes].map((node) => {
-    if (node.nodeType === Node.TEXT_NODE) {
-      text += node.textContent;
-    }
+    text += node.textContent + ' ';
   });
-  return text;
+  return text.trim();
 }
 /**
  * Determines whether an element has a slot. If name is specified, the function will look for a corresponding named

package/dist/components/slot.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"slot.js","mappings":";;;AAAA;;;;;;AAuBA;;;;;;SAMgB,cAAc,CAAC,IAAqB;EAClD,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;EACpD,IAAI,IAAI,GAAG,EAAE,CAAC;EAEd,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI;IAClB,IAAI,IAAI,~~CAAC,QAAQ,KAAK,~~IAAI,CAAC,~~SAAS~~,~~EAAE;MACpC~~,~~IAAI~~,~~IAAI,IAAI,~~CAAC~~,WAAW,CAAC~~;~~KAC1B;GACF~~,CAAC,CAAC;EAEH,OAAO,IAAI,CAAC;~~AACd~~,CAAC;AAED;;;;;;;SAOgB,OAAO,CAAC,EAAe,EAAE,IAAa;;EAEpD,IAAI,IAAI,EAAE;IACR,OAAO,EAAE,CAAC,aAAa,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC;GACtD;;EAGD,OAAO,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI;IAC9C,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;MACtE,OAAO,IAAI,CAAC;KACb;IAED,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE;MACvC,MAAM,EAAE,GAAG,IAAmB,CAAC;MAC/B,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;QAC5B,OAAO,IAAI,CAAC;OACb;KACF;IAED,OAAO,KAAK,CAAC;GACd,CAAC,CAAC;AACL;;;;","names":[],"sources":["./src/utils/slot.ts"],"sourcesContent":["/*\n Given a slot, this function iterates over all of its assigned elements and text nodes and returns the concatenated\n * HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.\n * @param slot\n * @returns a concatenated string from html and text nodes\n /\nexport function getInnerHTML(slot: HTMLSlotElement): string {\n const nodes = slot.assignedNodes({ flatten: true });\n let html = '';\n\n [...nodes].map((node) => {\n if (node.nodeType === Node.ELEMENT_NODE) {\n html += (node as HTMLElement).outerHTML;\n }\n\n if (node.nodeType === Node.TEXT_NODE) {\n html += node.textContent;\n }\n });\n\n return html;\n}\n\n/\n Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a\n * string. This is useful because we can't use slot.textContent as an alternative.\n * @param slot\n * @returns a concatenated string of text\n /\nexport function getTextContent(slot: HTMLSlotElement): string {\n const nodes = slot.assignedNodes({ flatten: true });\n let text = '';\n\n [...nodes].map((node) => {\n ~~if (node.nodeType === Node.TEXT_NODE) {\n~~ text += node.textContent;\n ~~}\n~~ });\n\n return text;\n}\n\n/\n Determines whether an element has a slot. If name is specified, the function will look for a corresponding named\n * slot, otherwise it will look for a \"default\" slot (e.g. a non-empty text node or an element with no slot attribute).\n * @param el\n * @param name\n * @returns boolean\n */\nexport function hasSlot(el: HTMLElement, name?: string) {\n // Look for a named slot\n if (name) {\n return el.querySelector(`[slot=\"${name}\"]`) !== null;\n }\n\n // Look for a default slot\n return [...Array.from(el.childNodes)].some((node) => {\n if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== '') {\n return true;\n }\n\n if (node.nodeType === node.ELEMENT_NODE) {\n const el = node as HTMLElement;\n if (!el.hasAttribute('slot')) {\n return true;\n }\n }\n\n return false;\n });\n}\n"],"version":3}
1	+ {"file":"slot.js","mappings":";;;AAAA;;;;;;AAuBA;;;;;;SAMgB,cAAc,CAAC,IAAqB;EAClD,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;EACpD,IAAI,IAAI,GAAG,EAAE,CAAC;EAEd,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI;IAClB,IAAI,IAAI,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC;GAChC,CAAC,CAAC;EAEH,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC;AACrB,CAAC;AAED;;;;;;;SAOgB,OAAO,CAAC,EAAe,EAAE,IAAa;;EAEpD,IAAI,IAAI,EAAE;IACR,OAAO,EAAE,CAAC,aAAa,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC;GACtD;;EAGD,OAAO,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI;IAC9C,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;MACtE,OAAO,IAAI,CAAC;KACb;IAED,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE;MACvC,MAAM,EAAE,GAAG,IAAmB,CAAC;MAC/B,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;QAC5B,OAAO,IAAI,CAAC;OACb;KACF;IAED,OAAO,KAAK,CAAC;GACd,CAAC,CAAC;AACL;;;;","names":[],"sources":["./src/utils/slot.ts"],"sourcesContent":["/*\n Given a slot, this function iterates over all of its assigned elements and text nodes and returns the concatenated\n * HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.\n * @param slot\n * @returns a concatenated string from html and text nodes\n /\nexport function getInnerHTML(slot: HTMLSlotElement): string {\n const nodes = slot.assignedNodes({ flatten: true });\n let html = '';\n\n [...nodes].map((node) => {\n if (node.nodeType === Node.ELEMENT_NODE) {\n html += (node as HTMLElement).outerHTML;\n }\n\n if (node.nodeType === Node.TEXT_NODE) {\n html += node.textContent;\n }\n });\n\n return html;\n}\n\n/\n Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a\n * string. This is useful because we can't use slot.textContent as an alternative.\n * @param slot\n * @returns a concatenated string of text\n /\nexport function getTextContent(slot: HTMLSlotElement): string {\n const nodes = slot.assignedNodes({ flatten: true });\n let text = '';\n\n [...nodes].map((node) => {\n text += node.textContent + ' ';\n });\n\n return text.trim();\n}\n\n/\n Determines whether an element has a slot. If name is specified, the function will look for a corresponding named\n * slot, otherwise it will look for a \"default\" slot (e.g. a non-empty text node or an element with no slot attribute).\n * @param el\n * @param name\n * @returns boolean\n */\nexport function hasSlot(el: HTMLElement, name?: string) {\n // Look for a named slot\n if (name) {\n return el.querySelector(`[slot=\"${name}\"]`) !== null;\n }\n\n // Look for a default slot\n return [...Array.from(el.childNodes)].some((node) => {\n if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== '') {\n return true;\n }\n\n if (node.nodeType === node.ELEMENT_NODE) {\n const el = node as HTMLElement;\n if (!el.hasAttribute('slot')) {\n return true;\n }\n }\n\n return false;\n });\n}\n"],"version":3}