@nanoporetech-digital/components 8.0.0-alpha.5 → 8.0.0-alpha.6

package/dist/nano-components/nano-breadcrumb.entry.js

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{r as a,a as r,h as n}from"./index-DXvE-U_j.js";import{a as t}from"./style-xLaX004n.js";const e=class{constructor(r){a(this,r)}get el(){return r(this)}breadcrumbs=[];isOpen=!1;componentWillLoad(){t(this.el?.shadowRoot)}render(){const a=this.breadcrumbs?.find((a=>a.return));if(a)return n("nav",{"aria-label":"Breadcrumb",class:"breadcrumbs"},n(o,{breadcrumbs:[a],className:"return-only"}));const r=this.breadcrumbs?.length?this.breadcrumbs.at(-1):null;return n("div",{class:"breadcrumbs"},n("nav",{"aria-label":"Breadcrumb"},n(o,{breadcrumbs:this.breadcrumbs,className:"main"})),n("nano-dropdown",{dialogTitle:`${r?.label} Breadcrumb`,onNanoShow:()=>this.isOpen=!0,onNanoHide:()=>this.isOpen=!1,containingElement:this.el},n("button",{class:"trigger-button",slot:"trigger"},n("span",null,this.breadcrumbs&&this.breadcrumbs.length>1&&n("span",{class:"trigger-button_label"},".."),n("span",{class:"trigger-button_label"},r?.label)),n("nano-icon",{class:{"trigger-icon":!0,"trigger-icon--open":this.isOpen},name:"light/chevron-down"})),n("nav",null,n("nano-menu",{class:"breadcrumbs small",label:"Breadcrumbs"},this.breadcrumbs?.slice(0,-1)?.map(((a,r)=>n("nano-nav-item",{key:r,href:a.href,class:{return:a.return,link:!!a.href},disabled:!a.href},a.label)))))))}},o=({breadcrumbs:a,className:r})=>n("ol",{class:`breadcrumbs ${r}`},a?.map(((a,r)=>n("li",null,n("a",{key:r,href:a.href,class:{return:a.return,link:!!a.href}},a.return&&n("nano-icon",{name:"light/chevron-left",size:"small",class:"breadcrumb-icon"}),a.label)))));e.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}";export{e as nano_breadcrumb}
+import{r as n,a as r,h as o}from"./index-DXvE-U_j.js";import{a}from"./style-xLaX004n.js";const t=class{constructor(r){n(this,r)}get el(){return r(this)}breadcrumbs=[];isOpen=!1;componentWillLoad(){a(this.el?.shadowRoot)}render(){const n=this.breadcrumbs?.find((n=>n.return));if(n)return o("nav",{"aria-label":"Breadcrumb",class:"breadcrumbs"},o(e,{breadcrumbs:[n],className:"return-only"}));const r=this.breadcrumbs?.length?this.breadcrumbs.at(-1):null;return o("div",{class:"breadcrumbs"},o("nav",{"aria-label":"Breadcrumb"},o(e,{breadcrumbs:this.breadcrumbs,className:"main"})),o("nano-dropdown",{dialogTitle:`${r?.label} Breadcrumb`,onNanoShow:()=>this.isOpen=!0,onNanoHide:()=>this.isOpen=!1,containingElement:this.el,class:"breadcrumbs__dropdown"},o("button",{class:"trigger-button",slot:"trigger"},o("span",null,this.breadcrumbs&&this.breadcrumbs.length>1&&o("span",{class:"trigger-button_label"},".."),o("span",{class:"trigger-button_label"},r?.label)),o("nano-icon",{class:{"trigger-icon":!0,"trigger-icon--open":this.isOpen},name:"light/chevron-down"})),o("nav",null,o("nano-menu",{class:"breadcrumbs small",label:"Breadcrumbs"},this.breadcrumbs?.slice(0,-1)?.map(((n,r)=>o("nano-nav-item",{key:r,href:n.href,class:{return:n.return,link:!!n.href},disabled:!n.href},n.label)))))))}},e=({breadcrumbs:n,className:r})=>o("ol",{class:`breadcrumbs ${r}`},n?.map(((n,r)=>o("li",null,o("a",{key:r,href:n.href,class:{return:n.return,link:!!n.href}},n.return&&o("nano-icon",{name:"light/chevron-left",size:"small",class:"breadcrumb-icon"}),n.label)))));t.style=':host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }/**\n  * @prop {string} --text-color - The base color of the text. Defaults to var(--nano-color-primary-1000).\n  * @prop {string} --text-color-hover - The hover colour of the text. Defaults to var(--nano-color-primary-1200).\n  * @prop {string} --text-color-secondary - The secondary colour (& inactive colour) of the text. Defaults to var(--nano-color-neutral-1400).\n  * @prop {string} --text-color-disabled - The disabled colour of the text. Defaults to var(--nano-color-neutral-1000).\n  * @prop {string} --border-color - The colour of the border & divider. Defaults to var(--nano-color-neutral-400).\n  * @prop {string} --trigger-bg-color - The background colour of the trigger button. Defaults to var(--nano-color-base-0).\n  */\n:host {\n  --text-color: var(--nano-color-primary-1000);\n  --text-color-hover: var(--nano-color-primary-1200);\n  --text-color-secondary: var(--nano-color-neutral-1400);\n  --text-color-disabled: var(--nano-color-neutral-1000);\n  --border-color: var(--nano-color-neutral-400);\n  --trigger-bg-color: var(--nano-color-base-0);\n  container-type: inline-size;\n  display: block;\n}\n\n.breadcrumbs {\n  inline-size: 100%;\n  max-inline-size: 1346px;\n}\n\nol,\nnano-menu::part(base) {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  flex-direction: row;\n}\n\nli {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  font-size: var(--nano-font-size-xs);\n  line-height: var(--nano-line-height-normal);\n  text-wrap: nowrap;\n  margin-block-end: 0;\n}\n\nli:not(.return-only li)::after,\nnano-nav-item::after {\n  content: "/";\n  margin: 0 var(--nano-spacing-xs);\n  color: var(--border-color);\n}\n\na.link {\n  color: var(--text-color);\n}\n\na:not(.link) {\n  color: var(--text-color-secondary);\n}\n\na:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n  z-index: 1;\n}\n\na.link:hover {\n  color: var(--text-color-hover);\n}\n\na.return.link {\n  display: flex;\n  align-items: center;\n  gap: calc(var(--nano-spacing-sm) / 2);\n}\n\n.breadcrumbs__dropdown {\n  inline-size: 100%;\n  display: none;\n}\n.breadcrumbs__dropdown[open]::part(trigger) {\n  box-shadow: var(--nano-shadow-l1);\n}\n.breadcrumbs__dropdown[open]::part(panel) {\n  box-shadow: var(--nano-shadow-l1);\n}\n\n.trigger-button {\n  inline-size: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--nano-spacing-l3) var(--nano-spacing-l2);\n  color: var(--text-color);\n  background-color: var(--trigger-bg-color);\n  cursor: pointer;\n  text-align: start;\n  border: none;\n  font-size: var(--nano-font-size-xs);\n}\n.trigger-button .trigger-button_label {\n  text-decoration: underline;\n}\n.trigger-button .trigger-button_label::after {\n  content: "/";\n  margin: 0 var(--nano-spacing-xs);\n  color: var(--border-color);\n}\n.trigger-button:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n}\n\n.trigger-icon {\n  transform: rotate(0deg);\n  transition: var(--nano-transition-x-fast) ease transform;\n}\n.trigger-icon--open {\n  transform: rotate(180deg);\n}\n\n@container (width < 768px) {\n  .main {\n    display: none !important;\n  }\n  .breadcrumbs__dropdown {\n    display: block !important;\n  }\n  nano-menu::part(base) {\n    flex-direction: column !important;\n  }\n  nano-nav-item::after {\n    display: none !important;\n  }\n  .trigger-button_label::after {\n    display: inline-block !important;\n  }\n  .return-only {\n    padding: var(--nano-spacing-l3) var(--nano-spacing-l2) !important;\n  }\n}';export{t as nano_breadcrumb}

package/dist/nano-components/nano-components.css

@@ -1488,6 +1488,9 @@
   :where(nano-menu, .nano-menu) :where(nano-icon, .nano-icon) {
     color: var(--icon-color);
   }
+  :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item)::part(trigger-wrapper) {
+    flex: 1;
+  }
   :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item)::part(trigger),
   :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item) [slot=close-button],
   :where(nano-menu, .nano-menu) nano-content-links a {
@@ -1928,131 +1931,6 @@
     }
   }
 }
