npm - @nanoporetech-digital/components - Versions diffs - 1.13.17 → 1.13.21 - Mend

@nanoporetech-digital/components 1.13.17 → 1.13.21

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

package/dist/nano-components/p-8a41ccd9.system.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ System.register(["./p-2d59dda3.system.js","./p-12a93bc3.system.js"],(function(e){"use strict";var t,n,a,i,s;return{setters:[function(e){t=e.r;n=e.h;a=e.e;i=e.g},function(e){s=e.i}],execute:function(){var l=':host{-webkit-box-sizing:border-box;box-sizing:border-box},::before,::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:block;-webkit-box-flex:1;-ms-flex:1 1 100%;flex:1 1 100%}.main-search{display:-webkit-box;display:-ms-flexbox;display:flex;background:white;font-size:14px;min-height:calc(100vh - 63px);-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.main-search__wrap{display:contents;height:100%}.main-search ul{margin:0;padding:0;list-style:none}.main-search li{margin:0;padding:0}.main-search button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:none}.main-search .icon-button{color:inherit;-ms-flex-item-align:normal;-ms-grid-row-align:normal;align-self:normal;padding:9px 7px;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.main-search__topbar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:1em}.main-search__topbar::after{content:"";width:calc(100% - 30px);left:30px;position:relative;border-bottom:1px solid #e5eef1;padding-top:0.9em}.main-search__applied-filters{border:solid 1px #e4e6e8;text-transform:uppercase;border-radius:3px;font-weight:bold;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:0.9;padding:5px 5px 0 5px;letter-spacing:2px;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:0.5rem}.main-search__applied-filters span{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}:host(.small) .main-search__applied-filters{display:none}.main-search__applied-nofilter{margin-left:0;margin-right:5px;margin-top:0;margin-bottom:3px;padding-left:7px;padding-right:7px;padding-top:10px;padding-bottom:10px;font-size:12px;color:rgba(69, 85, 86, 0.85)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-nofilter{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:5px;margin-inline-end:5px}}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-nofilter{padding-left:unset;padding-right:unset;-webkit-padding-start:7px;padding-inline-start:7px;-webkit-padding-end:7px;padding-inline-end:7px}}.main-search__applied-filter{padding-left:8px;padding-right:2px;padding-top:5px;padding-bottom:5px;margin-left:0;margin-right:5px;margin-top:0;margin-bottom:5px;color:#455556;font-size:11px;border-radius:2px;border:solid 1px rgba(0, 132, 169, 0.5);background-color:rgba(0, 132, 169, 0.2);line-height:1}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-filter{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:2px;padding-inline-end:2px}}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-filter{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:5px;margin-inline-end:5px}}.main-search__applied-filter .icon-button{padding-left:10px;padding-right:4px;padding-top:2px;padding-bottom:1px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-filter .icon-button{padding-left:unset;padding-right:unset;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:4px;padding-inline-end:4px}}.main-search__applied-filter .icon-button nano-icon{pointer-events:none}.main-search .topbar__bkbtn{position:relative;left:-7px}:host(.small) .main-search .topbar__query{display:none}.main-search .topbar__filtering{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:1em;margin-right:0;margin-top:0;margin-bottom:0;-webkit-box-flex:1;-ms-flex:1;flex:1}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search .topbar__filtering{margin-left:unset;margin-right:unset;-webkit-margin-start:1em;margin-inline-start:1em;-webkit-margin-end:0;margin-inline-end:0}}.main-search .topbar__order{min-width:165px;max-width:165px;margin-left:auto;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search .topbar__order{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:0;margin-inline-end:0}}:host(.small) .main-search .topbar__order{max-width:300px}.main-search .topbar nano-select{opacity:1;-webkit-transition:0.1s ease opacity;transition:0.1s ease opacity}.main-search .topbar nano-select:not(.hydrated){opacity:0}.main-search .topbar__show-filters{margin-left:0.5em;margin-right:0;margin-top:0;margin-bottom:0;text-transform:uppercase;display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search .topbar__show-filters{margin-left:unset;margin-right:unset;-webkit-margin-start:0.5em;margin-inline-start:0.5em;-webkit-margin-end:0;margin-inline-end:0}}.main-search .topbar__show-filters nano-icon{font-size:20px}:host(.small) .main-search .topbar__show-filters{display:-webkit-box;display:-ms-flexbox;display:flex}.main-search .topbar__filter-count{width:12px;height:12px;-webkit-box-shadow:inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);box-shadow:inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);border:solid 1px #005c76;background-color:#005c76;color:white;font-size:7px;border-radius:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;line-height:1;margin-bottom:3px}.main-search__results{font-size:14px;padding:1em 40px;color:rgba(69, 85, 86, 0.85);width:70%;height:100%}@media (max-width: 576px){.main-search__results{padding:1em 20px}}:host(.small) .main-search__results{width:100%}.main-search__filters{outline:none;padding-left:0;padding-right:40px;padding-top:1.8em;padding-bottom:1em;-webkit-box-flex:1;-ms-flex:1 1 30%;flex:1 1 30%;-webkit-box-sizing:border-box;box-sizing:border-box}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__filters{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:40px;padding-inline-end:40px}}@media (max-width: 576px){.main-search__filters{padding-right:20px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__filters{padding-right:unset;-webkit-padding-end:20px;padding-inline-end:20px}}}:host(:not(.small)) .main-search__filters{max-width:350px;min-width:220px}.filters{color:#455556;background:white;font-size:14px}:host(.small) .filters{position:fixed;width:0;height:0;z-index:10;top:0;right:0;-webkit-transition:all 0s ease 0.5s;transition:all 0s ease 0.5s;background:none}:host(.small) .filters.show{height:100vh;width:100vw;-webkit-transition:all 0s ease 0s;transition:all 0s ease 0s}:host(.small) .filters.show::after{opacity:1}:host(.small) .filters::after{content:"";background:rgba(0, 0, 0, 0.5);position:absolute;left:0;top:0;right:0;bottom:0;z-index:-1;opacity:0;-webkit-transition:0.1s ease opacity;transition:0.1s ease opacity}.filters__close-filters{display:none !important;font-size:1.4em}:host(.small) .filters__close-filters{display:inline-block !important;margin-left:auto;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.small) .filters__close-filters{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:0;margin-inline-end:0}}:host(.small) .filters-wrap{position:absolute;top:0;right:0;background:#f7f6f6;-webkit-transform:translateX(100%);transform:translateX(100%);width:300px;min-width:200px;max-width:80vw;-webkit-transition:-webkit-transform 0.3s ease;transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;transition:transform 0.3s ease, -webkit-transform 0.3s ease;padding:1em;color:black;height:100vh}:host(.small) .filters.show .filters-wrap{-webkit-transform:translateX(0%);transform:translateX(0%);-webkit-box-shadow:-3px -3px 7px rgba(0, 0, 0, 0.1);box-shadow:-3px -3px 7px rgba(0, 0, 0, 0.1)}.filters ul{margin:0;padding:0;list-style:none}.filters li{margin:0;padding:0}.filters nano-details{--padding:0.8em;margin:0.8em 0}.filters nano-details strong[slot]{display:block;padding-left:calc(20px - 0.8em)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.filters nano-details strong[slot]{padding-left:unset;-webkit-padding-start:calc(20px - 0.8em);padding-inline-start:calc(20px - 0.8em);}}.filters nano-details nano-icon[slot=icon-end]{padding-left:calc(20px - 0.8em);padding-right:calc(20px - 0.8em)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.filters nano-details nano-icon[slot=icon-end]{padding-left:unset;padding-right:unset;-webkit-padding-start:calc(20px - 0.8em);padding-inline-start:calc(20px - 0.8em);-webkit-padding-end:calc(20px - 0.8em);padding-inline-end:calc(20px - 0.8em)}}.filters li:last-child .filter-label{margin-bottom:0}.filters .filter-label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;margin:0.5em 0;line-height:1.4;z-index:0}.filters .filter-label::before{margin-left:0;margin-right:1em;margin-top:0;margin-bottom:0;content:"";border:1px solid #0084a9;background:#fff;border-radius:3px;height:1em;width:1em;min-width:1em;min-height:1em;display:inline-block}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.filters .filter-label::before{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:1em;margin-inline-end:1em}}.filters .filter-label::after{background-image:url("data:image/svg+xml;charset=utf-8,<svg%20xmlns=\'http://www.w3.org/2000/svg\'%20viewBox=\'0%200%20512%20512\'><path%20fill=\'%23ffffff\'%20d=\'M173.898%20439.404l-166.4-166.4c-9.997-9.997-9.997-26.206%200-36.204l36.203-36.204c9.997-9.998%2026.207-9.998%2036.204%200L192%20312.69%20432.095%2072.596c9.997-9.997%2026.207-9.997%2036.204%200l36.203%2036.204c9.997%209.997%209.997%2026.206%200%2036.204l-294.4%20294.401c-9.998%209.997-26.207%209.997-36.204-.001z\'/></svg>");content:"";height:0.7em;width:0.7em;position:absolute;left:2px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:1;display:block;background-size:100%;background-position:center center;background-repeat:no-repeat}:host([dir=rtl]) .filters .filter-label::after{right:1px;left:auto}.filters .filter-cb{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.filters .filter-cb:checked+.filter-label::before{background:#245a6f}.filters .filter-cb:focus+.filter-label::before{-webkit-box-shadow:0 0 0 1px rgba(0, 0, 0, 0.7);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.7)}.filters-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.filters-reset{color:#0084a9;font-size:12px;text-decoration:underline;margin-left:auto;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.filters-reset{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:0;margin-inline-end:0}}:host(.small) .filters-reset{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.filters-title{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;text-transform:uppercase;color:rgba(69, 85, 86, 0.85);font-weight:bold;font-size:14px}:host(.small) .filters-title{display:none}.result{text-decoration:none;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding-bottom:14px;border-bottom:1px solid #e4e6e8}.result {word-wrap:break-word;word-break:break-word}.result__title{color:#0084a9;font-size:16px;line-height:1.43;margin:1em 0 0.5em 0;text-decoration:underline;width:70%;display:-webkit-box;display:-ms-flexbox;display:flex;font-weight:500}.result__title nano-icon{margin-left:0;margin-right:0.5em;margin-top:0;margin-bottom:0;min-width:20px;min-height:20px;opacity:0.8}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.result__title nano-icon{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0.5em;margin-inline-end:0.5em}}@media (max-width: 768px){.result__title{width:100%}}.result__body{color:#455556;font-size:14px;line-height:1.67;width:70%}@media (max-width: 768px){.result__body{width:100%}}.result__date{font-size:10px;line-height:1.6;color:#455556;text-align:right;margin:auto 0;width:30%}@media (max-width: 768px){.result__date{width:100%;margin:0.8em 0 0 0}}';var r=e("nano_global_search_results",function(){function e(e){var n=this;t(this,e);this.attachResultListeners=function(){var e=n.algoliaResultsEle;e.querySelectorAll(".remove-filter").forEach((function(e){e.addEventListener("click",(function(e){var t=e.target;n.removeFilter(t.dataset.filter,t.dataset.filterVal)}))}));e.querySelectorAll(".back-btn").forEach((function(e){e.addEventListener("click",(function(){n.goback()}))}));e.querySelectorAll(".topbar__show-filters").forEach((function(e){n.openFilterBtn=e;e.addEventListener("click",(function(){n.filtersDiv.tabIndex=-1;n.filtersDiv.classList.add("show");n.filtersDiv.setAttribute("aria-expanded","true");document.body.style.overflow="hidden";setTimeout((function(){return n.filtersDiv.focus()}),20)}))}))};this.handleGlobalNavReset=function(){n.goback()};this.handleGlobalNavSearch=function(e){var t=e.detail,a=t.results,i=t.client;var s=a.find((function(e){return e.selected}));n.apiKey=i.apiKey;n.appId=i.appId;n.index={name:s.indexName,index:s.index,domain:s.domain,filters:s.filters};n.algoliaEle.query=s.query}}e.prototype.handleAlgoliaCredsChange=function(){if(!this.apiKey\|\|!this.appId\|\|!this.algoliaEle)return;this.algoliaEle.apiKey=this.apiKey;this.algoliaEle.appId=this.appId};e.prototype.handleAlgoliaIndexChange=function(){if(!this.index\|\|!this.algoliaEle)return;this.algoliaEle.searchIndex=this.index};e.prototype.attachListeners=function(){var e=this;this.algoliaResultsEle=this.algoliaEle.querySelector("nano-algolia-results");this.algoliaResultsEle.removeEventListener("nanoTplUpdated",this.attachResultListeners);this.algoliaResultsEle.addEventListener("nanoChange",(function(t){if(t.target.classList.contains("indexchange")){e.changeOrder(t)}}));this.attachResultListeners();this.algoliaResultsEle.addEventListener("nanoTplUpdated",this.attachResultListeners);this.algoliaEle.querySelectorAll(".filters-reset").forEach((function(t){t.addEventListener("click",(function(){e.removeAllFilters()}))}));this.algoliaEle.querySelectorAll(".close-filters").forEach((function(t){t.addEventListener("click",(function(){e.closefilters()}))}));var t=this.algoliaEle.querySelector(".filters-wrap");if(t){t.addEventListener("click",(function(e){e.stopPropagation()}))}this.filtersDiv=this.algoliaEle.querySelector("#main-search-filters")};e.prototype.changeOrder=function(e){this.algoliaEle.replicaIndex=e.detail.value};e.prototype.goback=function(){this.removeAllFilters();this.algoliaEle.showResults=false;this.algoliaEle.query=""};e.prototype.removeFilter=function(e,t){this.algoliaEle.removeFilters(e,t)};e.prototype.removeAllFilters=function(){this.algoliaEle.removeFilters()};e.prototype.closefilters=function(){var e=this;if(!this.filtersDiv)return;this.filtersDiv.tabIndex=null;this.filtersDiv.classList.remove("show");this.filtersDiv.setAttribute("aria-expanded","false");document.body.style.overflow="";setTimeout((function(){return e.openFilterBtn.focus()}),20)};e.prototype.componentDidLoad=function(){var e=this;this.ro=new s((function(t){for(var n=0,a=t;n<a.length;n++){var i=a[n];if(!i.contentRect.width)return;e.currentWidth=i.contentRect.width}}));this.ro.observe(this.el);this.algoliaEle.filters=["created > "+Math.floor((Date.now()-631152e5)/1e3)]};e.prototype.connectedCallback=function(){this.globalNav=document.querySelector("nano-global-nav");this.globalNav.addEventListener("nanoSearchResult",this.handleGlobalNavSearch);this.globalNav.addEventListener("nanoSearchReset",this.handleGlobalNavReset)};e.prototype.disconnectedCallback=function(){if(this.ro)this.ro.disconnect();this.globalNav.removeEventListener("nanoSearchResult",this.handleGlobalNavSearch);this.globalNav.removeEventListener("nanoSearchReset",this.handleGlobalNavReset)};e.prototype.render=function(){var e=this;return n(a,{class:{small:this.currentWidth<577},dir:this.el.ownerDocument.dir==="rtl"?"rtl":false},n("nano-algolia",{"store-id":"searchq","store-method":"url-hash-push",class:"main-search__wrap sc-nano-global-search-results",ref:function(t){return e.algoliaEle=t},onNanoResultsShown:function(){return e.attachListeners()},"infinite-scroll":true},n("script",{type:"text/template",slot:"template"},'<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">\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">\n <option value="all_prod_en">Sort by: Most relevant</option>\n <option value="all_prod_en_date_desc">Sort by: Newest</option>\n <option value="all_prod_en_date_asc">Sort by: Oldest</option>\n <option value="all_prod_en_activity_date_desc">Sort by: Recent activity</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">\n <option value="cws_english_en">Sort by: Most relevant</option>\n <option value="cws_english_en_date_desc">Sort by: Newest</option>\n <option value="cws_english_en_date_asc">Sort by: Oldest</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">\n <option value="cws_english_resources_en">Sort by: Most relevant</option>\n <option value="cws_english_resources_en_featured_desc">Sort by: Newest</option>\n <option value="cws_english_resources_en_featured_asc">Sort by: Oldest</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">\n <option value="store_prod">Sort by: Most relevant</option>\n <option value="store_prod_date_desc">Sort by: Newest</option>\n <option value="store_prod_date_asc">Sort by: Oldest</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">\n <option value="community_prod">Sort by: Most relevant</option>\n <option value="community_prod_date_desc">Sort by: Newest</option>\n <option value="community_prod_date_asc">Sort by: Oldest</option>\n <option value="community_prod_activity_date_desc">Sort by: Recent activity</option>\n </nano-select>\n {{ /if }}\n {{ /if }}\n\n <button class="sc-nano-global-search-results topbar__show-filters filters-title" aria-controls="main-search-filters">\n {{ @if (it.appliedFilters && it.appliedFilters.length > 0) }}\n <span class="sc-nano-global-search-results topbar__filter-count">\n {{ (it.appliedFilters.reduce(function(a, b) { return a + (b.values ? b.values.length : 0) }, 0)) }}\n </span>\n {{ /if }}\n <nano-icon class="sc-nano-global-search-results" name="light/filter"></nano-icon>\n </button>\n </div>\n </div>\n\n {{ @if (it.results.length) }}\n <div class="sc-nano-global-search-results main-search__applied-filters">\n {{ @if (it.appliedFilters) }}\n {{ @each(it.appliedFilters) => filterObj }}\n {{ @each(filterObj.values) => filterVal }}\n <span class="sc-nano-global-search-results main-search__applied-filter">\n {{ filterVal \| public_name }}\n <button class="sc-nano-global-search-results icon-button remove-filter" data-filter="{{ filterObj.name }}" data-filter-val="{{ filterVal }}">\n <nano-icon class="sc-nano-global-search-results" name="light/times"></nano-icon>\n </button>\n </span>\n {{ /each }}\n {{ /each }}\n {{ #else }}\n <span class="sc-nano-global-search-results main-search__applied-nofilter"> </span>\n {{ /if }}\n </div>\n {{ /if }}\n <\/script>\n\n <script type="text/template" slot="result-template">\n {{ @if (it.totalHitsWithFilters > 0) }}\n {{ @each(it.results) => result }}\n <li class="sc-nano-global-search-results">\n <a class="sc-nano-global-search-results result" href="{{ result.url \| abs_url(it, result) }}">\n <h4 class="sc-nano-global-search-results result__title" data-icon-set="{{(iconSet = false)}}">\n {{ @if (!it.legacy) }}\n\n {{ @if (result.type === \'faq\' \|\| result.type === \'faqs\') }}\n <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/question-circle"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === \'comment\') }}\n <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/comment"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === \'protocol\') }}\n <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/clipboard-list"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === \'publication\') }}\n <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/file-chart-line"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === \'poster\' \|\| result.type === \'lc_poster\') }}\n <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/presentation"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === \'post\') }}\n <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/comments"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === \'news_item\') }}\n <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/newspaper"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === \'event\') }}\n <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/calendar"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === \'talk\' \|\| result.type === \'lc_lightning_talk\' \|\| result.type === \'ncm_plenary_talk\' \|\| result.type === \'ncm_lightning_talk\') }}\n <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/keynote"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === \'video\') }}\n <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/video"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === \'data_release\') }}\n <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/analytics"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === \'job_vacancy\') }}\n <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/ballot-check"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === \'tool\') }}\n <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/wrench"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === \'literature\') }}\n <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/book"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === \'community_info\') }}\n <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/users"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === \'article\') }}\n <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/file-alt"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === \'provider\') }}\n <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/handshake"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === \'apps\') }}\n <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/vials"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === \'white_paper\') }}\n <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/file-pdf"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === \'Nanopore Store\') }}\n <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/shopping-cart"></nano-icon>\n {{ /if }}\n\n {{ @if (!result.type \|\| !iconSet) }}\n <nano-icon class="sc-nano-global-search-results" name="light/file"></nano-icon>\n {{ /if }}\n {{ /if }}\n {{ result.title \| safe }}\n </h4>\n {{ @if (result.body) }}\n <div class="sc-nano-global-search-results result__body">{{ result.body \| safe \| trim_to(200) }}</div>\n {{ /if }}\n {{ @if (result.updated) }}\n <div class="sc-nano-global-search-results result__date">Last Updated: {{ result.updated \| date_short }}</div>\n {{ #else }}\n {{ @if (result.created) }}\n <div class="sc-nano-global-search-results result__date">Added: {{ result.created \| date_short }}</div>\n {{ /if }}\n {{ /if }}\n </a>\n </li>\n {{ /each }}\n {{ /if }}\n <\/script>\n\n <div slot="start-output"></div>\n <ul slot="result-output" class="sc-nano-global-search-results"></ul>\n </nano-algolia-results>\n\n {{ @if(Object.keys(it.origFilters).length) }}\n <div class="sc-nano-global-search-results main-search__filters filters close-filters" id="main-search-filters">\n <div class="sc-nano-global-search-results filters-wrap">\n {{ @if(it.totalHits) }}\n <div class="sc-nano-global-search-results filters-header">\n <strong class="sc-nano-global-search-results filters-title">Filters</strong>\n <button class="sc-nano-global-search-results filters-reset">Reset</button>\n <button class="sc-nano-global-search-results filters__close-filters close-filters icon-button" aria-controls="main-search-filters">\n <nano-icon class="sc-nano-global-search-results" name="light/times"></nano-icon>\n </button>\n </div>\n {{ /if }}\n\n <div>\n {{ @if(it.origFilters[\'type\']) }}\n <nano-details class="sc-nano-global-search-results" open={true} icon-rotation="180">\n <strong slot="label">Type</strong>\n <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n <nano-algolia-filter store-id="searchf1" store-method="url-hash-push" filter-name="type">\n <script type="text/template" slot="filter-template">\n <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n {{ @foreach(it.dyn) => filter, filterVal }}\n <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n <input class="sc-nano-global-search-results filter-cb" type="checkbox" value="{{ filter }}" id="type-{{ filter }}-{{x}}" />\n <label class="sc-nano-global-search-results filter-label" for="type-{{ filter }}-{{x}}">\n <span>{{ filter \| public_name }} (<strong>{{ filterVal }}</strong>)</span>\n </label></li>\n {{ /foreach }}\n </ul>\n <\/script>\n <div slot="output"></div>\n </nano-algolia-filter>\n </nano-details>\n {{ /if }}\n\n {{ @if(it.origFilters[\'channel\']) }}\n <nano-details open={true} icon-rotation="180">\n <strong slot="label">Channels</strong>\n <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n <nano-algolia-filter store-id="searchf2" store-method="url-hash-push" filter-name="channel">\n <script type="text/template" slot="filter-template">\n <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n {{ @foreach(it.dyn) => filter, filterVal }}\n <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter }}" id="channel-{{ filter }}-{{x}}" />\n <label class="filter-label sc-nano-global-search-results" for="channel-{{ filter }}-{{x}}">\n <span>{{ filter \| public_name }} (<strong>{{ filterVal }}</strong>)</span>\n </label></li>\n {{ /foreach }}\n </ul>\n <\/script>\n <div slot="output"></div>\n </nano-algolia-filter>\n </nano-details>\n {{ /if }}\n\n {{ @if(it.origFilters[\'authors\']) }}\n <nano-details open={true} icon-rotation="180">\n <strong slot="label">Authors</strong>\n <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n <nano-algolia-filter store-id="searchf3" store-method="url-hash-push" filter-name="authors">\n <script type="text/template" slot="filter-template">\n <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n {{ @foreach(it.dyn) => filter, filterVal }}\n <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter }}" id="authors-{{ filter }}-{{x}}" />\n <label class="filter-label sc-nano-global-search-results" for="authors-{{ filter }}-{{x}}">\n <span>{{ filter \| public_name }} (<strong>{{ filterVal }}</strong>)</span>\n </label></li>\n {{ /foreach }}\n </ul>\n <\/script>\n <div slot="output"></div>\n </nano-algolia-filter>\n </nano-details>\n {{ /if }}\n\n {{ @if(it.origFilters[\'categories_without_path\']) }}\n <nano-details open={true} icon-rotation="180">\n <strong slot="label">Category</strong>\n <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n <nano-algolia-filter store-id="searchf4" store-method="url-hash-push" filter-name="categories_without_path">\n <script type="text/template" slot="filter-template">\n <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n {{ @foreach(it.dyn) => filter, filterVal }}\n {{ @if(!filter.match(/publication/)) }}\n <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n <input class="sc-nano-global-search-results filter-cb" type="checkbox" value="{{ filter }}" id="cwp-{{ filter }}-{{x}}" />\n <label class="sc-nano-global-search-results filter-label" for="cwp-{{ filter }}-{{x}}">\n <span>{{ filter \| public_name }} (<strong>{{ filterVal }}</strong>)</span>\n </label></li>\n {{ /if }}\n {{ /foreach }}\n </ul>\n <\/script>\n <div slot="output"></div>\n </nano-algolia-filter>\n </nano-details>\n {{ /if }}\n\n {{ @if(it.origFilters[\'tags\']) }}\n <nano-details open={true} icon-rotation="180">\n <strong slot="label">Tags</strong>\n <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n <nano-algolia-filter store-id="searchf5" store-method="url-hash-push" filter-name="tags">\n <script type="text/template" slot="filter-template">\n <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n {{ @foreach(it.dyn) => filter, filterVal }}\n <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter }}" 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("div",{slot:"output"}),n("slot",null)))};Object.defineProperty(e.prototype,"el",{get:function(){return i(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{algoliaEle:["handleAlgoliaCredsChange","handleAlgoliaIndexChange"],apiKey:["handleAlgoliaCredsChange"],appId:["handleAlgoliaCredsChange"],index:["handleAlgoliaIndexChange"]}},enumerable:false,configurable:true});return e}());r.style=l}}}));
2	+ //# sourceMappingURL=p-8a41ccd9.system.entry.js.map

package/dist/nano-components/p-8a41ccd9.system.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["src/components/global-search-results/global-search-results.scss?tag=nano-global-search-results&encapsulation=shadow","src/components/global-search-results/global-search-results.tsx"],"names":["globalSearchResultsCss","GlobalSearchResults","exports","class_1","hostRef","_this","this","attachResultListeners","resultEle","algoliaResultsEle","querySelectorAll","forEach","item","addEventListener","clickEv","filter","target","removeFilter","dataset","filterVal","goback","openFilterBtn","filtersDiv","tabIndex","classList","add","setAttribute","document","body","style","overflow","setTimeout","focus","handleGlobalNavReset","handleGlobalNavSearch","e","_a","detail","results","client","result","find","selected","apiKey","appId","index","name","indexName","domain","filters","algoliaEle","query","prototype","handleAlgoliaCredsChange","handleAlgoliaIndexChange","searchIndex","attachListeners","querySelector","removeEventListener","ev","contains","changeOrder","removeAllFilters","closefilters","filterWrap","stopPropagation","replicaIndex","value","showResults","facet","removeFilters","remove","componentDidLoad","ro","ResizeObserver","entries","_i","entries_1","length","entry","contentRect","width","currentWidth","observe","el","Math","floor","Date","now","connectedCallback","globalNav","disconnectedCallback","disconnect","render","h","Host","class","small","dir","ownerDocument","store-id","store-method","ref","ele","onNanoResultsShown","infinite-scroll","type","slot"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n\n:host {\n display: block;\n flex: 1 1 100%;\n}\n\n.main-search {\n display: flex;\n background: white;\n font-size: 14px;\n min-height: calc(100vh - 63px);\n justify-content: space-between;\n\n &__wrap {\n /* autoprefixer: ignore next */\n display: contents;\n height: 100%;\n }\n\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n li {\n margin: 0;\n padding: 0;\n }\n\n button {\n appearance: none;\n border: none;\n background: none;\n }\n\n .icon-button {\n color: inherit;\n align-self: normal;\n padding: 9px 7px;\n cursor: pointer;\n display: flex;\n align-items: center;\n }\n\n &__topbar {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n margin-bottom: 1em;\n\n &::after {\n content: '';\n width: calc(100% - 30px);\n left: 30px;\n position: relative;\n border-bottom: 1px solid #e5eef1;\n padding-top: 0.9em;\n }\n }\n\n &__applied-filters {\n border: solid 1px $color-lightgrey;\n text-transform: uppercase;\n border-radius: 3px;\n font-weight: bold;\n display: flex;\n align-items: center;\n line-height: 0.9;\n padding: 5px 5px 0 5px;\n letter-spacing: 2px;\n flex-wrap: wrap;\n margin-bottom: 0.5rem;\n\n span {\n display: flex;\n align-items: center;\n }\n\n :host(.small) & {\n display: none;\n }\n }\n\n &__applied-nofilter {\n @include margin(0, 5px, 3px, 0);\n @include padding(10px, 7px, 10px, 7px);\n\n font-size: 12px;\n color: rgba(69, 85, 86, 0.85);\n }\n\n &__applied-filter {\n @include padding(5px, 2px, 5px, 8px);\n @include margin(0, 5px, 5px, 0);\n\n color: $color-darkgrey;\n font-size: 11px;\n border-radius: 2px;\n border: solid 1px rgba(0, 132, 169, 0.5);\n background-color: rgba(0, 132, 169, 0.2);\n line-height: 1;\n\n .icon-button {\n @include padding(2px, 4px, 1px, 10px);\n\n nano-icon {\n pointer-events: none;\n }\n }\n }\n\n .topbar {\n &__bkbtn {\n position: relative;\n left: -7px;\n }\n\n &__query {\n :host(.small) & {\n display: none;\n }\n }\n\n &__filtering {\n display: flex;\n align-items: center;\n\n @include margin(0, 0, 0, 1em);\n\n flex: 1;\n }\n\n &__order {\n min-width: 165px;\n max-width: 165px;\n\n @include margin(0, 0, 0, auto);\n\n // @include media-breakpoint-down('sm') {\n // max-width: 300px;\n // }\n\n :host(.small) & {\n max-width: 300px;\n }\n }\n\n nano-select {\n opacity: 1;\n transition: 0.1s ease opacity;\n\n &:not(.hydrated) {\n opacity: 0;\n }\n }\n\n &__show-filters {\n @include margin(0, 0, 0, 0.5em);\n\n text-transform: uppercase;\n display: none;\n flex-direction: column;\n align-items: center;\n\n nano-icon {\n font-size: 20px;\n }\n\n // @include media-breakpoint-down('sm') {\n // display: flex;\n // }\n\n :host(.small) & {\n display: flex;\n }\n }\n\n &__filter-count {\n width: 12px;\n height: 12px;\n box-shadow: inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);\n border: solid 1px #005c76;\n background-color: #005c76;\n color: white;\n font-size: 7px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n line-height: 1;\n margin-bottom: 3px;\n }\n }\n\n &__results {\n font-size: 14px;\n padding: 1em 40px;\n color: rgba(69, 85, 86, 0.85);\n width: 70%;\n height: 100%;\n\n @include media-breakpoint-down('sm') {\n padding: 1em 20px;\n }\n\n :host(.small) & {\n width: 100%;\n }\n }\n\n &__filters {\n outline: none;\n\n @include padding(1.8em, 40px, 1em, 0);\n\n @include media-breakpoint-down('sm') {\n @include padding(null, 20px, null, null);\n }\n\n flex: 1 1 30%;\n box-sizing: border-box;\n\n :host(:not(.small)) & {\n max-width: 350px;\n min-width: 220px;\n }\n }\n}\n\n.filters {\n color: $color-darkgrey;\n background: white;\n font-size: 14px;\n\n :host(.small) & {\n position: fixed;\n width: 0;\n height: 0;\n z-index: 10;\n top: 0;\n right: 0;\n transition: all 0s ease 0.5s;\n background: none;\n\n &.show {\n height: 100vh;\n width: 100vw;\n transition: all 0s ease 0s;\n\n &::after {\n opacity: 1;\n }\n }\n\n &::after {\n content: '';\n background: rgba(0, 0, 0, 0.5);\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n z-index: -1;\n opacity: 0;\n transition: 0.1s ease opacity;\n }\n }\n\n &__close-filters {\n display: none !important;\n font-size: 1.4em;\n\n :host(.small) & {\n display: inline-block !important;\n\n @include margin(0, 0, 0, auto);\n }\n }\n\n &-wrap {\n :host(.small) & {\n position: absolute;\n top: 0;\n right: 0;\n background: rgb(247, 246, 246);\n transform: translateX(100%);\n width: 300px;\n min-width: 200px;\n max-width: 80vw;\n transition: transform 0.3s ease;\n padding: 1em;\n color: black;\n // overflow: auto;\n height: 100vh;\n }\n }\n\n &.show {\n .filters-wrap {\n :host(.small) & {\n transform: translateX(0%);\n box-shadow: -3px -3px 7px rgba(0, 0, 0, 0.1);\n }\n }\n }\n\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n li {\n margin: 0;\n padding: 0;\n }\n\n nano-details {\n --padding: 0.8em;\n\n margin: 0.8em 0;\n\n strong[slot] {\n display: block;\n\n @include padding(null, null, null, calc(20px - 0.8em));\n }\n\n nano-icon[slot='icon-end'] {\n @include padding(null, calc(20px - 0.8em), null, calc(20px - 0.8em));\n }\n }\n\n li:last-child .filter-label {\n margin-bottom: 0;\n }\n\n .filter-label {\n display: flex;\n align-items: center;\n position: relative;\n margin: 0.5em 0;\n line-height: 1.4;\n z-index: 0;\n\n &::before {\n @include margin(0, 1em, 0, 0);\n\n content: '';\n border: 1px solid $color-blue;\n background: $color-white;\n border-radius: 3px;\n height: 1em;\n width: 1em;\n min-width: 1em;\n min-height: 1em;\n display: inline-block;\n }\n\n &::after {\n @include svg-background-image(\n \"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='#ffffff' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/></svg>\"\n );\n\n content: '';\n height: 0.7em;\n width: 0.7em;\n position: absolute;\n left: 2px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 1;\n display: block;\n background-size: 100%;\n background-position: center center;\n background-repeat: no-repeat;\n\n @include rtl-host() {\n right: 1px;\n left: auto;\n }\n }\n }\n\n .filter-cb {\n @include visually-hide;\n\n &:checked + .filter-label {\n &::before {\n background: $color-blue--darker;\n }\n }\n\n &:focus + .filter-label {\n &::before {\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);\n }\n }\n }\n\n &-header {\n display: flex;\n align-items: center;\n }\n\n &-reset {\n color: $color-blue;\n font-size: 12px;\n text-decoration: underline;\n\n @include margin(0, 0, 0, auto);\n\n :host(.small) & {\n @include margin(0, 0, 0, 0);\n }\n }\n\n &-title {\n @include margin(0, 0, 0, 0);\n\n text-transform: uppercase;\n color: rgba(69, 85, 86, 0.85);\n font-weight: bold;\n font-size: 14px;\n\n :host(.small) & {\n display: none;\n }\n }\n}\n\n.result {\n text-decoration: none;\n display: flex;\n flex-wrap: wrap;\n flex-direction: row;\n padding-bottom: 14px;\n border-bottom: 1px solid $color-lightgrey;\n\n * {\n word-wrap: break-word;\n word-break: break-word;\n }\n\n &__title {\n color: $color-blue;\n font-size: 16px;\n line-height: 1.43;\n margin: 1em 0 0.5em 0;\n text-decoration: underline;\n width: 70%;\n display: flex;\n font-weight: 500;\n\n nano-icon {\n @include margin(0, 0.5em, 0, 0);\n\n min-width: 20px;\n min-height: 20px;\n opacity: 0.8;\n }\n\n @include media-breakpoint-down('md') {\n width: 100%;\n }\n }\n\n &__body {\n color: $color-darkgrey;\n font-size: 14px;\n line-height: 1.67;\n width: 70%;\n\n @include media-breakpoint-down('md') {\n width: 100%;\n }\n }\n\n &__date {\n font-size: 10px;\n line-height: 1.6;\n color: $color-darkgrey;\n text-align: right;\n margin: auto 0;\n width: 30%;\n\n @include media-breakpoint-down('md') {\n width: 100%;\n margin: 0.8em 0 0 0;\n }\n }\n}\n","import {\n Component,\n h,\n Host,\n Element,\n State,\n ComponentInterface,\n Watch,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport { AloliaSearchResultDetail } from '../../interface';\nimport { SearchIndex } from '../../interface';\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 private globalNav: HTMLNanoGlobalNavElement;\n\n @State() algoliaEle: HTMLNanoAlgoliaElement;\n @State() currentWidth: number;\n @State() apiKey: string;\n @State() appId: string;\n @State() index: SearchIndex;\n\n @Element() private el: HTMLNanoGlobalSearchResultsElement;\n\n @Watch('algoliaEle')\n @Watch('apiKey')\n @Watch('appId')\n handleAlgoliaCredsChange() {\n if (!this.apiKey || !this.appId || !this.algoliaEle) return;\n this.algoliaEle.apiKey = this.apiKey;\n this.algoliaEle.appId = this.appId;\n }\n\n @Watch('algoliaEle')\n @Watch('index')\n handleAlgoliaIndexChange() {\n if (!this.index || !this.algoliaEle) return;\n this.algoliaEle.searchIndex = this.index;\n }\n\n private attachListeners() {\n this.algoliaResultsEle = this.algoliaEle.querySelector(\n 'nano-algolia-results'\n );\n\n // clear previous listeners incase\n this.algoliaResultsEle.removeEventListener(\n 'nanoTplUpdated',\n this.attachResultListeners\n );\n this.algoliaResultsEle.addEventListener('nanoChange', (ev) => {\n if (\n (ev.target as HTMLNanoSelectElement).classList.contains('indexchange')\n ) {\n this.changeOrder(ev);\n }\n });\n // add results listeners\n this.attachResultListeners();\n this.algoliaResultsEle.addEventListener(\n 'nanoTplUpdated',\n this.attachResultListeners\n );\n\n this.algoliaEle.querySelectorAll('.filters-reset').forEach((item) => {\n item.addEventListener('click', () => {\n this.removeAllFilters();\n });\n });\n\n this.algoliaEle.querySelectorAll('.close-filters').forEach((item) => {\n item.addEventListener('click', () => {\n this.closefilters();\n });\n });\n\n let filterWrap = this.algoliaEle.querySelector('.filters-wrap');\n if (filterWrap) {\n filterWrap.addEventListener('click', (e) => {\n e.stopPropagation();\n });\n }\n\n this.filtersDiv = this.algoliaEle.querySelector('#main-search-filters');\n }\n\n private attachResultListeners = () => {\n let resultEle = this.algoliaResultsEle;\n\n resultEle.querySelectorAll('.remove-filter').forEach((item) => {\n item.addEventListener('click', (clickEv: MouseEvent) => {\n let filter = clickEv.target as HTMLElement;\n this.removeFilter(filter.dataset.filter, filter.dataset.filterVal);\n });\n });\n\n resultEle.querySelectorAll('.back-btn').forEach((item) => {\n item.addEventListener('click', () => {\n this.goback();\n });\n });\n\n resultEle.querySelectorAll('.topbar__show-filters').forEach((item) => {\n this.openFilterBtn = item as HTMLButtonElement;\n item.addEventListener('click', () => {\n this.filtersDiv.tabIndex = -1;\n this.filtersDiv.classList.add('show');\n this.filtersDiv.setAttribute('aria-expanded', 'true');\n document.body.style.overflow = 'hidden';\n setTimeout(() => this.filtersDiv.focus(), 20);\n });\n });\n };\n\n private changeOrder(ev) {\n this.algoliaEle.replicaIndex = ev.detail.value;\n }\n\n private goback() {\n this.removeAllFilters();\n this.algoliaEle.showResults = false;\n this.algoliaEle.query = '';\n }\n\n private removeFilter(facet, filter) {\n this.algoliaEle.removeFilters(facet, filter);\n }\n\n private removeAllFilters() {\n this.algoliaEle.removeFilters();\n }\n\n private closefilters() {\n if (!this.filtersDiv) return;\n this.filtersDiv.tabIndex = null;\n this.filtersDiv.classList.remove('show');\n this.filtersDiv.setAttribute('aria-expanded', 'false');\n document.body.style.overflow = '';\n setTimeout(() => this.openFilterBtn.focus(), 20);\n }\n\n private handleGlobalNavReset = () => {\n this.goback();\n };\n\n private handleGlobalNavSearch = (e: CustomEvent) => {\n const {\n detail: { results, client },\n } = e as { detail: AloliaSearchResultDetail };\n const result = results.find((result) => result.selected);\n\n this.apiKey = client.apiKey;\n this.appId = client.appId;\n this.index = {\n name: result.indexName,\n index: result.index,\n domain: result.domain,\n filters: result.filters,\n };\n this.algoliaEle.query = result.query;\n };\n\n componentDidLoad() {\n this.ro = new ResizeObserver((entries) => {\n for (const entry of entries) {\n if (!entry.contentRect.width) return;\n this.currentWidth = entry.contentRect.width;\n }\n });\n this.ro.observe(this.el);\n this.algoliaEle.filters = [\n 'created > ' + Math.floor((Date.now() - 63115200000) / 1000),\n ]; // only get last 2 years\n }\n\n connectedCallback() {\n this.globalNav = document.querySelector('nano-global-nav');\n this.globalNav.addEventListener(\n 'nanoSearchResult',\n this.handleGlobalNavSearch\n );\n this.globalNav.addEventListener(\n 'nanoSearchReset',\n this.handleGlobalNavReset\n );\n }\n\n disconnectedCallback() {\n if (this.ro) this.ro.disconnect();\n this.globalNav.removeEventListener(\n 'nanoSearchResult',\n this.handleGlobalNavSearch\n );\n this.globalNav.removeEventListener(\n 'nanoSearchReset',\n this.handleGlobalNavReset\n );\n }\n\n render() {\n return (\n <Host\n class={{ small: this.currentWidth < 577 }}\n dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : false}\n >\n <nano-algolia\n store-id=\"searchq\"\n store-method=\"url-hash-push\"\n class=\"main-search__wrap sc-nano-global-search-results\"\n ref={(ele) => (this.algoliaEle = ele)}\n onNanoResultsShown={() => this.attachListeners()}\n infinite-scroll\n >\n <script type=\"text/template\" slot=\"template\">\n {`<div class=\"main-search sc-nano-global-search-results\">\n <nano-algolia-results id=\"main-search-results\" class=\"main-search__results sc-nano-global-search-results\">\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\">\n <option value=\"all_prod_en\">Sort by: Most relevant</option>\n <option value=\"all_prod_en_date_desc\">Sort by: Newest</option>\n <option value=\"all_prod_en_date_asc\">Sort by: Oldest</option>\n <option value=\"all_prod_en_activity_date_desc\">Sort by: Recent activity</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\">\n <option value=\"cws_english_en\">Sort by: Most relevant</option>\n <option value=\"cws_english_en_date_desc\">Sort by: Newest</option>\n <option value=\"cws_english_en_date_asc\">Sort by: Oldest</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\">\n <option value=\"cws_english_resources_en\">Sort by: Most relevant</option>\n <option value=\"cws_english_resources_en_featured_desc\">Sort by: Newest</option>\n <option value=\"cws_english_resources_en_featured_asc\">Sort by: Oldest</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\">\n <option value=\"store_prod\">Sort by: Most relevant</option>\n <option value=\"store_prod_date_desc\">Sort by: Newest</option>\n <option value=\"store_prod_date_asc\">Sort by: Oldest</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\">\n <option value=\"community_prod\">Sort by: Most relevant</option>\n <option value=\"community_prod_date_desc\">Sort by: Newest</option>\n <option value=\"community_prod_date_asc\">Sort by: Oldest</option>\n <option value=\"community_prod_activity_date_desc\">Sort by: Recent activity</option>\n </nano-select>\n {{ /if }}\n {{ /if }}\n\n <button class=\"sc-nano-global-search-results topbar__show-filters filters-title\" aria-controls=\"main-search-filters\">\n {{ @if (it.appliedFilters && it.appliedFilters.length > 0) }}\n <span class=\"sc-nano-global-search-results topbar__filter-count\">\n {{ (it.appliedFilters.reduce(function(a, b) { return a + (b.values ? b.values.length : 0) }, 0)) }}\n </span>\n {{ /if }}\n <nano-icon class=\"sc-nano-global-search-results\" name=\"light/filter\"></nano-icon>\n </button>\n </div>\n </div>\n\n {{ @if (it.results.length) }}\n <div class=\"sc-nano-global-search-results main-search__applied-filters\">\n {{ @if (it.appliedFilters) }}\n {{ @each(it.appliedFilters) => filterObj }}\n {{ @each(filterObj.values) => filterVal }}\n <span class=\"sc-nano-global-search-results main-search__applied-filter\">\n {{ filterVal | public_name }}\n <button class=\"sc-nano-global-search-results icon-button remove-filter\" data-filter=\"{{ filterObj.name }}\" data-filter-val=\"{{ filterVal }}\">\n <nano-icon class=\"sc-nano-global-search-results\" name=\"light/times\"></nano-icon>\n </button>\n </span>\n {{ /each }}\n {{ /each }}\n {{ #else }}\n <span class=\"sc-nano-global-search-results main-search__applied-nofilter\"> </span>\n {{ /if }}\n </div>\n {{ /if }}\n </script>\n\n <script type=\"text/template\" slot=\"result-template\">\n {{ @if (it.totalHitsWithFilters > 0) }}\n {{ @each(it.results) => result }}\n <li class=\"sc-nano-global-search-results\">\n <a class=\"sc-nano-global-search-results result\" href=\"{{ result.url | abs_url(it, result) }}\">\n <h4 class=\"sc-nano-global-search-results result__title\" data-icon-set=\"{{(iconSet = false)}}\">\n {{ @if (!it.legacy) }}\n\n {{ @if (result.type === 'faq' || result.type === 'faqs') }}\n <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/question-circle\"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === 'comment') }}\n <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/comment\"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === 'protocol') }}\n <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/clipboard-list\"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === 'publication') }}\n <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/file-chart-line\"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === 'poster' || result.type === 'lc_poster') }}\n <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/presentation\"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === 'post') }}\n <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/comments\"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === 'news_item') }}\n <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/newspaper\"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === 'event') }}\n <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/calendar\"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === 'talk' || result.type === 'lc_lightning_talk' || result.type === 'ncm_plenary_talk' || result.type === 'ncm_lightning_talk') }}\n <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/keynote\"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === 'video') }}\n <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/video\"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === 'data_release') }}\n <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/analytics\"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === 'job_vacancy') }}\n <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/ballot-check\"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === 'tool') }}\n <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/wrench\"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === 'literature') }}\n <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/book\"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === 'community_info') }}\n <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/users\"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === 'article') }}\n <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/file-alt\"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === 'provider') }}\n <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/handshake\"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === 'apps') }}\n <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/vials\"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === 'white_paper') }}\n <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/file-pdf\"></nano-icon>\n {{ /if }}\n\n {{ @if (result.type === 'Nanopore Store') }}\n <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/shopping-cart\"></nano-icon>\n {{ /if }}\n\n {{ @if (!result.type || !iconSet) }}\n <nano-icon class=\"sc-nano-global-search-results\" name=\"light/file\"></nano-icon>\n {{ /if }}\n {{ /if }}\n {{ result.title | safe }}\n </h4>\n {{ @if (result.body) }}\n <div class=\"sc-nano-global-search-results result__body\">{{ result.body | safe | trim_to(200) }}</div>\n {{ /if }}\n {{ @if (result.updated) }}\n <div class=\"sc-nano-global-search-results result__date\">Last Updated: {{ result.updated | date_short }}</div>\n {{ #else }}\n {{ @if (result.created) }}\n <div class=\"sc-nano-global-search-results result__date\">Added: {{ result.created | date_short }}</div>\n {{ /if }}\n {{ /if }}\n </a>\n </li>\n {{ /each }}\n {{ /if }}\n </script>\n\n <div slot=\"start-output\"></div>\n <ul slot=\"result-output\" class=\"sc-nano-global-search-results\"></ul>\n </nano-algolia-results>\n\n {{ @if(Object.keys(it.origFilters).length) }}\n <div class=\"sc-nano-global-search-results main-search__filters filters close-filters\" id=\"main-search-filters\">\n <div class=\"sc-nano-global-search-results filters-wrap\">\n {{ @if(it.totalHits) }}\n <div class=\"sc-nano-global-search-results filters-header\">\n <strong class=\"sc-nano-global-search-results filters-title\">Filters</strong>\n <button class=\"sc-nano-global-search-results filters-reset\">Reset</button>\n <button class=\"sc-nano-global-search-results filters__close-filters close-filters icon-button\" aria-controls=\"main-search-filters\">\n <nano-icon class=\"sc-nano-global-search-results\" name=\"light/times\"></nano-icon>\n </button>\n </div>\n {{ /if }}\n\n <div>\n {{ @if(it.origFilters['type']) }}\n <nano-details class=\"sc-nano-global-search-results\" open={true} icon-rotation=\"180\">\n <strong slot=\"label\">Type</strong>\n <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n <nano-algolia-filter store-id=\"searchf1\" store-method=\"url-hash-push\" filter-name=\"type\">\n <script type=\"text/template\" slot=\"filter-template\">\n <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n {{ @foreach(it.dyn) => filter, filterVal }}\n <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n <input class=\"sc-nano-global-search-results filter-cb\" type=\"checkbox\" value=\"{{ filter }}\" id=\"type-{{ filter }}-{{x}}\" />\n <label class=\"sc-nano-global-search-results filter-label\" for=\"type-{{ filter }}-{{x}}\">\n <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n </label></li>\n {{ /foreach }}\n </ul>\n </script>\n <div slot=\"output\"></div>\n </nano-algolia-filter>\n </nano-details>\n {{ /if }}\n\n {{ @if(it.origFilters['channel']) }}\n <nano-details open={true} icon-rotation=\"180\">\n <strong slot=\"label\">Channels</strong>\n <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n <nano-algolia-filter store-id=\"searchf2\" store-method=\"url-hash-push\" filter-name=\"channel\">\n <script type=\"text/template\" slot=\"filter-template\">\n <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n {{ @foreach(it.dyn) => filter, filterVal }}\n <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n <input class=\"filter-cb sc-nano-global-search-results\" type=\"checkbox\" value=\"{{ filter }}\" id=\"channel-{{ filter }}-{{x}}\" />\n <label class=\"filter-label sc-nano-global-search-results\" for=\"channel-{{ filter }}-{{x}}\">\n <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n </label></li>\n {{ /foreach }}\n </ul>\n </script>\n <div slot=\"output\"></div>\n </nano-algolia-filter>\n </nano-details>\n {{ /if }}\n\n {{ @if(it.origFilters['authors']) }}\n <nano-details open={true} icon-rotation=\"180\">\n <strong slot=\"label\">Authors</strong>\n <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n <nano-algolia-filter store-id=\"searchf3\" store-method=\"url-hash-push\" filter-name=\"authors\">\n <script type=\"text/template\" slot=\"filter-template\">\n <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n {{ @foreach(it.dyn) => filter, filterVal }}\n <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n <input class=\"filter-cb sc-nano-global-search-results\" type=\"checkbox\" value=\"{{ filter }}\" id=\"authors-{{ filter }}-{{x}}\" />\n <label class=\"filter-label sc-nano-global-search-results\" for=\"authors-{{ filter }}-{{x}}\">\n <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n </label></li>\n {{ /foreach }}\n </ul>\n </script>\n <div slot=\"output\"></div>\n </nano-algolia-filter>\n </nano-details>\n {{ /if }}\n\n {{ @if(it.origFilters['categories_without_path']) }}\n <nano-details open={true} icon-rotation=\"180\">\n <strong slot=\"label\">Category</strong>\n <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n <nano-algolia-filter store-id=\"searchf4\" store-method=\"url-hash-push\" filter-name=\"categories_without_path\">\n <script type=\"text/template\" slot=\"filter-template\">\n <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n {{ @foreach(it.dyn) => filter, filterVal }}\n {{ @if(!filter.match(/publication/)) }}\n <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n <input class=\"sc-nano-global-search-results filter-cb\" type=\"checkbox\" value=\"{{ filter }}\" id=\"cwp-{{ filter }}-{{x}}\" />\n <label class=\"sc-nano-global-search-results filter-label\" for=\"cwp-{{ filter }}-{{x}}\">\n <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n </label></li>\n {{ /if }}\n {{ /foreach }}\n </ul>\n </script>\n <div slot=\"output\"></div>\n </nano-algolia-filter>\n </nano-details>\n {{ /if }}\n\n {{ @if(it.origFilters['tags']) }}\n <nano-details open={true} icon-rotation=\"180\">\n <strong slot=\"label\">Tags</strong>\n <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n <nano-algolia-filter store-id=\"searchf5\" store-method=\"url-hash-push\" filter-name=\"tags\">\n <script type=\"text/template\" slot=\"filter-template\">\n <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n {{ @foreach(it.dyn) => filter, filterVal }}\n <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n <input class=\"filter-cb sc-nano-global-search-results\" type=\"checkbox\" value=\"{{ filter }}\" id=\"tags-{{ filter }}-{{x}}\" />\n <label class=\"filter-label sc-nano-global-search-results\" for=\"tags-{{ filter }}-{{x}}\">\n <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n </label></li>\n {{ /foreach }}\n </ul>\n </script>\n <div slot=\"output\"></div>\n </nano-algolia-filter>\n </nano-details>\n {{ /if }}\n </div>\n </div>\n </div>\n {{ /if }}\n </div>`}\n </script>\n <div slot=\"output\"></div>\n <slot />\n </nano-algolia>\n </Host>\n );\n }\n}\n"]}

package/dist/nano-components/p-8c9e74c7.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{g as t}from"./p-a5917bdc.js";let s=[];class i{constructor(t){this.tabDirection="forward",this.element=t,this.handleFocusIn=this.handleFocusIn.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}activate(){s.push(this.element),document.addEventListener("focusin",this.handleFocusIn),document.addEventListener("keydown",this.handleKeyDown)}deactivate(){s=s.filter((t=>t!==this.element)),document.removeEventListener("focusin",this.handleFocusIn),document.removeEventListener("keydown",this.handleKeyDown)}isActive(){return s[s.length-1]===this.element}handleFocusIn(s){const i=s.composedPath();if(this.isActive()&&!i.includes(this.element)){const s=t(this.element);s["backward"===this.tabDirection?s.length-1:0].focus({preventScroll:!0})}}handleKeyDown(t){"Tab"===t.key&&t.shiftKey&&(this.tabDirection="backward",setTimeout((()=>this.tabDirection="forward")))}}export{i as M}
2	+ //# sourceMappingURL=p-8c9e74c7.js.map

package/dist/nano-components/p-8c9e74c7.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["src/utils/modal.ts"],"names":["activeModals","Modal","[object Object]","element","this","tabDirection","handleFocusIn","bind","handleKeyDown","push","document","addEventListener","filter","modal","removeEventListener","length","event","path","composedPath","isActive","includes","tabbableElements","getTabbableElements","focus","preventScroll","key","shiftKey","setTimeout"],"mappings":"oCAEA,IAAIA,EAA8B,SAEbC,EAInBC,YAAYC,GAFZC,KAAAC,aAAuC,UAGrCD,KAAKD,QAAUA,EACfC,KAAKE,cAAgBF,KAAKE,cAAcC,KAAKH,MAC7CA,KAAKI,cAAgBJ,KAAKI,cAAcD,KAAKH,MAG/CF,WACEF,EAAaS,KAAKL,KAAKD,SACvBO,SAASC,iBAAiB,UAAWP,KAAKE,eAC1CI,SAASC,iBAAiB,UAAWP,KAAKI,eAG5CN,aACEF,EAAeA,EAAaY,QAAQC,GAAUA,IAAUT,KAAKD,UAC7DO,SAASI,oBAAoB,UAAWV,KAAKE,eAC7CI,SAASI,oBAAoB,UAAWV,KAAKI,eAG/CN,WAEE,OAAOF,EAAaA,EAAae,OAAS,KAAOX,KAAKD,QAGxDD,cAAcc,GACZ,MAAMC,EAAOD,EAAME,eAGnB,GAAId,KAAKe,aAAeF,EAAKG,SAAShB,KAAKD,SAAU,CACnD,MAAMkB,EAAmBC,EAAoBlB,KAAKD,SAGlDkB,EADwB,aAAtBjB,KAAKC,aAA8BgB,EAAiBN,OAAS,EAAI,GAC3CQ,MAAM,CAAEC,eAAe,KAInDtB,cAAcc,GAEM,QAAdA,EAAMS,KAAiBT,EAAMU,WAC/BtB,KAAKC,aAAe,WACpBsB,YAAW,IAAOvB,KAAKC,aAAe","sourcesContent":["import { getTabbableElements } from './tabbable';\n\nlet activeModals: HTMLElement[] = [];\n\nexport default class Modal {\n element: HTMLElement;\n tabDirection: 'forward' | 'backward' = 'forward';\n\n constructor(element: HTMLElement) {\n this.element = element;\n this.handleFocusIn = this.handleFocusIn.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n }\n\n activate() {\n activeModals.push(this.element);\n document.addEventListener('focusin', this.handleFocusIn);\n document.addEventListener('keydown', this.handleKeyDown);\n }\n\n deactivate() {\n activeModals = activeModals.filter((modal) => modal !== this.element);\n document.removeEventListener('focusin', this.handleFocusIn);\n document.removeEventListener('keydown', this.handleKeyDown);\n }\n\n isActive() {\n // The \"active\" modal is always the most recent one shown\n return activeModals[activeModals.length - 1] === this.element;\n }\n\n handleFocusIn(event: Event) {\n const path = event.composedPath();\n\n // Trap focus so it doesn't go out of the modal's boundary\n if (this.isActive() && !path.includes(this.element)) {\n const tabbableElements = getTabbableElements(this.element);\n const index =\n this.tabDirection === 'backward' ? tabbableElements.length - 1 : 0;\n tabbableElements[index].focus({ preventScroll: true });\n }\n }\n\n handleKeyDown(event: KeyboardEvent) {\n // Quick hack to determine tab direction\n if (event.key === 'Tab' && event.shiftKey) {\n this.tabDirection = 'backward';\n setTimeout(() => (this.tabDirection = 'forward'));\n }\n }\n}\n"]}

package/dist/nano-components/p-8fe04c5c.system.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ var __awaiter=this&&this.__awaiter\|\|function(t,n,e,i){function a(t){return t instanceof e?t:new e((function(n){n(t)}))}return new(e\|\|(e=Promise))((function(e,o){function r(t){try{s(i.next(t))}catch(n){o(n)}}function l(t){try{s(i["throw"](t))}catch(n){o(n)}}function s(t){t.done?e(t.value):a(t.value).then(r,l)}s((i=i.apply(t,n\|\|[])).next())}))};var __generator=this&&this.__generator\|\|function(t,n){var e={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},i,a,o,r;return r={next:l(0),throw:l(1),return:l(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function l(t){return function(n){return s([t,n])}}function s(r){if(i)throw new TypeError("Generator is already executing.");while(e)try{if(i=1,a&&(o=r[0]&2?a["return"]:r[0]?a["throw"]\|\|((o=a["return"])&&o.call(a),0):a.next)&&!(o=o.call(a,r[1])).done)return o;if(a=0,o)r=[r[0]&2,o.value];switch(r[0]){case 0:case 1:o=r;break;case 4:e.label++;return{value:r[1],done:false};case 5:e.label++;a=r[1];r=[0];continue;case 7:r=e.ops.pop();e.trys.pop();continue;default:if(!(o=e.trys,o=o.length>0&&o[o.length-1])&&(r[0]===6\|\|r[0]===2)){e=0;continue}if(r[0]===3&&(!o\|\|r[1]>o[0]&&r[1]<o[3])){e.label=r[1];break}if(r[0]===6&&e.label<o[1]){e.label=o[1];o=r;break}if(o&&e.label<o[2]){e.label=o[2];e.ops.push(r);break}if(o[2])e.ops.pop();e.trys.pop();continue}r=n.call(t,e)}catch(l){r=[6,l];a=0}finally{i=o=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};System.register(["./p-2d59dda3.system.js","./p-3d1c1c19.system.js","./p-22b50344.system.js","./p-a057ad2d.system.js"],(function(t){"use strict";var n,e,i,a,o,r,l,s;return{setters:[function(t){n=t.r;e=t.c;i=t.h;a=t.e;o=t.g},function(t){r=t.c},function(t){l=t.a},function(t){s=t.c}],execute:function(){var p='.sc-nano-input-h{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-nano-input,.sc-nano-input::before,.sc-nano-input::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-nano-input-h{--placeholder-color:var(--nano-input-placeholder-color, initial);--placeholder-font-style:var(--nano-input-placeholder-style, initial);--placeholder-font-weight:var(--nano-input-placeholder-weight, initial);--placeholder-opacity:var(--nano-input-placeholder-opacity, 0.5);--padding-top:var(--nano-input-padding-top, var(--nano-input-padding, 8px));--padding-end:var(--nano-input-padding-end, var(--nano-input-padding, 8px));--padding-bottom:var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));--padding-start:var(--nano-input-padding-start, var(--nano-input-padding, 8px));--color-invalid:var(--nano-color-danger-rgb, 239, 65, 53);--color--focus-rgb:var(\n --nano-color-base-rgb,\n var(--nano-color-primary-rgb, 0, 132, 169)\n );--input-font-size:var(--nano-input-font-size, 0.87em);--input-text-color:var(--nano-input-text-color, #4a4a4a);--input-border-width:var(--input-border-width-sh, var(--nano-input-border-width, 2px));--input-border-color:var(--nano-input-border-color, #e4e6e8);--input-border-radius:var(--nano-input-border-radius, 0);--input-border-style:var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);--input-border-style--invalid:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #fac6c3);--input-border-style--invalid-focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #f36d64);--input-bg-color:var(--nano-input-background-color, #fff);--input-bg-color--focus:var(--input-bg-color);--input-bg-color--invalid:var(--nano-input-background-color, #fee8de);--invalid-msg-color:rgba(var(--color-invalid), 1);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #687576);--clear-btn-color:var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));--clear-btn-color--hover:rgba(var(--color--focus-rgb), 1);--clear-btn-color--invalid:rgba(var(--color-invalid), 1);--label-color:var(--nano-input-label-color, "currentColor");--label-color--focus:var(--label-color);--label-color--invalid:var(--nano-input-label-color-invalid, "currentColor");--label-font-size:var(--nano-input-label-color, 1em);--multi-input-value-bg:var(--nano-input-tag-bg, 186, 220, 240);--multi-input-value-text-color:var(--nano-input-tag-color, #455556);--multi-input-value-border:var(--nano-input-tag-color, #90c6e7);position:relative;width:100%;padding:0 !important;color:currentColor;display:inline-block}.nano-color.sc-nano-input-h{color:var(--nano-color-base);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-color-tint, var(--nano-color-primary-tint, #2696b6))}[disabled].sc-nano-input-h:not([disabled=false]){opacity:0.7}label.sc-nano-input,.more.sc-nano-input,.error.sc-nano-input,.helper.sc-nano-input{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}label.visually-hide.sc-nano-input,.more.visually-hide.sc-nano-input,.error.visually-hide.sc-nano-input,.helper.visually-hide.sc-nano-input{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.placeholder-as-label.sc-nano-input{padding-left:var(--padding-start);padding-right:0;padding-top:0;padding-bottom:0;color:var(--label-color);position:absolute;font-size:1.4em;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transform-origin:top left;transform-origin:top left;top:50%;-webkit-transition:0.125s ease-in;transition:0.125s ease-in;opacity:0.7}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.placeholder-as-label.sc-nano-input{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:0;padding-inline-end:0}}.has-focus.sc-nano-input-h .placeholder-as-label.sc-nano-input{-webkit-transform:translateY(-120%);transform:translateY(-120%);font-size:0.9em}.is-invalid.sc-nano-input-h .placeholder-as-label.sc-nano-input{color:var(--invalid-msg-color)}.has-value.sc-nano-input-h .placeholder-as-label.sc-nano-input{-webkit-transform:translateY(-120%);transform:translateY(-120%);font-size:0.9em}.placeholder-as-label.sc-nano-input~.native-input-wrap.sc-nano-input{font-size:1.1em}.textarea.sc-nano-input .placeholder-as-label.sc-nano-input{top:50%}.has-focus.sc-nano-input-h .textarea.sc-nano-input .placeholder-as-label.sc-nano-input{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.has-value.sc-nano-input-h .textarea.sc-nano-input .placeholder-as-label.sc-nano-input{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.label.sc-nano-input{color:var(--label-color);font-size:var(--label-font-size);padding-bottom:var(--padding-bottom);line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex}.label.sc-nano-input .label-placeholder.sc-nano-input{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.label.sc-nano-input .placeholder.sc-nano-input{margin-left:0;margin-right:5px;margin-top:0;margin-bottom:0;opacity:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-transition:0.3s ease opacity;transition:0.3s ease opacity;font-size:0.9em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.label.sc-nano-input .placeholder.sc-nano-input{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:5px;margin-inline-end:5px}}.label.sc-nano-input .charcount.sc-nano-input{margin-left:auto;margin-right:0;margin-top:0;margin-bottom:0;font-size:0.9em;opacity:0.5}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.label.sc-nano-input .charcount.sc-nano-input{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:0;margin-inline-end:0}}.has-value.sc-nano-input-h .label.sc-nano-input .placeholder.sc-nano-input{opacity:0.5}.has-focus.sc-nano-input-h .label.sc-nano-input{color:var(--label-color--focus)}.is-invalid.sc-nano-input-h .label.sc-nano-input{color:var(--label-color--invalid)}.more.sc-nano-input{height:1em;margin-left:3px;margin-right:0;margin-top:4px;margin-bottom:var(--padding-bottom);position:relative}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.more.sc-nano-input{margin-left:unset;margin-right:unset;-webkit-margin-start:3px;margin-inline-start:3px;-webkit-margin-end:0;margin-inline-end:0}}.helper.sc-nano-input,.error.sc-nano-input{top:0;left:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity;width:auto}.helper.sc-nano-input{font-style:italic;color:var(--help-msg-color)}[show-inline-error].sc-nano-input-h:not([show-inline-error=false]).is-invalid .helper.sc-nano-input{opacity:0}.error.sc-nano-input{opacity:0;color:var(--invalid-msg-color);font-stretch:condensed}.is-invalid.sc-nano-input-h .error.sc-nano-input{opacity:1}.input.sc-nano-input{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--input-border-radius);width:100%;padding:0 !important;position:relative;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;background:var(--input-bg-color);border:var(--input-border-style);border-width:var(--input-border-width);font-size:var(--input-font-size)}.has-focus.sc-nano-input-h .input.sc-nano-input{background:var(--input-bg-color--focus);border:var(--input-border-style--focus);border-width:var(--input-border-width);z-index:1}.is-invalid.sc-nano-input-h .input.sc-nano-input{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid);border-width:var(--input-border-width)}.is-invalid.has-focus.sc-nano-input-h .input.sc-nano-input{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid-focus);border-width:var(--input-border-width)}.native-input-wrap.sc-nano-input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-flex:1;-ms-flex:1;flex:1}.native-input.sc-nano-input{border-radius:var(--input-border-radius);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;text-overflow:ellipsis;color:var(--input-text-color);display:inline-block;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:2.5em;min-height:2.5em;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;overflow:hidden}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.native-input.sc-nano-input{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.native-input.sc-nano-input::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-input::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-input:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-input::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-input::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-input::-moz-placeholder{line-height:2.8em;text-overflow:ellipsis}.native-input.sc-nano-input:-webkit-autofill{background-color:transparent}.native-input.sc-nano-input::-webkit-search-decoration,.native-input.sc-nano-input::-webkit-search-cancel-button,.native-input.sc-nano-input::-webkit-search-results-button,.native-input.sc-nano-input::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.native-input.sc-nano-input:invalid{-webkit-box-shadow:none;box-shadow:none}.native-input.sc-nano-input::-ms-clear,.native-input.sc-nano-input::-ms-reveal{display:none}.native-input.resizable.sc-nano-input{resize:vertical;overflow:auto}.textarea.sc-nano-input .native-input.sc-nano-input{line-height:1.5em;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);white-space:pre-wrap}.textarea.sc-nano-input .native-input.sc-nano-input::-webkit-input-placeholder{line-height:1.5em}.textarea.sc-nano-input .native-input.sc-nano-input::-moz-placeholder{line-height:1.5em}.textarea.sc-nano-input .native-input.sc-nano-input:-ms-input-placeholder{line-height:1.5em}.textarea.sc-nano-input .native-input.sc-nano-input::-ms-input-placeholder{line-height:1.5em}.textarea.sc-nano-input .native-input.sc-nano-input::placeholder{line-height:1.5em}.has-float-label.sc-nano-input .native-input.sc-nano-input{padding-top:1.4em}.has-float-label.textarea.sc-nano-input .native-input.sc-nano-input{padding-top:1.8em}.legacy.sc-nano-input .native-input.sc-nano-input{-webkit-box-sizing:content-box;box-sizing:content-box}.native-input[disabled].sc-nano-input{opacity:0.4}.input-clear-icon.sc-nano-input,.inline-button.sc-nano-input{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;background-position:center;font-size:1.4em;color:var(--clear-btn-color);border:0;outline:none;background-color:transparent;background-repeat:no-repeat;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:auto}.is-invalid.sc-nano-input-h .input-clear-icon.sc-nano-input,.is-invalid.sc-nano-input-h .inline-button.sc-nano-input{color:var(--clear-btn-color--invalid)}.has-float-label.sc-nano-input .input-clear-icon.sc-nano-input,.has-float-label.sc-nano-input .inline-button.sc-nano-input{right:0;position:absolute;top:0;height:100%;left:auto}.rtl.has-float-label.sc-nano-input .input-clear-icon.sc-nano-input,.rtl.has-float-label.sc-nano-input .inline-button.sc-nano-input{right:auto;left:0}.inline-button.sc-nano-input-s>,.inline-button .sc-nano-input-s>{font-size:1em;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.inline-button.sc-nano-input-s>,.inline-button .sc-nano-input-s>{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.sc-nano-input-h[disabled]:not([disabled=false]) .inline-button.sc-nano-input-s>,.sc-nano-input-h[disabled]:not([disabled=false]) .inline-button .sc-nano-input-s>{pointer-events:none}.input-clear-icon.sc-nano-input{padding:0;opacity:0;width:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.has-value.sc-nano-input-h .input-clear-icon.sc-nano-input{padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;opacity:1;width:auto}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.has-value.sc-nano-input-h .input-clear-icon.sc-nano-input{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.input-clear-icon.sc-nano-input:hover{color:var(--clear-btn-color--hover)}.has-inline-button.has-float-label.sc-nano-input .input-clear-icon.sc-nano-input{right:1.5em;position:absolute;top:0;height:100%;left:auto}.rtl.has-float-label.has-inline-button.sc-nano-input .input-clear-icon.sc-nano-input{right:auto;left:1.2em}';var u=t("nano_input",function(){function t(t){var i=this;n(this,t);this.nanoInput=e(this,"nanoInput",7);this.nanoChange=e(this,"nanoChange",7);this.nanoBlur=e(this,"nanoBlur",7);this.nanoFocus=e(this,"nanoFocus",7);this.nanoDidLoad=e(this,"nanoDidLoad",7);this.nanoDidUnload=e(this,"nanoDidUnload",7);this.nanoValidate=e(this,"nanoValidate",7);this.inputId="nano-input-"+d++;this.didBlurAfterEdit=false;this.rtl=false;this.charCount=0;this.hasRendered=false;this.hasFocus=false;this.isLegacy=!document.head.attachShadow;this.hasLabelSlot=false;this.hasButtonSlot=false;this.hasHelperSlot=false;this._invalid=false;this.autocapitalise="none";this.autocomplete="off";this.autocorrect="off";this.autofocus=false;this.clearInput=false;this.debounce=0;this.disabled=false;this.validateOn="submit";this.showInlineError=true;this.hideLabel=false;this.floatLabel=false;this.name=this.inputId;this.readonly=false;this.required=false;this.spellcheck=false;this.type="text";this.value="";this.resize="auto";this.rows=2;this.showCharCount=false;this.validate=function(t){if(i.validateOn==="submitThenDirty")i.validateOn="dirty";if(!i.nativeInput.validity.valid){if(i.showInlineError&&!!i.errorContainer){if(t)t.preventDefault();i.errorContainer.innerText=i.nativeInput.validationMessage}i._invalid=true}else i._invalid=false;i.nanoValidate.emit({isValid:!i._invalid,errorMessage:i.nativeInput.validationMessage,originalEvent:t})};this.onInput=function(t){var n=t.target;if(n)i.value=n.value\|\|"";i.nanoInput.emit(t)};this.handleDocumentMouseDown=function(t){var n=t.target;if(r(i.el.tagName.toLowerCase(),n)!==i.el){i.onBlur()}};this.handleDocumentKeyDown=function(t){if(t.key!=="Tab")return;setTimeout((function(){if(document.activeElement&&r(i.el.tagName.toLowerCase(),document.activeElement)!==i.el){i.onBlur();return}}))};this.onBlur=function(){i.hasFocus=false;i.focusChanged();if(i.validateOn==="dirty")i.validate();document.removeEventListener("keydown",i.handleDocumentKeyDown);document.removeEventListener("mousedown",i.handleDocumentMouseDown);i.nanoBlur.emit()};this.onFocus=function(){i.hasFocus=true;i.focusChanged();document.addEventListener("keydown",i.handleDocumentKeyDown);document.addEventListener("mousedown",i.handleDocumentMouseDown);i.nanoFocus.emit()};this.onKeydown=function(){if(i.shouldClearOnEdit()){if(i.didBlurAfterEdit&&i.hasValue()){i.clearTextInput()}i.didBlurAfterEdit=false}};this.clearTextInput=function(t){if(i.clearInput&&!i.readonly&&!i.disabled&&t){t.preventDefault();t.stopPropagation()}i.value="";if(i.nativeInput){i.nativeInput.value=""}}}Object.defineProperty(t.prototype,"invalid",{get:function(){return this._invalid},enumerable:false,configurable:true});t.prototype.shouldValidate=function(){var t=this;if(!this.hasRendered)return;setTimeout((function(){if(t.validateOn==="dirty")t.validate()}),20)};t.prototype.valueChanged=function(){var t=this;this.nanoChange.emit({value:this.value});this.charCount=this.value.length;if(this.type==="textarea"&&this.resize==="auto"){this.nativeInput.style.height="auto";if(this.value.length)this.nativeInput.style.height=this.nativeInput.scrollHeight+"px"}setTimeout((function(){if(t.validateOn==="dirty")t.validate()}),20)};t.prototype.debounceChanged=function(){this.nanoChange=l(this.nanoChange,this.debounce)};t.prototype.reportValidity=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){if(t)this.validate();return[2,{isValid:!this._invalid,errorMessage:this.nativeInput.validationMessage}]}))}))};t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(this.nativeInput){this.nativeInput.focus()}return[2]}))}))};t.prototype.getInputElement=function(){return Promise.resolve(this.nativeInput)};t.prototype.showError=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){if(this.nativeInput){this.nativeInput.setCustomValidity(t);this.validate()}return[2]}))}))};t.prototype.shouldClearOnEdit=function(){var t=this,n=t.type,e=t.clearOnEdit;return e===undefined?n==="password":e};t.prototype.getValue=function(){return this.value\|\|""};t.prototype.focusChanged=function(){if(!this.hasFocus&&this.shouldClearOnEdit()&&this.hasValue()){this.didBlurAfterEdit=true}};t.prototype.hasValue=function(){return this.getValue().length>0};t.prototype.slotChangeObserver=function(){var t=this;if(this.mo)this.mo.disconnect();var n=this.mo=new MutationObserver((function(){return t.processSlottedContent()}));n.observe(this.el,{childList:true,subtree:true})};t.prototype.processSlottedContent=function(){var t=this;this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]');this.hasButtonSlot=!!this.el.querySelector('[slot="inline-button"]');this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]');var n=!!this.el.querySelector('[slot="legacy"]');if(!n)return;var e=this.el.querySelector('input:not([class="sc-nano-input"])');var i=this.el.querySelector('label:not([class*="sc-nano-input"])');if(i)this.label=this.label\|\|i.innerHTML;if(e){Array.from(e.attributes).filter((function(n){return n.specified&&n.nodeName in t})).map((function(n){return t[n.nodeName]=n.nodeValue}))}if(i\|\|e){var a=this.el.querySelectorAll('[slot="legacy"]');if(a)a.forEach((function(t){return t.parentNode.removeChild(t)}))}};t.prototype.connectedCallback=function(){this.debounceChanged();{this.el.dispatchEvent(new CustomEvent("nanoDidLoad",{detail:this.el}))}};t.prototype.disconnectedCallback=function(){{document.dispatchEvent(new CustomEvent("nanoDidUnload",{detail:this.el}))}if(this.mo)this.mo.disconnect()};t.prototype.componentDidLoad=function(){this.slotChangeObserver();this.hasRendered=true};t.prototype.componentWillLoad=function(){this.processSlottedContent()};t.prototype.renderLabel=function(t,n){if(!this.label&&!this.hasLabelSlot)return;if(n==="float"){return i("label",{class:"placeholder-as-label",htmlFor:this.inputId,id:t},this.label&&this.label,!this.label&&this.hasLabelSlot&&i("slot",{name:"label"}))}else{return i("label",{class:{label:true,"visually-hide":this.hideLabel},htmlFor:this.inputId,id:t},i("div",{class:"label-placeholder"},this.placeholder&&this.hasValue()&&this.rtl&&i("span",{class:"placeholder"},this.placeholder," / "),i("span",{class:"labeltext"},this.label&&this.label,!this.label&&this.hasLabelSlot&&i("slot",{name:"label"})),this.placeholder&&this.hasValue()&&!this.rtl&&i("span",{class:"placeholder"}," / ",this.placeholder)),this.showCharCount&&i("span",{class:"charcount"},this.maxlength?this.maxlength-this.charCount+" left":this.charCount+" characters"))}};t.prototype.render=function(){var t=this;var n=this.getValue();var e=this.inputId+"-lbl";var o=this.showInlineError\|\|this.hasHelperSlot?this.inputId+"-more":"";this.rtl=this.el.ownerDocument.dir==="rtl";return i(a,{"aria-disabled":this.disabled?"true":null,dir:this.rtl?"rtl":null,class:Object.assign(Object.assign({},s(this.color)),{"has-value":this.hasValue(),"has-focus":this.hasFocus,"is-invalid":this._invalid})},!this.floatLabel&&this.renderLabel(e),i("div",{class:{"has-label":this.label!==null&&!this.floatLabel,"has-float-label":this.label!==null&&this.floatLabel,rtl:this.rtl,"has-inline-button":this.hasButtonSlot,legacy:this.isLegacy,input:true,textarea:this.type==="textarea"}},this.floatLabel&&this.renderLabel(e,"float"),i("div",{class:"native-input-wrap"},this.type!=="textarea"&&i("input",{id:this.inputId,class:"native-input",ref:function(n){return t.nativeInput=n},"aria-labelledby":e+" "+o,disabled:this.disabled,accept:this.accept,autoCapitalize:this.autocapitalise,autoComplete:this.autocomplete,autoCorrect:this.autocorrect,autoFocus:this.autofocus,inputMode:this.inputmode,form:this.form,min:this.min,max:this.max,minLength:this.minlength,maxLength:this.maxlength,multiple:this.multiple,name:this.name,pattern:this.pattern,placeholder:!this.floatLabel&&this.placeholder?this.placeholder:"",readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,step:this.step,size:this.size,type:this.type,value:n,onInput:this.onInput,onFocus:this.onFocus,onKeyDown:this.onKeydown,onInvalid:this.validate}),this.type==="textarea"&&i("textarea",{rows:this.floatLabel?1:this.rows,id:this.inputId,class:{"native-input":true,resizable:this.resize==="true"},ref:function(n){return t.nativeInput=n},"aria-labelledby":e+" "+o,disabled:this.disabled,autoCapitalize:this.autocapitalise,autoCorrect:this.autocorrect,autoFocus:this.autofocus,inputMode:this.inputmode,form:this.form,minLength:this.minlength,maxLength:this.maxlength,name:this.name,placeholder:!this.floatLabel&&this.placeholder?this.placeholder:"",readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,value:n,onInput:this.onInput,onFocus:this.onFocus,onKeyDown:this.onKeydown,onInvalid:this.validate}),this.clearInput&&!this.readonly&&!this.disabled&&i("button",{type:"button",class:"icon input-clear-icon",tabindex:"-1",onTouchStart:this.clearTextInput,onMouseDown:this.clearTextInput},i("nano-icon",{name:"light/times"})),this.hasButtonSlot?i("span",{class:"inline-button"},i("slot",{name:"inline-button"})):"")),(this.showInlineError\|\|this.hasHelperSlot)&&i("div",{class:"more",id:o},!!this.showInlineError?i("div",{class:"error",ref:function(n){return t.errorContainer=n}}):"",i("div",{class:"helper"},i("slot",{name:"helper"}))),i("slot",null))};Object.defineProperty(t.prototype,"el",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{minlength:["shouldValidate"],maxlength:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],required:["shouldValidate"],disabled:["shouldValidate"],validateOn:["shouldValidate"],readonly:["shouldValidate"],pattern:["shouldValidate"],inputmode:["shouldValidate"],value:["valueChanged"],debounce:["debounceChanged"]}},enumerable:false,configurable:true});return t}());var d=0;u.style=p}}}));
2	+ //# sourceMappingURL=p-8fe04c5c.system.entry.js.map

