@nanoporetech-digital/components 2.3.0 → 2.5.0

package/dist/nano-components/p-ec39b143.system.entry.js

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

package/dist/nano-components/p-ec39b143.system.entry.js.map

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

package/dist/types/components/datalist/datalist.d.ts

@@ -47,7 +47,7 @@ export declare class DataList implements ComponentInterface {
   /** A selector to a HTMLInputElement */
   input?: string | HTMLInputElement;
   /** Tweaks the datalist behaviour and linked control semantics and behaviour.
-   * e.g. 'select' will make the linked input control readonly.
+   * e.g. 'select' will make the linked input control `readonly`.
    */
   type: 'select' | 'selctMulti' | 'input';
   /** return all the active options currently within the datalist. Can be useful for validation */

package/dist/types/components/date-input/date-input.d.ts

@@ -1,6 +1,7 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import { DaysOfWeek } from '../../utils/date-utils';
 import { DateInputChangeEventDetail, Color, LocalDateOpts, DuetLocalizedText, ControlValidity, ControlValidityEventDetail } from '../../interface';
+import type { Dropdown } from '../dropdown/dropdown';
 /**
  * The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field. It has specific options for localisation, date formatting and validation.
  *
@@ -150,6 +151,10 @@ export declare class DateInput implements ComponentInterface {
    * Close the picker after a date is selected
    */
   closeAfterPicked: boolean;
+  /** nano-dropdown config options you can pass to the nested dropdown component */
+  get dropDownConfig(): Partial<Dropdown>;
+  set dropDownConfig(ddc: Partial<Dropdown>);
+  private _dropDownConfig;
   /**
    * Event emitted when a date is selected.
    */

package/dist/types/components/details/details.d.ts

@@ -8,6 +8,11 @@ import { Color } from '../../interface';
  * @slot icon-start - used for icons at the start of the handle
  * @slot label - can be used when you wish to insert complex label markup
  * @slot icon-end - used for icons at the end of the handle
+ * @part button - the main details ui control
+ * @part label - the text wrapper of the ui control
+ * @part icon--start - the icon wrapper at the start of the ui control
+ * @part icon--end - the icon wrapper at the end of the ui control
+ * @part content - the main content wrapper
  */
 export declare class Details {
   private hasStartSlot;

package/dist/types/components/dropdown/dropdown.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter, ComponentInterface } from '../../stencil-public-runtime';
+import { PopoverPlacement } from '../../utils/popover';
 /**
  * Dropdowns show additional content in a panel.
  * Designed to work well with nano-menu components to provide a list of options (`nano-nav-items` / `nano-option`).
@@ -40,7 +41,7 @@ export declare class Dropdown implements ComponentInterface {
    * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
    * inside of the viewport.
    */
-  placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+  placement: PopoverPlacement;
   /**
    * The distance in pixels from which to offset the panel away from its trigger.
    */

package/dist/types/components/split-pane/split-pane.d.ts

@@ -58,6 +58,10 @@ export declare class SplitPane implements ComponentInterface {
   nanoReposition: EventEmitter;
   /** Emitted when the divider is being dragged. */
   nanoDragging: EventEmitter<number>;
+  /** Utility to convert % to pixels */
+  getPercentageToPixels(value: number): Promise<number>;
+  /** Utility to convert pixels to % (`position`) */
+  getPixelsToPercentage(value: number): Promise<number>;
   private animatePosition;
   private percentageToPixels;
   private pixelsToPercentage;

package/dist/types/components.d.ts

@@ -8,6 +8,7 @@ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { AlgoliaNetworkError, AloliaSearchResultDetail, CheckboxChangeEventDetail, Color, ControlValidity, ControlValidityEventDetail, DateDisabledPredicate, DateInputChangeEventDetail, DragEvent, DuetLocalizedText, FileInputChangeEventDetail, FileWithUrl, FilterChangeEventDetail, Flickity, FlickityOptions, GridSizes, IndexResult, InputChangeEventDetail, LocalDateOpts, NavItemEventDetail, OptionInterface, PageChangeEventDetail, PickerChangeEvent, RangeChangeEventDetail, RangeValue, ResizeStateChangeEventDetail, SearchIndex, SelectChangeEventDetail, SlideAnimation, StyleEventDetail, TextFieldTypes } from "./interface.d";
 import { StorageMethods } from "./utils/store/component-store";
 import { DaysOfWeek } from "./utils/date-utils";
+import { PopoverPlacement } from "./utils/popover";
 import { OptionInterface as OptionInterface1 } from "./components/option/option-interface";
 import { Dropdown } from "./components/dropdown/dropdown";
 export namespace Components {
@@ -352,7 +353,7 @@ export namespace Components {
         /**
           * nano-dropdown config options you can pass to the nested dropdown component
          */
-        "dropDownConfig": { host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end"; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; };
+        "dropDownConfig": { host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: PopoverPlacement; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; };
         /**
           * A selector to a HTMLInputElement
          */
@@ -370,7 +371,7 @@ export namespace Components {
          */
         "selected": string[];
         /**
-          * Tweaks the datalist behaviour and linked control semantics and behaviour. e.g. 'select' will make the linked input control readonly.
+          * Tweaks the datalist behaviour and linked control semantics and behaviour. e.g. 'select' will make the linked input control `readonly`.
          */
         "type": 'select' | 'selctMulti' | 'input';
     }
@@ -399,6 +400,10 @@ export namespace Components {
           * If `true`, the user cannot interact with the input.
          */
         "disabled": boolean;
+        /**
+          * nano-dropdown config options you can pass to the nested dropdown component
+         */
+        "dropDownConfig": { host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: PopoverPlacement; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; };
         /**
           * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc. Default is Monday.
          */
@@ -685,18 +690,7 @@ export namespace Components {
         /**
           * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel inside of the viewport.
          */
-        "placement": | 'top'
-    | 'top-start'
-    | 'top-end'
-    | 'bottom'
-    | 'bottom-start'
-    | 'bottom-end'
-    | 'right'
-    | 'right-start'
-    | 'right-end'
-    | 'left'
-    | 'left-start'
-    | 'left-end';
+        "placement": PopoverPlacement;
         /**
           * Shows the dropdown panel
          */
@@ -1693,6 +1687,14 @@ export namespace Components {
           * Disables resizing. Note that the position may still change as a result of resizing the host element.
          */
         "disabled": boolean;
+        /**
+          * Utility to convert % to pixels
+         */
+        "getPercentageToPixels": (value: number) => Promise<number>;
+        /**
+          * Utility to convert pixels to % (`position`)
+         */
+        "getPixelsToPercentage": (value: number) => Promise<number>;
         /**
           * The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the container's initial size.
          */
@@ -2566,7 +2568,7 @@ declare namespace LocalJSX {
         /**
           * nano-dropdown config options you can pass to the nested dropdown component
          */
-        "dropDownConfig"?: { host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end"; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; };
+        "dropDownConfig"?: { host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: PopoverPlacement; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; };
         /**
           * A selector to a HTMLInputElement
          */
@@ -2596,7 +2598,7 @@ declare namespace LocalJSX {
          */
         "selected"?: string[];
         /**
-          * Tweaks the datalist behaviour and linked control semantics and behaviour. e.g. 'select' will make the linked input control readonly.
+          * Tweaks the datalist behaviour and linked control semantics and behaviour. e.g. 'select' will make the linked input control `readonly`.
          */
         "type"?: 'select' | 'selctMulti' | 'input';
     }
@@ -2625,6 +2627,10 @@ declare namespace LocalJSX {
           * If `true`, the user cannot interact with the input.
          */
         "disabled"?: boolean;
+        /**
+          * nano-dropdown config options you can pass to the nested dropdown component
+         */
+        "dropDownConfig"?: { host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: PopoverPlacement; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; };
         /**
           * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc. Default is Monday.
          */
@@ -2947,18 +2953,7 @@ declare namespace LocalJSX {
         /**
           * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel inside of the viewport.
          */
-        "placement"?: | 'top'
-    | 'top-start'
-    | 'top-end'
-    | 'bottom'
-    | 'bottom-start'
-    | 'bottom-end'
-    | 'right'
-    | 'right-start'
-    | 'right-end'
-    | 'left'
-    | 'left-start'
-    | 'left-end';
+        "placement"?: PopoverPlacement;
         /**
           * The distance in pixels from which to offset the panel along its trigger.
          */

package/dist/types/utils/popover.d.ts

@@ -1,4 +1,16 @@
 import { Instance as PopperInstance } from '@popperjs/core';
+export declare type PopoverPlacement = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end' | 'center';
+interface PopoverOptions {
+  distance?: number;
+  placement?: PopoverPlacement;
+  skidding?: number;
+  strategy?: 'absolute' | 'fixed';
+  transitionElement?: HTMLElement;
+  visibleClass?: string;
+  onAfterShow?: () => any;
+  onAfterHide?: () => any;
+  onTransitionEnd?: (event: TransitionEvent) => any;
+}
 export default class Popover {
   anchor: HTMLElement;
   isVisible: boolean;
@@ -12,15 +24,4 @@ export default class Popover {
   hide(): void;
   setOptions(options: PopoverOptions): void;
 }
-interface PopoverOptions {
-  distance?: number;
-  placement?: 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
-  skidding?: number;
-  strategy?: 'absolute' | 'fixed';
-  transitionElement?: HTMLElement;
-  visibleClass?: string;
-  onAfterShow?: () => any;
-  onAfterHide?: () => any;
-  onTransitionEnd?: (event: TransitionEvent) => any;
-}
 export {};