npm - @nanoporetech-digital/components - Versions diffs - 5.11.0 → 5.11.2 - Mend

@nanoporetech-digital/components 5.11.0 → 5.11.2

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 (51) hide show

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

@@ -5,7 +5,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const nanoTable_entry = require('./nano-table-26845696.js');
+const nanoTable_entry = require('./nano-table-927ce96a.js');
 require('./index-14451c95.js');
 require('./math-a8123703.js');
 require('./throttle-dfa64b9e.js');

package/dist/cjs/{table.worker-a5996745.js → table.worker-e77b2693.js} RENAMED Viewed

@@ -3,7 +3,7 @@
  */
 'use strict';
-const nanoTable_entry = require('./nano-table-26845696.js');
+const nanoTable_entry = require('./nano-table-927ce96a.js');
 require('./index-14451c95.js');
 require('./math-a8123703.js');
 require('./throttle-dfa64b9e.js');
@@ -22,4 +22,4 @@ exports.workerMsgId = workerMsgId;
 exports.workerName = workerName;
 exports.workerPath = workerPath;
-//# sourceMappingURL=table.worker-a5996745.js.map
+//# sourceMappingURL=table.worker-e77b2693.js.map

package/dist/cjs/table.worker-e77b2693.js.map ADDED Viewed

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

package/dist/collection/components/global-search-results/global-search-results.js CHANGED Viewed

