npm - @nanoporetech-digital/components - Versions diffs - 2.10.0 → 2.12.0 - Mend

@nanoporetech-digital/components 2.10.0 → 2.12.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 (423) hide show

package/dist/nano-components/p-018b7047.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["src/components/global-search-results/global-search-results.scss?tag=nano-global-search-results&encapsulation=shadow","src/components/global-search-results/global-search-results.tsx"],"names":["globalSearchResultsCss","filterOldPosts","Math","floor","Date","now","GlobalSearchResults","[object Object]","hostRef","this","tagClick","e","preventDefault","tagVal","target","dataset","value","toLowerCase","filter","algoliaEle","querySelector","indexOf","apiKey","appId","index","searchIndex","tagName","algoliaResultsEle","goback","detail","results","client","result","find","selected","name","indexName","domain","filters","query","composedPath","ele","classList","contains","changeOrder","id","attachResultListeners","querySelectorAll","forEach","item","addEventListener","removeAllFilters","closefilters","filterWrap","stopPropagation","filtersDiv","oldResults","toggleOldResults","checked","el","resultEle","clickEv","removeFilter","filterVal","openFilterBtn","tabIndex","add","setAttribute","document","body","style","overflow","setTimeout","focus","tags","Array","from","tag","removeEventListener","ev","replicaIndex","showResults","facet","removeFilters","remove","show","f","startsWith","console","log","ro","ResizeObserver","entries","entry","contentRect","width","currentWidth","observe","h","Host","class","small","dir","ownerDocument","store-id","store-method","ref","raf","type","slot"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n\n:host {\n display: block;\n flex: 1 1 100%;\n}\n\n.main-search {\n display: flex;\n background: white;\n font-size: 14px;\n min-height: calc(100vh - 63px);\n justify-content: space-between;\n\n &__wrap {\n /* autoprefixer: ignore next */\n display: contents;\n height: 100%;\n }\n\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n li {\n margin: 0;\n padding: 0;\n }\n\n button:not(.result__tags-tag) {\n appearance: none;\n border: none;\n background: none;\n position: relative;\n top: -2px;\n }\n\n .icon-button {\n color: inherit;\n align-self: normal;\n padding: 9px 7px;\n cursor: pointer;\n display: flex;\n align-items: center;\n }\n\n &__topbar {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n margin-bottom: 1em;\n\n &::after {\n content: '';\n width: calc(100% - 30px);\n left: 30px;\n position: relative;\n border-bottom: 1px solid #e5eef1;\n padding-top: 0.9em;\n }\n }\n\n &__applied-filters {\n border: solid 1px map.get($colors, lightgrey);\n text-transform: uppercase;\n border-radius: 3px;\n font-weight: bold;\n display: flex;\n align-items: center;\n line-height: 0.9;\n padding: 5px 5px 0 5px;\n letter-spacing: 2px;\n flex-wrap: wrap;\n margin-bottom: 0.5rem;\n\n span {\n display: flex;\n align-items: center;\n }\n\n :host(.small) & {\n display: none;\n }\n }\n\n &__applied-nofilter {\n @include margin(0, 5px, 3px, 0);\n @include padding(10px, 7px, 10px, 7px);\n\n font-size: 12px;\n color: rgba(69, 85, 86, 0.85);\n }\n\n &__applied-filter {\n @include padding(5px, 2px, 3px, 8px);\n @include margin(0, 5px, 5px, 0);\n\n color: map.get($colors, darkgrey);\n font-size: 11px;\n border-radius: 2px;\n border: solid 1px rgba(0, 132, 169, 0.5);\n background-color: rgba(0, 132, 169, 0.2);\n line-height: 1;\n\n .icon-button {\n @include padding(2px, 4px, 1px, 10px);\n\n nano-icon {\n pointer-events: none;\n }\n }\n }\n\n .topbar {\n &__bkbtn {\n position: relative;\n left: -7px;\n }\n\n &__query {\n :host(.small) & {\n display: none;\n }\n }\n\n &__filtering {\n display: flex;\n align-items: center;\n\n @include margin(0, 0, 0, 1em);\n\n flex: 1;\n }\n\n &__order {\n min-width: 175px;\n max-width: 200px;\n\n @include margin(0, 0, 0, auto);\n\n :host(.small) & {\n max-width: 300px;\n }\n }\n\n nano-select {\n opacity: 1;\n transition: 0.1s ease opacity;\n\n &:not(.hydrated) {\n opacity: 0;\n }\n }\n\n &__show-filters {\n @include margin(0, 0, 0, 0.5em);\n\n text-transform: uppercase;\n display: none;\n flex-direction: column;\n align-items: center;\n\n nano-icon {\n font-size: 20px;\n }\n\n // @include media-breakpoint-down('sm') {\n // display: flex;\n // }\n\n :host(.small) & {\n display: flex;\n }\n }\n\n &__filter-count {\n width: 12px;\n height: 12px;\n box-shadow: inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);\n border: solid 1px #005c76;\n background-color: #005c76;\n color: white;\n font-size: 7px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n line-height: 1;\n margin-bottom: 3px;\n }\n }\n\n &__results {\n font-size: 14px;\n padding: 1em 40px;\n color: rgba(69, 85, 86, 0.85);\n width: 70%;\n height: 100%;\n\n @include media-breakpoint-down('sm') {\n padding: 1em 20px;\n }\n\n :host(.small) & {\n width: 100%;\n }\n }\n\n &__filters {\n outline: none;\n\n @include padding(1.8em, 40px, 1em, 0);\n\n @include media-breakpoint-down('sm') {\n @include padding(null, 20px, null, null);\n }\n\n flex: 1 1 30%;\n box-sizing: border-box;\n\n :host(:not(.small)) & {\n max-width: 350px;\n min-width: 220px;\n }\n }\n}\n\n.filters {\n color: map.get($colors, darkgrey);\n background: white;\n font-size: 14px;\n\n :host(.small) & {\n position: fixed;\n width: 0;\n height: 0;\n z-index: 10;\n top: 0;\n right: 0;\n transition: all 0s ease 0.5s;\n background: none;\n\n &.show {\n height: 100vh;\n width: 100vw;\n transition: all 0s ease 0s;\n\n &::after {\n opacity: 1;\n }\n }\n\n &::after {\n content: '';\n background: rgba(0, 0, 0, 0.5);\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n z-index: -1;\n opacity: 0;\n transition: 0.1s ease opacity;\n }\n }\n\n &__close-filters {\n display: none !important;\n font-size: 1.4em;\n\n :host(.small) & {\n display: inline-block !important;\n\n @include margin(0, 0, 0, auto);\n }\n }\n\n &__old-posts {\n margin-inline-start: 1rem;\n }\n\n &-wrap {\n :host(.small) & {\n position: absolute;\n top: 0;\n right: 0;\n background: rgb(247, 246, 246);\n transform: translateX(100%);\n width: 300px;\n min-width: 200px;\n max-width: 80vw;\n transition: transform 0.3s ease;\n padding: 1em;\n color: black;\n overflow: auto;\n height: 100vh;\n }\n }\n\n &.show {\n .filters-wrap {\n :host(.small) & {\n transform: translateX(0%);\n box-shadow: -3px -3px 7px rgba(0, 0, 0, 0.1);\n }\n }\n }\n\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n li {\n margin: 0;\n padding: 0;\n }\n\n nano-details {\n --padding: 0.8em;\n\n margin: 0.8em 0;\n\n strong[slot] {\n display: block;\n\n @include padding(null, null, null, calc(20px - 0.8em));\n }\n\n nano-icon[slot='icon-end'] {\n @include padding(null, calc(20px - 0.8em), null, calc(20px - 0.8em));\n }\n }\n\n li:last-child .filter-label {\n margin-bottom: 0;\n }\n\n .filter-label {\n display: flex;\n align-items: center;\n position: relative;\n margin: 0.5em 0;\n line-height: 1.4;\n z-index: 0;\n\n &::before {\n @include margin(0, 1em, 0, 0);\n\n content: '';\n border: 1px solid map.get($colors, blue);\n background: map.get($colors, white);\n border-radius: 3px;\n height: 1em;\n width: 1em;\n min-width: 1em;\n min-height: 1em;\n display: inline-block;\n }\n\n &::after {\n @include svg-background-image(\n \"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='#ffffff' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/></svg>\"\n );\n\n content: '';\n height: 0.7em;\n width: 0.7em;\n position: absolute;\n left: 2px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 1;\n display: block;\n background-size: 100%;\n background-position: center center;\n background-repeat: no-repeat;\n\n @include rtl-host() {\n right: 1px;\n left: auto;\n }\n }\n }\n\n .filter-cb {\n @include visually-hide;\n\n &:checked + .filter-label {\n &::before {\n background: map.get($colors, blue--darker);\n }\n }\n\n &:focus + .filter-label {\n &::before {\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);\n }\n }\n }\n\n &-header {\n display: flex;\n align-items: center;\n border-bottom: 1px solid map.get($colors, lightblue);\n padding-bottom: 0.5rem;\n margin-bottom: 0.5rem;\n }\n\n &-reset {\n color: map.get($colors, blue);\n font-size: 12px;\n text-decoration: underline;\n\n @include margin(0, 0, 0, auto);\n\n :host(.small) & {\n @include margin(0, 0, 0, 0);\n }\n }\n\n &-title {\n @include margin(0, 0, 0, 0);\n\n text-transform: uppercase;\n color: rgba(69, 85, 86, 0.85);\n font-weight: bold;\n font-size: 14px;\n\n :host(.small) & {\n display: none;\n }\n }\n}\n\n.result {\n text-decoration: none;\n display: flex;\n flex-wrap: wrap;\n flex-direction: row;\n padding-bottom: 14px;\n border-bottom: 1px solid map.get($colors, lightblue);\n\n * {\n word-wrap: break-word;\n word-break: break-word;\n }\n\n &__title {\n margin: 1em 0 0.5em 0;\n width: 70%;\n display: flex;\n\n a {\n color: lighten(map.get($colors, blue), 4%);\n font-size: 14px;\n line-height: 1.43;\n text-decoration: none;\n font-weight: 600;\n }\n\n nano-icon {\n @include margin(0, 0.5em, 0, 0);\n\n min-width: 20px;\n min-height: 20px;\n opacity: 0.8;\n }\n\n @include media-breakpoint-down('lg') {\n width: 100%;\n }\n }\n\n &__body {\n color: map.get($colors, darkgrey);\n font-size: 13px;\n width: 70%;\n text-decoration: none;\n\n @include media-breakpoint-down('lg') {\n width: 100%;\n }\n }\n\n &__pdf {\n display: inline-block;\n margin-inline-start: 0.5rem;\n color: map.get($colors, palegrey);\n }\n\n &__meta {\n display: flex;\n flex-flow: row wrap;\n color: map.get($colors, darkgrey);\n font-size: 11px;\n line-height: 13px;\n width: 100%;\n align-items: center;\n\n > * {\n margin-top: 0.5rem;\n\n &:not(:last-child) {\n padding-inline-end: 0;\n\n &::after {\n content: '';\n height: 1rem;\n width: 1px;\n background: #90c6e7;\n display: inline-block;\n margin-inline-start: 0.7rem;\n margin-inline-end: 0.7rem;\n\n @include media-breakpoint-down('sm') {\n display: none;\n }\n }\n }\n }\n\n @include media-breakpoint-down('sm') {\n flex-flow: column;\n align-items: flex-start;\n }\n }\n\n &__tags {\n display: flex;\n flex-flow: row wrap;\n\n @include media-breakpoint-down('sm') {\n padding-inline-start: 0;\n }\n\n &-tag {\n color: map.get($colors, darkgrey);\n display: inline-block;\n font-size: 0.4375rem;\n letter-spacing: 1.4px;\n background: #fff;\n border-radius: 2px;\n text-transform: uppercase;\n padding: 0 4px 1px 5px;\n font-weight: 600;\n margin: 3px 0.25rem 0.25rem 0;\n border: 1px solid #b5aea7;\n white-space: nowrap;\n line-height: 13px;\n }\n }\n\n &__type {\n font-weight: 600;\n text-transform: capitalize;\n white-space: nowrap;\n display: flex;\n align-items: center;\n }\n\n &__date {\n display: flex;\n align-items: center;\n color: map.get($colors, darkgrey);\n }\n\n &__source {\n color: map.get($colors, darkgrey);\n padding-inline-end: 0.75rem;\n }\n\n &__authors {\n font-size: 12px;\n color: map.get($colors, darkgrey);\n margin-bottom: 0.25rem;\n text-decoration: none;\n width: 70%;\n }\n\n &__buttons {\n width: 70%;\n margin-bottom: 0.5rem;\n\n &-button {\n background-color: map.get($colors, blue);\n color: #fff;\n padding: 5px 8px 1px;\n border-radius: 4px;\n display: inline-block;\n font-size: 11px;\n text-decoration: none;\n border: none;\n }\n }\n\n &__promo {\n width: 70%;\n margin-bottom: 0.5rem;\n text-decoration: none;\n color: map.get($colors, darkgrey);\n\n &-box {\n width: 300px;\n background-color: #e3eef1;\n padding: 12px 12px 8px 4px;\n display: flex;\n flex-flow: row nowrap;\n margin-top: 1rem;\n }\n\n &-bigdate {\n flex: 0 1 60px;\n text-align: center;\n font-weight: 600;\n color: map.get($colors, blue);\n text-transform: uppercase;\n line-height: 1.25;\n letter-spacing: 1.5px;\n\n @include media-breakpoint-down('lg') {\n width: 100%;\n }\n\n span {\n color: map.get($colors, darkgrey);\n display: block;\n }\n\n & ~ div {\n padding-inline-start: 1rem;\n border-inline-start: 1px solid #c5dbe1;\n }\n }\n\n &-date {\n font-size: 12px;\n }\n\n &-venue {\n font-size: 12px;\n }\n\n nano-icon {\n color: map.get($colors, blue);\n position: relative;\n top: 1px;\n padding-inline-end: 2px;\n }\n }\n\n &__image {\n display: block;\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n border-radius: 4px;\n position: relative;\n width: 100%;\n height: 150px;\n margin-bottom: 0.5rem;\n\n @include media-breakpoint-up('sm') {\n width: 142px;\n height: 80px;\n }\n\n nano-icon {\n position: absolute;\n top: calc(50% - 0.75rem);\n left: calc(50% - 0.75rem);\n font-size: 1.5rem;\n color: #0084a9;\n\n --primary-color: #fff;\n --secondary-color: #0084a9;\n --primary-opacity: 1;\n\n @include media-breakpoint-down('sm') {\n font-size: 3rem;\n top: calc(50% - 1.5rem);\n left: calc(50% - 1.5rem);\n }\n }\n }\n\n &__video {\n &-body {\n width: 70%;\n text-decoration: none;\n display: flex;\n flex-flow: row wrap;\n\n @include media-breakpoint-down('lg') {\n width: 100%;\n }\n\n @include media-breakpoint-down('sm') {\n flex-flow: column;\n }\n\n .result__body {\n padding-inline-start: 1rem;\n display: flex;\n flex-direction: column;\n margin-bottom: 0;\n flex: 1;\n\n @include media-breakpoint-down('sm') {\n padding-inline-start: 0;\n }\n\n p {\n display: inline;\n margin: 0;\n }\n\n u,\n li,\n a {\n text-decoration: none;\n }\n\n .result__meta {\n margin-top: 0.5rem;\n }\n\n .result__description {\n flex: 1 0 auto;\n }\n }\n }\n }\n}\n\n.search-empty {\n padding: 3rem 0;\n text-align: center;\n border-top: 1px solid #e5eef1;\n\n h2 {\n color: #455556;\n font-size: 1.125rem;\n margin-bottom: 0.5rem;\n }\n\n &-icon {\n font-size: 7rem;\n\n --icon-color: #e4e6e8;\n\n margin-bottom: 2rem;\n }\n}\n\n.search__highlight {\n background: #fbffbf;\n font-style: normal;\n}\n","import {\n Component,\n h,\n Host,\n Element,\n State,\n ComponentInterface,\n Watch,\n Listen,\n} from '@stencil/core';\n\nimport { AloliaSearchResultDetail } from '../../interface';\nimport { SearchIndex } from '../../interface';\nimport { raf } from '../../utils';\n\nconst filterOldPosts =\n 'created > ' + Math.floor((Date.now() - 63115200000) / 1000);\n\n/**\n * Nanopore Global Search results component\n * to be used in conjunction with [Globla-Nav](/story/nano-compounds-global-nav).\n * A shortcut / helper which combines algolia components.\n * There should only be one <nano-global-search-results> per page\n * and should be a direct child of <nano-global-nav>\n */\n@Component({\n tag: 'nano-global-search-results',\n styleUrl: 'global-search-results.scss',\n shadow: true,\n})\nexport class GlobalSearchResults implements ComponentInterface {\n private algoliaResultsEle: HTMLNanoAlgoliaResultsElement;\n private filtersDiv: HTMLElement;\n private openFilterBtn: HTMLButtonElement;\n private ro: ResizeObserver;\n\n @State() algoliaEle: HTMLNanoAlgoliaElement;\n @State() currentWidth: number;\n @State() apiKey: string;\n @State() appId: string;\n @State() index: SearchIndex;\n\n @Element() private el: HTMLNanoGlobalSearchResultsElement;\n\n @Watch('algoliaEle')\n @Watch('apiKey')\n @Watch('appId')\n handleAlgoliaCredsChange() {\n if (!this.apiKey || !this.appId || !this.algoliaEle) return;\n this.algoliaEle.apiKey = this.apiKey;\n this.algoliaEle.appId = this.appId;\n }\n\n @Watch('algoliaEle')\n @Watch('index')\n handleAlgoliaIndexChange() {\n if (!this.index || !this.algoliaEle) return;\n this.algoliaEle.searchIndex = this.index;\n }\n\n @Listen('nanoSearchReset', { target: 'body' })\n handleGlobalNavReset(e: CustomEvent & { target: HTMLElement }) {\n if (e.target.tagName !== 'NANO-GLOBAL-NAV') return;\n this.algoliaResultsEle = null;\n this.goback();\n }\n\n @Listen('nanoSearchResult', { target: 'body' })\n handleGlobalNavSearch(e: CustomEvent & { target: HTMLElement }) {\n if (e.target.tagName !== 'NANO-GLOBAL-NAV') return;\n const {\n detail: { results, client },\n } = e as { detail: AloliaSearchResultDetail };\n const result = results.find((result) => result.selected);\n\n this.apiKey = client.apiKey;\n this.appId = client.appId;\n this.index = {\n name: result.indexName,\n index: result.index,\n domain: result.domain,\n filters: result.filters,\n };\n this.algoliaEle.query = result.query;\n }\n\n @Listen('nanoChange')\n handleReorder(e: CustomEvent & { target: HTMLNanoSelectElement }) {\n if (\n e\n .composedPath()\n .find(\n (ele: HTMLElement) =>\n ele.classList && ele.classList.contains('indexchange')\n ) &&\n !!this.algoliaResultsEle\n ) {\n this.changeOrder(e);\n }\n }\n\n @Listen('nanoResultsShown')\n attachListeners(e: CustomEvent & { target: HTMLElement }) {\n if (\n !e\n .composedPath()\n .find((ele: HTMLElement) => ele.id && ele.id === 'main-search')\n )\n return;\n\n this.algoliaResultsEle = this.algoliaEle.querySelector(\n '#main-search-results'\n );\n\n // add results listeners\n this.attachResultListeners();\n\n this.algoliaEle.querySelectorAll('.filters-reset').forEach((item) => {\n item.addEventListener('click', () => {\n this.removeAllFilters();\n });\n });\n\n this.algoliaEle.querySelectorAll('.close-filters').forEach((item) => {\n item.addEventListener('click', () => {\n this.closefilters();\n });\n });\n\n let filterWrap = this.algoliaEle.querySelector('.filters-wrap');\n if (filterWrap) {\n filterWrap.addEventListener('click', (e) => {\n e.stopPropagation();\n });\n }\n\n this.filtersDiv = this.algoliaEle.querySelector('#main-search-filters');\n\n let oldResults = this.algoliaEle.querySelector('.old-posts');\n if (oldResults) {\n oldResults.addEventListener(\n 'change',\n (e: Event & { target: HTMLInputElement }) => {\n this.toggleOldResults(e.target.checked);\n }\n );\n }\n }\n\n @Listen('nanoNewResults', { target: 'body' })\n attachResultListeners(e?: CustomEvent & { target: HTMLElement }) {\n if (e && e.composedPath().find((el) => el === this.algoliaEle)) {\n this.algoliaResultsEle = this.algoliaEle.querySelector(\n 'nano-algolia-results'\n );\n }\n if (!this.algoliaResultsEle) return;\n let resultEle = this.algoliaResultsEle;\n\n resultEle.querySelectorAll('.remove-filter').forEach((item) => {\n item.addEventListener('click', (clickEv: MouseEvent) => {\n let filter = clickEv.target as HTMLElement;\n this.removeFilter(filter.dataset.filter, filter.dataset.filterVal);\n });\n });\n\n resultEle.querySelectorAll('.back-btn').forEach((item) => {\n item.addEventListener('click', () => {\n this.goback();\n });\n });\n\n resultEle.querySelectorAll('.topbar__show-filters').forEach((item) => {\n this.openFilterBtn = item as HTMLButtonElement;\n item.addEventListener('click', () => {\n this.filtersDiv.tabIndex = -1;\n this.filtersDiv.classList.add('show');\n this.filtersDiv.setAttribute('aria-expanded', 'true');\n document.body.style.overflow = 'hidden';\n setTimeout(() => this.filtersDiv.focus(), 20);\n });\n });\n\n const tags = Array.from(resultEle.querySelectorAll('.result__tags-tag'));\n tags.forEach((tag) => {\n tag.removeEventListener('click', this.tagClick);\n tag.addEventListener('click', this.tagClick);\n });\n }\n\n private tagClick = (e: MouseEvent & { target: HTMLElement }) => {\n e.preventDefault();\n let tagVal = e.target.dataset.value;\n tagVal = tagVal === 'publication' ? 'publications' : tagVal;\n tagVal = tagVal.toLowerCase();\n\n const filter: HTMLNanoAlgoliaFilterElement = this.algoliaEle.querySelector(\n 'nano-algolia-filter[filter-name=\"tags\"]'\n );\n if (filter.value.indexOf(tagVal) === -1) {\n filter.value = filter.value ? [...filter.value, tagVal] : [tagVal];\n }\n };\n\n private changeOrder(ev) {\n this.algoliaEle.replicaIndex = ev.detail.value;\n }\n\n private goback() {\n this.removeAllFilters();\n this.algoliaEle.showResults = false;\n this.algoliaEle.query = '';\n }\n\n private removeFilter(facet, filter) {\n this.algoliaEle.removeFilters(facet, filter);\n }\n\n private removeAllFilters() {\n this.algoliaEle.removeFilters();\n }\n\n private closefilters() {\n if (!this.filtersDiv) return;\n this.filtersDiv.tabIndex = null;\n this.filtersDiv.classList.remove('show');\n this.filtersDiv.setAttribute('aria-expanded', 'false');\n document.body.style.overflow = '';\n setTimeout(() => this.openFilterBtn.focus(), 20);\n }\n\n private toggleOldResults(show: boolean) {\n if (show)\n this.algoliaEle.filters = this.algoliaEle.filters.filter(\n (f) => !f.startsWith('created > ')\n );\n else this.algoliaEle.filters = [...this.algoliaEle.filters, filterOldPosts];\n\n console.log(this.algoliaEle.filters);\n }\n\n componentDidLoad() {\n this.ro = new ResizeObserver((entries) => {\n for (const entry of entries) {\n if (!entry.contentRect.width) return;\n this.currentWidth = entry.contentRect.width;\n }\n });\n this.ro.observe(this.el);\n this.algoliaEle.filters = [filterOldPosts]; // only get last 2 years\n }\n\n render() {\n return (\n <Host\n class={{ small: this.currentWidth < 677 }}\n dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : false}\n >\n <nano-algolia\n store-id=\"searchq\"\n store-method=\"url-hash-push\"\n class=\"main-search__wrap sc-nano-global-search-results\"\n ref={(ele) => raf(() => (this.algoliaEle = ele))}\n id=\"main-search\"\n >\n <script type=\"text/template\" slot=\"template\">\n {`<div class=\"main-search sc-nano-global-search-results\">\n <nano-algolia-results id=\"main-search-results\" class=\"main-search__results sc-nano-global-search-results\" infinite-scroll>\n <script type=\"text/template\" slot=\"start-template\">\n <div class=\"sc-nano-global-search-results main-search__topbar topbar\">\n <button class=\"sc-nano-global-search-results topbar__bkbtn back-btn icon-button\">\n <nano-icon class=\"sc-nano-global-search-results\" name=\"light/chevron-left\" size=\"small\"></nano-icon>\n </button>\n <div>\n <em class=\"sc-nano-global-search-results topbar__query\">'{{ it.query }}' - </em> <strong>{{ it.totalHitsWithFilters }}</strong> Results\n </div>\n\n <div class=\"sc-nano-global-search-results topbar__filtering\">\n {{ @if (it.results.length) }}\n\n {{ @if (it.indexName === 'All') }}\n <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n <nano-option value=\"all_prod_en\">Sort by: Most relevant</nano-option>\n <nano-option value=\"all_prod_en_date_desc\">Sort by: Newest</nano-option>\n <nano-option value=\"all_prod_en_date_asc\">Sort by: Oldest</nano-option>\n <nano-option value=\"all_prod_en_activity_date_desc\">Sort by: Recent activity</nano-option>\n </nano-select>\n {{ /if }}\n\n {{ @if (it.indexName === 'www') }}\n <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n <nano-option value=\"cws_english_en\">Sort by: Most relevant</nano-option>\n <nano-option value=\"cws_english_en_date_desc\">Sort by: Newest</nano-option>\n <nano-option value=\"cws_english_en_date_asc\">Sort by: Oldest</nano-option>\n </nano-select>\n {{ /if }}\n\n {{ @if (it.indexName === 'Resources') }}\n <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n <nano-option value=\"cws_english_resources_en\">Sort by: Most relevant</nano-option>\n <nano-option value=\"cws_english_resources_en_featured_desc\">Sort by: Newest</nano-option>\n <nano-option value=\"cws_english_resources_en_featured_asc\">Sort by: Oldest</nano-option>\n </nano-select>\n {{ /if }}\n\n {{ @if (it.indexName === 'Store') }}\n <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n <nano-option value=\"store_prod\">Sort by: Most relevant</nano-option>\n <nano-option value=\"store_prod_date_desc\">Sort by: Newest</nano-option>\n <nano-option value=\"store_prod_date_asc\">Sort by: Oldest</nano-option>\n </nano-select>\n {{ /if }}\n\n {{ @if (it.indexName === 'Community') }}\n <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--community indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n <nano-option value=\"community_prod\">Sort by: Most relevant</nano-option>\n <nano-option value=\"community_prod_date_desc\">Sort by: Newest</nano-option>\n <nano-option value=\"community_prod_date_asc\">Sort by: Oldest</nano-option>\n <nano-option value=\"community_prod_activity_date_desc\">Sort by: Recent activity</nano-option>\n </nano-select>\n {{ /if }}\n {{ /if }}\n\n <button class=\"sc-nano-global-search-results topbar__show-filters filters-title\" aria-controls=\"main-search-filters\">\n {{ @if (it.appliedFilters && it.appliedFilters.length > 0) }}\n <span class=\"sc-nano-global-search-results topbar__filter-count\">\n {{ (it.appliedFilters.reduce(function(a, b) { return a + (b.values ? b.values.length : 0) }, 0)) }}\n </span>\n {{ /if }}\n <nano-icon class=\"sc-nano-global-search-results\" name=\"light/filter\"></nano-icon>\n </button>\n </div>\n </div>\n\n {{ @if (it.results.length) }}\n <div class=\"sc-nano-global-search-results main-search__applied-filters\">\n {{ @if (it.appliedFilters) }}\n {{ @each(it.appliedFilters) => filterObj }}\n {{ @each(filterObj.values) => filterVal }}\n <span class=\"sc-nano-global-search-results main-search__applied-filter\">\n {{ filterVal | public_name }}\n <button class=\"sc-nano-global-search-results icon-button remove-filter\" data-filter=\"{{ filterObj.name }}\" data-filter-val=\"{{ filterVal }}\">\n <nano-icon class=\"sc-nano-global-search-results\" name=\"light/times\"></nano-icon>\n </button>\n </span>\n {{ /each }}\n {{ /each }}\n {{ #else }}\n <span class=\"sc-nano-global-search-results main-search__applied-nofilter\"> </span>\n {{ /if }}\n </div>\n {{ /if }}\n </script>\n\n <script type=\"text/template\" slot=\"result-template\">\n \n {{ @if ((!it.results || !it.results.length)) }}\n <div class=\"search-empty\">\n <nano-icon name=\"light/search\" class=\"search-empty-icon\"></nano-icon>\n <h2>No matches found...</h2>\n <p>Please try a different search query.</p>\n </div>\n {{ /if }}\n \n {{ @if (it.totalHitsWithFilters > 0) }}\n {{ @each(it.results) => result }}\n {{ contentType = result.content_type ? result.content_type : result.type }}\n <li class=\"sc-nano-global-search-results\">\n <div class=\"sc-nano-global-search-results result\">\n <h4 class=\"sc-nano-global-search-results result__title\" data-icon-set=\"{{(iconSet = false)}}\">\n <a href=\"{{ result.url | abs_url(it, result) }}\">\n {{ result._snippetResult.title.value | safe }}\n {{ @if (contentType === 'technical_document' || contentType === 'literature' || contentType === 'white_paper' || contentType === 'protocol') }}\n <span class=\"sc-nano-global-search-results result__pdf\">PDF</span>\n {{ /if }}\n </a>\n </h4>\n {{ @if (result.authors) }}\n {{ @if (typeof result.authors === 'string') }}\n <a class=\"sc-nano-global-search-results result__authors\" href=\"{{ result.url | abs_url(it, result) }}\">Authors: {{ result.authors | trim_to(50) }}</a>\n {{ #else }}\n <a class=\"sc-nano-global-search-results result__authors\" href=\"{{ result.url | abs_url(it, result) }}\">\n {{ @each(result.authors) => author, index }}\n \n Athors: {{ author | trim_to(60) }}\n \n {{ /each }}\n </a>\n {{ /if }}\n {{ /if }}\n {{ @if (contentType === 'video' || contentType === 'lc_lightning_talk' ) }}\n {{ @if (result.name) }}\n <a class=\"sc-nano-global-search-results result__authors\" href=\"{{ result.url | abs_url(it, result) }}\">Speaker: {{ result.name | trim_to(50) }}</a>\n {{ /if }}\n <a class=\"sc-nano-global-search-results result__video-body\" href=\"{{ result.url | abs_url(it, result) }}\">\n {{ @if (result.image) }}\n <div class=\"sc-nano-global-search-results result__image\" style=\"background-image: url('{{ result.image | abs_url(it, result) }}')\">\n <nano-icon class=\"sc-nano-global-search-results\" name=\"duotone/play-circle\"></nano-icon>\n </div>\n {{ /if }}\n <div class=\"sc-nano-global-search-results result__body\">\n <div class=\"sc-nano-global-search-results result__description\">\n {{ @if (result.description) }}\n {{ result._snippetResult.description.value | safe }}\n {{ /if }}\n </div>\n </div>\n <div class=\"sc-nano-global-search-results result__meta\">\n {{ @if (result.type || result.content_type) }}\n <div class=\"sc-nano-global-search-results result__type\">\n {{ @if (contentType === 'lc_lightning_talk') }}\n Presentation\n {{ #else }}\n {{ contentType }}\n {{ /if }}\n </div>\n {{ /if }}\n {{ @if (result.tags) }}\n <div class=\"sc-nano-global-search-results result__tags\">\n {{ @if (typeof result.tags === 'string') }}\n <button data-value=\"{{ result.tags | lowercase }}\" class=\"sc-nano-global-search-results result__tags-tag\">{{ result.tags }}</button>\n {{ #else }}\n {{ @each(result.tags) => tag, index }}\n {{ @if(index < 5)}}\n {{ @if (tag !== \"No video\" && tag !== \"Resources\" && tag !== \"Video\") }}\n <button data-value=\"{{ tag | lowercase }}\" class=\"sc-nano-global-search-results result__tags-tag\">{{ tag }}</button>\n {{ /if }}\n {{ /if }}\n {{ /each }}\n {{ /if }}\n </div>\n {{ /if }}\n {{ @if (result.source) }}\n <div class=\"sc-nano-global-search-results result__source\">Source: {{ result.source }}</div>\n {{ /if }}\n </div>\n </a>\n {{ /if }}\n {{ @if (result.body) }}\n <a class=\"sc-nano-global-search-results result__body\" href=\"{{ result.url | abs_url(it, result) }}\">{{ result._snippetResult.body.value | safe }}</a>\n {{ /if }}\n {{ @if (contentType === 'product' }}\n <div class=\"sc-nano-global-search-results result__buttons\">\n <a class=\"sc-nano-global-search-results result__buttons-button\" href=\"{{ result.url | abs_url(it, result) }}\">View product</a>\n </div>\n {{ /if }}\n {{ @if (contentType === 'event') }}\n <a class=\"sc-nano-global-search-results result__promo\" href=\"{{ result.url | abs_url(it, result) }}\">\n <div class=\"sc-nano-global-search-results result__promo-box\">\n <div class=\"sc-nano-global-search-results result__promo-bigdate\">\n {{ result.start_date | date_long({year: undefined, month: 'short', day: undefined}) }}\n <span>{{ result.start_date | date_long({year: undefined, month: undefined, day: 'numeric'}) }}</span>\n </div>\n <div>\n <div class=\"sc-nano-global-search-results result__promo-date\">\n <nano-icon class=\"sc-nano-global-search-results\" name=\"light/calendar-alt\"></nano-icon>\n {{ @if (result.end_date) }}\n {{ @if (result.end_date !== result.start_date) }}\n {{ result.start_date | date_long({weekday: 'short', day: 'numeric', month: 'short'}) }} - {{ result.end_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n {{ #else }}\n {{ result.start_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n {{ /if }}\n {{ #else }}\n {{ @if (result.start_date) }}\n {{ result.start_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n {{ /if }}\n {{ /if }}\n </div>\n <div class=\"sc-nano-global-search-results result__promo-venue\">\n <nano-icon class=\"sc-nano-global-search-results\" name=\"light/map-marker-alt\"></nano-icon>\n Venue\n </div>\n </div>\n </div>\n </a>\n {{ /if }}\n {{ @if (contentType !== 'lc_lightning_talk' && contentType !== 'video') }}\n <div class=\"sc-nano-global-search-results result__meta\">\n {{ @if (result.type || result.content_type) }}\n <div class=\"sc-nano-global-search-results result__type\">\n {{ @if (contentType === 'news_item') }}\n News\n {{ #elif (contentType === 'static_page' || contentType === 'bespoke') }}\n Page\n {{ #elif (contentType === 'case_study') }}\n Case study\n {{ #elif (contentType === 'lc_poster') }}\n Poster\n {{ #elif (contentType === 'nanopore_live') }}\n Live stream\n {{ #elif (contentType === 'data_release') }}\n Data release\n {{ #elif (contentType === 'research_area') }}\n Research area\n {{ #elif (contentType === 'white_paper') }}\n White paper\n {{ #elif (contentType === 'technical_document') }}\n Technical document\n {{ #elif (contentType === 'info_sheet') }}\n Info sheet\n {{ #elif (contentType === 'lc_home' || contentType === 'lc_venue') }}\n London Calling\n {{ #else }}\n {{ contentType }}\n {{ /if }}\n </div>\n {{ /if }}\n {{ @if (contentType !== 'event') }}\n {{ @if (result.updated) }}\n <div class=\"sc-nano-global-search-results result__date\">{{ result.updated | date_long({year: 'numeric', month: 'short', day: 'numeric'}) }}</div>\n {{ #else }}\n {{ @if (result.created) }}\n <div class=\"sc-nano-global-search-results result__date\">{{ result.created | date_long({year: 'numeric', month: 'short', day: 'numeric'}) }}</div>\n {{ /if }}\n {{ /if }}\n {{ /if }}\n {{ @if (result.tags) }}\n <div class=\"sc-nano-global-search-results result__tags\">\n {{ @if (typeof result.tags === 'string') }}\n {{ @if (result.tags !== \"Resources\" && result.tags !== \"Tools\" && result.tags !== \"Publications\" && result.tags !== \"Case studies\") }}\n <button data-value=\"{{ result.tags | lowercase }}\" class=\"sc-nano-global-search-results result__tags-tag\">{{ result.tags }}</button>\n {{ /if }}\n {{ #else }}\n {{ @each(result.tags) => tag, index }}\n {{ @if(index < 5)}}\n {{ @if (tag !== \"Resources\" && tag !== \"Tools\" && tag !== \"Publications\" && tag !== \"Case studies\") }}\n <button data-value=\"{{ tag | lowercase }}\" class=\"sc-nano-global-search-results result__tags-tag\">{{ tag }}</button>\n {{ /if }}\n {{ /if }}\n {{ /each }}\n {{ /if }}\n </div>\n {{ /if }}\n {{ @if (result.source) }}\n <div class=\"sc-nano-global-search-results result__source\">Source: {{ result.source }}</div>\n {{ /if }}\n </div>\n {{ /if }}\n </div>\n </li>\n {{ /each }}\n {{ /if }}\n </script>\n\n <div slot=\"start-output\"></div>\n <ul slot=\"result-output\" class=\"sc-nano-global-search-results\"></ul>\n </nano-algolia-results>\n\n {{ @if(Object.keys(it.origFilters).length) }}\n <div class=\"sc-nano-global-search-results main-search__filters filters close-filters\" id=\"main-search-filters\">\n <div class=\"sc-nano-global-search-results filters-wrap\">\n {{ @if(it.totalHits) }}\n <div class=\"sc-nano-global-search-results filters-header\">\n <strong class=\"sc-nano-global-search-results filters-title\">Filters</strong>\n <button class=\"sc-nano-global-search-results filters-reset\">Reset</button>\n <button class=\"sc-nano-global-search-results filters__close-filters close-filters icon-button\" aria-controls=\"main-search-filters\">\n <nano-icon class=\"sc-nano-global-search-results\" name=\"light/times\"></nano-icon>\n </button>\n </div>\n {{ /if }}\n\n <div>\n <input class=\"sc-nano-global-search-results filter-cb old-posts filters__old-posts\" type=\"checkbox\" name=\"old-posts\" id=\"old-posts\" value=\"nice\" />\n <label class=\"sc-nano-global-search-results filter-label\" for=\"old-posts\">\n <span>Include posts older than 2 years</span>\n </label>\n {{ @if(it.origFilters['type']) }}\n <nano-details class=\"sc-nano-global-search-results\" open={true} icon-rotation=\"180\">\n <strong slot=\"label\">Type</strong>\n <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n <nano-algolia-filter store-id=\"searchf1\" store-method=\"url-hash-push\" filter-name=\"type\">\n <script type=\"text/template\" slot=\"filter-template\">\n <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n {{ @foreach(it.dyn) => filter, filterVal }}\n <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n <input class=\"sc-nano-global-search-results filter-cb\" type=\"checkbox\" value=\"{{ filter }}\" id=\"type-{{ filter }}-{{x}}\" />\n <label class=\"sc-nano-global-search-results filter-label\" for=\"type-{{ filter }}-{{x}}\">\n <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n </label></li>\n {{ /foreach }}\n </ul>\n </script>\n <div slot=\"output\"></div>\n </nano-algolia-filter>\n </nano-details>\n {{ /if }}\n\n {{ @if(it.origFilters['channel']) }}\n <nano-details open={true} icon-rotation=\"180\">\n <strong slot=\"label\">Channels</strong>\n <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n <nano-algolia-filter store-id=\"searchf2\" store-method=\"url-hash-push\" filter-name=\"channel\">\n <script type=\"text/template\" slot=\"filter-template\">\n <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n {{ @foreach(it.dyn) => filter, filterVal }}\n <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n <input class=\"filter-cb sc-nano-global-search-results\" type=\"checkbox\" value=\"{{ filter }}\" id=\"channel-{{ filter }}-{{x}}\" />\n <label class=\"filter-label sc-nano-global-search-results\" for=\"channel-{{ filter }}-{{x}}\">\n <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n </label></li>\n {{ /foreach }}\n </ul>\n </script>\n <div slot=\"output\"></div>\n </nano-algolia-filter>\n </nano-details>\n {{ /if }}\n\n {{ @if(it.origFilters['authors']) }}\n <nano-details open={true} icon-rotation=\"180\">\n <strong slot=\"label\">Authors</strong>\n <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n <nano-algolia-filter store-id=\"searchf3\" store-method=\"url-hash-push\" filter-name=\"authors\">\n <script type=\"text/template\" slot=\"filter-template\">\n <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n {{ @foreach(it.dyn) => filter, filterVal }}\n <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n <input class=\"filter-cb sc-nano-global-search-results\" type=\"checkbox\" value=\"{{ filter }}\" id=\"authors-{{ filter }}-{{x}}\" />\n <label class=\"filter-label sc-nano-global-search-results\" for=\"authors-{{ filter }}-{{x}}\">\n <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n </label></li>\n {{ /foreach }}\n </ul>\n </script>\n <div slot=\"output\"></div>\n </nano-algolia-filter>\n </nano-details>\n {{ /if }}\n\n {{ @if(it.origFilters['categories_without_path']) }}\n <nano-details open={true} icon-rotation=\"180\">\n <strong slot=\"label\">Category</strong>\n <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n <nano-algolia-filter store-id=\"searchf4\" store-method=\"url-hash-push\" filter-name=\"categories_without_path\">\n <script type=\"text/template\" slot=\"filter-template\">\n <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n {{ @foreach(it.dyn) => filter, filterVal }}\n {{ @if(!filter.match(/publication/)) }}\n <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n <input class=\"sc-nano-global-search-results filter-cb\" type=\"checkbox\" value=\"{{ filter }}\" id=\"cwp-{{ filter }}-{{x}}\" />\n <label class=\"sc-nano-global-search-results filter-label\" for=\"cwp-{{ filter }}-{{x}}\">\n <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n </label></li>\n {{ /if }}\n {{ /foreach }}\n </ul>\n </script>\n <div slot=\"output\"></div>\n </nano-algolia-filter>\n </nano-details>\n {{ /if }}\n\n {{ @if(it.origFilters['tags']) }}\n <nano-details open={true} icon-rotation=\"180\">\n <strong slot=\"label\">Tags</strong>\n <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n <nano-algolia-filter store-id=\"searchf5\" store-method=\"url-hash-push\" filter-name=\"tags\">\n <script type=\"text/template\" slot=\"filter-template\">\n <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n {{ @foreach(it.dyn) => filter, filterVal }}\n <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n <input class=\"filter-cb sc-nano-global-search-results\" type=\"checkbox\" value=\"{{ filter | lowercase }}\" id=\"tags-{{ filter }}-{{x}}\" />\n <label class=\"filter-label sc-nano-global-search-results\" for=\"tags-{{ filter }}-{{x}}\">\n <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n </label></li>\n {{ /foreach }}\n </ul>\n </script>\n <div slot=\"output\"></div>\n </nano-algolia-filter>\n </nano-details>\n {{ /if }}\n </div>\n </div>\n </div>\n {{ /if }}\n </div>`}\n </script>\n <div slot=\"output\"></div>\n <slot />\n </nano-algolia>\n </Host>\n );\n }\n}\n"]}

package/dist/nano-components/p-0193a282.entry.js ADDED Viewed

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,c as a,h as o,e as i,g as r}from"./p-b5c33aff.js";import{s as n}from"./p-1805d59a.js";import{f as s}from"./p-f8f89998.js";import{d as e,r as d}from"./p-289aa03f.js";import{C as b}from"./p-32f4516e.js";import{g as l,a as c}from"./p-b619500f.js";import{c as h}from"./p-d99437a6.js";import"./p-69a3e911.js";import"./p-1da5f8df.js";const p=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-track-color:#e4e6e8;--indicator-size:0;--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background-rgb:var(--nano-layer-bg-rgb, 255, 255, 255);--scroll-btn-color:"currentColor";--content-padding:2rem 2.5rem;--content-bg:rgb(var(--background-rgb));--content-border-radius:var(--border-radius);--tabs-padding-start:2.5rem;--tabs-padding-end:2.5rem;--tabs-padding-top:0;--tabs-padding-bottom:0;--tabs-container-bg:"transparent";--tabs-bg-rgb:var(--background-rgb);--tab-border-radius:var(--border-radius);--tab-text-color:#007495;--shadow-opacity:0.1;--fade-transparency:0;display:block;position:relative;z-index:var(--nano-layer-index-raised, 5)}@media only screen and (max-width: 768px){:host{--tabs-padding-start:1.5rem;--tabs-padding-end:1.5rem}}:host ::slotted(nano-tab){--tab-indicator-color:var(--indicator-color);--bg-rgb:var(--tabs-bg-rgb);--border-radius:var(--tab-border-radius)}:host(.legacy) ::slotted(nano-tab){--tab-indicator-color:#90c6e7;--border-radius:3px;--tab-indicator-size:5px;--bg-rgb:255, 255, 255}:host([placement=start]),:host([placement=end]){--content-padding:1rem;--tabs-padding-start:0;--tabs-padding-end:0;--tabs-padding-top:0;--tabs-padding-bottom:0;--tab-text-color:#455556;--indicator-color:#007495;--indicator-size:2px}:host(.nano-color){--indicator-color:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--tab-text-color:rgba(var(--nano-color-base-rgb), 0.7)}:host(.nano-color) ::slotted(nano-tab){--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #00637f))}.nano-tab-group{display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:0;width:100%;-webkit-box-flex:inherit;-ms-flex:inherit;flex:inherit}.nano-tab-group__tabs{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;width:100%}.nano-tab-group__active-tab-indicator{position:absolute;-webkit-transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease}.nano-tab-group__body{background:var(--content-bg)}.nano-tab-group:not(.focus-visible) ::slotted(nano-tab){--focus-shadow:none}.nano-tab-group .nano-tab-group__nav-container{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;background:var(--tabs-container-bg)}.nano-tab-group button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent}.nano-tab-group__scroll-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;top:0;bottom:0;border:unset;z-index:2;-webkit-transition:var(--nano-transition-fast, 0.3s) ease opacity;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color)}.nano-tab-group__scroll-button:focus{outline:none}.nano-tab-group__scroll-button.is-shown{opacity:1}.nano-tab-group__scroll-button.focus-visible:focus{-webkit-box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tab-group__scroll-button--left{left:0}.nano-tab-group__scroll-button--right{right:0}.nano-tab-group__scroll-button nano-icon{font-size:16px}.nano-tab-group--top{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.nano-tab-group--top .nano-tab-group__nav-container::after{content:"";width:86%;-webkit-box-shadow:0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));box-shadow:0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));height:10px;position:absolute;left:7%;bottom:-10px;border-radius:10px;z-index:-1}.nano-tab-group--top .nano-tab-group__nav{scrollbar-width:none;-ms-overflow-style:none;padding-left:var(--tabs-padding-start);padding-right:var(--tabs-padding-end);padding-top:var(--tabs-padding-top);padding-bottom:var(--tabs-padding-bottom);display:-webkit-box;display:-ms-flexbox;display:flex;overflow-x:auto;overflow-y:hidden;-webkit-transition:var(--nano-transition-medium, 0.5s) ease;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:-webkit-gradient(linear, right top, left top, color-stop(0, rgba(0, 0, 0, var(--fade-transparency))), color-stop(rgba(0, 0, 0, var(--fade-transparency))), color-stop(black), color-stop(black), color-stop(rgba(0, 0, 0, var(--fade-transparency))), to(rgba(0, 0, 0, var(--fade-transparency))));-webkit-mask-image:linear-gradient(to left, rgba(0, 0, 0, var(--fade-transparency)) 0, rgba(0, 0, 0, var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - (var(--tabs-padding-end) * 2)), rgba(0, 0, 0, var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgba(0, 0, 0, var(--fade-transparency)));mask-image:-webkit-gradient(linear, right top, left top, color-stop(0, rgba(0, 0, 0, var(--fade-transparency))), color-stop(rgba(0, 0, 0, var(--fade-transparency))), color-stop(black), color-stop(black), color-stop(rgba(0, 0, 0, var(--fade-transparency))), to(rgba(0, 0, 0, var(--fade-transparency))));mask-image:linear-gradient(to left, rgba(0, 0, 0, var(--fade-transparency)) 0, rgba(0, 0, 0, var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - (var(--tabs-padding-end) * 2)), rgba(0, 0, 0, var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgba(0, 0, 0, var(--fade-transparency)));-webkit-mask-size:calc(100% + calc(var(--tabs-padding-end) * 4));mask-size:calc(100% + calc(var(--tabs-padding-end) * 4));-webkit-mask-position:calc(var(--tabs-padding-end) * -2);mask-position:calc(var(--tabs-padding-end) * -2)}.nano-tab-group--top .nano-tab-group__nav::-webkit-scrollbar{width:0;height:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nano-tab-group--top .nano-tab-group__nav{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--tabs-padding-start);padding-inline-start:var(--tabs-padding-start);-webkit-padding-end:var(--tabs-padding-end);padding-inline-end:var(--tabs-padding-end)}}.nano-tab-group--top .nano-tab-group__nav::after{content:" ";padding-left:0;padding-right:var(--tabs-padding-end);padding-top:var(--tabs-padding-top);padding-bottom:var(--tabs-padding-bottom);line-height:1;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nano-tab-group--top .nano-tab-group__nav::after{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--tabs-padding-end);padding-inline-end:var(--tabs-padding-end)}}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left .nano-tab-group__nav{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + (var(--tabs-padding-end) * 2));mask-size:calc(100% + (var(--tabs-padding-end) * 2))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-position:calc(var(--tabs-padding-end) * -1);mask-position:calc(var(--tabs-padding-end) * -1);-webkit-mask-size:calc(100% + var(--tabs-padding-end));mask-size:calc(100% + var(--tabs-padding-end))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.nano-tab-group--top .nano-tab-group__tabs{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;position:relative;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;text-align:center;color:var(--tab-text-color);width:auto}.nano-tab-group--top .nano-tab-group__active-tab-indicator{bottom:-2px;border-bottom:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--top .nano-tab-group__body{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;background:var(--content-bg);position:relative;overflow:hidden;width:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:var(--content-padding);border-radius:var(--content-border-radius);-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.nano-tab-group--start{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.nano-tab-group--start .nano-tab-group__tabs{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;color:var(--tab-text-color);background:rgb(var(--tabs-bg-rgb))}:host(:not([dir=rtl])) .nano-tab-group--start .nano-tab-group__tabs{border-left:solid var(--indicator-size) var(--indicator-track-color);text-align:left}:host([dir=rtl]) .nano-tab-group--start .nano-tab-group__tabs{border-right:solid var(--indicator-size) var(--indicator-track-color);text-align:right}:host(:not([dir=rtl])) .nano-tab-group--start .nano-tab-group__active-tab-indicator{left:calc(-1 * 2px);border-left:solid var(--indicator-size) var(--indicator-color)}:host([dir=rtl]) .nano-tab-group--start .nano-tab-group__active-tab-indicator{right:calc(-1 * 2px);border-right:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--start .nano-tab-group__body{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:var(--content-padding);overflow:hidden;border-top-left-radius:0;border-top-right-radius:var(--content-border-radius);border-bottom-right-radius:var(--content-border-radius);border-bottom-left-radius:0}.nano-tab-group--start .nano-tab-group__body[dir=rtl]{border-top-left-radius:var(--content-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--content-border-radius)}';let g=class{constructor(o){t(this,o);this.nanoTabShow=a(this,"nanoTabShow",7);this.nanoTabHide=a(this,"nanoTabHide",7);this.nanoTabWillClose=a(this,"nanoTabWillClose",7);this.nanoTabClose=a(this,"nanoTabClose",7);this.initialTouchX=null;this.initialTouchY=null;this.mutationObservers=new WeakMap;this.hasScrollControls=false;this.hideControlRight=true;this.hideControlLeft=true;this.isLegacy=!document.head.attachShadow;this.placement="top";this.noScrollControls=false;this.storeMethod="session";this.updateScrollControls=()=>{if(this.noScrollControls){this.hasScrollControls=false}else{this.hasScrollControls=["top"].includes(this.placement)&&this.nav.scrollWidth>this.nav.clientWidth&&this.nav.scrollWidth>this.tabs.clientWidth}};this.handleClick=t=>{const a=t.target;const o=a.closest("nano-tab");if(o)this.setActiveTab(o)};this.handleKeyDown=t=>{if(["Enter"," "].includes(t.key)){const a=t.target;const o=a.closest("nano-tab");if(o){this.setActiveTab(o);t.preventDefault()}}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const a=document.activeElement;if(a&&a.tagName.toLowerCase()==="nano-tab"){const o=this.getAllActiveTabs;let i=o.indexOf(a);if(t.key==="Home"){i=0}else if(t.key==="End"){i=o.length-1}else if(this.isRtl&&t.key==="ArrowRight"||!this.isRtl&&t.key==="ArrowLeft"){i=Math.max(0,i-1)}else if(this.isRtl&&t.key==="ArrowLeft"||!this.isRtl&&t.key==="ArrowRight"){i=Math.min(o.length-1,i+1)}o[i].setFocus();if(["top"].includes(this.placement)){n(o[i],this.nav,"horizontal","center")}t.stopPropagation();t.preventDefault()}}};this.handleTabScroll=()=>{if(!this.hasScrollControls){this.hideControlLeft=this.hideControlRight=true;return}let t=this.isRtl?this.nav.scrollLeft===0:this.nav.scrollWidth-this.nav.scrollLeft===this.nav.clientWidth;let a=this.isRtl?this.nav.scrollWidth+this.nav.scrollLeft===this.nav.clientWidth:this.nav.scrollLeft===0;if(a){this.hideControlLeft=true;this.hideControlRight=false}else if(t){this.hideControlLeft=false;this.hideControlRight=true}else{this.hideControlRight=false;this.hideControlLeft=false}};this.handleBtnClick=(t=false)=>{const a=this.getNavWidth();let o;if(t)o=this.nav.scrollLeft+a-20;else o=this.nav.scrollLeft-a+20;try{this.nav.scroll({left:o,behavior:"smooth"})}catch(i){this.nav.scrollLeft=o}};this.handleTouchStart=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];this.initialTouchX=a.pageX;this.initialTouchY=a.pageY};this.handleTouchEnd=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];const o=a.pageX-this.initialTouchX;const i=a.pageY-this.initialTouchY;const r=70;var n=this.initialTouchX-a.clientX;var s=this.initialTouchY-a.clientY;const e=Math.abs(o)>=r&&Math.abs(i)<=r;const d=this.getAllActiveTabs;const b=d.findIndex((t=>t.active));if(e){const t=o<0&&this.placement==="top"||o>0&&this.placement!=="top"?1:-1;if(d[b+t]){this.setActiveTab(d[b+t]);if(Math.abs(n)>Math.abs(s)){if(n>0)this.activePanel.setAttribute("animation-dir","left");else this.activePanel.setAttribute("animation-dir","right")}}}this.initialTouchX=null;this.initialTouchY=null};this.handleContentSlotChange=()=>{setTimeout((()=>{this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false)}))};this.handleTabSlotChange=t=>{setTimeout((()=>{this.setAriaLabels();this.handleTabScroll();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);this.updateScrollControls()}),500);const a=t.target.assignedNodes({flatten:true});a.forEach((t=>{if(!this.mutationObservers.get(t)){const a=new MutationObserver((()=>{setTimeout((()=>{this.syncActiveTabIndicator();this.handleTabScroll();this.updateScrollControls()}),500)}));this.mutationObservers.set(t,a);a.observe(t,{characterData:true,childList:true,subtree:true})}}))}}handleTabNameChange(){if(this.activeTab&&this.activeTab.panel===this.tab)return;const t=this.getAllActiveTabs.find((t=>t.panel===this.tab));this.setActiveTab(t)}handlePlacementChange(){this.syncActiveTabIndicator()}handleNoScrollControlsChange(){this.updateScrollControls()}hideRightBtn(){if(!this.rightBtn)return;e(this.rightBtn,"is-shown",!this.hideControlRight)}hideLeftBtn(){if(!this.leftBtn)return;e(this.leftBtn,"is-shown",!this.hideControlLeft)}watchScrollControls(){if(this.hasScrollControls)setTimeout((t=>this.handleTabScroll()),20);else setTimeout((t=>{this.hideControlLeft=this.hideControlRight=true}),20)}async show(t){if(this.activeTab&&this.activeTab.panel===t)return;const a=this.getAllActiveTabs.find((a=>a.panel===t));if(a)this.setActiveTab(a)}get getAllActiveTabs(){return this.getAllTabs.filter((t=>!t.disabled))}get getAllTabs(){return l(this.host,"nano-tab")}get getAllPanels(){return l(this.host,"nano-tab-content")}get getActiveTab(){return this.getAllActiveTabs.find((t=>t.active))}setActiveTab(t,a=true){if(t&&t!==this.activeTab&&!t.disabled&&this.getAllActiveTabs.includes(t)){const o=this.activeTab;this.activeTab=t;this.tab=t.panel;this.getAllActiveTabs.map((t=>t.active=t===this.activeTab));this.getAllPanels.map((t=>{if(t.name===this.activeTab.panel){t.active=true;this.activePanel=t}else t.active=false;t.removeAttribute("animation-dir")}));this.syncActiveTabIndicator();if(["top"].includes(this.placement)){n(this.activeTab,this.nav,"horizontal","center")}if(a){if(o){this.nanoTabHide.emit({name:o.panel})}this.nanoTabShow.emit({name:this.activeTab.panel})}}}setAriaLabels(){const t=this.getAllActiveTabs;const a=this.getAllPanels;t.map((t=>{const o=a.find((a=>a.name===t.panel));if(o){t.setAttribute("aria-controls",o.getAttribute("id"));o.setAttribute("aria-labelledby",t.getAttribute("id"))}}))}syncActiveTabIndicator(){var t;this.getAllTabs.forEach((t=>t.setAttribute("direction",this.placement==="top"?"horizontal":"vertical")));const a=this.getActiveTab;const o=((t=a.shadowRoot.querySelector(".nanotab"))===null||t===void 0?void 0:t.clientWidth)||0;const i=a.clientHeight;const r=c(a,this.tabs);const n=r.top+this.nav.scrollTop;const s=r.left;switch(this.placement){case"top":this.activeTabIndicator.style.width=`${o}px`;this.activeTabIndicator.style.height=null;this.activeTabIndicator.style.transform=`translateX(${s}px)`;break;case"start":this.activeTabIndicator.style.width=null;this.activeTabIndicator.style.height=`${i}px`;this.activeTabIndicator.style.transform=`translateY(${n}px)`;break}}getNavWidth(){if(!this.nav)return 0;const t=getComputedStyle(this.nav);let a=this.nav.clientWidth;return a-=parseFloat(t.paddingLeft)+parseFloat(t.paddingRight)}handleTabClose(t){var a;let o=this.getAllActiveTabs.indexOf(t.target);const i=t.target;if(o<0)return;const r=this.getAllPanels.find((t=>t.name===i.panel));if(!r)return;t.stopImmediatePropagation();const n=this.nanoTabWillClose.emit({name:i.panel});if(n.defaultPrevented)return;if(i.active){o=o===0?1:o-1;const t=(a=this.getAllActiveTabs[o])===null||a===void 0?void 0:a.panel;if(t)this.host.show(t)}i.remove();r.remove();this.nanoTabClose.emit({name:i.panel})}componentDidLoad(){const t=new IntersectionObserver(((t,a)=>{if(t[0].intersectionRatio>0){this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);if(this.storeId)b.init(this,["tab"],this.storeMethod,this.storeId);a.unobserve(t[0].target)}}));t.observe(this.host);s.observe(this.tabGroup);if(this.leftBtn){s.observe(this.leftBtn);s.observe(this.rightBtn)}this.resizeObserver=new ResizeObserver((()=>{setTimeout((()=>{this.updateScrollControls();this.syncActiveTabIndicator();n(this.activeTab,this.nav,"horizontal","center")}),500)}));this.resizeObserver.observe(this.nav);d((()=>this.updateScrollControls()))}connectedCallback(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"}disconnectedCallback(){s.unobserve(this.tabGroup);if(this.leftBtn){s.unobserve(this.leftBtn);s.unobserve(this.rightBtn)}if(this.resizeObserver)this.resizeObserver.unobserve(this.nav)}render(){this.isRtl=this.host.ownerDocument.dir==="rtl";return o(i,{class:Object.assign(Object.assign({},h(this.color)),{legacy:this.isLegacy}),dir:this.isRtl?"rtl":null},o("div",{part:"base",ref:t=>this.tabGroup=t,class:{"nano-tab-group":true,"nano-tab-group--top":this.placement==="top","nano-tab-group--start":this.placement==="start","nano-tab-group--has-scroll-controls":this.hasScrollControls,"nano-tab-group--has-scroll-controls-left":!this.hideControlLeft,"nano-tab-group--has-scroll-controls-right":!this.hideControlRight},onClick:this.handleClick,onKeyDown:this.handleKeyDown},o("div",{class:"nano-tab-group__nav-container",part:"nav"},this.placement==="top"&&o("button",{class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--left":true},ref:t=>this.leftBtn=t,onClick:()=>this.handleBtnClick(false)},o("nano-icon",{name:"light/chevron-left"})),o("div",{ref:t=>this.nav=t,class:"nano-tab-group__nav",onScroll:this.handleTabScroll},o("div",{ref:t=>this.tabs=t,part:"tabs",class:"nano-tab-group__tabs",role:"tablist"},o("div",{ref:t=>this.activeTabIndicator=t,part:"active-tab-indicator",class:"nano-tab-group__active-tab-indicator"}),o("slot",{name:"tabs",onSlotchange:this.handleTabSlotChange}))),this.placement==="top"&&o("button",{class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--right":true},ref:t=>this.rightBtn=t,onClick:()=>this.handleBtnClick(true)},o("nano-icon",{name:"light/chevron-right"}))),o("slot",{name:"tab-content-header"}),o("div",{part:"body",class:"nano-tab-group__body",onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},o("slot",{onSlotchange:this.handleContentSlotChange}))))}get host(){return r(this)}static get watchers(){return{tab:["handleTabNameChange"],placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"],hideControlRight:["hideRightBtn"],hideControlLeft:["hideLeftBtn"],hasScrollControls:["watchScrollControls"]}}};g.style=p;export{g as nano_tab_group};
+//# sourceMappingURL=p-0193a282.entry.js.map

package/dist/nano-components/p-0193a282.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

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

package/dist/nano-components/p-0320410c.entry.js ADDED Viewed

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,c as i,h as s,e,g as h}from"./p-b5c33aff.js";import{r as n,h as o,b as r}from"./p-289aa03f.js";import{a}from"./p-b619500f.js";import{d as c}from"./p-1da5f8df.js";const l=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--stuck-left:initial;--stuck-right:initial;--stuck-z-index:var(--nano-layer-index-menubar, 10);--top-hide:translateY(-110%);--bottom-hide:translateY(110%);display:block;max-width:100%}:host([sticky]){position:-webkit-sticky;position:sticky;-webkit-transition:0.3s ease transform;transition:0.3s ease transform;will-change:min-height}:host([sticky][stuck]){left:var(--stuck-left);right:var(--stuck-right);z-index:var(--stuck-z-index) !important}:host([sticky][hide][placed-top]){-webkit-transform:var(--top-hide);transform:var(--top-hide)}:host([sticky][hide][placed-bottom]){-webkit-transform:var(--bottom-hide);transform:var(--bottom-hide)}:host([sticky][index="1"]){z-index:calc(var(--stuck-z-index) + 1)}:host([sticky][index="2"]){z-index:calc(var(--stuck-z-index) + 2)}:host([sticky][index="3"]){z-index:calc(var(--stuck-z-index) + 3)}:host([sticky][index="4"]){z-index:calc(var(--stuck-z-index) + 4)}:host([sticky][index="5"]){z-index:calc(var(--stuck-z-index) + 5)}.sticker{display:inherit;max-width:inherit;width:100%}.sticker:not(.stuck){width:auto !important}.sticker.sticky{-webkit-transition:0.3s ease all;transition:0.3s ease all;position:relative}:host([index="1"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 1)}:host([index="2"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 2)}:host([index="3"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 3)}:host([index="4"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 4)}:host([index="5"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 5)}.sticker.stuck{position:fixed;left:var(--stuck-left);right:var(--stuck-right);z-index:var(--stuck-z-index);-webkit-transform:translateY(0);transform:translateY(0)}:host([placed-top]) .sticker.stuck{top:0}:host([placed-bottom]) .sticker.stuck{bottom:0}:host([placed-top]) .sticker.stuck.hide{-webkit-transform:var(--top-hide);transform:var(--top-hide)}:host([placed-bottom]) .sticker.stuck.hide{-webkit-transform:var(--bottom-hide);transform:var(--bottom-hide)}.sticker-content{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}';function f(t){return t instanceof Document?window.pageYOffset:t.scrollTop}function d(t,i){let s=i instanceof Document?document.documentElement:i;return a(t,s)}let u=class{constructor(s){t(this,s);this.nanoStuck=i(this,"nanoStuck",7);this.nanoUnstuck=i(this,"nanoUnstuck",7);this.nanoHide=i(this,"nanoHide",7);this.nanoShow=i(this,"nanoShow",7);this.isRtl=false;this.scrollPosCache=0;this.scrollPosThresholdCache=0;this.cacheOffset=0;this.pauseResizeWatcher=false;this.listenForScrollParent=false;this.positions=[];this.pauseHide=false;this.hasBootstrapped=false;this.isStuck=false;this.isRootSticker=true;this.hide=false;this.scrollHide=false;this.multiStickerHide=false;this.scrollingTo=false;this.quietModeIsOn=false;this.stuckCounter=0;this.stickerIndex=0;this._offset=0;this.autoResize=true;this.isSticky=true;this.offset=0;this.position="top";this.quietMode={h:600,w:600};this.hideOnNewStickers=true;this.breakPointMax=null;this.breakPointMin=null;this.setupParentResizeListener=()=>{if(this.parentSizeObserver){this.parentSizeObserver.disconnect();this.parentSizeObserver=undefined}this.parentSizeObserver=new ResizeObserver((t=>{for(const i of t){let t,s;if(i.contentRect.height)t=i.contentRect.height;if(i.contentRect.width)s=i.contentRect.width;if(typeof this.quietMode==="object"){if(s<this.quietMode.w||t<this.quietMode.h)this.quietModeIsOn=true;else this.quietModeIsOn=false}if(this.breakPointMin){if(s>this.breakPointMin)this.isSticky=true;else this.isSticky=false}if(this.breakPointMax){if(s<this.breakPointMax)this.isSticky=true;else this.isSticky=false}if(this.isRootSticker&&this.sticker&&this.autoResize)this.sticker.style.width=this.host.scrollWidth+"px"}}));let t=this.scrollParent instanceof Document?this.scrollParent.documentElement:this.scrollParent;if(t)this.parentSizeObserver.observe(t)};this.onStickToDisplayEvent=t=>{if(t.detail.sticker!==this.stickToEle)return;switch(t.type){case"nanoHide":this._offset=0;this.cacheOffset=this.offset;this.offset=0;if(!this.isStuck)this.moveTrigger(false);if(!this.isRootSticker&&this.quietModeIsOn){n((()=>{this.stickToEle.style.minHeight=this.stickToEleInitSize.height+(this.host.scrollHeight+(typeof this.cacheOffset==="object"?this.cacheOffset.v:this.cacheOffset))+"px";this.stickToEle.setTriggerPos(this.stickToEleInitSize.height*-1)}))}break;case"nanoShow":this._offset=this.stickToEleInitSize.height;this.offset=this.cacheOffset;this.moveTrigger(true);if(!this.isRootSticker&&this.quietModeIsOn){n((()=>{this.stickToEle.style.minHeight="";this.stickToEle.setTriggerPos(0)}))}break;case"nanoStuck":this.stickToEleInitSize=this.stickToEle.getBoundingClientRect();this._offset=this.stickToEleInitSize.height;break}};this.onStickEvent=async t=>{let i=t.detail?t.detail.sticker:null;if(!i||i.position!==this.position)return;const s=await i.getTriggerPos();if(t.type==="nanoStuck"&&i!==this.host&&i.scrollParent===this.host.scrollParent){this.stickerIndex++;if(!this.hideOnNewStickers)return;if(this.positions.includes("top")&&this.triggerPos.top<s.top||this.positions.includes("bottom")&&this.triggerPos.top>s.top){this.multiStickerHide=true;this.stuckCounter++}}if(t.type==="nanoUnstuck"&&i!==this.host&&i.scrollParent===this.host.scrollParent){this.stickerIndex--;if(!this.hideOnNewStickers)return;if(this.positions.includes("top")&&this.triggerPos.top<s.top||this.positions.includes("bottom")&&this.triggerPos.top>s.top){this.stuckCounter--;if(this.stuckCounter<1)this.multiStickerHide=false}}};this.onScroll=()=>{let t=f(this.scrollParent);if(t<this.scrollPosCache){if(!this.positions.includes("bottom"))this.handleScrollTo();else this.handleScrollAway(t)}if(t>this.scrollPosCache){if(!this.positions.includes("bottom"))this.handleScrollAway(t);else this.handleScrollTo()}this.scrollPosCache=t}}async isHiding(){return this.hide}async isSticking(){this.shouldStick();return this.isStuck}async setTriggerPos(t){return this._offset=t}async getTriggerPos(){return this.triggerPos}async pauseHiding(t){return this.pauseHide=t}updateTriggerOffset(){if(!this.trigger||!this.scrollParent||!this.listenForScrollParent)return;this.triggerPos=d(this.trigger,this.scrollParent)}stickerResizeListener(){if(this.contentSizeObserver){this.contentSizeObserver.disconnect();this.contentSizeObserver=undefined}this.contentSizeObserver=new ResizeObserver((t=>{for(const i of t){if(this.pauseResizeWatcher)return;if(i.contentRect.height){if(this.position==="top")this.host.style.height=i.contentRect.height+"px";if(this.position==="bottom")this.host.style.minHeight=i.contentRect.height+"px"}}}));this.contentSizeObserver.observe(this.content)}quietModeChange(){if(this.quietMode==="on")n((()=>this.quietModeIsOn=true));else if(this.quietMode==="off")n((()=>this.quietModeIsOn=false))}setOffset(){this.trigger.setAttribute("style","");let t,i,s,e;let h=this.isRootSticker||this.stickToEle?this.sticker:this.host;if(!h)return;if(typeof this.offset==="object")({v:t,h:i}=this.offset);else t=i=this.offset;if(typeof this._offset==="object")({v:t=s,h:i=e}=this._offset);else s=e=this._offset;const n=s=>{let e=s.match(/(top|bottom)/)?t:i;o(s);h.style[s]=e+"px";if(!r())return;if(e)this.host.style.setProperty("--hide-transform-amount",`(110% + ${e}px)`);else this.host.style.setProperty("--hide-transform-amount",null)};const o=h=>{let n=h.match(/(top|bottom)/)?t+s:i+e;this.trigger.style[h]=n*-1+"px";this.trigger.style.position="relative";this.trigger.style.height="1px"};if(this.positions.includes("start")&&this.isRtl||this.positions.includes("end")&&!this.isRtl)n("right");if(this.positions.includes("end")&&this.isRtl||this.positions.includes("start")&&!this.isRtl)n("left");if(this.positions.includes("top"))n("top");if(this.positions.includes("bottom"))n("bottom")}positionChange(){this.positions=this.position.split("-");this.setOffset()}async stuckChange(){if(this.isStuck){if(this.stickToEle){let t=o(this.host)?this.host.children:this.content.children;this.slottedContent=Array.from(t);this.slottedContent.forEach((t=>{if(o(this.host))this.stickToEle.appendChild(t);else this.stickToEle.querySelector(".sticker-content").appendChild(t);t.style.order=this.stickerIndex+""}));this.nanoStuck.emit({sticker:this.stickToEle})}else this.nanoStuck.emit({sticker:this.host})}else{this.scrollHide=false;if(this.stickToEle){this.slottedContent.forEach((t=>{this.host.appendChild(t);t.style.order=""}));this.nanoUnstuck.emit({sticker:this.stickToEle})}else this.nanoUnstuck.emit({sticker:this.host})}}attachScrollListeners(){if(this.quietModeIsOn)this.scrollParent.addEventListener("scroll",this.onScroll,{passive:true,capture:false});else if(this.scrollParent){this.scrollParent.removeEventListener("scroll",this.onScroll);this.moveTrigger(true)}}handleParentEvents(t,i=null){if(!this.listenForScrollParent)return;if(i)this.manageListenersOnParent(false,i);if(this.scrollParent)this.manageListenersOnParent(!this.stickToEle)}stickToEleChange(t,i){if(this.stickToEle){this.stickToEle.addEventListener("nanoHide",this.onStickToDisplayEvent);this.stickToEle.addEventListener("nanoShow",this.onStickToDisplayEvent);this.stickToEle.addEventListener("nanoStuck",this.onStickToDisplayEvent);this.stickToEle.addEventListener("nanoUnstuck",this.onStickToDisplayEvent)}if(i){i.removeEventListener("nanoHide",this.onStickToDisplayEvent);i.removeEventListener("nanoShow",this.onStickToDisplayEvent);i.removeEventListener("nanoStuck",this.onStickToDisplayEvent);i.removeEventListener("nanoUnstuck",this.onStickToDisplayEvent)}}stickToChange(){if(this.stickTo)this.stickToEle=this.scrollParent.querySelector(this.stickTo);else this.stickToEle=undefined}visibilityDecisionHandler(){if(this.multiStickerHide||this.scrollHide)this.hide=true;else this.hide=false}handleHideChange(){if(this.hide)this.nanoHide.emit({sticker:this.host});else this.nanoShow.emit({sticker:this.host})}setupIO(){if(this.io){this.io.disconnect();this.io=undefined}if(!this.scrollParent||!this.hasBootstrapped||!this.trigger)return;this.isRootSticker=this.scrollParent instanceof Document;let t=this.scrollParent;if(this.scrollParent instanceof Document)t=null;this.io=new window.IntersectionObserver((t=>{if(this.pauseResizeWatcher||!this.isSticky)return;this.shouldStick(t.slice(-1)[0])}),{root:t});this.io.observe(this.trigger)}manageListenersOnParent(t,i){let s=i||this.scrollParent;if(!s)return;if(!t){try{if(this.quietModeIsOn)s.removeEventListener("scroll",this.onScroll);s.removeEventListener("nanoStuck",this.onStickEvent);s.removeEventListener("nanoUnstuck",this.onStickEvent)}catch(e){console.error("Events haven`t been added")}}else{s.addEventListener("nanoStuck",this.onStickEvent);s.addEventListener("nanoUnstuck",this.onStickEvent);if(this.quietModeIsOn)this.attachScrollListeners()}this.setupParentResizeListener()}handleScrollTo(){this.scrollPosThresholdCache=null;if(!this.scrollHide)return;if(this.scrollingTo!==true){this._offset=this.cacheOffset||this._offset}this.scrollingTo=true;this.scrollHide=false}handleScrollAway(t){if(this.scrollHide)return;if(!this.isStuck)return;if(this.scrollingTo!==false){this.cacheOffset=this._offset;this._offset=0}this.scrollingTo=false;if(!this.scrollPosThresholdCache)this.scrollPosThresholdCache=t;else if(!this.pauseHide&&Math.abs(t-this.scrollPosThresholdCache)>100)this.scrollHide=true}moveTrigger(t){if(this.positions.includes("bottom")&&!t||!this.positions.includes("bottom")&&t){this.host.parentNode.insertBefore(this.trigger,this.host)}else this.host.parentNode.insertBefore(this.trigger,this.host.nextSibling)}getScrollParent(){const t=/(auto|scroll)/;const i=(t,s)=>{if(t.parentNode===null){return s}return i(t.parentNode,s.concat([t]))};const s=(t,i)=>getComputedStyle(t,null).getPropertyValue(i);const e=t=>s(t,"overflow")+s(t,"overflow-y")+s(t,"overflow-x");const h=i=>t.test(e(i));const n=document.documentElement.getBoundingClientRect().height;const o=t=>{if(!(t instanceof HTMLElement))return;const s=i(t,[]);return s.find((t=>h(t)&&t.getBoundingClientRect().height!==n))||document};return o(this.host)}shouldStick(t){let i;if(this.positions.includes("top")){if(!this.isRootSticker)i=d(this.trigger,this.scrollParent).top;else i=this.trigger.getBoundingClientRect().top;this.isStuck=i<-1}else if(this.positions.includes("bottom")){i=this.trigger.getBoundingClientRect().top;const s=t&&t.rootBounds?t.rootBounds:(this.scrollParent instanceof Document?document.documentElement:this.scrollParent).getBoundingClientRect();this.isStuck=i>s.height+s.top}}bootstrapGurantor(){this.hasBootstrapped=true;this.scrollParent=this.scrollParent||this.getScrollParent();this.isRootSticker=this.scrollParent instanceof Document;this.trigger=this.trigger||document.createElement("div");this.trigger.classList.add("sticker-trigger");this.positionChange();this.moveTrigger(true);this.quietModeChange();this.listenForScrollParent=true;this.handleParentEvents(true);this.stickerIndex=Array.from(this.scrollParent.querySelectorAll("nano-sticker")).filter((t=>t.position===this.position)).findIndex((t=>t===this.host));this.setOffset();this.stickerResizeListener();this.setupParentResizeListener();this.slottedContent=Array.from(this.host.children);this.slottedContent.forEach((t=>{t.style.order=this.stickerIndex+""}));this.updateTriggerOffset();this.stickToChange();this.setupIO();this.onStickToDisplayEvent=c(this.onStickToDisplayEvent,50)}connectedCallback(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";document.documentElement.addEventListener("nanoComponentsReady",(()=>{setTimeout((t=>this.bootstrapGurantor()),200)}));setTimeout((t=>{if(!this.hasBootstrapped)this.bootstrapGurantor()}),1e3)}disconnectedCallback(){if(this.io){this.io.disconnect();this.io=undefined}if(this.parentSizeObserver){this.parentSizeObserver.disconnect();this.parentSizeObserver=undefined}this.scrollParent=null;this.hasBootstrapped=false}render(){return s(e,{sticky:!this.isRootSticker&&!this.stickToEle&&this.isSticky,hide:this.hide&&this.isStuck,siblings:this.stuckCounter,index:this.stickerIndex,stuck:this.isStuck&&this.isSticky,"placed-bottom":this.positions.includes("bottom"),"placed-top":this.positions.includes("top"),"placed-end":this.positions.includes("end"),"placed-start":this.positions.includes("start")},s("div",{class:{sticker:true,sticky:this.isRootSticker&&this.isSticky,stuck:this.isStuck&&this.isRootSticker&&this.isSticky,hide:this.isRootSticker&&this.hide&&this.isStuck},ref:t=>this.sticker=t},s("div",{class:"sticker-content",ref:t=>this.content=t},s("slot",null))))}get host(){return h(this)}static get watchers(){return{trigger:["updateTriggerOffset"],scrollParent:["updateTriggerOffset","handleParentEvents","setupIO"],position:["stickerResizeListener","positionChange"],quietMode:["quietModeChange"],offset:["setOffset"],_offset:["setOffset"],isStuck:["stuckChange"],quietModeIsOn:["attachScrollListeners"],stickToEle:["handleParentEvents","stickToEleChange"],stickTo:["stickToChange"],multiStickerHide:["visibilityDecisionHandler"],scrollHide:["visibilityDecisionHandler"],hide:["handleHideChange"]}}};u.style=l;export{u as nano_sticker};
+//# sourceMappingURL=p-0320410c.entry.js.map

package/dist/nano-components/p-0320410c.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

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