@nanoporetech-digital/components 2.4.0 → 2.5.0

package/dist/nano-components/{p-fd1a86d2.system.entry.js → p-9acc4596.system.entry.js}

@@ -1,5 +1,5 @@
 var __awaiter=this&&this.__awaiter||function(e,t,n,o){function i(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,r){function s(e){try{d(o.next(e))}catch(t){r(t)}}function a(e){try{d(o["throw"](e))}catch(t){r(t)}}function d(e){e.done?n(e.value):i(e.value).then(s,a)}d((o=o.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},o,i,r,s;return s={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function a(e){return function(t){return d([e,t])}}function d(s){if(o)throw new TypeError("Generator is already executing.");while(n)try{if(o=1,i&&(r=s[0]&2?i["return"]:s[0]?i["throw"]||((r=i["return"])&&r.call(i),0):i.next)&&!(r=r.call(i,s[1])).done)return r;if(i=0,r)s=[s[0]&2,r.value];switch(s[0]){case 0:case 1:r=s;break;case 4:n.label++;return{value:s[1],done:false};case 5:n.label++;i=s[1];s=[0];continue;case 7:s=n.ops.pop();n.trys.pop();continue;default:if(!(r=n.trys,r=r.length>0&&r[r.length-1])&&(s[0]===6||s[0]===2)){n=0;continue}if(s[0]===3&&(!r||s[1]>r[0]&&s[1]<r[3])){n.label=s[1];break}if(s[0]===6&&n.label<r[1]){n.label=r[1];r=s;break}if(r&&n.label<r[2]){n.label=r[2];n.ops.push(s);break}if(r[2])n.ops.pop();n.trys.pop();continue}s=t.call(e,n)}catch(a){s=[6,a];i=0}finally{o=r=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};
 /*!
  * Web Components for Nanopore digital Web Apps
- */System.register(["./p-59b3d24b.system.js","./p-d35d468b.system.js","./p-09d2d944.system.js","./p-9de508a5.system.js","./p-1c216ca4.system.js"],(function(e){"use strict";var t,n,o,i,r,s,a;return{setters:[function(e){t=e.r;n=e.c;o=e.h;i=e.g},function(e){r=e.P},function(e){s=e.g},function(e){a=e.a},function(){}],execute:function(){var d=":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{--width:auto;--border:var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)));--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background:var(--nano-layer-bg, #fff);--padding:10px 0;--overflow:hidden;--dropdown-z-index:var(--nano-layer-index-dropdown, 300);--min-width:0;--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));display:-webkit-box;display:-ms-flexbox;display:flex}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-width:var(--min-width)}@media (max-width: 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-width:var(--min-width);width:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentColor;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);opacity:0;-webkit-transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-height;transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-height;min-height:20px;overflow:var(--overflow);-webkit-box-sizing:content-box !important;box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{-webkit-transform:translateY(-20px) translateZ(0);transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{-webkit-transform:translateY(20px) translateZ(0);transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;-webkit-transform:translateY(0) translateZ(0);transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(nano-menu){max-height:50vh}.dropdown__accessible-title{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}";var h=0;var l=e("nano_dropdown",function(){function e(e){var o=this;t(this,e);this.nanoShow=n(this,"nanoShow",7);this.nanoAfterShow=n(this,"nanoAfterShow",7);this.nanoHide=n(this,"nanoHide",7);this.nanoAfterHide=n(this,"nanoAfterHide",7);this.dropdownId="dropdown-"+h++;this.labelId=this.dropdownId+"-title";this.ignoreOpenWatcher=false;this.didLoad=false;this.autoOpen=true;this.open=false;this.closeOnSelect=true;this.tetherTo=null;this.placement="bottom-start";this.distance=2;this.skidding=0;this.hoist=false;this.togglePanel=function(){if(!o.autoOpen)return;o.open?o.hide():o.show()};this.handleTriggerKeyDown=function(e){if(["ArrowDown","ArrowUp"," "].includes(e.key)){o.show();e.preventDefault();e.stopPropagation();if(o.menu)o.menu.setFocus()}};this.handleTriggerSlotChange=function(){o.updateAccessibleTrigger()}}Object.defineProperty(e.prototype,"menu",{get:function(){return this.host.querySelector("nano-menu")},enumerable:false,configurable:true});e.prototype.handleOpenChange=function(){if(this.ignoreOpenWatcher)return;this.open?this.show():this.hide();if(this.accessibleTrigger){this.accessibleTrigger.setAttribute("aria-expanded",this.open.toString());return}this.updateAccessibleTrigger()};e.prototype.handleTetherToChange=function(){this.createPopover();this.updateAccessibleTrigger()};e.prototype.handlePopoverOptionsChange=function(){this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,skidding:this.skidding,distance:this.distance})};e.prototype.secondaryOpen=function(e){var t=this;if(!e.detail.secondaryMenu)return;e.stopPropagation();this.panel.classList.add("loading");this.panel.addEventListener("transitionend",(function(){t.panel.classList.remove("loading")}),{once:true});this.panel.style.minHeight=e.detail.secondaryMenu.scrollHeight+"px"};e.prototype.secondaryClose=function(e){if(!e.detail.secondaryMenu)return;e.stopPropagation();if(!e.target.parentElement)return;this.panel.style.minHeight=e.target.parentElement.scrollHeight+"px"};e.prototype.handlePanelSelect=function(e){var t=e.target;if(this.closeOnSelect&&t.tagName.toLowerCase()==="nano-menu")this.hide()};e.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){this.ignoreOpenWatcher=true;this.open=true;e=this.nanoShow.emit();if(e.defaultPrevented){this.open=false;this.ignoreOpenWatcher=false;return[2]}this.popover.show();this.ignoreOpenWatcher=false;document.addEventListener("mousedown",this.handleDocumentMouseDown);document.addEventListener("keydown",this.handleDocumentKeyDown);return[2]}))}))};e.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){this.ignoreOpenWatcher=true;this.open=false;e=this.nanoHide.emit();if(e.defaultPrevented){this.open=true;this.ignoreOpenWatcher=false;return[2]}if(this.popover)this.popover.hide();this.ignoreOpenWatcher=false;document.removeEventListener("mousedown",this.handleDocumentMouseDown);document.removeEventListener("keydown",this.handleDocumentKeyDown);if(this.accessibleTrigger&&this.focusEleInDropDwn()){this.accessibleTrigger.focus()}return[2]}))}))};e.prototype.focusEleInDropDwn=function(e){var t;var n=s();if(e&&((t=e.composedPath())===null||t===void 0?void 0:t.length)){var o=e.composedPath().includes(this.containingElement);return!e.composedPath().includes(this.accessibleTrigger)&&o}return n&&n.closest(this.containingElement.tagName.toLowerCase())===this.containingElement&&n!==this.accessibleTrigger};e.prototype.updateAccessibleTrigger=function(){if(!this.didLoad)return;var e;this.accessibleTrigger=null;if(!this.tetherTo){var t=Array.from(this.host.querySelectorAll('[slot="trigger"]'));e=t.map(a)[0]}else{e=a(this.tetherTo)}if(e){e.setAttribute("aria-haspopup","true");e.setAttribute("aria-expanded",this.open?"true":"false");this.accessibleTrigger=e}};e.prototype.handleDocumentKeyDown=function(e){var t=this;if(e.key==="Escape"){this.hide();return}if(e.key==="Tab"){setTimeout((function(){if(document.activeElement&&document.activeElement.closest(t.containingElement.tagName.toLowerCase())!==t.containingElement){t.hide();return}}))}if(this.menu&&["ArrowDown","ArrowUp"].includes(e.key)){if(!this.open||this.focusEleInDropDwn(e))return;e.preventDefault();this.menu.setFocus();return}var n=e.composedPath();if(this.menu&&n.length&&!n.find((function(e){return e!==t.menu}))){this.menu.dispatchEvent(new KeyboardEvent(e.type,e));return}};e.prototype.handleDocumentMouseDown=function(e){if(!this.focusEleInDropDwn(e)){this.hide();return}};e.prototype.createPopover=function(){var e=this;if(this.popover){if(this.open)this.hide();this.popover.destroy();this.popover=null}this.popover=new r(this.tetherTo||this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:function(){return e.nanoAfterHide.emit()},onAfterShow:function(){return e.nanoAfterShow.emit()},onTransitionEnd:function(){if(!e.open){e.panel.scrollTop=0}else if(e.menu){e.menu.showActiveElement()}}});if(this.open){this.show()}};e.prototype.connectedCallback=function(){this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this);this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this);if(!this.containingElement)this.containingElement=this.host};e.prototype.componentDidLoad=function(){var e=this;this.didLoad=true;this.createPopover();setTimeout((function(){return e.updateAccessibleTrigger()}),100)};e.prototype.disconnectedCallback=function(){this.hide();if(this.popover)this.popover.destroy()};e.prototype.render=function(){var e=this;return o("div",{part:"base",id:this.dropdownId,class:{dropdown:true,"dropdown--open":this.open}},o("span",{part:"trigger",class:"dropdown__trigger",ref:function(t){return e.trigger=t},onKeyDown:this.handleTriggerKeyDown,onClick:this.togglePanel},o("slot",{name:"trigger",onSlotchange:this.handleTriggerSlotChange})),o("div",{ref:function(t){return e.positioner=t},class:"dropdown__positioner"},o("div",{ref:function(t){return e.panel=t},part:"panel",class:"dropdown__panel "+this.placement.split("-").join(" "),"aria-hidden":!this.open,role:"dialog","aria-modal":"true","aria-labelledby":this.dialogTitle?this.labelId:undefined},this.dialogTitle&&o("h2",{id:this.labelId,class:"dropdown__accessible-title","aria-live":"polite"},this.dialogTitle),o("slot",null))))};Object.defineProperty(e.prototype,"host",{get:function(){return i(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{open:["handleOpenChange"],tetherTo:["handleTetherToChange"],placement:["handlePopoverOptionsChange"],distance:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"]}},enumerable:false,configurable:true});return e}());l.style=d}}}));
-//# sourceMappingURL=p-fd1a86d2.system.entry.js.map
+ */System.register(["./p-59b3d24b.system.js","./p-9745d44e.system.js","./p-09d2d944.system.js","./p-9de508a5.system.js","./p-1c216ca4.system.js"],(function(e){"use strict";var t,n,o,i,r,s,a;return{setters:[function(e){t=e.r;n=e.c;o=e.h;i=e.g},function(e){r=e.P},function(e){s=e.g},function(e){a=e.a},function(){}],execute:function(){var d=":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{--width:auto;--border:var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)));--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background:var(--nano-layer-bg, #fff);--padding:10px 0;--overflow:hidden;--dropdown-z-index:var(--nano-layer-index-dropdown, 300);--min-width:0;--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));display:-webkit-box;display:-ms-flexbox;display:flex}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-width:var(--min-width)}@media (max-width: 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-width:var(--min-width);width:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentColor;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);opacity:0;-webkit-transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-height;transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-height;min-height:20px;overflow:var(--overflow);-webkit-box-sizing:content-box !important;box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{-webkit-transform:translateY(-20px) translateZ(0);transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{-webkit-transform:translateY(20px) translateZ(0);transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;-webkit-transform:translateY(0) translateZ(0);transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(nano-menu){max-height:50vh}.dropdown__accessible-title{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}";var h=0;var l=e("nano_dropdown",function(){function e(e){var o=this;t(this,e);this.nanoShow=n(this,"nanoShow",7);this.nanoAfterShow=n(this,"nanoAfterShow",7);this.nanoHide=n(this,"nanoHide",7);this.nanoAfterHide=n(this,"nanoAfterHide",7);this.dropdownId="dropdown-"+h++;this.labelId=this.dropdownId+"-title";this.ignoreOpenWatcher=false;this.didLoad=false;this.autoOpen=true;this.open=false;this.closeOnSelect=true;this.tetherTo=null;this.placement="bottom-start";this.distance=2;this.skidding=0;this.hoist=false;this.togglePanel=function(){if(!o.autoOpen)return;o.open?o.hide():o.show()};this.handleTriggerKeyDown=function(e){if(["ArrowDown","ArrowUp"," "].includes(e.key)){o.show();e.preventDefault();e.stopPropagation();if(o.menu)o.menu.setFocus()}};this.handleTriggerSlotChange=function(){o.updateAccessibleTrigger()}}Object.defineProperty(e.prototype,"menu",{get:function(){return this.host.querySelector("nano-menu")},enumerable:false,configurable:true});e.prototype.handleOpenChange=function(){if(this.ignoreOpenWatcher)return;this.open?this.show():this.hide();if(this.accessibleTrigger){this.accessibleTrigger.setAttribute("aria-expanded",this.open.toString());return}this.updateAccessibleTrigger()};e.prototype.handleTetherToChange=function(){this.createPopover();this.updateAccessibleTrigger()};e.prototype.handlePopoverOptionsChange=function(){this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,skidding:this.skidding,distance:this.distance})};e.prototype.secondaryOpen=function(e){var t=this;if(!e.detail.secondaryMenu)return;e.stopPropagation();this.panel.classList.add("loading");this.panel.addEventListener("transitionend",(function(){t.panel.classList.remove("loading")}),{once:true});this.panel.style.minHeight=e.detail.secondaryMenu.scrollHeight+"px"};e.prototype.secondaryClose=function(e){if(!e.detail.secondaryMenu)return;e.stopPropagation();if(!e.target.parentElement)return;this.panel.style.minHeight=e.target.parentElement.scrollHeight+"px"};e.prototype.handlePanelSelect=function(e){var t=e.target;if(this.closeOnSelect&&t.tagName.toLowerCase()==="nano-menu")this.hide()};e.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){this.ignoreOpenWatcher=true;this.open=true;e=this.nanoShow.emit();if(e.defaultPrevented){this.open=false;this.ignoreOpenWatcher=false;return[2]}this.popover.show();this.ignoreOpenWatcher=false;document.addEventListener("mousedown",this.handleDocumentMouseDown);document.addEventListener("keydown",this.handleDocumentKeyDown);return[2]}))}))};e.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){this.ignoreOpenWatcher=true;this.open=false;e=this.nanoHide.emit();if(e.defaultPrevented){this.open=true;this.ignoreOpenWatcher=false;return[2]}if(this.popover)this.popover.hide();this.ignoreOpenWatcher=false;document.removeEventListener("mousedown",this.handleDocumentMouseDown);document.removeEventListener("keydown",this.handleDocumentKeyDown);if(this.accessibleTrigger&&this.focusEleInDropDwn()){this.accessibleTrigger.focus()}return[2]}))}))};e.prototype.focusEleInDropDwn=function(e){var t;var n=s();if(e&&((t=e.composedPath())===null||t===void 0?void 0:t.length)){var o=e.composedPath().includes(this.containingElement);return!e.composedPath().includes(this.accessibleTrigger)&&o}return n&&n.closest(this.containingElement.tagName.toLowerCase())===this.containingElement&&n!==this.accessibleTrigger};e.prototype.updateAccessibleTrigger=function(){if(!this.didLoad)return;var e;this.accessibleTrigger=null;if(!this.tetherTo){var t=Array.from(this.host.querySelectorAll('[slot="trigger"]'));e=t.map(a)[0]}else{e=a(this.tetherTo)}if(e){e.setAttribute("aria-haspopup","true");e.setAttribute("aria-expanded",this.open?"true":"false");this.accessibleTrigger=e}};e.prototype.handleDocumentKeyDown=function(e){var t=this;if(e.key==="Escape"){this.hide();return}if(e.key==="Tab"){setTimeout((function(){if(document.activeElement&&document.activeElement.closest(t.containingElement.tagName.toLowerCase())!==t.containingElement){t.hide();return}}))}if(this.menu&&["ArrowDown","ArrowUp"].includes(e.key)){if(!this.open||this.focusEleInDropDwn(e))return;e.preventDefault();this.menu.setFocus();return}var n=e.composedPath();if(this.menu&&n.length&&!n.find((function(e){return e!==t.menu}))){this.menu.dispatchEvent(new KeyboardEvent(e.type,e));return}};e.prototype.handleDocumentMouseDown=function(e){if(!this.focusEleInDropDwn(e)){this.hide();return}};e.prototype.createPopover=function(){var e=this;if(this.popover){if(this.open)this.hide();this.popover.destroy();this.popover=null}this.popover=new r(this.tetherTo||this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:function(){return e.nanoAfterHide.emit()},onAfterShow:function(){return e.nanoAfterShow.emit()},onTransitionEnd:function(){if(!e.open){e.panel.scrollTop=0}else if(e.menu){e.menu.showActiveElement()}}});if(this.open){this.show()}};e.prototype.connectedCallback=function(){this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this);this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this);if(!this.containingElement)this.containingElement=this.host};e.prototype.componentDidLoad=function(){var e=this;this.didLoad=true;this.createPopover();setTimeout((function(){return e.updateAccessibleTrigger()}),100)};e.prototype.disconnectedCallback=function(){this.hide();if(this.popover)this.popover.destroy()};e.prototype.render=function(){var e=this;return o("div",{part:"base",id:this.dropdownId,class:{dropdown:true,"dropdown--open":this.open}},o("span",{part:"trigger",class:"dropdown__trigger",ref:function(t){return e.trigger=t},onKeyDown:this.handleTriggerKeyDown,onClick:this.togglePanel},o("slot",{name:"trigger",onSlotchange:this.handleTriggerSlotChange})),o("div",{ref:function(t){return e.positioner=t},class:"dropdown__positioner"},o("div",{ref:function(t){return e.panel=t},part:"panel",class:"dropdown__panel "+this.placement.split("-").join(" "),"aria-hidden":!this.open,role:"dialog","aria-modal":"true","aria-labelledby":this.dialogTitle?this.labelId:undefined},this.dialogTitle&&o("h2",{id:this.labelId,class:"dropdown__accessible-title","aria-live":"polite"},this.dialogTitle),o("slot",null))))};Object.defineProperty(e.prototype,"host",{get:function(){return i(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{open:["handleOpenChange"],tetherTo:["handleTetherToChange"],placement:["handlePopoverOptionsChange"],distance:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"]}},enumerable:false,configurable:true});return e}());l.style=d}}}));
+//# sourceMappingURL=p-9acc4596.system.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/dropdown/dropdown.scss?tag=nano-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"names":["dropdownCss","dropDownIds","Dropdown","exports","class_1","hostRef","_this","this","dropdownId","labelId","ignoreOpenWatcher","didLoad","autoOpen","open","closeOnSelect","tetherTo","placement","distance","skidding","hoist","togglePanel","hide","show","handleTriggerKeyDown","event","includes","key","preventDefault","stopPropagation","menu","setFocus","handleTriggerSlotChange","updateAccessibleTrigger","Object","defineProperty","prototype","host","querySelector","handleOpenChange","accessibleTrigger","setAttribute","toString","handleTetherToChange","createPopover","handlePopoverOptionsChange","popover","setOptions","strategy","secondaryOpen","ev","detail","secondaryMenu","panel","classList","add","addEventListener","remove","once","style","minHeight","scrollHeight","secondaryClose","target","parentElement","handlePanelSelect","tagName","toLowerCase","nanoShow","emit","defaultPrevented","document","handleDocumentMouseDown","handleDocumentKeyDown","nanoHide","removeEventListener","focusEleInDropDwn","focus","e","activeElement","getActiveElement","_a","composedPath","length","ddInPath","containingElement","closest","assignedElements","Array","from","querySelectorAll","map","getNearestTabbableElement","setTimeout","ePath","find","el","dispatchEvent","KeyboardEvent","type","destroy","Popover","trigger","positioner","transitionElement","onAfterHide","nanoAfterHide","onAfterShow","nanoAfterShow","onTransitionEnd","scrollTop","showActiveElement","connectedCallback","bind","componentDidLoad","disconnectedCallback","render","h","part","id","class","dropdown","dropdown--open","ref","onKeyDown","onClick","name","onSlotchange","split","join","aria-hidden","role","aria-modal","aria-labelledby","dialogTitle","undefined","aria-live"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --width: width of the dropdown. Defaults to 'auto'\n   * @prop --border: Defaults to #{$layer-border-style}\n   * @prop --border-radius: Defaults to #{$layer-bg-color};\n   * @prop --background: Defaults to #{$layer-bg-color};\n   * @prop --padding: padding of the drop down. Default to '10px 0';\n   * @prop --overflow: `nano-menu` with nested `nav-item` requires hidden overflow. This can be overidden;\n   * @prop --dropdown-z-index: Defaults to #{$layer-index-dropdown};\n   * @prop --min-width: Defaults to 0;\n   * @prop --box-shadow: #{$layer-shadow-large};\n   */\n\n  --width: auto;\n  --border: #{$layer-border-style};\n  --border-radius: #{$layer-border-radius};\n  --background: #{$layer-bg-color};\n  --padding: 10px 0;\n  --overflow: hidden;\n  --dropdown-z-index: #{$layer-index-dropdown};\n  --min-width: 0;\n  --box-shadow: #{$layer-shadow-large};\n\n  display: flex;\n}\n\n.dropdown {\n  position: relative;\n\n  &__trigger {\n    display: block;\n  }\n\n  &__positioner {\n    position: absolute;\n    z-index: var(--dropdown-z-index);\n    min-width: var(--min-width);\n\n    @media (max-width: 35.9375em) {\n      z-index: 100;\n    }\n  }\n\n  &__panel {\n    padding: var(--padding);\n    background: var(--background);\n    min-width: var(--min-width);\n    width: var(--width);\n    border: var(--border);\n    border-radius: var(--border-radius);\n    color: currentColor;\n    box-shadow: var(--box-shadow);\n    opacity: 0;\n    transition: 0.2s ease opacity, 0.2s ease transform, 0.2s ease min-height;\n    min-height: 20px;\n    overflow: var(--overflow);\n    box-sizing: content-box !important;\n\n    &.loading {\n      overflow-y: hidden;\n    }\n\n    &.top {\n      transform: translateY(-20px) translateZ(0);\n    }\n\n    &.bottom {\n      transform: translateY(20px) translateZ(0);\n    }\n\n    .dropdown__positioner.popover-visible & {\n      opacity: 1;\n      transform: translateY(0) translateZ(0);\n    }\n\n    ::slotted(nano-menu) {\n      max-height: 50vh;\n    }\n  }\n\n  &__accessible-title {\n    @include visually-hide();\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  Watch,\n  h,\n  Listen,\n  ComponentInterface,\n} from '@stencil/core';\nimport Popover, { PopoverPlacement } from '../../utils/popover';\nimport { NavItemEventDetail } from '../../interface';\nimport { getNearestTabbableElement, getActiveElement } from '../../utils';\n\nlet dropDownIds = 0;\n\n/**\n * Dropdowns show additional content in a panel.\n * Designed to work well with nano-menu components to provide a list of options (`nano-nav-items` / `nano-option`).\n * @slot trigger - The dropdown's trigger.\n * @slot - The dropdown's content.\n */\n@Component({\n  tag: 'nano-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown implements ComponentInterface {\n  private dropdownId = `dropdown-${dropDownIds++}`;\n  private labelId = this.dropdownId + '-title';\n  private ignoreOpenWatcher = false;\n  private panel: HTMLElement;\n  private popover: Popover;\n  private trigger: HTMLElement;\n  private positioner: HTMLElement;\n  private accessibleTrigger: HTMLElement;\n  private didLoad = false;\n  private get menu() {\n    return this.host.querySelector('nano-menu') as HTMLNanoMenuElement;\n  }\n\n  @Element() host: HTMLNanoDropdownElement;\n\n  /** Determines if the dropdown should open automatically when the trigger is clicked */\n  @Prop() autoOpen = true;\n\n  /** Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    if (this.ignoreOpenWatcher) return;\n\n    this.open ? this.show() : this.hide();\n\n    if (this.accessibleTrigger) {\n      this.accessibleTrigger.setAttribute(\n        'aria-expanded',\n        this.open.toString()\n      );\n      return;\n    }\n\n    this.updateAccessibleTrigger();\n  }\n\n  /**\n   * Determines whether the dropdown should hide when a menu item is selected.\n   */\n  @Prop() closeOnSelect = true;\n\n  /**\n   * The dropdown will close when the user interacts outside of this element (e.g. clicking).\n   */\n  @Prop({ mutable: true }) containingElement: HTMLElement;\n\n  /**\n   * If you don't want to use the trigger slot, you can use this to 'tether' the dropdown to another element.\n   * And you will still need to control when the component is opened (using show() / hide() or the `open` prop)\n   */\n  @Prop() tetherTo: HTMLElement = null;\n\n  @Watch('tetherTo')\n  handleTetherToChange() {\n    this.createPopover();\n    this.updateAccessibleTrigger();\n  }\n\n  /**\n   * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\n   * inside of the viewport.\n   */\n  @Prop() placement: PopoverPlacement = 'bottom-start';\n\n  /**\n   * The distance in pixels from which to offset the panel away from its trigger.\n   */\n  @Prop() distance = 2;\n\n  /**\n   * The distance in pixels from which to offset the panel along its trigger.\n   */\n  @Prop() skidding = 0;\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`.\n   */\n  @Prop() hoist = false;\n\n  @Watch('placement')\n  @Watch('distance')\n  @Watch('skidding')\n  @Watch('hoist')\n  handlePopoverOptionsChange() {\n    this.popover.setOptions({\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      skidding: this.skidding,\n      distance: this.distance,\n    });\n  }\n\n  /**\n   * Title used to describe the dropdown content for accessibility\n   */\n  @Prop() dialogTitle!: string;\n\n  // Events\n\n  /**\n   * Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened.\n   */\n  @Event() nanoShow: EventEmitter;\n\n  /**\n   * Emitted after the dropdown opens and all transitions are complete.\n   */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /**\n   * Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed.\n   */\n  @Event() nanoHide: EventEmitter;\n\n  /**\n   * Emitted after the dropdown closes and all transitions are complete.\n   */\n  @Event() nanoAfterHide: EventEmitter;\n\n  // Listeners\n\n  @Listen('nanoOpen')\n  secondaryOpen(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n\n    this.panel.classList.add('loading');\n    this.panel.addEventListener(\n      'transitionend',\n      () => {\n        this.panel.classList.remove('loading');\n      },\n      { once: true }\n    );\n\n    this.panel.style.minHeight =\n      (ev.detail as NavItemEventDetail).secondaryMenu.scrollHeight + 'px';\n  }\n\n  @Listen('nanoClose')\n  secondaryClose(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n    if (!(ev.target as HTMLElement).parentElement) return;\n    this.panel.style.minHeight =\n      (ev.target as HTMLElement).parentElement.scrollHeight + 'px';\n  }\n\n  @Listen('nanoSelect')\n  handlePanelSelect(event: CustomEvent) {\n    const target = event.target as HTMLElement;\n\n    // Hide the dropdown when a menu item is selected\n    if (this.closeOnSelect && target.tagName.toLowerCase() === 'nano-menu')\n      this.hide();\n  }\n\n  // Methods\n\n  /** Shows the dropdown panel */\n  @Method()\n  async show() {\n    this.ignoreOpenWatcher = true;\n    this.open = true;\n\n    const nanoShow = this.nanoShow.emit();\n\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      this.ignoreOpenWatcher = false;\n      return;\n    }\n\n    this.popover.show();\n    this.ignoreOpenWatcher = false;\n\n    document.addEventListener('mousedown', this.handleDocumentMouseDown);\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  /** Hides the dropdown panel */\n  @Method()\n  async hide() {\n    this.ignoreOpenWatcher = true;\n    this.open = false;\n\n    const nanoHide = this.nanoHide.emit();\n\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      this.ignoreOpenWatcher = false;\n      return;\n    }\n\n    if (this.popover) this.popover.hide();\n    this.ignoreOpenWatcher = false;\n\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n\n    if (this.accessibleTrigger && this.focusEleInDropDwn()) {\n      this.accessibleTrigger.focus();\n    }\n  }\n\n  // Private methods\n\n  /** Decides if the current active element or element\n   * connected to the current event is connected to the Dropdown\n   */\n  private focusEleInDropDwn(e?: Event) {\n    const activeElement = getActiveElement();\n\n    if (e && e.composedPath()?.length) {\n      const ddInPath = e.composedPath().includes(this.containingElement);\n      return !e.composedPath().includes(this.accessibleTrigger) && ddInPath;\n    }\n\n    return (\n      activeElement &&\n      activeElement.closest(this.containingElement.tagName.toLowerCase()) ===\n        this.containingElement &&\n      activeElement !== this.accessibleTrigger\n    );\n  }\n\n  private togglePanel = () => {\n    if (!this.autoOpen) return;\n    this.open ? this.hide() : this.show();\n  };\n\n  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and\n  // `aria-expanded`. These must be applied to the \"accessible trigger\" (the tabbable portion of the trigger element\n  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,\n  private updateAccessibleTrigger() {\n    if (!this.didLoad) return;\n\n    let accessibleTrigger: HTMLElement;\n    this.accessibleTrigger = null;\n\n    if (!this.tetherTo) {\n      const assignedElements = Array.from(\n        this.host.querySelectorAll('[slot=\"trigger\"]')\n      );\n      accessibleTrigger = assignedElements.map(getNearestTabbableElement)[0];\n    } else {\n      accessibleTrigger = getNearestTabbableElement(this.tetherTo);\n    }\n\n    if (accessibleTrigger) {\n      accessibleTrigger.setAttribute('aria-haspopup', 'true');\n      accessibleTrigger.setAttribute(\n        'aria-expanded',\n        this.open ? 'true' : 'false'\n      );\n      this.accessibleTrigger = accessibleTrigger;\n    }\n  }\n\n  // Handlers\n\n  private handleDocumentKeyDown(event: KeyboardEvent) {\n    // Close when escape is pressed\n    if (event.key === 'Escape') {\n      this.hide();\n      return;\n    }\n\n    // Close when tabbing results in the focus leaving the close element\n    if (event.key === 'Tab') {\n      setTimeout(() => {\n        if (\n          document.activeElement &&\n          document.activeElement.closest(\n            this.containingElement.tagName.toLowerCase()\n          ) !== this.containingElement\n        ) {\n          this.hide();\n          return;\n        }\n      });\n    }\n\n    // If a menu is present, focus on it when certain keys are pressed\n    if (this.menu && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n      // must have menu item, must have pressed down, must be open and must not have focus within dd\n      if (!this.open || this.focusEleInDropDwn(event)) return;\n      event.preventDefault();\n      this.menu.setFocus();\n      return;\n    }\n\n    // All other keys focus the menu and pass the event through to menu (necessary for type-to-search to work)\n    const ePath = event.composedPath();\n    if (this.menu && ePath.length && !ePath.find((el) => el !== this.menu)) {\n      this.menu.dispatchEvent(new KeyboardEvent(event.type, event));\n      return;\n    }\n  }\n\n  private handleDocumentMouseDown(event: MouseEvent) {\n    // Close when clicking outside of the close element\n\n    if (!this.focusEleInDropDwn(event)) {\n      this.hide();\n      return;\n    }\n  }\n\n  private handleTriggerKeyDown = (event: KeyboardEvent) => {\n    // Open the panel when pressing down or up while focused on the trigger\n    if (['ArrowDown', 'ArrowUp', ' '].includes(event.key)) {\n      this.show();\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (this.menu) this.menu.setFocus();\n    }\n  };\n\n  private handleTriggerSlotChange = () => {\n    this.updateAccessibleTrigger();\n  };\n\n  private createPopover() {\n    if (this.popover) {\n      if (this.open) this.hide();\n      this.popover.destroy();\n      this.popover = null;\n    }\n\n    this.popover = new Popover(this.tetherTo || this.trigger, this.positioner, {\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.panel,\n      onAfterHide: () => this.nanoAfterHide.emit(),\n      onAfterShow: () => this.nanoAfterShow.emit(),\n      onTransitionEnd: () => {\n        if (!this.open) {\n          this.panel.scrollTop = 0;\n        } else if (this.menu) {\n          this.menu.showActiveElement();\n        }\n      },\n    });\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  // Stencil hooks\n\n  connectedCallback() {\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);\n\n    if (!this.containingElement) this.containingElement = this.host;\n  }\n\n  componentDidLoad() {\n    this.didLoad = true;\n    this.createPopover();\n    setTimeout(() => this.updateAccessibleTrigger(), 100);\n  }\n\n  disconnectedCallback() {\n    this.hide();\n    if (this.popover) this.popover.destroy();\n  }\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        id={this.dropdownId}\n        class={{\n          dropdown: true,\n          'dropdown--open': this.open,\n        }}\n      >\n        <span\n          part=\"trigger\"\n          class=\"dropdown__trigger\"\n          ref={(el) => (this.trigger = el)}\n          onKeyDown={this.handleTriggerKeyDown}\n          onClick={this.togglePanel}\n        >\n          <slot name=\"trigger\" onSlotchange={this.handleTriggerSlotChange} />\n        </span>\n\n        <div ref={(el) => (this.positioner = el)} class=\"dropdown__positioner\">\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class={`dropdown__panel ${this.placement.split('-').join(' ')}`}\n            aria-hidden={!this.open}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={this.dialogTitle ? this.labelId : undefined}\n          >\n            {this.dialogTitle && (\n              <h2\n                id={this.labelId}\n                class=\"dropdown__accessible-title\"\n                aria-live=\"polite\"\n              >\n                {this.dialogTitle}\n              </h2>\n            )}\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/nano-components/{p-094ab6f8.entry.js → p-c9d09839.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as i,h as s,g as e}from"./p-ab5813a7.js";import{P as o}from"./p-4b7cd30c.js";import{g as n}from"./p-74a7fc4f.js";import{a as r}from"./p-9a385481.js";import"./p-289aa03f.js";const a=":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{--width:auto;--border:var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)));--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background:var(--nano-layer-bg, #fff);--padding:10px 0;--overflow:hidden;--dropdown-z-index:var(--nano-layer-index-dropdown, 300);--min-width:0;--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));display:-webkit-box;display:-ms-flexbox;display:flex}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-width:var(--min-width)}@media (max-width: 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-width:var(--min-width);width:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentColor;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);opacity:0;-webkit-transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-height;transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-height;min-height:20px;overflow:var(--overflow);-webkit-box-sizing:content-box !important;box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{-webkit-transform:translateY(-20px) translateZ(0);transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{-webkit-transform:translateY(20px) translateZ(0);transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;-webkit-transform:translateY(0) translateZ(0);transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(nano-menu){max-height:50vh}.dropdown__accessible-title{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}";let h=0;let d=class{constructor(s){t(this,s);this.nanoShow=i(this,"nanoShow",7);this.nanoAfterShow=i(this,"nanoAfterShow",7);this.nanoHide=i(this,"nanoHide",7);this.nanoAfterHide=i(this,"nanoAfterHide",7);this.dropdownId=`dropdown-${h++}`;this.labelId=this.dropdownId+"-title";this.ignoreOpenWatcher=false;this.didLoad=false;this.autoOpen=true;this.open=false;this.closeOnSelect=true;this.tetherTo=null;this.placement="bottom-start";this.distance=2;this.skidding=0;this.hoist=false;this.togglePanel=()=>{if(!this.autoOpen)return;this.open?this.hide():this.show()};this.handleTriggerKeyDown=t=>{if(["ArrowDown","ArrowUp"," "].includes(t.key)){this.show();t.preventDefault();t.stopPropagation();if(this.menu)this.menu.setFocus()}};this.handleTriggerSlotChange=()=>{this.updateAccessibleTrigger()}}get menu(){return this.host.querySelector("nano-menu")}handleOpenChange(){if(this.ignoreOpenWatcher)return;this.open?this.show():this.hide();if(this.accessibleTrigger){this.accessibleTrigger.setAttribute("aria-expanded",this.open.toString());return}this.updateAccessibleTrigger()}handleTetherToChange(){this.createPopover();this.updateAccessibleTrigger()}handlePopoverOptionsChange(){this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,skidding:this.skidding,distance:this.distance})}secondaryOpen(t){if(!t.detail.secondaryMenu)return;t.stopPropagation();this.panel.classList.add("loading");this.panel.addEventListener("transitionend",(()=>{this.panel.classList.remove("loading")}),{once:true});this.panel.style.minHeight=t.detail.secondaryMenu.scrollHeight+"px"}secondaryClose(t){if(!t.detail.secondaryMenu)return;t.stopPropagation();if(!t.target.parentElement)return;this.panel.style.minHeight=t.target.parentElement.scrollHeight+"px"}handlePanelSelect(t){const i=t.target;if(this.closeOnSelect&&i.tagName.toLowerCase()==="nano-menu")this.hide()}async show(){this.ignoreOpenWatcher=true;this.open=true;const t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;this.ignoreOpenWatcher=false;return}this.popover.show();this.ignoreOpenWatcher=false;document.addEventListener("mousedown",this.handleDocumentMouseDown);document.addEventListener("keydown",this.handleDocumentKeyDown)}async hide(){this.ignoreOpenWatcher=true;this.open=false;const t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;this.ignoreOpenWatcher=false;return}if(this.popover)this.popover.hide();this.ignoreOpenWatcher=false;document.removeEventListener("mousedown",this.handleDocumentMouseDown);document.removeEventListener("keydown",this.handleDocumentKeyDown);if(this.accessibleTrigger&&this.focusEleInDropDwn()){this.accessibleTrigger.focus()}}focusEleInDropDwn(t){var i;const s=n();if(t&&((i=t.composedPath())===null||i===void 0?void 0:i.length)){const i=t.composedPath().includes(this.containingElement);return!t.composedPath().includes(this.accessibleTrigger)&&i}return s&&s.closest(this.containingElement.tagName.toLowerCase())===this.containingElement&&s!==this.accessibleTrigger}updateAccessibleTrigger(){if(!this.didLoad)return;let t;this.accessibleTrigger=null;if(!this.tetherTo){const i=Array.from(this.host.querySelectorAll('[slot="trigger"]'));t=i.map(r)[0]}else{t=r(this.tetherTo)}if(t){t.setAttribute("aria-haspopup","true");t.setAttribute("aria-expanded",this.open?"true":"false");this.accessibleTrigger=t}}handleDocumentKeyDown(t){if(t.key==="Escape"){this.hide();return}if(t.key==="Tab"){setTimeout((()=>{if(document.activeElement&&document.activeElement.closest(this.containingElement.tagName.toLowerCase())!==this.containingElement){this.hide();return}}))}if(this.menu&&["ArrowDown","ArrowUp"].includes(t.key)){if(!this.open||this.focusEleInDropDwn(t))return;t.preventDefault();this.menu.setFocus();return}const i=t.composedPath();if(this.menu&&i.length&&!i.find((t=>t!==this.menu))){this.menu.dispatchEvent(new KeyboardEvent(t.type,t));return}}handleDocumentMouseDown(t){if(!this.focusEleInDropDwn(t)){this.hide();return}}createPopover(){if(this.popover){if(this.open)this.hide();this.popover.destroy();this.popover=null}this.popover=new o(this.tetherTo||this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:()=>this.nanoAfterHide.emit(),onAfterShow:()=>this.nanoAfterShow.emit(),onTransitionEnd:()=>{if(!this.open){this.panel.scrollTop=0}else if(this.menu){this.menu.showActiveElement()}}});if(this.open){this.show()}}connectedCallback(){this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this);this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this);if(!this.containingElement)this.containingElement=this.host}componentDidLoad(){this.didLoad=true;this.createPopover();setTimeout((()=>this.updateAccessibleTrigger()),100)}disconnectedCallback(){this.hide();if(this.popover)this.popover.destroy()}render(){return s("div",{part:"base",id:this.dropdownId,class:{dropdown:true,"dropdown--open":this.open}},s("span",{part:"trigger",class:"dropdown__trigger",ref:t=>this.trigger=t,onKeyDown:this.handleTriggerKeyDown,onClick:this.togglePanel},s("slot",{name:"trigger",onSlotchange:this.handleTriggerSlotChange})),s("div",{ref:t=>this.positioner=t,class:"dropdown__positioner"},s("div",{ref:t=>this.panel=t,part:"panel",class:`dropdown__panel ${this.placement.split("-").join(" ")}`,"aria-hidden":!this.open,role:"dialog","aria-modal":"true","aria-labelledby":this.dialogTitle?this.labelId:undefined},this.dialogTitle&&s("h2",{id:this.labelId,class:"dropdown__accessible-title","aria-live":"polite"},this.dialogTitle),s("slot",null))))}get host(){return e(this)}static get watchers(){return{open:["handleOpenChange"],tetherTo:["handleTetherToChange"],placement:["handlePopoverOptionsChange"],distance:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"]}}};d.style=a;export{d as nano_dropdown};
-//# sourceMappingURL=p-094ab6f8.entry.js.map
+import{r as t,c as i,h as s,g as e}from"./p-ab5813a7.js";import{P as o}from"./p-178c34e3.js";import{g as n}from"./p-74a7fc4f.js";import{a as r}from"./p-9a385481.js";import"./p-289aa03f.js";const a=":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{--width:auto;--border:var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)));--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background:var(--nano-layer-bg, #fff);--padding:10px 0;--overflow:hidden;--dropdown-z-index:var(--nano-layer-index-dropdown, 300);--min-width:0;--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));display:-webkit-box;display:-ms-flexbox;display:flex}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-width:var(--min-width)}@media (max-width: 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-width:var(--min-width);width:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentColor;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);opacity:0;-webkit-transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-height;transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-height;min-height:20px;overflow:var(--overflow);-webkit-box-sizing:content-box !important;box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{-webkit-transform:translateY(-20px) translateZ(0);transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{-webkit-transform:translateY(20px) translateZ(0);transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;-webkit-transform:translateY(0) translateZ(0);transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(nano-menu){max-height:50vh}.dropdown__accessible-title{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}";let h=0;let d=class{constructor(s){t(this,s);this.nanoShow=i(this,"nanoShow",7);this.nanoAfterShow=i(this,"nanoAfterShow",7);this.nanoHide=i(this,"nanoHide",7);this.nanoAfterHide=i(this,"nanoAfterHide",7);this.dropdownId=`dropdown-${h++}`;this.labelId=this.dropdownId+"-title";this.ignoreOpenWatcher=false;this.didLoad=false;this.autoOpen=true;this.open=false;this.closeOnSelect=true;this.tetherTo=null;this.placement="bottom-start";this.distance=2;this.skidding=0;this.hoist=false;this.togglePanel=()=>{if(!this.autoOpen)return;this.open?this.hide():this.show()};this.handleTriggerKeyDown=t=>{if(["ArrowDown","ArrowUp"," "].includes(t.key)){this.show();t.preventDefault();t.stopPropagation();if(this.menu)this.menu.setFocus()}};this.handleTriggerSlotChange=()=>{this.updateAccessibleTrigger()}}get menu(){return this.host.querySelector("nano-menu")}handleOpenChange(){if(this.ignoreOpenWatcher)return;this.open?this.show():this.hide();if(this.accessibleTrigger){this.accessibleTrigger.setAttribute("aria-expanded",this.open.toString());return}this.updateAccessibleTrigger()}handleTetherToChange(){this.createPopover();this.updateAccessibleTrigger()}handlePopoverOptionsChange(){this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,skidding:this.skidding,distance:this.distance})}secondaryOpen(t){if(!t.detail.secondaryMenu)return;t.stopPropagation();this.panel.classList.add("loading");this.panel.addEventListener("transitionend",(()=>{this.panel.classList.remove("loading")}),{once:true});this.panel.style.minHeight=t.detail.secondaryMenu.scrollHeight+"px"}secondaryClose(t){if(!t.detail.secondaryMenu)return;t.stopPropagation();if(!t.target.parentElement)return;this.panel.style.minHeight=t.target.parentElement.scrollHeight+"px"}handlePanelSelect(t){const i=t.target;if(this.closeOnSelect&&i.tagName.toLowerCase()==="nano-menu")this.hide()}async show(){this.ignoreOpenWatcher=true;this.open=true;const t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;this.ignoreOpenWatcher=false;return}this.popover.show();this.ignoreOpenWatcher=false;document.addEventListener("mousedown",this.handleDocumentMouseDown);document.addEventListener("keydown",this.handleDocumentKeyDown)}async hide(){this.ignoreOpenWatcher=true;this.open=false;const t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;this.ignoreOpenWatcher=false;return}if(this.popover)this.popover.hide();this.ignoreOpenWatcher=false;document.removeEventListener("mousedown",this.handleDocumentMouseDown);document.removeEventListener("keydown",this.handleDocumentKeyDown);if(this.accessibleTrigger&&this.focusEleInDropDwn()){this.accessibleTrigger.focus()}}focusEleInDropDwn(t){var i;const s=n();if(t&&((i=t.composedPath())===null||i===void 0?void 0:i.length)){const i=t.composedPath().includes(this.containingElement);return!t.composedPath().includes(this.accessibleTrigger)&&i}return s&&s.closest(this.containingElement.tagName.toLowerCase())===this.containingElement&&s!==this.accessibleTrigger}updateAccessibleTrigger(){if(!this.didLoad)return;let t;this.accessibleTrigger=null;if(!this.tetherTo){const i=Array.from(this.host.querySelectorAll('[slot="trigger"]'));t=i.map(r)[0]}else{t=r(this.tetherTo)}if(t){t.setAttribute("aria-haspopup","true");t.setAttribute("aria-expanded",this.open?"true":"false");this.accessibleTrigger=t}}handleDocumentKeyDown(t){if(t.key==="Escape"){this.hide();return}if(t.key==="Tab"){setTimeout((()=>{if(document.activeElement&&document.activeElement.closest(this.containingElement.tagName.toLowerCase())!==this.containingElement){this.hide();return}}))}if(this.menu&&["ArrowDown","ArrowUp"].includes(t.key)){if(!this.open||this.focusEleInDropDwn(t))return;t.preventDefault();this.menu.setFocus();return}const i=t.composedPath();if(this.menu&&i.length&&!i.find((t=>t!==this.menu))){this.menu.dispatchEvent(new KeyboardEvent(t.type,t));return}}handleDocumentMouseDown(t){if(!this.focusEleInDropDwn(t)){this.hide();return}}createPopover(){if(this.popover){if(this.open)this.hide();this.popover.destroy();this.popover=null}this.popover=new o(this.tetherTo||this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:()=>this.nanoAfterHide.emit(),onAfterShow:()=>this.nanoAfterShow.emit(),onTransitionEnd:()=>{if(!this.open){this.panel.scrollTop=0}else if(this.menu){this.menu.showActiveElement()}}});if(this.open){this.show()}}connectedCallback(){this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this);this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this);if(!this.containingElement)this.containingElement=this.host}componentDidLoad(){this.didLoad=true;this.createPopover();setTimeout((()=>this.updateAccessibleTrigger()),100)}disconnectedCallback(){this.hide();if(this.popover)this.popover.destroy()}render(){return s("div",{part:"base",id:this.dropdownId,class:{dropdown:true,"dropdown--open":this.open}},s("span",{part:"trigger",class:"dropdown__trigger",ref:t=>this.trigger=t,onKeyDown:this.handleTriggerKeyDown,onClick:this.togglePanel},s("slot",{name:"trigger",onSlotchange:this.handleTriggerSlotChange})),s("div",{ref:t=>this.positioner=t,class:"dropdown__positioner"},s("div",{ref:t=>this.panel=t,part:"panel",class:`dropdown__panel ${this.placement.split("-").join(" ")}`,"aria-hidden":!this.open,role:"dialog","aria-modal":"true","aria-labelledby":this.dialogTitle?this.labelId:undefined},this.dialogTitle&&s("h2",{id:this.labelId,class:"dropdown__accessible-title","aria-live":"polite"},this.dialogTitle),s("slot",null))))}get host(){return e(this)}static get watchers(){return{open:["handleOpenChange"],tetherTo:["handleTetherToChange"],placement:["handlePopoverOptionsChange"],distance:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"]}}};d.style=a;export{d as nano_dropdown};
+//# sourceMappingURL=p-c9d09839.entry.js.map

package/dist/nano-components/p-c9d09839.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/dropdown/dropdown.scss?tag=nano-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"names":["dropdownCss","dropDownIds","Dropdown","[object Object]","hostRef","this","dropdownId","labelId","ignoreOpenWatcher","didLoad","autoOpen","open","closeOnSelect","tetherTo","placement","distance","skidding","hoist","togglePanel","hide","show","handleTriggerKeyDown","event","includes","key","preventDefault","stopPropagation","menu","setFocus","handleTriggerSlotChange","updateAccessibleTrigger","host","querySelector","accessibleTrigger","setAttribute","toString","createPopover","popover","setOptions","strategy","ev","detail","secondaryMenu","panel","classList","add","addEventListener","remove","once","style","minHeight","scrollHeight","target","parentElement","tagName","toLowerCase","nanoShow","emit","defaultPrevented","document","handleDocumentMouseDown","handleDocumentKeyDown","nanoHide","removeEventListener","focusEleInDropDwn","focus","e","activeElement","getActiveElement","_a","composedPath","length","ddInPath","containingElement","closest","assignedElements","Array","from","querySelectorAll","map","getNearestTabbableElement","setTimeout","ePath","find","el","dispatchEvent","KeyboardEvent","type","destroy","Popover","trigger","positioner","transitionElement","onAfterHide","nanoAfterHide","onAfterShow","nanoAfterShow","onTransitionEnd","scrollTop","showActiveElement","bind","h","part","id","class","dropdown","dropdown--open","ref","onKeyDown","onClick","name","onSlotchange","split","join","aria-hidden","role","aria-modal","aria-labelledby","dialogTitle","undefined","aria-live"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --width: width of the dropdown. Defaults to 'auto'\n   * @prop --border: Defaults to #{$layer-border-style}\n   * @prop --border-radius: Defaults to #{$layer-bg-color};\n   * @prop --background: Defaults to #{$layer-bg-color};\n   * @prop --padding: padding of the drop down. Default to '10px 0';\n   * @prop --overflow: `nano-menu` with nested `nav-item` requires hidden overflow. This can be overidden;\n   * @prop --dropdown-z-index: Defaults to #{$layer-index-dropdown};\n   * @prop --min-width: Defaults to 0;\n   * @prop --box-shadow: #{$layer-shadow-large};\n   */\n\n  --width: auto;\n  --border: #{$layer-border-style};\n  --border-radius: #{$layer-border-radius};\n  --background: #{$layer-bg-color};\n  --padding: 10px 0;\n  --overflow: hidden;\n  --dropdown-z-index: #{$layer-index-dropdown};\n  --min-width: 0;\n  --box-shadow: #{$layer-shadow-large};\n\n  display: flex;\n}\n\n.dropdown {\n  position: relative;\n\n  &__trigger {\n    display: block;\n  }\n\n  &__positioner {\n    position: absolute;\n    z-index: var(--dropdown-z-index);\n    min-width: var(--min-width);\n\n    @media (max-width: 35.9375em) {\n      z-index: 100;\n    }\n  }\n\n  &__panel {\n    padding: var(--padding);\n    background: var(--background);\n    min-width: var(--min-width);\n    width: var(--width);\n    border: var(--border);\n    border-radius: var(--border-radius);\n    color: currentColor;\n    box-shadow: var(--box-shadow);\n    opacity: 0;\n    transition: 0.2s ease opacity, 0.2s ease transform, 0.2s ease min-height;\n    min-height: 20px;\n    overflow: var(--overflow);\n    box-sizing: content-box !important;\n\n    &.loading {\n      overflow-y: hidden;\n    }\n\n    &.top {\n      transform: translateY(-20px) translateZ(0);\n    }\n\n    &.bottom {\n      transform: translateY(20px) translateZ(0);\n    }\n\n    .dropdown__positioner.popover-visible & {\n      opacity: 1;\n      transform: translateY(0) translateZ(0);\n    }\n\n    ::slotted(nano-menu) {\n      max-height: 50vh;\n    }\n  }\n\n  &__accessible-title {\n    @include visually-hide();\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  Watch,\n  h,\n  Listen,\n  ComponentInterface,\n} from '@stencil/core';\nimport Popover, { PopoverPlacement } from '../../utils/popover';\nimport { NavItemEventDetail } from '../../interface';\nimport { getNearestTabbableElement, getActiveElement } from '../../utils';\n\nlet dropDownIds = 0;\n\n/**\n * Dropdowns show additional content in a panel.\n * Designed to work well with nano-menu components to provide a list of options (`nano-nav-items` / `nano-option`).\n * @slot trigger - The dropdown's trigger.\n * @slot - The dropdown's content.\n */\n@Component({\n  tag: 'nano-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown implements ComponentInterface {\n  private dropdownId = `dropdown-${dropDownIds++}`;\n  private labelId = this.dropdownId + '-title';\n  private ignoreOpenWatcher = false;\n  private panel: HTMLElement;\n  private popover: Popover;\n  private trigger: HTMLElement;\n  private positioner: HTMLElement;\n  private accessibleTrigger: HTMLElement;\n  private didLoad = false;\n  private get menu() {\n    return this.host.querySelector('nano-menu') as HTMLNanoMenuElement;\n  }\n\n  @Element() host: HTMLNanoDropdownElement;\n\n  /** Determines if the dropdown should open automatically when the trigger is clicked */\n  @Prop() autoOpen = true;\n\n  /** Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    if (this.ignoreOpenWatcher) return;\n\n    this.open ? this.show() : this.hide();\n\n    if (this.accessibleTrigger) {\n      this.accessibleTrigger.setAttribute(\n        'aria-expanded',\n        this.open.toString()\n      );\n      return;\n    }\n\n    this.updateAccessibleTrigger();\n  }\n\n  /**\n   * Determines whether the dropdown should hide when a menu item is selected.\n   */\n  @Prop() closeOnSelect = true;\n\n  /**\n   * The dropdown will close when the user interacts outside of this element (e.g. clicking).\n   */\n  @Prop({ mutable: true }) containingElement: HTMLElement;\n\n  /**\n   * If you don't want to use the trigger slot, you can use this to 'tether' the dropdown to another element.\n   * And you will still need to control when the component is opened (using show() / hide() or the `open` prop)\n   */\n  @Prop() tetherTo: HTMLElement = null;\n\n  @Watch('tetherTo')\n  handleTetherToChange() {\n    this.createPopover();\n    this.updateAccessibleTrigger();\n  }\n\n  /**\n   * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\n   * inside of the viewport.\n   */\n  @Prop() placement: PopoverPlacement = 'bottom-start';\n\n  /**\n   * The distance in pixels from which to offset the panel away from its trigger.\n   */\n  @Prop() distance = 2;\n\n  /**\n   * The distance in pixels from which to offset the panel along its trigger.\n   */\n  @Prop() skidding = 0;\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`.\n   */\n  @Prop() hoist = false;\n\n  @Watch('placement')\n  @Watch('distance')\n  @Watch('skidding')\n  @Watch('hoist')\n  handlePopoverOptionsChange() {\n    this.popover.setOptions({\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      skidding: this.skidding,\n      distance: this.distance,\n    });\n  }\n\n  /**\n   * Title used to describe the dropdown content for accessibility\n   */\n  @Prop() dialogTitle!: string;\n\n  // Events\n\n  /**\n   * Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened.\n   */\n  @Event() nanoShow: EventEmitter;\n\n  /**\n   * Emitted after the dropdown opens and all transitions are complete.\n   */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /**\n   * Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed.\n   */\n  @Event() nanoHide: EventEmitter;\n\n  /**\n   * Emitted after the dropdown closes and all transitions are complete.\n   */\n  @Event() nanoAfterHide: EventEmitter;\n\n  // Listeners\n\n  @Listen('nanoOpen')\n  secondaryOpen(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n\n    this.panel.classList.add('loading');\n    this.panel.addEventListener(\n      'transitionend',\n      () => {\n        this.panel.classList.remove('loading');\n      },\n      { once: true }\n    );\n\n    this.panel.style.minHeight =\n      (ev.detail as NavItemEventDetail).secondaryMenu.scrollHeight + 'px';\n  }\n\n  @Listen('nanoClose')\n  secondaryClose(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n    if (!(ev.target as HTMLElement).parentElement) return;\n    this.panel.style.minHeight =\n      (ev.target as HTMLElement).parentElement.scrollHeight + 'px';\n  }\n\n  @Listen('nanoSelect')\n  handlePanelSelect(event: CustomEvent) {\n    const target = event.target as HTMLElement;\n\n    // Hide the dropdown when a menu item is selected\n    if (this.closeOnSelect && target.tagName.toLowerCase() === 'nano-menu')\n      this.hide();\n  }\n\n  // Methods\n\n  /** Shows the dropdown panel */\n  @Method()\n  async show() {\n    this.ignoreOpenWatcher = true;\n    this.open = true;\n\n    const nanoShow = this.nanoShow.emit();\n\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      this.ignoreOpenWatcher = false;\n      return;\n    }\n\n    this.popover.show();\n    this.ignoreOpenWatcher = false;\n\n    document.addEventListener('mousedown', this.handleDocumentMouseDown);\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  /** Hides the dropdown panel */\n  @Method()\n  async hide() {\n    this.ignoreOpenWatcher = true;\n    this.open = false;\n\n    const nanoHide = this.nanoHide.emit();\n\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      this.ignoreOpenWatcher = false;\n      return;\n    }\n\n    if (this.popover) this.popover.hide();\n    this.ignoreOpenWatcher = false;\n\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n\n    if (this.accessibleTrigger && this.focusEleInDropDwn()) {\n      this.accessibleTrigger.focus();\n    }\n  }\n\n  // Private methods\n\n  /** Decides if the current active element or element\n   * connected to the current event is connected to the Dropdown\n   */\n  private focusEleInDropDwn(e?: Event) {\n    const activeElement = getActiveElement();\n\n    if (e && e.composedPath()?.length) {\n      const ddInPath = e.composedPath().includes(this.containingElement);\n      return !e.composedPath().includes(this.accessibleTrigger) && ddInPath;\n    }\n\n    return (\n      activeElement &&\n      activeElement.closest(this.containingElement.tagName.toLowerCase()) ===\n        this.containingElement &&\n      activeElement !== this.accessibleTrigger\n    );\n  }\n\n  private togglePanel = () => {\n    if (!this.autoOpen) return;\n    this.open ? this.hide() : this.show();\n  };\n\n  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and\n  // `aria-expanded`. These must be applied to the \"accessible trigger\" (the tabbable portion of the trigger element\n  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,\n  private updateAccessibleTrigger() {\n    if (!this.didLoad) return;\n\n    let accessibleTrigger: HTMLElement;\n    this.accessibleTrigger = null;\n\n    if (!this.tetherTo) {\n      const assignedElements = Array.from(\n        this.host.querySelectorAll('[slot=\"trigger\"]')\n      );\n      accessibleTrigger = assignedElements.map(getNearestTabbableElement)[0];\n    } else {\n      accessibleTrigger = getNearestTabbableElement(this.tetherTo);\n    }\n\n    if (accessibleTrigger) {\n      accessibleTrigger.setAttribute('aria-haspopup', 'true');\n      accessibleTrigger.setAttribute(\n        'aria-expanded',\n        this.open ? 'true' : 'false'\n      );\n      this.accessibleTrigger = accessibleTrigger;\n    }\n  }\n\n  // Handlers\n\n  private handleDocumentKeyDown(event: KeyboardEvent) {\n    // Close when escape is pressed\n    if (event.key === 'Escape') {\n      this.hide();\n      return;\n    }\n\n    // Close when tabbing results in the focus leaving the close element\n    if (event.key === 'Tab') {\n      setTimeout(() => {\n        if (\n          document.activeElement &&\n          document.activeElement.closest(\n            this.containingElement.tagName.toLowerCase()\n          ) !== this.containingElement\n        ) {\n          this.hide();\n          return;\n        }\n      });\n    }\n\n    // If a menu is present, focus on it when certain keys are pressed\n    if (this.menu && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n      // must have menu item, must have pressed down, must be open and must not have focus within dd\n      if (!this.open || this.focusEleInDropDwn(event)) return;\n      event.preventDefault();\n      this.menu.setFocus();\n      return;\n    }\n\n    // All other keys focus the menu and pass the event through to menu (necessary for type-to-search to work)\n    const ePath = event.composedPath();\n    if (this.menu && ePath.length && !ePath.find((el) => el !== this.menu)) {\n      this.menu.dispatchEvent(new KeyboardEvent(event.type, event));\n      return;\n    }\n  }\n\n  private handleDocumentMouseDown(event: MouseEvent) {\n    // Close when clicking outside of the close element\n\n    if (!this.focusEleInDropDwn(event)) {\n      this.hide();\n      return;\n    }\n  }\n\n  private handleTriggerKeyDown = (event: KeyboardEvent) => {\n    // Open the panel when pressing down or up while focused on the trigger\n    if (['ArrowDown', 'ArrowUp', ' '].includes(event.key)) {\n      this.show();\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (this.menu) this.menu.setFocus();\n    }\n  };\n\n  private handleTriggerSlotChange = () => {\n    this.updateAccessibleTrigger();\n  };\n\n  private createPopover() {\n    if (this.popover) {\n      if (this.open) this.hide();\n      this.popover.destroy();\n      this.popover = null;\n    }\n\n    this.popover = new Popover(this.tetherTo || this.trigger, this.positioner, {\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.panel,\n      onAfterHide: () => this.nanoAfterHide.emit(),\n      onAfterShow: () => this.nanoAfterShow.emit(),\n      onTransitionEnd: () => {\n        if (!this.open) {\n          this.panel.scrollTop = 0;\n        } else if (this.menu) {\n          this.menu.showActiveElement();\n        }\n      },\n    });\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  // Stencil hooks\n\n  connectedCallback() {\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);\n\n    if (!this.containingElement) this.containingElement = this.host;\n  }\n\n  componentDidLoad() {\n    this.didLoad = true;\n    this.createPopover();\n    setTimeout(() => this.updateAccessibleTrigger(), 100);\n  }\n\n  disconnectedCallback() {\n    this.hide();\n    if (this.popover) this.popover.destroy();\n  }\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        id={this.dropdownId}\n        class={{\n          dropdown: true,\n          'dropdown--open': this.open,\n        }}\n      >\n        <span\n          part=\"trigger\"\n          class=\"dropdown__trigger\"\n          ref={(el) => (this.trigger = el)}\n          onKeyDown={this.handleTriggerKeyDown}\n          onClick={this.togglePanel}\n        >\n          <slot name=\"trigger\" onSlotchange={this.handleTriggerSlotChange} />\n        </span>\n\n        <div ref={(el) => (this.positioner = el)} class=\"dropdown__positioner\">\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class={`dropdown__panel ${this.placement.split('-').join(' ')}`}\n            aria-hidden={!this.open}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={this.dialogTitle ? this.labelId : undefined}\n          >\n            {this.dialogTitle && (\n              <h2\n                id={this.labelId}\n                class=\"dropdown__accessible-title\"\n                aria-live=\"polite\"\n              >\n                {this.dialogTitle}\n              </h2>\n            )}\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/nano-components/{p-94593617.system.entry.js → p-d8d8bac6.system.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-System.register(["./p-59b3d24b.system.js","./p-b430a9b6.system.js","./p-89edc042.system.js","./p-1c216ca4.system.js"],(function(t){"use strict";var o,n,r,e,i,a,s,c,l,d;return{setters:[function(t){o=t.r;n=t.c;r=t.i;e=t.f;i=t.h;a=t.e;s=t.g},function(t){c=t.i},function(t){l=t.c},function(t){d=t.d}],execute:function(){var b=':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{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;--padding:1em;--btn-padding:var(--padding);--btn-bg-color:var(--nano-color-contrast, #dad6d3);--btn-bg-color--open:var(--nano-color-base, #dad6d3);--btn-bg-color--hover:var(--nano-color-tint, #f9f9fb);--btn-text-color:var(--nano-color-base, #455556);--btn-text-color--open:var(--nano-color-contrast, var(--btn-text-color));--btn-text-color--hover:var(--nano-color-contrast, var(--btn-text-color));--content-bg-color:transparent;--content-text-color:#455556;--content-transition:height 0.2s ease-out;--border-width:none;--border-color:none;--border-style:none;--border-radius:none;--box-shadow:none;--focus-style:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:block;border-style:var(--border-style);border-width:var(--border-width-dims);border-color:var(--border-color);border-radius:var(--border-radius-dims);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}:host(:last-of-type){--border-width-dims:0 var(--border-width) var(--border-width);--border-radius-dims:0 0 var(--border-radius) var(--border-radius)}:host(:last-of-type) .open .content{border-radius:0 0 var(--border-radius) var(--border-radius)}:host(:first-of-type){--border-radius-dims:var(--border-radius) var(--border-radius) 0 0;--border-width-dims:var(--border-width)}:host(:first-of-type:last-of-type){--border-radius-dims:var(--border-radius);--border-width-dims:var(--border-width)}:host(:not(:last-of-type):not(:first-of-type)){--border-width-dims:0 var(--border-width) var(--border-width)}:host(.nano-color){--btn-bg-color:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--btn-bg-color--open:var(--nano-color-base, var(--nano-color-primary, #007495));--btn-bg-color--hover:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--btn-text-color:var(--nano-color-base, var(--nano-color-primary, #007495));--btn-text-color--open:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    );--btn-text-color--hover:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    )}button{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;padding:var(--btn-padding);text-align:inherit;position:relative;font-size:1em;margin:0;-webkit-transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--btn-bg-color);color:var(--btn-text-color);border-radius:var(--border-radius-dims)}button[dir=rtl]{left:unset;right:unset;right:0}button::-moz-focus-inner{border:0}button:focus{-webkit-box-shadow:var(--focus-style);box-shadow:var(--focus-style);outline:none;position:relative;z-index:1}:hover button{background:var(--btn-bg-color--hover);color:var(--btn-text-color--hover)}.open button{background:var(--btn-bg-color--open);color:var(--btn-text-color--open);border-bottom-right-radius:0;border-bottom-left-radius:0}button .label{width:100%;max-width:100%;max-height:100%;-webkit-box-flex:1;-ms-flex:1;flex:1;display:inline-block}button .icon{line-height:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:inline-block;color:currentColor;-webkit-transition:0.3s ease transform;transition:0.3s ease transform;-webkit-transform-origin:center;transform-origin:center}button .icon--start{margin-left:0;margin-right:var(--padding);margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){button .icon--start{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--padding);margin-inline-end:var(--padding)}}button .icon--end{margin-left:var(--padding);margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){button .icon--end{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--padding);margin-inline-start:var(--padding);-webkit-margin-end:0;margin-inline-end:0}}button .icon ::slotted(nano-icon){--color:"currentColor"}.content{color:var(--content-text-color);background:var(--content-bg-color);height:0;overflow:hidden;-webkit-transition:0.2s ease border-radius;transition:0.2s ease border-radius;outline:none}.loaded .content{-webkit-transition:var(--content-transition), 0.2s ease border-radius;transition:var(--content-transition), 0.2s ease border-radius}.content>*{opacity:0;-webkit-transition:opacity 0.2s ease-out;transition:opacity 0.2s ease-out}.open .content>*{opacity:1}.content__area{padding:var(--padding)}';var h=t("nano_details",function(){function t(t){var r=this;o(this,t);this.nanoOpened=n(this,"nanoOpened",7);this.nanoClosed=n(this,"nanoClosed",7);this.slideId="nano-details-"+u++;this.stateChanging=false;this.isLoading=true;this.label="";this.open=false;this.noHandle=false;this.iconRotation=90;this.onKeyDown=function(t){switch(t.key){case"Enter":case" ":r.open=!r.open;break}};this.onMouseDown=function(){if(r.stateChanging)return;r.open=!r.open}}t.prototype.toggleClick=function(){this.stateChanging=true;if(this.open)this.show();else this.hide()};t.prototype.hide=function(){var t=this;this.nanoClosed.emit(this.open);d(this.contentEl,"is-shown",false).then((function(){return t.stateChanging=false}));this.contentEl.style.height="0px"};t.prototype.show=function(){var t=this;this.nanoOpened.emit();d(this.contentEl,"is-shown",true).then((function(){t.stateChanging=false}));this.contentEl.style.height=this.contentArea.scrollHeight+"px"};t.prototype.resize=function(){var t=this;if(!this.open||!this.contentArea||!this.contentEl||this.stateChanging)return;r((function(){if(t.contentArea.scrollHeight>0){e((function(){t.contentEl.style.height=t.contentArea.scrollHeight+"px"}))}}))};t.prototype.attachRO=function(){var t=this;if(this.ro||!this.contentArea)return;var o=this.ro=new c((function(){return t.resize()}));o.observe(this.contentArea)};t.prototype.componentWillLoad=function(){var t=this;this.hasStartSlot=!!this.el.querySelector('[slot="icon-start"]');this.hasEndSlot=!!this.el.querySelector('[slot="icon-end"]');setTimeout((function(){t.isLoading=false}),100)};t.prototype.componentDidLoad=function(){var t=this;if(this.open){setTimeout((function(){t.show()}),0)}this.attachRO()};t.prototype.connectedCallback=function(){var t=this;var o=this.mo=new MutationObserver((function(){return t.resize()}));o.observe(this.el,{childList:true,subtree:true,attributes:false});this.attachRO()};t.prototype.disconnectedCallback=function(){if(this.mo)this.mo.disconnect();if(this.ro)this.ro.disconnect()};t.prototype.render=function(){var t=this;return i(a,{class:Object.assign({},l(this.color))},i("div",{class:{open:this.open,loaded:!this.isLoading}},i("button",{onKeyDown:this.onKeyDown,onMouseDown:this.onMouseDown,"aria-controls":this.slideId,"aria-expanded":this.open?"true":"false",style:{display:this.noHandle?"none":""}},this.hasStartSlot?i("span",{class:"icon icon--start",style:{transform:this.open?"rotate("+this.iconRotation+"deg)":""}},i("slot",{name:"icon-start"})):"",i("div",{class:"label"},this.label?this.label:i("slot",{name:"label"})),this.hasEndSlot?i("span",{class:"icon icon--end",style:{transform:this.open?"rotate("+this.iconRotation+"deg)":""}},i("slot",{name:"icon-end"})):""),i("div",{class:"content",ref:function(o){return t.contentEl=o},tabindex:"-1",id:this.slideId},i("div",{ref:function(o){return t.contentArea=o},class:"content__area"},i("slot",null)))))};Object.defineProperty(t.prototype,"el",{get:function(){return s(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{open:["toggleClick"]}},enumerable:false,configurable:true});return t}());var u=0;h.style=b}}}));
-//# sourceMappingURL=p-94593617.system.entry.js.map
+System.register(["./p-59b3d24b.system.js","./p-b430a9b6.system.js","./p-89edc042.system.js","./p-1c216ca4.system.js"],(function(t){"use strict";var o,n,r,e,i,a,s,c,l,d;return{setters:[function(t){o=t.r;n=t.c;r=t.i;e=t.f;i=t.h;a=t.e;s=t.g},function(t){c=t.i},function(t){l=t.c},function(t){d=t.d}],execute:function(){var b=':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{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;--padding:1em;--btn-padding:var(--padding);--btn-bg-color:var(--nano-color-contrast, #dad6d3);--btn-bg-color--open:var(--nano-color-base, #dad6d3);--btn-bg-color--hover:var(--nano-color-tint, #f9f9fb);--btn-text-color:var(--nano-color-base, #455556);--btn-text-color--open:var(--nano-color-contrast, var(--btn-text-color));--btn-text-color--hover:var(--nano-color-contrast, var(--btn-text-color));--content-bg-color:transparent;--content-text-color:#455556;--content-transition:height 0.2s ease-out;--border-width:none;--border-color:none;--border-style:none;--border-radius:none;--box-shadow:none;--focus-style:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:block;border-style:var(--border-style);border-width:var(--border-width-dims);border-color:var(--border-color);border-radius:var(--border-radius-dims);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}:host(:last-of-type){--border-width-dims:0 var(--border-width) var(--border-width);--border-radius-dims:0 0 var(--border-radius) var(--border-radius)}:host(:last-of-type) .open .content{border-radius:0 0 var(--border-radius) var(--border-radius)}:host(:first-of-type){--border-radius-dims:var(--border-radius) var(--border-radius) 0 0;--border-width-dims:var(--border-width)}:host(:first-of-type:last-of-type){--border-radius-dims:var(--border-radius);--border-width-dims:var(--border-width)}:host(:not(:last-of-type):not(:first-of-type)){--border-width-dims:0 var(--border-width) var(--border-width)}:host(.nano-color){--btn-bg-color:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--btn-bg-color--open:var(--nano-color-base, var(--nano-color-primary, #007495));--btn-bg-color--hover:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--btn-text-color:var(--nano-color-base, var(--nano-color-primary, #007495));--btn-text-color--open:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    );--btn-text-color--hover:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    )}button{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;padding:var(--btn-padding);text-align:inherit;position:relative;font-size:1em;margin:0;-webkit-transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--btn-bg-color);color:var(--btn-text-color);border-radius:var(--border-radius-dims)}button[dir=rtl]{left:unset;right:unset;right:0}button::-moz-focus-inner{border:0}button:focus{-webkit-box-shadow:var(--focus-style);box-shadow:var(--focus-style);outline:none;position:relative;z-index:1}:hover button{background:var(--btn-bg-color--hover);color:var(--btn-text-color--hover)}.open button{background:var(--btn-bg-color--open);color:var(--btn-text-color--open);border-bottom-right-radius:0;border-bottom-left-radius:0}button .label{width:100%;max-width:100%;max-height:100%;-webkit-box-flex:1;-ms-flex:1;flex:1;display:inline-block}button .icon{line-height:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:inline-block;color:currentColor;-webkit-transition:0.3s ease transform;transition:0.3s ease transform;-webkit-transform-origin:center;transform-origin:center}button .icon--start{margin-left:0;margin-right:var(--padding);margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){button .icon--start{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--padding);margin-inline-end:var(--padding)}}button .icon--end{margin-left:var(--padding);margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){button .icon--end{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--padding);margin-inline-start:var(--padding);-webkit-margin-end:0;margin-inline-end:0}}button .icon ::slotted(nano-icon){--color:"currentColor"}.content{color:var(--content-text-color);background:var(--content-bg-color);height:0;overflow:hidden;-webkit-transition:0.2s ease border-radius;transition:0.2s ease border-radius;outline:none}.loaded .content{-webkit-transition:var(--content-transition), 0.2s ease border-radius;transition:var(--content-transition), 0.2s ease border-radius}.content>*{opacity:0;-webkit-transition:opacity 0.2s ease-out;transition:opacity 0.2s ease-out}.open .content>*{opacity:1}.content__area{padding:var(--padding)}';var h=t("nano_details",function(){function t(t){var r=this;o(this,t);this.nanoOpened=n(this,"nanoOpened",7);this.nanoClosed=n(this,"nanoClosed",7);this.slideId="nano-details-"+u++;this.stateChanging=false;this.isLoading=true;this.label="";this.open=false;this.noHandle=false;this.iconRotation=90;this.onKeyDown=function(t){switch(t.key){case"Enter":case" ":r.open=!r.open;break}};this.onMouseDown=function(){if(r.stateChanging)return;r.open=!r.open}}t.prototype.toggleClick=function(){this.stateChanging=true;if(this.open)this.show();else this.hide()};t.prototype.hide=function(){var t=this;this.nanoClosed.emit(this.open);d(this.contentEl,"is-shown",false).then((function(){return t.stateChanging=false}));this.contentEl.style.height="0px"};t.prototype.show=function(){var t=this;this.nanoOpened.emit();d(this.contentEl,"is-shown",true).then((function(){t.stateChanging=false}));this.contentEl.style.height=this.contentArea.scrollHeight+"px"};t.prototype.resize=function(){var t=this;if(!this.open||!this.contentArea||!this.contentEl||this.stateChanging)return;r((function(){if(t.contentArea.scrollHeight>0){e((function(){t.contentEl.style.height=t.contentArea.scrollHeight+"px"}))}}))};t.prototype.attachRO=function(){var t=this;if(this.ro||!this.contentArea)return;var o=this.ro=new c((function(){return t.resize()}));o.observe(this.contentArea)};t.prototype.componentWillLoad=function(){var t=this;this.hasStartSlot=!!this.el.querySelector('[slot="icon-start"]');this.hasEndSlot=!!this.el.querySelector('[slot="icon-end"]');setTimeout((function(){t.isLoading=false}),100)};t.prototype.componentDidLoad=function(){var t=this;if(this.open){setTimeout((function(){t.show()}),0)}this.attachRO()};t.prototype.connectedCallback=function(){var t=this;var o=this.mo=new MutationObserver((function(){return t.resize()}));o.observe(this.el,{childList:true,subtree:true,attributes:false});this.attachRO()};t.prototype.disconnectedCallback=function(){if(this.mo)this.mo.disconnect();if(this.ro)this.ro.disconnect()};t.prototype.render=function(){var t=this;return i(a,{class:Object.assign({},l(this.color))},i("div",{class:{open:this.open,loaded:!this.isLoading}},i("button",{onKeyDown:this.onKeyDown,onMouseDown:this.onMouseDown,onTouchEnd:this.onMouseDown,"aria-controls":this.slideId,"aria-expanded":this.open?"true":"false",style:{display:this.noHandle?"none":""},part:"button"},this.hasStartSlot?i("span",{part:"icon--start",class:"icon icon--start",style:{transform:this.open?"rotate("+this.iconRotation+"deg)":""}},i("slot",{name:"icon-start"})):"",i("div",{class:"label",part:"label"},this.label?this.label:i("slot",{name:"label"})),this.hasEndSlot?i("span",{part:"icon--end",class:"icon icon--end",style:{transform:this.open?"rotate("+this.iconRotation+"deg)":""}},i("slot",{name:"icon-end"})):""),i("div",{class:"content",ref:function(o){return t.contentEl=o},tabindex:"-1",id:this.slideId,part:"content"},i("div",{ref:function(o){return t.contentArea=o},class:"content__area"},i("slot",null)))))};Object.defineProperty(t.prototype,"el",{get:function(){return s(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{open:["toggleClick"]}},enumerable:false,configurable:true});return t}());var u=0;h.style=b}}}));
+//# sourceMappingURL=p-d8d8bac6.system.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/details/details.scss?tag=nano-details&encapsulation=shadow","src/components/details/details.tsx"],"names":["detailsCss","Details","exports","class_1","hostRef","_this","this","slideId","slideIds","stateChanging","isLoading","label","open","noHandle","iconRotation","onKeyDown","ev","key","onMouseDown","prototype","toggleClick","show","hide","nanoClosed","emit","displayTransition","contentEl","then","style","height","nanoOpened","contentArea","scrollHeight","resize","readTask","writeTask","attachRO","ro","ResizeObserver","observe","componentWillLoad","hasStartSlot","el","querySelector","hasEndSlot","setTimeout","componentDidLoad","connectedCallback","mo","MutationObserver","childList","subtree","attributes","disconnectedCallback","disconnect","render","h","Host","class","Object","assign","createColorClasses","color","loaded","onTouchEnd","aria-controls","aria-expanded","display","part","transform","name","ref","div","tabindex","id"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n    * @prop --padding: Default to 1em;\n\n    * @prop --btn-padding: Defaults to var(--padding);\n    * @prop --btn-bg-color: Defaults to var(--nano-color-contrast, #dad6d3);\n    * @prop --btn-bg-color--open: Defaults to var(--nano-color-base, #dad6d3);\n    * @prop --btn-bg-color--hover: Defaults to var(--nano-color-tint, #{map.get($colors, offwhite)});\n\n    * @prop --btn-text-color: Defaults to var(--nano-color-base, #455556);\n    * @prop --btn-text-color--open: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n    * @prop --btn-text-color--hover: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n\n    * @prop --content-bg-color: Defaults to transparent;\n    * @prop --content-text-color: Defaults to #455556;\n    * @prop --content-transition: Defaults to height .2s ease-out;\n\n    * @prop --border-width: Defaults to none;\n    * @prop --border-color: Defaults to none;\n    * @prop --border-style: Defaults to none;\n    * @prop --border-radius: Defaults to none;\n    * @prop --box-shadow: Defaults to none;\n    * @prop --focus-style: Defaults to #{$control-focus-style}\n  */\n\n  @include text-inherit();\n\n  --padding: 1em;\n  --btn-padding: var(--padding);\n  --btn-bg-color: var(--nano-color-contrast, #dad6d3);\n  --btn-bg-color--open: var(--nano-color-base, #dad6d3);\n  --btn-bg-color--hover: var(--nano-color-tint, #{map.get($colors, offwhite)});\n  --btn-text-color: var(--nano-color-base, #455556);\n  --btn-text-color--open: var(--nano-color-contrast, var(--btn-text-color));\n  --btn-text-color--hover: var(--nano-color-contrast, var(--btn-text-color));\n  --content-bg-color: transparent;\n  --content-text-color: #455556;\n  --content-transition: height 0.2s ease-out;\n  --border-width: none;\n  --border-color: none;\n  --border-style: none;\n  --border-radius: none;\n  --box-shadow: none;\n  --focus-style: #{$control-focus-style};\n\n  display: block;\n  border-style: var(--border-style);\n  border-width: var(--border-width-dims);\n  border-color: var(--border-color);\n  border-radius: var(--border-radius-dims);\n  box-shadow: var(--box-shadow);\n}\n\n:host(:last-of-type) {\n  --border-width-dims: 0 var(--border-width) var(--border-width);\n  --border-radius-dims: 0 0 var(--border-radius) var(--border-radius);\n\n  .open .content {\n    border-radius: 0 0 var(--border-radius) var(--border-radius);\n  }\n}\n\n:host(:first-of-type) {\n  --border-radius-dims: var(--border-radius) var(--border-radius) 0 0;\n  --border-width-dims: var(--border-width);\n}\n\n:host(:first-of-type:last-of-type) {\n  --border-radius-dims: var(--border-radius);\n  --border-width-dims: var(--border-width);\n}\n\n:host(:not(:last-of-type):not(:first-of-type)) {\n  --border-width-dims: 0 var(--border-width) var(--border-width);\n}\n\n:host(.nano-color) {\n  --btn-bg-color: var(--nano-color-contrast, #{nano-color(primary, contrast)});\n  --btn-bg-color--open: var(--nano-color-base, #{nano-color(primary, base)});\n  --btn-bg-color--hover: var(--nano-color-tint, #{nano-color(primary, tint)});\n  --btn-text-color: var(--nano-color-base, #{nano-color(primary, base)});\n  --btn-text-color--open:\n    var(\n      --nano-color-contrast,\n      #{nano-color(primary, contrast)}\n    );\n  --btn-text-color--hover:\n    var(\n      --nano-color-contrast,\n      #{nano-color(primary, contrast)}\n    );\n}\n\nbutton {\n  @include input-cover;\n\n  padding: var(--btn-padding);\n  text-align: inherit;\n  position: relative;\n  font-size: 1em;\n  margin: 0;\n  transition: 0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;\n  display: flex;\n  align-items: center;\n  background: var(--btn-bg-color);\n  color: var(--btn-text-color);\n  border-radius: var(--border-radius-dims);\n\n  &:focus {\n    box-shadow: var(--focus-style);\n    outline: none;\n    position: relative;\n    z-index: 1;\n  }\n\n  :hover & {\n    background: var(--btn-bg-color--hover);\n    color: var(--btn-text-color--hover);\n  }\n\n  .open & {\n    background: var(--btn-bg-color--open);\n    color: var(--btn-text-color--open);\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n\n  .label {\n    width: 100%;\n    max-width: 100%;\n    max-height: 100%;\n    flex: 1;\n    display: inline-block;\n  }\n\n  .icon {\n    line-height: 0;\n    flex-direction: column;\n    justify-content: center;\n    display: inline-block;\n    color: currentColor;\n    transition: 0.3s ease transform;\n    transform-origin: center;\n\n    &--start {\n      @include margin(0, var(--padding), 0, 0);\n    }\n\n    &--end {\n      @include margin(0, 0, 0, var(--padding));\n    }\n\n    ::slotted(nano-icon) {\n      --color: 'currentColor';\n    }\n  }\n}\n\n.content {\n  color: var(--content-text-color);\n  background: var(--content-bg-color);\n  height: 0;\n  overflow: hidden;\n  transition: 0.2s ease border-radius;\n  outline: none;\n\n  .loaded & {\n    transition: var(--content-transition), 0.2s ease border-radius;\n  }\n\n  > * {\n    opacity: 0;\n    transition: opacity 0.2s ease-out;\n\n    .open & {\n      opacity: 1;\n    }\n  }\n\n  &__area {\n    padding: var(--padding);\n  }\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  Prop,\n  h,\n  Element,\n  Watch,\n  Host,\n  State,\n  writeTask,\n  readTask,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils/theme';\nimport { displayTransition } from '../../utils';\n\n/**\n * A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.\n */\n/**\n * @slot - content that will be hidden / revealed\n * @slot icon-start - used for icons at the start of the handle\n * @slot label - can be used when you wish to insert complex label markup\n * @slot icon-end - used for icons at the end of the handle\n * @part button - the main details ui control\n * @part label - the text wrapper of the ui control\n * @part icon--start - the icon wrapper at the start of the ui control\n * @part icon--end - the icon wrapper at the end of the ui control\n * @part content - the main content wrapper\n */\n@Component({\n  tag: 'nano-details',\n  styleUrl: 'details.scss',\n  shadow: true,\n})\nexport class Details {\n  private hasStartSlot: boolean;\n  private hasEndSlot: boolean;\n  private slideId = `nano-details-${slideIds++}`;\n  private mo?: MutationObserver;\n  private ro?: ResizeObserver;\n  private contentArea: HTMLDivElement;\n  private stateChanging: boolean = false;\n\n  @State() isLoading = true;\n\n  @Element() private el: HTMLNanoDetailsElement;\n\n  private contentEl: HTMLElement;\n\n  /**\n   * Button / handle text to be used if no complex markup required.\n   * Otherwise use label slot.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Should item be open on load\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Have no handle - you will need to control the hiding / showing of content with script\n   */\n  @Prop() noHandle: boolean = false;\n\n  /**\n   * Icon slot rotation amount (degrees) on open\n   */\n  @Prop() iconRotation: number = 90;\n\n  /**\n   * Color to use from your application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * Emitted when the component opens.\n   * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n   */\n  @Event() nanoOpened: EventEmitter;\n\n  /**\n   * Emitted when the component closes.\n   * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n   */\n  @Event() nanoClosed: EventEmitter;\n\n  @Watch('open')\n  toggleClick() {\n    this.stateChanging = true;\n    if (this.open) this.show();\n    else this.hide();\n  }\n\n  private onKeyDown = (ev: KeyboardEvent) => {\n    switch (ev.key) {\n      case 'Enter':\n      case ' ':\n        this.open = !this.open;\n        break;\n    }\n  };\n\n  private onMouseDown = () => {\n    if (this.stateChanging) return;\n    this.open = !this.open;\n  };\n\n  private hide() {\n    this.nanoClosed.emit(this.open);\n    displayTransition(this.contentEl, 'is-shown', false).then(\n      () => (this.stateChanging = false)\n    );\n    this.contentEl.style.height = '0px';\n  }\n\n  private show() {\n    this.nanoOpened.emit();\n    displayTransition(this.contentEl, 'is-shown', true).then(() => {\n      this.stateChanging = false;\n    });\n    this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n  }\n\n  private resize() {\n    if (\n      !this.open ||\n      !this.contentArea ||\n      !this.contentEl ||\n      this.stateChanging\n    )\n      return;\n    readTask(() => {\n      if (this.contentArea.scrollHeight > 0) {\n        writeTask(() => {\n          this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n        });\n      }\n    });\n  }\n\n  private attachRO() {\n    if (this.ro || !this.contentArea) return;\n\n    const ro = (this.ro = new ResizeObserver(() => this.resize()));\n    ro.observe(this.contentArea);\n  }\n\n  componentWillLoad() {\n    this.hasStartSlot = !!this.el.querySelector('[slot=\"icon-start\"]');\n    this.hasEndSlot = !!this.el.querySelector('[slot=\"icon-end\"]');\n    setTimeout(() => {\n      this.isLoading = false;\n    }, 100);\n  }\n\n  componentDidLoad() {\n    if (this.open) {\n      // disable animation on start\n      setTimeout(() => {\n        this.show();\n      }, 0);\n    }\n    this.attachRO();\n  }\n\n  connectedCallback() {\n    const mo = (this.mo = new MutationObserver(() => this.resize()));\n    mo.observe(this.el, { childList: true, subtree: true, attributes: false });\n    this.attachRO();\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host class={{ ...createColorClasses(this.color) }}>\n        <div\n          class={{\n            open: this.open,\n            loaded: !this.isLoading,\n          }}\n        >\n          <button\n            onKeyDown={this.onKeyDown}\n            onMouseDown={this.onMouseDown}\n            onTouchEnd={this.onMouseDown}\n            aria-controls={this.slideId}\n            aria-expanded={this.open ? 'true' : 'false'}\n            style={{ display: this.noHandle ? 'none' : '' }}\n            part=\"button\"\n          >\n            {this.hasStartSlot ? (\n              <span\n                part=\"icon--start\"\n                class=\"icon icon--start\"\n                style={{\n                  transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n                }}\n              >\n                <slot name=\"icon-start\" />\n              </span>\n            ) : (\n              ''\n            )}\n            <div class=\"label\" part=\"label\">\n              {this.label ? this.label : <slot name=\"label\" />}\n            </div>\n            {this.hasEndSlot ? (\n              <span\n                part=\"icon--end\"\n                class=\"icon icon--end\"\n                style={{\n                  transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n                }}\n              >\n                <slot name=\"icon-end\" />\n              </span>\n            ) : (\n              ''\n            )}\n          </button>\n          <div\n            class=\"content\"\n            ref={(div) => (this.contentEl = div)}\n            tabindex=\"-1\"\n            id={this.slideId}\n            part=\"content\"\n          >\n            <div ref={(div) => (this.contentArea = div)} class=\"content__area\">\n              <slot />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet slideIds = 0;\n"]}

package/dist/nano-components/{p-e01adaa3.entry.js → p-e7fdc62d.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as o,h as i,e as r,g as s}from"./p-ab5813a7.js";import{P as e}from"./p-4b7cd30c.js";import"./p-289aa03f.js";const n=':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{--max-width:20rem;--hide-delay:0s;--hide-duration:0.125s;--hide-timing-function:ease;--show-delay:0.125s;--show-duration:0.125s;--show-timing-function:ease;display:contents}.tooltip{max-width:var(--max-width);border-radius:var(--nano-tooltip-border-radius, var(--nano-border-radius-small, 2px));background-color:black;font-size:var(--nano-fontsize-small, 0.875rem);line-height:1.5;color:white;opacity:0;padding:var(--nano-tooltip-padding, var(--nano-spacing-xsmall, 4px) var(--nano-spacing-small, 8px));-webkit-transform:translateY(10px) translateZ(0);transform:translateY(10px) translateZ(0);-webkit-transform-origin:bottom;transform-origin:bottom;-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:opacity, transform;transition-property:opacity, transform, -webkit-transform;-webkit-transition-delay:var(--hide-delay);transition-delay:var(--hide-delay);-webkit-transition-duration:var(--hide-duration);transition-duration:var(--hide-duration);-webkit-transition-timing-function:var(--hide-timing-function);transition-timing-function:var(--hide-timing-function);white-space:normal}.tooltip-arrow{content:"";position:absolute;width:0;height:0;color:black;-webkit-transition:0.2s ease transform;transition:0.2s ease transform}.tooltip-positioner{position:absolute;z-index:var(--nano-layer-index-tooltip, 1000);pointer-events:none}.tooltip-positioner[data-popper-placement^=top] .tooltip{-webkit-transform-origin:bottom;transform-origin:bottom;-webkit-transform:translateY(-10px) translateZ(0);transform:translateY(-10px) translateZ(0)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{-webkit-transform-origin:top;transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{-webkit-transform-origin:right;transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{-webkit-transform-origin:left;transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;-webkit-transform:none;transform:none;-webkit-transition-delay:var(--show-delay);transition-delay:var(--show-delay);-webkit-transition-duration:var(--show-duration);transition-duration:var(--show-duration);-webkit-transition-timing-function:var(--show-timing-function);transition-timing-function:var(--show-timing-function)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip-arrow{bottom:100%;left:calc(50% - 5px);border-bottom:5px solid;border-left:5px solid transparent;border-right:5px solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip-arrow{left:5px}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip-arrow{right:5px;left:auto}.tooltip-positioner[data-popper-placement^=top] .tooltip-arrow{top:100%;left:calc(50% - 5px);border-top:5px solid;border-left:5px solid transparent;border-right:5px solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip-arrow{left:5px}.tooltip-positioner[data-popper-placement=top-end] .tooltip-arrow{right:5px;left:auto}.tooltip-positioner[data-popper-placement^=left] .tooltip-arrow{top:calc(50% - 5px);left:100%;border-left:5px solid;border-top:5px solid transparent;border-bottom:5px solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip-arrow{top:5px}.tooltip-positioner[data-popper-placement=left-end] .tooltip-arrow{top:auto;bottom:5px}.tooltip-positioner[data-popper-placement^=right] .tooltip-arrow{top:calc(50% - 5px);right:100%;border-right:5px solid;border-top:5px solid transparent;border-bottom:5px solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip-arrow{top:5px}.tooltip-positioner[data-popper-placement=right-end] .tooltip-arrow{top:auto;bottom:5px}';let a=0;let p=class{constructor(i){t(this,i);this.nanoShow=o(this,"nanoShow",7);this.nanoAfterShow=o(this,"nanoAfterShow",7);this.nanoHide=o(this,"nanoHide",7);this.nanoAfterHide=o(this,"nanoAfterHide",7);this.componentId=`tooltip-${++a}`;this.isVisible=false;this.content="";this.placement="top";this.disabled=false;this.distance=10;this.open=false;this.skidding=0;this.trigger="hover focus";this.handleBlur=()=>{if(this.hasTrigger("focus")){this.hide()}};this.handleClick=()=>{if(this.hasTrigger("click")){this.open?this.hide():this.show()}};this.handleFocus=()=>{if(this.hasTrigger("focus")){this.show()}};this.handleKeyDown=t=>{if(this.open&&t.key==="Escape"){t.stopPropagation();this.hide()}};this.handleMouseOver=()=>{if(this.hasTrigger("hover")){this.show()}};this.handleMouseOut=()=>{if(this.hasTrigger("hover")){this.hide()}};this.handleSlotChange=()=>{this.target=this.getTarget()};this.handleTTSlotChange=()=>{const t=this.host.querySelector(`[id="${this.componentId}"]`)||this.host.shadowRoot.getElementById(this.componentId);Array.from(this.host.querySelectorAll('[slot="content"]')).filter((o=>o!==t)).forEach((o=>{t.appendChild(o)}))}}get target(){return this._target}set target(t){if(t!==this._target&&this._target){this._target.removeAttribute("aria-describedby")}t.setAttribute("aria-describedby",this.componentId);this._target=t}handleOpenChange(){this.open?this.show():this.hide()}async show(){if(this.isVisible){return}const t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;return}this.isVisible=true;this.open=true;this.popover.show()}async hide(){if(!this.isVisible){return}const t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return}this.isVisible=false;this.open=false;this.popover.hide()}getTarget(){const t=[...Array.from(this.host.children)].find((t=>t.tagName.toLowerCase()!=="style"&&t.getAttribute("slot")!=="content"));if(!t){throw new Error("Invalid tooltip target: no child element was found.")}return t}hasTrigger(t){const o=this.trigger.split(" ");return o.includes(t)}syncOptions(){this.popover.setOptions({placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.tooltip,onAfterHide:()=>this.nanoAfterHide.emit(),onAfterShow:()=>this.nanoAfterShow.emit()})}componentDidLoad(){this.target=this.getTarget();this.popover=new e(this.target,this.tooltipPositioner);this.syncOptions();const t=this.host.shadowRoot.getElementById(this.componentId);t.slot="content";this.host.appendChild(t);this.handleTTSlotChange();this.tooltipPositioner.hidden=!this.open;if(this.open){this.show()}}componentDidUpdate(){this.syncOptions()}disconnectedCallback(){this.popover.destroy()}render(){return i(r,{onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onMouseOut:this.handleMouseOut,onBlur:this.handleBlur,onFocus:this.handleFocus,onClick:this.handleClick},i("slot",{onSlotchange:this.handleSlotChange}),!this.disabled&&i("div",{ref:t=>this.tooltipPositioner=t,class:"tooltip-positioner"},i("div",{part:"base",ref:t=>this.tooltip=t,class:{tooltip:true,"tooltip--open":this.open},role:"tooltip","aria-hidden":this.open?"false":"true"},i("slot",{name:"content",onSlotchange:this.handleTTSlotChange},i("div",{id:this.componentId},this.content)),i("div",{class:"tooltip-arrow","data-popper-arrow":true}))))}get host(){return s(this)}static get watchers(){return{open:["handleOpenChange"]}}};p.style=n;export{p as nano_tooltip};
-//# sourceMappingURL=p-e01adaa3.entry.js.map
+import{r as t,c as o,h as i,e as r,g as s}from"./p-ab5813a7.js";import{P as e}from"./p-178c34e3.js";import"./p-289aa03f.js";const n=':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{--max-width:20rem;--hide-delay:0s;--hide-duration:0.125s;--hide-timing-function:ease;--show-delay:0.125s;--show-duration:0.125s;--show-timing-function:ease;display:contents}.tooltip{max-width:var(--max-width);border-radius:var(--nano-tooltip-border-radius, var(--nano-border-radius-small, 2px));background-color:black;font-size:var(--nano-fontsize-small, 0.875rem);line-height:1.5;color:white;opacity:0;padding:var(--nano-tooltip-padding, var(--nano-spacing-xsmall, 4px) var(--nano-spacing-small, 8px));-webkit-transform:translateY(10px) translateZ(0);transform:translateY(10px) translateZ(0);-webkit-transform-origin:bottom;transform-origin:bottom;-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:opacity, transform;transition-property:opacity, transform, -webkit-transform;-webkit-transition-delay:var(--hide-delay);transition-delay:var(--hide-delay);-webkit-transition-duration:var(--hide-duration);transition-duration:var(--hide-duration);-webkit-transition-timing-function:var(--hide-timing-function);transition-timing-function:var(--hide-timing-function);white-space:normal}.tooltip-arrow{content:"";position:absolute;width:0;height:0;color:black;-webkit-transition:0.2s ease transform;transition:0.2s ease transform}.tooltip-positioner{position:absolute;z-index:var(--nano-layer-index-tooltip, 1000);pointer-events:none}.tooltip-positioner[data-popper-placement^=top] .tooltip{-webkit-transform-origin:bottom;transform-origin:bottom;-webkit-transform:translateY(-10px) translateZ(0);transform:translateY(-10px) translateZ(0)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{-webkit-transform-origin:top;transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{-webkit-transform-origin:right;transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{-webkit-transform-origin:left;transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;-webkit-transform:none;transform:none;-webkit-transition-delay:var(--show-delay);transition-delay:var(--show-delay);-webkit-transition-duration:var(--show-duration);transition-duration:var(--show-duration);-webkit-transition-timing-function:var(--show-timing-function);transition-timing-function:var(--show-timing-function)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip-arrow{bottom:100%;left:calc(50% - 5px);border-bottom:5px solid;border-left:5px solid transparent;border-right:5px solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip-arrow{left:5px}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip-arrow{right:5px;left:auto}.tooltip-positioner[data-popper-placement^=top] .tooltip-arrow{top:100%;left:calc(50% - 5px);border-top:5px solid;border-left:5px solid transparent;border-right:5px solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip-arrow{left:5px}.tooltip-positioner[data-popper-placement=top-end] .tooltip-arrow{right:5px;left:auto}.tooltip-positioner[data-popper-placement^=left] .tooltip-arrow{top:calc(50% - 5px);left:100%;border-left:5px solid;border-top:5px solid transparent;border-bottom:5px solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip-arrow{top:5px}.tooltip-positioner[data-popper-placement=left-end] .tooltip-arrow{top:auto;bottom:5px}.tooltip-positioner[data-popper-placement^=right] .tooltip-arrow{top:calc(50% - 5px);right:100%;border-right:5px solid;border-top:5px solid transparent;border-bottom:5px solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip-arrow{top:5px}.tooltip-positioner[data-popper-placement=right-end] .tooltip-arrow{top:auto;bottom:5px}';let a=0;let p=class{constructor(i){t(this,i);this.nanoShow=o(this,"nanoShow",7);this.nanoAfterShow=o(this,"nanoAfterShow",7);this.nanoHide=o(this,"nanoHide",7);this.nanoAfterHide=o(this,"nanoAfterHide",7);this.componentId=`tooltip-${++a}`;this.isVisible=false;this.content="";this.placement="top";this.disabled=false;this.distance=10;this.open=false;this.skidding=0;this.trigger="hover focus";this.handleBlur=()=>{if(this.hasTrigger("focus")){this.hide()}};this.handleClick=()=>{if(this.hasTrigger("click")){this.open?this.hide():this.show()}};this.handleFocus=()=>{if(this.hasTrigger("focus")){this.show()}};this.handleKeyDown=t=>{if(this.open&&t.key==="Escape"){t.stopPropagation();this.hide()}};this.handleMouseOver=()=>{if(this.hasTrigger("hover")){this.show()}};this.handleMouseOut=()=>{if(this.hasTrigger("hover")){this.hide()}};this.handleSlotChange=()=>{this.target=this.getTarget()};this.handleTTSlotChange=()=>{const t=this.host.querySelector(`[id="${this.componentId}"]`)||this.host.shadowRoot.getElementById(this.componentId);Array.from(this.host.querySelectorAll('[slot="content"]')).filter((o=>o!==t)).forEach((o=>{t.appendChild(o)}))}}get target(){return this._target}set target(t){if(t!==this._target&&this._target){this._target.removeAttribute("aria-describedby")}t.setAttribute("aria-describedby",this.componentId);this._target=t}handleOpenChange(){this.open?this.show():this.hide()}async show(){if(this.isVisible){return}const t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;return}this.isVisible=true;this.open=true;this.popover.show()}async hide(){if(!this.isVisible){return}const t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return}this.isVisible=false;this.open=false;this.popover.hide()}getTarget(){const t=[...Array.from(this.host.children)].find((t=>t.tagName.toLowerCase()!=="style"&&t.getAttribute("slot")!=="content"));if(!t){throw new Error("Invalid tooltip target: no child element was found.")}return t}hasTrigger(t){const o=this.trigger.split(" ");return o.includes(t)}syncOptions(){this.popover.setOptions({placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.tooltip,onAfterHide:()=>this.nanoAfterHide.emit(),onAfterShow:()=>this.nanoAfterShow.emit()})}componentDidLoad(){this.target=this.getTarget();this.popover=new e(this.target,this.tooltipPositioner);this.syncOptions();const t=this.host.shadowRoot.getElementById(this.componentId);t.slot="content";this.host.appendChild(t);this.handleTTSlotChange();this.tooltipPositioner.hidden=!this.open;if(this.open){this.show()}}componentDidUpdate(){this.syncOptions()}disconnectedCallback(){this.popover.destroy()}render(){return i(r,{onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onMouseOut:this.handleMouseOut,onBlur:this.handleBlur,onFocus:this.handleFocus,onClick:this.handleClick},i("slot",{onSlotchange:this.handleSlotChange}),!this.disabled&&i("div",{ref:t=>this.tooltipPositioner=t,class:"tooltip-positioner"},i("div",{part:"base",ref:t=>this.tooltip=t,class:{tooltip:true,"tooltip--open":this.open},role:"tooltip","aria-hidden":this.open?"false":"true"},i("slot",{name:"content",onSlotchange:this.handleTTSlotChange},i("div",{id:this.componentId},this.content)),i("div",{class:"tooltip-arrow","data-popper-arrow":true}))))}get host(){return s(this)}static get watchers(){return{open:["handleOpenChange"]}}};p.style=n;export{p as nano_tooltip};
+//# sourceMappingURL=p-e7fdc62d.entry.js.map

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 {};