@@ -38,6 +38,7 @@ export class GlobalSearchResults {
     if (!this.index || !this.algoliaEle)
       return;
     this.algoliaEle.searchIndex = this.index;
+    this.algoliaEle.filters = [filterOldPosts]; // only get last 2 years
   }
   handleGlobalNavReset(e) {
     if (e.target.tagName !== 'NANO-GLOBAL-NAV')
@@ -166,7 +167,6 @@ export class GlobalSearchResults {
       this.algoliaEle.filters = [...this.algoliaEle.filters, filterOldPosts];
   }
   componentDidLoad() {
-    this.algoliaEle.filters = [filterOldPosts]; // only get last 2 years
     if (!window['ResizeObserver'])
       return;
     this.ro = new ResizeObserver((entries) => {

package/dist/collection/components/global-search-results/global-search-results.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"global-search-results.js","sourceRoot":"","sources":["../../../src/components/global-search-results/global-search-results.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Host,\n Element,\n State,\n ComponentInterface,\n Watch,\n Listen,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport type { AloliaSearchResultDetail, SearchIndex } from '../../interface';\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 /* Fired when the user clicks the 'back' button / closes the search panel\n * Calling `event.preventDefault()` will prevent it from being closed.\n /\n @Event() nanoSearchGoBack: EventEmitter;\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: { meta, client },\n } = e as { detail: AloliaSearchResultDetail };\n\n this.apiKey = client.apiKey;\n this.appId = client.appId;\n this.index = {\n name: meta.indexTitle,\n index: meta.index,\n domain: meta.domain,\n filters: meta.filters,\n };\n this.algoliaEle.query = meta.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 const 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 const 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 const resultEle = this.algoliaResultsEle;\n\n resultEle.querySelectorAll('.remove-filter').forEach((item) => {\n item.addEventListener('click', (clickEv: MouseEvent) => {\n const 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 const goBackEvent = this.nanoSearchGoBack.emit();\n if (goBackEvent.defaultPrevented) return;\n\n this.removeAllFilters();\n this.algoliaEle.query = '';\n this.algoliaEle.showResults = false;\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\n componentDidLoad() {\n this.algoliaEle.filters = [filterOldPosts]; // only get last 2 years\n\n if (!window['ResizeObserver']) return;\n\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 }\n\n render() {\n return (\n <Host\n class={{ small: this.currentWidth < 677 }}\n dir={\n (this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : undefined\n }\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) => requestAnimationFrame(() => (this.algoliaEle = ele))}\n id=\"main-search\"\n >\n <template slot=\"template\">\n {\n / html */ `<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 <!-- START NO CONTENT -->\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 <!-- END NO CONTENT -->\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 <!-- {{ @if(index == 0)}} -->\n Authors: {{ author \| trim_to(60) }}\n <!-- {{ /if }} -->\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 }\n </template>\n <div slot=\"output\"></div>\n <slot />\n </nano-algolia>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"global-search-results.js","sourceRoot":"","sources":["../../../src/components/global-search-results/global-search-results.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Host,\n Element,\n State,\n ComponentInterface,\n Watch,\n Listen,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport type { AloliaSearchResultDetail, SearchIndex } from '../../interface';\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 /* Fired when the user clicks the 'back' button / closes the search panel\n * Calling `event.preventDefault()` will prevent it from being closed.\n /\n @Event() nanoSearchGoBack: EventEmitter;\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 this.algoliaEle.filters = [filterOldPosts]; // only get last 2 years\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: { meta, client },\n } = e as { detail: AloliaSearchResultDetail };\n\n this.apiKey = client.apiKey;\n this.appId = client.appId;\n this.index = {\n name: meta.indexTitle,\n index: meta.index,\n domain: meta.domain,\n filters: meta.filters,\n };\n this.algoliaEle.query = meta.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 const 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 const 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 const resultEle = this.algoliaResultsEle;\n\n resultEle.querySelectorAll('.remove-filter').forEach((item) => {\n item.addEventListener('click', (clickEv: MouseEvent) => {\n const 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 const goBackEvent = this.nanoSearchGoBack.emit();\n if (goBackEvent.defaultPrevented) return;\n\n this.removeAllFilters();\n this.algoliaEle.query = '';\n this.algoliaEle.showResults = false;\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\n componentDidLoad() {\n if (!window['ResizeObserver']) return;\n\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 }\n\n render() {\n return (\n <Host\n class={{ small: this.currentWidth < 677 }}\n dir={\n (this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : undefined\n }\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) => requestAnimationFrame(() => (this.algoliaEle = ele))}\n id=\"main-search\"\n >\n <template slot=\"template\">\n {\n / html */ `<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 <!-- START NO CONTENT -->\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 <!-- END NO CONTENT -->\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 <!-- {{ @if(index == 0)}} -->\n Authors: {{ author \| trim_to(60) }}\n <!-- {{ /if }} -->\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 }\n </template>\n <div slot=\"output\"></div>\n <slot />\n </nano-algolia>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/icon/icon.js CHANGED Viewed

@@ -14,6 +14,7 @@ export class Icon {
     this.isVisible = false;
     this.isLoading = true;
     this.color = undefined;
+    this.role = 'presentation';
     this.ariaLabel = undefined;
     this.flipRtl = undefined;
     this.name = undefined;
@@ -23,7 +24,7 @@ export class Icon {
     this.lazy = true;
   }
   setAriaLabel() {
-    if (!this.ariaLabel && this.el.role && this.el.role !== 'presentation') {
+    if (!this.ariaLabel && (!this.role || this.role !== 'presentation')) {
       const label = getName(this.name, this.icon);
       // user did not provide a label
       // come up with the label based on the icon name
@@ -97,7 +98,7 @@ export class Icon {
           this.name.indexOf('chevron') > -1) &&
         this.el.ownerDocument.dir === 'rtl' &&
         this.flipRtl !== false);
-    return (h(Host, { role: this.el.role || 'presentation', class: Object.assign(Object.assign({}, createColorClasses(this.color)), { loading: this.isLoading, [`icon-${this.size}`]: !!this.size, 'flip-rtl': !!flipRtl }) }, Build.isBrowser && this.svgContent ? (h("div", { class: "icon-inner", innerHTML: this.svgContent })) : (h("div", { class: "icon-inner" }))));
+    return (h(Host, { class: Object.assign(Object.assign({}, createColorClasses(this.color)), { loading: this.isLoading, [`icon-${this.size}`]: !!this.size, 'flip-rtl': !!flipRtl }) }, Build.isBrowser && this.svgContent ? (h("div", { class: "icon-inner", innerHTML: this.svgContent })) : (h("div", { class: "icon-inner" }))));
   }
   static get is() { return "nano-icon"; }
   static get encapsulation() { return "shadow"; }
@@ -137,6 +138,26 @@ export class Icon {
         "attribute": "color",
         "reflect": false
       },
+      "role": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the role to use for accessibility. Defaults to 'presentation' (invisible to screen-readers)"
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "role",
+        "reflect": true,
+        "defaultValue": "'presentation'"
+      },
       "ariaLabel": {
         "type": "string",
         "mutable": true,
@@ -283,6 +304,9 @@ export class Icon {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
+        "propName": "role",
+        "methodName": "setAriaLabel"
+      }, {
         "propName": "name",
         "methodName": "loadIcon"
       }, {

package/dist/collection/components/icon/icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,EACL,CAAC,GACF,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAG1C;;GAEG;AAMH,MAAM,OAAO,IAAI;;;qBAMM,KAAK;qBACL,IAAI~~;;;;;;;;gBA6CV~~,IAAI;;~~EAEX~~,YAAY;IAClB,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,~~IAAI~~,CAAC,~~EAAE~~,CAAC,IAAI,IAAI,IAAI,CAAC,~~EAAE,CAAC,~~IAAI,KAAK,cAAc,EAAE;~~MACtE~~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~~IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,IAAI,cAAc,EACpC,~~KAAK,kCACA,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,KACjC,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,EAClC,UAAU,EAAE,CAAC,CAAC,OAAO,OAGtB,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CACpC,WAAK,KAAK,EAAC,YAAY,EAAC,SAAS,EAAE,IAAI,CAAC,UAAU,GAAQ,CAC3D,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,YAAY,GAAO,CAC/B,CACI,CACR,CAAC;EACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import {\n Build,\n Component,\n Element,\n Host,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport { createColorClasses } from '../../utils/theme';\nimport { getSvgContent, iconContent } from './request';\nimport { getName, getUrl } from './utils';\nimport type { Color } from '../../interface';\n\n/*\n An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path). Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.\n /\n@Component({\n tag: 'nano-icon',\n styleUrl: 'icon.scss',\n shadow: true,\n})\nexport class Icon {\n private io?: IntersectionObserver;\n\n @Element() el!: HTMLNanoIconElement;\n\n @State() svgContent?: string;\n @State() isVisible = false;\n @State() isLoading = true;\n\n /\n Color to use from your application's color palette.\n * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n /\n @Prop() color?: Color;\n\n /\n Specifies the label to use for accessibility. Defaults to the icon name.\n /\n @Prop({ mutable: true, reflect: true }) ariaLabel: string;\n\n /\n Specifies whether the icon should horizontally flip when `dir` is `\"rtl\"`.\n /\n @Prop() flipRtl?: boolean;\n\n /\n Specifies which icon to use from the built-in set of icons.\n /\n @Prop() name?: string;\n\n /\n Specifies the exact `src` of an SVG file to use.\n /\n @Prop() src?: string;\n\n /\n A combination of both `name` and `src`. If a `src` url is detected\n * it will set the `src` property. Otherwise it assumes it's a built-in named\n * SVG and set the `name` property.\n /\n @Prop() icon?: any;\n\n /\n The size of the icon.\n * Available options are: `\"small\"` and `\"large\"`.\n /\n @Prop() size?: 'small' \| 'large';\n\n /\n If enabled, nano-icon will be loaded lazily when it's visible in the viewport.\n * Default, `true`.\n */\n @Prop() lazy = true;\n\n private setAriaLabel() {\n if (!this.ariaLabel && this.~~el.~~role && this.~~el.~~role !== 'presentation') {\n const label = getName(this.name, this.icon);\n // user did not provide a label\n // come up with the label based on the icon name\n if (label) {\n this.ariaLabel = label.split('/').slice(-1)[0].replace(/\\-/g, ' ');\n }\n }\n }\n\n connectedCallback() {\n // purposely do not return the promise here because loading\n // the svg file should not hold up loading the app\n // only load the svg if it's visible\n this.waitUntilVisible(this.el, '50px', () => {\n this.isVisible = true;\n this.loadIcon();\n });\n }\n\n disconnectedCallback() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n componentWillLoad() {\n this.setAriaLabel();\n }\n\n private waitUntilVisible(\n el: HTMLElement,\n rootMargin: string,\n cb: () => void\n ) {\n if (\n Build.isBrowser &&\n this.lazy &&\n typeof window !== 'undefined' &&\n (window as any).IntersectionObserver\n ) {\n const io = (this.io = new (window as any).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n if (data[0].isIntersecting \|\| (data[1] && data[1].isIntersecting)) {\n io.disconnect();\n this.io = undefined;\n cb();\n }\n },\n { rootMargin }\n ));\n\n io.observe(el);\n } else {\n // browser doesn't support IntersectionObserver\n // so just fallback to always show it\n cb();\n }\n }\n\n @Watch('name')\n @Watch('src')\n @Watch('icon')\n loadIcon() {\n if (Build.isBrowser && this.isVisible) {\n const url = getUrl(this);\n if (url) {\n if (iconContent.has(url)) {\n // sync if it's already loaded\n this.svgContent = iconContent.get(url);\n requestAnimationFrame(() => (this.isLoading = false));\n } else {\n // async if it hasn't been loaded\n getSvgContent(url).then(() => {\n this.svgContent = iconContent.get(url);\n requestAnimationFrame(() => (this.isLoading = false));\n });\n }\n }\n }\n this.setAriaLabel();\n }\n\n render() {\n const flipRtl =\n this.flipRtl \|\|\n (this.name &&\n (this.name.indexOf('arrow') > -1 \|\|\n this.name.indexOf('chevron') > -1) &&\n (this.el.ownerDocument as Document).dir === 'rtl' &&\n this.flipRtl !== false);\n\n return (\n <Host\n ~~role={this.el.role \|\| 'presentation'}\n~~ class={{\n ...createColorClasses(this.color),\n loading: this.isLoading,\n [`icon-${this.size}`]: !!this.size,\n 'flip-rtl': !!flipRtl,\n }}\n >\n {Build.isBrowser && this.svgContent ? (\n <div class=\"icon-inner\" innerHTML={this.svgContent}></div>\n ) : (\n <div class=\"icon-inner\"></div>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Build,\n Component,\n Element,\n Host,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport { createColorClasses } from '../../utils/theme';\nimport { getSvgContent, iconContent } from './request';\nimport { getName, getUrl } from './utils';\nimport type { Color } from '../../interface';\n\n/*\n An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path). Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.\n /\n@Component({\n tag: 'nano-icon',\n styleUrl: 'icon.scss',\n shadow: true,\n})\nexport class Icon {\n private io?: IntersectionObserver;\n\n @Element() el!: HTMLNanoIconElement;\n\n @State() svgContent?: string;\n @State() isVisible = false;\n @State() isLoading = true;\n\n /\n Color to use from your application's color palette.\n * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n /\n @Prop() color?: Color;\n\n /\n Specifies the role to use for accessibility. Defaults to 'presentation' (invisible to screen-readers)\n /\n @Prop({ mutable: true, reflect: true }) role: string = 'presentation';\n\n /\n Specifies the label to use for accessibility. Defaults to the icon name.\n /\n @Prop({ mutable: true, reflect: true }) ariaLabel: string;\n\n /\n Specifies whether the icon should horizontally flip when `dir` is `\"rtl\"`.\n /\n @Prop() flipRtl?: boolean;\n\n /\n Specifies which icon to use from the built-in set of icons.\n /\n @Prop() name?: string;\n\n /\n Specifies the exact `src` of an SVG file to use.\n /\n @Prop() src?: string;\n\n /\n A combination of both `name` and `src`. If a `src` url is detected\n * it will set the `src` property. Otherwise it assumes it's a built-in named\n * SVG and set the `name` property.\n /\n @Prop() icon?: any;\n\n /\n The size of the icon.\n * Available options are: `\"small\"` and `\"large\"`.\n /\n @Prop() size?: 'small' \| 'large';\n\n /\n If enabled, nano-icon will be loaded lazily when it's visible in the viewport.\n * Default, `true`.\n */\n @Prop() lazy = true;\n\n @Watch('role')\n private setAriaLabel() {\n if (!this.ariaLabel && (!this.role \|\| this.role !== 'presentation')) {\n const label = getName(this.name, this.icon);\n // user did not provide a label\n // come up with the label based on the icon name\n if (label) {\n this.ariaLabel = label.split('/').slice(-1)[0].replace(/\\-/g, ' ');\n }\n }\n }\n\n connectedCallback() {\n // purposely do not return the promise here because loading\n // the svg file should not hold up loading the app\n // only load the svg if it's visible\n this.waitUntilVisible(this.el, '50px', () => {\n this.isVisible = true;\n this.loadIcon();\n });\n }\n\n disconnectedCallback() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n componentWillLoad() {\n this.setAriaLabel();\n }\n\n private waitUntilVisible(\n el: HTMLElement,\n rootMargin: string,\n cb: () => void\n ) {\n if (\n Build.isBrowser &&\n this.lazy &&\n typeof window !== 'undefined' &&\n (window as any).IntersectionObserver\n ) {\n const io = (this.io = new (window as any).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n if (data[0].isIntersecting \|\| (data[1] && data[1].isIntersecting)) {\n io.disconnect();\n this.io = undefined;\n cb();\n }\n },\n { rootMargin }\n ));\n\n io.observe(el);\n } else {\n // browser doesn't support IntersectionObserver\n // so just fallback to always show it\n cb();\n }\n }\n\n @Watch('name')\n @Watch('src')\n @Watch('icon')\n loadIcon() {\n if (Build.isBrowser && this.isVisible) {\n const url = getUrl(this);\n if (url) {\n if (iconContent.has(url)) {\n // sync if it's already loaded\n this.svgContent = iconContent.get(url);\n requestAnimationFrame(() => (this.isLoading = false));\n } else {\n // async if it hasn't been loaded\n getSvgContent(url).then(() => {\n this.svgContent = iconContent.get(url);\n requestAnimationFrame(() => (this.isLoading = false));\n });\n }\n }\n }\n this.setAriaLabel();\n }\n\n render() {\n const flipRtl =\n this.flipRtl \|\|\n (this.name &&\n (this.name.indexOf('arrow') > -1 \|\|\n this.name.indexOf('chevron') > -1) &&\n (this.el.ownerDocument as Document).dir === 'rtl' &&\n this.flipRtl !== false);\n\n return (\n <Host\n class={{\n ...createColorClasses(this.color),\n loading: this.isLoading,\n [`icon-${this.size}`]: !!this.size,\n 'flip-rtl': !!flipRtl,\n }}\n >\n {Build.isBrowser && this.svgContent ? (\n <div class=\"icon-inner\" innerHTML={this.svgContent}></div>\n ) : (\n <div class=\"icon-inner\"></div>\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/components/icon.js CHANGED Viewed

@@ -145,6 +145,7 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.isVisible = false;
     this.isLoading = true;
     this.color = undefined;
+    this.role = 'presentation';
     this.ariaLabel = undefined;
     this.flipRtl = undefined;
     this.name = undefined;
@@ -154,7 +155,7 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.lazy = true;
   }
   setAriaLabel() {
-    if (!this.ariaLabel && this.el.role && this.el.role !== 'presentation') {
+    if (!this.ariaLabel && (!this.role || this.role !== 'presentation')) {
       const label = getName(this.name, this.icon);
       // user did not provide a label
       // come up with the label based on the icon name
@@ -228,10 +229,11 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           this.name.indexOf('chevron') > -1) &&
         this.el.ownerDocument.dir === 'rtl' &&
         this.flipRtl !== false);
-    return (h(Host, { role: this.el.role || 'presentation', class: Object.assign(Object.assign({}, createColorClasses(this.color)), { loading: this.isLoading, [`icon-${this.size}`]: !!this.size, 'flip-rtl': !!flipRtl }) }, Build.isBrowser && this.svgContent ? (h("div", { class: "icon-inner", innerHTML: this.svgContent })) : (h("div", { class: "icon-inner" }))));
+    return (h(Host, { class: Object.assign(Object.assign({}, createColorClasses(this.color)), { loading: this.isLoading, [`icon-${this.size}`]: !!this.size, 'flip-rtl': !!flipRtl }) }, Build.isBrowser && this.svgContent ? (h("div", { class: "icon-inner", innerHTML: this.svgContent })) : (h("div", { class: "icon-inner" }))));
   }
   get el() { return this; }
   static get watchers() { return {
+    "role": ["setAriaLabel"],
     "name": ["loadIcon"],
     "src": ["loadIcon"],
     "icon": ["loadIcon"]
@@ -239,6 +241,7 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   static get style() { return iconCss; }
 }, [1, "nano-icon", {
     "color": [1],
+    "role": [1537],
     "ariaLabel": [1537, "aria-label"],
     "flipRtl": [4, "flip-rtl"],
     "name": [1],

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

	@@ -1 +1 @@
1	- {"file":"icon.js","mappings":"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","names":[],"sources":["./src/components/icon/utils.ts","./src/components/icon/validate.ts","./src/components/icon/request.ts","./src/components/icon/icon.scss?tag=nano-icon&encapsulation=shadow","./src/components/icon/icon.tsx"],"sourcesContent":["import { getAssetPath } from '@stencil/core';\nimport { Icon } from './icon';\n\nlet CACHED_MAP: Map<string, string>;\n\nexport const getIconMap = (): Map<string, string> => {\n if (!CACHED_MAP) {\n const win = window as any;\n win.Nanoicons = win.Nanoicons \|\| {};\n CACHED_MAP = win.Nanoicons.map = win.Nanoicons.map \|\| new Map();\n }\n return CACHED_MAP;\n};\n\nexport const addIcons = (icons: { [name: string]: string }) => {\n const map = getIconMap();\n Object.keys(icons).forEach((name) => map.set(name, icons[name]));\n};\n\nexport const getUrl = (i: Icon) => {\n let url = getSrc(i.src);\n if (url) {\n return url;\n }\n\n url = getName(i.name, i.icon);\n if (url) {\n return getNamedUrl(url);\n }\n\n if (i.icon) {\n url = getSrc(i.icon);\n if (url) {\n return url;\n }\n }\n return null;\n};\n\nconst getNamedUrl = (iconName: string) => {\n const url = getIconMap().get(iconName);\n if (url) {\n return url;\n }\n return getAssetPath(`../nano-assets/fontawesome-pro/svgs/${iconName}.svg`);\n};\n\nexport const getName = (\n iconName: string \| undefined,\n icon: string \| undefined\n) => {\n if (!iconName && icon && !isSrc(icon)) {\n iconName = icon;\n }\n if (isStr(iconName)) {\n iconName = toLower(iconName);\n }\n\n if (!isStr(iconName) \|\| iconName.trim() === '') {\n return null;\n }\n\n // only allow alpha characters and dash\n const invalidChars = iconName.replace(/[a-z]\|-\|\\/\|\\d/gi, '');\n if (invalidChars !== '') {\n console.warn('invalid characters in icon name ' + iconName);\n return null;\n }\n return iconName;\n};\n\nexport const getSrc = (src: string \| undefined) => {\n if (isStr(src)) {\n src = src.trim();\n if (isSrc(src)) {\n return src;\n }\n }\n return null;\n};\n\nexport const isSrc = (str: string) => str.length > 0 && /(\\/\|\\.)/.test(str);\nexport const isStr = (val: any): val is string => typeof val === 'string';\nexport const toLower = (val: string) => val.toLowerCase();\n","import { isStr } from './utils';\n\nexport const validateContent = (svgContent: string \| null) => {\n if (svgContent) {\n const div = document.createElement('div');\n div.innerHTML = svgContent;\n\n // setup this way to ensure it works on our buddy IE\n for (let i = div.childNodes.length - 1; i >= 0; i--) {\n if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {\n div.removeChild(div.childNodes[i]);\n }\n }\n\n // must only have 1 root element\n const svgElm = div.firstElementChild;\n if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {\n const svgClass = svgElm.getAttribute('class') \|\| '';\n svgElm.setAttribute(\n 'class',\n (svgClass + ' sc-nano-icon s-nano-icon svg').trim()\n );\n\n // root element must be an svg\n // lets double check we've got valid elements\n // do not allow scripts\n if (isValid(svgElm as any)) {\n return div.innerHTML;\n }\n }\n }\n return '';\n};\n\nexport const isValid = (elm: HTMLElement) => {\n if (elm.nodeType === 1) {\n if (elm.nodeName.toLowerCase() === 'script') {\n return false;\n }\n\n for (let i = 0; i < elm.attributes.length; i++) {\n const val = elm.attributes[i].value;\n if (isStr(val) && val.toLowerCase().indexOf('on') === 0) {\n return false;\n }\n }\n\n for (let i = 0; i < elm.childNodes.length; i++) {\n if (!isValid(elm.childNodes[i] as any)) {\n return false;\n }\n }\n }\n return true;\n};\n","import { validateContent } from './validate';\nexport const iconContent = new Map<string, string>();\nconst requests = new Map<string, Promise<any>>();\n\nexport const getSvgContent = (url: string) => {\n // see if we already have a request for this url\n let req = requests.get(url);\n if (!req) {\n // we don't already have a request\n req = fetch(url).then((rsp) => {\n if (rsp.ok) {\n return rsp.text().then((svgContent) => {\n iconContent.set(url, validateContent(svgContent));\n });\n }\n iconContent.set(url, '');\n });\n\n // cache for the same requests\n requests.set(url, req);\n }\n return req;\n};\n","@import '../../global/style/utilities/globals';\n\n:host {\n /*\n @prop --color: defaults to current context color\n * @prop --primary-color: used for duotone icons to set the primary color\n * @prop --secondary-color: used for duotone icons to set the secondary color\n * @prop --primary-opacity: used for duotone icons to set the primary opacity\n * @prop --secondary-opacity: used for duotone icons to set the secondary opacity\n * @prop --stroke-width: 32px default stroke width\n /\n\n --color: var(--nano-color-base, currentcolor);\n --primary-color: var(--nano-color-tint, currentcolor);\n --secondary-color: var(--nano-color-shade, currentcolor);\n --stroke-width: 32px;\n --primary-opacity: 0.8;\n --secondary-opacity: 1;\n --icon-size: var(--nano-icon-size, 1em);\n --icon-margin-top: var(--nano-icon-margin-top, 0);\n --icon-margin-end: var(--nano-icon-margin-end, 0);\n --icon-margin-bottom: var(--nano-icon-margin-bottom, 0);\n --icon-margin-start: var(--nano-icon-margin-start, 0);\n\n display: inline-block;\n inline-size: var(--icon-size);\n block-size: var(--icon-size);\n min-inline-size: var(--icon-size);\n min-block-size: var(--icon-size);\n contain: strict;\n fill: currentcolor;\n box-sizing: content-box !important;\n transition: opacity 0.3s ease;\n color: var(--color);\n margin-inline: var(--icon-margin-start) var(--icon-margin-end);\n margin-block: var(--icon-margin-top) var(--icon-margin-bottom);\n}\n\n:host .nanoicon {\n stroke: currentcolor;\n}\n\n.nanoicon-fill-none {\n fill: none;\n}\n\n.nanoicon-stroke-width {\n stroke-width: 32px;\n stroke-width: var(--stroke-width);\n}\n\n.icon-inner,\n.nanoicon,\nsvg,\n.svg {\n display: block;\n block-size: 100%;\n inline-size: 100%;\n overflow: visible;\n}\n\n:host(.loading) {\n opacity: 0;\n}\n\n.fa-primary {\n color: var(--primary-color);\n opacity: var(--primary-opacity, 1);\n}\n\n.fa-secondary {\n color: var(--secondary-color);\n opacity: var(--secondary-opacity) !important;\n}\n\n/ Icon RTL\n * -----------------------------------------------------------\n /\n:host(.flip-rtl) .icon-inner {\n transform: scaleX(-1);\n}\n\n/ Icon Sizes\n * -----------------------------------------------------------\n /\n:host(.icon-small) {\n font-size: 18px !important;\n}\n\n:host(.icon-large) {\n font-size: 32px !important;\n}\n","import {\n Build,\n Component,\n Element,\n Host,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport { createColorClasses } from '../../utils/theme';\nimport { getSvgContent, iconContent } from './request';\nimport { getName, getUrl } from './utils';\nimport type { Color } from '../../interface';\n\n/\n An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path). Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.\n /\n@Component({\n tag: 'nano-icon',\n styleUrl: 'icon.scss',\n shadow: true,\n})\nexport class Icon {\n private io?: IntersectionObserver;\n\n @Element() el!: HTMLNanoIconElement;\n\n @State() svgContent?: string;\n @State() isVisible = false;\n @State() isLoading = true;\n\n /\n Color to use from your application's color palette.\n * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n /\n @Prop() color?: Color;\n\n /\n Specifies the label to use for accessibility. Defaults to the icon name.\n /\n @Prop({ mutable: true, reflect: true }) ariaLabel: string;\n\n /\n Specifies whether the icon should horizontally flip when `dir` is `\"rtl\"`.\n /\n @Prop() flipRtl?: boolean;\n\n /\n Specifies which icon to use from the built-in set of icons.\n /\n @Prop() name?: string;\n\n /\n Specifies the exact `src` of an SVG file to use.\n /\n @Prop() src?: string;\n\n /\n A combination of both `name` and `src`. If a `src` url is detected\n * it will set the `src` property. Otherwise it assumes it's a built-in named\n * SVG and set the `name` property.\n /\n @Prop() icon?: any;\n\n /\n The size of the icon.\n * Available options are: `\"small\"` and `\"large\"`.\n /\n @Prop() size?: 'small' \| 'large';\n\n /\n If enabled, nano-icon will be loaded lazily when it's visible in the viewport.\n * Default, `true`.\n */\n @Prop() lazy = true;\n\n private setAriaLabel() {\n if (!this.ariaLabel && this.el.role && this.el.role !== 'presentation') {\n const label = getName(this.name, this.icon);\n // user did not provide a label\n // come up with the label based on the icon name\n if (label) {\n this.ariaLabel = label.split('/').slice(-1)[0].replace(/\\-/g, ' ');\n }\n }\n }\n\n connectedCallback() {\n // purposely do not return the promise here because loading\n // the svg file should not hold up loading the app\n // only load the svg if it's visible\n this.waitUntilVisible(this.el, '50px', () => {\n this.isVisible = true;\n this.loadIcon();\n });\n }\n\n disconnectedCallback() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n componentWillLoad() {\n this.setAriaLabel();\n }\n\n private waitUntilVisible(\n el: HTMLElement,\n rootMargin: string,\n cb: () => void\n ) {\n if (\n Build.isBrowser &&\n this.lazy &&\n typeof window !== 'undefined' &&\n (window as any).IntersectionObserver\n ) {\n const io = (this.io = new (window as any).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n if (data[0].isIntersecting \|\| (data[1] && data[1].isIntersecting)) {\n io.disconnect();\n this.io = undefined;\n cb();\n }\n },\n { rootMargin }\n ));\n\n io.observe(el);\n } else {\n // browser doesn't support IntersectionObserver\n // so just fallback to always show it\n cb();\n }\n }\n\n @Watch('name')\n @Watch('src')\n @Watch('icon')\n loadIcon() {\n if (Build.isBrowser && this.isVisible) {\n const url = getUrl(this);\n if (url) {\n if (iconContent.has(url)) {\n // sync if it's already loaded\n this.svgContent = iconContent.get(url);\n requestAnimationFrame(() => (this.isLoading = false));\n } else {\n // async if it hasn't been loaded\n getSvgContent(url).then(() => {\n this.svgContent = iconContent.get(url);\n requestAnimationFrame(() => (this.isLoading = false));\n });\n }\n }\n }\n this.setAriaLabel();\n }\n\n render() {\n const flipRtl =\n this.flipRtl \|\|\n (this.name &&\n (this.name.indexOf('arrow') > -1 \|\|\n this.name.indexOf('chevron') > -1) &&\n (this.el.ownerDocument as Document).dir === 'rtl' &&\n this.flipRtl !== false);\n\n return (\n <Host\n role={this.el.role \|\| 'presentation'}\n class={{\n ...createColorClasses(this.color),\n loading: this.isLoading,\n [`icon-${this.size}`]: !!this.size,\n 'flip-rtl': !!flipRtl,\n }}\n >\n {Build.isBrowser && this.svgContent ? (\n <div class=\"icon-inner\" innerHTML={this.svgContent}></div>\n ) : (\n <div class=\"icon-inner\"></div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"icon.js","mappings":"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","names":[],"sources":["./src/components/icon/utils.ts","./src/components/icon/validate.ts","./src/components/icon/request.ts","./src/components/icon/icon.scss?tag=nano-icon&encapsulation=shadow","./src/components/icon/icon.tsx"],"sourcesContent":["import { getAssetPath } from '@stencil/core';\nimport { Icon } from './icon';\n\nlet CACHED_MAP: Map<string, string>;\n\nexport const getIconMap = (): Map<string, string> => {\n if (!CACHED_MAP) {\n const win = window as any;\n win.Nanoicons = win.Nanoicons \|\| {};\n CACHED_MAP = win.Nanoicons.map = win.Nanoicons.map \|\| new Map();\n }\n return CACHED_MAP;\n};\n\nexport const addIcons = (icons: { [name: string]: string }) => {\n const map = getIconMap();\n Object.keys(icons).forEach((name) => map.set(name, icons[name]));\n};\n\nexport const getUrl = (i: Icon) => {\n let url = getSrc(i.src);\n if (url) {\n return url;\n }\n\n url = getName(i.name, i.icon);\n if (url) {\n return getNamedUrl(url);\n }\n\n if (i.icon) {\n url = getSrc(i.icon);\n if (url) {\n return url;\n }\n }\n return null;\n};\n\nconst getNamedUrl = (iconName: string) => {\n const url = getIconMap().get(iconName);\n if (url) {\n return url;\n }\n return getAssetPath(`../nano-assets/fontawesome-pro/svgs/${iconName}.svg`);\n};\n\nexport const getName = (\n iconName: string \| undefined,\n icon: string \| undefined\n) => {\n if (!iconName && icon && !isSrc(icon)) {\n iconName = icon;\n }\n if (isStr(iconName)) {\n iconName = toLower(iconName);\n }\n\n if (!isStr(iconName) \|\| iconName.trim() === '') {\n return null;\n }\n\n // only allow alpha characters and dash\n const invalidChars = iconName.replace(/[a-z]\|-\|\\/\|\\d/gi, '');\n if (invalidChars !== '') {\n console.warn('invalid characters in icon name ' + iconName);\n return null;\n }\n return iconName;\n};\n\nexport const getSrc = (src: string \| undefined) => {\n if (isStr(src)) {\n src = src.trim();\n if (isSrc(src)) {\n return src;\n }\n }\n return null;\n};\n\nexport const isSrc = (str: string) => str.length > 0 && /(\\/\|\\.)/.test(str);\nexport const isStr = (val: any): val is string => typeof val === 'string';\nexport const toLower = (val: string) => val.toLowerCase();\n","import { isStr } from './utils';\n\nexport const validateContent = (svgContent: string \| null) => {\n if (svgContent) {\n const div = document.createElement('div');\n div.innerHTML = svgContent;\n\n // setup this way to ensure it works on our buddy IE\n for (let i = div.childNodes.length - 1; i >= 0; i--) {\n if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {\n div.removeChild(div.childNodes[i]);\n }\n }\n\n // must only have 1 root element\n const svgElm = div.firstElementChild;\n if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {\n const svgClass = svgElm.getAttribute('class') \|\| '';\n svgElm.setAttribute(\n 'class',\n (svgClass + ' sc-nano-icon s-nano-icon svg').trim()\n );\n\n // root element must be an svg\n // lets double check we've got valid elements\n // do not allow scripts\n if (isValid(svgElm as any)) {\n return div.innerHTML;\n }\n }\n }\n return '';\n};\n\nexport const isValid = (elm: HTMLElement) => {\n if (elm.nodeType === 1) {\n if (elm.nodeName.toLowerCase() === 'script') {\n return false;\n }\n\n for (let i = 0; i < elm.attributes.length; i++) {\n const val = elm.attributes[i].value;\n if (isStr(val) && val.toLowerCase().indexOf('on') === 0) {\n return false;\n }\n }\n\n for (let i = 0; i < elm.childNodes.length; i++) {\n if (!isValid(elm.childNodes[i] as any)) {\n return false;\n }\n }\n }\n return true;\n};\n","import { validateContent } from './validate';\nexport const iconContent = new Map<string, string>();\nconst requests = new Map<string, Promise<any>>();\n\nexport const getSvgContent = (url: string) => {\n // see if we already have a request for this url\n let req = requests.get(url);\n if (!req) {\n // we don't already have a request\n req = fetch(url).then((rsp) => {\n if (rsp.ok) {\n return rsp.text().then((svgContent) => {\n iconContent.set(url, validateContent(svgContent));\n });\n }\n iconContent.set(url, '');\n });\n\n // cache for the same requests\n requests.set(url, req);\n }\n return req;\n};\n","@import '../../global/style/utilities/globals';\n\n:host {\n /*\n @prop --color: defaults to current context color\n * @prop --primary-color: used for duotone icons to set the primary color\n * @prop --secondary-color: used for duotone icons to set the secondary color\n * @prop --primary-opacity: used for duotone icons to set the primary opacity\n * @prop --secondary-opacity: used for duotone icons to set the secondary opacity\n * @prop --stroke-width: 32px default stroke width\n /\n\n --color: var(--nano-color-base, currentcolor);\n --primary-color: var(--nano-color-tint, currentcolor);\n --secondary-color: var(--nano-color-shade, currentcolor);\n --stroke-width: 32px;\n --primary-opacity: 0.8;\n --secondary-opacity: 1;\n --icon-size: var(--nano-icon-size, 1em);\n --icon-margin-top: var(--nano-icon-margin-top, 0);\n --icon-margin-end: var(--nano-icon-margin-end, 0);\n --icon-margin-bottom: var(--nano-icon-margin-bottom, 0);\n --icon-margin-start: var(--nano-icon-margin-start, 0);\n\n display: inline-block;\n inline-size: var(--icon-size);\n block-size: var(--icon-size);\n min-inline-size: var(--icon-size);\n min-block-size: var(--icon-size);\n contain: strict;\n fill: currentcolor;\n box-sizing: content-box !important;\n transition: opacity 0.3s ease;\n color: var(--color);\n margin-inline: var(--icon-margin-start) var(--icon-margin-end);\n margin-block: var(--icon-margin-top) var(--icon-margin-bottom);\n}\n\n:host .nanoicon {\n stroke: currentcolor;\n}\n\n.nanoicon-fill-none {\n fill: none;\n}\n\n.nanoicon-stroke-width {\n stroke-width: 32px;\n stroke-width: var(--stroke-width);\n}\n\n.icon-inner,\n.nanoicon,\nsvg,\n.svg {\n display: block;\n block-size: 100%;\n inline-size: 100%;\n overflow: visible;\n}\n\n:host(.loading) {\n opacity: 0;\n}\n\n.fa-primary {\n color: var(--primary-color);\n opacity: var(--primary-opacity, 1);\n}\n\n.fa-secondary {\n color: var(--secondary-color);\n opacity: var(--secondary-opacity) !important;\n}\n\n/ Icon RTL\n * -----------------------------------------------------------\n /\n:host(.flip-rtl) .icon-inner {\n transform: scaleX(-1);\n}\n\n/ Icon Sizes\n * -----------------------------------------------------------\n /\n:host(.icon-small) {\n font-size: 18px !important;\n}\n\n:host(.icon-large) {\n font-size: 32px !important;\n}\n","import {\n Build,\n Component,\n Element,\n Host,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport { createColorClasses } from '../../utils/theme';\nimport { getSvgContent, iconContent } from './request';\nimport { getName, getUrl } from './utils';\nimport type { Color } from '../../interface';\n\n/\n An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path). Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.\n /\n@Component({\n tag: 'nano-icon',\n styleUrl: 'icon.scss',\n shadow: true,\n})\nexport class Icon {\n private io?: IntersectionObserver;\n\n @Element() el!: HTMLNanoIconElement;\n\n @State() svgContent?: string;\n @State() isVisible = false;\n @State() isLoading = true;\n\n /\n Color to use from your application's color palette.\n * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n /\n @Prop() color?: Color;\n\n /\n Specifies the role to use for accessibility. Defaults to 'presentation' (invisible to screen-readers)\n /\n @Prop({ mutable: true, reflect: true }) role: string = 'presentation';\n\n /\n Specifies the label to use for accessibility. Defaults to the icon name.\n /\n @Prop({ mutable: true, reflect: true }) ariaLabel: string;\n\n /\n Specifies whether the icon should horizontally flip when `dir` is `\"rtl\"`.\n /\n @Prop() flipRtl?: boolean;\n\n /\n Specifies which icon to use from the built-in set of icons.\n /\n @Prop() name?: string;\n\n /\n Specifies the exact `src` of an SVG file to use.\n /\n @Prop() src?: string;\n\n /\n A combination of both `name` and `src`. If a `src` url is detected\n * it will set the `src` property. Otherwise it assumes it's a built-in named\n * SVG and set the `name` property.\n /\n @Prop() icon?: any;\n\n /\n The size of the icon.\n * Available options are: `\"small\"` and `\"large\"`.\n /\n @Prop() size?: 'small' \| 'large';\n\n /\n If enabled, nano-icon will be loaded lazily when it's visible in the viewport.\n * Default, `true`.\n */\n @Prop() lazy = true;\n\n @Watch('role')\n private setAriaLabel() {\n if (!this.ariaLabel && (!this.role \|\| this.role !== 'presentation')) {\n const label = getName(this.name, this.icon);\n // user did not provide a label\n // come up with the label based on the icon name\n if (label) {\n this.ariaLabel = label.split('/').slice(-1)[0].replace(/\\-/g, ' ');\n }\n }\n }\n\n connectedCallback() {\n // purposely do not return the promise here because loading\n // the svg file should not hold up loading the app\n // only load the svg if it's visible\n this.waitUntilVisible(this.el, '50px', () => {\n this.isVisible = true;\n this.loadIcon();\n });\n }\n\n disconnectedCallback() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n componentWillLoad() {\n this.setAriaLabel();\n }\n\n private waitUntilVisible(\n el: HTMLElement,\n rootMargin: string,\n cb: () => void\n ) {\n if (\n Build.isBrowser &&\n this.lazy &&\n typeof window !== 'undefined' &&\n (window as any).IntersectionObserver\n ) {\n const io = (this.io = new (window as any).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n if (data[0].isIntersecting \|\| (data[1] && data[1].isIntersecting)) {\n io.disconnect();\n this.io = undefined;\n cb();\n }\n },\n { rootMargin }\n ));\n\n io.observe(el);\n } else {\n // browser doesn't support IntersectionObserver\n // so just fallback to always show it\n cb();\n }\n }\n\n @Watch('name')\n @Watch('src')\n @Watch('icon')\n loadIcon() {\n if (Build.isBrowser && this.isVisible) {\n const url = getUrl(this);\n if (url) {\n if (iconContent.has(url)) {\n // sync if it's already loaded\n this.svgContent = iconContent.get(url);\n requestAnimationFrame(() => (this.isLoading = false));\n } else {\n // async if it hasn't been loaded\n getSvgContent(url).then(() => {\n this.svgContent = iconContent.get(url);\n requestAnimationFrame(() => (this.isLoading = false));\n });\n }\n }\n }\n this.setAriaLabel();\n }\n\n render() {\n const flipRtl =\n this.flipRtl \|\|\n (this.name &&\n (this.name.indexOf('arrow') > -1 \|\|\n this.name.indexOf('chevron') > -1) &&\n (this.el.ownerDocument as Document).dir === 'rtl' &&\n this.flipRtl !== false);\n\n return (\n <Host\n class={{\n ...createColorClasses(this.color),\n loading: this.isLoading,\n [`icon-${this.size}`]: !!this.size,\n 'flip-rtl': !!flipRtl,\n }}\n >\n {Build.isBrowser && this.svgContent ? (\n <div class=\"icon-inner\" innerHTML={this.svgContent}></div>\n ) : (\n <div class=\"icon-inner\"></div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -40,6 +40,7 @@ const GlobalSearchResults = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     if (!this.index || !this.algoliaEle)
       return;
     this.algoliaEle.searchIndex = this.index;
+    this.algoliaEle.filters = [filterOldPosts]; // only get last 2 years
   }
   handleGlobalNavReset(e) {
     if (e.target.tagName !== 'NANO-GLOBAL-NAV')
@@ -168,7 +169,6 @@ const GlobalSearchResults = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
       this.algoliaEle.filters = [...this.algoliaEle.filters, filterOldPosts];
   }
   componentDidLoad() {
-    this.algoliaEle.filters = [filterOldPosts]; // only get last 2 years
     if (!window['ResizeObserver'])
       return;
     this.ro = new ResizeObserver((entries) => {