package/dist/nano-components/p-8fe04c5c.system.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["src/components/input/input.scss?tag=nano-input&encapsulation=scoped","src/components/input/input.tsx"],"names":["inputCss","Input","exports","class_1","hostRef","_this","this","inputId","inputIds","didBlurAfterEdit","rtl","charCount","hasRendered","hasFocus","isLegacy","document","head","attachShadow","hasLabelSlot","hasButtonSlot","hasHelperSlot","_invalid","autocapitalise","autocomplete","autocorrect","autofocus","clearInput","debounce","disabled","validateOn","showInlineError","hideLabel","floatLabel","name","readonly","required","spellcheck","type","value","resize","rows","showCharCount","validate","ev","nativeInput","validity","valid","errorContainer","preventDefault","innerText","validationMessage","nanoValidate","emit","isValid","errorMessage","originalEvent","onInput","input","target","nanoInput","handleDocumentMouseDown","closestElement","el","tagName","toLowerCase","onBlur","handleDocumentKeyDown","key","setTimeout","activeElement","focusChanged","removeEventListener","nanoBlur","onFocus","addEventListener","nanoFocus","onKeydown","shouldClearOnEdit","hasValue","clearTextInput","stopPropagation","Object","defineProperty","prototype","shouldValidate","valueChanged","nanoChange","length","style","height","scrollHeight","debounceChanged","debounceEvent","reportValidity","validateFirst","setFocus","focus","getInputElement","Promise","resolve","showError","message","setCustomValidity","_a","clearOnEdit","undefined","getValue","slotChangeObserver","mo","disconnect","MutationObserver","processSlottedContent","observe","childList","subtree","querySelectorAll","querySelector","hasLegacySlot","existingInput","existingLabel","label","innerHTML","Array","from","attributes","filter","attr","specified","nodeName","map","nodeValue","children","forEach","n","parentNode","removeChild","connectedCallback","dispatchEvent","CustomEvent","detail","disconnectedCallback","componentDidLoad","componentWillLoad","renderLabel","labelId","position","h","class","htmlFor","id","visually-hide","placeholder","maxlength","render","moreId","ownerDocument","dir","Host","aria-disabled","assign","createColorClasses","color","has-value","has-focus","is-invalid","has-label","has-float-label","has-inline-button","legacy","textarea","ref","aria-labelledby","accept","autoCapitalize","autoComplete","autoCorrect","autoFocus","inputMode","inputmode","form","min","max","minLength","minlength","maxLength","multiple","pattern","readOnly","step","size","onKeyDown","onInvalid","native-input","resizable","tabindex","onTouchStart","onMouseDown","div"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import './input.vars';\n\n:host {\n @include inputVars;\n\n position: relative;\n width: 100%;\n padding: 0 !important;\n color: currentColor;\n display: inline-block;\n}\n\n:host(.nano-color) {\n color: current-color(base);\n\n --input-border-style--focus: #{$input-border-style} var(--nano-color-tint, #{nano-color(primary, tint)});\n}\n\n:host([disabled]:not([disabled='false'])) {\n opacity: 0.7;\n}\n\nlabel,\n.more,\n.error,\n.helper {\n display: block;\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n\n &.visually-hide {\n @include visually-hide;\n }\n}\n\n.placeholder-as-label {\n @include padding(0, 0, 0, var(--padding-start));\n\n color: var(--label-color);\n position: absolute;\n font-size: 1.4em;\n transform: translateY(-50%);\n transform-origin: top left;\n top: 50%;\n transition: 0.125s ease-in;\n opacity: 0.7;\n\n :host(.has-focus) & {\n transform: translateY(-120%);\n font-size: 0.9em;\n }\n\n :host(.is-invalid) & {\n color: var(--invalid-msg-color);\n }\n\n :host(.has-value) & {\n transform: translateY(-120%);\n font-size: 0.9em;\n }\n\n & ~ .native-input-wrap {\n font-size: 1.1em;\n }\n\n .textarea & {\n top: 50%;\n\n :host(.has-focus) & {\n top: 0;\n transform: translateY(38%);\n }\n\n :host(.has-value) & {\n top: 0;\n transform: translateY(38%);\n }\n }\n}\n\n.label {\n color: var(--label-color);\n font-size: var(--label-font-size);\n padding-bottom: var(--padding-bottom);\n line-height: 1;\n display: flex;\n\n .label-placeholder {\n flex: 1;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .placeholder {\n @include margin(0, 5px, 0, 0);\n\n opacity: 0;\n appearance: none;\n transition: 0.3s ease opacity;\n font-size: 0.9em;\n }\n\n .charcount {\n @include margin(0, 0, 0, auto);\n\n font-size: 0.9em;\n opacity: 0.5;\n }\n\n :host(.has-value) & {\n .placeholder {\n opacity: 0.5;\n }\n }\n\n :host(.has-focus) & {\n color: var(--label-color--focus);\n }\n\n :host(.is-invalid) & {\n color: var(--label-color--invalid);\n }\n}\n\n.more {\n height: 1em;\n\n @include margin(4px, 0, var(--padding-bottom), 3px);\n\n position: relative;\n}\n\n.helper,\n.error {\n top: 0;\n left: 0;\n position: absolute;\n font-size: var(--invalid-msg-font-size);\n line-height: 1.2;\n transition: 0.3s ease-out opacity;\n width: auto;\n}\n\n.helper {\n font-style: italic;\n color: var(--help-msg-color);\n\n :host([show-inline-error]:not([show-inline-error='false']).is-invalid) & {\n opacity: 0;\n }\n}\n\n.error {\n opacity: 0;\n color: var(--invalid-msg-color);\n font-stretch: condensed;\n\n :host(.is-invalid) & {\n opacity: 1;\n }\n}\n\n.input {\n @include text-inherit();\n @include border-radius(var(--input-border-radius));\n\n width: 100%;\n padding: 0 !important;\n position: relative;\n flex: 1 0 auto;\n display: flex;\n background: var(--input-bg-color);\n border: var(--input-border-style);\n border-width: var(--input-border-width);\n font-size: var(--input-font-size);\n\n :host(.has-focus) & {\n background: var(--input-bg-color--focus);\n border: var(--input-border-style--focus);\n border-width: var(--input-border-width);\n z-index: 1;\n }\n\n :host(.is-invalid) & {\n background: var(--input-bg-color--invalid);\n border: var(--input-border-style--invalid);\n border-width: var(--input-border-width);\n }\n\n :host(.is-invalid.has-focus) & {\n background: var(--input-bg-color--invalid);\n border: var(--input-border-style--invalid-focus);\n border-width: var(--input-border-width);\n }\n}\n\n// Native Text Input\n// --------------------------------------------------\n\n.native-input-wrap {\n display: flex;\n align-items: stretch;\n flex: 1;\n}\n\n.native-input {\n @include border-radius(var(--input-border-radius));\n @include padding(0, var(--padding-end), 0, var(--padding-start));\n @include text-inherit();\n\n text-overflow: ellipsis;\n color: var(--input-text-color);\n display: inline-block;\n flex: 1;\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n border: 0;\n outline: none;\n background: transparent;\n appearance: none;\n line-height: 2.5em;\n min-height: 2.5em;\n margin: 0;\n box-sizing: border-box;\n resize: none;\n overflow: hidden;\n\n &::placeholder {\n color: var(--placeholder-color);\n font-family: inherit;\n font-style: var(--placeholder-font-style);\n font-weight: var(--placeholder-font-weight);\n opacity: var(--placeholder-opacity);\n line-height: 2.5em;\n min-height: 2.5em;\n // text-overflow: ellipsis;\n }\n\n &::-moz-placeholder {\n line-height: 2.8em;\n text-overflow: ellipsis;\n }\n\n &:-webkit-autofill {\n background-color: transparent;\n }\n\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n appearance: none;\n }\n\n &:invalid {\n box-shadow: none;\n }\n\n &::-ms-clear,\n &::-ms-reveal {\n display: none;\n }\n\n &.resizable {\n resize: vertical;\n overflow: auto;\n }\n\n .textarea & {\n line-height: 1.5em;\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n white-space: pre-wrap;\n\n &::placeholder {\n line-height: 1.5em;\n }\n }\n\n .has-float-label & {\n padding-top: 1.4em;\n }\n\n .has-float-label.textarea & {\n padding-top: 1.8em;\n }\n\n .legacy & {\n box-sizing: content-box;\n }\n}\n\n.native-input[disabled] {\n opacity: 0.4;\n}\n\n// Clear Input Icon\n// --------------------------------------------------\n.input-clear-icon,\n.inline-button {\n @include margin(0);\n @include background-position(center);\n\n font-size: 1.4em;\n color: var(--clear-btn-color);\n border: 0;\n outline: none;\n background-color: transparent;\n background-repeat: no-repeat;\n display: flex;\n align-items: stretch;\n width: auto;\n\n :host(.is-invalid) & {\n color: var(--clear-btn-color--invalid);\n }\n\n .has-float-label & {\n right: 0;\n position: absolute;\n top: 0;\n height: 100%;\n left: auto;\n }\n\n .rtl.has-float-label & {\n right: auto;\n left: 0;\n }\n}\n\n.inline-button::slotted(*),\n.inline-button ::slotted(*) {\n font-size: 1em;\n\n @include padding(0, var(--padding-end), 0, var(--padding-start));\n\n align-items: center;\n display: flex;\n height: 100%;\n\n :host([disabled]:not([disabled='false'])) & {\n pointer-events: none;\n }\n}\n\n.input-clear-icon {\n padding: 0;\n opacity: 0;\n width: 0;\n appearance: none;\n align-items: center;\n overflow: hidden;\n\n :host(.has-value) & {\n @include padding(0, var(--padding-end), 0, var(--padding-start));\n\n opacity: 1;\n width: auto;\n }\n\n &:hover {\n color: var(--clear-btn-color--hover);\n }\n\n .has-inline-button.has-float-label & {\n right: 1.5em;\n position: absolute;\n top: 0;\n height: 100%;\n left: auto;\n }\n\n .rtl.has-float-label.has-inline-button & {\n right: auto;\n left: 1.2em;\n }\n}\n","import {\n Build,\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Method,\n Prop,\n State,\n Watch,\n h,\n VNode,\n} from '@stencil/core';\n\nimport {\n Color,\n ControlValidity,\n ControlValidityEventDetail,\n InputChangeEventDetail,\n TextFieldTypes,\n} from '../../interface';\nimport {\n debounceEvent,\n testLegacyStyle,\n closestElement,\n createColorClasses,\n} from '../../utils/utils';\n\n/**\n * The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input), but works great on desktop devices and integrates with the keyboard on mobile devices.\n\nIt is meant for text type inputs only, such as \"text\", \"password\", \"email\", \"number\", \"search\", \"tel\", and \"url\". It supports all standard text input events including keyup, keydown, keypress, and more.\n * @slot inline-button - suitable for inline action buttons or icons that may add extra contextual information\n * @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n * @slot legacy - you can use this slot to wrap any old inputs / labels. This will set appropriate defaults for the nano-input\n */\n@Component({\n tag: 'nano-input',\n styleUrl: 'input.scss',\n scoped: true,\n})\nexport class Input implements ComponentInterface {\n private nativeInput?: HTMLInputElement | HTMLTextAreaElement;\n private inputId = `nano-input-${inputIds++}`;\n private didBlurAfterEdit = false;\n private errorContainer?: HTMLDivElement;\n private rtl: boolean = false;\n private mo?: MutationObserver;\n private charCount = 0;\n private hasRendered = false;\n\n @State() hasFocus = false;\n @State() isLegacy = !document.head.attachShadow;\n @State() hasLabelSlot = false;\n @State() hasButtonSlot = false;\n @State() hasHelperSlot = false;\n @State() _invalid = false;\n\n @Element() el!: HTMLNanoInputElement;\n\n /**\n * This will be true when the control is in an invalid state.\n * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n */\n @Prop({ reflect: true })\n get invalid() {\n return this._invalid;\n }\n\n /**\n * The color to use from the application's color palette.\n */\n @Prop() color?: Color;\n\n /**\n * If the value of the type attribute is `\"file\"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.\n */\n @Prop() accept?: string;\n\n /**\n * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n */\n @Prop() autocapitalise: 'none' | 'sentences' | 'words' | 'characters' =\n 'none';\n\n /**\n * Indicates whether the value of the control can be automatically completed by the browser.\n */\n @Prop() autocomplete: 'on' | 'off' = 'off';\n\n /**\n * Whether auto correction should be enabled when the user is entering/editing the text value.\n */\n @Prop() autocorrect: 'on' | 'off' = 'off';\n\n /**\n * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n */\n @Prop() autofocus = false;\n\n /**\n * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.\n */\n @Prop() clearInput = false;\n\n /**\n * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.\n */\n @Prop() clearOnEdit?: boolean;\n\n /**\n * Set the amount of time, in milliseconds, to wait to trigger the `nanoChange` event after each keystroke.\n */\n @Prop() debounce = 0;\n\n /**\n * If `true`, the user cannot interact with the input.\n */\n @Prop({ reflect: true }) disabled = false;\n\n /**\n * A hint to the browser for which keyboard to display.\n * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n */\n @Prop() inputmode?:\n | 'none'\n | 'text'\n | 'tel'\n | 'url'\n | 'email'\n | 'numeric'\n | 'decimal'\n | 'search';\n\n /**\n * When should the field perform validation\n */\n @Prop({ mutable: true }) validateOn: 'dirty' | 'submit' | 'submitThenDirty' =\n 'submit';\n\n /**\n * Whether to show validation errors underneath input\n */\n @Prop({ reflect: true }) showInlineError = true;\n\n /**\n * String to place within a label element. Alternatively you may use a label slot.\n */\n @Prop() label!: string;\n\n /**\n * Visually hide the label - but make it accessible.\n */\n @Prop() hideLabel?: boolean = false;\n\n /**\n * Enable floating label behaviour. Will disable placeholder if set.\n */\n @Prop() floatLabel: boolean = false;\n\n /**\n * The maximum value, which must not be less than its minimum (min attribute) value.\n */\n @Prop() max?: string;\n\n /**\n * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n */\n @Prop() maxlength?: number;\n\n /**\n * The minimum value, which must not be greater than its maximum (max attribute) value.\n */\n @Prop() min?: string;\n\n /**\n * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n */\n @Prop() minlength?: number;\n\n /**\n * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"` or `\"file\"`, otherwise it is ignored.\n */\n @Prop() multiple?: boolean;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.inputId;\n\n /**\n * A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.\n */\n @Prop() pattern?: string;\n\n /**\n * Instructional text that shows before the input has a value.\n */\n @Prop() placeholder?: string | null;\n\n /**\n * If `true`, the user cannot modify the value.\n */\n @Prop() readonly = false;\n\n /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n @Prop() required = false;\n\n /**\n * If `true`, the element will have its spelling and grammar checked.\n */\n @Prop() spellcheck = false;\n\n /**\n * Works with the min and max attributes to limit the increments at which a value can be set.\n * Possible values are: `\"any\"` or a positive floating point number.\n */\n @Prop() step?: string;\n\n /**\n * The initial size of the control. This value is in pixels unless the value of the type attribute is `\"text\"` or `\"password\"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.\n */\n @Prop() size?: number;\n\n /**\n * The type of control to display. The default type is text.\n */\n @Prop() type: TextFieldTypes = 'text';\n\n /**\n * The form element to associate the select with (its form owner). Must be the id of a form.\n */\n @Prop() form?: string | null;\n\n /**\n * The value of the input.\n */\n @Prop({ mutable: true }) value?: string | null = '';\n\n /**\n * relevant to type=\"textarea\". Vertical resizing - enable / disable or make automatic.\n */\n @Prop() resize: 'true' | 'false' | 'auto' = 'auto';\n\n /**\n * relevant to type=\"textarea\". Default number of rows to show\n */\n @Prop() rows = 2;\n\n /**\n * relevant to type=\"textarea\".\n */\n @Prop() showCharCount = false;\n\n @Watch('minlength')\n @Watch('maxlength')\n @Watch('min')\n @Watch('max')\n @Watch('required')\n @Watch('disabled')\n @Watch('validateOn')\n @Watch('readonly')\n @Watch('pattern')\n @Watch('inputmode')\n protected shouldValidate() {\n if (!this.hasRendered) return;\n setTimeout(() => {\n if (this.validateOn === 'dirty') this.validate();\n }, 20);\n }\n\n /**\n * Update the native input element when the value changes\n */\n @Watch('value')\n protected valueChanged() {\n this.nanoChange.emit({ value: this.value });\n this.charCount = this.value.length;\n\n if (this.type === 'textarea' && this.resize === 'auto') {\n this.nativeInput.style.height = 'auto';\n if (this.value.length)\n this.nativeInput.style.height = this.nativeInput.scrollHeight + 'px';\n }\n\n setTimeout(() => {\n if (this.validateOn === 'dirty') this.validate();\n }, 20);\n }\n\n @Watch('debounce')\n protected debounceChanged() {\n this.nanoChange = debounceEvent(this.nanoChange, this.debounce);\n }\n\n /**\n * Emitted when a keyboard input occurred.\n */\n @Event() nanoInput!: EventEmitter<KeyboardEvent>;\n\n /**\n * Emitted when the value has changed.\n */\n @Event() nanoChange!: EventEmitter<InputChangeEventDetail>;\n\n /**\n * Emitted when the input loses focus.\n */\n @Event() nanoBlur!: EventEmitter<void>;\n\n /**\n * Emitted when the input has focus.\n */\n @Event() nanoFocus!: EventEmitter<void>;\n\n /**\n * Emitted when the input has been created.\n * @internal\n */\n @Event() nanoDidLoad!: EventEmitter<void>;\n\n /**\n * Emitted when the input has been removed.\n * @internal\n */\n @Event() nanoDidUnload!: EventEmitter<void>;\n\n /**\n * Called when validation is performed (which depends on `validateOn`).\n * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n */\n @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n /**\n * Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `{ isValid: boolean, errorMessage: string }`\n */\n @Method()\n async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n if (validateFirst) this.validate();\n return {\n isValid: !this._invalid,\n errorMessage: this.nativeInput.validationMessage,\n };\n }\n\n /**\n * Sets focus on the specified `nano-input`. Use this method instead of the global\n * `input.focus()`.\n */\n @Method()\n async setFocus() {\n if (this.nativeInput) {\n this.nativeInput.focus();\n }\n }\n\n /**\n * Returns the native `<input>` element used under the hood.\n */\n @Method()\n getInputElement(): Promise<HTMLInputElement | HTMLTextAreaElement> {\n return Promise.resolve(this.nativeInput!);\n }\n\n /**\n * Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.\n */\n @Method()\n async showError(message: string) {\n if (this.nativeInput) {\n this.nativeInput.setCustomValidity(message);\n this.validate();\n }\n }\n\n private shouldClearOnEdit() {\n const { type, clearOnEdit } = this;\n return clearOnEdit === undefined ? type === 'password' : clearOnEdit;\n }\n\n private getValue(): string {\n return this.value || '';\n }\n\n private validate = (ev?: Event) => {\n if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n if (!this.nativeInput.validity.valid) {\n if (this.showInlineError && !!this.errorContainer) {\n if (ev) ev.preventDefault();\n this.errorContainer.innerText = this.nativeInput.validationMessage;\n }\n this._invalid = true;\n } else this._invalid = false;\n\n this.nanoValidate.emit({\n isValid: !this._invalid,\n errorMessage: this.nativeInput.validationMessage,\n originalEvent: ev,\n });\n };\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement | null;\n if (input) this.value = input.value || '';\n this.nanoInput.emit(ev as KeyboardEvent);\n };\n\n private handleDocumentMouseDown = (ev: MouseEvent) => {\n const target = ev.target as HTMLElement;\n if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {\n this.onBlur();\n }\n };\n\n private handleDocumentKeyDown = (ev: KeyboardEvent) => {\n if (ev.key !== 'Tab') return;\n setTimeout(() => {\n if (\n document.activeElement &&\n closestElement(\n this.el.tagName.toLowerCase(),\n document.activeElement\n ) !== this.el\n ) {\n this.onBlur();\n return;\n }\n });\n };\n\n private onBlur = () => {\n this.hasFocus = false;\n this.focusChanged();\n if (this.validateOn === 'dirty') this.validate();\n\n document.removeEventListener('keydown', this.handleDocumentKeyDown);\n document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n\n this.nanoBlur.emit();\n };\n\n private onFocus = () => {\n this.hasFocus = true;\n this.focusChanged();\n\n document.addEventListener('keydown', this.handleDocumentKeyDown);\n document.addEventListener('mousedown', this.handleDocumentMouseDown);\n\n this.nanoFocus.emit();\n };\n\n private onKeydown = () => {\n if (this.shouldClearOnEdit()) {\n // Did the input value change after it was blurred and edited?\n if (this.didBlurAfterEdit && this.hasValue()) {\n // Clear the input\n this.clearTextInput();\n }\n\n // Reset the flag\n this.didBlurAfterEdit = false;\n }\n };\n\n private clearTextInput = (ev?: Event) => {\n if (this.clearInput && !this.readonly && !this.disabled && ev) {\n ev.preventDefault();\n ev.stopPropagation();\n }\n this.value = '';\n /**\n * This is needed for clearOnEdit\n * Otherwise the value will not be cleared\n * if user is inside the input\n */\n if (this.nativeInput) {\n this.nativeInput.value = '';\n }\n };\n\n private focusChanged() {\n // If clearOnEdit is enabled and the input blurred but has a value, set a flag\n if (!this.hasFocus && this.shouldClearOnEdit() && this.hasValue()) {\n this.didBlurAfterEdit = true;\n }\n }\n\n private hasValue(): boolean {\n return this.getValue().length > 0;\n }\n\n private slotChangeObserver() {\n if (this.mo) this.mo.disconnect();\n const mo = (this.mo = new MutationObserver(() =>\n this.processSlottedContent()\n ));\n mo.observe(this.el, { childList: true, subtree: true });\n }\n\n private processSlottedContent() {\n // see if we have label / button content\n this.hasLabelSlot = !!this.el.querySelectorAll('[slot=\"label\"]');\n this.hasButtonSlot = !!this.el.querySelector('[slot=\"inline-button\"]');\n this.hasHelperSlot = !!this.el.querySelector('[slot=\"helper\"]');\n\n const hasLegacySlot = !!this.el.querySelector('[slot=\"legacy\"]');\n if (!hasLegacySlot) return;\n\n let existingInput = this.el.querySelector(\n 'input:not([class*=\"sc-nano-input\"])'\n );\n let existingLabel = this.el.querySelector(\n 'label:not([class*=\"sc-nano-input\"])'\n );\n\n if (existingLabel) this.label = this.label || existingLabel.innerHTML;\n\n if (existingInput) {\n Array.from(existingInput.attributes)\n .filter((attr) => attr.specified && attr.nodeName in this)\n .map((attr) => (this[attr.nodeName] = attr.nodeValue));\n }\n\n if (existingLabel || existingInput) {\n // empty all slotted stuff\n let children = this.el.querySelectorAll('[slot=\"legacy\"]');\n if (children) children.forEach((n) => n.parentNode.removeChild(n));\n }\n }\n\n connectedCallback() {\n this.debounceChanged();\n if (Build.isBrowser) {\n this.el.dispatchEvent(\n new CustomEvent('nanoDidLoad', {\n detail: this.el,\n })\n );\n }\n testLegacyStyle(this.el);\n }\n\n disconnectedCallback() {\n if (Build.isBrowser) {\n document.dispatchEvent(\n new CustomEvent('nanoDidUnload', {\n detail: this.el,\n })\n );\n }\n if (this.mo) this.mo.disconnect();\n }\n\n componentDidLoad() {\n this.slotChangeObserver();\n this.hasRendered = true;\n }\n\n componentWillLoad() {\n this.processSlottedContent();\n }\n\n private renderLabel(labelId: string, position?: 'float'): VNode {\n if (!this.label && !this.hasLabelSlot) return;\n if (position === 'float') {\n return (\n <label class=\"placeholder-as-label\" htmlFor={this.inputId} id={labelId}>\n {this.label && this.label}\n {!this.label && this.hasLabelSlot && <slot name=\"label\" />}\n </label>\n );\n } else {\n return (\n <label\n class={{ label: true, 'visually-hide': this.hideLabel }}\n htmlFor={this.inputId}\n id={labelId}\n >\n <div class=\"label-placeholder\">\n {this.placeholder && this.hasValue() && this.rtl && (\n <span class=\"placeholder\">{this.placeholder} / </span>\n )}\n <span class=\"labeltext\">\n {this.label && this.label}\n {!this.label && this.hasLabelSlot && <slot name=\"label\" />}\n </span>\n {this.placeholder && this.hasValue() && !this.rtl && (\n <span class=\"placeholder\"> / {this.placeholder}</span>\n )}\n </div>\n {this.showCharCount && (\n <span class=\"charcount\">\n {this.maxlength\n ? this.maxlength - this.charCount + ' left'\n : this.charCount + ' characters'}\n </span>\n )}\n </label>\n );\n }\n }\n\n render() {\n const value = this.getValue();\n const labelId = this.inputId + '-lbl';\n const moreId =\n this.showInlineError || this.hasHelperSlot ? this.inputId + '-more' : '';\n this.rtl = (this.el.ownerDocument as Document).dir === 'rtl';\n\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n dir={this.rtl ? 'rtl' : null}\n class={{\n ...createColorClasses(this.color),\n 'has-value': this.hasValue(),\n 'has-focus': this.hasFocus,\n 'is-invalid': this._invalid,\n }}\n >\n {!this.floatLabel && this.renderLabel(labelId)}\n <div\n class={{\n 'has-label': this.label !== null && !this.floatLabel,\n 'has-float-label': this.label !== null && this.floatLabel,\n rtl: this.rtl,\n 'has-inline-button': this.hasButtonSlot,\n legacy: this.isLegacy,\n input: true,\n textarea: this.type === 'textarea',\n }}\n >\n {this.floatLabel && this.renderLabel(labelId, 'float')}\n <div class=\"native-input-wrap\">\n {this.type !== 'textarea' && (\n <input\n id={this.inputId}\n class=\"native-input\"\n ref={(input) => (this.nativeInput = input)}\n aria-labelledby={labelId + ' ' + moreId}\n disabled={this.disabled}\n accept={this.accept}\n autoCapitalize={this.autocapitalise}\n autoComplete={this.autocomplete}\n autoCorrect={this.autocorrect}\n autoFocus={this.autofocus}\n inputMode={this.inputmode}\n form={this.form}\n min={this.min}\n max={this.max}\n minLength={this.minlength}\n maxLength={this.maxlength}\n multiple={this.multiple}\n name={this.name}\n pattern={this.pattern}\n placeholder={\n !this.floatLabel && this.placeholder ? this.placeholder : ''\n }\n readOnly={this.readonly}\n required={this.required}\n spellcheck={this.spellcheck}\n step={this.step}\n size={this.size}\n type={this.type}\n value={value}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onKeyDown={this.onKeydown}\n onInvalid={this.validate}\n />\n )}\n {this.type === 'textarea' && (\n <textarea\n rows={this.floatLabel ? 1 : this.rows}\n id={this.inputId}\n class={{\n 'native-input': true,\n resizable: this.resize === 'true',\n }}\n ref={(input) => (this.nativeInput = input)}\n aria-labelledby={labelId + ' ' + moreId}\n disabled={this.disabled}\n autoCapitalize={this.autocapitalise}\n autoCorrect={this.autocorrect}\n autoFocus={this.autofocus}\n inputMode={this.inputmode}\n form={this.form}\n minLength={this.minlength}\n maxLength={this.maxlength}\n name={this.name}\n placeholder={\n !this.floatLabel && this.placeholder ? this.placeholder : ''\n }\n readOnly={this.readonly}\n required={this.required}\n spellcheck={this.spellcheck}\n value={value}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onKeyDown={this.onKeydown}\n onInvalid={this.validate}\n ></textarea>\n )}\n {this.clearInput && !this.readonly && !this.disabled && (\n <button\n type=\"button\"\n class=\"icon input-clear-icon\"\n tabindex=\"-1\"\n onTouchStart={this.clearTextInput}\n onMouseDown={this.clearTextInput}\n >\n <nano-icon name=\"light/times\"></nano-icon>\n </button>\n )}\n {this.hasButtonSlot ? (\n <span class=\"inline-button\">\n <slot name=\"inline-button\" />\n </span>\n ) : (\n ''\n )}\n </div>\n </div>\n {(this.showInlineError || this.hasHelperSlot) && (\n <div class=\"more\" id={moreId}>\n {!!this.showInlineError ? (\n <div class=\"error\" ref={(div) => (this.errorContainer = div)} />\n ) : (\n ''\n )}\n <div class=\"helper\">\n <slot name=\"helper\" />\n </div>\n </div>\n )}\n <slot />\n </Host>\n );\n }\n}\n\nlet inputIds = 0;\n"]}

package/dist/nano-components/p-93b1eeea.system.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ System.register([],(function(e){"use strict";return{execute:function(){var t="top";var r="bottom";var n="right";var i="left";var o="auto";var a=[t,r,n,i];var s="start";var f="end";var p="clippingParents";var c="viewport";var u="popper";var v="reference";var l=a.reduce((function(e,t){return e.concat([t+"-"+s,t+"-"+f])}),[]);var d=[].concat(a,[o]).reduce((function(e,t){return e.concat([t,t+"-"+s,t+"-"+f])}),[]);var h="beforeRead";var m="read";var g="afterRead";var y="beforeMain";var b="main";var w="afterMain";var x="beforeWrite";var O="write";var E="afterWrite";var j=[h,m,g,y,b,w,x,O,E];function L(e){return e?(e.nodeName\|\|"").toLowerCase():null}function D(e){if(e==null){return window}if(e.toString()!=="[object Window]"){var t=e.ownerDocument;return t?t.defaultView\|\|window:window}return e}function k(e){var t=D(e).Element;return e instanceof t\|\|e instanceof Element}function A(e){var t=D(e).HTMLElement;return e instanceof t\|\|e instanceof HTMLElement}function T(e){if(typeof ShadowRoot==="undefined"){return false}var t=D(e).ShadowRoot;return e instanceof t\|\|e instanceof ShadowRoot}function M(e){var t=e.state;Object.keys(t.elements).forEach((function(e){var r=t.styles[e]\|\|{};var n=t.attributes[e]\|\|{};var i=t.elements[e];if(!A(i)\|\|!L(i)){return}Object.assign(i.style,r);Object.keys(n).forEach((function(e){var t=n[e];if(t===false){i.removeAttribute(e)}else{i.setAttribute(e,t===true?"":t)}}))}))}function P(e){var t=e.state;var r={popper:{position:t.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};Object.assign(t.elements.popper.style,r.popper);t.styles=r;if(t.elements.arrow){Object.assign(t.elements.arrow.style,r.arrow)}return function(){Object.keys(t.elements).forEach((function(e){var n=t.elements[e];var i=t.attributes[e]\|\|{};var o=Object.keys(t.styles.hasOwnProperty(e)?t.styles[e]:r[e]);var a=o.reduce((function(e,t){e[t]="";return e}),{});if(!A(n)\|\|!L(n)){return}Object.assign(n.style,a);Object.keys(i).forEach((function(e){n.removeAttribute(e)}))}))}}var W={name:"applyStyles",enabled:true,phase:"write",fn:M,effect:P,requires:["computeStyles"]};function C(e){return e.split("-")[0]}var H=Math.round;function B(e,t){if(t===void 0){t=false}var r=e.getBoundingClientRect();var n=1;var i=1;if(A(e)&&t){var o=e.offsetHeight;var a=e.offsetWidth;if(a>0){n=r.width/a\|\|1}if(o>0){i=r.height/o\|\|1}}return{width:H(r.width/n),height:H(r.height/i),top:H(r.top/i),right:H(r.right/n),bottom:H(r.bottom/i),left:H(r.left/n),x:H(r.left/n),y:H(r.top/i)}}function R(e){var t=B(e);var r=e.offsetWidth;var n=e.offsetHeight;if(Math.abs(t.width-r)<=1){r=t.width}if(Math.abs(t.height-n)<=1){n=t.height}return{x:e.offsetLeft,y:e.offsetTop,width:r,height:n}}function S(e,t){var r=t.getRootNode&&t.getRootNode();if(e.contains(t)){return true}else if(r&&T(r)){var n=t;do{if(n&&e.isSameNode(n)){return true}n=n.parentNode\|\|n.host}while(n)}return false}function q(e){return D(e).getComputedStyle(e)}function V(e){return["table","td","th"].indexOf(L(e))>=0}function N(e){return((k(e)?e.ownerDocument:e.document)\|\|window.document).documentElement}function F(e){if(L(e)==="html"){return e}return e.assignedSlot\|\|e.parentNode\|\|(T(e)?e.host:null)\|\|N(e)}function I(e){if(!A(e)\|\|q(e).position==="fixed"){return null}return e.offsetParent}function U(e){var t=navigator.userAgent.toLowerCase().indexOf("firefox")!==-1;var r=navigator.userAgent.indexOf("Trident")!==-1;if(r&&A(e)){var n=q(e);if(n.position==="fixed"){return null}}var i=F(e);while(A(i)&&["html","body"].indexOf(L(i))<0){var o=q(i);if(o.transform!=="none"\|\|o.perspective!=="none"\|\|o.contain==="paint"\|\|["transform","perspective"].indexOf(o.willChange)!==-1\|\|t&&o.willChange==="filter"\|\|t&&o.filter&&o.filter!=="none"){return i}else{i=i.parentNode}}return null}function z(e){var t=D(e);var r=I(e);while(r&&V(r)&&q(r).position==="static"){r=I(r)}if(r&&(L(r)==="html"\|\|L(r)==="body"&&q(r).position==="static")){return t}return r\|\|U(e)\|\|t}function _(e){return["top","bottom"].indexOf(e)>=0?"x":"y"}var X=Math.max;var Y=Math.min;var G=Math.round;function J(e,t,r){return X(e,Y(t,r))}function K(){return{top:0,right:0,bottom:0,left:0}}function Q(e){return Object.assign({},K(),e)}function Z(e,t){return t.reduce((function(t,r){t[r]=e;return t}),{})}var $=function e(t,r){t=typeof t==="function"?t(Object.assign({},r.rects,{placement:r.placement})):t;return Q(typeof t!=="number"?t:Z(t,a))};function ee(e){var o;var a=e.state,s=e.name,f=e.options;var p=a.elements.arrow;var c=a.modifiersData.popperOffsets;var u=C(a.placement);var v=_(u);var l=[i,n].indexOf(u)>=0;var d=l?"height":"width";if(!p\|\|!c){return}var h=$(f.padding,a);var m=R(p);var g=v==="y"?t:i;var y=v==="y"?r:n;var b=a.rects.reference[d]+a.rects.reference[v]-c[v]-a.rects.popper[d];var w=c[v]-a.rects.reference[v];var x=z(p);var O=x?v==="y"?x.clientHeight\|\|0:x.clientWidth\|\|0:0;var E=b/2-w/2;var j=h[g];var L=O-m[d]-h[y];var D=O/2-m[d]/2+E;var k=J(j,D,L);var A=v;a.modifiersData[s]=(o={},o[A]=k,o.centerOffset=k-D,o)}function te(e){var t=e.state,r=e.options;var n=r.element,i=n===void 0?"[data-popper-arrow]":n;if(i==null){return}if(typeof i==="string"){i=t.elements.popper.querySelector(i);if(!i){return}}if(!S(t.elements.popper,i)){return}t.elements.arrow=i}var re={name:"arrow",enabled:true,phase:"main",fn:ee,effect:te,requires:["popperOffsets"],requiresIfExists:["preventOverflow"]};function ne(e){return e.split("-")[1]}var ie={top:"auto",right:"auto",bottom:"auto",left:"auto"};function oe(e){var t=e.x,r=e.y;var n=window;var i=n.devicePixelRatio\|\|1;return{x:G(G(ti)/i)\|\|0,y:G(G(ri)/i)\|\|0}}function ae(e){var o;var a=e.popper,s=e.popperRect,p=e.placement,c=e.variation,u=e.offsets,v=e.position,l=e.gpuAcceleration,d=e.adaptive,h=e.roundOffsets;var m=h===true?oe(u):typeof h==="function"?h(u):u,g=m.x,y=g===void 0?0:g,b=m.y,w=b===void 0?0:b;var x=u.hasOwnProperty("x");var O=u.hasOwnProperty("y");var E=i;var j=t;var L=window;if(d){var k=z(a);var A="clientHeight";var T="clientWidth";if(k===D(a)){k=N(a);if(q(k).position!=="static"&&v==="absolute"){A="scrollHeight";T="scrollWidth"}}k=k;if(p===t\|\|(p===i\|\|p===n)&&c===f){j=r;w-=k[A]-s.height;w=l?1:-1}if(p===i\|\|(p===t\|\|p===r)&&c===f){E=n;y-=k[T]-s.width;y=l?1:-1}}var M=Object.assign({position:v},d&&ie);if(l){var P;return Object.assign({},M,(P={},P[j]=O?"0":"",P[E]=x?"0":"",P.transform=(L.devicePixelRatio\|\|1)<=1?"translate("+y+"px, "+w+"px)":"translate3d("+y+"px, "+w+"px, 0)",P))}return Object.assign({},M,(o={},o[j]=O?w+"px":"",o[E]=x?y+"px":"",o.transform="",o))}function se(e){var t=e.state,r=e.options;var n=r.gpuAcceleration,i=n===void 0?true:n,o=r.adaptive,a=o===void 0?true:o,s=r.roundOffsets,f=s===void 0?true:s;var p={placement:C(t.placement),variation:ne(t.placement),popper:t.elements.popper,popperRect:t.rects.popper,gpuAcceleration:i};if(t.modifiersData.popperOffsets!=null){t.styles.popper=Object.assign({},t.styles.popper,ae(Object.assign({},p,{offsets:t.modifiersData.popperOffsets,position:t.options.strategy,adaptive:a,roundOffsets:f})))}if(t.modifiersData.arrow!=null){t.styles.arrow=Object.assign({},t.styles.arrow,ae(Object.assign({},p,{offsets:t.modifiersData.arrow,position:"absolute",adaptive:false,roundOffsets:f})))}t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-placement":t.placement})}var fe={name:"computeStyles",enabled:true,phase:"beforeWrite",fn:se,data:{}};var pe={passive:true};function ce(e){var t=e.state,r=e.instance,n=e.options;var i=n.scroll,o=i===void 0?true:i,a=n.resize,s=a===void 0?true:a;var f=D(t.elements.popper);var p=[].concat(t.scrollParents.reference,t.scrollParents.popper);if(o){p.forEach((function(e){e.addEventListener("scroll",r.update,pe)}))}if(s){f.addEventListener("resize",r.update,pe)}return function(){if(o){p.forEach((function(e){e.removeEventListener("scroll",r.update,pe)}))}if(s){f.removeEventListener("resize",r.update,pe)}}}var ue={name:"eventListeners",enabled:true,phase:"write",fn:function e(){},effect:ce,data:{}};var ve={left:"right",right:"left",bottom:"top",top:"bottom"};function le(e){return e.replace(/left\|right\|bottom\|top/g,(function(e){return ve[e]}))}var de={start:"end",end:"start"};function he(e){return e.replace(/start\|end/g,(function(e){return de[e]}))}function me(e){var t=D(e);var r=t.pageXOffset;var n=t.pageYOffset;return{scrollLeft:r,scrollTop:n}}function ge(e){return B(N(e)).left+me(e).scrollLeft}function ye(e){var t=D(e);var r=N(e);var n=t.visualViewport;var i=r.clientWidth;var o=r.clientHeight;var a=0;var s=0;if(n){i=n.width;o=n.height;if(!/^((?!chrome\|android).)safari/i.test(navigator.userAgent)){a=n.offsetLeft;s=n.offsetTop}}return{width:i,height:o,x:a+ge(e),y:s}}function be(e){var t;var r=N(e);var n=me(e);var i=(t=e.ownerDocument)==null?void 0:t.body;var o=X(r.scrollWidth,r.clientWidth,i?i.scrollWidth:0,i?i.clientWidth:0);var a=X(r.scrollHeight,r.clientHeight,i?i.scrollHeight:0,i?i.clientHeight:0);var s=-n.scrollLeft+ge(e);var f=-n.scrollTop;if(q(i\|\|r).direction==="rtl"){s+=X(r.clientWidth,i?i.clientWidth:0)-o}return{width:o,height:a,x:s,y:f}}function we(e){var t=q(e),r=t.overflow,n=t.overflowX,i=t.overflowY;return/auto\|scroll\|overlay\|hidden/.test(r+i+n)}function xe(e){if(["html","body","#document"].indexOf(L(e))>=0){return e.ownerDocument.body}if(A(e)&&we(e)){return e}return xe(F(e))}function Oe(e,t){var r;if(t===void 0){t=[]}var n=xe(e);var i=n===((r=e.ownerDocument)==null?void 0:r.body);var o=D(n);var a=i?[o].concat(o.visualViewport\|\|[],we(n)?n:[]):n;var s=t.concat(a);return i?s:s.concat(Oe(F(a)))}function Ee(e){return Object.assign({},e,{left:e.x,top:e.y,right:e.x+e.width,bottom:e.y+e.height})}function je(e){var t=B(e);t.top=t.top+e.clientTop;t.left=t.left+e.clientLeft;t.bottom=t.top+e.clientHeight;t.right=t.left+e.clientWidth;t.width=e.clientWidth;t.height=e.clientHeight;t.x=t.left;t.y=t.top;return t}function Le(e,t){return t===c?Ee(ye(e)):A(t)?je(t):Ee(be(N(e)))}function De(e){var t=Oe(F(e));var r=["absolute","fixed"].indexOf(q(e).position)>=0;var n=r&&A(e)?z(e):e;if(!k(n)){return[]}return t.filter((function(e){return k(e)&&S(e,n)&&L(e)!=="body"}))}function ke(e,t,r){var n=t==="clippingParents"?De(e):[].concat(t);var i=[].concat(n,[r]);var o=i[0];var a=i.reduce((function(t,r){var n=Le(e,r);t.top=X(n.top,t.top);t.right=Y(n.right,t.right);t.bottom=Y(n.bottom,t.bottom);t.left=X(n.left,t.left);return t}),Le(e,o));a.width=a.right-a.left;a.height=a.bottom-a.top;a.x=a.left;a.y=a.top;return a}function Ae(e){var o=e.reference,a=e.element,p=e.placement;var c=p?C(p):null;var u=p?ne(p):null;var v=o.x+o.width/2-a.width/2;var l=o.y+o.height/2-a.height/2;var d;switch(c){case t:d={x:v,y:o.y-a.height};break;case r:d={x:v,y:o.y+o.height};break;case n:d={x:o.x+o.width,y:l};break;case i:d={x:o.x-a.width,y:l};break;default:d={x:o.x,y:o.y}}var h=c?_(c):null;if(h!=null){var m=h==="y"?"height":"width";switch(u){case s:d[h]=d[h]-(o[m]/2-a[m]/2);break;case f:d[h]=d[h]+(o[m]/2-a[m]/2);break}}return d}function Te(e,i){if(i===void 0){i={}}var o=i,s=o.placement,f=s===void 0?e.placement:s,l=o.boundary,d=l===void 0?p:l,h=o.rootBoundary,m=h===void 0?c:h,g=o.elementContext,y=g===void 0?u:g,b=o.altBoundary,w=b===void 0?false:b,x=o.padding,O=x===void 0?0:x;var E=Q(typeof O!=="number"?O:Z(O,a));var j=y===u?v:u;var L=e.rects.popper;var D=e.elements[w?j:y];var A=ke(k(D)?D:D.contextElement\|\|N(e.elements.popper),d,m);var T=B(e.elements.reference);var M=Ae({reference:T,element:L,strategy:"absolute",placement:f});var P=Ee(Object.assign({},L,M));var W=y===u?P:T;var C={top:A.top-W.top+E.top,bottom:W.bottom-A.bottom+E.bottom,left:A.left-W.left+E.left,right:W.right-A.right+E.right};var H=e.modifiersData.offset;if(y===u&&H){var R=H[f];Object.keys(C).forEach((function(e){var i=[n,r].indexOf(e)>=0?1:-1;var o=[t,r].indexOf(e)>=0?"y":"x";C[e]+=R[o]i}))}return C}function Me(e,t){if(t===void 0){t={}}var r=t,n=r.placement,i=r.boundary,o=r.rootBoundary,s=r.padding,f=r.flipVariations,p=r.allowedAutoPlacements,c=p===void 0?d:p;var u=ne(n);var v=u?f?l:l.filter((function(e){return ne(e)===u})):a;var h=v.filter((function(e){return c.indexOf(e)>=0}));if(h.length===0){h=v}var m=h.reduce((function(t,r){t[r]=Te(e,{placement:r,boundary:i,rootBoundary:o,padding:s})[C(r)];return t}),{});return Object.keys(m).sort((function(e,t){return m[e]-m[t]}))}function Pe(e){if(C(e)===o){return[]}var t=le(e);return[he(e),t,he(t)]}function We(e){var a=e.state,f=e.options,p=e.name;if(a.modifiersData[p]._skip){return}var c=f.mainAxis,u=c===void 0?true:c,v=f.altAxis,l=v===void 0?true:v,d=f.fallbackPlacements,h=f.padding,m=f.boundary,g=f.rootBoundary,y=f.altBoundary,b=f.flipVariations,w=b===void 0?true:b,x=f.allowedAutoPlacements;var O=a.options.placement;var E=C(O);var j=E===O;var L=d\|\|(j\|\|!w?[le(O)]:Pe(O));var D=[O].concat(L).reduce((function(e,t){return e.concat(C(t)===o?Me(a,{placement:t,boundary:m,rootBoundary:g,padding:h,flipVariations:w,allowedAutoPlacements:x}):t)}),[]);var k=a.rects.reference;var A=a.rects.popper;var T=new Map;var M=true;var P=D[0];for(var W=0;W<D.length;W++){var H=D[W];var B=C(H);var R=ne(H)===s;var S=[t,r].indexOf(B)>=0;var q=S?"width":"height";var V=Te(a,{placement:H,boundary:m,rootBoundary:g,altBoundary:y,padding:h});var N=S?R?n:i:R?r:t;if(k[q]>A[q]){N=le(N)}var F=le(N);var I=[];if(u){I.push(V[B]<=0)}if(l){I.push(V[N]<=0,V[F]<=0)}if(I.every((function(e){return e}))){P=H;M=false;break}T.set(H,I)}if(M){var U=w?3:1;var z=function e(t){var r=D.find((function(e){var r=T.get(e);if(r){return r.slice(0,t).every((function(e){return e}))}}));if(r){P=r;return"break"}};for(var _=U;_>0;_--){var X=z(_);if(X==="break")break}}if(a.placement!==P){a.modifiersData[p]._skip=true;a.placement=P;a.reset=true}}var Ce={name:"flip",enabled:true,phase:"main",fn:We,requiresIfExists:["offset"],data:{_skip:false}};function He(e,t,r){if(r===void 0){r={x:0,y:0}}return{top:e.top-t.height-r.y,right:e.right-t.width+r.x,bottom:e.bottom-t.height+r.y,left:e.left-t.width-r.x}}function Be(e){return[t,n,r,i].some((function(t){return e[t]>=0}))}function Re(e){var t=e.state,r=e.name;var n=t.rects.reference;var i=t.rects.popper;var o=t.modifiersData.preventOverflow;var a=Te(t,{elementContext:"reference"});var s=Te(t,{altBoundary:true});var f=He(a,n);var p=He(s,i,o);var c=Be(f);var u=Be(p);t.modifiersData[r]={referenceClippingOffsets:f,popperEscapeOffsets:p,isReferenceHidden:c,hasPopperEscaped:u};t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-reference-hidden":c,"data-popper-escaped":u})}var Se={name:"hide",enabled:true,phase:"main",requiresIfExists:["preventOverflow"],fn:Re};function qe(e,r,o){var a=C(e);var s=[i,t].indexOf(a)>=0?-1:1;var f=typeof o==="function"?o(Object.assign({},r,{placement:e})):o,p=f[0],c=f[1];p=p\|\|0;c=(c\|\|0)*s;return[i,n].indexOf(a)>=0?{x:c,y:p}:{x:p,y:c}}function Ve(e){var t=e.state,r=e.options,n=e.name;var i=r.offset,o=i===void 0?[0,0]:i;var a=d.reduce((function(e,r){e[r]=qe(r,t.rects,o);return e}),{});var s=a[t.placement],f=s.x,p=s.y;if(t.modifiersData.popperOffsets!=null){t.modifiersData.popperOffsets.x+=f;t.modifiersData.popperOffsets.y+=p}t.modifiersData[n]=a}var Ne={name:"offset",enabled:true,phase:"main",requires:["popperOffsets"],fn:Ve};function Fe(e){var t=e.state,r=e.name;t.modifiersData[r]=Ae({reference:t.rects.reference,element:t.rects.popper,strategy:"absolute",placement:t.placement})}var Ie={name:"popperOffsets",enabled:true,phase:"read",fn:Fe,data:{}};function Ue(e){return e==="x"?"y":"x"}function ze(e){var o=e.state,a=e.options,f=e.name;var p=a.mainAxis,c=p===void 0?true:p,u=a.altAxis,v=u===void 0?false:u,l=a.boundary,d=a.rootBoundary,h=a.altBoundary,m=a.padding,g=a.tether,y=g===void 0?true:g,b=a.tetherOffset,w=b===void 0?0:b;var x=Te(o,{boundary:l,rootBoundary:d,padding:m,altBoundary:h});var O=C(o.placement);var E=ne(o.placement);var j=!E;var L=_(O);var D=Ue(L);var k=o.modifiersData.popperOffsets;var A=o.rects.reference;var T=o.rects.popper;var M=typeof w==="function"?w(Object.assign({},o.rects,{placement:o.placement})):w;var P={x:0,y:0};if(!k){return}if(c\|\|v){var W=L==="y"?t:i;var H=L==="y"?r:n;var B=L==="y"?"height":"width";var S=k[L];var q=k[L]+x[W];var V=k[L]-x[H];var N=y?-T[B]/2:0;var F=E===s?A[B]:T[B];var I=E===s?-T[B]:-A[B];var U=o.elements.arrow;var G=y&&U?R(U):{width:0,height:0};var Q=o.modifiersData["arrow#persistent"]?o.modifiersData["arrow#persistent"].padding:K();var Z=Q[W];var $=Q[H];var ee=J(0,A[B],G[B]);var te=j?A[B]/2-N-ee-Z-M:F-ee-Z-M;var re=j?-A[B]/2+N+ee+$+M:I+ee+$+M;var ie=o.elements.arrow&&z(o.elements.arrow);var oe=ie?L==="y"?ie.clientTop\|\|0:ie.clientLeft\|\|0:0;var ae=o.modifiersData.offset?o.modifiersData.offset[o.placement][L]:0;var se=k[L]+te-ae-oe;var fe=k[L]+re-ae;if(c){var pe=J(y?Y(q,se):q,S,y?X(V,fe):V);k[L]=pe;P[L]=pe-S}if(v){var ce=L==="x"?t:i;var ue=L==="x"?r:n;var ve=k[D];var le=ve+x[ce];var de=ve-x[ue];var he=J(y?Y(le,se):le,ve,y?X(de,fe):de);k[D]=he;P[D]=he-ve}}o.modifiersData[f]=P}var _e={name:"preventOverflow",enabled:true,phase:"main",fn:ze,requiresIfExists:["offset"]};function Xe(e){return{scrollLeft:e.scrollLeft,scrollTop:e.scrollTop}}function Ye(e){if(e===D(e)\|\|!A(e)){return me(e)}else{return Xe(e)}}function Ge(e){var t=e.getBoundingClientRect();var r=t.width/e.offsetWidth\|\|1;var n=t.height/e.offsetHeight\|\|1;return r!==1\|\|n!==1}function Je(e,t,r){if(r===void 0){r=false}var n=A(t);var i=A(t)&&Ge(t);var o=N(t);var a=B(e,i);var s={scrollLeft:0,scrollTop:0};var f={x:0,y:0};if(n\|\|!n&&!r){if(L(t)!=="body"\|\|we(o)){s=Ye(t)}if(A(t)){f=B(t,true);f.x+=t.clientLeft;f.y+=t.clientTop}else if(o){f.x=ge(o)}}return{x:a.left+s.scrollLeft-f.x,y:a.top+s.scrollTop-f.y,width:a.width,height:a.height}}function Ke(e){var t=new Map;var r=new Set;var n=[];e.forEach((function(e){t.set(e.name,e)}));function i(e){r.add(e.name);var o=[].concat(e.requires\|\|[],e.requiresIfExists\|\|[]);o.forEach((function(e){if(!r.has(e)){var n=t.get(e);if(n){i(n)}}}));n.push(e)}e.forEach((function(e){if(!r.has(e.name)){i(e)}}));return n}function Qe(e){var t=Ke(e);return j.reduce((function(e,r){return e.concat(t.filter((function(e){return e.phase===r})))}),[])}function Ze(e){var t;return function(){if(!t){t=new Promise((function(r){Promise.resolve().then((function(){t=undefined;r(e())}))}))}return t}}function $e(e){var t=e.reduce((function(e,t){var r=e[t.name];e[t.name]=r?Object.assign({},r,t,{options:Object.assign({},r.options,t.options),data:Object.assign({},r.data,t.data)}):t;return e}),{});return Object.keys(t).map((function(e){return t[e]}))}var et={placement:"bottom",modifiers:[],strategy:"absolute"};function tt(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++){t[r]=arguments[r]}return!t.some((function(e){return!(e&&typeof e.getBoundingClientRect==="function")}))}function rt(e){if(e===void 0){e={}}var t=e,r=t.defaultModifiers,n=r===void 0?[]:r,i=t.defaultOptions,o=i===void 0?et:i;return function e(t,r,i){if(i===void 0){i=o}var a={placement:"bottom",orderedModifiers:[],options:Object.assign({},et,o),modifiersData:{},elements:{reference:t,popper:r},attributes:{},styles:{}};var s=[];var f=false;var p={state:a,setOptions:function e(i){var s=typeof i==="function"?i(a.options):i;u();a.options=Object.assign({},o,a.options,s);a.scrollParents={reference:k(t)?Oe(t):t.contextElement?Oe(t.contextElement):[],popper:Oe(r)};var f=Qe($e([].concat(n,a.options.modifiers)));a.orderedModifiers=f.filter((function(e){return e.enabled}));c();return p.update()},forceUpdate:function e(){if(f){return}var t=a.elements,r=t.reference,n=t.popper;if(!tt(r,n)){return}a.rects={reference:Je(r,z(n),a.options.strategy==="fixed"),popper:R(n)};a.reset=false;a.placement=a.options.placement;a.orderedModifiers.forEach((function(e){return a.modifiersData[e.name]=Object.assign({},e.data)}));for(var i=0;i<a.orderedModifiers.length;i++){if(a.reset===true){a.reset=false;i=-1;continue}var o=a.orderedModifiers[i],s=o.fn,c=o.options,u=c===void 0?{}:c,v=o.name;if(typeof s==="function"){a=s({state:a,options:u,name:v,instance:p})\|\|a}}},update:Ze((function(){return new Promise((function(e){p.forceUpdate();e(a)}))})),destroy:function e(){u();f=true}};if(!tt(t,r)){return p}p.setOptions(i).then((function(e){if(!f&&i.onFirstUpdate){i.onFirstUpdate(e)}}));function c(){a.orderedModifiers.forEach((function(e){var t=e.name,r=e.options,n=r===void 0?{}:r,i=e.effect;if(typeof i==="function"){var o=i({state:a,name:t,instance:p,options:n});var f=function e(){};s.push(o\|\|f)}}))}function u(){s.forEach((function(e){return e()}));s=[]}return p}}var nt=[ue,Ie,fe,W,Ne,Ce,_e,re,Se];var it=rt({defaultModifiers:nt});var ot=function(){function e(e,t,r){this.handleTransitionEnd=this.handleTransitionEnd.bind(this);this.anchor=e;this.popover=t;this.options=Object.assign({skidding:0,distance:0,placement:"bottom-start",strategy:"absolute",transitionElement:this.popover,visibleClass:"popover-visible",onAfterShow:function(){},onAfterHide:function(){},onTransitionEnd:function(){}},r);this.popover.hidden=true;this.popover.classList.remove(this.options.visibleClass);this.popover.addEventListener("transitionend",this.handleTransitionEnd)}e.prototype.handleTransitionEnd=function(e){var t=e.target;if(t===this.options.transitionElement){this.options.onTransitionEnd.call(this,e);if(this.isVisible===false&&!this.popover.hidden){this.popover.hidden=true;this.popover.classList.remove(this.options.visibleClass);this.options.onAfterHide.call(this)}}};e.prototype.destroy=function(){this.popover.removeEventListener("transitionend",this.handleTransitionEnd);if(this.popper){this.popper.destroy();this.popper=null}};e.prototype.show=function(){var e=this;this.isVisible=true;this.popover.hidden=false;requestAnimationFrame((function(){return e.popover.classList.add(e.options.visibleClass)}));if(this.popper){this.popper.destroy()}this.popper=it(this.anchor,this.popover,{placement:this.options.placement,strategy:this.options.strategy,modifiers:[{name:"flip",options:{boundary:"viewport"}},{name:"offset",options:{padding:5,offset:[this.options.skidding,this.options.distance]}}]});this.popover.addEventListener("transitionend",(function(){return e.options.onAfterShow.call(e)}),{once:true});requestAnimationFrame((function(){return e.popper.update()}))};e.prototype.hide=function(){this.isVisible=false;this.popover.classList.remove(this.options.visibleClass)};e.prototype.setOptions=function(e){var t=this;this.options=Object.assign(this.options,e);this.isVisible?this.popover.classList.add(this.options.visibleClass):this.popover.classList.remove(this.options.visibleClass);if(this.popper){this.popper.setOptions({placement:this.options.placement,strategy:this.options.strategy});requestAnimationFrame((function(){return t.popper.update()}))}};return e}();e("P",ot)}}}));
2	+ //# sourceMappingURL=p-93b1eeea.system.js.map