npm - @nanoporetech-digital/components - Versions diffs - 1.15.6 → 2.0.0 - Mend

@nanoporetech-digital/components 1.15.6 → 2.0.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 (981) hide show

package/dist/components/nano-global-search-results.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"nano-global-search-results.js","mappings":"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","names":["ResizeObserver"],"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"],"sourcesContent":["@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 $color-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: $color-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 // @include media-breakpoint-down('sm') {\n // max-width: 300px;\n // }\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: $color-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 &-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 $color-blue;\n background: $color-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: $color-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 }\n\n &-reset {\n color: $color-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 $color-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($color-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: $color-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: $color-palegrey;\n }\n\n &__meta {\n display: flex;\n flex-flow: row wrap;\n color: $color-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: $color-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 color: $color-darkgrey;\n padding: 0 0.75rem;\n white-space: nowrap;\n\n @include media-breakpoint-down('lg') {\n width: 100%;\n margin: 0.8em 0 0 0;\n }\n }\n\n &__source {\n color: $color-darkgrey;\n padding-inline-end: 0.75rem;\n }\n\n &__authors {\n font-size: 12px;\n color: $color-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: $color-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: $color-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: $color-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: $color-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: $color-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","import {\n Component,\n h,\n Host,\n Element,\n State,\n ComponentInterface,\n Watch,\n Listen,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport { AloliaSearchResultDetail } from '../../interface';\nimport { SearchIndex } from '../../interface';\nimport { raf } from '../../utils';\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\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 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 = [\n 'created > ' + Math.floor((Date.now() - 63115200000) / 1000),\n ]; // 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 {{ @if (it.totalHitsWithFilters > 0) }}\n {{ @each(it.results) => result }}\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.title | safe }}\n {{ @if (result.type === 'technical_document' || result.type === 'literature' || result.type === 'white_paper' || result.type === '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 (result.type === 'video' || result.type === '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.description | safe | trim_to(200) }}\n {{ /if }}\n </div>\n </div>\n <div class=\"sc-nano-global-search-results result__meta\">\n {{ @if (result.type) }}\n <div class=\"sc-nano-global-search-results result__type\">\n {{ @if (result.type === 'lc_lightning_talk') }}\n Presentation\n {{ #else }}\n {{ result.type }}\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.body | safe | trim_to(200) }}</a>\n {{ /if }}\n {{ @if (result.type === '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 (result.type === '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 (result.type !== 'lc_lightning_talk' && result.type !== 'video') }}\n <div class=\"sc-nano-global-search-results result__meta\">\n {{ @if (result.type) }}\n <div class=\"sc-nano-global-search-results result__type\">\n {{ @if (result.type === 'news_item') }}\n News\n {{ #elif (result.type === 'static_page' || result.type === 'flexible' || result.type === 'bespoke') }}\n Page\n {{ #elif (result.type === 'case_study') }}\n Case study\n {{ #elif (result.type === 'lc_poster') }}\n Poster\n {{ #elif (result.type === 'nanopore_live') }}\n Live stream\n {{ #elif (result.type === 'data_release') }}\n Data release\n {{ #elif (result.type === 'research_area') }}\n Research area\n {{ #elif (result.type === 'white_paper') }}\n White paper\n {{ #elif (result.type === 'technical_document') }}\n Technical document\n {{ #elif (result.type === 'info_sheet') }}\n Info sheet\n {{ #elif (result.type === 'lc_home' || result.type === 'lc_venue') }}\n London Calling\n {{ #else }}\n {{ result.type }}\n {{ /if }}\n </div>\n {{ /if }}\n {{ @if (!result.type === 'event') }}\n {{ @if (result.updated) }}\n <div class=\"sc-nano-global-search-results result__date\">{{ result.updated | date_long({year: 'numeric', month: 'short', day: undefined}) }}</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: undefined}) }}</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 {{ @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"],"version":3}