-@layer components {
-  nano-breadcrumb {
-    --text-color: var(--nano-color-primary-1000);
-    --text-color-hover: var(--nano-color-primary-1200);
-    --text-color-secondary: var(--nano-color-neutral-1400);
-    --text-color-disabled: var(--nano-color-neutral-1000);
-    --border-color: var(--nano-color-neutral-400);
-    --trigger-bg-color: var(--nano-color-base-0);
-  }
-  nano-breadcrumb .breadcrumbs {
-    container-type: inline-size;
-    container-name: breadcrumbs;
-    inline-size: 100%;
-    max-inline-size: 1346px;
-  }
-  nano-breadcrumb ol,
-  nano-breadcrumb nano-menu::part(base) {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: row;
-  }
-  nano-breadcrumb li,
-  nano-breadcrumb nano-nav-item {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    font-size: var(--nano-font-size-xs);
-    line-height: var(--nano-line-height-normal);
-    text-wrap: nowrap;
-    margin-block-end: 0;
-  }
-  nano-breadcrumb li:not(.return-only li)::after,
-  nano-breadcrumb nano-nav-item::after {
-    content: "/";
-    margin: 0 var(--nano-spacing-xs);
-    color: var(--border-color);
-  }
-  nano-breadcrumb a.link {
-    color: var(--text-color);
-  }
-  nano-breadcrumb a:not(.link) {
-    color: var(--text-color-secondary);
-  }
-  nano-breadcrumb a:focus-visible {
-    outline: var(--nano-focus-ring);
-    outline-offset: var(--nano-focus-ring-offset);
-    z-index: 1;
-  }
-  nano-breadcrumb a.link:hover {
-    color: var(--text-color-hover);
-  }
-  nano-breadcrumb a.return.link {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--nano-spacing-sm) / 2);
-  }
-  nano-breadcrumb nano-dropdown {
-    inline-size: 100%;
-    display: none;
-  }
-  nano-breadcrumb nano-dropdown[open]::part(trigger) {
-    box-shadow: var(--nano-shadow-l1);
-  }
-  nano-breadcrumb nano-dropdown[open]::part(panel) {
-    box-shadow: var(--nano-shadow-l1);
-  }
-  nano-breadcrumb .trigger-button {
-    inline-size: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: var(--nano-spacing-l3) var(--nano-spacing-l2);
-    color: var(--text-color);
-    background-color: var(--trigger-bg-color);
-    cursor: pointer;
-    text-align: start;
-    border: none;
-    font-size: var(--nano-font-size-xs);
-  }
-  nano-breadcrumb .trigger-button .trigger-button_label {
-    text-decoration: underline;
-  }
-  nano-breadcrumb .trigger-button .trigger-button_label::after {
-    content: "/";
-    margin: 0 var(--nano-spacing-xs);
-    color: var(--border-color);
-  }
-  nano-breadcrumb .trigger-button:focus-visible {
-    outline: var(--nano-focus-ring);
-    outline-offset: var(--nano-focus-ring-offset);
-  }
-  nano-breadcrumb .trigger-icon {
-    transform: rotate(0deg);
-    transition: var(--nano-transition-x-fast) ease transform;
-  }
-  nano-breadcrumb .trigger-icon--open {
-    transform: rotate(180deg);
-  }
-  @container breadcrumbs (max-width: 768px) {
-    nano-breadcrumb .main {
-      display: none;
-    }
-    nano-breadcrumb nano-dropdown {
-      display: block;
-    }
-    nano-breadcrumb nano-menu::part(base) {
-      flex-direction: column;
-    }
-    nano-breadcrumb nano-nav-item::after {
-      display: none;
-    }
-    nano-breadcrumb .trigger-button_label::after {
-      display: inline-block;
-    }
-    nano-breadcrumb .return-only {
-      padding: var(--nano-spacing-l3) var(--nano-spacing-l2);
-    }
-    nano-breadcrumb nano-nav-item::part(trigger) {
-      text-decoration: none;
-      color: var(--text-color-secondary);
-    }
-  }
-}
 @layer components {
   :root {
     --nano-component-icon-chevron: url("data:image/svg+xml;charset=utf-8,<svg%20viewBox='0%200%2016%2016'%20xmlns='http://www.w3.org/2000/svg'><g><path%20fill='white'%20d='M4.18457%2015.8496C4.06179%2015.7374%204.00044%2015.584%204.00044%2015.43C4.00044%2015.291%204.05065%2015.1521%204.15221%2015.0421L10.6195%208.00301L4.15207%200.959231C3.9378%200.727093%203.9512%200.364958%204.18443%200.151748C4.41655%20-0.0625328%204.77688%20-0.0480332%204.99114%200.183555L11.8477%207.61197C12.0508%207.83182%2012.0508%208.16767%2011.8477%208.38766L4.99114%2015.8161C4.77594%2016.046%204.41669%2016.0639%204.18457%2015.8496Z'/></g></svg>");

package/dist/nano-components/nano-details.entry.js

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{r as t,c as e,d as i}from"./index-DXvE-U_j.js";import{h as n}from"./renderer-BUaAsDso.js";import{H as a}from"./slot-DYFgWo5f.js";const o=class{constructor(i){t(this,i),this.nanoOpen=e(this,"nanoOpen",7),this.nanoClose=e(this,"nanoClose",7),this.nanoAfterOpen=e(this,"nanoAfterOpen",7),this.nanoAfterClose=e(this,"nanoAfterClose",7)}mo;stateChanging=!1;slotCtrl=new a(this,"icon-start","icon-end");detailsEl;headerEl;_bodyEl;get bodyEl(){return this._bodyEl}set bodyEl(t){this.bodyEl&&this.bodyEl===this._bodyEl||(this.bodyEl&&this.bodyEl.removeEventListener("transitionend",this.handleTransitionEnd),t.addEventListener("transitionend",this.handleTransitionEnd),this._bodyEl=t)}label="";open=!1;disabled=!1;size="medium";nanoOpen;nanoClose;nanoAfterOpen;nanoAfterClose;toggleClick(){this.stateChanging=!0,this.open?this.show():this.hide()}onKeyDown=t=>{if(!this.stateChanging&&!this.disabled)switch(t.key){case"Enter":case" ":t.preventDefault(),this.open=!this.open;break;case"ArrowUp":case"ArrowLeft":t.preventDefault(),this.open=!1;break;case"ArrowDown":case"ArrowRight":t.preventDefault(),this.open=!0}};onMouseDown=t=>{t.preventDefault(),this.headerEl.focus(),this.stateChanging||this.disabled||(this.open=!this.open)};handleTransitionEnd=t=>{"opacity"===t.propertyName&&t.composedPath().find((t=>t===this.bodyEl))&&(this.open?(this.nanoAfterOpen.emit(),requestAnimationFrame((()=>this.stateChanging=!1))):(this.detailsEl.open=!1,this.nanoAfterClose.emit(),requestAnimationFrame((()=>this.stateChanging=!1))))};hide(){if(this.nanoClose.emit(this.open).defaultPrevented)return this.open=!0,void(this.detailsEl.open=!0)}show(){const t=this.nanoOpen.emit();if(this.detailsEl.open=!0,t.defaultPrevented)return this.open=!1,void(this.detailsEl.open=!1)}attachMo(){!this.mo&&this.detailsEl&&(this.mo=new MutationObserver((t=>{if(!this.stateChanging)for(const e of t)"attributes"===e.type&&"open"===e.attributeName&&(this.open=this.detailsEl.open)})),this.mo.observe(this.detailsEl,{attributes:!0}))}componentDidLoad(){this.open&&this.detailsEl.setAttribute("open","true"),this.attachMo()}connectedCallback(){this.bodyEl&&this.bodyEl.addEventListener("transitionend",this.handleTransitionEnd),this.attachMo()}disconnectedCallback(){this.mo&&(this.mo.disconnect(),this.mo=void 0),this.bodyEl&&this.bodyEl.removeEventListener("transitionend",this.handleTransitionEnd)}render(){return n(i,{key:"6bd0b907e8036bffdc232f11520fc7e7ecbd5274",class:"nano-details"},n("details",{key:"a375256a375ffa1c52f7e425328add65396d79ae",part:"base",ref:t=>this.detailsEl=t,class:{details:!0,disabled:this.disabled}},n("summary",{key:"6532629e3d2258dd7b35aa9c088c290cfd586111",part:"header","aria-controls":"content","aria-expanded":this.open?"true":"false","aria-disabled":this.disabled?"true":"false",tabindex:this.disabled?"-1":"0",id:"header",role:"button",class:"header",ref:t=>this.headerEl=t,onKeyDown:this.onKeyDown,onClick:this.onMouseDown},this.slotCtrl.has("icon-start")&&n("span",{key:"2a91b1368bfb4120d3356c59a6c277a2608f1ff9",part:"icon icon--start",class:"icon icon--start"},n("slot",{key:"6ec67523e758f1f189a9c2339e48116f19423a87",name:"icon-start"})),n("div",{key:"83c975864586f752a86bd13b78ba7a2329f3a484",part:"label",class:"label"},this.label?this.label:n("slot",{name:"label"})),n("span",{key:"538494f4cd43b12143151ce1523533efb70800b7",part:"icon icon--end",class:"icon icon--end"},n("slot",this.open?{name:"icon-collapse"}:{name:"icon-expand"}),n("slot",{key:"9cd7a3d39754029ad70d3b8976545513a7d6f77b",name:"icon-end"},!this.slotCtrl.has("icon-start")&&!this.slotCtrl.has("icon-end")&&!this.slotCtrl.has("icon-expand")&&!this.slotCtrl.has("icon-collapse")&&n("nano-icon",{key:"0321927f47cbc530e8044598fec3370dfedbb325",class:"default-icon",name:"light/chevron-down"})))),n("div",{key:"a7366fb51de087f7c6f5d7da59e761050b2ab231",part:"body",class:"body",ref:t=>this.bodyEl=t,role:"region","aria-labelledby":"header"},n("div",{key:"dd888954cdfba45da62a01d10f7b010a0277b7ec",class:"content-wrapper"},n("div",{key:"eff6dbb8d4a41d9957d135e2f1e7470e37615255",part:"content",class:"content",id:"content"},n("slot",{key:"9b2fd79fc46ad9b9c5c7c6a39a856b20b87bca6a"}))))))}static get watchers(){return{open:["toggleClick"]}}};o.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{font-family:inherit;font-size:inherit;font-stretch: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:var(--nano-spacing-md);--btn-padding:var(--padding);--btn-bg-color:transparent;--btn-bg-color--hover:var(--nano-color-primary-100);--btn-bg-color--active:var(--nano-color-primary-300);--content-padding:var(--padding);display:block;border:1px solid var(--nano-color-neutral-300);color:var(--nano-color-neutral-1400)}:host([size=small]){--padding:var(--nano-spacing-sm) 0.9375rem}:host([size=large]){--padding:var(--nano-spacing-l)}:host([size=large]) .header{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-l);line-height:var(--nano-line-height-dense)}:host([disabled]){opacity:0.5}.header{all:unset;cursor:pointer;padding:var(--btn-padding);position:relative;display:flex;flex-wrap:wrap;align-items:center;background:var(--btn-bg-color);color:inherit;font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-medium);line-height:var(--nano-line-height-dense)}.header::-webkit-details-marker{display:none}.header:focus{outline:none}.header:not([aria-disabled=true]):focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.header:not([aria-disabled=true]):hover{background:var(--btn-bg-color--hover)}.header:not([aria-disabled=true]):active{background:var(--btn-bg-color--active)}.disabled .header{cursor:not-allowed}.header .label{inline-size:100%;max-inline-size:100%;max-block-size:100%;flex:1;display:inline-block}.header .icon{line-height:0;flex-direction:column;justify-content:center;display:inline-block;color:var(--nano-color-primary-1200)}.header .icon .default-icon{rotate:0deg;transform-origin:center;transition:var(--nano-transition-x-fast) ease rotate}:host([open]) .header .icon .default-icon{rotate:180deg}.header .icon--start{margin-inline:0 var(--btn-padding);margin-block:0}.header .icon--end{margin-inline:var(--btn-padding) 0;margin-block:0}.header .icon ::slotted(.nano-icon),.header .icon::slotted(.nano-icon){color:currentcolor;transition:var(--nano-transition-x-fast) ease rotate;transform-origin:center}.body{display:grid;grid-template-rows:0fr;transition:all var(--nano-transition-fast) ease-out;opacity:0}:host([open]) .body{grid-template-rows:1fr;opacity:1}.content-wrapper{overflow:hidden}.content{padding:var(--content-padding)}";export{o as nano_details}
+import{r as t,c as e,d as i}from"./index-DXvE-U_j.js";import{h as n}from"./renderer-BUaAsDso.js";import{H as a}from"./slot-Db9r1aLM.js";const o=class{constructor(i){t(this,i),this.nanoOpen=e(this,"nanoOpen",7),this.nanoClose=e(this,"nanoClose",7),this.nanoAfterOpen=e(this,"nanoAfterOpen",7),this.nanoAfterClose=e(this,"nanoAfterClose",7)}mo;stateChanging=!1;slotCtrl=new a(this,"icon-start","icon-end");detailsEl;headerEl;_bodyEl;get bodyEl(){return this._bodyEl}set bodyEl(t){this.bodyEl&&this.bodyEl===this._bodyEl||(this.bodyEl&&this.bodyEl.removeEventListener("transitionend",this.handleTransitionEnd),t.addEventListener("transitionend",this.handleTransitionEnd),this._bodyEl=t)}label="";open=!1;disabled=!1;size="medium";nanoOpen;nanoClose;nanoAfterOpen;nanoAfterClose;toggleClick(){this.stateChanging=!0,this.open?this.show():this.hide()}onKeyDown=t=>{if(!this.stateChanging&&!this.disabled)switch(t.key){case"Enter":case" ":t.preventDefault(),this.open=!this.open;break;case"ArrowUp":case"ArrowLeft":t.preventDefault(),this.open=!1;break;case"ArrowDown":case"ArrowRight":t.preventDefault(),this.open=!0}};onMouseDown=t=>{t.preventDefault(),this.headerEl.focus(),this.stateChanging||this.disabled||(this.open=!this.open)};handleTransitionEnd=t=>{"opacity"===t.propertyName&&t.composedPath().find((t=>t===this.bodyEl))&&(this.open?(this.nanoAfterOpen.emit(),requestAnimationFrame((()=>this.stateChanging=!1))):(this.detailsEl.open=!1,this.nanoAfterClose.emit(),requestAnimationFrame((()=>this.stateChanging=!1))))};hide(){if(this.nanoClose.emit(this.open).defaultPrevented)return this.open=!0,void(this.detailsEl.open=!0)}show(){const t=this.nanoOpen.emit();if(this.detailsEl.open=!0,t.defaultPrevented)return this.open=!1,void(this.detailsEl.open=!1)}attachMo(){!this.mo&&this.detailsEl&&(this.mo=new MutationObserver((t=>{if(!this.stateChanging)for(const e of t)"attributes"===e.type&&"open"===e.attributeName&&(this.open=this.detailsEl.open)})),this.mo.observe(this.detailsEl,{attributes:!0}))}componentDidLoad(){this.open&&this.detailsEl.setAttribute("open","true"),this.attachMo()}connectedCallback(){this.bodyEl&&this.bodyEl.addEventListener("transitionend",this.handleTransitionEnd),this.attachMo()}disconnectedCallback(){this.mo&&(this.mo.disconnect(),this.mo=void 0),this.bodyEl&&this.bodyEl.removeEventListener("transitionend",this.handleTransitionEnd)}render(){return n(i,{key:"6bd0b907e8036bffdc232f11520fc7e7ecbd5274",class:"nano-details"},n("details",{key:"a375256a375ffa1c52f7e425328add65396d79ae",part:"base",ref:t=>this.detailsEl=t,class:{details:!0,disabled:this.disabled}},n("summary",{key:"6532629e3d2258dd7b35aa9c088c290cfd586111",part:"header","aria-controls":"content","aria-expanded":this.open?"true":"false","aria-disabled":this.disabled?"true":"false",tabindex:this.disabled?"-1":"0",id:"header",role:"button",class:"header",ref:t=>this.headerEl=t,onKeyDown:this.onKeyDown,onClick:this.onMouseDown},this.slotCtrl.has("icon-start")&&n("span",{key:"2a91b1368bfb4120d3356c59a6c277a2608f1ff9",part:"icon icon--start",class:"icon icon--start"},n("slot",{key:"6ec67523e758f1f189a9c2339e48116f19423a87",name:"icon-start"})),n("div",{key:"83c975864586f752a86bd13b78ba7a2329f3a484",part:"label",class:"label"},this.label?this.label:n("slot",{name:"label"})),n("span",{key:"538494f4cd43b12143151ce1523533efb70800b7",part:"icon icon--end",class:"icon icon--end"},n("slot",this.open?{name:"icon-collapse"}:{name:"icon-expand"}),n("slot",{key:"9cd7a3d39754029ad70d3b8976545513a7d6f77b",name:"icon-end"},!this.slotCtrl.has("icon-start")&&!this.slotCtrl.has("icon-end")&&!this.slotCtrl.has("icon-expand")&&!this.slotCtrl.has("icon-collapse")&&n("nano-icon",{key:"0321927f47cbc530e8044598fec3370dfedbb325",class:"default-icon",name:"light/chevron-down"})))),n("div",{key:"a7366fb51de087f7c6f5d7da59e761050b2ab231",part:"body",class:"body",ref:t=>this.bodyEl=t,role:"region","aria-labelledby":"header"},n("div",{key:"dd888954cdfba45da62a01d10f7b010a0277b7ec",class:"content-wrapper"},n("div",{key:"eff6dbb8d4a41d9957d135e2f1e7470e37615255",part:"content",class:"content",id:"content"},n("slot",{key:"9b2fd79fc46ad9b9c5c7c6a39a856b20b87bca6a"}))))))}static get watchers(){return{open:["toggleClick"]}}};o.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{font-family:inherit;font-size:inherit;font-stretch: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:var(--nano-spacing-md);--btn-padding:var(--padding);--btn-bg-color:transparent;--btn-bg-color--hover:var(--nano-color-primary-100);--btn-bg-color--active:var(--nano-color-primary-300);--content-padding:var(--padding);display:block;border:1px solid var(--nano-color-neutral-300);color:var(--nano-color-neutral-1400)}:host([size=small]){--padding:var(--nano-spacing-sm) 0.9375rem}:host([size=large]){--padding:var(--nano-spacing-l)}:host([size=large]) .header{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-l);line-height:var(--nano-line-height-dense)}:host([disabled]){opacity:0.5}.header{all:unset;cursor:pointer;padding:var(--btn-padding);position:relative;display:flex;flex-wrap:wrap;align-items:center;background:var(--btn-bg-color);color:inherit;font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-medium);line-height:var(--nano-line-height-dense)}.header::-webkit-details-marker{display:none}.header:focus{outline:none}.header:not([aria-disabled=true]):focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.header:not([aria-disabled=true]):hover{background:var(--btn-bg-color--hover)}.header:not([aria-disabled=true]):active{background:var(--btn-bg-color--active)}.disabled .header{cursor:not-allowed}.header .label{inline-size:100%;max-inline-size:100%;max-block-size:100%;flex:1;display:inline-block}.header .icon{line-height:0;flex-direction:column;justify-content:center;display:inline-block;color:var(--nano-color-primary-1200)}.header .icon .default-icon{rotate:0deg;transform-origin:center;transition:var(--nano-transition-x-fast) ease rotate}:host([open]) .header .icon .default-icon{rotate:180deg}.header .icon--start{margin-inline:0 var(--btn-padding);margin-block:0}.header .icon--end{margin-inline:var(--btn-padding) 0;margin-block:0}.header .icon ::slotted(.nano-icon),.header .icon::slotted(.nano-icon){color:currentcolor;transition:var(--nano-transition-x-fast) ease rotate;transform-origin:center}.body{display:grid;grid-template-rows:0fr;transition:all var(--nano-transition-fast) ease-out;opacity:0}:host([open]) .body{grid-template-rows:1fr;opacity:1}.content-wrapper{overflow:hidden}.content{padding:var(--content-padding)}";export{o as nano_details}

