npm - @nanoporetech-digital/components - Versions diffs - 7.6.0 → 7.7.0 - Mend

@nanoporetech-digital/components 7.6.0 → 7.7.0

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

Files changed (680) hide show

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

	@@ -1 +1 @@
1	- {"file":"nano-menu-drawer.entry.cjs.js","mappings":"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","names":["writeTask","closestElement","h","Host"],"sources":["src/components/menu-drawer/menu-drawer.scss?tag=nano-menu-drawer&encapsulation=shadow","src/components/menu-drawer/menu-drawer.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n --padding-top: 13px;\n --padding-end: 12px;\n --padding-bottom: 13px;\n --padding-start: 12px;\n --icon-size: 19px;\n --font-size: 11px;\n --global-nav-height: 79px;\n --bg-color: #001a21;\n --bg-color-hover: rgb(28 62 72 / 80%);\n --bg-color-selected: #274048;\n --bg-color-focus: rgb(28 62 72 / 80%);\n --focus-outline: none;\n --content-color: #{map.get(tokens.$colors, white)};\n --secondary-bg-color: rgb(28 62 72);\n\n @include mx.text-inherit();\n\n display: block;\n z-index: 1;\n background: var(--bg-color);\n\n ::slotted(nano-nav-item) {\n --secondary-padding-top: var(--global-nav-height);\n --nano-icon-size: var(--icon-size);\n\n color: var(--content-color);\n font-size: var(--font-size);\n // font-weight: bold;\n text-decoration: none;\n box-sizing: border-box;\n }\n\n ,\n ::before,\n ::after {\n box-sizing: border-box;\n }\n}\n\n:host(.hide) {\n display: none;\n}\n\n:host(.has-global-nav) {\n .content-wrap {\n padding-block-start: var(--global-nav-height);\n margin-block-start: calc(var(--global-nav-height) -1);\n }\n}\n\n.container {\n inset-inline-end: auto;\n flex: 0 0 calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n background: var(--bg-color);\n color: var(--content-color);\n z-index: 1;\n inline-size: calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n block-size: 100%;\n}\n\n:host(.open) {\n .container {\n inline-size: auto;\n }\n}\n\n:host(:not(.loading)) {\n .container {\n transition: inline-size 0.3s ease;\n }\n}\n\n.content-wrap {\n inset-inline-start: 0;\n inset-block-start: 0;\n inline-size: inherit;\n max-inline-size: inherit;\n background: var(--bg-color);\n color: map.get(tokens.$colors, white);\n position: sticky;\n font-size: var(--icon-size);\n line-height: 1;\n display: flex;\n min-block-size: calc(100vh - 79px);\n min-block-size: calc((var(--vh, 1vh) * 100) - 79px);\n z-index: 1;\n}\n\n.content {\n inline-size: auto;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n background: var(--bg-color);\n flex: 1;\n\n &::after {\n content: '';\n position: absolute;\n inset-block-start: 0;\n inset-inline: 0;\n background: var(--bg-color);\n z-index: -1;\n block-size: 100vh;\n }\n}\n\n.collapse-btn {\n background: var(--bg-color-selected);\n border: none;\n color: inherit;\n font-size: var(--icon-size);\n margin-block: var(--padding-top) var(--padding-bottom);\n margin-inline: calc(var(--padding-start) / 2) 0;\n border-radius: 4px;\n padding-block: 6px;\n padding-inline: 5px;\n display: flex;\n align-content: center;\n inline-size: 30px;\n flex: 0 0 auto;\n\n nano-icon {\n font-size: var(--icon-size);\n transition: 0.2s transform ease-in-out;\n transform: translateZ(0) rotate(0deg);\n\n :host(.open) & {\n transform: translateZ(0) rotate(180deg);\n }\n }\n}\n\n.foot {\n margin-block-start: auto;\n}\n\n.measure-ele {\n block-size: 1px;\n}\n","import {\n Component,\n h,\n Host,\n Prop,\n writeTask,\n State,\n Element,\n Watch,\n Listen,\n Build,\n} from '@stencil/core';\nimport { closestElement } from '../../utils/dom';\nimport { NavItemEventDetail } from '../nav-item/nav-item-interface';\n\n/*\n Menu drawer - digital specific navigation strip designed to be open (default) or closed.\n * Shows menu item logos only on minimised, expands to show entire menu item.\n * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.\n * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.\n * @slot foot - nav items to be placed at the bottom of the drawer\n * @slot - default slot for nav items\n /\n@Component({\n tag: 'nano-menu-drawer',\n styleUrl: 'menu-drawer.scss',\n shadow: true,\n})\nexport class MenuDrawer {\n private containerDiv: HTMLDivElement;\n private contentDiv: HTMLElement;\n private measureEle: HTMLElement;\n private globalNav: HTMLNanoGlobalNavElement;\n private children: Array<{ slot: string; element: HTMLNanoNavItemElement }> =\n [];\n private io: IntersectionObserver;\n private currHeight: number = window.innerHeight;\n\n @Element() private el: HTMLNanoMenuDrawerElement;\n\n @State() reset: boolean = false;\n @State() widthOk: boolean = true;\n @State() heightOk: boolean = true;\n @State() isLoading: boolean = true;\n @State() hide: boolean = false;\n\n /\n Set the initial menu drawer open or closed\n /\n @Prop({ mutable: true }) open: boolean = true;\n\n /\n Save open state to localStorage\n /\n @Prop() saveState: boolean = true;\n\n /\n Screen width to hide the menu drawer and move the items into the nano-global-nav\n /\n @Prop() hideWidth: number = 576;\n\n /\n Should element hide and move items into the nano-global-nav when items are cut off\n * (this will only work when nano-menu-drawer is displayed at full screen)\n /\n @Prop() hideHeight: boolean = true;\n\n @Listen('nanoOpen')\n @Listen('nanoClose')\n cancelNavItemEvents(ev: CustomEvent) {\n if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n ev.stopPropagation();\n }\n\n @Watch('open')\n openChange() {\n if (this.saveState)\n localStorage.setItem('nanoMenuDrawerOpen', this.open.toString());\n if (this.containerDiv) {\n if (this.open)\n writeTask(\n () =>\n (this.containerDiv.style.width = this.contentDiv.scrollWidth + 'px')\n );\n else writeTask(() => (this.containerDiv.style.width = null));\n }\n }\n\n @Watch('widthOk')\n widthChange() {\n if (this.widthOk) this.moveItemsToDrawer();\n else this.moveItemsToGlobalNav();\n }\n\n @Watch('hideHeight')\n hideHeightChange() {\n if (this.hideHeight && !this.io) this.attachIO();\n else if (!this.hideHeight && this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n private moveItemsToGlobalNav() {\n const currNavItems = this.el.querySelectorAll('nano-nav-item');\n // dimensions not cool - move items out of element and into global nav\n currNavItems.forEach((element) => {\n this.children.push({\n slot: element.getAttribute('slot'),\n element: element,\n });\n element.setAttribute('slot', 'overflow');\n element.classList.add('nano-global-nav-menu');\n this.globalNav.appendChild(element);\n });\n this.hide = true;\n }\n\n private moveItemsToDrawer() {\n if (!this.children \|\| !this.children.length) return;\n\n this.children.forEach((child) => {\n child.element.removeAttribute('slot');\n child.element.classList.remove('nano-global-nav-menu');\n if (child.slot && child.slot.length)\n child.element.setAttribute('slot', child.slot);\n this.el.appendChild(child.element);\n });\n this.children = [];\n this.hide = false;\n if (!this.io) this.attachIO();\n }\n\n private onWindowResize = () => {\n if (window.innerWidth > this.hideWidth) this.widthOk = true;\n else this.widthOk = false;\n\n const vh = window.innerHeight 0.01;\n this.el.style.setProperty('--vh', `${vh}px`);\n\n if (\n window.innerHeight > this.currHeight &&\n this.widthOk &&\n !this.heightOk\n ) {\n this.moveItemsToDrawer();\n }\n this.currHeight = window.innerHeight;\n };\n\n private toggle = (e: MouseEvent) => {\n e.preventDefault();\n this.open = !this.open;\n };\n\n private onToggleKeyDown = (ev: KeyboardEvent) => {\n switch (ev.key) {\n case 'Enter':\n case ' ':\n this.open = !this.open;\n break;\n }\n };\n\n private attachIO() {\n if (!this.hideHeight) return;\n const io: IntersectionObserver = (this.io = new (\n window as any\n ).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n this.heightOk = data[0].intersectionRatio !== 0;\n if (!this.heightOk) {\n this.moveItemsToGlobalNav();\n this.io.disconnect();\n this.io = undefined;\n }\n },\n { threshold: 1 }\n ));\n io.observe(this.measureEle);\n }\n\n @Listen('nanoIsReady', { target: 'body' })\n handleGlobalNavReady(e: CustomEvent & { target: HTMLNanoGlobalNavElement }) {\n if (e.target.tagName !== 'NANO-GLOBAL-NAV') return;\n\n setTimeout(() => {\n this.attachIO();\n this.openChange();\n this.onWindowResize();\n this.isLoading = false;\n }, 500);\n }\n\n componentWillLoad() {\n this.globalNav = closestElement(\n 'nano-global-nav',\n this.el\n ) as HTMLNanoGlobalNavElement;\n\n this.widthOk = window.innerWidth > this.hideWidth;\n this.currHeight = window.innerHeight;\n\n if (this.saveState) {\n const localState = localStorage.getItem('nanoMenuDrawerOpen');\n this.open = localState ? localState === 'true' : this.open;\n }\n }\n\n componentDidLoad() {\n if (Build.isBrowser) {\n window.addEventListener('resize', this.onWindowResize);\n }\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.onWindowResize);\n if (this.io) {\n this.io.disconnect();\n this.io = null;\n }\n }\n\n render() {\n return (\n <Host\n class={{\n open: this.open,\n hide: this.hide,\n loading: this.isLoading,\n 'has-global-nav': !!this.globalNav,\n }}\n dir={this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null}\n >\n <div ref={(div) => (this.containerDiv = div)} class=\"container\">\n <div class=\"content-wrap\">\n <nav ref={(div) => (this.contentDiv = div)} class=\"content\">\n <button\n onMouseDown={this.toggle}\n onKeyDown={this.onToggleKeyDown}\n class=\"collapse-btn\"\n >\n <nano-icon\n name=\"light/right-to-line\"\n aria-label=\"collapse / expand\"\n ></nano-icon>\n </button>\n <slot />\n <div class=\"foot\">\n <div\n class=\"measure-ele\"\n ref={(div) => (this.measureEle = div)}\n ></div>\n <slot name=\"foot\" />\n </div>\n </nav>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nano-menu-drawer.entry.cjs.js","mappings":"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","names":["writeTask","transformTag","closestElement","h","Host"],"sources":["src/components/menu-drawer/menu-drawer.scss?tag=nano-menu-drawer&encapsulation=shadow","src/components/menu-drawer/menu-drawer.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n --padding-top: 13px;\n --padding-end: 12px;\n --padding-bottom: 13px;\n --padding-start: 12px;\n --icon-size: 19px;\n --font-size: 11px;\n --global-nav-height: 79px;\n --bg-color: #001a21;\n --bg-color-hover: rgb(28 62 72 / 80%);\n --bg-color-selected: #274048;\n --bg-color-focus: rgb(28 62 72 / 80%);\n --focus-outline: none;\n --content-color: #{map.get(tokens.$colors, white)};\n --secondary-bg-color: rgb(28 62 72);\n\n @include mx.text-inherit();\n\n display: block;\n z-index: 1;\n background: var(--bg-color);\n\n ::slotted(.nano-nav-item) {\n --secondary-padding-top: var(--global-nav-height);\n --nano-icon-size: var(--icon-size);\n\n color: var(--content-color);\n font-size: var(--font-size);\n // font-weight: bold;\n text-decoration: none;\n box-sizing: border-box;\n }\n\n ,\n ::before,\n ::after {\n box-sizing: border-box;\n }\n}\n\n:host(.hide) {\n display: none;\n}\n\n:host(.has-global-nav) {\n .content-wrap {\n padding-block-start: var(--global-nav-height);\n margin-block-start: calc(var(--global-nav-height) -1);\n }\n}\n\n.container {\n inset-inline-end: auto;\n flex: 0 0 calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n background: var(--bg-color);\n color: var(--content-color);\n z-index: 1;\n inline-size: calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n block-size: 100%;\n}\n\n:host(.open) {\n .container {\n inline-size: auto;\n }\n}\n\n:host(:not(.loading)) {\n .container {\n transition: inline-size 0.3s ease;\n }\n}\n\n.content-wrap {\n inset-inline-start: 0;\n inset-block-start: 0;\n inline-size: inherit;\n max-inline-size: inherit;\n background: var(--bg-color);\n color: map.get(tokens.$colors, white);\n position: sticky;\n font-size: var(--icon-size);\n line-height: 1;\n display: flex;\n min-block-size: calc(100vh - 79px);\n min-block-size: calc((var(--vh, 1vh) * 100) - 79px);\n z-index: 1;\n}\n\n.content {\n inline-size: auto;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n background: var(--bg-color);\n flex: 1;\n\n &::after {\n content: '';\n position: absolute;\n inset-block-start: 0;\n inset-inline: 0;\n background: var(--bg-color);\n z-index: -1;\n block-size: 100vh;\n }\n}\n\n.collapse-btn {\n background: var(--bg-color-selected);\n border: none;\n color: inherit;\n font-size: var(--icon-size);\n margin-block: var(--padding-top) var(--padding-bottom);\n margin-inline: calc(var(--padding-start) / 2) 0;\n border-radius: 4px;\n padding-block: 6px;\n padding-inline: 5px;\n display: flex;\n align-content: center;\n inline-size: 30px;\n flex: 0 0 auto;\n\n .nano-icon {\n font-size: var(--icon-size);\n transition: 0.2s transform ease-in-out;\n transform: translateZ(0) rotate(0deg);\n\n :host(.open) & {\n transform: translateZ(0) rotate(180deg);\n }\n }\n}\n\n.foot {\n margin-block-start: auto;\n}\n\n.measure-ele {\n block-size: 1px;\n}\n","import {\n Component,\n Host,\n Prop,\n writeTask,\n State,\n Element,\n Watch,\n Listen,\n Build,\n} from '@stencil/core';\nimport { closestElement } from '../../utils/dom';\nimport { NavItemEventDetail } from '../nav-item/nav-item-interface';\nimport { transformTag, h } from '../../utils/renderer';\n\n/*\n Menu drawer - digital specific navigation strip designed to be open (default) or closed.\n * Shows menu item logos only on minimised, expands to show entire menu item.\n * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.\n * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.\n * @slot foot - nav items to be placed at the bottom of the drawer\n * @slot - default slot for nav items\n /\n@Component({\n tag: 'nano-menu-drawer',\n styleUrl: 'menu-drawer.scss',\n shadow: true,\n})\nexport class MenuDrawer {\n private containerDiv: HTMLDivElement;\n private contentDiv: HTMLElement;\n private measureEle: HTMLElement;\n private globalNav: HTMLNanoGlobalNavElement;\n private children: Array<{ slot: string; element: HTMLNanoNavItemElement }> =\n [];\n private io: IntersectionObserver;\n private currHeight: number = window.innerHeight;\n\n @Element() private el: HTMLNanoMenuDrawerElement;\n\n @State() reset: boolean = false;\n @State() widthOk: boolean = true;\n @State() heightOk: boolean = true;\n @State() isLoading: boolean = true;\n @State() hide: boolean = false;\n\n /\n Set the initial menu drawer open or closed\n /\n @Prop({ mutable: true }) open: boolean = true;\n\n /\n Save open state to localStorage\n /\n @Prop() saveState: boolean = true;\n\n /\n Screen width to hide the menu drawer and move the items into the nano-global-nav\n /\n @Prop() hideWidth: number = 576;\n\n /\n Should element hide and move items into the nano-global-nav when items are cut off\n * (this will only work when nano-menu-drawer is displayed at full screen)\n /\n @Prop() hideHeight: boolean = true;\n\n @Listen('nanoOpen')\n @Listen('nanoClose')\n cancelNavItemEvents(ev: CustomEvent) {\n if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n ev.stopPropagation();\n }\n\n @Watch('open')\n openChange() {\n if (this.saveState)\n localStorage.setItem('nanoMenuDrawerOpen', this.open.toString());\n if (this.containerDiv) {\n if (this.open)\n writeTask(\n () =>\n (this.containerDiv.style.width = this.contentDiv.scrollWidth + 'px')\n );\n else writeTask(() => (this.containerDiv.style.width = null));\n }\n }\n\n @Watch('widthOk')\n widthChange() {\n if (this.widthOk) this.moveItemsToDrawer();\n else this.moveItemsToGlobalNav();\n }\n\n @Watch('hideHeight')\n hideHeightChange() {\n if (this.hideHeight && !this.io) this.attachIO();\n else if (!this.hideHeight && this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n private moveItemsToGlobalNav() {\n const currNavItems = this.el.querySelectorAll<HTMLNanoNavItemElement>(\n transformTag('nano-nav-item')\n );\n // dimensions not cool - move items out of element and into global nav\n currNavItems.forEach((element) => {\n this.children.push({\n slot: element.getAttribute('slot'),\n element: element,\n });\n element.setAttribute('slot', 'overflow');\n element.classList.add('nano-global-nav-menu');\n this.globalNav.appendChild(element);\n });\n this.hide = true;\n }\n\n private moveItemsToDrawer() {\n if (!this.children \|\| !this.children.length) return;\n\n this.children.forEach((child) => {\n child.element.removeAttribute('slot');\n child.element.classList.remove('nano-global-nav-menu');\n if (child.slot && child.slot.length)\n child.element.setAttribute('slot', child.slot);\n this.el.appendChild(child.element);\n });\n this.children = [];\n this.hide = false;\n if (!this.io) this.attachIO();\n }\n\n private onWindowResize = () => {\n if (window.innerWidth > this.hideWidth) this.widthOk = true;\n else this.widthOk = false;\n\n const vh = window.innerHeight 0.01;\n this.el.style.setProperty('--vh', `${vh}px`);\n\n if (\n window.innerHeight > this.currHeight &&\n this.widthOk &&\n !this.heightOk\n ) {\n this.moveItemsToDrawer();\n }\n this.currHeight = window.innerHeight;\n };\n\n private toggle = (e: MouseEvent) => {\n e.preventDefault();\n this.open = !this.open;\n };\n\n private onToggleKeyDown = (ev: KeyboardEvent) => {\n switch (ev.key) {\n case 'Enter':\n case ' ':\n this.open = !this.open;\n break;\n }\n };\n\n private attachIO() {\n if (!this.hideHeight) return;\n const io: IntersectionObserver = (this.io = new (\n window as any\n ).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n this.heightOk = data[0].intersectionRatio !== 0;\n if (!this.heightOk) {\n this.moveItemsToGlobalNav();\n this.io.disconnect();\n this.io = undefined;\n }\n },\n { threshold: 1 }\n ));\n io.observe(this.measureEle);\n }\n\n @Listen('nanoIsReady', { target: 'body' })\n handleGlobalNavReady(e: CustomEvent & { target: HTMLNanoGlobalNavElement }) {\n if (e.target.tagName.toLowerCase() !== transformTag('nano-global-nav'))\n return;\n\n setTimeout(() => {\n this.attachIO();\n this.openChange();\n this.onWindowResize();\n this.isLoading = false;\n }, 500);\n }\n\n componentWillLoad() {\n this.globalNav = closestElement(\n transformTag('nano-global-nav'),\n this.el\n ) as HTMLNanoGlobalNavElement;\n\n this.widthOk = window.innerWidth > this.hideWidth;\n this.currHeight = window.innerHeight;\n\n if (this.saveState) {\n const localState = localStorage.getItem('nanoMenuDrawerOpen');\n this.open = localState ? localState === 'true' : this.open;\n }\n }\n\n componentDidLoad() {\n if (Build.isBrowser) {\n window.addEventListener('resize', this.onWindowResize);\n }\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.onWindowResize);\n if (this.io) {\n this.io.disconnect();\n this.io = null;\n }\n }\n\n render() {\n return (\n <Host\n class={{\n open: this.open,\n hide: this.hide,\n loading: this.isLoading,\n 'has-global-nav': !!this.globalNav,\n 'nano-menu-drawer': true,\n }}\n dir={this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null}\n >\n <div ref={(div) => (this.containerDiv = div)} class=\"container\">\n <div class=\"content-wrap\">\n <nav ref={(div) => (this.contentDiv = div)} class=\"content\">\n <button\n onMouseDown={this.toggle}\n onKeyDown={this.onToggleKeyDown}\n class=\"collapse-btn\"\n >\n <nano-icon\n name=\"light/right-to-line\"\n aria-label=\"collapse / expand\"\n ></nano-icon>\n </button>\n <slot />\n <div class=\"foot\">\n <div\n class=\"measure-ele\"\n ref={(div) => (this.measureEle = div)}\n ></div>\n <slot name=\"foot\" />\n </div>\n </nav>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/nano-more-less.cjs.entry.js CHANGED Viewed

@@ -5,7 +5,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-b6fa04fa.js');
+const index = require('./index-615cdb64.js');
+const renderer = require('./renderer-cd8b6098.js');
 const Rating = class {
     constructor(hostRef) {
@@ -55,9 +56,9 @@ const Rating = class {
         this.handleShowHideElements();
     }
     render() {
-        return (index.h(index.Host, { key: 'f027eeb0a9a1874b4e98686b9e501ddc44d4c632' }, index.h("slot", { key: '98bf588c101034356091253382ccebdbe67a78f1', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
-            index.h("div", { key: 'd4748dec7f25dbeb0e9d4cf27a9857dc6411c349', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, index.h("slot", { key: 'c5b5d9b781761ece8d917391c132c3768838b6cd', name: "less" }, index.h("button", { key: '31d16fe52e896736bcc1d9617ad54aa4d5b69f47', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
-            !this.noHideBtn ? (index.h("div", { style: { display: this.show ? 'contents' : 'none' }, class: "button-wrapper", part: "button-wrapper button-wrapper--more", onClick: (e) => this.handleClick(e) }, index.h("slot", { name: "more" }, index.h("button", { part: "button button--more" }, "Show less (-", this.children.length - this.maxToShow, ")")))) : (''),
+        return (renderer.h(index.Host, { key: 'ea8fe47faa76ad680aa1c87865db6c04ff0228b6', class: "nano-more-less" }, renderer.h("slot", { key: '69b79b49c00677a08fbcc2143e6efd99520c7ae4', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
+            renderer.h("div", { key: '2972c854e94cc04cd41cb8c19afdade3d3decc8b', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, renderer.h("slot", { key: 'b3f7e2cf17d0c447d26cf1de996194910381bc35', name: "less" }, renderer.h("button", { key: 'dd079d36070438e93bd9cce9bf914139bb9f6f74', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
+            !this.noHideBtn ? (renderer.h("div", { style: { display: this.show ? 'contents' : 'none' }, class: "button-wrapper", part: "button-wrapper button-wrapper--more", onClick: (e) => this.handleClick(e) }, renderer.h("slot", { name: "more" }, renderer.h("button", { part: "button button--more" }, "Show less (-", this.children.length - this.maxToShow, ")")))) : (''),
         ]));
     }
     static get watchers() { return {

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

	@@ -1 +1 @@
1	- {"file":"nano-more-less.entry.cjs.js","mappings":"~~;;;;;;;;;~~MA6Ba,MAAM;;;;;;IAIuB,IAAI,GAAG,KAAK,CAAC;;IAG7C,gBAAgB,CAAS;;;IAIzB,SAAS,GAAG,CAAC,CAAC;;IAGd,SAAS,GAAG,KAAK,CAAC;IAE1B,IAAI,QAAQ;QACV,IAAI,QAAyD,CAAC;QAE9D,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;SAC9D;aAAM;YACL,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;SAC/B;QACD,OAAO,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,CAChC,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,YAAY,CAAC,MAAM,CAAC,CAClB,CAAC;KACpB;IAKD,sBAAsB;QACpB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC;YAC3B,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,IAAI,GAAG,CAAC,KAAK,CAAC,OAAO,KAAK,MAAM,EAAE;oBAChC,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;iBACxB;aACF;iBAAM;gBACL,IAAI,CAAC,IAAI,IAAI,CAAC,SAAS,EAAE;oBACvB,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;iBAC5B;qBAAM;oBACL,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;iBACxB;aACF;SACF,CAAC,CAAC;KACJ;IAEO,WAAW,CAAC,EAAc;QAChC,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;KACxB;IAED,iBAAiB;QACf,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;IAED,MAAM;QACJ,QACEA,~~QAACC~~,UAAI,~~uDACHD~~,~~mEAAM~~,YAAY,EAAE,MAAM,IAAI,CAAC,sBAAsB,EAAE,GAAI,EAC1D,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC,SAAS,IAAI;YACzCA,~~kEACE~~,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,UAAU,EAAE,EACnD,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,qCAAqC,EAC1C,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAEnCA,~~mEAAM~~,IAAI,EAAC,MAAM,IACfA,~~qEAAQ~~,IAAI,EAAC,qBAAqB,oBACnB,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,MAC3C,CACJ,CACH;YACN,CAAC,IAAI,CAAC,SAAS,IACbA,~~iBACE~~,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,GAAG,UAAU,GAAG,MAAM,EAAE,EACnD,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,qCAAqC,EAC1C,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAEnCA,~~kBAAM~~,IAAI,EAAC,MAAM,IACfA,~~oBAAQ~~,IAAI,EAAC,qBAAqB,oBACnB,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,MAC3C,CACJ,CACH,KAEN,EAAE,CACH;SACF,CACI,EACP;KACH;;;;;;;;;;;","names":["h","Host"],"sources":["src/components/more-less/more-less.tsx"],"sourcesContent":["import {\n Component,\n Element,\n Prop,\n ~~h,\n~~ ComponentInterface,\n Host,\n Watch,\n} from '@stencil/core';\n\n/*\n A simple component to show more or less elements.\n \n @slot less - a button displayed when all fewer are shown. When clicked will show elements\n * @slot more - a button displayed when all items are shown. When clicked will hide elements\n * @slot - default slot displaying children elements to show or hide\n \n @part button-wrapper - wraps the 'more' / 'less' buttons\n * @part button-wrapper--more - wraps the 'more' button\n * @part button-wrapper--less - wraps the 'less' button\n * @part button - default 'more' / 'less' buttons\n * @part button--more - the default 'more' button\n * @part button--less - the default 'less' button\n /\n@Component({\n tag: 'nano-more-less',\n shadow: true,\n styles: / css / `:host { display: contents; }`,\n})\nexport class Rating implements ComponentInterface {\n @Element() host: HTMLNanoMoreLessElement;\n\n /* The default state. `false` - excess items are hidden. `true` - excess items are shown. /\n @Prop({ reflect: true, mutable: true }) show = false;\n\n /* Optional JS selector to target which elements to hide or show /\n @Prop() childrenSelector: string;\n\n /* The maximum number of items to show when `show` is true.\n * Excess items will be hidden. /\n @Prop() maxToShow = 3;\n\n /* Only show the 'show more' button */\n @Prop() noHideBtn = false;\n\n get children() {\n let children: NodeListOf<Element> \| HTMLCollectionOf<Element>;\n\n if (this.childrenSelector) {\n children = this.host.querySelectorAll(this.childrenSelector);\n } else {\n children = this.host.children;\n }\n return Array.from(children).filter(\n (ele) => !ele.hasAttribute('slot')\n ) as HTMLElement[];\n }\n\n @Watch('maxToShow')\n @Watch('show')\n @Watch('childrenSelector')\n handleShowHideElements() {\n this.children.forEach((ele, i) => {\n if (this.show) {\n if (ele.style.display === 'none') {\n ele.style.display = '';\n }\n } else {\n if (i >= this.maxToShow) {\n ele.style.display = 'none';\n } else {\n ele.style.display = '';\n }\n }\n });\n }\n\n private handleClick(_e: MouseEvent) {\n this.show = !this.show;\n }\n\n connectedCallback() {\n this.handleShowHideElements();\n }\n\n render() {\n return (\n <Host>\n <slot onSlotchange={() => this.handleShowHideElements()} />\n {this.children?.length > this.maxToShow && [\n <div\n style={{ display: this.show ? 'none' : 'contents' }}\n class=\"button-wrapper\"\n part=\"button-wrapper button-wrapper--less\"\n onClick={(e) => this.handleClick(e)}\n >\n <slot name=\"less\">\n <button part=\"button button--less\">\n Show more (+{this.children.length - this.maxToShow})\n </button>\n </slot>\n </div>,\n !this.noHideBtn ? (\n <div\n style={{ display: this.show ? 'contents' : 'none' }}\n class=\"button-wrapper\"\n part=\"button-wrapper button-wrapper--more\"\n onClick={(e) => this.handleClick(e)}\n >\n <slot name=\"more\">\n <button part=\"button button--more\">\n Show less (-{this.children.length - this.maxToShow})\n </button>\n </slot>\n </div>\n ) : (\n ''\n ),\n ]}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nano-more-less.entry.cjs.js","mappings":";;;;;;;;;;MA6Ba,MAAM;;;;;;IAIuB,IAAI,GAAG,KAAK,CAAC;;IAG7C,gBAAgB,CAAS;;;IAIzB,SAAS,GAAG,CAAC,CAAC;;IAGd,SAAS,GAAG,KAAK,CAAC;IAE1B,IAAI,QAAQ;QACV,IAAI,QAAyD,CAAC;QAE9D,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;SAC9D;aAAM;YACL,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;SAC/B;QACD,OAAO,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,CAChC,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,YAAY,CAAC,MAAM,CAAC,CAClB,CAAC;KACpB;IAKD,sBAAsB;QACpB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC;YAC3B,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,IAAI,GAAG,CAAC,KAAK,CAAC,OAAO,KAAK,MAAM,EAAE;oBAChC,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;iBACxB;aACF;iBAAM;gBACL,IAAI,CAAC,IAAI,IAAI,CAAC,SAAS,EAAE;oBACvB,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;iBAC5B;qBAAM;oBACL,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;iBACxB;aACF;SACF,CAAC,CAAC;KACJ;IAEO,WAAW,CAAC,EAAc;QAChC,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;KACxB;IAED,iBAAiB;QACf,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;IAED,MAAM;QACJ,QACEA,WAACC,UAAI,qDAAC,KAAK,EAAC,gBAAgB,IAC1BD,sEAAM,YAAY,EAAE,MAAM,IAAI,CAAC,sBAAsB,EAAE,GAAI,EAC1D,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC,SAAS,IAAI;YACzCA,qEACE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,UAAU,EAAE,EACnD,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,qCAAqC,EAC1C,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAEnCA,sEAAM,IAAI,EAAC,MAAM,IACfA,wEAAQ,IAAI,EAAC,qBAAqB,oBACnB,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,MAC3C,CACJ,CACH;YACN,CAAC,IAAI,CAAC,SAAS,IACbA,oBACE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,GAAG,UAAU,GAAG,MAAM,EAAE,EACnD,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,qCAAqC,EAC1C,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAEnCA,qBAAM,IAAI,EAAC,MAAM,IACfA,uBAAQ,IAAI,EAAC,qBAAqB,oBACnB,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,MAC3C,CACJ,CACH,KAEN,EAAE,CACH;SACF,CACI,EACP;KACH;;;;;;;;;;;","names":["h","Host"],"sources":["src/components/more-less/more-less.tsx"],"sourcesContent":["import {\n Component,\n Element,\n Prop,\n ComponentInterface,\n Host,\n Watch,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\n\n/*\n A simple component to show more or less elements.\n \n @slot less - a button displayed when all fewer are shown. When clicked will show elements\n * @slot more - a button displayed when all items are shown. When clicked will hide elements\n * @slot - default slot displaying children elements to show or hide\n \n @part button-wrapper - wraps the 'more' / 'less' buttons\n * @part button-wrapper--more - wraps the 'more' button\n * @part button-wrapper--less - wraps the 'less' button\n * @part button - default 'more' / 'less' buttons\n * @part button--more - the default 'more' button\n * @part button--less - the default 'less' button\n /\n@Component({\n tag: 'nano-more-less',\n shadow: true,\n styles: / css / `:host { display: contents; }`,\n})\nexport class Rating implements ComponentInterface {\n @Element() host: HTMLNanoMoreLessElement;\n\n /* The default state. `false` - excess items are hidden. `true` - excess items are shown. /\n @Prop({ reflect: true, mutable: true }) show = false;\n\n /* Optional JS selector to target which elements to hide or show /\n @Prop() childrenSelector: string;\n\n /* The maximum number of items to show when `show` is true.\n * Excess items will be hidden. /\n @Prop() maxToShow = 3;\n\n /* Only show the 'show more' button */\n @Prop() noHideBtn = false;\n\n get children() {\n let children: NodeListOf<Element> \| HTMLCollectionOf<Element>;\n\n if (this.childrenSelector) {\n children = this.host.querySelectorAll(this.childrenSelector);\n } else {\n children = this.host.children;\n }\n return Array.from(children).filter(\n (ele) => !ele.hasAttribute('slot')\n ) as HTMLElement[];\n }\n\n @Watch('maxToShow')\n @Watch('show')\n @Watch('childrenSelector')\n handleShowHideElements() {\n this.children.forEach((ele, i) => {\n if (this.show) {\n if (ele.style.display === 'none') {\n ele.style.display = '';\n }\n } else {\n if (i >= this.maxToShow) {\n ele.style.display = 'none';\n } else {\n ele.style.display = '';\n }\n }\n });\n }\n\n private handleClick(_e: MouseEvent) {\n this.show = !this.show;\n }\n\n connectedCallback() {\n this.handleShowHideElements();\n }\n\n render() {\n return (\n <Host class=\"nano-more-less\">\n <slot onSlotchange={() => this.handleShowHideElements()} />\n {this.children?.length > this.maxToShow && [\n <div\n style={{ display: this.show ? 'none' : 'contents' }}\n class=\"button-wrapper\"\n part=\"button-wrapper button-wrapper--less\"\n onClick={(e) => this.handleClick(e)}\n >\n <slot name=\"less\">\n <button part=\"button button--less\">\n Show more (+{this.children.length - this.maxToShow})\n </button>\n </slot>\n </div>,\n !this.noHideBtn ? (\n <div\n style={{ display: this.show ? 'contents' : 'none' }}\n class=\"button-wrapper\"\n part=\"button-wrapper button-wrapper--more\"\n onClick={(e) => this.handleClick(e)}\n >\n <slot name=\"more\">\n <button part=\"button button--more\">\n Show less (-{this.children.length - this.maxToShow})\n </button>\n </slot>\n </div>\n ) : (\n ''\n ),\n ]}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/nano-overflow-nav.cjs.entry.js CHANGED Viewed

@@ -5,11 +5,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-b6fa04fa.js');
-const dom = require('./dom-756fcdac.js');
+const index = require('./index-615cdb64.js');
+const renderer = require('./renderer-cd8b6098.js');
+const dom = require('./dom-b99a1aec.js');
 const throttle = require('./throttle-46a497fb.js');
-const overflowNavCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}: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;inline-size: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:auto 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), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) 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), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) 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}.onav--horizontal.onav--has-scroll-controls .onav__scroller{padding-inline:var(--fade-size) 0;padding-block:0}.onav--horizontal .onav__items{flex-direction:row}.onav--horizontal .onav__items::before{content:\"\";inline-size:100%;block-size:var(--indicator-track-size);inset-block-end:0}.onav--horizontal .onav__active-indicator{inset-block-end:0;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{inline-size:100%}.onav--vertical .onav__nav{max-block-size:100%;display:flex}.onav--vertical .onav__scroller{inline-size:100%;overflow:hidden auto;flex-direction:column;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-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), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) 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), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) 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;padding-block:calc(var(--fade-size) + 12px) var(--fade-size)}.onav--vertical .onav__scroller::after{padding-inline:0;padding-block:0 var(--fade-size)}.onav--vertical .onav__items{flex-direction:column;inline-size:fit-content}.onav--vertical .onav__items::before{content:\"\";block-size:100%;inline-size:var(--indicator-track-size);inset-inline-start:0}.onav--vertical .onav__active-indicator{inset-inline-start:0;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}";
+const overflowNavCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}: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;inline-size: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:auto 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), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) 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), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) 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}.onav--horizontal.onav--has-scroll-controls .onav__scroller{padding-inline:var(--fade-size) 0;padding-block:0}.onav--horizontal .onav__items{flex-direction:row}.onav--horizontal .onav__items::before{content:\"\";inline-size:100%;block-size:var(--indicator-track-size);inset-block-end:0}.onav--horizontal .onav__active-indicator{inset-block-end:0;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{inline-size:100%}.onav--vertical .onav__nav{max-block-size:100%;display:flex}.onav--vertical .onav__scroller{inline-size:100%;overflow:hidden auto;flex-direction:column;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-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), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) 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), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) 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;padding-block:calc(var(--fade-size) + 12px) var(--fade-size)}.onav--vertical .onav__scroller::after{padding-inline:0;padding-block:0 var(--fade-size)}.onav--vertical .onav__items{flex-direction:column;inline-size:fit-content}.onav--vertical .onav__items::before{content:\"\";block-size:100%;inline-size:var(--indicator-track-size);inset-inline-start:0}.onav--vertical .onav__active-indicator{inset-inline-start:0;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}";
 const NanoOverflowNavStyle0 = overflowNavCss;
 const OverflowNav = class {
@@ -308,19 +309,19 @@ const OverflowNav = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '6e173cacb18816d9835c05546a72c43ed91f274c', dir: this.isRtl ? 'rtl' : null }, index.h("div", { key: '5ccc848ac3de7e32c78f83450e33d8dba423074f', part: "base", class: {
+        return (renderer.h(index.Host, { key: 'b27e8a6ed628edcec4ca84db6898344848b7d203', dir: this.isRtl ? 'rtl' : null, class: "nano-overflow-nav" }, renderer.h("div", { key: '79200b5a21b1fdcc179fc3017b051af1bf82d17f', part: "base", class: {
                 onav: true,
                 [`onav--${this.orientation}`]: true,
                 'onav--has-scroll-controls': this.hasScrollControls,
                 'onav--has-scroll-controls-start': !this.hideControlStart,
                 'onav--has-scroll-controls-end': !this.hideControlEnd,
                 'onav--no-transitions': this.instantReCalc,
-            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, index.h("div", { key: '0a322909790d1b93e3325855deae42a3c65c9639', class: "onav__nav" }, this.scrollControls && (index.h("nano-icon-button", { key: '345635ef806ddb6faf2415cc90ff6a45741864ce', part: "scroll-button scroll-button-prev", class: {
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, renderer.h("div", { key: '088d3d5bc04b251977ec0c389a4eef7657d11446', class: "onav__nav" }, this.scrollControls && (renderer.h("nano-icon-button", { key: 'c55c810110f8b357b330634b024c3f5dc44ebb3b', part: "scroll-button scroll-button-prev", class: {
                 'onav__scroll-button': true,
                 'onav__scroll-button--start': true,
             }, ref: (btn) => (this.startBtn = btn), onClick: () => this.handleBtnClick(false), label: "Click to scroll", iconName: this.orientation === 'horizontal'
                 ? 'light/chevron-left'
-                : 'light/chevron-up' })), index.h("div", { key: '9b78552101a21487b925fefe89d887ac75ca035d', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll }, index.h("div", { key: '9d1795efcd4ca224ded919ad90623e97f2603a9d', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, index.h("div", { key: '751c93eea4740df90233e816eda8e11835d0f3ca', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" }), index.h("slot", { key: 'c82d3d8ddc3fca334325b5a18ecbb5db78a81df9', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (index.h("nano-icon-button", { key: '9fe484e4f323155034da3a84ea2b0872c6632fb4', part: "scroll-button scroll-button-next", class: {
+                : 'light/chevron-up' })), renderer.h("div", { key: '9b65b0ccdb84eaf1afb28835e818039a961ef8c2', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll }, renderer.h("div", { key: '320928d965a0dd203a7b1614b4ae4ec344719810', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, renderer.h("div", { key: '0227ff56d2949ef3ebfc5ec740a38dcdb7adb1d4', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" }), renderer.h("slot", { key: '28573efda6c8eb5995114f6063f57ad22e0646ed', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (renderer.h("nano-icon-button", { key: 'bba306fe285adc3d6af71bf07e1744c9790f9c51', part: "scroll-button scroll-button-next", class: {
                 'onav__scroll-button': true,
                 'onav__scroll-button--end': true,
             }, ref: (btn) => (this.endBtn = btn), onClick: () => this.handleBtnClick(true), label: "Click to scroll", iconName: this.orientation === 'horizontal'

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

	@@ -1 +1 @@
1	- {"file":"nano-overflow-nav.entry.cjs.js","mappings":"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","names":["debounce","getDirectChildren","getOffset","h","Host"],"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 '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n /*\n @prop --indicator-transition: Defaults to #{tokens.$transition-fast}\n * @prop --indicator-color: Defaults to #{map.get(tokens.$colors, lightblue)};\n * @prop --indicator-size: Defaults to 0;\n * @prop --indicator-track-color: Defaults to #{map.get(tokens.$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: #{tokens.$transition-fast};\n --indicator-color: #{map.get(tokens.$colors, lightblue)};\n --indicator-size: 0;\n --indicator-track-color: #{map.get(tokens.$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: #{tokens.$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 mx.hide-scrollbar();\n\n display: flex;\n transition: #{tokens.$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 inline-size: 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: #{tokens.$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: #{tokens.$control-focus-style} inset;\n }\n }\n\n ///////////// HORIZONTAL ///////////////\n\n &--horizontal {\n\n #{$root}__scroller {\n overflow: auto 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;\n }\n }\n\n &#{$root}--has-scroll-controls #{$root}__scroller {\n padding-inline: var(--fade-size) 0;\n padding-block: 0;\n }\n\n #{$root}__items {\n flex-direction: row;\n\n &::before {\n content: '';\n inline-size: 100%;\n block-size: 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 inline-size: 100%;\n\n #{$root}__nav {\n max-block-size: 100%;\n display: flex;\n }\n\n #{$root}__scroller {\n inline-size: 100%;\n overflow: hidden auto;\n flex-direction: column;\n mask-repeat: no-repeat;\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;\n padding-block: calc(var(--fade-size) + 12px) var(--fade-size);\n\n &::after {\n padding-inline: 0;\n padding-block: 0 var(--fade-size);\n }\n }\n\n #{$root}__items {\n flex-direction: column;\n inline-size: fit-content;\n\n &::before {\n content: '';\n block-size: 100%;\n inline-size: 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.entry.cjs.js","mappings":"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","names":["debounce","getDirectChildren","getOffset","h","Host"],"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 '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n /*\n @prop --indicator-transition: Defaults to #{tokens.$transition-fast}\n * @prop --indicator-color: Defaults to #{map.get(tokens.$colors, lightblue)};\n * @prop --indicator-size: Defaults to 0;\n * @prop --indicator-track-color: Defaults to #{map.get(tokens.$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: #{tokens.$transition-fast};\n --indicator-color: #{map.get(tokens.$colors, lightblue)};\n --indicator-size: 0;\n --indicator-track-color: #{map.get(tokens.$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: #{tokens.$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 mx.hide-scrollbar();\n\n display: flex;\n transition: #{tokens.$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 inline-size: 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: #{tokens.$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: #{tokens.$control-focus-style} inset;\n }\n }\n\n ///////////// HORIZONTAL ///////////////\n\n &--horizontal {\n\n #{$root}__scroller {\n overflow: auto 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;\n }\n }\n\n &#{$root}--has-scroll-controls #{$root}__scroller {\n padding-inline: var(--fade-size) 0;\n padding-block: 0;\n }\n\n #{$root}__items {\n flex-direction: row;\n\n &::before {\n content: '';\n inline-size: 100%;\n block-size: 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 inline-size: 100%;\n\n #{$root}__nav {\n max-block-size: 100%;\n display: flex;\n }\n\n #{$root}__scroller {\n inline-size: 100%;\n overflow: hidden auto;\n flex-direction: column;\n mask-repeat: no-repeat;\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;\n padding-block: calc(var(--fade-size) + 12px) var(--fade-size);\n\n &::after {\n padding-inline: 0;\n padding-block: 0 var(--fade-size);\n }\n }\n\n #{$root}__items {\n flex-direction: column;\n inline-size: fit-content;\n\n &::before {\n content: '';\n block-size: 100%;\n inline-size: 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 Element,\n Prop,\n Watch,\n State,\n Method,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\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} class=\"nano-overflow-nav\">\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/cjs/nano-progress-bar.cjs.entry.js CHANGED Viewed

@@ -5,7 +5,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-b6fa04fa.js');
+const index = require('./index-615cdb64.js');
+const renderer = require('./renderer-cd8b6098.js');
 const progressBarCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--height:1em;--track-color:rgb(var(--nano-track-rgb, 228 230 232) / 100%);--indicator-color:rgb(var(--nano-indicator-rgb, 84 140 175) / 100%);--label-color:var(--nano-color-white, white);display:block}.progress-bar{position:relative;background-color:var(--track-color);block-size:var(--height);border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));overflow:hidden}.progress-bar__indicator{block-size:100%;font-size:0.75em;background-color:var(--indicator-color);color:var(--label-color);text-align:center;white-space:nowrap;overflow:hidden;transition:0.4s width, 0.4s background-color;transform:translateZ(0);-webkit-user-select:none;user-select:none;transform-origin:left}.progress-bar--indeterminate .progress-bar__indicator{animation:indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1)}@keyframes indeterminate{0%{scale:1 1;transform:translateX(-100%) translateZ(0)}75%,100%{scale:1 1;transform:translateX(100%) translateZ(0)}}";
 const NanoProgressBarStyle0 = progressBarCss;
@@ -22,12 +23,14 @@ const ProgressBar = class {
     /** Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.  */
     showPercent = false;
     render() {
-        return (index.h("div", { key: '40563d8a84636d568b0675808bd96cc84c0c4b97', part: "base", class: {
+        return (renderer.h(index.Host, { key: '36e2ed7f9fe6da4a7e85f26c87ab72dd0b300ebd', class: "nano-progress-bar" }, renderer.h("div", { key: '3c02d554bcb4727c0a03769be1cd6c57693868f9', part: "base", class: {
                 'progress-bar': true,
                 'progress-bar--indeterminate': this.indeterminate,
-            }, role: "progressbar", title: this.host.title || undefined, "aria-label": "Progress", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.value }, index.h("div", { key: '32f65f980f9ef0a118ef005ff4ad68c8116b544b', part: "indicator", class: "progress-bar__indicator", style: {
+            }, role: "progressbar", title: this.host.title || undefined, "aria-label": "Progress", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.value }, renderer.h("div", { key: '31a54ba3593cda595dc3566d86e763d8bb2701cf', part: "indicator", class: "progress-bar__indicator", style: {
                 width: !this.indeterminate ? `${this.value}%` : undefined,
-            } }, index.h("span", { key: '30a5b0e7663a5772c23ff75fc0b4b6bcd59f72ef', part: "label", class: "progress-bar__label" }, index.h("slot", { key: '1a80db1cb1f65e85f7ba78373e9f2aa7642a542e' }, !this.indeterminate && this.showPercent ? `${this.value}%` : '')))));
+            } }, renderer.h("span", { key: '91539c8c325358a416ca7b15e341ee0d70d31845', part: "label", class: "progress-bar__label" }, renderer.h("slot", { key: '6f24df7fdfbe3272581eac957cbe8b9ded8bc781' }, !this.indeterminate && this.showPercent
+            ? `${this.value}%`
+            : ''))))));
     }
 };
 ProgressBar.style = NanoProgressBarStyle0;

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

	@@ -1 +1 @@
1	- {"file":"nano-progress-bar.entry.cjs.js","mappings":"~~;;;;;;;;;~~AAAA,MAAM,cAAc,GAAG,gqCAAgqC,CAAC;AACxrC,8BAAe,cAAc;;~~MCgBhB~~,WAAW;;;;;;IAId,KAAK,GAAG,CAAC,CAAC;;IAGV,aAAa,GAAG,KAAK,CAAC;;IAGtB,WAAW,GAAG,KAAK,CAAC;IAE5B,MAAM;QACJ,QACEA,~~kEACE~~,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,6BAA6B,EAAE,IAAI,CAAC,aAAa;aAClD,EACD,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,gBACxB,UAAU,mBACP,GAAG,mBACH,KAAK,mBACJ,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,IAErDA,~~kEACE~~,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE;gBACL,KAAK,EAAE,CAAC,IAAI,CAAC,aAAa,GAAG,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,SAAS;aAC1D,IAEDA,~~mEAAM~~,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB,IAC5CA,~~qEACG~~,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,WAAW,GAAG,~~GAAG,~~IAAI,CAAC,KAAK,GAAG,~~GAAG,~~EAAE,~~CAC3D~~,CACF,CACH,CACF,~~EACN~~;KACH;;;;;;","names":["h"],"sources":["src/components/progress-bar/progress-bar.scss?tag=nano-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use '../../global/style/nano-theme/tokens';\n\n/*\n @prop --height: The progress bar's height. Default 1em\n * @prop --track-color: The track color. Default rgb(#{tokens.$progress-track-color-rgb} / 100%);\n * @prop --indicator-color: The indicator color. Default rgb(#{tokens.$progress-indicator-color-rgb} / 100%);\n * @prop --label-color: The label color. Default var(--nano-color-white, white);\n /\n:host {\n --height: 1em;\n --track-color: rgb(#{tokens.$progress-track-color-rgb} / 100%);\n --indicator-color: rgb(#{tokens.$progress-indicator-color-rgb} / 100%);\n --label-color: var(--nano-color-white, white);\n\n display: block;\n}\n\n.progress-bar {\n position: relative;\n background-color: var(--track-color);\n block-size: var(--height);\n border-radius: tokens.$layer-border-radius;\n overflow: hidden;\n}\n\n.progress-bar__indicator {\n block-size: 100%;\n font-size: 0.75em;\n background-color: var(--indicator-color);\n color: var(--label-color);\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n transition: 0.4s width, 0.4s background-color;\n transform: translateZ(0);\n user-select: none;\n transform-origin: left;\n}\n\n// Indeterminate\n.progress-bar--indeterminate .progress-bar__indicator {\n animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);\n}\n\n@keyframes indeterminate {\n 0% {\n scale: 1 1;\n transform: translateX(-100%) translateZ(0);\n }\n\n 75%,\n 100% {\n scale: 1 1;\n transform: translateX(100%) translateZ(0);\n }\n}\n","import { Component, Prop, h, ~~Element~~ } from '@stencil/core';\n\n/\n Used to show the status of an ongoing operation.\n \n @slot - A label to show inside the indicator.\n \n @part base - The component's base wrapper.\n * @part indicator - The progress bar indicator.\n * @part label - The progress bar label.\n /\n\n@Component({\n tag: 'nano-progress-bar',\n styleUrl: 'progress-bar.scss',\n shadow: true,\n})\nexport class ProgressBar {\n @Element() host: HTMLNanoProgressBarElement;\n\n /* The progress bar's percentage, 0 to 100. /\n @Prop() value = 0;\n\n /* When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. /\n @Prop() indeterminate = false;\n\n /* Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot. */\n @Prop() showPercent = false;\n\n render() {\n return (\n <div\n part=\"base\"\n class={{\n 'progress-bar': true,\n 'progress-bar--indeterminate': this.indeterminate,\n }}\n role=\"progressbar\"\n title={this.host.title \|\| undefined}\n aria-label=\"Progress\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n aria-valuenow={this.indeterminate ? null : this.value}\n >\n <div\n part=\"indicator\"\n class=\"progress-bar__indicator\"\n style={{\n width: !this.indeterminate ? `${this.value}%` : undefined,\n }}\n >\n <span part=\"label\" class=\"progress-bar__label\">\n <slot>\n {!this.indeterminate && this.showPercent ? `${this.value}%` : ''}\n </slot>\n </span>\n </div>\n </~~div~~>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nano-progress-bar.entry.cjs.js","mappings":";;;;;;;;;;AAAA,MAAM,cAAc,GAAG,gqCAAgqC,CAAC;AACxrC,8BAAe,cAAc;;MCiBhB,WAAW;;;;;;IAId,KAAK,GAAG,CAAC,CAAC;;IAGV,aAAa,GAAG,KAAK,CAAC;;IAGtB,WAAW,GAAG,KAAK,CAAC;IAE5B,MAAM;QACJ,QACEA,WAACC,UAAI,qDAAC,KAAK,EAAC,mBAAmB,IAC7BD,qEACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,6BAA6B,EAAE,IAAI,CAAC,aAAa;aAClD,EACD,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,gBACxB,UAAU,mBACP,GAAG,mBACH,KAAK,mBACJ,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,IAErDA,qEACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE;gBACL,KAAK,EAAE,CAAC,IAAI,CAAC,aAAa,GAAG,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,SAAS;aAC1D,IAEDA,sEAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB,IAC5CA,wEACG,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,WAAW;cACpC,GAAG,IAAI,CAAC,KAAK,GAAG;cAChB,EAAE,CACD,CACF,CACH,CACF,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/progress-bar/progress-bar.scss?tag=nano-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use '../../global/style/nano-theme/tokens';\n\n/*\n @prop --height: The progress bar's height. Default 1em\n * @prop --track-color: The track color. Default rgb(#{tokens.$progress-track-color-rgb} / 100%);\n * @prop --indicator-color: The indicator color. Default rgb(#{tokens.$progress-indicator-color-rgb} / 100%);\n * @prop --label-color: The label color. Default var(--nano-color-white, white);\n /\n:host {\n --height: 1em;\n --track-color: rgb(#{tokens.$progress-track-color-rgb} / 100%);\n --indicator-color: rgb(#{tokens.$progress-indicator-color-rgb} / 100%);\n --label-color: var(--nano-color-white, white);\n\n display: block;\n}\n\n.progress-bar {\n position: relative;\n background-color: var(--track-color);\n block-size: var(--height);\n border-radius: tokens.$layer-border-radius;\n overflow: hidden;\n}\n\n.progress-bar__indicator {\n block-size: 100%;\n font-size: 0.75em;\n background-color: var(--indicator-color);\n color: var(--label-color);\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n transition: 0.4s width, 0.4s background-color;\n transform: translateZ(0);\n user-select: none;\n transform-origin: left;\n}\n\n// Indeterminate\n.progress-bar--indeterminate .progress-bar__indicator {\n animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);\n}\n\n@keyframes indeterminate {\n 0% {\n scale: 1 1;\n transform: translateX(-100%) translateZ(0);\n }\n\n 75%,\n 100% {\n scale: 1 1;\n transform: translateX(100%) translateZ(0);\n }\n}\n","import { Component, Prop, Element, Host } from '@stencil/core';\nimport { h } from '../../utils/renderer';\n\n/\n Used to show the status of an ongoing operation.\n \n @slot - A label to show inside the indicator.\n \n @part base - The component's base wrapper.\n * @part indicator - The progress bar indicator.\n * @part label - The progress bar label.\n /\n\n@Component({\n tag: 'nano-progress-bar',\n styleUrl: 'progress-bar.scss',\n shadow: true,\n})\nexport class ProgressBar {\n @Element() host: HTMLNanoProgressBarElement;\n\n /* The progress bar's percentage, 0 to 100. /\n @Prop() value = 0;\n\n /* When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. /\n @Prop() indeterminate = false;\n\n /* Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot. */\n @Prop() showPercent = false;\n\n render() {\n return (\n <Host class=\"nano-progress-bar\">\n <div\n part=\"base\"\n class={{\n 'progress-bar': true,\n 'progress-bar--indeterminate': this.indeterminate,\n }}\n role=\"progressbar\"\n title={this.host.title \|\| undefined}\n aria-label=\"Progress\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n aria-valuenow={this.indeterminate ? null : this.value}\n >\n <div\n part=\"indicator\"\n class=\"progress-bar__indicator\"\n style={{\n width: !this.indeterminate ? `${this.value}%` : undefined,\n }}\n >\n <span part=\"label\" class=\"progress-bar__label\">\n <slot>\n {!this.indeterminate && this.showPercent\n ? `${this.value}%`\n : ''}\n </slot>\n </span>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -5,7 +5,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-b6fa04fa.js');
+const index = require('./index-615cdb64.js');
+const renderer = require('./renderer-cd8b6098.js');
 const math = require('./math-ea9cdc71.js');
 const theme = require('./theme-a2f7ddf8.js');
 const throttle = require('./throttle-46a497fb.js');
@@ -356,15 +357,16 @@ const Range = class {
             }
         }
         renderHiddenInput(el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (index.h(index.Host, { onFocusin: this.onFocus, onFocusout: this.onBlur, class: theme.createColorClasses(this.color, {
+        return (renderer.h(index.Host, { onFocusin: this.onFocus, onFocusout: this.onBlur, class: theme.createColorClasses(this.color, {
                 'range-disabled': disabled,
                 'range-pressed': pressedKnob !== undefined,
                 'range-has-pin': pin,
                 'range-snaps': this.snaps,
-            }) }, index.h("div", { class: "range-wrap" }, index.h("slot", { name: "start" }), index.h("div", { class: "range-slider", ref: (rangeEl) => (this.rangeSlider = rangeEl) }, ticks.map((tick) => (index.h("span", { style: tickStyle(tick), role: "presentation", class: {
+                'nano-range': true,
+            }) }, renderer.h("div", { class: "range-wrap" }, renderer.h("slot", { name: "start" }), renderer.h("div", { class: "range-slider", ref: (rangeEl) => (this.rangeSlider = rangeEl) }, ticks.map((tick) => (renderer.h("span", { style: tickStyle(tick), role: "presentation", class: {
                 'range-tick': true,
                 'range-tick-active': tick.active,
-            }, part: tick.active ? 'tick-active' : 'tick' }))), index.h("div", { class: "range-bar", role: "presentation", part: "bar" }), index.h("div", { class: "range-bar range-bar-active", role: "presentation", style: barStyle, part: "bar-active" }), renderKnob(isRTL, {
+            }, part: tick.active ? 'tick-active' : 'tick' }))), renderer.h("div", { class: "range-bar", role: "presentation", part: "bar" }), renderer.h("div", { class: "range-bar range-bar-active", role: "presentation", style: barStyle, part: "bar-active" }), renderKnob(isRTL, {
             knob: 'A',
             pressed: pressedKnob === 'A',
             value: this.valA,
@@ -385,7 +387,7 @@ const Range = class {
                 handleKeyboard,
                 min,
                 max,
-            })), index.h("slot", { name: "end" }))));
+            })), renderer.h("slot", { name: "end" }))));
     }
     static get watchers() { return {
         "debounce": ["debounceChanged"],
@@ -402,7 +404,7 @@ const renderKnob = (isRTL, { knob, value, ratio, min, max, disabled, pressed, pi
         style[start] = `${ratio * 100}%`;
         return style;
     };
-    return (index.h("div", { onKeyDown: (ev) => {
+    return (renderer.h("div", { onKeyDown: (ev) => {
             const key = ev.key;
             if (key === 'ArrowLeft' || key === 'ArrowDown') {
                 handleKeyboard(knob, false);
@@ -421,7 +423,7 @@ const renderKnob = (isRTL, { knob, value, ratio, min, max, disabled, pressed, pi
             'range-knob-pressed': pressed,
             'range-knob-min': value === min,
             'range-knob-max': value === max,
-        }, style: knobStyle(), role: "slider", tabindex: disabled ? -1 : 0, "aria-valuemin": min, "aria-valuemax": max, "aria-disabled": disabled ? 'true' : null, "aria-valuenow": value }, pin && (index.h("div", { class: "range-pin", role: "presentation", part: "pin" }, Math.round(value))), index.h("div", { class: "range-knob", role: "presentation", part: "knob" })));
+        }, style: knobStyle(), role: "slider", tabindex: disabled ? -1 : 0, "aria-valuemin": min, "aria-valuemax": max, "aria-disabled": disabled ? 'true' : null, "aria-valuenow": value }, pin && (renderer.h("div", { class: "range-pin", role: "presentation", part: "pin" }, Math.round(value))), renderer.h("div", { class: "range-knob", role: "presentation", part: "knob" })));
 };
 const ratioToValue = (ratio, min, max, step) => {
     let value = (max - min) * ratio;