package/dist/components/nano-grid-item.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/scss.vars";
+interface NanoGridItem extends Components.NanoGridItem, HTMLElement {}
+export const NanoGridItem: {
+  prototype: NanoGridItem;
+  new (): NanoGridItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nano-grid-item.js ADDED Viewed

@@ -0,0 +1,11 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { G as GridItem, d as defineCustomElement$1 } from './grid-item.js';
+const NanoGridItem = GridItem;
+const defineCustomElement = defineCustomElement$1;
+export { NanoGridItem, defineCustomElement };
+//# sourceMappingURL=nano-grid-item.js.map

package/dist/components/nano-grid-item.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"file":"nano-grid-item.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/nano-grid.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/scss.vars";
+interface NanoGrid extends Components.NanoGrid, HTMLElement {}
+export const NanoGrid: {
+  prototype: NanoGrid;
+  new (): NanoGrid;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nano-grid.js ADDED Viewed

@@ -0,0 +1,11 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { G as Grid, d as defineCustomElement$1 } from './grid.js';
+const NanoGrid = Grid;
+const defineCustomElement = defineCustomElement$1;
+export { NanoGrid, defineCustomElement };
+//# sourceMappingURL=nano-grid.js.map

package/dist/components/nano-grid.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"file":"nano-grid.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/nano-hero.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/scss.vars";
+interface NanoHero extends Components.NanoHero, HTMLElement {}
+export const NanoHero: {
+  prototype: NanoHero;
+  new (): NanoHero;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nano-hero.js ADDED Viewed

@@ -0,0 +1,187 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { HTMLElement, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { h as hasShadowDom } from './index2.js';
+import { d as defineCustomElement$6 } from './grid.js';
+import { d as defineCustomElement$5 } from './grid-item.js';
+import { d as defineCustomElement$4 } from './img.js';
+import { d as defineCustomElement$3 } from './resize-observe.js';
+import { d as defineCustomElement$2 } from './skeleton.js';
+const heroCss = ":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{display:block;--nano-loader-base:#4a4a4a;--nano-loader-tint:#7d7d7d;--theme-color:#fff;--theme-tint-color:#90c6e7;--scrim-color:0, 0, 0;--scrim-direction:90deg;--scrim-opacity-from:0.25;--scrim-opacity-to:0.7;--padding:0;--quote-size:1.3rem;color:var(--theme-color)}:host(.is-xl){--quote-size:3rem}:host([theme=light]){--nano-loader-base:#fff;--nano-loader-tint:white;--theme-color:#4a4a4a;--scrim-color:255, 255, 255;--scrim-opacity-from:0.25;--scrim-opacity-to:1;--scrim-direction:270deg;color:var(--theme-color)}:host([theme=light]) .hero__primary-content{--color:#4a4a4a}.hero{position:relative}.hero--rtl{--scrim-direction:270deg}.hero--secondary:not(.hero--iconbox){--scrim-direction:0deg}.hero__bg-wrap{overflow:hidden}.hero__bg-slot{position:absolute;top:0;bottom:0;left:0;right:0}.hero__ctas{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;padding:32px 32px 0;margin-bottom:-64px;position:relative;z-index:1}@media (max-width: 52em){.hero__ctas{display:none}}@media (max-width: 58em){.hero__ctas{margin-bottom:-48px}}.hero__ctas ::slotted(a.button[slot=secondary-ctas]),.hero__ctas::slotted(a.button[slot=secondary-ctas]){padding:0.25rem 0.5rem !important;font-size:0.875rem !important;margin:0 0.25rem !important}.hero__img{display:block;--padding:inherit}.hero__breadcrumbs{display:none;margin:20px 14px 0;line-height:14px}.hero--breadcrumb .hero__breadcrumbs{display:block}.is-xl .hero__breadcrumbs{margin:0 50px;max-width:50%}.is-xxl .hero__breadcrumbs{margin:0 83px}.hero__breadcrumbs ::slotted(*[slot=breadcrumb]),.hero__breadcrumbs::slotted(*[slot=breadcrumb]){font-size:0.85rem;text-transform:uppercase;letter-spacing:1.5px;font-weight:600;font-stretch:125%;display:inline-block;margin-bottom:16px;position:relative;z-index:2}.hero--hasbg .hero__breadcrumbs ::slotted(*[slot=breadcrumb]),.hero--hasbg .hero__breadcrumbs::slotted(*[slot=breadcrumb]){text-shadow:1px 1px rgba(0, 0, 0, 0.15)}.hero__breadcrumbs ::slotted(a[slot=breadcrumb]),.hero__breadcrumbs::slotted(a[slot=breadcrumb]){color:var(--theme-tint-color) !important;cursor:pointer}.hero__breadcrumbs ::slotted(.slash[slot=breadcrumb]),.hero__breadcrumbs::slotted(.slash[slot=breadcrumb]){color:var(--theme-color);position:relative;margin:0 0.5rem;display:inline-block}.hero__scrim{position:absolute;left:0;right:0;bottom:0;top:0;z-index:0;background:-webkit-gradient(linear, left top, left bottom, from(var(--scrim-direction)), color-stop(0%, rgba(var(--scrim-color), var(--scrim-opacity-from))), to(rgba(var(--scrim-color), var(--scrim-opacity-to))));background:linear-gradient(var(--scrim-direction), rgba(var(--scrim-color), var(--scrim-opacity-from)) 0%, rgba(var(--scrim-color), var(--scrim-opacity-to)) 100%)}.hero--scrim .hero__scrim{background:none}.hero__content{max-width:1440px;--grid-row-gap:0;margin:0 auto;position:relative}.hero__content.is-xl{margin-top:50px;max-width:1540px}.hero__content.is-xxl{margin-top:83px;max-width:1606px}.hero__primary{margin:16px}.hero--breadcrumb .hero__primary{margin:0 16px}.hero--backbtn .hero__primary{margin-left:0}.hero__primary ::slotted(nano-icon-button[slot=back-btn]),.hero__primary::slotted(nano-icon-button[slot=back-btn]){font-size:2rem}.is-xl .hero__primary{margin:0 0 50px 50px}.is-xl .hero__primary ::slotted(nano-icon-button[slot=back-btn]),.is-xl .hero__primary::slotted(nano-icon-button[slot=back-btn]){margin-left:-3rem;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.is-xl .hero__primary ::slotted(nano-icon-button[slot=back-btn]),.is-xl .hero__primary::slotted(nano-icon-button[slot=back-btn]){margin-left:unset;margin-right:unset;-webkit-margin-start:-3rem;margin-inline-start:-3rem;-webkit-margin-end:0;margin-inline-end:0}}.is-xxl .hero__primary{margin:0 0 83px 83px}.hero__primary-content{max-width:45rem;--color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex}.hero--backbtn .hero__primary-content>div{padding:10px 0 0 0}.hero__primary-content ::slotted(h1[slot=primary-content]),.hero__primary-content::slotted(h1[slot=primary-content]){line-height:26px !important;margin-top:0 !important;margin-bottom:18px !important;font-size:2rem !important}.is-xl .hero__primary-content ::slotted(h1[slot=primary-content]),.is-xl .hero__primary-content::slotted(h1[slot=primary-content]){line-height:31px !important;margin-bottom:30px !important}.is-xl .hero__primary-content ::slotted(.button[slot=primary-content]),.is-xl .hero__primary-content::slotted(.button[slot=primary-content]){margin-top:20px !important}.hero__secondary{display:none;height:100%;padding:0 14px 20px}.hero--secondary .hero__secondary{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.is-xl .hero__secondary{padding:0 50px 50px;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.is-xxl .hero__secondary{padding:0 83px 83px}.hero__icon-box{background:rgba(0, 0, 0, 0.7);padding:24px;width:100%;margin-bottom:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;color:white}.is-xl .hero__icon-box{max-width:410px;-webkit-box-flex:0;-ms-flex:0 1 410px;flex:0 1 410px}.hero__icon-box::slotted([slot=icon-box-item] nano-icon){color:var(--theme-tint-color);--nano-icon-size:32px;--nano-icon-margin-end:20px}.hero__icon-box ::slotted([slot=icon-box-item]){--nano-color-base:var(--theme-tint-color);--nano-icon-size:32px;--nano-icon-margin-end:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:0.8125rem;margin-bottom:20px}.hero__icon-box ::slotted(.last[slot=icon-box-item]),.hero__icon-box::slotted(.last[slot=icon-box-item]){margin-bottom:0}.hero__quote-content{margin-top:auto;text-align:center;width:100%}.is-xl .hero__quote-content{max-width:500px;-webkit-box-flex:0;-ms-flex:0 1 500px;flex:0 1 500px;text-align:initial}.hero__quote::before,.hero__quote::after{content:'\"';font-size:var(--quote-size);font-weight:700;font-style:italic;line-height:0;color:#abb6b8;display:inline;position:relative}.hero__quote ::slotted([slot=quote]),.hero__quote::slotted([slot=quote]){font-size:var(--quote-size);font-weight:300;font-style:italic;display:inline}.hero__quote-author{text-align:right;text-align:end;font-size:1rem;opacity:0.8}.hero--sub .hero__content.is-xl{margin-top:40px}.hero--sub .hero__content.is-xl .hero__primary{margin:0 0 40px 50px}.hero--sub .hero__content.is-xl .hero__secondary{padding:0 50px 50px 40px}.hero--sub .hero__content.is-xl ::slotted(.button[slot=primary-content]),.hero--sub .hero__content.is-xl::slotted(.button[slot=primary-content]){margin-top:8px !important}.hero--sub .hero__content.is-xl ::slotted(h1[slot=primary-content]),.hero--sub .hero__content.is-xl::slotted(h1[slot=primary-content]){margin-bottom:18px !important}.hero--sub .hero__content.is-xxl .hero__primary{margin:0 0 40px 83px}.hero--sub .hero__content.is-xxl .hero__secondary{padding:0 83px 83px 40px}";
+let Hero = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.isLegacy = false;
+    this.gridSizes = [];
+    /** Optional list string providing media sizes with corresponding image srcs.
+     * i.e. show img-x at 300px wide. Format `srcSet="200w src/imgSmall.jpg, 500h src/imgMed.png"` */
+    this.imgSrcSet = null;
+    /** The Break Point width that the hero component will change to the large view. Defaults to the XL grid size (900px) */
+    this.largeScreenBP = 900;
+    /** Base style for the hero. Either 'light' (white bg / dark text), or 'dark' (dark bg / white text) */
+    this.theme = 'dark';
+    /** Set the content structure level of the hero. Defaults to 'top'  */
+    this.level = 'top';
+    this.handleGridChange = (e) => {
+      this.gridSizes = e.detail;
+    };
+    this.HeroContent = () => {
+      return [
+        !this.hasIconBox && this.hasCtas ? (h("div", { class: "hero__ctas" }, h("slot", { name: "secondary-ctas" }))) : (''),
+        h("div", { class: "hero__scrim" }, h("slot", { name: "scrim" })),
+        h("nano-grid", { onNanoBpChange: this.handleGridChange, class: "hero__content", xlCols: 2, xlSize: this.largeScreenBP }, h("nano-grid-item", { gridStates: "xl-col-span-2" }, h("div", { class: "hero__breadcrumbs" }, h("slot", { name: "breadcrumb" }))), h("nano-grid-item", { gridStates: this.hasSecondaryContent
+            ? 'xl-col-span-1 xl-col-start-1 xl-row-start-2'
+            : 'xl-col-span-2 xl-col-start-1 xl-row-start-2' }, h("div", { class: "hero__primary" }, h("div", { class: "hero__primary-content" }, h("slot", { name: "back-btn" }), h("div", null, h("slot", { name: "primary-content" }))))), this.hasSecondaryContent && (h("nano-grid-item", { gridStates: "xl-col-span-1 xl-col-start-2 xl-row-start-2" }, h("div", { class: "hero__secondary" }, h("slot", { name: "secondary-content" }), this.hasIconBox && (h("div", { class: "hero__icon-box" }, h("slot", { name: "icon-box" }), h("slot", { name: "icon-box-item" }))), this.hasQuote && (h("div", { class: "hero__quote-content" }, h("span", { class: "hero__quote" }, h("slot", { name: "quote" })), h("div", { class: "hero__quote-author" }, h("slot", { name: "quote-author" })))))))),
+      ];
+    };
+  }
+  breadCrumbChange() {
+    // safari doesn't support ::slotted()::after ... so this :/
+    this.breadCrumbs
+      .filter((crumb) => crumb.tagName === 'A' &&
+      !crumb.nextElementSibling.classList.contains('slash'))
+      .forEach((crumb) => {
+      crumb.insertAdjacentHTML('afterend', '<span slot="breadcrumb" class="slash">/</span>');
+    });
+  }
+  iconBoxItemChange() {
+    this.iconBoxItems.forEach((item) => item.classList.remove('last'));
+    if (this.iconBoxItems[this.iconBoxItems.length - 1] &&
+      this.iconBoxItems[this.iconBoxItems.length - 1].classList)
+      this.iconBoxItems[this.iconBoxItems.length - 1].classList.add('last');
+  }
+  slotChangeObserver() {
+    if (this.mo)
+      this.mo.disconnect();
+    const mo = (this.mo = new MutationObserver(() => this.processSlottedContent()));
+    mo.observe(this.host, { childList: true });
+  }
+  // Event handlers
+  processSlottedContent() {
+    this.hasCtas = !!this.host.querySelector('[slot="secondary-ctas"]');
+    this.iconBoxItems = Array.from(this.host.querySelectorAll('[slot="icon-box-item"]'));
+    this.hasIconBox =
+      !!this.host.querySelector('[slot="icon-box"]') ||
+        !!this.iconBoxItems.length;
+    this.hasScrim = !!this.host.querySelector('[slot="scrim"]');
+    this.breadCrumbs = Array.from(this.host.querySelectorAll('[slot="breadcrumb"]'));
+    this.hasSecondaryContent =
+      !!this.host.querySelector('[slot="icon-box"]') ||
+        !!this.host.querySelector('[slot="quote"]') ||
+        !!this.host.querySelector('[slot="icon-box-item"]') ||
+        !!this.host.querySelector('[slot="secondary-content"]');
+    this.hasBg =
+      !!this.host.querySelector('[slot="background"]') || !!this.imgSrc;
+    this.hasBackBtn = !!this.host.querySelector('[slot="back-btn"]');
+    this.hasQuote = !!this.host.querySelector('[slot="quote"]');
+  }
+  // Component lifecycle
+  connectedCallback() {
+    this.isLegacy = !hasShadowDom(this.host);
+  }
+  disconnectedCallback() {
+    if (this.mo)
+      this.mo.disconnect();
+  }
+  componentDidLoad() {
+    this.slotChangeObserver();
+  }
+  componentWillLoad() {
+    this.processSlottedContent();
+  }
+  render() {
+    const rtl = this.host.dir === 'rtl' ||
+      this.host.ownerDocument.dir === 'rtl';
+    return (h(Host, { class: {
+        [this.gridSizes.join(' ')]: true,
+      } }, h("div", { class: {
+        hero: true,
+        'hero--light': this.theme === 'light',
+        'hero--secondary': this.hasSecondaryContent,
+        'hero--iconbox': this.hasIconBox,
+        'hero--rtl': rtl,
+        'hero--scrim': this.hasScrim,
+        'hero--legacy': this.isLegacy,
+        'hero--breadcrumb': !!this.breadCrumbs.length,
+        'hero--hasbg': this.hasBg,
+        'hero--backbtn': this.hasBackBtn,
+        'hero--sub': this.level === 'sub',
+      } }, h("div", { class: "hero__bg-wrap" }, !!this.imgSrc && (h("nano-img", { class: "hero__img", lazy: false, background: true, srcSet: this.imgSrcSet, src: this.imgSrc }, h(this.HeroContent, null))), !this.imgSrc && [
+      h("div", { class: "hero__bg-slot" }, h("slot", { name: "background" })),
+      h(this.HeroContent, null),
+    ]))));
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "breadCrumbs": ["breadCrumbChange"],
+    "iconBoxItems": ["iconBoxItemChange"]
+  }; }
+  static get style() { return heroCss; }
+};
+Hero = /*@__PURE__*/ proxyCustomElement(Hero, [1, "nano-hero", {
+    "imgSrc": [1, "img-src"],
+    "imgSrcSet": [1, "img-src-set"],
+    "largeScreenBP": [2, "large-screen-b-p"],
+    "theme": [1],
+    "level": [1],
+    "gridSizes": [32],
+    "hasIconBox": [32],
+    "hasScrim": [32],
+    "hasSecondaryContent": [32],
+    "hasQuote": [32],
+    "hasBg": [32],
+    "hasBackBtn": [32],
+    "hasCtas": [32],
+    "breadCrumbs": [32],
+    "iconBoxItems": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["nano-hero", "nano-grid", "nano-grid-item", "nano-img", "nano-resize-observe", "nano-skeleton"];
+  components.forEach(tagName => { switch (tagName) {
+    case "nano-hero":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Hero);
+      }
+      break;
+    case "nano-grid":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "nano-grid-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "nano-img":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "nano-resize-observe":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "nano-skeleton":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+const NanoHero = Hero;
+const defineCustomElement = defineCustomElement$1;
+export { NanoHero, defineCustomElement };
+//# sourceMappingURL=nano-hero.js.map

package/dist/components/nano-hero.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"nano-hero.js","mappings":"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","names":[],"sources":["./src/components/hero/hero.scss?tag=nano-hero&encapsulation=shadow","./src/components/hero/hero.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n\n:host {\n /**\n * @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n * @prop --theme-color: Text color. Default depends on theme;\n * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #{$color-lightblue};\n * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n * @prop --quote-size: Font size of the quote. Defaults to 1.3em and grows to 3rem on the xl breakpoint;\n */\n\n display: block;\n\n --nano-loader-base: #{$color-black};\n --nano-loader-tint: #{lighten($color-black, 20%)};\n --theme-color: #{$color-white};\n --theme-tint-color: #{$color-lightblue};\n --scrim-color: 0, 0, 0;\n --scrim-direction: 90deg;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 0.7;\n --padding: 0;\n --quote-size: 1.3rem;\n\n color: var(--theme-color);\n}\n\n:host(.is-xl) {\n --quote-size: 3rem;\n}\n\n:host([theme='light']) {\n --nano-loader-base: #{$color-white};\n --nano-loader-tint: #{lighten($color-white, 20%)};\n --theme-color: #{$color-black};\n --scrim-color: 255, 255, 255;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 1;\n --scrim-direction: 270deg;\n\n color: var(--theme-color);\n\n .hero__primary-content {\n --color: #{$color-black};\n }\n}\n\n.hero {\n position: relative;\n\n &--rtl {\n --scrim-direction: 270deg;\n }\n\n &--secondary:not(.hero--iconbox) {\n --scrim-direction: 0deg;\n }\n\n &__bg-wrap {\n overflow: hidden;\n }\n\n &__bg-slot {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n }\n\n &__ctas {\n @media (max-width: 52em) {\n display: none;\n }\n\n @media (max-width: 58em) {\n margin-bottom: -48px;\n }\n\n display: flex;\n justify-content: flex-end;\n padding: 32px 32px 0;\n margin-bottom: -64px;\n position: relative;\n z-index: 1;\n\n ::slotted(a.button[slot='secondary-ctas']),\n &::slotted(a.button[slot='secondary-ctas']) {\n padding: 0.25rem 0.5rem !important;\n font-size: 0.875rem !important;\n margin: 0 0.25rem !important;\n }\n }\n\n &__img {\n display: block;\n\n --padding: inherit;\n }\n\n &__breadcrumbs {\n display: none;\n margin: 20px 14px 0;\n line-height: 14px;\n\n .hero--breadcrumb & {\n display: block;\n }\n\n .is-xl & {\n margin: 0 50px;\n max-width: 50%;\n }\n\n .is-xxl & {\n margin: 0 83px;\n }\n\n ::slotted(*[slot='breadcrumb']),\n &::slotted(*[slot='breadcrumb']) {\n font-size: 0.85rem;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n font-weight: 600;\n font-stretch: 125%;\n display: inline-block;\n margin-bottom: 16px;\n position: relative;\n z-index: 2;\n\n .hero--hasbg & {\n text-shadow: 1px 1px rgb(0 0 0 / 15%);\n }\n }\n\n ::slotted(a[slot='breadcrumb']),\n &::slotted(a[slot='breadcrumb']) {\n color: var(--theme-tint-color) !important;\n cursor: pointer;\n }\n\n ::slotted(.slash[slot='breadcrumb']),\n &::slotted(.slash[slot='breadcrumb']) {\n color: var(--theme-color);\n position: relative;\n margin: 0 0.5rem;\n display: inline-block;\n }\n }\n\n &__scrim {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n top: 0;\n z-index: 0;\n background:\n linear-gradient(\n var(--scrim-direction),\n rgba(var(--scrim-color), var(--scrim-opacity-from)) 0%,\n rgba(var(--scrim-color), var(--scrim-opacity-to)) 100%\n );\n\n .hero--scrim & {\n background: none;\n }\n }\n\n &__content {\n max-width: 1440px;\n\n --grid-row-gap: 0;\n\n margin: 0 auto;\n position: relative;\n\n &.is-xl {\n margin-top: 50px;\n max-width: 1540px;\n }\n\n &.is-xxl {\n margin-top: 83px;\n max-width: 1606px;\n }\n }\n\n &__primary {\n margin: 16px;\n\n .hero--breadcrumb & {\n margin: 0 16px;\n }\n\n .hero--backbtn & {\n margin-left: 0;\n }\n\n ::slotted(nano-icon-button[slot='back-btn']),\n &::slotted(nano-icon-button[slot='back-btn']) {\n font-size: 2rem;\n }\n\n .is-xl & {\n margin: 0 0 50px 50px;\n\n ::slotted(nano-icon-button[slot='back-btn']),\n &::slotted(nano-icon-button[slot='back-btn']) {\n @include margin(0, 0, 0, -3rem);\n }\n }\n\n .is-xxl & {\n margin: 0 0 83px 83px;\n }\n }\n\n &__primary-content {\n max-width: 45rem;\n\n --color: #fff;\n\n display: flex;\n\n .hero--backbtn & {\n > div {\n padding: 10px 0 0 0;\n }\n }\n\n ::slotted(h1[slot='primary-content']),\n &::slotted(h1[slot='primary-content']) {\n line-height: 26px !important;\n margin-top: 0 !important;\n margin-bottom: 18px !important;\n font-size: 2rem !important;\n }\n\n .is-xl & {\n ::slotted(h1[slot='primary-content']),\n &::slotted(h1[slot='primary-content']) {\n line-height: 31px !important;\n margin-bottom: 30px !important;\n }\n\n ::slotted(.button[slot='primary-content']),\n &::slotted(.button[slot='primary-content']) {\n margin-top: 20px !important;\n }\n }\n }\n\n &__secondary {\n display: none;\n height: 100%;\n padding: 0 14px 20px;\n\n .hero--secondary & {\n display: flex;\n align-items: center;\n }\n\n .is-xl & {\n padding: 0 50px 50px;\n justify-content: flex-end;\n }\n\n .is-xxl & {\n padding: 0 83px 83px;\n }\n }\n\n &__icon-box {\n background: rgba(0, 0, 0, 0.7);\n padding: 24px;\n width: 100%;\n margin-bottom: auto;\n display: flex;\n flex-direction: column;\n color: white;\n\n .is-xl & {\n max-width: 410px;\n flex: 0 1 410px;\n }\n\n // for silly IE\n &::slotted([slot='icon-box-item'] nano-icon) {\n color: var(--theme-tint-color);\n\n --nano-icon-size: 32px;\n --nano-icon-margin-end: 20px;\n }\n\n ::slotted([slot='icon-box-item']) {\n --nano-color-base: var(--theme-tint-color);\n --nano-icon-size: 32px;\n --nano-icon-margin-end: 20px;\n\n display: flex;\n align-items: center;\n font-size: 0.8125rem;\n margin-bottom: 20px;\n }\n\n ::slotted(.last[slot='icon-box-item']),\n &::slotted(.last[slot='icon-box-item']) {\n margin-bottom: 0;\n }\n }\n\n &__quote-content {\n margin-top: auto;\n text-align: center;\n width: 100%;\n\n .is-xl & {\n max-width: 500px;\n flex: 0 1 500px;\n text-align: initial;\n }\n }\n\n &__quote {\n &::before,\n &::after {\n content: '\"';\n font-size: var(--quote-size);\n font-weight: 700;\n font-style: italic;\n line-height: 0;\n color: #abb6b8;\n display: inline;\n position: relative;\n }\n\n ::slotted([slot='quote']),\n &::slotted([slot='quote']) {\n font-size: var(--quote-size);\n font-weight: 300;\n font-style: italic;\n display: inline;\n }\n }\n\n &__quote-author {\n text-align: right;\n text-align: end;\n font-size: 1rem;\n opacity: 0.8;\n }\n\n &--sub {\n .hero__content.is-xl {\n margin-top: 40px;\n\n .hero__primary {\n margin: 0 0 40px 50px;\n }\n\n .hero__secondary {\n padding: 0 50px 50px 40px;\n }\n\n ::slotted(.button[slot='primary-content']),\n &::slotted(.button[slot='primary-content']) {\n margin-top: 8px !important;\n }\n\n ::slotted(h1[slot='primary-content']),\n &::slotted(h1[slot='primary-content']) {\n margin-bottom: 18px !important;\n }\n }\n\n .hero__content.is-xxl {\n .hero__primary {\n margin: 0 0 40px 83px;\n }\n\n .hero__secondary {\n padding: 0 83px 83px 40px;\n }\n }\n }\n}\n","import {\n Component,\n Prop,\n h,\n ComponentInterface,\n VNode,\n State,\n Element,\n Watch,\n Host,\n} from '@stencil/core';\nimport { hasShadowDom } from '../../utils';\n\n/**\n * Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.\n * @slot primary-content - title, leading paragraph and CTA\n * @slot breadcrumb - each individual bread crumb should be assigned seperately\n * @slot secondary-content - free form secondary content.\n * @slot icon-box - free form icon box container\n * @slot icon-box-item - seperate icon box items. Designed to contain 1 icon and 1 text element.\n * @slot secondary-ctas - CTAs. each individual button should be assigned seperately\n * @slot quote - quote content\n * @slot quote-author - quote author\n * @slot scrim - optional background overlay (e.g. faded colour or gradient)\n * @slot background - custom background. Only active when img-src is empty\n * @slot back-btn - a back button.\n */\n@Component({\n tag: 'nano-hero',\n styleUrl: 'hero.scss',\n shadow: true,\n})\nexport class Hero implements ComponentInterface {\n private mo?: MutationObserver;\n private isLegacy = false;\n\n @Element() host: HTMLNanoHeroElement;\n\n @State() gridSizes: string[] = [];\n @State() hasIconBox: boolean;\n @State() hasScrim: boolean;\n @State() hasSecondaryContent: boolean;\n @State() hasQuote: boolean;\n @State() hasBg: boolean;\n @State() hasBackBtn: boolean;\n @State() hasCtas: boolean;\n @State() breadCrumbs: Element[];\n @Watch('breadCrumbs')\n breadCrumbChange() {\n // safari doesn't support ::slotted()::after ... so this :/\n this.breadCrumbs\n .filter(\n (crumb) =>\n crumb.tagName === 'A' &&\n !crumb.nextElementSibling.classList.contains('slash')\n )\n .forEach((crumb) => {\n crumb.insertAdjacentHTML(\n 'afterend',\n '<span slot=\"breadcrumb\" class=\"slash\">/</span>'\n );\n });\n }\n @State() iconBoxItems: Element[];\n @Watch('iconBoxItems')\n iconBoxItemChange() {\n this.iconBoxItems.forEach((item) => item.classList.remove('last'));\n if (\n this.iconBoxItems[this.iconBoxItems.length - 1] &&\n this.iconBoxItems[this.iconBoxItems.length - 1].classList\n )\n this.iconBoxItems[this.iconBoxItems.length - 1].classList.add('last');\n }\n\n /** src for backgronund image. For more control use the `background` slot instead. */\n @Prop() imgSrc?: string;\n\n /** Optional list string providing media sizes with corresponding image srcs.\n * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` */\n @Prop() imgSrcSet?: string = null;\n\n /** The Break Point width that the hero component will change to the large view. Defaults to the XL grid size (900px) */\n @Prop() largeScreenBP: number = 900;\n\n /** Base style for the hero. Either 'light' (white bg / dark text), or 'dark' (dark bg / white text) */\n @Prop() theme: 'dark' | 'light' = 'dark';\n\n /** Set the content structure level of the hero. Defaults to 'top' */\n @Prop() level: 'top' | 'sub' = 'top';\n\n private slotChangeObserver() {\n if (this.mo) this.mo.disconnect();\n const mo = (this.mo = new MutationObserver(() =>\n this.processSlottedContent()\n ));\n mo.observe(this.host, { childList: true });\n }\n\n // Event handlers\n\n private processSlottedContent() {\n this.hasCtas = !!this.host.querySelector('[slot=\"secondary-ctas\"]');\n this.iconBoxItems = Array.from(\n this.host.querySelectorAll('[slot=\"icon-box-item\"]')\n );\n this.hasIconBox =\n !!this.host.querySelector('[slot=\"icon-box\"]') ||\n !!this.iconBoxItems.length;\n this.hasScrim = !!this.host.querySelector('[slot=\"scrim\"]');\n this.breadCrumbs = Array.from(\n this.host.querySelectorAll('[slot=\"breadcrumb\"]')\n );\n this.hasSecondaryContent =\n !!this.host.querySelector('[slot=\"icon-box\"]') ||\n !!this.host.querySelector('[slot=\"quote\"]') ||\n !!this.host.querySelector('[slot=\"icon-box-item\"]') ||\n !!this.host.querySelector('[slot=\"secondary-content\"]');\n this.hasBg =\n !!this.host.querySelector('[slot=\"background\"]') || !!this.imgSrc;\n this.hasBackBtn = !!this.host.querySelector('[slot=\"back-btn\"]');\n this.hasQuote = !!this.host.querySelector('[slot=\"quote\"]');\n }\n\n private handleGridChange = (e: CustomEvent & { detail: string[] }) => {\n this.gridSizes = e.detail;\n };\n\n // Component lifecycle\n\n connectedCallback() {\n this.isLegacy = !hasShadowDom(this.host);\n }\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n }\n\n componentDidLoad() {\n this.slotChangeObserver();\n }\n\n componentWillLoad() {\n this.processSlottedContent();\n }\n\n private HeroContent = (): VNode[] => {\n return [\n !this.hasIconBox && this.hasCtas ? (\n <div class=\"hero__ctas\">\n <slot name=\"secondary-ctas\" />\n </div>\n ) : (\n ''\n ),\n <div class=\"hero__scrim\">\n <slot name=\"scrim\" />\n </div>,\n <nano-grid\n onNanoBpChange={this.handleGridChange}\n class=\"hero__content\"\n xlCols={2}\n xlSize={this.largeScreenBP}\n >\n <nano-grid-item gridStates=\"xl-col-span-2\">\n <div class=\"hero__breadcrumbs\">\n <slot name=\"breadcrumb\" />\n </div>\n </nano-grid-item>\n <nano-grid-item\n gridStates={\n this.hasSecondaryContent\n ? 'xl-col-span-1 xl-col-start-1 xl-row-start-2'\n : 'xl-col-span-2 xl-col-start-1 xl-row-start-2'\n }\n >\n <div class=\"hero__primary\">\n <div class=\"hero__primary-content\">\n <slot name=\"back-btn\" />\n <div>\n <slot name=\"primary-content\" />\n </div>\n </div>\n </div>\n </nano-grid-item>\n {this.hasSecondaryContent && (\n <nano-grid-item gridStates=\"xl-col-span-1 xl-col-start-2 xl-row-start-2\">\n <div class=\"hero__secondary\">\n <slot name=\"secondary-content\" />\n {this.hasIconBox && (\n <div class=\"hero__icon-box\">\n <slot name=\"icon-box\" />\n <slot name=\"icon-box-item\" />\n </div>\n )}\n {this.hasQuote && (\n <div class=\"hero__quote-content\">\n <span class=\"hero__quote\">\n <slot name=\"quote\" />\n </span>\n <div class=\"hero__quote-author\">\n <slot name=\"quote-author\" />\n </div>\n </div>\n )}\n </div>\n </nano-grid-item>\n )}\n </nano-grid>,\n ];\n };\n\n render() {\n const rtl =\n this.host.dir === 'rtl' ||\n (this.host.ownerDocument as Document).dir === 'rtl';\n\n return (\n <Host\n class={{\n [this.gridSizes.join(' ')]: true,\n }}\n >\n <div\n class={{\n hero: true,\n 'hero--light': this.theme === 'light',\n 'hero--secondary': this.hasSecondaryContent,\n 'hero--iconbox': this.hasIconBox,\n 'hero--rtl': rtl,\n 'hero--scrim': this.hasScrim,\n 'hero--legacy': this.isLegacy,\n 'hero--breadcrumb': !!this.breadCrumbs.length,\n 'hero--hasbg': this.hasBg,\n 'hero--backbtn': this.hasBackBtn,\n 'hero--sub': this.level === 'sub',\n }}\n >\n <div class=\"hero__bg-wrap\">\n {!!this.imgSrc && (\n <nano-img\n class=\"hero__img\"\n lazy={false}\n background\n srcSet={this.imgSrcSet}\n src={this.imgSrc}\n >\n <this.HeroContent />\n </nano-img>\n )}\n {!this.imgSrc && [\n <div class=\"hero__bg-slot\">\n <slot name=\"background\" />\n </div>,\n <this.HeroContent />,\n ]}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nano-icon-button.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/scss.vars";
+interface NanoIconButton extends Components.NanoIconButton, HTMLElement {}
+export const NanoIconButton: {
+  prototype: NanoIconButton;
+  new (): NanoIconButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nano-icon-button.js ADDED Viewed

@@ -0,0 +1,11 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { I as IconButton, d as defineCustomElement$1 } from './icon-button.js';
+const NanoIconButton = IconButton;
+const defineCustomElement = defineCustomElement$1;
+export { NanoIconButton, defineCustomElement };
+//# sourceMappingURL=nano-icon-button.js.map

package/dist/components/nano-icon-button.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"file":"nano-icon-button.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/nano-icon.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/scss.vars";
+interface NanoIcon extends Components.NanoIcon, HTMLElement {}
+export const NanoIcon: {
+  prototype: NanoIcon;
+  new (): NanoIcon;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nano-icon.js ADDED Viewed

@@ -0,0 +1,11 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { I as Icon, d as defineCustomElement$1 } from './icon.js';
+const NanoIcon = Icon;
+const defineCustomElement = defineCustomElement$1;
+export { NanoIcon, defineCustomElement };
+//# sourceMappingURL=nano-icon.js.map

package/dist/components/nano-icon.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"file":"nano-icon.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/nano-img.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/scss.vars";
+interface NanoImg extends Components.NanoImg, HTMLElement {}
+export const NanoImg: {
+  prototype: NanoImg;
+  new (): NanoImg;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nano-img.js ADDED Viewed

@@ -0,0 +1,11 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { I as Img, d as defineCustomElement$1 } from './img.js';
+const NanoImg = Img;
+const defineCustomElement = defineCustomElement$1;
+export { NanoImg, defineCustomElement };
+//# sourceMappingURL=nano-img.js.map

package/dist/components/nano-img.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"file":"nano-img.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/nano-input.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/scss.vars";
+interface NanoInput extends Components.NanoInput, HTMLElement {}
+export const NanoInput: {
+  prototype: NanoInput;
+  new (): NanoInput;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nano-input.js ADDED Viewed

@@ -0,0 +1,11 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { I as Input, d as defineCustomElement$1 } from './input.js';
+const NanoInput = Input;
+const defineCustomElement = defineCustomElement$1;
+export { NanoInput, defineCustomElement };
+//# sourceMappingURL=nano-input.js.map

package/dist/components/nano-input.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"file":"nano-input.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/nano-menu-drawer.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/scss.vars";
+interface NanoMenuDrawer extends Components.NanoMenuDrawer, HTMLElement {}
+export const NanoMenuDrawer: {
+  prototype: NanoMenuDrawer;
+  new (): NanoMenuDrawer;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;