package/dist/nano-components/nano-dialog.entry.js

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{r as o,c as a,a as i,d as t}from"./index-DXvE-U_j.js";import{h as e}from"./renderer-BUaAsDso.js";import{M as n}from"./modal-B_AxJQQp.js";import{l as s,u as r}from"./scroll-iCYjzh9N.js";import{H as d}from"./slot-DYFgWo5f.js";import{C as l}from"./component-store-CH5BI3Tg.js";import{g as h}from"./tabbable-C4l-rYq9.js";import"./dom-Cb7FUtXp.js";import"./throttle-C93FMm2Z.js";let c=0;const f=class{constructor(i){o(this,i),this.nanoShow=a(this,"nanoShow",7),this.nanoAfterShow=a(this,"nanoAfterShow",7),this.nanoHide=a(this,"nanoHide",7),this.nanoAfterHide=a(this,"nanoAfterHide",7),this.nanoInitialFocus=a(this,"nanoInitialFocus",7),this.nanoRequestClose=a(this,"nanoRequestClose",7)}componentId="dialog-"+ ++c;modal;willShow=!1;willHide=!1;originalTrigger;overlay;dialog;slotCtrl=new d(this,"footer");get panel(){return this._panel}set panel(o){this._panel&&this.panel.removeEventListener("transitionend",this.handleTransitionEnd),o.addEventListener("transitionend",this.handleTransitionEnd),this._panel=o}_panel;get host(){return i(this)}noDismiss=!1;hidden=!0;showRibbon=!0;open=!1;handleOpenChange(){this.open?this.show():this.hide()}label;noHeader=!1;noUserDismiss=!1;storeId;storeMethod="url-hash";hoist=!1;handleHoistChange(){"popover"in globalThis.HTMLElement.prototype||!this.hoist||Array.from(document.body.children).includes(this.host)||document.body.prepend(this.host)}nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;nanoInitialFocus;nanoRequestClose;async show(){if(this.willShow)return;if(this.nanoShow.emit().defaultPrevented)return void(this.open=!1);this.dialog&&(this.dialog.hidden=!1),this.originalTrigger=document.activeElement,this.willShow=!0,this.hidden=!1,this.open=!0,this.modal.activate(),"function"==typeof this.dialog?.showPopover&&this.dialog.showPopover(),s(this.host);const o=this.host.querySelector("[autofocus]");o&&o.removeAttribute("autofocus"),this.host.addEventListener("nanoAfterShow",(()=>{this.nanoInitialFocus.emit().defaultPrevented||(o||h(this.host,!0,!0,!0)[0]||this.panel).focus({preventScroll:!0})}),{once:!0})}async hide(){if(this.willHide)return;if(this.nanoHide.emit().defaultPrevented)return void(this.open=!0);this.willHide=!0,this.open=!1,this.modal.deactivate(),this.stopVideos();const o=this.originalTrigger;o&&(o.setFocus&&"function"==typeof o.setFocus?o.setFocus():o.focus()),setTimeout((()=>{this.open||"function"!=typeof this.dialog?.hidePopover||this.dialog.hidePopover(),r(this.host)}),300)}handleKeyDown=o=>{"Escape"===o.key&&this.requestClose()};requestClose=()=>{this.nanoRequestClose.emit().defaultPrevented||this.noUserDismiss?(this.noDismiss=!0,setTimeout((()=>this.noDismiss=!1),250)):this.hide()};handleTransitionEnd=o=>{"opacity"===o.propertyName&&o.composedPath().find((o=>o===this.panel||o===this.overlay))&&(this.willShow=!1,this.willHide=!1,this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit(),this.open||(this.dialog.hidden=!0,this.hidden=!0))};stopVideos(){Array.from(this.host.querySelectorAll("iframe,video")).forEach((o=>{"video"===o.tagName.toLowerCase()?o.pause():o.src=o.src}))}connectedCallback(){this.handleHoistChange(),this.modal=new n(this.host)}componentWillLoad(){this.storeId&&l.init(this,["open"],this.storeMethod,this.storeId)}componentDidLoad(){this.dialog.hidden=!this.open,this.open&&(this.show(),this.nanoAfterShow.emit())}disconnectedCallback(){r(this.host),this.panel&&this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}render(){return e(t,{key:"40e8bc877fd5b34bbc02b9ab28a331d6bf81415a",class:"nano-dialog"},e("div",{key:"3d8c4f2b68831a42039e597d532e2efe680082df",part:"base",class:{dialog:!0,"dialog--open":this.open,"dialog--has-footer":this.slotCtrl.has("footer"),"dialog--has-header":!this.noHeader,"dialog--nodismiss":this.noDismiss,"dialog--with-ribbon":this.showRibbon},onKeyDown:this.handleKeyDown,ref:o=>this.dialog=o,popover:"manual"},e("div",{key:"48ec09fb5c08830fd9f4f54e528ce47d16dcf60e",part:"overlay",class:"dialog__overlay",ref:o=>this.overlay=o,onClick:this.requestClose}),e("div",{key:"9b28aef25fc3054e329e87293e1f24b1f7bd4f63",ref:o=>this.panel=o,part:"panel",class:"dialog__panel",role:"dialog","aria-modal":"true","aria-hidden":this.hidden?"true":"false","aria-label":this.noHeader?this.label:null,"aria-labelledby":this.noHeader?null:`${this.componentId}-title`,tabIndex:-1},e("div",{key:"a25853d8c1d11e52235d6d9300cc39e529b3306f",class:"dialog__body-wrap"},!this.noHeader&&e("nano-sticker",{key:"111ee49da4468e834046ecef442873d7956a9a8f"},e("header",{key:"5f40b8920bd3b7ddac34d08593752cdc58a64f4f",part:"header",class:"dialog__header"},e("span",{key:"2f35793fb4c9009db7321c27feed4448c5a67ada",part:"title",class:"dialog__title",id:`${this.componentId}-title`},e("slot",{key:"0b5de133cf8f63237cccafb96fbe635c82bdf8fb",name:"label"},this.label||String.fromCharCode(65279))),!this.noUserDismiss&&e("nano-icon-button",{key:"d517fbc641ba1e35040f08e1ba53b56d2e2f1fcd",part:"close-button",exportparts:"base:close-button__base",class:"dialog__close-icon",label:"close dialog",onClick:this.requestClose,iconName:"light/xmark"}))),e("div",{key:"d09658d8fa0c306068e4ccf77dbae233e345a648",part:"body",class:"dialog__body"},e("slot",{key:"46ef0d9c1ca1a136e15baa859a19b7e46e467d3c"})),this.slotCtrl.has("footer")&&e("nano-sticker",{key:"86dc8c994c6e3d3f7677ce9c032a3a1b9433a5e3",position:"bottom"},e("footer",{key:"6876b4a53b64469170ee81c6d442e217c844596f",part:"footer",class:"dialog__footer"},e("slot",{key:"faff1e531b53fc1895ade69bcdf8360ceedfa619",name:"footer"})))))))}static get watchers(){return{open:["handleOpenChange"],hoist:["handleHoistChange"]}}};f.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--border-radius:0;--content-background:var(--nano-color-neutral-75);--footer-content:var(--nano-color-neutral-75);--scrim-color:var(--nano-overlay-background-color);--box-shadow:var(--nano-shadow-l3);--close-button-color:var(--nano-color-primary-1200);--width:50rem;--height:auto;--body-padding-v:var(--nano-spacing-l1-default);--body-padding-h:var(--nano-spacing-l1-default);--header-padding-v:var(--nano-spacing-l);--header-padding-h:var(--nano-spacing-l1-default);--footer-padding-v:var(--nano-spacing-l);--footer-padding-h:var(--nano-spacing-l1-default)}.dialog{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:var(--nano-z-index-modal);border:none;inline-size:unset;block-size:unset;color:unset;background-color:unset}.dialog::backdrop{display:none}.dialog__panel{display:flex;flex-direction:column;z-index:2;inline-size:var(--width);block-size:var(--height);max-inline-size:calc(100% - (var(--nano-spacing-xl) + var(--nano-scroll-lock-size)));max-block-size:calc(92vh - var(--nano-spacing-xl));background-color:var(--content-background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);opacity:0;transform:scale(0.8);transition:var(--nano-transition-fast) opacity, var(--nano-transition-fast) transform}.dialog__panel:focus{outline:none}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog--nodismiss .dialog__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.dialog__header{flex:0 0 auto;display:flex;inline-size:100%;background-color:var(--content-background);border-radius:var(--border-radius) var(--border-radius) 0 0;transition:var(--nano-transition-x-fast) box-shadow;min-inline-size:auto;padding-block:var(--header-padding-v);padding-inline:var(--header-padding-h)}[stuck] .dialog__header{box-shadow:var(--nano-shadow-l0)}.dialog__title{flex:1 1 auto;font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-xl);line-height:var(--nano-line-height-denser)}.dialog__close-icon{flex:0 0 auto;display:flex;align-items:center;font-size:1.375rem;position:relative;inset-inline-end:calc(var(--nano-spacing-l1-default) / 2 * -1);--color:var(--close-button-color)}.dialog__body-wrap{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--border-radius)}.dialog:not(.dialog--has-header) .dialog__body-wrap{border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:inherit}.dialog:not(.dialog--has-footer) .dialog__body-wrap{border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:0}.dialog__body{padding-block:0 var(--body-padding-v);padding-inline:var(--body-padding-h)}.dialog:not(.dialog--has-header) .dialog__body{padding-block-start:var(--body-padding-v)}.dialog__body ::slotted(*){max-inline-size:100%}.dialog__footer{inline-size:100%;padding-block:var(--footer-padding-v);padding-inline:var(--footer-padding-h);background:var(--footer-content);border-radius:0 0 var(--border-radius) var(--border-radius);position:relative;inset-block-start:1px;min-inline-size:auto;border-block-start:1px solid var(--nano-color-neutral-300);gap:var(--nano-spacing-md);display:inline-flex}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__overlay{position:fixed;inset:0 !important;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast) opacity}.dialog--open .dialog__overlay{opacity:1}";export{f as nano_dialog}
+import{r as o,c as a,a as i,d as t}from"./index-DXvE-U_j.js";import{h as e}from"./renderer-BUaAsDso.js";import{M as n}from"./modal-B_AxJQQp.js";import{l as s,u as r}from"./scroll-iCYjzh9N.js";import{H as d}from"./slot-Db9r1aLM.js";import{C as l}from"./component-store-CH5BI3Tg.js";import{g as h}from"./tabbable-C4l-rYq9.js";import"./dom-Cb7FUtXp.js";import"./throttle-C93FMm2Z.js";let c=0;const f=class{constructor(i){o(this,i),this.nanoShow=a(this,"nanoShow",7),this.nanoAfterShow=a(this,"nanoAfterShow",7),this.nanoHide=a(this,"nanoHide",7),this.nanoAfterHide=a(this,"nanoAfterHide",7),this.nanoInitialFocus=a(this,"nanoInitialFocus",7),this.nanoRequestClose=a(this,"nanoRequestClose",7)}componentId="dialog-"+ ++c;modal;willShow=!1;willHide=!1;originalTrigger;overlay;dialog;slotCtrl=new d(this,"footer");get panel(){return this._panel}set panel(o){this._panel&&this.panel.removeEventListener("transitionend",this.handleTransitionEnd),o.addEventListener("transitionend",this.handleTransitionEnd),this._panel=o}_panel;get host(){return i(this)}noDismiss=!1;hidden=!0;showRibbon=!0;open=!1;handleOpenChange(){this.open?this.show():this.hide()}label;noHeader=!1;noUserDismiss=!1;storeId;storeMethod="url-hash";hoist=!1;handleHoistChange(){"popover"in globalThis.HTMLElement.prototype||!this.hoist||Array.from(document.body.children).includes(this.host)||document.body.prepend(this.host)}nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;nanoInitialFocus;nanoRequestClose;async show(){if(this.willShow)return;if(this.nanoShow.emit().defaultPrevented)return void(this.open=!1);this.dialog&&(this.dialog.hidden=!1),this.originalTrigger=document.activeElement,this.willShow=!0,this.hidden=!1,this.open=!0,this.modal.activate(),"function"==typeof this.dialog?.showPopover&&this.dialog.showPopover(),s(this.host);const o=this.host.querySelector("[autofocus]");o&&o.removeAttribute("autofocus"),this.host.addEventListener("nanoAfterShow",(()=>{this.nanoInitialFocus.emit().defaultPrevented||(o||h(this.host,!0,!0,!0)[0]||this.panel).focus({preventScroll:!0})}),{once:!0})}async hide(){if(this.willHide)return;if(this.nanoHide.emit().defaultPrevented)return void(this.open=!0);this.willHide=!0,this.open=!1,this.modal.deactivate(),this.stopVideos();const o=this.originalTrigger;o&&(o.setFocus&&"function"==typeof o.setFocus?o.setFocus():o.focus()),setTimeout((()=>{this.open||"function"!=typeof this.dialog?.hidePopover||this.dialog.hidePopover(),r(this.host)}),300)}handleKeyDown=o=>{"Escape"===o.key&&this.requestClose()};requestClose=()=>{this.nanoRequestClose.emit().defaultPrevented||this.noUserDismiss?(this.noDismiss=!0,setTimeout((()=>this.noDismiss=!1),250)):this.hide()};handleTransitionEnd=o=>{"opacity"===o.propertyName&&o.composedPath().find((o=>o===this.panel||o===this.overlay))&&(this.willShow=!1,this.willHide=!1,this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit(),this.open||(this.dialog.hidden=!0,this.hidden=!0))};stopVideos(){Array.from(this.host.querySelectorAll("iframe,video")).forEach((o=>{"video"===o.tagName.toLowerCase()?o.pause():o.src=o.src}))}connectedCallback(){this.handleHoistChange(),this.modal=new n(this.host)}componentWillLoad(){this.storeId&&l.init(this,["open"],this.storeMethod,this.storeId)}componentDidLoad(){this.dialog.hidden=!this.open,this.open&&(this.show(),this.nanoAfterShow.emit())}disconnectedCallback(){r(this.host),this.panel&&this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}render(){return e(t,{key:"40e8bc877fd5b34bbc02b9ab28a331d6bf81415a",class:"nano-dialog"},e("div",{key:"3d8c4f2b68831a42039e597d532e2efe680082df",part:"base",class:{dialog:!0,"dialog--open":this.open,"dialog--has-footer":this.slotCtrl.has("footer"),"dialog--has-header":!this.noHeader,"dialog--nodismiss":this.noDismiss,"dialog--with-ribbon":this.showRibbon},onKeyDown:this.handleKeyDown,ref:o=>this.dialog=o,popover:"manual"},e("div",{key:"48ec09fb5c08830fd9f4f54e528ce47d16dcf60e",part:"overlay",class:"dialog__overlay",ref:o=>this.overlay=o,onClick:this.requestClose}),e("div",{key:"9b28aef25fc3054e329e87293e1f24b1f7bd4f63",ref:o=>this.panel=o,part:"panel",class:"dialog__panel",role:"dialog","aria-modal":"true","aria-hidden":this.hidden?"true":"false","aria-label":this.noHeader?this.label:null,"aria-labelledby":this.noHeader?null:`${this.componentId}-title`,tabIndex:-1},e("div",{key:"a25853d8c1d11e52235d6d9300cc39e529b3306f",class:"dialog__body-wrap"},!this.noHeader&&e("nano-sticker",{key:"111ee49da4468e834046ecef442873d7956a9a8f"},e("header",{key:"5f40b8920bd3b7ddac34d08593752cdc58a64f4f",part:"header",class:"dialog__header"},e("span",{key:"2f35793fb4c9009db7321c27feed4448c5a67ada",part:"title",class:"dialog__title",id:`${this.componentId}-title`},e("slot",{key:"0b5de133cf8f63237cccafb96fbe635c82bdf8fb",name:"label"},this.label||String.fromCharCode(65279))),!this.noUserDismiss&&e("nano-icon-button",{key:"d517fbc641ba1e35040f08e1ba53b56d2e2f1fcd",part:"close-button",exportparts:"base:close-button__base",class:"dialog__close-icon",label:"close dialog",onClick:this.requestClose,iconName:"light/xmark"}))),e("div",{key:"d09658d8fa0c306068e4ccf77dbae233e345a648",part:"body",class:"dialog__body"},e("slot",{key:"46ef0d9c1ca1a136e15baa859a19b7e46e467d3c"})),this.slotCtrl.has("footer")&&e("nano-sticker",{key:"86dc8c994c6e3d3f7677ce9c032a3a1b9433a5e3",position:"bottom"},e("footer",{key:"6876b4a53b64469170ee81c6d442e217c844596f",part:"footer",class:"dialog__footer"},e("slot",{key:"faff1e531b53fc1895ade69bcdf8360ceedfa619",name:"footer"})))))))}static get watchers(){return{open:["handleOpenChange"],hoist:["handleHoistChange"]}}};f.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--border-radius:0;--content-background:var(--nano-color-neutral-75);--footer-content:var(--nano-color-neutral-75);--scrim-color:var(--nano-overlay-background-color);--box-shadow:var(--nano-shadow-l3);--close-button-color:var(--nano-color-primary-1200);--width:50rem;--height:auto;--body-padding-v:var(--nano-spacing-l1-default);--body-padding-h:var(--nano-spacing-l1-default);--header-padding-v:var(--nano-spacing-l);--header-padding-h:var(--nano-spacing-l1-default);--footer-padding-v:var(--nano-spacing-l);--footer-padding-h:var(--nano-spacing-l1-default)}.dialog{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:var(--nano-z-index-modal);border:none;inline-size:unset;block-size:unset;color:unset;background-color:unset}.dialog::backdrop{display:none}.dialog__panel{display:flex;flex-direction:column;z-index:2;inline-size:var(--width);block-size:var(--height);max-inline-size:calc(100% - (var(--nano-spacing-xl) + var(--nano-scroll-lock-size)));max-block-size:calc(92vh - var(--nano-spacing-xl));background-color:var(--content-background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);opacity:0;transform:scale(0.8);transition:var(--nano-transition-fast) opacity, var(--nano-transition-fast) transform}.dialog__panel:focus{outline:none}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog--nodismiss .dialog__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.dialog__header{flex:0 0 auto;display:flex;inline-size:100%;background-color:var(--content-background);border-radius:var(--border-radius) var(--border-radius) 0 0;transition:var(--nano-transition-x-fast) box-shadow;min-inline-size:auto;padding-block:var(--header-padding-v);padding-inline:var(--header-padding-h)}[stuck] .dialog__header{box-shadow:var(--nano-shadow-l0)}.dialog__title{flex:1 1 auto;font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-xl);line-height:var(--nano-line-height-denser)}.dialog__close-icon{flex:0 0 auto;display:flex;align-items:center;font-size:1.375rem;position:relative;inset-inline-end:calc(var(--nano-spacing-l1-default) / 2 * -1);--color:var(--close-button-color)}.dialog__body-wrap{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--border-radius)}.dialog:not(.dialog--has-header) .dialog__body-wrap{border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:inherit}.dialog:not(.dialog--has-footer) .dialog__body-wrap{border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:0}.dialog__body{padding-block:0 var(--body-padding-v);padding-inline:var(--body-padding-h)}.dialog:not(.dialog--has-header) .dialog__body{padding-block-start:var(--body-padding-v)}.dialog__body ::slotted(*){max-inline-size:100%}.dialog__footer{inline-size:100%;padding-block:var(--footer-padding-v);padding-inline:var(--footer-padding-h);background:var(--footer-content);border-radius:0 0 var(--border-radius) var(--border-radius);position:relative;inset-block-start:1px;min-inline-size:auto;border-block-start:1px solid var(--nano-color-neutral-300);gap:var(--nano-spacing-md);display:inline-flex}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__overlay{position:fixed;inset:0 !important;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast) opacity}.dialog--open .dialog__overlay{opacity:1}";export{f as nano_dialog}

