@nanoporetech-digital/components 5.0.0 → 5.1.0

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-07-07T11:52:57",
+  "timestamp": "2023-07-12T11:02:00",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.23.0",
@@ -5439,6 +5439,11 @@
           "annotation": "prop",
           "docs": "Defaults to var(--nano-layer-index-dropdown, 300);"
         },
+        {
+          "name": "--max-menu-height",
+          "annotation": "prop",
+          "docs": "max height of a slotted menu. defaults to 50vh"
+        },
         {
           "name": "--min-width",
           "annotation": "prop",

package/hydrate/index.js

@@ -15694,7 +15694,7 @@ class Popover {
   }
 }
 
-const dropdownCss = "/*!@:host*/.sc-nano-dropdown-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-dropdown,*.sc-nano-dropdown::before,*.sc-nano-dropdown::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-dropdown{display:none !important}/*!@:host*/.sc-nano-dropdown-h{--width:auto;--border:var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)));--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background:var(--nano-layer-bg, #fff);--padding:10px 0;--overflow:hidden;--dropdown-z-index:var(--nano-layer-index-dropdown, 300);--min-width:0;--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--menu-height:var(--max-menu-height, 50vh);display:flex}/*!@.dropdown*/.dropdown.sc-nano-dropdown{position:relative}/*!@.dropdown__trigger*/.dropdown__trigger.sc-nano-dropdown{display:block}/*!@.dropdown__positioner*/.dropdown__positioner.sc-nano-dropdown{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width)}@media (max-width: 35.9375em){/*!@.dropdown__positioner*/.dropdown__positioner.sc-nano-dropdown{z-index:100}}/*!@.dropdown__panel*/.dropdown__panel.sc-nano-dropdown{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:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;min-block-size:20px;overflow:var(--overflow);box-sizing:content-box !important}/*!@.dropdown__panel.loading*/.dropdown__panel.loading.sc-nano-dropdown{overflow-y:hidden}/*!@.dropdown__panel.top*/.dropdown__panel.top.sc-nano-dropdown{transform:translateY(-20px) translateZ(0)}/*!@.dropdown__panel.bottom*/.dropdown__panel.bottom.sc-nano-dropdown{transform:translateY(20px) translateZ(0)}/*!@.dropdown__positioner.popover-visible .dropdown__panel*/.dropdown__positioner.popover-visible.sc-nano-dropdown .dropdown__panel.sc-nano-dropdown{opacity:1;transform:translateY(0) translateZ(0)}/*!@.dropdown__panel ::slotted(nano-menu)*/.dropdown__panel .sc-nano-dropdown-s>nano-menu{max-block-size:var(--menu-height)}/*!@.dropdown__accessible-title*/.dropdown__accessible-title.sc-nano-dropdown{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";
+const dropdownCss = "/*!@:host*/.sc-nano-dropdown-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-dropdown,*.sc-nano-dropdown::before,*.sc-nano-dropdown::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-dropdown{display:none !important}/*!@:host*/.sc-nano-dropdown-h{--width:auto;--border:var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)));--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background:var(--nano-layer-bg, #fff);--padding:10px 0;--overflow:auto;--dropdown-z-index:var(--nano-layer-index-dropdown, 300);--min-width:0;--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--menu-height:var(--max-menu-height, 50vh);display:flex}/*!@.dropdown*/.dropdown.sc-nano-dropdown{position:relative}/*!@.dropdown__trigger*/.dropdown__trigger.sc-nano-dropdown{display:block}/*!@.dropdown__positioner*/.dropdown__positioner.sc-nano-dropdown{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width)}@media (max-width: 35.9375em){/*!@.dropdown__positioner*/.dropdown__positioner.sc-nano-dropdown{z-index:100}}/*!@.dropdown__panel*/.dropdown__panel.sc-nano-dropdown{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:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;min-block-size:20px;overflow:var(--overflow);box-sizing:content-box !important}/*!@.dropdown__panel.loading*/.dropdown__panel.loading.sc-nano-dropdown{overflow-y:hidden}/*!@.dropdown__panel.top*/.dropdown__panel.top.sc-nano-dropdown{transform:translateY(-20px) translateZ(0)}/*!@.dropdown__panel.bottom*/.dropdown__panel.bottom.sc-nano-dropdown{transform:translateY(20px) translateZ(0)}/*!@.dropdown__positioner.popover-visible .dropdown__panel*/.dropdown__positioner.popover-visible.sc-nano-dropdown .dropdown__panel.sc-nano-dropdown{opacity:1;transform:translateY(0) translateZ(0)}/*!@.dropdown__panel ::slotted(nano-menu)*/.dropdown__panel .sc-nano-dropdown-s>nano-menu{max-block-size:var(--menu-height)}/*!@.dropdown__accessible-title*/.dropdown__accessible-title.sc-nano-dropdown{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";
 
 let dropDownIds = 0;
 /**
@@ -19227,7 +19227,7 @@ class Grid {
               --current-grid-size: "grid size: ${bp.name}";
               ${bp.template
         ? `grid-template: ${bp.template};`
-        : `grid-template-columns: repeat(${bp.cols}, 1fr);`}
+        : `grid-template-columns: repeat(${bp.cols}, minmax(calc((100% / ${bp.cols}) - var(--grid-col-gap)), 1fr));`}
             }
             ${[...Array(bp.cols)]
         .map((_, i) => {
@@ -19237,19 +19237,26 @@ class Grid {
                   ::slotted([grid-states~="${bp.name}-col-start-${gItm}"]) {
                     grid-column-start: ${gItm} !important;
                   }
-                  .grid > [grid-states~="${bp.name}-row-start-${gItm}"],
-                  ::slotted([grid-states~="${bp.name}-row-start-${gItm}"]) {
-                    grid-row-start: ${gItm} !important;
-                  }
                   .grid > [grid-states~="${bp.name}-col-span-${gItm}"],
                   ::slotted([grid-states~="${bp.name}-col-span-${gItm}"]) {
                     grid-column-end: span ${gItm} !important;
                   }
-                  .grid > [grid-states~="${bp.name}-row-span-${gItm}"],
-                  ::slotted([grid-states~="${bp.name}-row-span-${gItm}"]) {
-                    grid-row-end: span ${gItm} !important;
-                  }
               `;
+      })
+        .join('')}
+              ${[...Array(24)]
+        .map((_, i) => {
+        const gItm = i + 1;
+        return /* css */ `
+                    .grid > [grid-states~="${bp.name}-row-start-${gItm}"],
+                    ::slotted([grid-states~="${bp.name}-row-start-${gItm}"]) {
+                      grid-row-start: ${gItm} !important;
+                    }
+                    .grid > [grid-states~="${bp.name}-row-span-${gItm}"],
+                    ::slotted([grid-states~="${bp.name}-row-span-${gItm}"]) {
+                      grid-row-end: span ${gItm} !important;
+                    }
+                `;
       })
         .join('')}
             ${this.showHelper &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "repository": {
     "type": "git",
     "url": "https://git.oxfordnanolabs.local/Digital/nano-components"
@@ -131,7 +131,7 @@
     "nanopore",
     "digital"
   ],
-  "gitHead": "029a85b93c91754bfae6927f98aef487d37b1916",
+  "gitHead": "467a4c6f441b604c55cef60fa1b9c4aa0ef637ff",
   "volta": {
     "node": "14.18.1",
     "npm": "8.6.0"

package/dist/cjs/table.worker-83433a8b.js.map

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

package/dist/esm/table.worker-1cae39c9.js.map

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

package/dist/nano-components/p-00cf8021.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{h as i,g as t,a as e,r as n,c as s}from"./p-f6a8467a.js";const r=(()=>{try{return!!new CSSStyleSheet}catch(i){return false}})();const o=new WeakMap;function h(n={}){return(s,h)=>{if(!n.cacheKeyProperty){n.cacheKeyProperty=h}const{componentWillLoad:d,render:u,componentWillRender:g}=s;if(!d)console.warn(`ConstructibleStyle requires you to have a \`componentWillLoad\` lifecycle method in \`${s.constructor.name}\`. Failure to add this function may cause ConstructibleStyle to fail due to StencilJS build optimizations.`);if(r){const i=i=>{if(!i[n.cacheKeyProperty]||o.get(i)&&o.get(i)===i[n.cacheKeyProperty])return;o.set(i,i[n.cacheKeyProperty]);const e=t(i);const r=typeof i[h]==="function"?i[h]():i[h];const a=e.shadowRoot||document;a.adoptedStyleSheets=[...a.adoptedStyleSheets||[],c(i,s,r,n)]};s.componentWillLoad=function(){const t=d&&d.call(this);i(this);return t};s.componentWillRender=function(){const t=g&&g.call(this);i(this);return t}}else{s.render=function(){const t=typeof this[h]==="function"?this[h]():this[h];let n=u.call(this);if(l(n)){a(n,s.constructor.name,t)}else{n=i(e,null,n);if(!("attachShadow"in HTMLElement.prototype)){a(n,s.constructor.name,t)}else{if(!s.__constructableStyle){const i=document.createElement("style");i.setAttribute("type","text/css");i.setAttribute("constructible-style",s.constructor.name);i.innerHTML=t;s.__constructableStyle=i;document.head.appendChild(i)}}}return n}}}}function a(t,e,n){(d(t)||[]).push(i("style",{type:"text/css","constructible-style":e},n))}function c(i,t,e,n){if(!t.__constructableStyle){t.__constructableStyle={}}const s=i[n.cacheKeyProperty];if(!t.__constructableStyle[s]){t.__constructableStyle[s]=new CSSStyleSheet;t.__constructableStyle[s].replace(e)}return t.__constructableStyle[s]}function l(i){for(const t in i){if(i.hasOwnProperty(t)){if(i[t]===e){return true}}}return false}function d(i){for(const t in i){if(i.hasOwnProperty(t)){if(Array.isArray(i[t])){return i[t]}}}}const u=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--grid-col-gap:var(--nano-spacing-medium, 16px);--grid-row-gap:var(--nano-spacing-medium, 16px);--current-grid-size:"grid size: s";container-type:inline-size;display:block}:host .grid{display:grid;gap:var(--grid-row-gap) var(--grid-col-gap);block-size:inherit;min-block-size:inherit}:host([show-helper]:not([show-helper=false])){position:relative}:host([show-helper]:not([show-helper=false])) .grid--helper{position:absolute;inset:0;pointer-events:none}:host([show-helper]:not([show-helper=false])) .grid--helper::before{content:var(--current-grid-size);font-size:30px;position:absolute;inline-size:100%;inset-inline-start:0;text-align:center;inset-block-start:50%;transform:translateY(-50%);color:rgba(0, 0, 0, 0.2);text-transform:uppercase;z-index:99;pointer-events:none}:host([show-helper]:not([show-helper=false])) .grid__helper-item{display:none;background:rgba(126, 195, 241, 0.25)}';var g=undefined&&undefined.__decorate||function(i,t,e,n){var s=arguments.length,r=s<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,e):n,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(i,t,e,n);else for(var h=i.length-1;h>=0;h--)if(o=i[h])r=(s<3?o(r):s>3?o(t,e,r):o(t,e))||r;return s>3&&r&&Object.defineProperty(t,e,r),r};var p=undefined&&undefined.__metadata||function(i,t){if(typeof Reflect==="object"&&typeof Reflect.metadata==="function")return Reflect.metadata(i,t)};const f=class{constructor(i){n(this,i);this.grids=[];this.styles=()=>{const i=`\n      ${this.grids.map((i=>`\n          @container (min-width: ${typeof i.breakpoint==="number"?i.breakpoint+1+"px":i.breakpoint}) {\n            .grid {\n              --current-grid-size: "grid size: ${i.name}";\n              ${i.template?`grid-template: ${i.template};`:`grid-template-columns: repeat(${i.cols}, 1fr);`}\n            }\n            ${[...Array(i.cols)].map(((t,e)=>{const n=e+1;return`\n                  .grid > [grid-states~="${i.name}-col-start-${n}"],\n                  ::slotted([grid-states~="${i.name}-col-start-${n}"]) {\n                    grid-column-start: ${n} !important;\n                  }\n                  .grid > [grid-states~="${i.name}-row-start-${n}"],\n                  ::slotted([grid-states~="${i.name}-row-start-${n}"]) {\n                    grid-row-start: ${n} !important;\n                  }\n                  .grid > [grid-states~="${i.name}-col-span-${n}"],\n                  ::slotted([grid-states~="${i.name}-col-span-${n}"]) {\n                    grid-column-end: span ${n} !important;\n                  }\n                  .grid > [grid-states~="${i.name}-row-span-${n}"],\n                  ::slotted([grid-states~="${i.name}-row-span-${n}"]) {\n                    grid-row-end: span ${n} !important;\n                  }\n              `})).join("")}\n            ${this.showHelper&&`\n              .grid--helper :nth-child(-n+${i.cols}) {\n                display: block !important;\n              }\n            `}\n          }\n        `)).join("")}\n    `;return i};this.cacheKey=undefined;this.sSize=300;this.mSize=550;this.lSize=800;this.xlSize=1e3;this.sCols=undefined;this.mCols=undefined;this.lCols=undefined;this.xlCols=undefined;this.xxlCols=undefined;this.sTpl=undefined;this.mTpl=undefined;this.lTpl=undefined;this.xlTpl=undefined;this.xxlTpl=undefined;this.showHelper=false}constructSizeArray(){this.grids=[];if(this.sCols)this.grids.push({cols:this.sCols,breakpoint:0,name:"s",template:this.sTpl});if(this.mCols)this.grids.push({cols:this.mCols,breakpoint:this.sSize,name:"m",template:this.mTpl});if(this.lSize)this.grids.push({cols:this.lCols,breakpoint:this.mSize,name:"l",template:this.lTpl});if(this.xlCols)this.grids.push({cols:this.xlCols,breakpoint:this.lSize,name:"xl",template:this.xlTpl});if(this.xxlCols)this.grids.push({cols:this.xxlCols,breakpoint:this.xlSize,name:"xxl",template:this.xxlTpl});this.cacheKey=this.grids.map((i=>`${i.cols}-${i.breakpoint}-${i.template||""}`)).join("")+"-helper-"+this.showHelper}componentWillLoad(){this.constructSizeArray()}render(){return i(e,null,i("div",{part:"grid",class:"grid"},i("slot",null)),this.showHelper&&i("div",{class:"grid grid--helper",part:"helper"},[...Array(24)].map((()=>i("div",{class:"grid__helper-item"})))))}static get watchers(){return{sTpl:["constructSizeArray"],mTpl:["constructSizeArray"],lTpl:["constructSizeArray"],xlTpl:["constructSizeArray"],xxlTpl:["constructSizeArray"],sSize:["constructSizeArray"],mSize:["constructSizeArray"],lSize:["constructSizeArray"],xlSize:["constructSizeArray"],sCols:["constructSizeArray"],mCols:["constructSizeArray"],lCols:["constructSizeArray"],xlCols:["constructSizeArray"],xxlCols:["constructSizeArray"],showHelper:["constructSizeArray"]}}};g([h({cacheKeyProperty:"cacheKey"}),p("design:type",Object)],f.prototype,"styles",void 0);f.style=u;const m=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding:0;display:inline-block;object-fit:cover;object-position:center;background-size:cover;background-position:center}:host *{border-radius:inherit}:host([background]:not([background=false])){display:block}.img{position:relative;object-fit:inherit;object-position:inherit;background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit;flex:1 1 100%;display:flex;flex-direction:column;min-block-size:inherit;max-block-size:inherit;max-inline-size:inherit;min-height:inherit;min-width:inherit;block-size:inherit;inline-size:inherit;height:inherit;width:inherit;max-height:inherit;max-width:inherit;aspect-ratio:inherit}.img__loader,.img__observer{position:absolute;inset:0;block-size:100%;inline-size:100%;z-index:-1}.img__image,.img__bg{border-radius:inherit;display:block;opacity:0;transition:0.5s ease opacity, 0.3s ease filter 0.4s;filter:blur(5px);flex:1}.img__image.loaded,.img__bg.loaded{opacity:1;filter:blur(0)}@media not all and (min-resolution: 0.001dpcm){@supports (-webkit-appearance: none){.img__image.loaded,.img__bg.loaded{filter:blur(0)}}}.img__image{object-fit:inherit;object-position:inherit;max-inline-size:100%;min-block-size:inherit;max-block-size:inherit;min-height:inherit;min-width:inherit;block-size:auto;inline-size:inherit;height:inherit;width:inherit;max-height:inherit;max-width:inherit;aspect-ratio:inherit}.img__image.hide{visibility:hidden}.img__image.hide.no-height{block-size:1px;position:absolute;z-index:-1}.img__bg{background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit;overflow:auto;padding:var(--padding)}.img__bg.no-height{position:absolute;inset:0}";const b=class{constructor(i){n(this,i);this.nanoImgWillLoad=s(this,"nanoImgWillLoad",7);this.nanoImgDidLoad=s(this,"nanoImgDidLoad",7);this.nanoImgError=s(this,"nanoImgError",7);this._srcSet={};this.onLoad=()=>{this.nanoImgDidLoad.emit();setTimeout((()=>this.hasLoaded=true),50)};this.onError=()=>{this.nanoImgError.emit()};this.onResize=i=>{Object.entries(i.detail).forEach((([i,t])=>{this._srcSet[i].active=t}));const t=[];Object.keys(this._srcSet).sort().forEach((i=>{if(this._srcSet[i].active)t.push(this._srcSet[i].src)}));if(t.length)this._src=t.slice(-1)[0];else this._src=this.src};this.loadSrc=undefined;this.loadError=undefined;this.hasLoaded=false;this.imgStates=null;this._src=undefined;this.alt=undefined;this.src=undefined;this.srcSet=undefined;this.lazy=true;this.background=undefined;this.autoHeight="content"}_srcChanged(){this.hasLoaded=false;this.addIO()}srcChanged(){this._src=this.src}srcSetChanged(){if(!this.srcSet)return;delete this._srcSet;this._srcSet={};this.imgStates=this.srcSet.split(",").map((i=>{const[t,e]=i.split(" ").filter((i=>i.length));this._srcSet[t]={src:e,active:false};return t})).join(", ")}lazyChanged(){if(!this.lazy)this.load()}addIO(){if(!this._src||this.hasLoaded)return;if(!this.lazy){this.load();return}if(typeof window!=="undefined"&&"IntersectionObserver"in window){this.removeIO();this.io=new IntersectionObserver((i=>{if(i[0].isIntersecting){this.load();this.removeIO()}}));this.io.observe(this.host)}else setTimeout((()=>this.load()),200)}load(){this.loadError=this.onError;this.loadSrc=this._src;this.nanoImgWillLoad.emit()}removeIO(){if(this.io){this.io.disconnect();this.io=undefined}}connectedCallback(){this.srcChanged();this.srcSetChanged();this.lazyChanged()}componentDidLoad(){this.addIO()}disconnectedCallback(){this.removeIO()}render(){const t=!!this.loadSrc?{"background-image":`url(${this.loadSrc})`}:{};return i("div",{class:"img"},i("nano-skeleton",{class:"img__loader"}),!!this.background&&i("div",{class:{loaded:this.hasLoaded,img__bg:true,"no-height":this.autoHeight==="image"},style:t},i("slot",null)),i("img",{class:{img__image:true,loaded:this.hasLoaded,hide:this.background,"no-height":this.autoHeight==="content"},decoding:"async",src:this.loadSrc,loading:undefined,alt:this.alt,onLoad:this.onLoad,onError:this.loadError}),i("nano-resize-observe",{class:"img__observer",onNanoResizeStateChange:this.onResize,states:this.imgStates}))}get host(){return t(this)}static get watchers(){return{_src:["_srcChanged"],src:["srcChanged"],srcSet:["srcSetChanged"],lazy:["lazyChanged"]}}};b.style=m;export{f as nano_grid,b as nano_img};
-//# sourceMappingURL=p-00cf8021.entry.js.map

package/dist/nano-components/p-00cf8021.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["supportsConstructibleStylesheets","CSSStyleSheet","e","cacheKeys","WeakMap","ConstructibleStyle","opts","target","propertyKey","cacheKeyProperty","componentWillLoad","render","componentWillRender","console","warn","constructor","name","addStylesheet","instance","get","set","host","getElement","cssText","root","shadowRoot","document","adoptedStyleSheets","getOrCreateStylesheet","willLoadResult","call","this","willRenderResult","renderedNode","isHost","appendStyleToHost","h","Host","HTMLElement","prototype","__constructableStyle","style","createElement","setAttribute","innerHTML","head","appendChild","node","targetName","getHostChildren","push","type","key","replace","prop","hasOwnProperty","Array","isArray","gridCss","Grid","grids","styles","css","map","bp","breakpoint","template","cols","_","i","gItm","join","showHelper","constructSizeArray","sCols","sTpl","mCols","sSize","mTpl","lSize","lCols","mSize","lTpl","xlCols","xlTpl","xxlCols","xlSize","xxlTpl","cacheKey","part","class","__decorate","imgCss","Img","_srcSet","onLoad","nanoImgDidLoad","emit","setTimeout","hasLoaded","onError","nanoImgError","onResize","Object","entries","detail","forEach","active","srcOpts","keys","sort","src","length","_src","slice","_srcChanged","addIO","srcChanged","srcSetChanged","srcSet","imgStates","split","bpSrc","filter","lazyChanged","lazy","load","window","removeIO","io","IntersectionObserver","data","isIntersecting","observe","loadError","loadSrc","nanoImgWillLoad","disconnect","undefined","connectedCallback","componentDidLoad","disconnectedCallback","bgStyle","background","loaded","img__bg","autoHeight","img__image","hide","decoding","loading","alt","onNanoResizeStateChange","states"],"sources":["./src/utils/constructible-style.tsx","./src/components/grid/grid.scss?tag=nano-grid&encapsulation=shadow","./src/components/grid/grid.tsx","./src/components/img/img.scss?tag=nano-img&encapsulation=shadow","./src/components/img/img.tsx"],"sourcesContent":["import { h, Host, getElement, VNode, ComponentInterface } from '@stencil/core';\n// import type { VNode, HTMLStencilElement } from \"@stencil/core\";\n\nconst supportsConstructibleStylesheets = (() => {\n  try {\n    return !!new CSSStyleSheet();\n  } catch (e) {\n    return false;\n  }\n})();\n\nconst cacheKeys: WeakMap<ComponentInterface, string> = new WeakMap();\n\ndeclare type ConstructibleStyleDecorator = (\n  target: ComponentInterface,\n  propertyKey: string\n) => void;\n\n/**\n * Dynamically create a constructible stylesheet which is applied to the component.\n * The stylesheet is then cached for future instances of the component.\n * @usage\nAs a string:\n```\n@ConstructableStyle() style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;\n```\nAs a function:\n```\n@ConstructableStyle() style = () => `.bg { background: url('assets/${ this.mode }/bg.png'); }`;\n```\n * @param opts - optional `cacheKeyProperty` - in case an instance of a component could produce different styles based on variables.\n * @returns `@ConstructableStyle` decorator\n */\nexport function ConstructibleStyle(\n  opts: ConstructibleStyleOptions = {}\n): ConstructibleStyleDecorator {\n  return (target: ComponentInterface, propertyKey: string) => {\n    if (!opts.cacheKeyProperty) {\n      opts.cacheKeyProperty = propertyKey;\n    }\n\n    const { componentWillLoad, render, componentWillRender } = target;\n    if (!componentWillLoad)\n      console.warn(\n        `ConstructibleStyle requires you to have a \\`componentWillLoad\\` lifecycle method in \\`${target.constructor.name}\\`. Failure to add this function may cause ConstructibleStyle to fail due to StencilJS build optimizations.`\n      );\n\n    if (supportsConstructibleStylesheets) {\n      const addStylesheet = (instance: ComponentInterface) => {\n        if (\n          !instance[opts.cacheKeyProperty] ||\n          (cacheKeys.get(instance) &&\n            cacheKeys.get(instance) === instance[opts.cacheKeyProperty])\n        )\n          return;\n\n        cacheKeys.set(instance, instance[opts.cacheKeyProperty]);\n        const host = getElement(instance);\n        const cssText =\n          typeof instance[propertyKey] === 'function'\n            ? instance[propertyKey]()\n            : instance[propertyKey];\n        const root = (host.shadowRoot || document) as any;\n        root.adoptedStyleSheets = [\n          ...(root.adoptedStyleSheets || []),\n          getOrCreateStylesheet(instance, target, cssText, opts),\n        ];\n      };\n\n      target.componentWillLoad = function () {\n        const willLoadResult =\n          componentWillLoad && componentWillLoad.call(this);\n        addStylesheet(this);\n        return willLoadResult;\n      };\n\n      target.componentWillRender = function () {\n        const willRenderResult =\n          componentWillRender && componentWillRender.call(this);\n        addStylesheet(this);\n        return willRenderResult;\n      };\n    } else {\n      target.render = function () {\n        const cssText =\n          typeof this[propertyKey] === 'function'\n            ? this[propertyKey]()\n            : this[propertyKey];\n        let renderedNode: VNode = render.call(this);\n\n        if (isHost(renderedNode)) {\n          appendStyleToHost(renderedNode, target.constructor.name, cssText);\n        } else {\n          renderedNode = <Host>{renderedNode}</Host>;\n\n          if (!('attachShadow' in HTMLElement.prototype)) {\n            appendStyleToHost(renderedNode, target.constructor.name, cssText);\n          } else {\n            if (!target.__constructableStyle) {\n              const style = document.createElement('style');\n              style.setAttribute('type', 'text/css');\n              style.setAttribute(\n                'constructible-style',\n                target.constructor.name\n              );\n              style.innerHTML = cssText;\n              target.__constructableStyle = style;\n              document.head.appendChild(style);\n            }\n          }\n        }\n\n        return renderedNode;\n      };\n    }\n  };\n}\n\nfunction appendStyleToHost(node, targetName, cssText) {\n  (getHostChildren(node) || []).push(\n    <style type=\"text/css\" constructible-style={targetName}>\n      {cssText}\n    </style>\n  );\n}\n\nfunction getOrCreateStylesheet(\n  instance: ComponentInterface,\n  target: ComponentInterface,\n  cssText: string,\n  opts: ConstructibleStyleOptions\n): CSSStyleSheet {\n  if (!target.__constructableStyle) {\n    target.__constructableStyle = {};\n  }\n\n  const key = instance[opts.cacheKeyProperty];\n\n  if (!target.__constructableStyle[key]) {\n    target.__constructableStyle[key] = new CSSStyleSheet();\n    target.__constructableStyle[key].replace(cssText);\n  }\n\n  return target.__constructableStyle[key];\n}\n\nfunction isHost(node): boolean {\n  for (const prop in node) {\n    if (node.hasOwnProperty(prop)) {\n      if (node[prop] === Host) {\n        return true;\n      }\n    }\n  }\n  return false;\n}\n\nfunction getHostChildren(node): Array<VNode> {\n  for (const prop in node) {\n    if (node.hasOwnProperty(prop)) {\n      if (Array.isArray(node[prop])) {\n        return node[prop];\n      }\n    }\n  }\n}\n\nexport interface ConstructibleStyleOptions {\n  /**\n   * Set this in case an instance of a component could produce different styles based on variables.\n   * This will ensure that you get new styles for each mode.\n   * @example\n```\n@Prop() mode: string;\n@ConstructableStyle({ cacheKeyProperty: \"mode\" }) style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;\n```\n   */\n  cacheKeyProperty?: string;\n}\n","@use 'sass:math';\n\n@import '../../global/style/nano-theme/base';\n\n:host {\n  /**\n  * @prop --grid-col-gap: gap between all columns. Defaults to theme's global padding\n  * @prop --grid-row-gap: gap between all rows. Defaults to theme's global padding\n  */\n\n  --grid-col-gap: #{$spacing-medium};\n  --grid-row-gap: #{$spacing-medium};\n  --current-grid-size: \"grid size: s\";\n\n  container-type: inline-size;\n  display: block;\n\n  .grid {\n    display: grid;\n    gap: var(--grid-row-gap) var(--grid-col-gap);\n    block-size: inherit;\n    min-block-size: inherit;\n  }\n}\n\n:host([show-helper]:not([show-helper='false'])) {\n  position: relative;\n\n  .grid--helper {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n\n    &::before {\n      content: var(--current-grid-size);\n      font-size: 30px;\n      position: absolute;\n      inline-size: 100%;\n      inset-inline-start: 0;\n      text-align: center;\n      inset-block-start: 50%;\n      transform: translateY(-50%);\n      color: rgb(0 0 0 / 20%);\n      text-transform: uppercase;\n      z-index: 99;\n      pointer-events: none;\n    }\n  }\n\n  .grid__helper-item {\n    display: none;\n    background: hsl(204deg 80% 72% / 25%);\n  }\n}\n","import { Component, h, Prop, Host, State, Watch } from '@stencil/core';\nimport { ConstructibleStyle } from '../../utils/constructible-style';\n\n/**\n * A lightweight, context-aware CSS grid implementation.\n *\n * - Define multiple grids templates at different breakpoints\n * - Uses `@container` queries to select the correct grid depending on the current dimensions\n * - Use `grid-states=\"...\"` on direct descendants for `column` / `row` - `start` / `end`\n * - SSR optimised\n\n * @part grid - the main grid element.\n * Use this to set css such as `justify-items|content` / `align-items|content` / `place-content`\n * @part helper - a replica grid showed when `show-helper` is true\n *\n * @slot - default slot. Use this to place grid items. Use `grid-states=\"...\"` attribute to opt-out of auto / sequential placement.\n */\n@Component({\n  tag: 'nano-grid',\n  styleUrl: 'grid.scss',\n  shadow: true,\n})\nexport class Grid {\n  private grids: {\n    cols: number;\n    breakpoint: number | string;\n    name: string;\n    template?: string;\n  }[] = [];\n  @State() cacheKey: string;\n\n  /** the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.\n   * Will default to `px` if no unit supplied e.g. `20rem` */\n  @Prop() sSize: number | string = 300;\n\n  /** the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.\n   * Will default to `px` if no unit supplied e.g. `20rem` */\n  @Prop() mSize: number | string = 550;\n\n  /** the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.\n   * Will default to `px` if no unit supplied e.g. `20rem` */\n  @Prop() lSize: number | string = 800;\n\n  /** the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.\n   * Will default to `px` if no unit supplied e.g. `20rem` */\n  @Prop() xlSize: number | string = 1000;\n\n  /** the number of columns the grid has at the small breakpoint. */\n  @Prop() sCols: number;\n\n  /** the number of columns the grid has at the medium breakpoint. */\n  @Prop() mCols: number;\n\n  /** the number of columns the grid has at the large breakpoint. */\n  @Prop() lCols: number;\n\n  /** the number of columns the grid has at the xl breakpoint. */\n  @Prop() xlCols: number;\n\n  /** the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint) */\n  @Prop() xxlCols: number;\n\n  /** Optional small `grid-template`. *Note* - you must set `sCols` for this to take affect */\n  @Prop() sTpl?: string;\n\n  /** Optional medium `grid-template`. *Note* - you must set `mCols` for this to take affect */\n  @Prop() mTpl?: string;\n\n  /** Optional large `grid-template`. *Note* - you must set `lCols` for this to take affect */\n  @Prop() lTpl?: string;\n\n  /** Optional xl `grid-template`. *Note* - you must set `xlCols` for this to take affect */\n  @Prop() xlTpl?: string;\n\n  /** Optional xxl `grid-template`. *Note* - you must set `xxlCols` for this to take affect */\n  @Prop() xxlTpl?: string;\n\n  /** shows a grid helper to visualise where columns are */\n  @Prop({ reflect: true }) showHelper: boolean = false;\n\n  @Watch('sTpl')\n  @Watch('mTpl')\n  @Watch('lTpl')\n  @Watch('xlTpl')\n  @Watch('xxlTpl')\n  @Watch('sSize')\n  @Watch('mSize')\n  @Watch('lSize')\n  @Watch('xlSize')\n  @Watch('sCols')\n  @Watch('mCols')\n  @Watch('lCols')\n  @Watch('xlCols')\n  @Watch('xxlCols')\n  @Watch('showHelper')\n  constructSizeArray() {\n    this.grids = [];\n\n    if (this.sCols)\n      this.grids.push({\n        cols: this.sCols,\n        breakpoint: 0,\n        name: 's',\n        template: this.sTpl,\n      });\n    if (this.mCols)\n      this.grids.push({\n        cols: this.mCols,\n        breakpoint: this.sSize,\n        name: 'm',\n        template: this.mTpl,\n      });\n    if (this.lSize)\n      this.grids.push({\n        cols: this.lCols,\n        breakpoint: this.mSize,\n        name: 'l',\n        template: this.lTpl,\n      });\n    if (this.xlCols)\n      this.grids.push({\n        cols: this.xlCols,\n        breakpoint: this.lSize,\n        name: 'xl',\n        template: this.xlTpl,\n      });\n    if (this.xxlCols)\n      this.grids.push({\n        cols: this.xxlCols,\n        breakpoint: this.xlSize,\n        name: 'xxl',\n        template: this.xxlTpl,\n      });\n\n    this.cacheKey =\n      this.grids\n        .map((bp) => `${bp.cols}-${bp.breakpoint}-${bp.template || ''}`)\n        .join('') +\n      '-helper-' +\n      this.showHelper;\n  }\n\n  @ConstructibleStyle({ cacheKeyProperty: 'cacheKey' }) protected styles =\n    () => {\n      const css = /* css */ `\n      ${this.grids\n        .map(\n          (bp) => /* css */ `\n          @container (min-width: ${\n            typeof bp.breakpoint === 'number'\n              ? bp.breakpoint + 1 + 'px'\n              : bp.breakpoint\n          }) {\n            .grid {\n              --current-grid-size: \"grid size: ${bp.name}\";\n              ${\n                bp.template\n                  ? `grid-template: ${bp.template};`\n                  : `grid-template-columns: repeat(${bp.cols}, 1fr);`\n              }\n            }\n            ${[...Array(bp.cols)]\n              .map((_, i) => {\n                const gItm = i + 1;\n                return /* css */ `\n                  .grid > [grid-states~=\"${bp.name}-col-start-${gItm}\"],\n                  ::slotted([grid-states~=\"${bp.name}-col-start-${gItm}\"]) {\n                    grid-column-start: ${gItm} !important;\n                  }\n                  .grid > [grid-states~=\"${bp.name}-row-start-${gItm}\"],\n                  ::slotted([grid-states~=\"${bp.name}-row-start-${gItm}\"]) {\n                    grid-row-start: ${gItm} !important;\n                  }\n                  .grid > [grid-states~=\"${bp.name}-col-span-${gItm}\"],\n                  ::slotted([grid-states~=\"${bp.name}-col-span-${gItm}\"]) {\n                    grid-column-end: span ${gItm} !important;\n                  }\n                  .grid > [grid-states~=\"${bp.name}-row-span-${gItm}\"],\n                  ::slotted([grid-states~=\"${bp.name}-row-span-${gItm}\"]) {\n                    grid-row-end: span ${gItm} !important;\n                  }\n              `;\n              })\n              .join('')}\n            ${\n              this.showHelper &&\n              /* css */ `\n              .grid--helper :nth-child(-n+${bp.cols}) {\n                display: block !important;\n              }\n            `\n            }\n          }\n        `\n        )\n        .join('')}\n    `;\n      return css;\n    };\n\n  componentWillLoad() {\n    this.constructSizeArray();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div part=\"grid\" class=\"grid\">\n          <slot />\n        </div>\n        {this.showHelper && (\n          <div class=\"grid grid--helper\" part=\"helper\">\n            {[...Array(24)].map(() => (\n              <div class=\"grid__helper-item\" />\n            ))}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n",":host {\n  /**\n   * @prop --padding: padding around any content. Only relevent on `<nano-img background>`\n  */\n  --padding: 0;\n\n  display: inline-block;\n  object-fit: cover;\n  object-position: center;\n  background-size: cover;\n  background-position: center;\n\n  * {\n    border-radius: inherit;\n  }\n}\n\n:host([background]:not([background='false'])) {\n  display: block;\n}\n\n.img {\n  position: relative;\n  object-fit: inherit;\n  object-position: inherit;\n  background-color: inherit;\n  background-position: inherit;\n  background-size: inherit;\n  background-origin: inherit;\n  background-attachment: inherit;\n  background-repeat: inherit;\n  flex: 1 1 100%;\n  display: flex;\n  flex-direction: column;\n  min-block-size: inherit;\n  max-block-size: inherit;\n  max-inline-size: inherit;\n  min-height: inherit;\n  min-width: inherit;\n  block-size: inherit;\n  inline-size: inherit;\n  height: inherit;\n  width: inherit;\n  max-height: inherit;\n  max-width: inherit;\n  aspect-ratio: inherit;\n}\n\n.img__loader,\n.img__observer {\n  position: absolute;\n  inset: 0;\n  block-size: 100%;\n  inline-size: 100%;\n  z-index: -1;\n}\n\n.img__image,\n.img__bg {\n  border-radius: inherit;\n  display: block;\n  opacity: 0;\n  transition: 0.5s ease opacity, 0.3s ease filter 0.4s;\n  filter: blur(5px);\n  flex: 1;\n\n  &.loaded {\n    opacity: 1;\n    filter: blur(0);\n\n    @media not all and (min-resolution: 0.001dpcm) {\n      @supports (-webkit-appearance: none) {\n        filter: blur(0);\n      }\n    }\n  }\n}\n\n.img__image {\n  object-fit: inherit;\n  object-position: inherit;\n  max-inline-size: 100%;\n  min-block-size: inherit;\n  max-block-size: inherit;\n  min-height: inherit;\n  min-width: inherit;\n  block-size: auto;\n  inline-size: inherit;\n  height: inherit;\n  width: inherit;\n  max-height: inherit;\n  max-width: inherit;\n  aspect-ratio: inherit;\n\n  &.hide {\n    visibility: hidden;\n\n    &.no-height {\n      block-size: 1px;\n      position: absolute;\n      z-index: -1;\n    }\n  }\n}\n\n.img__bg {\n  background-color: inherit;\n  background-position: inherit;\n  background-size: inherit;\n  background-origin: inherit;\n  background-attachment: inherit;\n  background-repeat: inherit;\n  overflow: auto;\n  padding: var(--padding);\n\n  &.no-height {\n    position: absolute;\n    inset: 0;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Prop,\n  Watch,\n  h,\n  ComponentInterface,\n  Build,\n} from '@stencil/core';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\n/**\n * Img with benefits. Lazy loading. Simple `srcSet` solution for both `<img>` and `background-image` varieties.\n * @slot - Main slot. Only relevant with `<nano-img background>`\n */\n@Component({\n  tag: 'nano-img',\n  styleUrl: 'img.scss',\n  shadow: true,\n})\nexport class Img implements ComponentInterface {\n  private io?: IntersectionObserver;\n  private _srcSet: { [key: string]: { src: string; active: boolean } } = {};\n\n  @Element() host!: HTMLNanoImgElement;\n\n  @State() loadSrc?: string;\n  @State() loadError?: () => void;\n  @State() hasLoaded: boolean = false;\n  @State() imgStates: string = null;\n  @State() _src: string;\n  @Watch('_src')\n  _srcChanged() {\n    this.hasLoaded = false;\n    this.addIO();\n  }\n\n  /** This attribute defines the alternative text describing the image.\n   * Users will see this text displayed if the image URL is wrong, or if the image is not yet downloaded. */\n  @Prop() alt?: string;\n\n  /** The image URL. This attribute is mandatory for the `<img>` element. */\n  @Prop() src!: string;\n  @Watch('src')\n  srcChanged() {\n    this._src = this.src;\n  }\n\n  /** Optional list string providing media sizes with corresponding image srcs.\n   * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` */\n  @Prop() srcSet?: string;\n  @Watch('srcSet')\n  srcSetChanged() {\n    if (!this.srcSet) return;\n\n    delete this._srcSet;\n    this._srcSet = {};\n\n    this.imgStates = this.srcSet\n      .split(',')\n      .map((bpSrc) => {\n        const [bp, src] = bpSrc.split(' ').filter((bp) => bp.length);\n        this._srcSet[bp] = { src: src, active: false };\n        return bp;\n      })\n      .join(', ');\n  }\n\n  /** Render image lazily, when it comes into the browser viewport **/\n  @Prop() lazy: boolean = true;\n  @Watch('lazy')\n  lazyChanged() {\n    if (!this.lazy) this.load();\n  }\n\n  /** Render the image as a background image **/\n  @Prop() background?: boolean;\n\n  /** When the image is rendered as a background, and there is no preset dimensions of the component,\n   * you can set how the component height will be set. Via image size or via the content **/\n  @Prop() autoHeight: 'content' | 'image' = 'content';\n\n  /** Emitted when the img src has been set */\n  @Event() nanoImgWillLoad!: EventEmitter<void>;\n\n  /** Emitted when the image has finished loading */\n  @Event() nanoImgDidLoad!: EventEmitter<void>;\n\n  /** Emitted when the img fails to load */\n  @Event() nanoImgError!: EventEmitter<void>;\n\n  private addIO() {\n    if (!this._src || this.hasLoaded) return;\n    if (!this.lazy) {\n      this.load();\n      return;\n    }\n    if (\n      typeof (window as any) !== 'undefined' &&\n      'IntersectionObserver' in window\n    ) {\n      this.removeIO();\n      this.io = new IntersectionObserver((data) => {\n        if (data[0].isIntersecting) {\n          this.load();\n          this.removeIO();\n        }\n      });\n\n      this.io.observe(this.host);\n    } else setTimeout(() => this.load(), 200);\n  }\n\n  private load() {\n    this.loadError = this.onError;\n    this.loadSrc = this._src;\n    this.nanoImgWillLoad.emit();\n  }\n\n  private onLoad = () => {\n    this.nanoImgDidLoad.emit();\n    setTimeout(() => (this.hasLoaded = true), 50);\n  };\n\n  private onError = () => {\n    this.nanoImgError.emit();\n  };\n\n  private onResize = (e: { detail: ResizeStateChangeEventDetail }) => {\n    Object.entries(e.detail).forEach(([bp, active]) => {\n      this._srcSet[bp].active = active;\n    });\n\n    // sort and find the highest sized matching image.\n    const srcOpts = [];\n    Object.keys(this._srcSet)\n      .sort()\n      .forEach((bp) => {\n        if (this._srcSet[bp].active) srcOpts.push(this._srcSet[bp].src);\n      });\n\n    if (srcOpts.length) this._src = srcOpts.slice(-1)[0];\n    // no matching image? Set back to default\n    else this._src = this.src;\n  };\n\n  private removeIO() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  connectedCallback() {\n    this.srcChanged();\n    this.srcSetChanged();\n    this.lazyChanged();\n  }\n\n  componentDidLoad() {\n    this.addIO();\n  }\n\n  disconnectedCallback() {\n    this.removeIO();\n  }\n\n  render() {\n    const bgStyle = !!this.loadSrc\n      ? { 'background-image': `url(${this.loadSrc})` }\n      : {};\n\n    return (\n      <div class=\"img\">\n        <nano-skeleton class=\"img__loader\"></nano-skeleton>\n        {!!this.background && (\n          <div\n            class={{\n              loaded: this.hasLoaded,\n              img__bg: true,\n              'no-height': this.autoHeight === 'image',\n            }}\n            style={bgStyle}\n          >\n            <slot />\n          </div>\n        )}\n        <img\n          class={{\n            img__image: true,\n            loaded: this.hasLoaded,\n            hide: this.background,\n            'no-height': this.autoHeight === 'content',\n          }}\n          decoding=\"async\"\n          src={Build.isServer ? this.src : this.loadSrc}\n          loading={Build.isServer && this.lazy ? 'lazy' : undefined}\n          alt={this.alt}\n          onLoad={this.onLoad}\n          onError={this.loadError}\n        />\n        <nano-resize-observe\n          class=\"img__observer\"\n          onNanoResizeStateChange={this.onResize}\n          states={this.imgStates}\n        />\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/nano-components/p-365c997a.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{c as t}from"./p-fc585ea2.js";import"./p-f6a8467a.js";import"./p-ee045579.js";import"./p-9746b0a5.js";import"./p-9ebbb814.js";const o="table.worker";const p="stencil.table.worker";const s=new URL("p-bd51e29f.js",import.meta.url).href;const e=new Blob(['importScripts("'+s+'")'],{type:"text/javascript"});const r=URL.createObjectURL(e);const c=t(r,o,p);URL.revokeObjectURL(r);export{c as worker,p as workerMsgId,o as workerName,s as workerPath};
-//# sourceMappingURL=p-365c997a.js.map

package/dist/nano-components/p-87bc66b5.entry.js

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

package/dist/nano-components/p-87bc66b5.entry.js.map

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