package/dist/nano-components/nano-dropdown_2.entry.js

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{r as t,c as i,a as o,d as e}from"./index-DXvE-U_j.js";import{f as n,g as s}from"./active-element-C1pBwzyj.js";import{P as a}from"./popover-D1cBIHdr.js";import{a as r,g as h}from"./tabbable-C4l-rYq9.js";import{t as d,h as l}from"./renderer-BUaAsDso.js";import{g as p}from"./dom-Cb7FUtXp.js";import{g as c}from"./slot-DYFgWo5f.js";let m=0;const u=class{constructor(o){t(this,o),this.nanoShow=i(this,"nanoShow",7),this.nanoAfterShow=i(this,"nanoAfterShow",7),this.nanoHide=i(this,"nanoHide",7),this.nanoAfterHide=i(this,"nanoAfterHide",7)}dropdownId="dropdown-"+m++;labelId=this.dropdownId+"-title";ignoreOpenWatcher=!1;panel;popover;trigger;positioner;accessibleTrigger;didLoad=!1;focusFirstEle=!0;get menu(){return this.host.querySelector(d("nano-menu"))}get host(){return o(this)}autoOpen=!0;open=!1;handleOpenChange(){this.ignoreOpenWatcher||(this.open?this.show():this.hide(),this.accessibleTrigger?this.accessibleTrigger.setAttribute("aria-expanded",this.open.toString()):this.updateAccessibleTrigger())}closeOnSelect=!0;containingElement;tetherTo=null;handleTetherToChange(){this.createPopover(),this.updateAccessibleTrigger()}placement="bottom-start";distance=5;skidding=0;hoist=!1;handlePopoverOptionsChange(){this.popover&&this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,skidding:this.skidding,distance:this.distance})}dialogTitle;nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;eventType;secondaryOpen(t){t.detail.secondaryMenu&&(t.stopPropagation(),this.panel.classList.add("loading"),this.panel.addEventListener("transitionend",(()=>{this.panel.classList.remove("loading")}),{once:!0}),this.panel.style.minHeight=t.detail.secondaryMenu.scrollHeight+"px")}secondaryClose(t){t.detail.secondaryMenu&&(t.stopPropagation(),t.target.parentElement&&(this.panel.style.minHeight=t.target.parentElement.scrollHeight+"px"))}handlePanelSelect(t){this.closeOnSelect&&t.target.tagName.toLowerCase()===d("nano-menu")&&this.hide()}async show(){if(this.ignoreOpenWatcher=!0,this.open=!0,this.nanoShow.emit().defaultPrevented)return this.open=!1,void(this.ignoreOpenWatcher=!1);"function"==typeof this.positioner?.showPopover?(this.hoist=!0,this.popover.show(),this.positioner.showPopover()):this.popover.show(),this.ignoreOpenWatcher=!1,document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleDocumentKeyDown)}async hide(){if(this.ignoreOpenWatcher=!0,this.open=!1,this.nanoHide.emit().defaultPrevented)return this.open=!0,void(this.ignoreOpenWatcher=!1);this.popover&&this.popover.hide(),this.ignoreOpenWatcher=!1,document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleDocumentKeyDown)}afterHide(){"function"==typeof this.positioner?.hidePopover&&this.positioner.hidePopover(),this.panel.scrollTop=0,this.accessibleTrigger&&n(this.containingElement,this.trigger)&&this.accessibleTrigger.focus()}togglePanel=()=>{this.autoOpen&&(this.open?this.hide():this.show())};updateAccessibleTrigger(){if(!this.didLoad)return;let t;this.accessibleTrigger=null,t=this.tetherTo?r(this.tetherTo):Array.from(this.host.querySelectorAll('[slot="trigger"]')).map(r)[0],t&&!t.getAttribute("aria-haspopup")&&(t.setAttribute("aria-haspopup","true"),t.setAttribute("aria-expanded",this.open?"true":"false"),this.accessibleTrigger=t)}handleDocumentKeyDown(t){if("Escape"!==t.key)if("Tab"===t.key)setTimeout((()=>{n(this.containingElement,this.trigger)||this.hide()}));else{if(this.menu&&(this.placement.match(/bottom|top/)&&["ArrowDown","ArrowUp"," "].includes(t.key)||this.placement.match(/right|left/)&&["ArrowRight","ArrowLeft"," "].includes(t.key)))return!this.open||n(this.containingElement,this.trigger,t)?"NANO-DROPDOWN"===this.containingElement.tagName&&this.containingElement.placement.match(/right|left/)&&"NANO-DROPDOWN"===this.trigger.getRootNode()?.host?.tagName?void this.hide():void 0:(t.preventDefault(),this.menu.setFocus(),void(this.focusFirstEle=!0));const i=t.composedPath();if(this.menu&&i.length&&!i.find((t=>t!==this.menu)))return void this.menu.dispatchEvent(new KeyboardEvent(t.type,t))}else this.hide()}handleDocumentMouseDown(t){n(this.containingElement,this.trigger,t)||this.hide()}handleTriggerKeyDown=t=>{(this.placement.match(/bottom|top/)&&["ArrowDown","ArrowUp"," ","Enter"].includes(t.key)||this.placement.match(/right|left/)&&["ArrowRight","ArrowLeft"," ","Enter"].includes(t.key))&&(this.show(),t.preventDefault(),t.stopPropagation(),this.menu&&(this.menu.setFocus(),this.focusFirstEle=!0))};handleTriggerSlotChange=()=>{this.updateAccessibleTrigger()};createPopover(){(this.tetherTo||this.trigger)&&this.positioner&&(this.popover&&(this.open&&this.hide(),this.popover.destroy(),this.popover=null),this.popover=new a(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:()=>{this.open?this.menu&&(this.menu.showActiveElement(),this.focusFirstEle&&(this.menu.setFocus(),this.focusFirstEle=!1)):this.afterHide()}}),this.open&&this.show())}connectedCallback(){this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this),this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this),this.containingElement||(this.containingElement=this.host)}componentDidLoad(){this.didLoad=!0,this.createPopover(),setTimeout((()=>this.updateAccessibleTrigger()),100)}disconnectedCallback(){this.host.isConnected&&this.hide(),this.popover&&this.popover.destroy()}render(){return l(e,{key:"dd4615946390485d5ad05ff0fbf3714474c38b9b",class:"nano-dropdown"},l("div",{key:"9a60642705315c41efaad525f087397b458caf2a",part:"base",id:this.dropdownId,class:{dropdown:!0,"dropdown--open":this.open}},l("span",{key:"861f59e5d50c956d53ce75d16ca5430bfb339d26",part:"trigger",class:"dropdown__trigger",ref:t=>this.trigger=t,onKeyDown:this.handleTriggerKeyDown,onClick:this.togglePanel},l("slot",{key:"55e3a353ffd07ca586468bbc213d415484e4427f",name:"trigger",onSlotchange:this.handleTriggerSlotChange})),l("div",{key:"3ac2f6fde7117cf7421ac53e1786c4da59fd4e6c",ref:t=>this.positioner=t,class:"dropdown__positioner",popover:"manual",id:this.dropdownId+"-positioner"},l("div",{key:"ff5d8d1248c1434aad2c8f042f208ff3d418f1a4",ref:t=>this.panel=t,part:"panel",class:`dropdown__panel ${this.placement.split("-").join(" ")}`,"aria-hidden":!this.open,role:"group"===this.host.getAttribute("role")?"group":"dialog","aria-modal":"group"===this.host.getAttribute("role")?void 0:"true","aria-labelledby":this.dialogTitle?this.labelId:void 0},this.dialogTitle&&l("span",{key:"e71c3b8e09d6b8cf359470872a70da8794a221db",id:this.labelId,class:"dropdown__accessible-title","aria-live":"group"===this.host.getAttribute("role")?void 0:"polite"},this.dialogTitle),l("slot",{key:"a9349e44064f7bbd4b32b3658c203575fe39c804"})))))}static get watchers(){return{open:["handleOpenChange"],tetherTo:["handleTetherToChange"],placement:["handlePopoverOptionsChange"],distance:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"]}}};u.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--width:auto;--border:none;--border-radius:0px;--background:var(--nano-color-neutral-75);--padding:var(--nano-spacing-sm) 0;--overflow:auto;--dropdown-z-index:var(--nano-z-index-dropdown);--min-width:0;--max-height:none;--box-shadow:var(--nano-shadow-l1);--menu-height:calc(100vh - 200px);display:inline-block}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width);border:0;background:none;padding:0;overflow:visible;color:unset}.dropdown__positioner::backdrop{display:none}.dropdown__positioner[popover],.dropdown__positioner:popover-open{inset:unset}@media (width <= 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-inline-size:var(--min-width);inline-size:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentcolor;box-shadow:var(--box-shadow);opacity:0;transition:var(--nano-transition-x-fast) ease opacity, var(--nano-transition-x-fast) ease transform, var(--nano-transition-fast) ease min-block-size;min-block-size:20px;overflow:var(--overflow);max-block-size:var(--max-height);box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(.nano-menu){max-block-size:var(--menu-height)}.dropdown__accessible-title{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}";const f=class{constructor(o){t(this,o),this.nanoFocus=i(this,"nanoFocus",7),this.nanoBlur=i(this,"nanoBlur",7),this.nanoSelect=i(this,"nanoSelect",7)}ignoreMouseEvents=!1;ignoreMouseTimeout;menu;typeToSelect="";typeToSelectTimeout;get el(){return o(this)}get hasFocus(){return this._hasFocus}_hasFocus=!1;type;_type;label;nanoFocus;nanoBlur;nanoSelect;async setFocus(){this.menu?.focus&&this.menu.focus({preventScroll:!0})}async removeFocus(){this.menu?.blur&&this.menu.blur()}async showActiveElement(){this.selectedItem&&this.selectedItem.scrollIntoView({block:"nearest"})}async resetActiveItem(){this.getItems.filter((t=>t.tagName.toLowerCase()===d("nano-option"))).map((t=>t.setAttribute("tabindex","-1")))}get getItems(){let t;if("listbox"===this._type)t=p(this.el,`${d("nano-nav-item")}, ${d("nano-option")}`,"slot");else{const i=this.el.querySelectorAll("[open]");t=h(i[i.length-1]||this.el)}return t.filter((t=>!t.disabled&&!t.hidden))}get activeItem(){const t=s();return this.getItems.find((i=>"0"===i.getAttribute("tabindex")||i===t||i===document.activeElement||i.classList.contains("has-focus")))}get selectedItem(){return this.getItems.find((t=>t.selected))}async setActiveFocusItem(t,i=!0){const o=this.getItems,e=t||o.find((t=>t.selected))||o[0];o.filter((t=>t.tagName.toLowerCase()===d("nano-option"))).map((t=>t.setAttribute("tabindex",t===e?"0":"-1"))),i&&(e?e.setFocus?e.setFocus():e.focus():this.menu.focus())}handleBlur(t){if(!this.hasFocus)return;let i;if(t.key){if("Tab"!==t.key)return;i=s()&&s().closest(this.el.tagName.toLowerCase())===this.el}else i=!!t.composedPath().find((t=>t===this.el));i||(this.resetActiveItem(),this._hasFocus=!1,this.nanoBlur.emit())}handleFocus=()=>{this.setActiveFocusItem(this.selectedItem||this.getItems[0]),this._hasFocus=!0,this.nanoFocus.emit()};handleClick=t=>{const i=t.target.closest(d("nano-nav-item"));i&&!i.disabled&&this.nanoSelect.emit(i)};handleKeyDown=t=>{switch(clearTimeout(this.ignoreMouseTimeout),this.ignoreMouseTimeout=setTimeout((()=>this.ignoreMouseEvents=!1),500),this.ignoreMouseEvents=!0,t.key){case" ":this.activeItem&&(t.stopPropagation(),"BUTTON"!==this.activeItem.nodeName&&this.activeItem.click());break;case"ArrowDown":case"ArrowUp":case"PageDown":case"PageUp":case"Home":case"End":{const i=this.getItems;let o=i.indexOf(this.activeItem);if(i.length)return t.preventDefault(),"ArrowDown"===t.key?o++:"ArrowUp"===t.key?o--:"Home"===t.key||"PageUp"===t.key?o=0:"End"!==t.key&&"PageDown"!==t.key||(o=i.length-1),o<0&&(o=i.length-1),o>i.length-1&&(o=0),this.setActiveFocusItem(i[o]),void(i[o]&&i[o].scrollIntoView({block:"nearest"}));break}}if(" "===t.key||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(this.typeToSelectTimeout),this.typeToSelectTimeout=setTimeout((()=>this.typeToSelect=""),750),this.typeToSelect+=t.key;const i=this.getItems;for(const t of i)if(c(t).toLowerCase().trim().substring(0,this.typeToSelect.length)===this.typeToSelect){this.setActiveFocusItem(t);break}}};handleMouseOver=t=>{const i=t.target,o=i.closest(d("nano-nav-item"))||i.closest(d("nano-option"))||i.closest("a");o&&!this.ignoreMouseEvents&&this.setActiveFocusItem(o)};handleSlotContent=()=>{if(this._type=this.type||null,!this._type){let t,i=0;h(this.el).forEach((o=>{"A"===o.tagName||"link"===o.role?t++:i++})),this._type=t>i?"nav":"menu"}"nav"!==this._type&&(p(this.el,`*:not(${d("nano-nav-item")}, a, ${d("nano-option")}, ${d("nano-dropdown")})`,!0).forEach((t=>{this.getItems.indexOf(t)<0&&t.setAttribute("role","none")})),this.el.querySelectorAll(`a, ${d("nano-dropdown")}`).forEach((t=>{t.setAttribute("role","A"===t.tagName?"menuitem":"group")})))};componentWillLoad(){this.handleSlotContent()}render(){return l(e,{key:"f7c0e55c16e5607f25a4a75847c0defd4b860e17",role:"listbox"===this._type?"group":this._type,class:"nano-menu"},l("div",{key:"3a19c91258abaa6b0a6333a35809172aabf4db43",onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onFocus:this.handleFocus,"aria-label":this.label?this.label:void 0,ref:t=>this.menu=t,part:"base",class:{menu:!0,["menu--"+this._type]:!0,"menu--has-focus":this.hasFocus},tabIndex:-1,role:"group"},l("slot",{key:"75c213c4a744e7edd1826d88a8e391e16bdc091b",onSlotchange:this.handleSlotContent})))}};f.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--padding:var(--nano-spacing-sm) var(--nano-spacing-sm);--font-size:1rem;--background:var(--nano-color-neutral-75);--nav-item-padding:var(--padding);display:block;background:var(--background);color:var(--nano-color-neutral-1400);overflow-x:clip}.menu{font-size:var(--font-size);overscroll-behavior:none;min-inline-size:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(.nano-nav-item,.nano-option,hr,slot)){padding:var(--padding);display:block}";export{u as nano_dropdown,f as nano_menu}
+import{r as t,c as i,a as o,d as e}from"./index-DXvE-U_j.js";import{f as n,g as s}from"./active-element-C1pBwzyj.js";import{P as a}from"./popover-D1cBIHdr.js";import{a as r,g as h}from"./tabbable-C4l-rYq9.js";import{t as d,h as l}from"./renderer-BUaAsDso.js";import{g as p}from"./dom-Cb7FUtXp.js";import{g as c}from"./slot-Db9r1aLM.js";let m=0;const u=class{constructor(o){t(this,o),this.nanoShow=i(this,"nanoShow",7),this.nanoAfterShow=i(this,"nanoAfterShow",7),this.nanoHide=i(this,"nanoHide",7),this.nanoAfterHide=i(this,"nanoAfterHide",7)}dropdownId="dropdown-"+m++;labelId=this.dropdownId+"-title";ignoreOpenWatcher=!1;panel;popover;trigger;positioner;accessibleTrigger;didLoad=!1;focusFirstEle=!0;get menu(){return this.host.querySelector(d("nano-menu"))}get host(){return o(this)}autoOpen=!0;open=!1;handleOpenChange(){this.ignoreOpenWatcher||(this.open?this.show():this.hide(),this.accessibleTrigger?this.accessibleTrigger.setAttribute("aria-expanded",this.open.toString()):this.updateAccessibleTrigger())}closeOnSelect=!0;containingElement;tetherTo=null;handleTetherToChange(){this.createPopover(),this.updateAccessibleTrigger()}placement="bottom-start";distance=5;skidding=0;hoist=!1;handlePopoverOptionsChange(){this.popover&&this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,skidding:this.skidding,distance:this.distance})}dialogTitle;nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;eventType;secondaryOpen(t){t.detail.secondaryMenu&&(t.stopPropagation(),this.panel.classList.add("loading"),this.panel.addEventListener("transitionend",(()=>{this.panel.classList.remove("loading")}),{once:!0}),this.panel.style.minHeight=t.detail.secondaryMenu.scrollHeight+"px")}secondaryClose(t){t.detail.secondaryMenu&&(t.stopPropagation(),t.target.parentElement&&(this.panel.style.minHeight=t.target.parentElement.scrollHeight+"px"))}handlePanelSelect(t){this.closeOnSelect&&t.target.tagName.toLowerCase()===d("nano-menu")&&this.hide()}async show(){if(this.ignoreOpenWatcher=!0,this.open=!0,this.nanoShow.emit().defaultPrevented)return this.open=!1,void(this.ignoreOpenWatcher=!1);"function"==typeof this.positioner?.showPopover?(this.hoist=!0,this.popover.show(),this.positioner.showPopover()):this.popover.show(),this.ignoreOpenWatcher=!1,document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleDocumentKeyDown)}async hide(){if(this.ignoreOpenWatcher=!0,this.open=!1,this.nanoHide.emit().defaultPrevented)return this.open=!0,void(this.ignoreOpenWatcher=!1);this.popover&&this.popover.hide(),this.ignoreOpenWatcher=!1,document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleDocumentKeyDown)}afterHide(){"function"==typeof this.positioner?.hidePopover&&this.positioner.hidePopover(),this.panel.scrollTop=0,this.accessibleTrigger&&n(this.containingElement,this.trigger)&&this.accessibleTrigger.focus()}togglePanel=()=>{this.autoOpen&&(this.open?this.hide():this.show())};updateAccessibleTrigger(){if(!this.didLoad)return;let t;this.accessibleTrigger=null,t=this.tetherTo?r(this.tetherTo):Array.from(this.host.querySelectorAll('[slot="trigger"]')).map(r)[0],t&&!t.getAttribute("aria-haspopup")&&(t.setAttribute("aria-haspopup","true"),t.setAttribute("aria-expanded",this.open?"true":"false"),this.accessibleTrigger=t)}handleDocumentKeyDown(t){if("Escape"!==t.key)if("Tab"===t.key)setTimeout((()=>{n(this.containingElement,this.trigger)||this.hide()}));else{if(this.menu&&(this.placement.match(/bottom|top/)&&["ArrowDown","ArrowUp"," "].includes(t.key)||this.placement.match(/right|left/)&&["ArrowRight","ArrowLeft"," "].includes(t.key)))return!this.open||n(this.containingElement,this.trigger,t)?"NANO-DROPDOWN"===this.containingElement.tagName&&this.containingElement.placement.match(/right|left/)&&"NANO-DROPDOWN"===this.trigger.getRootNode()?.host?.tagName?void this.hide():void 0:(t.preventDefault(),this.menu.setFocus(),void(this.focusFirstEle=!0));const i=t.composedPath();if(this.menu&&i.length&&!i.find((t=>t!==this.menu)))return void this.menu.dispatchEvent(new KeyboardEvent(t.type,t))}else this.hide()}handleDocumentMouseDown(t){n(this.containingElement,this.trigger,t)||this.hide()}handleTriggerKeyDown=t=>{(this.placement.match(/bottom|top/)&&["ArrowDown","ArrowUp"," ","Enter"].includes(t.key)||this.placement.match(/right|left/)&&["ArrowRight","ArrowLeft"," ","Enter"].includes(t.key))&&(this.show(),t.preventDefault(),t.stopPropagation(),this.menu&&(this.menu.setFocus(),this.focusFirstEle=!0))};handleTriggerSlotChange=()=>{this.updateAccessibleTrigger()};createPopover(){(this.tetherTo||this.trigger)&&this.positioner&&(this.popover&&(this.open&&this.hide(),this.popover.destroy(),this.popover=null),this.popover=new a(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:()=>{this.open?this.menu&&(this.menu.showActiveElement(),this.focusFirstEle&&(this.menu.setFocus(),this.focusFirstEle=!1)):this.afterHide()}}),this.open&&this.show())}connectedCallback(){this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this),this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this),this.containingElement||(this.containingElement=this.host)}componentDidLoad(){this.didLoad=!0,this.createPopover(),setTimeout((()=>this.updateAccessibleTrigger()),100)}disconnectedCallback(){this.host.isConnected&&this.hide(),this.popover&&this.popover.destroy()}render(){return l(e,{key:"dd4615946390485d5ad05ff0fbf3714474c38b9b",class:"nano-dropdown"},l("div",{key:"9a60642705315c41efaad525f087397b458caf2a",part:"base",id:this.dropdownId,class:{dropdown:!0,"dropdown--open":this.open}},l("span",{key:"861f59e5d50c956d53ce75d16ca5430bfb339d26",part:"trigger",class:"dropdown__trigger",ref:t=>this.trigger=t,onKeyDown:this.handleTriggerKeyDown,onClick:this.togglePanel},l("slot",{key:"55e3a353ffd07ca586468bbc213d415484e4427f",name:"trigger",onSlotchange:this.handleTriggerSlotChange})),l("div",{key:"3ac2f6fde7117cf7421ac53e1786c4da59fd4e6c",ref:t=>this.positioner=t,class:"dropdown__positioner",popover:"manual",id:this.dropdownId+"-positioner"},l("div",{key:"ff5d8d1248c1434aad2c8f042f208ff3d418f1a4",ref:t=>this.panel=t,part:"panel",class:`dropdown__panel ${this.placement.split("-").join(" ")}`,"aria-hidden":!this.open,role:"group"===this.host.getAttribute("role")?"group":"dialog","aria-modal":"group"===this.host.getAttribute("role")?void 0:"true","aria-labelledby":this.dialogTitle?this.labelId:void 0},this.dialogTitle&&l("span",{key:"e71c3b8e09d6b8cf359470872a70da8794a221db",id:this.labelId,class:"dropdown__accessible-title","aria-live":"group"===this.host.getAttribute("role")?void 0:"polite"},this.dialogTitle),l("slot",{key:"a9349e44064f7bbd4b32b3658c203575fe39c804"})))))}static get watchers(){return{open:["handleOpenChange"],tetherTo:["handleTetherToChange"],placement:["handlePopoverOptionsChange"],distance:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"]}}};u.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--width:auto;--border:none;--border-radius:0px;--background:var(--nano-color-neutral-75);--padding:var(--nano-spacing-sm) 0;--overflow:auto;--dropdown-z-index:var(--nano-z-index-dropdown);--min-width:0;--max-height:none;--box-shadow:var(--nano-shadow-l1);--menu-height:calc(100vh - 200px);display:inline-block}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width);border:0;background:none;padding:0;overflow:visible;color:unset}.dropdown__positioner::backdrop{display:none}.dropdown__positioner[popover],.dropdown__positioner:popover-open{inset:unset}@media (width <= 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-inline-size:var(--min-width);inline-size:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentcolor;box-shadow:var(--box-shadow);opacity:0;transition:var(--nano-transition-x-fast) ease opacity, var(--nano-transition-x-fast) ease transform, var(--nano-transition-fast) ease min-block-size;min-block-size:20px;overflow:var(--overflow);max-block-size:var(--max-height);box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(.nano-menu){max-block-size:var(--menu-height)}.dropdown__accessible-title{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}";const f=class{constructor(o){t(this,o),this.nanoFocus=i(this,"nanoFocus",7),this.nanoBlur=i(this,"nanoBlur",7),this.nanoSelect=i(this,"nanoSelect",7)}ignoreMouseEvents=!1;ignoreMouseTimeout;menu;typeToSelect="";typeToSelectTimeout;get el(){return o(this)}get hasFocus(){return this._hasFocus}_hasFocus=!1;type;_type;label;nanoFocus;nanoBlur;nanoSelect;async setFocus(){this.menu?.focus&&this.menu.focus({preventScroll:!0})}async removeFocus(){this.menu?.blur&&this.menu.blur()}async showActiveElement(){this.selectedItem&&this.selectedItem.scrollIntoView({block:"nearest"})}async resetActiveItem(){this.getItems.filter((t=>t.tagName.toLowerCase()===d("nano-option"))).map((t=>t.setAttribute("tabindex","-1")))}get getItems(){let t;if("listbox"===this._type)t=p(this.el,`${d("nano-nav-item")}, ${d("nano-option")}`,"slot");else{const i=this.el.querySelectorAll("[open]");t=h(i[i.length-1]||this.el)}return t.filter((t=>!t.disabled&&!t.hidden))}get activeItem(){const t=s();return this.getItems.find((i=>"0"===i.getAttribute("tabindex")||i===t||i===document.activeElement||i.classList.contains("has-focus")))}get selectedItem(){return this.getItems.find((t=>t.selected))}async setActiveFocusItem(t,i=!0){const o=this.getItems,e=t||o.find((t=>t.selected))||o[0];o.filter((t=>t.tagName.toLowerCase()===d("nano-option"))).map((t=>t.setAttribute("tabindex",t===e?"0":"-1"))),i&&(e?e.setFocus?e.setFocus():e.focus():this.menu.focus())}handleBlur(t){if(!this.hasFocus)return;let i;if(t.key){if("Tab"!==t.key)return;i=s()&&s().closest(this.el.tagName.toLowerCase())===this.el}else i=!!t.composedPath().find((t=>t===this.el));i||(this.resetActiveItem(),this._hasFocus=!1,this.nanoBlur.emit())}handleFocus=()=>{this.setActiveFocusItem(this.selectedItem||this.getItems[0]),this._hasFocus=!0,this.nanoFocus.emit()};handleClick=t=>{const i=t.target.closest(d("nano-nav-item"));i&&!i.disabled&&this.nanoSelect.emit(i)};handleKeyDown=t=>{switch(clearTimeout(this.ignoreMouseTimeout),this.ignoreMouseTimeout=setTimeout((()=>this.ignoreMouseEvents=!1),500),this.ignoreMouseEvents=!0,t.key){case" ":this.activeItem&&(t.stopPropagation(),"BUTTON"!==this.activeItem.nodeName&&this.activeItem.click());break;case"ArrowDown":case"ArrowUp":case"PageDown":case"PageUp":case"Home":case"End":{const i=this.getItems;let o=i.indexOf(this.activeItem);if(i.length)return t.preventDefault(),"ArrowDown"===t.key?o++:"ArrowUp"===t.key?o--:"Home"===t.key||"PageUp"===t.key?o=0:"End"!==t.key&&"PageDown"!==t.key||(o=i.length-1),o<0&&(o=i.length-1),o>i.length-1&&(o=0),this.setActiveFocusItem(i[o]),void(i[o]&&i[o].scrollIntoView({block:"nearest"}));break}}if(" "===t.key||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(this.typeToSelectTimeout),this.typeToSelectTimeout=setTimeout((()=>this.typeToSelect=""),750),this.typeToSelect+=t.key;const i=this.getItems;for(const t of i)if(c(t).toLowerCase().trim().substring(0,this.typeToSelect.length)===this.typeToSelect){this.setActiveFocusItem(t);break}}};handleMouseOver=t=>{const i=t.target,o=i.closest(d("nano-nav-item"))||i.closest(d("nano-option"))||i.closest("a");o&&!this.ignoreMouseEvents&&this.setActiveFocusItem(o)};handleSlotContent=()=>{if(this._type=this.type||null,!this._type){let t,i=0;h(this.el).forEach((o=>{"A"===o.tagName||"link"===o.role?t++:i++})),this._type=t>i?"nav":"menu"}"nav"!==this._type&&(p(this.el,`*:not(${d("nano-nav-item")}, a, ${d("nano-option")}, ${d("nano-dropdown")})`,!0).forEach((t=>{this.getItems.indexOf(t)<0&&t.setAttribute("role","none")})),this.el.querySelectorAll(`a, ${d("nano-dropdown")}`).forEach((t=>{t.setAttribute("role","A"===t.tagName?"menuitem":"group")})))};componentWillLoad(){this.handleSlotContent()}render(){return l(e,{key:"f7c0e55c16e5607f25a4a75847c0defd4b860e17",role:"listbox"===this._type?"group":this._type,class:"nano-menu"},l("div",{key:"3a19c91258abaa6b0a6333a35809172aabf4db43",onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onFocus:this.handleFocus,"aria-label":this.label?this.label:void 0,ref:t=>this.menu=t,part:"base",class:{menu:!0,["menu--"+this._type]:!0,"menu--has-focus":this.hasFocus},tabIndex:-1,role:"group"},l("slot",{key:"75c213c4a744e7edd1826d88a8e391e16bdc091b",onSlotchange:this.handleSlotContent})))}};f.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--padding:var(--nano-spacing-sm) var(--nano-spacing-sm);--font-size:1rem;--background:var(--nano-color-neutral-75);--nav-item-padding:var(--padding);display:block;background:var(--background);color:var(--nano-color-neutral-1400);overflow-x:clip}.menu{font-size:var(--font-size);overscroll-behavior:none;min-inline-size:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(.nano-nav-item,.nano-option,hr,slot)){padding:var(--padding);display:block}";export{u as nano_dropdown,f as nano_menu}

package/dist/nano-components/nano-in-page-nav.entry.js

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{r as t,a,d as e}from"./index-DXvE-U_j.js";import{h as o}from"./renderer-BUaAsDso.js";import{H as n}from"./slot-DYFgWo5f.js";const i=class{constructor(a){t(this,a)}breakpoint=767;stickyHeaders=!0;get el(){return a(this)}isMobile=window.innerWidth<=this.breakpoint;stickyClass="sticky";stuckClass="stuck";stickyObserver;slotCtrl=new n(this,"[default]","mobile","back","accessory");componentDidLoad(){this.updateNavForBreakpoint(),window.addEventListener("resize",this.updateNavForBreakpoint)}updateNavForBreakpoint=()=>{this.isMobile=window.innerWidth<=this.breakpoint,this.isMobile?this.slotCtrl.has("mobile")||this.transformToMobile():this.transformToDesktop(),this.isMobile&&this.stickyHeaders&&this.initStickiness()};initStickiness(){let t=0;const a=this.isMobile&&this.slotCtrl.has("mobile")?this.el.shadowRoot?.querySelectorAll(".details-wrapper"):this.el.querySelectorAll(".details-wrapper");a?.length&&(a.forEach((t=>{t.classList.add(this.stickyClass)})),this.stickyObserver=new IntersectionObserver((a=>{const e=window.pageYOffset||document.documentElement.scrollTop;a.forEach((a=>{const o=a.target;a.intersectionRatio<1?e>t?(o.classList.add(this.stuckClass),o.classList.remove("hidden")):o.classList.add("hidden"):(o.classList.remove(this.stuckClass),o.classList.remove("hidden"))})),t=e<=0?0:e}),{threshold:[1],root:this.el.closest("nav"),rootMargin:"0px 0px 0px 0px"}),a.forEach((t=>{this.stickyObserver.observe(t)})))}disconnectedCallback(){this.stickyObserver&&this.stickyObserver.disconnect(),this.updateNavForBreakpoint&&window.removeEventListener("resize",this.updateNavForBreakpoint)}transformToMobile(){const t=this.el.shadowRoot?.querySelector("slot:not([name])");(t?.assignedElements({flatten:!0})?.filter((t=>"UL"===t.tagName))||[]).forEach((t=>{if(!(t instanceof HTMLUListElement))return;t.querySelectorAll(":scope > li").forEach((t=>{const a=t.querySelector(":scope > a"),e=t.querySelector(":scope > ul");if(a&&e&&!t.querySelector(":scope > nano-details")){const o=this.createDetails(a.textContent?.trim()||"",e,a.attributes);a.remove(),t.prepend(o)}}));const a=t.parentElement;if(!a)return;a.removeChild(t);const e=this.createDetails("Menu",t);e.classList.add("details-wrapper"),e.appendChild(t),a.appendChild(e)}))}createDetails(t,a,e){const o=document.createElement("nano-details");return o.setAttribute("label",t),e&&Array.from(e).forEach((t=>{o.setAttribute(`data-link-${t.name}`,t.value)})),o.appendChild(a),o}transformToDesktop(){const t=this.el.shadowRoot?.querySelector("slot:not([name])");(t?.assignedElements({flatten:!0})?.filter((t=>"nano-details"===t.tagName.toLowerCase()))||[]).forEach((t=>{if(!(t instanceof HTMLElement))return;t.querySelector("ul").querySelectorAll(":scope > li").forEach((t=>{const a=t.querySelector("nano-details");if(!a)return;const e=a.querySelector("ul"),o=a?.getAttribute("label"),n=a?.getAttribute("data-href")||"#";if(e&&o){const i=document.createElement("a");i.textContent=o,i.href=n,Array.from(a.attributes).forEach((t=>{t.name.startsWith("data-link-")&&i.setAttribute(t.name.replace("data-link-",""),t.value)})),t.prepend(i),t.appendChild(e),a.remove()}}));const a=t.parentElement;if(!a)return;a.removeChild(t);const e=t.querySelector("ul");e&&(a.appendChild(e),t.remove())}))}render(){return o(e,{key:"92552373d8a09fb223e32246547a8d134cb09da2",class:"nano-in-page-nav"},o("nav",{key:"6fa0d66432e09b4a3e744f2d9e6c90d2d589f1b2",part:"root"},(this.slotCtrl.has("back")||this.slotCtrl.has("accessory"))&&o("div",{key:"1c596d58e78b17a8ba5e408a5156a6be59cf1765",class:"header"},o("slot",{key:"9d6b924c2a24e85681564744a3667eb23692ae07",name:"back"}),o("slot",{key:"c3f9a3a6f2879054df7b50074872a3341d02f0f5",name:"accessory"})),this.slotCtrl.has("mobile")&&this.isMobile?o("nano-details",{label:"Menu",class:this.stickyHeaders?`details-wrapper ${this.stickyClass}`:"details-wrapper"},o("slot",{name:"mobile"})):o("slot",null)))}};i.style=':host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host nav{background-color:var(--color-bg);padding:0}:host nav:has(nano-details){padding:0}:host .details-wrapper{--padding:0;--btn-bg-color:transparent;--btn-bg-color--hover:transparent;--btn-text-color:var(--color-text);border:none}:host .details-wrapper::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);padding:var(--spacing-l2)}:host .details-wrapper[open]::part(header){background-color:var(--nano-color-primary-75)}:host .details-wrapper::part(content){padding:0}:host .details-wrapper::part(body){padding:0}:host .header{padding:var(--spacing-l2) var(--spacing-l2) 0;display:flex;flex-direction:column;gap:var(--spacing-l2);font-size:var(--font-size)}:host .header ::slotted(a[slot=back]),:host .header::slotted(a[slot=back]){display:flex !important;align-items:center !important;padding:0 !important;margin:0;gap:var(--spacing-l3) !important;cursor:pointer}:host .header ::slotted(a[slot=back])::before,:host .header::slotted(a[slot=back])::before{content:"";display:inline-block;background-size:cover;inline-size:1rem;block-size:1rem;background-color:var(--color-primary);-webkit-mask-image:var(--nano-component-icon-chevron);mask-image:var(--nano-component-icon-chevron);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transform-origin:center;rotate:calc(180deg * var(--flip-icon-ltr))}:host nav:has(.details-wrapper[open]){box-shadow:var(--nano-shadow-l1)}:host .details-wrapper.sticky.stuck[open]::part(header){z-index:var(--nano-z-index-menubar);inset-block-start:0;position:sticky;box-shadow:var(--nano-shadow-l1);padding:var(--spacing-l2)}';export{i as nano_in_page_nav}
+import{r as t,a,d as e}from"./index-DXvE-U_j.js";import{h as o}from"./renderer-BUaAsDso.js";import{H as n}from"./slot-Db9r1aLM.js";const i=class{constructor(a){t(this,a)}breakpoint=767;stickyHeaders=!0;get el(){return a(this)}isMobile=window.innerWidth<=this.breakpoint;stickyClass="sticky";stuckClass="stuck";stickyObserver;slotCtrl=new n(this,"[default]","mobile","back","accessory");componentDidLoad(){this.updateNavForBreakpoint(),window.addEventListener("resize",this.updateNavForBreakpoint)}updateNavForBreakpoint=()=>{this.isMobile=window.innerWidth<=this.breakpoint,this.isMobile?this.slotCtrl.has("mobile")||this.transformToMobile():this.transformToDesktop(),this.isMobile&&this.stickyHeaders&&this.initStickiness()};initStickiness(){let t=0;const a=this.isMobile&&this.slotCtrl.has("mobile")?this.el.shadowRoot?.querySelectorAll(".details-wrapper"):this.el.querySelectorAll(".details-wrapper");a?.length&&(a.forEach((t=>{t.classList.add(this.stickyClass)})),this.stickyObserver=new IntersectionObserver((a=>{const e=window.pageYOffset||document.documentElement.scrollTop;a.forEach((a=>{const o=a.target;a.intersectionRatio<1?e>t?(o.classList.add(this.stuckClass),o.classList.remove("hidden")):o.classList.add("hidden"):(o.classList.remove(this.stuckClass),o.classList.remove("hidden"))})),t=e<=0?0:e}),{threshold:[1],root:this.el.closest("nav"),rootMargin:"0px 0px 0px 0px"}),a.forEach((t=>{this.stickyObserver.observe(t)})))}disconnectedCallback(){this.stickyObserver&&this.stickyObserver.disconnect(),this.updateNavForBreakpoint&&window.removeEventListener("resize",this.updateNavForBreakpoint)}transformToMobile(){const t=this.el.shadowRoot?.querySelector("slot:not([name])");(t?.assignedElements({flatten:!0})?.filter((t=>"UL"===t.tagName))||[]).forEach((t=>{if(!(t instanceof HTMLUListElement))return;t.querySelectorAll(":scope > li").forEach((t=>{const a=t.querySelector(":scope > a"),e=t.querySelector(":scope > ul");if(a&&e&&!t.querySelector(":scope > nano-details")){const o=this.createDetails(a.textContent?.trim()||"",e,a.attributes);a.remove(),t.prepend(o)}}));const a=t.parentElement;if(!a)return;a.removeChild(t);const e=this.createDetails("Menu",t);e.classList.add("details-wrapper"),e.appendChild(t),a.appendChild(e)}))}createDetails(t,a,e){const o=document.createElement("nano-details");return o.setAttribute("label",t),e&&Array.from(e).forEach((t=>{o.setAttribute(`data-link-${t.name}`,t.value)})),o.appendChild(a),o}transformToDesktop(){const t=this.el.shadowRoot?.querySelector("slot:not([name])");(t?.assignedElements({flatten:!0})?.filter((t=>"nano-details"===t.tagName.toLowerCase()))||[]).forEach((t=>{if(!(t instanceof HTMLElement))return;t.querySelector("ul").querySelectorAll(":scope > li").forEach((t=>{const a=t.querySelector("nano-details");if(!a)return;const e=a.querySelector("ul"),o=a?.getAttribute("label"),n=a?.getAttribute("data-href")||"#";if(e&&o){const i=document.createElement("a");i.textContent=o,i.href=n,Array.from(a.attributes).forEach((t=>{t.name.startsWith("data-link-")&&i.setAttribute(t.name.replace("data-link-",""),t.value)})),t.prepend(i),t.appendChild(e),a.remove()}}));const a=t.parentElement;if(!a)return;a.removeChild(t);const e=t.querySelector("ul");e&&(a.appendChild(e),t.remove())}))}render(){return o(e,{key:"92552373d8a09fb223e32246547a8d134cb09da2",class:"nano-in-page-nav"},o("nav",{key:"6fa0d66432e09b4a3e744f2d9e6c90d2d589f1b2",part:"root"},(this.slotCtrl.has("back")||this.slotCtrl.has("accessory"))&&o("div",{key:"1c596d58e78b17a8ba5e408a5156a6be59cf1765",class:"header"},o("slot",{key:"9d6b924c2a24e85681564744a3667eb23692ae07",name:"back"}),o("slot",{key:"c3f9a3a6f2879054df7b50074872a3341d02f0f5",name:"accessory"})),this.slotCtrl.has("mobile")&&this.isMobile?o("nano-details",{label:"Menu",class:this.stickyHeaders?`details-wrapper ${this.stickyClass}`:"details-wrapper"},o("slot",{name:"mobile"})):o("slot",null)))}};i.style=':host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host nav{background-color:var(--color-bg);padding:0}:host nav:has(nano-details){padding:0}:host .details-wrapper{--padding:0;--btn-bg-color:transparent;--btn-bg-color--hover:transparent;--btn-text-color:var(--color-text);border:none}:host .details-wrapper::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);padding:var(--spacing-l2)}:host .details-wrapper[open]::part(header){background-color:var(--nano-color-primary-75)}:host .details-wrapper::part(content){padding:0}:host .details-wrapper::part(body){padding:0}:host .header{padding:var(--spacing-l2) var(--spacing-l2) 0;display:flex;flex-direction:column;gap:var(--spacing-l2);font-size:var(--font-size)}:host .header ::slotted(a[slot=back]),:host .header::slotted(a[slot=back]){display:flex !important;align-items:center !important;padding:0 !important;margin:0;gap:var(--spacing-l3) !important;cursor:pointer}:host .header ::slotted(a[slot=back])::before,:host .header::slotted(a[slot=back])::before{content:"";display:inline-block;background-size:cover;inline-size:1rem;block-size:1rem;background-color:var(--color-primary);-webkit-mask-image:var(--nano-component-icon-chevron);mask-image:var(--nano-component-icon-chevron);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transform-origin:center;rotate:calc(180deg * var(--flip-icon-ltr))}:host nav:has(.details-wrapper[open]){box-shadow:var(--nano-shadow-l1)}:host .details-wrapper.sticky.stuck[open]::part(header){z-index:var(--nano-z-index-menubar);inset-block-start:0;position:sticky;box-shadow:var(--nano-shadow-l1);padding:var(--spacing-l2)}';export{i as nano_in_page_nav}

package/dist/nano-components/nano-nav-item.entry.js

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{r as n,c as t,a as e,d as a}from"./index-DXvE-U_j.js";import{g as i}from"./dom-Cb7FUtXp.js";import{g as o}from"./tabbable-C4l-rYq9.js";import{t as s,h as r}from"./renderer-BUaAsDso.js";import{H as d}from"./slot-DYFgWo5f.js";import{f as c}from"./active-element-C1pBwzyj.js";const l=(n,t)=>{const e={className:"",show:!0,showDisplay:"block",showProp:"classList",timeout:1e3,...t};return new Promise((t=>{const a=i=>{i.target!==n&&!i.composedPath().some((n=>n===i.target))||e.transitionProp&&!e.transitionProp.includes(i.propertyName)||(n.dataset.displayTransition="true",n.removeEventListener("transitionend",a),t("shown"))},i=a=>{a.target!==n&&!a.composedPath().some((n=>n===a.target))||e.transitionProp&&!e.transitionProp.includes(a.propertyName)||(n.style.display="none",n.dataset.displayTransition="false",n.removeEventListener("transitionend",i),t("hidden"))};e.show?(n.addEventListener("transitionend",a),n.style.display=e.showDisplay,setTimeout((()=>n[e.showProp].add(e.className)),50)):(n.addEventListener("transitionend",i),n[e.showProp].remove(e.className)),e.timeout&&setTimeout((()=>{e.show&&"true"!==n.dataset.displayTransition?(n.dataset.displayTransition="true",n.removeEventListener("transitionend",a),t("shown")):e.show||"false"===n.dataset.displayTransition||(n.style.display="none",n.dataset.displayTransition="false",n.removeEventListener("transitionend",i),t("hidden"))}),e.timeout)}))},h=class{constructor(e){n(this,e),this.nanoClose=t(this,"nanoClose",7),this.nanoOpen=t(this,"nanoOpen",7),this.nanoOpening=t(this,"nanoOpening",7),this.nanoClosing=t(this,"nanoClosing",7)}secondaryDiv;slotCtrl=new d(this,"secondary","close-button");controlElement;get host(){return e(this)}didOpen=!1;isInMenuDrawer=!1;href=null;target="_self";disabled=!1;open=!1;selected=!1;checkbox=!1;closeOnBlur=!0;notification=!1;nanoClose;nanoOpen;nanoOpening;nanoClosing;async setFocus(){this.controlElement&&this.controlElement.focus()}openChange(){this.slotCtrl.has("secondary")&&(this.open?this.openSecondary():this.closeSecondary())}didOpenChange(){if(!this.slotCtrl.has("secondary"))return;if(!this.didOpen)return c(this.host,this.controlElement)&&this.controlElement.focus({preventScroll:!0}),void this.nanoClose.emit({secondaryMenu:this.secondaryDiv});const n=new window.IntersectionObserver((t=>{t[0].boundingClientRect.top<0&&this.secondaryDiv.scrollIntoView({behavior:"smooth"}),n.disconnect()}),{threshold:1});n.observe(this.secondaryDiv),this.secondaryDiv.focus({preventScroll:!0});const t=o(this.secondaryDiv,!0);t[0]&&t[0].focus({preventScroll:!0}),this.nanoOpen.emit({secondaryMenu:this.secondaryDiv})}handleClose(n){this.didOpen&&this.slotCtrl.has("secondary")&&this.closeOnBlur&&(n.key&&"Escape"===n.key?this.closeSecondary():n.composedPath().some((n=>n===this.secondaryDiv))||this.closeSecondary())}closeSecondary=async()=>{this.slotCtrl.has("secondary")&&this.open&&(this.open=!1,await l(this.secondaryDiv,{className:"modal--open",showProp:"part",show:!1}),this.nanoClosing.emit({secondaryMenu:this.secondaryDiv}),this.didOpen=!1)};openSecondary=async()=>{this.slotCtrl.has("secondary")&&!this.open&&(this.open=!0,await l(this.secondaryDiv,{className:"modal--open",showProp:"part",show:!0}),this.nanoOpening.emit({secondaryMenu:this.secondaryDiv}),this.didOpen=!0)};toggleSecondary=()=>{this.slotCtrl.has("secondary")&&(this.didOpen?this.closeSecondary():this.openSecondary())};handleClick=()=>{this.disabled||(this.slotCtrl.has("secondary")?this.toggleSecondary():this.checkbox&&(this.selected=!this.selected))};handleDefaultSlotChange=()=>{const n=i(this.host,"a")[0];if(n){this.href=n.getAttribute("href");const t=document.createElement("span");n.childNodes.forEach((n=>{t.append(n)})),this.host.append(t),n.remove()}};connectedCallback(){this.handleDefaultSlotChange(),this.isInMenuDrawer=!!this.host.closest(s("nano-menu-drawer"))}componentDidLoad(){this.openChange()}render(){return r(a,{key:"7554eb7a4a66fc4f899b40b35265245a3be931f8",class:{"nano-menu-drawer":this.isInMenuDrawer,"nano-nav-item":!0,disabled:this.disabled},role:this.host.closest('[role="menu"]')?"menuitem":void 0,"aria-disabled":this.disabled?"true":void 0},r("div",{key:"4bf288ec9f9162bb746b70b085fde42b871f93fb",class:{navitem:!0,"navitem--open":this.open,"navitem--active":this.selected},part:"trigger-wrapper"},this.href&&!this.disabled&&r("a",{key:"a9bf5adf3da060452ed58e2c6e1eba45168815a3",part:"trigger trigger--anchor",target:this.target,ref:n=>this.controlElement=n,href:this.href,class:{navitem__trigger:!0,notification:this.notification}},r("slot",{key:"47cdd2e84dd51f236675351c599d8e9f9bf66ede",name:"icon-start"}),r("span",{key:"a15d804a252ed532501fb08536ed5ce8a3b42e47",class:"navitem__label",part:"label"},r("slot",{key:"ea37d813d0fd15bd457930b61d06cd97d64fce35",onSlotchange:this.handleDefaultSlotChange})),r("slot",{key:"384a3212fba3d0cc3d488974dcaf53c23c3942e1",name:"icon-end"})),(!this.href||this.disabled)&&r("button",{key:"698c4beb9cddb3b2037db40b5c9e33a276dad060",role:this.checkbox?"checkbox":void 0,"aria-checked":this.checkbox?this.selected.toString():void 0,part:"trigger trigger--button",ref:n=>this.controlElement=n,onClick:this.handleClick,disabled:this.disabled,class:{navitem__trigger:!0,notification:this.notification}},r("slot",{key:"c01a71dfaeb867d2792146110fdde1dd134b7f71",name:"icon-start"}),r("span",{key:"6a48071ba10f1407350e87958ed491f704714ea8",class:"navitem__label",part:"label"},r("slot",{key:"246f807c0a03a8805fea87023f48de2f5fa7a7a0",onSlotchange:this.handleDefaultSlotChange})),r("slot",{key:"6a246213800a4425464ac41aefe9362e327d412f",name:"icon-end"})),this.slotCtrl.has("secondary")&&!this.disabled&&r("div",{key:"8928988fd43de734785801c9fc7707fb7efa33c3",part:"modal",class:{navitem__modal:!0,"navitem__modal--open":this.didOpen},ref:n=>this.secondaryDiv=n,tabIndex:-1},r("div",{key:"eca197afa8cb297eeafc4b7a55ffb6fb288c498c",class:"navitem__modal-content",part:"modal-content "+(this.didOpen?"modal-content--open":"")},this.slotCtrl.has("close-button")&&r("div",{key:"5a774cf15677b3848f80c0cf5bee87da44e3ca04",part:"close-button",onClick:this.closeSecondary},r("slot",{key:"57a08ef1239b6c29241524e3c7ac977c78c910d5",name:"close-button"})),r("slot",{key:"6c35ed89b61461fcc294cddc022c57255558a63b",name:"secondary"})),r("div",{key:"163003649197f1ed341836e73e7acd50c7abc640",class:"navitem__modal-mask",onClick:this.closeSecondary,part:"modal-mask "+(this.didOpen?"modal-mask--open":"")}))))}static get watchers(){return{open:["openChange"],didOpen:["didOpenChange"]}}};h.style=':host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:contents}.navitem{background:inherit;color:inherit}a,button{all:unset;color:inherit;text-decoration:inherit;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:var(--padding);gap:var(--nano-spacing-md);inline-size:100%;box-sizing:border-box;background:inherit}a:hover,a:focus,a:active,button:hover,button:focus,button:active{color:inherit}a:focus-visible,button:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}a[disabled],button[disabled]{opacity:0.5;cursor:not-allowed}.navitem__label{margin-inline-end:auto}.navitem__modal{all:unset;display:none;position:absolute;color:initial;opacity:0;transition:var(--nano-transition-fast) ease}.navitem--open .navitem__modal{opacity:1}::slotted([slot=close-button]){all:unset}::slotted([slot=close-button]):focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{padding-block:calc(var(--padding-top) / 2) calc(var(--padding-bottom) / 2);padding-inline:var(--padding-start) 0;display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;inline-size:100%}:host(.nano-menu-drawer) .navitem__label{padding-inline:0 var(--padding-end);text-align:start;flex:0 1 auto;min-inline-size:130px;inline-size:130px}:host(.nano-menu-drawer)::slotted(.nano-icon[slot=icon-start]),:host(.nano-menu-drawer) ::slotted(.nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0;font-size:var(--icon-size);inline-size:var(--icon-size);flex:0 0 var(--icon-size)}:host(.nano-menu-drawer)::slotted(.nano-icon[slot=icon-end]),:host(.nano-menu-drawer) ::slotted(.nano-icon[slot=icon-end]){padding:0 var(--padding-end) 0 0;font-size:10px;flex:0 0 20px;min-inline-size:20px}:host(.nano-menu-drawer) .navitem__modal{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);block-size:100vh;inset-inline:auto 0;inset-block:0;transform:translateX(0);z-index:-1;transition:transform 0.3s ease, opacity 0.2s ease;overflow-y:auto;inline-size:var(--secondary-width, 400px);max-inline-size:62vw;opacity:1;padding-inline:var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));padding-block:var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom))}:host(.nano-menu-drawer) .navitem__modal:focus{outline:none}.navitem--open :host(.nano-menu-drawer) .navitem__modal{transform:translateX(100%)}:host(.nano-menu-drawer) .notification{position:relative}:host(.nano-menu-drawer) .notification::after{content:"";display:block;position:absolute;inline-size:6px;block-size:6px;background-color:#ef4135;inset-inline-start:10px;inset-block-start:7px;border-radius:50%}@media (width >= 52em){:host(.nano-menu-drawer) .notification::after{inline-size:7px;block-size:7px;inset-inline-start:8px;inset-block-start:5px}}:host(.nano-menu-drawer[dir=rtl]) .navitem__modal{transform:translateX(0%)}.navitem--open :host(.nano-menu-drawer[dir=rtl]) .navitem__modal{transform:translateX(-100%);opacity:1}';export{h as nano_nav_item}
+import{r as n,c as t,a as e,d as a}from"./index-DXvE-U_j.js";import{g as i}from"./dom-Cb7FUtXp.js";import{g as o}from"./tabbable-C4l-rYq9.js";import{t as s,h as r}from"./renderer-BUaAsDso.js";import{H as d}from"./slot-Db9r1aLM.js";import{f as c}from"./active-element-C1pBwzyj.js";const l=(n,t)=>{const e={className:"",show:!0,showDisplay:"block",showProp:"classList",timeout:1e3,...t};return new Promise((t=>{const a=i=>{i.target!==n&&!i.composedPath().some((n=>n===i.target))||e.transitionProp&&!e.transitionProp.includes(i.propertyName)||(n.dataset.displayTransition="true",n.removeEventListener("transitionend",a),t("shown"))},i=a=>{a.target!==n&&!a.composedPath().some((n=>n===a.target))||e.transitionProp&&!e.transitionProp.includes(a.propertyName)||(n.style.display="none",n.dataset.displayTransition="false",n.removeEventListener("transitionend",i),t("hidden"))};e.show?(n.addEventListener("transitionend",a),n.style.display=e.showDisplay,setTimeout((()=>n[e.showProp].add(e.className)),50)):(n.addEventListener("transitionend",i),n[e.showProp].remove(e.className)),e.timeout&&setTimeout((()=>{e.show&&"true"!==n.dataset.displayTransition?(n.dataset.displayTransition="true",n.removeEventListener("transitionend",a),t("shown")):e.show||"false"===n.dataset.displayTransition||(n.style.display="none",n.dataset.displayTransition="false",n.removeEventListener("transitionend",i),t("hidden"))}),e.timeout)}))},h=class{constructor(e){n(this,e),this.nanoClose=t(this,"nanoClose",7),this.nanoOpen=t(this,"nanoOpen",7),this.nanoOpening=t(this,"nanoOpening",7),this.nanoClosing=t(this,"nanoClosing",7)}secondaryDiv;slotCtrl=new d(this,"secondary","close-button");controlElement;get host(){return e(this)}didOpen=!1;isInMenuDrawer=!1;href=null;target="_self";disabled=!1;open=!1;selected=!1;checkbox=!1;closeOnBlur=!0;notification=!1;nanoClose;nanoOpen;nanoOpening;nanoClosing;async setFocus(){this.controlElement&&this.controlElement.focus()}openChange(){this.slotCtrl.has("secondary")&&(this.open?this.openSecondary():this.closeSecondary())}didOpenChange(){if(!this.slotCtrl.has("secondary"))return;if(!this.didOpen)return c(this.host,this.controlElement)&&this.controlElement.focus({preventScroll:!0}),void this.nanoClose.emit({secondaryMenu:this.secondaryDiv});const n=new window.IntersectionObserver((t=>{t[0].boundingClientRect.top<0&&this.secondaryDiv.scrollIntoView({behavior:"smooth"}),n.disconnect()}),{threshold:1});n.observe(this.secondaryDiv),this.secondaryDiv.focus({preventScroll:!0});const t=o(this.secondaryDiv,!0);t[0]&&t[0].focus({preventScroll:!0}),this.nanoOpen.emit({secondaryMenu:this.secondaryDiv})}handleClose(n){this.didOpen&&this.slotCtrl.has("secondary")&&this.closeOnBlur&&(n.key&&"Escape"===n.key?this.closeSecondary():n.composedPath().some((n=>n===this.secondaryDiv))||this.closeSecondary())}closeSecondary=async()=>{this.slotCtrl.has("secondary")&&this.open&&(this.open=!1,await l(this.secondaryDiv,{className:"modal--open",showProp:"part",show:!1}),this.nanoClosing.emit({secondaryMenu:this.secondaryDiv}),this.didOpen=!1)};openSecondary=async()=>{this.slotCtrl.has("secondary")&&!this.open&&(this.open=!0,await l(this.secondaryDiv,{className:"modal--open",showProp:"part",show:!0}),this.nanoOpening.emit({secondaryMenu:this.secondaryDiv}),this.didOpen=!0)};toggleSecondary=()=>{this.slotCtrl.has("secondary")&&(this.didOpen?this.closeSecondary():this.openSecondary())};handleClick=()=>{this.disabled||(this.slotCtrl.has("secondary")?this.toggleSecondary():this.checkbox&&(this.selected=!this.selected))};handleDefaultSlotChange=()=>{const n=i(this.host,"a")[0];if(n){this.href=n.getAttribute("href");const t=document.createElement("span");n.childNodes.forEach((n=>{t.append(n)})),this.host.append(t),n.remove()}};connectedCallback(){this.handleDefaultSlotChange(),this.isInMenuDrawer=!!this.host.closest(s("nano-menu-drawer"))}componentDidLoad(){this.openChange()}render(){return r(a,{key:"7554eb7a4a66fc4f899b40b35265245a3be931f8",class:{"nano-menu-drawer":this.isInMenuDrawer,"nano-nav-item":!0,disabled:this.disabled},role:this.host.closest('[role="menu"]')?"menuitem":void 0,"aria-disabled":this.disabled?"true":void 0},r("div",{key:"4bf288ec9f9162bb746b70b085fde42b871f93fb",class:{navitem:!0,"navitem--open":this.open,"navitem--active":this.selected},part:"trigger-wrapper"},this.href&&!this.disabled&&r("a",{key:"a9bf5adf3da060452ed58e2c6e1eba45168815a3",part:"trigger trigger--anchor",target:this.target,ref:n=>this.controlElement=n,href:this.href,class:{navitem__trigger:!0,notification:this.notification}},r("slot",{key:"47cdd2e84dd51f236675351c599d8e9f9bf66ede",name:"icon-start"}),r("span",{key:"a15d804a252ed532501fb08536ed5ce8a3b42e47",class:"navitem__label",part:"label"},r("slot",{key:"ea37d813d0fd15bd457930b61d06cd97d64fce35",onSlotchange:this.handleDefaultSlotChange})),r("slot",{key:"384a3212fba3d0cc3d488974dcaf53c23c3942e1",name:"icon-end"})),(!this.href||this.disabled)&&r("button",{key:"698c4beb9cddb3b2037db40b5c9e33a276dad060",role:this.checkbox?"checkbox":void 0,"aria-checked":this.checkbox?this.selected.toString():void 0,part:"trigger trigger--button",ref:n=>this.controlElement=n,onClick:this.handleClick,disabled:this.disabled,class:{navitem__trigger:!0,notification:this.notification}},r("slot",{key:"c01a71dfaeb867d2792146110fdde1dd134b7f71",name:"icon-start"}),r("span",{key:"6a48071ba10f1407350e87958ed491f704714ea8",class:"navitem__label",part:"label"},r("slot",{key:"246f807c0a03a8805fea87023f48de2f5fa7a7a0",onSlotchange:this.handleDefaultSlotChange})),r("slot",{key:"6a246213800a4425464ac41aefe9362e327d412f",name:"icon-end"})),this.slotCtrl.has("secondary")&&!this.disabled&&r("div",{key:"8928988fd43de734785801c9fc7707fb7efa33c3",part:"modal",class:{navitem__modal:!0,"navitem__modal--open":this.didOpen},ref:n=>this.secondaryDiv=n,tabIndex:-1},r("div",{key:"eca197afa8cb297eeafc4b7a55ffb6fb288c498c",class:"navitem__modal-content",part:"modal-content "+(this.didOpen?"modal-content--open":"")},this.slotCtrl.has("close-button")&&r("div",{key:"5a774cf15677b3848f80c0cf5bee87da44e3ca04",part:"close-button",onClick:this.closeSecondary},r("slot",{key:"57a08ef1239b6c29241524e3c7ac977c78c910d5",name:"close-button"})),r("slot",{key:"6c35ed89b61461fcc294cddc022c57255558a63b",name:"secondary"})),r("div",{key:"163003649197f1ed341836e73e7acd50c7abc640",class:"navitem__modal-mask",onClick:this.closeSecondary,part:"modal-mask "+(this.didOpen?"modal-mask--open":"")}))))}static get watchers(){return{open:["openChange"],didOpen:["didOpenChange"]}}};h.style=':host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:contents}.navitem{background:inherit;color:inherit}a,button{all:unset;color:inherit;text-decoration:inherit;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:var(--padding);gap:var(--nano-spacing-md);inline-size:100%;box-sizing:border-box;background:inherit}a:hover,a:focus,a:active,button:hover,button:focus,button:active{color:inherit}a:focus-visible,button:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}a[disabled],button[disabled]{opacity:0.5;cursor:not-allowed}.navitem__label{margin-inline-end:auto}.navitem__modal{all:unset;display:none;position:absolute;color:initial;opacity:0;transition:var(--nano-transition-fast) ease}.navitem--open .navitem__modal{opacity:1}::slotted([slot=close-button]){all:unset}::slotted([slot=close-button]):focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{padding-block:calc(var(--padding-top) / 2) calc(var(--padding-bottom) / 2);padding-inline:var(--padding-start) 0;display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;inline-size:100%}:host(.nano-menu-drawer) .navitem__label{padding-inline:0 var(--padding-end);text-align:start;flex:0 1 auto;min-inline-size:130px;inline-size:130px}:host(.nano-menu-drawer)::slotted(.nano-icon[slot=icon-start]),:host(.nano-menu-drawer) ::slotted(.nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0;font-size:var(--icon-size);inline-size:var(--icon-size);flex:0 0 var(--icon-size)}:host(.nano-menu-drawer)::slotted(.nano-icon[slot=icon-end]),:host(.nano-menu-drawer) ::slotted(.nano-icon[slot=icon-end]){padding:0 var(--padding-end) 0 0;font-size:10px;flex:0 0 20px;min-inline-size:20px}:host(.nano-menu-drawer) .navitem__modal{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);block-size:100vh;inset-inline:auto 0;inset-block:0;transform:translateX(0);z-index:-1;transition:transform 0.3s ease, opacity 0.2s ease;overflow-y:auto;inline-size:var(--secondary-width, 400px);max-inline-size:62vw;opacity:1;padding-inline:var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));padding-block:var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom))}:host(.nano-menu-drawer) .navitem__modal:focus{outline:none}.navitem--open :host(.nano-menu-drawer) .navitem__modal{transform:translateX(100%)}:host(.nano-menu-drawer) .notification{position:relative}:host(.nano-menu-drawer) .notification::after{content:"";display:block;position:absolute;inline-size:6px;block-size:6px;background-color:#ef4135;inset-inline-start:10px;inset-block-start:7px;border-radius:50%}@media (width >= 52em){:host(.nano-menu-drawer) .notification::after{inline-size:7px;block-size:7px;inset-inline-start:8px;inset-block-start:5px}}:host(.nano-menu-drawer[dir=rtl]) .navitem__modal{transform:translateX(0%)}.navitem--open :host(.nano-menu-drawer[dir=rtl]) .navitem__modal{transform:translateX(-100%);opacity:1}';export{h as nano_nav_item}

package/dist/nano-components/slot-Db9r1aLM.js

@@ -0,0 +1,4 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import{a as t,k as s}from"./index-DXvE-U_j.js";function h(t){const s=t.getRootNode();return s.host?s.host.innerText:t.innerText}class o{host;slotNames=[];constructor(s,...h){this.slotNames=h;const o=s.componentWillLoad;s.componentWillLoad=()=>{this.host=t(s),o&&o.call(s)};const i=s.connectedCallback;s.connectedCallback=()=>{this.host=t(s),this.hostConnected(),i&&i.call(s)};const e=s.disconnectedCallback;s.disconnectedCallback=()=>{this.hostDisconnected(),this.host=void 0,e&&e.call(s)}}hasDefaultSlot(){return!!this.host&&[...this.host.childNodes].some((t=>t.nodeType===Node.TEXT_NODE&&""!==t.textContent.trim()||t.nodeType===Node.ELEMENT_NODE&&!t.hasAttribute("slot")))}hasNamedSlot(t){return!!this.host&&!!this.host.querySelector(`[slot="${t}"]`)}has(t){return"[default]"===t?this.hasDefaultSlot():this.hasNamedSlot(t)}hostConnected(){this.host.shadowRoot.addEventListener("slotchange",this.handleSlotChange)}hostDisconnected(){this.host&&this.host.shadowRoot.removeEventListener("slotchange",this.handleSlotChange)}handleSlotChange=t=>{const h=t.target;(this.slotNames.includes("[default]")&&!h.name||h.name&&this.slotNames.includes(h.name))&&s(this.host)}}export{o as H,h as g}