@nanoporetech-digital/components 7.6.0 → 7.7.0

package/dist/nano-components/{index-d7a4a150.js → index-f5f7b950.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{e as t,f as e}from"./index-3118109b.js";const n=(t,e,n)=>{const s=t.get(e);if(!s){t.set(e,[n])}else if(!s.includes(n)){s.push(n)}};const s=(t,e)=>{let n;return(...s)=>{if(n){clearTimeout(n)}n=setTimeout((()=>{n=0;t(...s)}),e)}};const o=t=>!("isConnected"in t)||t.isConnected;const r=s((t=>{for(let e of t.keys()){t.set(e,t.get(e).filter(o))}}),2e3);const c=()=>{if(typeof t!=="function"){return{}}const s=new Map;return{dispose:()=>s.clear(),get:e=>{const o=t();if(o){n(s,e,o)}},set:t=>{const n=s.get(t);if(n){s.set(t,n.filter(e))}r(s)},reset:()=>{s.forEach((t=>t.forEach(e)));r(s)}}};const i=t=>typeof t==="function"?t():t;const u=(t,e=((t,e)=>t!==e))=>{const n=i(t);let s=new Map(Object.entries(n??{}));const o={dispose:[],get:[],set:[],reset:[]};const r=()=>{s=new Map(Object.entries(i(t)??{}));o.reset.forEach((t=>t()))};const c=()=>{o.dispose.forEach((t=>t()));r()};const u=t=>{o.get.forEach((e=>e(t)));return s.get(t)};const p=(t,n)=>{const r=s.get(t);if(e(n,r,t)){s.set(t,n);o.set.forEach((e=>e(t,n,r)))}};const a=typeof Proxy==="undefined"?{}:new Proxy(n,{get(t,e){return u(e)},ownKeys(t){return Array.from(s.keys())},getOwnPropertyDescriptor(){return{enumerable:true,configurable:true}},has(t,e){return s.has(e)},set(t,e,n){p(e,n);return true}});const d=(t,e)=>{o[t].push(e);return()=>{f(o[t],e)}};const g=(e,n)=>{const s=d("set",((t,s)=>{if(t===e){n(s)}}));const o=d("reset",(()=>n(i(t)[e])));return()=>{s();o()}};const y=(...t)=>{const e=t.reduce(((t,e)=>{if(e.set){t.push(d("set",e.set))}if(e.get){t.push(d("get",e.get))}if(e.reset){t.push(d("reset",e.reset))}if(e.dispose){t.push(d("dispose",e.dispose))}return t}),[]);return()=>e.forEach((t=>t()))};const l=t=>{const e=s.get(t);o.set.forEach((n=>n(t,e,e)))};return{state:a,get:u,set:p,on:d,onChange:g,use:y,dispose:c,reset:r,forceUpdate:l}};const f=(t,e)=>{const n=t.indexOf(e);if(n>=0){t[n]=t[t.length-1];t.length--}};const p=(t,e)=>{const n=u(t,e);n.use(c());return n};export{p as c};
-//# sourceMappingURL=index-d7a4a150.js.map
+import{f as t,i as e}from"./index-6cc72cd9.js";const n=(t,e,n)=>{const s=t.get(e);if(!s){t.set(e,[n])}else if(!s.includes(n)){s.push(n)}};const s=(t,e)=>{let n;return(...s)=>{if(n){clearTimeout(n)}n=setTimeout((()=>{n=0;t(...s)}),e)}};const o=t=>!("isConnected"in t)||t.isConnected;const r=s((t=>{for(let e of t.keys()){t.set(e,t.get(e).filter(o))}}),2e3);const c=()=>{if(typeof t!=="function"){return{}}const s=new Map;return{dispose:()=>s.clear(),get:e=>{const o=t();if(o){n(s,e,o)}},set:t=>{const n=s.get(t);if(n){s.set(t,n.filter(e))}r(s)},reset:()=>{s.forEach((t=>t.forEach(e)));r(s)}}};const i=t=>typeof t==="function"?t():t;const u=(t,e=((t,e)=>t!==e))=>{const n=i(t);let s=new Map(Object.entries(n??{}));const o={dispose:[],get:[],set:[],reset:[]};const r=()=>{s=new Map(Object.entries(i(t)??{}));o.reset.forEach((t=>t()))};const c=()=>{o.dispose.forEach((t=>t()));r()};const u=t=>{o.get.forEach((e=>e(t)));return s.get(t)};const p=(t,n)=>{const r=s.get(t);if(e(n,r,t)){s.set(t,n);o.set.forEach((e=>e(t,n,r)))}};const a=typeof Proxy==="undefined"?{}:new Proxy(n,{get(t,e){return u(e)},ownKeys(t){return Array.from(s.keys())},getOwnPropertyDescriptor(){return{enumerable:true,configurable:true}},has(t,e){return s.has(e)},set(t,e,n){p(e,n);return true}});const d=(t,e)=>{o[t].push(e);return()=>{f(o[t],e)}};const g=(e,n)=>{const s=d("set",((t,s)=>{if(t===e){n(s)}}));const o=d("reset",(()=>n(i(t)[e])));return()=>{s();o()}};const y=(...t)=>{const e=t.reduce(((t,e)=>{if(e.set){t.push(d("set",e.set))}if(e.get){t.push(d("get",e.get))}if(e.reset){t.push(d("reset",e.reset))}if(e.dispose){t.push(d("dispose",e.dispose))}return t}),[]);return()=>e.forEach((t=>t()))};const l=t=>{const e=s.get(t);o.set.forEach((n=>n(t,e,e)))};return{state:a,get:u,set:p,on:d,onChange:g,use:y,dispose:c,reset:r,forceUpdate:l}};const f=(t,e)=>{const n=t.indexOf(e);if(n>=0){t[n]=t[t.length-1];t.length--}};const p=(t,e)=>{const n=u(t,e);n.use(c());return n};export{p as c};
+//# sourceMappingURL=index-f5f7b950.js.map

package/dist/nano-components/index.esm.js

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-export{d as nanoDebounce,t as nanoThrottle}from"./throttle-df960210.js";export{g as nanoGetTabElements}from"./tabbable-44932eb7.js";export{h}from"./index-3118109b.js";const n=(n,o=[])=>`${n}\n    ${o.length?o.map(((n,o)=>`<button data-btn="${o}" class="button ${n.classes}" slot="footer">${n.content}</button>`)).join(""):""}`;const o=(n,o=[])=>{if(o.length){Array.from(n.querySelectorAll('button[slot="footer"]')).map((n=>{const t=o.find(((o,t)=>n.dataset.btn===t.toString()));if(t&&t.handler){n.addEventListener("click",t.handler)}}))}};async function e(t,e="tr",a,c,i=[]){const r={color:"primary",duration:3e3,closable:true,...c};a=a||"light/circle-info";const s=Object.assign(document.createElement("nano-alert"),{...r,open:false,innerHTML:`\n        <nano-icon name="${a}" slot="icon"></nano-icon>\n        ${n(t,i)}\n      `});o(s,i);document.body.appendChild(s);return new Promise((n=>{requestAnimationFrame((async o=>{await s.toast(e);n(s)}))}))}function a(t,e=[],a,c="light/circle-info",i={}){const r={color:"primary",duration:Infinity,closable:false,...i};c=c||"light/circle-info";const s=Object.assign(document.createElement("nano-alert"),{...r,open:false,innerHTML:`\n        ${c?`<nano-icon name="${c}" slot="icon"></nano-icon>`:""}\n        ${n(t,e)}\n      `});o(s,e);document.body.appendChild(s);return new Promise((n=>{setTimeout((async o=>{await s.alert(a);n(s)}),100)}))}function c(n,o=[],t){const e={noUserDismiss:false,label:"Dialog",...t};const a=Object.assign(document.createElement("nano-dialog"),{...e,open:false,innerHTML:`\n      ${n}\n      ${o.length?o.map(((n,o)=>`<button data-btn="${o}" class="button ${n.classes}" slot="footer">${n.content}</button>`)).join(""):""}`});if(o.length){Array.from(a.querySelectorAll('button[slot="footer"]')).map((n=>{const t=o.find(((o,t)=>n.dataset.btn===t.toString()));if(t&&t.handler){n.addEventListener("click",t.handler)}}))}document.body.appendChild(a);return a}const i=(n={})=>{if(typeof window==="undefined"){return}};export{i as initialize,c as nanoCreateDialog,a as nanoShowAlert,e as nanoShowToast};
+import{N as n}from"./index-6cc72cd9.js";import{t as o,s as e}from"./renderer-4bc3e2dc.js";export{g as getTagPrefix}from"./renderer-4bc3e2dc.js";export{d as nanoDebounce,t as nanoThrottle}from"./throttle-df960210.js";export{g as nanoGetTabElements}from"./tabbable-44932eb7.js";const r=(n,o=[])=>`${n}\n    ${o.length?o.map(((n,o)=>`<button data-btn="${o}" class="button ${n.classes}" slot="footer">${n.content}</button>`)).join(""):""}`;const c=(n,o=[])=>{if(o.length){Array.from(n.querySelectorAll('button[slot="footer"]')).map((n=>{const t=o.find(((o,t)=>n.dataset.btn===t.toString()));if(t&&t.handler){n.addEventListener("click",t.handler)}}))}};async function s(n,t="tr",e,s,a=[]){const i={color:"primary",duration:3e3,closable:true,...s};e=e||"light/circle-info";const l=Object.assign(document.createElement(o("nano-alert")),{...i,open:false,innerHTML:`\n        <nano-icon name="${e}" slot="icon"></nano-icon>\n        ${r(n,a)}\n      `});c(l,a);document.body.appendChild(l);return new Promise((n=>{requestAnimationFrame((async o=>{await l.toast(t);n(l)}))}))}function a(n,t=[],e,s="light/circle-info",a={}){const i={color:"primary",duration:Infinity,closable:false,...a};s=s||"light/circle-info";const l=Object.assign(document.createElement(o("nano-alert")),{...i,open:false,innerHTML:`\n        ${s?`<nano-icon name="${s}" slot="icon"></nano-icon>`:""}\n        ${r(n,t)}\n      `});c(l,t);document.body.appendChild(l);return new Promise((n=>{setTimeout((async o=>{await l.alert(e);n(l)}),100)}))}function i(n,t=[],e){const r={noUserDismiss:false,label:"Dialog",...e};const c=Object.assign(document.createElement(o("nano-dialog")),{...r,open:false,innerHTML:`\n      ${n}\n      ${t.length?t.map(((n,o)=>`<button data-btn="${o}" class="button ${n.classes}" slot="footer">${n.content}</button>`)).join(""):""}`});if(t.length){Array.from(c.querySelectorAll('button[slot="footer"]')).map((n=>{const o=t.find(((o,t)=>n.dataset.btn===t.toString()));if(o&&o.handler){n.addEventListener("click",o.handler)}}))}document.body.appendChild(c);return c}function l(o){if(!window||!document)return;const t=e(o);const r=document.querySelector(`script[src$="/${n}.esm.js"]`);if(r){r["data-opts"]={transformTagName:t}}return t}const f=(n={})=>{if(typeof window==="undefined"){return}};export{l as componentPrefix,f as initialize,i as nanoCreateDialog,a as nanoShowAlert,s as nanoShowToast};
 //# sourceMappingURL=index.esm.js.map

package/dist/nano-components/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"names":["alertContent","message","buttons","length","map","btn","i","classes","content","join","addBtnHandlers","alert","Array","from","querySelectorAll","foundBtn","find","_fb","dataset","toString","handler","addEventListener","async","nanoShowToast","position","icon","alertOptions","opts","color","duration","closable","Object","assign","document","createElement","open","innerHTML","body","appendChild","Promise","resolve","requestAnimationFrame","_","toast","nanoShowAlert","label","Infinity","setTimeout","nanoCreateDialog","dialogOptions","noUserDismiss","dialog","initialize","helpers","window"],"sources":["src/components/alert/alert.helpers.ts","src/components/dialog/dialog.helpers.ts","src/index.ts"],"sourcesContent":["import type { Color } from '../../types/shared';\n\ninterface ImperativeAlertOptions {\n  color?: Color;\n  duration?: number;\n  closable?: boolean;\n}\n\ninterface ImperativeAlertButton {\n  classes: string;\n  content: string;\n  handler?: (e: MouseEvent) => void;\n}\n\nexport type AlertToastPosition = 'tr' | 'tl' | 'bl' | 'br';\n\nconst alertContent = (\n  message: string,\n  buttons: ImperativeAlertButton[] = []\n) => {\n  return `${message}\n    ${\n      buttons.length\n        ? buttons\n            .map(\n              (btn, i) =>\n                `<button data-btn=\"${i}\" class=\"button ${btn.classes}\" slot=\"footer\">${btn.content}</button>`\n            )\n            .join('')\n        : ''\n    }`;\n};\n\nconst addBtnHandlers = (\n  alert: HTMLNanoAlertElement,\n  buttons: ImperativeAlertButton[] = []\n) => {\n  if (buttons.length) {\n    Array.from(alert.querySelectorAll('button[slot=\"footer\"]')).map(\n      (btn: HTMLElement) => {\n        const foundBtn = buttons.find(\n          (_fb, i) => btn.dataset.btn === i.toString()\n        );\n        if (foundBtn && foundBtn.handler) {\n          btn.addEventListener('click', foundBtn.handler);\n        }\n      }\n    );\n  }\n};\n\n/**\n * `nano-alert` helper to create toast notifications imperatively.\n * @param message - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param position - the position of the toast. Options are 'tr', 'tl', 'bl' & 'br'\n * @param icon - name for the `nano-icon`\n * @param alertOptions - { color: Color, duration: number, closable: boolean }\n * @returns `Promise<void>`\n */\nexport async function nanoShowToast(\n  message: string,\n  position: AlertToastPosition = 'tr',\n  icon?: string,\n  alertOptions?: ImperativeAlertOptions,\n  buttons: ImperativeAlertButton[] = []\n) {\n  const opts: ImperativeAlertOptions = {\n    color: 'primary',\n    duration: 3000,\n    closable: true,\n    ...alertOptions,\n  };\n  icon = icon || 'light/circle-info';\n  const alert: HTMLNanoAlertElement = Object.assign(\n    document.createElement('nano-alert'),\n    {\n      ...opts,\n      open: false,\n      innerHTML: `\n        <nano-icon name=\"${icon}\" slot=\"icon\"></nano-icon>\n        ${alertContent(message, buttons)}\n      `,\n    }\n  );\n  addBtnHandlers(alert, buttons);\n\n  document.body.appendChild(alert);\n  return new Promise<HTMLNanoAlertElement>((resolve) => {\n    requestAnimationFrame(async (_) => {\n      await alert.toast(position);\n      resolve(alert);\n    });\n  });\n}\n\n/**\n * `nano-alert` helper to create alert notifications imperatively.\n * @param message - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param buttons\n * @param label - descriptive label for assitive technology\n * @param icon - name for the `nano-icon`\n * @param alertOptions\n * @returns `Promise<void>`\n */\nexport function nanoShowAlert(\n  message: string,\n  buttons: ImperativeAlertButton[] = [],\n  label: string,\n  icon: string | undefined = 'light/circle-info',\n  alertOptions: ImperativeAlertOptions = {}\n) {\n  const opts: ImperativeAlertOptions = {\n    color: 'primary',\n    duration: Infinity,\n    closable: false,\n    ...alertOptions,\n  };\n  icon = icon || 'light/circle-info';\n  const alert: HTMLNanoAlertElement = Object.assign(\n    document.createElement('nano-alert'),\n    {\n      ...opts,\n      open: false,\n      innerHTML: `\n        ${icon ? `<nano-icon name=\"${icon}\" slot=\"icon\"></nano-icon>` : ''}\n        ${alertContent(message, buttons)}\n      `,\n    }\n  );\n  addBtnHandlers(alert, buttons);\n\n  document.body.appendChild(alert);\n  return new Promise<HTMLNanoAlertElement>((resolve) => {\n    setTimeout(async (_) => {\n      await alert.alert(label);\n      resolve(alert);\n    }, 100);\n  });\n}\n","interface ImperativeDialogOptions {\n  noUserDismiss: boolean;\n  noHeader?: boolean;\n  noFooter?: boolean;\n  label: string;\n}\n/**\n * `nano-dialog` helper to create dialog modals imperatively.\n * @param body - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param buttons - { classes: string; content: string; handler: () => {} }[]\n * @param dialogOptions - { noUserDismiss: boolean, noHeader?: boolean, noFooter?: boolean, label: string }\n * @returns `Promise<void>`\n */\nexport function nanoCreateDialog(\n  body: string,\n  buttons: { classes: string; content: string; handler: () => void }[] = [],\n  dialogOptions?: ImperativeDialogOptions\n) {\n  const opts: ImperativeDialogOptions = {\n    noUserDismiss: false,\n    label: 'Dialog',\n    ...dialogOptions,\n  };\n  const dialog: HTMLNanoDialogElement = Object.assign(\n    document.createElement('nano-dialog'),\n    {\n      ...opts,\n      open: false,\n      innerHTML: `\n      ${body}\n      ${\n        buttons.length\n          ? buttons\n              .map(\n                (btn, i) =>\n                  `<button data-btn=\"${i}\" class=\"button ${btn.classes}\" slot=\"footer\">${btn.content}</button>`\n              )\n              .join('')\n          : ''\n      }`,\n    }\n  );\n\n  if (buttons.length) {\n    Array.from(dialog.querySelectorAll('button[slot=\"footer\"]')).map(\n      (btn: HTMLElement) => {\n        const foundBtn = buttons.find(\n          (_fb, i) => btn.dataset.btn === i.toString()\n        );\n        if (foundBtn && foundBtn.handler) {\n          btn.addEventListener('click', foundBtn.handler);\n        }\n      }\n    );\n  }\n\n  document.body.appendChild(dialog);\n  return dialog;\n}\n","// import { setPlatformHelpers } from '@stencil/core';\nexport * from './components/alert/alert.helpers';\nexport * from './components/dialog/dialog.helpers';\nexport {\n  debounce as nanoDebounce,\n  throttle as nanoThrottle,\n} from './utils/throttle';\nexport { getTabbableElements as nanoGetTabElements } from './utils/tabbable';\nexport * from './components';\nexport { h } from '@stencil/core';\n\nexport const initialize = (\n  helpers: { _ael?: any; _ce?: any; _rel?: any } = {}\n) => {\n  if (typeof (window as any) === 'undefined') {\n    return;\n  }\n\n  const platformHelpers: any = {};\n  if (helpers._ael) {\n    platformHelpers.ael = helpers._ael;\n  }\n  if (helpers._rel) {\n    platformHelpers.rel = helpers._rel;\n  }\n  if (helpers._ce) {\n    platformHelpers.ce = helpers._ce;\n  }\n  // setPlatformHelpers(platformHelpers);\n};\n"],"mappings":";;;uKAgBA,MAAMA,EAAe,CACnBC,EACAC,EAAmC,KAE5B,GAAGD,UAENC,EAAQC,OACJD,EACGE,KACC,CAACC,EAAKC,IACJ,qBAAqBA,oBAAoBD,EAAIE,0BAA0BF,EAAIG,qBAE9EC,KAAK,IACR,KAIV,MAAMC,EAAiB,CACrBC,EACAT,EAAmC,MAEnC,GAAIA,EAAQC,OAAQ,CAClBS,MAAMC,KAAKF,EAAMG,iBAAiB,0BAA0BV,KACzDC,IACC,MAAMU,EAAWb,EAAQc,MACvB,CAACC,EAAKX,IAAMD,EAAIa,QAAQb,MAAQC,EAAEa,aAEpC,GAAIJ,GAAYA,EAASK,QAAS,CAChCf,EAAIgB,iBAAiB,QAASN,EAASK,Q,OAe1CE,eAAeC,EACpBtB,EACAuB,EAA+B,KAC/BC,EACAC,EACAxB,EAAmC,IAEnC,MAAMyB,EAA+B,CACnCC,MAAO,UACPC,SAAU,IACVC,SAAU,QACPJ,GAELD,EAAOA,GAAQ,oBACf,MAAMd,EAA8BoB,OAAOC,OACzCC,SAASC,cAAc,cACvB,IACKP,EACHQ,KAAM,MACNC,UAAW,8BACUX,wCACjBzB,EAAaC,EAASC,eAI9BQ,EAAeC,EAAOT,GAEtB+B,SAASI,KAAKC,YAAY3B,GAC1B,OAAO,IAAI4B,SAA+BC,IACxCC,uBAAsBnB,MAAOoB,UACrB/B,EAAMgC,MAAMnB,GAClBgB,EAAQ7B,EAAM,GACd,GAEN,C,SAWgBiC,EACd3C,EACAC,EAAmC,GACnC2C,EACApB,EAA2B,oBAC3BC,EAAuC,IAEvC,MAAMC,EAA+B,CACnCC,MAAO,UACPC,SAAUiB,SACVhB,SAAU,SACPJ,GAELD,EAAOA,GAAQ,oBACf,MAAMd,EAA8BoB,OAAOC,OACzCC,SAASC,cAAc,cACvB,IACKP,EACHQ,KAAM,MACNC,UAAW,aACPX,EAAO,oBAAoBA,8BAAmC,eAC9DzB,EAAaC,EAASC,eAI9BQ,EAAeC,EAAOT,GAEtB+B,SAASI,KAAKC,YAAY3B,GAC1B,OAAO,IAAI4B,SAA+BC,IACxCO,YAAWzB,MAAOoB,UACV/B,EAAMA,MAAMkC,GAClBL,EAAQ7B,EAAM,GACb,IAAI,GAEX,C,SC7HgBqC,EACdX,EACAnC,EAAuE,GACvE+C,GAEA,MAAMtB,EAAgC,CACpCuB,cAAe,MACfL,MAAO,YACJI,GAEL,MAAME,EAAgCpB,OAAOC,OAC3CC,SAASC,cAAc,eACvB,IACKP,EACHQ,KAAM,MACNC,UAAW,WACTC,YAEAnC,EAAQC,OACJD,EACGE,KACC,CAACC,EAAKC,IACJ,qBAAqBA,oBAAoBD,EAAIE,0BAA0BF,EAAIG,qBAE9EC,KAAK,IACR,OAKV,GAAIP,EAAQC,OAAQ,CAClBS,MAAMC,KAAKsC,EAAOrC,iBAAiB,0BAA0BV,KAC1DC,IACC,MAAMU,EAAWb,EAAQc,MACvB,CAACC,EAAKX,IAAMD,EAAIa,QAAQb,MAAQC,EAAEa,aAEpC,GAAIJ,GAAYA,EAASK,QAAS,CAChCf,EAAIgB,iBAAiB,QAASN,EAASK,Q,KAM/Ca,SAASI,KAAKC,YAAYa,GAC1B,OAAOA,CACT,C,MC/CaC,EAAa,CACxBC,EAAiD,MAEjD,UAAYC,SAAmB,YAAa,CAC1C,M","ignoreList":[]}
+{"version":3,"names":["alertContent","message","buttons","length","map","btn","i","classes","content","join","addBtnHandlers","alert","Array","from","querySelectorAll","foundBtn","find","_fb","dataset","toString","handler","addEventListener","async","nanoShowToast","position","icon","alertOptions","opts","color","duration","closable","Object","assign","document","createElement","transformTag","open","innerHTML","body","appendChild","Promise","resolve","requestAnimationFrame","_","toast","nanoShowAlert","label","Infinity","setTimeout","nanoCreateDialog","dialogOptions","noUserDismiss","dialog","componentPrefix","prefix","window","tagTransform","setTagPrefix","autoLoaderScript","querySelector","NAMESPACE","transformTagName","initialize","helpers"],"sources":["src/components/alert/alert.helpers.ts","src/components/dialog/dialog.helpers.ts","src/index.ts"],"sourcesContent":["import { transformTag } from '../../utils/renderer';\nimport type { Color } from '../../types/shared';\n\ninterface ImperativeAlertOptions {\n  color?: Color;\n  duration?: number;\n  closable?: boolean;\n}\n\ninterface ImperativeAlertButton {\n  classes: string;\n  content: string;\n  handler?: (e: MouseEvent) => void;\n}\n\nexport type AlertToastPosition = 'tr' | 'tl' | 'bl' | 'br';\n\nconst alertContent = (\n  message: string,\n  buttons: ImperativeAlertButton[] = []\n) => {\n  return `${message}\n    ${\n      buttons.length\n        ? buttons\n            .map(\n              (btn, i) =>\n                `<button data-btn=\"${i}\" class=\"button ${btn.classes}\" slot=\"footer\">${btn.content}</button>`\n            )\n            .join('')\n        : ''\n    }`;\n};\n\nconst addBtnHandlers = (\n  alert: HTMLNanoAlertElement,\n  buttons: ImperativeAlertButton[] = []\n) => {\n  if (buttons.length) {\n    Array.from(alert.querySelectorAll('button[slot=\"footer\"]')).map(\n      (btn: HTMLElement) => {\n        const foundBtn = buttons.find(\n          (_fb, i) => btn.dataset.btn === i.toString()\n        );\n        if (foundBtn && foundBtn.handler) {\n          btn.addEventListener('click', foundBtn.handler);\n        }\n      }\n    );\n  }\n};\n\n/**\n * `nano-alert` helper to create toast notifications imperatively.\n * @param message - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param position - the position of the toast. Options are 'tr', 'tl', 'bl' & 'br'\n * @param icon - name for the `nano-icon`\n * @param alertOptions - { color: Color, duration: number, closable: boolean }\n * @returns `Promise<void>`\n */\nexport async function nanoShowToast(\n  message: string,\n  position: AlertToastPosition = 'tr',\n  icon?: string,\n  alertOptions?: ImperativeAlertOptions,\n  buttons: ImperativeAlertButton[] = []\n) {\n  const opts: ImperativeAlertOptions = {\n    color: 'primary',\n    duration: 3000,\n    closable: true,\n    ...alertOptions,\n  };\n  icon = icon || 'light/circle-info';\n  const alert: HTMLNanoAlertElement = Object.assign(\n    document.createElement(transformTag('nano-alert')) as HTMLNanoAlertElement,\n    {\n      ...opts,\n      open: false,\n      innerHTML: `\n        <nano-icon name=\"${icon}\" slot=\"icon\"></nano-icon>\n        ${alertContent(message, buttons)}\n      `,\n    }\n  );\n  addBtnHandlers(alert, buttons);\n\n  document.body.appendChild(alert);\n  return new Promise<HTMLNanoAlertElement>((resolve) => {\n    requestAnimationFrame(async (_) => {\n      await alert.toast(position);\n      resolve(alert);\n    });\n  });\n}\n\n/**\n * `nano-alert` helper to create alert notifications imperatively.\n * @param message - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param buttons\n * @param label - descriptive label for assitive technology\n * @param icon - name for the `nano-icon`\n * @param alertOptions\n * @returns `Promise<void>`\n */\nexport function nanoShowAlert(\n  message: string,\n  buttons: ImperativeAlertButton[] = [],\n  label: string,\n  icon: string | undefined = 'light/circle-info',\n  alertOptions: ImperativeAlertOptions = {}\n) {\n  const opts: ImperativeAlertOptions = {\n    color: 'primary',\n    duration: Infinity,\n    closable: false,\n    ...alertOptions,\n  };\n  icon = icon || 'light/circle-info';\n  const alert: HTMLNanoAlertElement = Object.assign(\n    document.createElement(transformTag('nano-alert')) as HTMLNanoAlertElement,\n    {\n      ...opts,\n      open: false,\n      innerHTML: `\n        ${icon ? `<nano-icon name=\"${icon}\" slot=\"icon\"></nano-icon>` : ''}\n        ${alertContent(message, buttons)}\n      `,\n    }\n  );\n  addBtnHandlers(alert, buttons);\n\n  document.body.appendChild(alert);\n  return new Promise<HTMLNanoAlertElement>((resolve) => {\n    setTimeout(async (_) => {\n      await alert.alert(label);\n      resolve(alert);\n    }, 100);\n  });\n}\n","import { transformTag } from '../../utils/renderer';\n\ninterface ImperativeDialogOptions {\n  noUserDismiss: boolean;\n  noHeader?: boolean;\n  noFooter?: boolean;\n  label: string;\n}\n/**\n * `nano-dialog` helper to create dialog modals imperatively.\n * @param body - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param buttons - { classes: string; content: string; handler: () => {} }[]\n * @param dialogOptions - { noUserDismiss: boolean, noHeader?: boolean, noFooter?: boolean, label: string }\n * @returns `Promise<void>`\n */\nexport function nanoCreateDialog(\n  body: string,\n  buttons: { classes: string; content: string; handler: () => void }[] = [],\n  dialogOptions?: ImperativeDialogOptions\n) {\n  const opts: ImperativeDialogOptions = {\n    noUserDismiss: false,\n    label: 'Dialog',\n    ...dialogOptions,\n  };\n  const dialog: HTMLNanoDialogElement = Object.assign(\n    document.createElement(\n      transformTag('nano-dialog')\n    ) as HTMLNanoDialogElement,\n    {\n      ...opts,\n      open: false,\n      innerHTML: `\n      ${body}\n      ${\n        buttons.length\n          ? buttons\n              .map(\n                (btn, i) =>\n                  `<button data-btn=\"${i}\" class=\"button ${btn.classes}\" slot=\"footer\">${btn.content}</button>`\n              )\n              .join('')\n          : ''\n      }`,\n    }\n  );\n\n  if (buttons.length) {\n    Array.from(dialog.querySelectorAll('button[slot=\"footer\"]')).map(\n      (btn: HTMLElement) => {\n        const foundBtn = buttons.find(\n          (_fb, i) => btn.dataset.btn === i.toString()\n        );\n        if (foundBtn && foundBtn.handler) {\n          btn.addEventListener('click', foundBtn.handler);\n        }\n      }\n    );\n  }\n\n  document.body.appendChild(dialog);\n  return dialog;\n}\n","// import { setPlatformHelpers } from '@stencil/core';\n// @ts-expect-error - NAMESPACE isn't officially exported\nimport { NAMESPACE } from '@stencil/core';\nimport { setTagPrefix } from './utils/renderer';\n\nexport * from './components/alert/alert.helpers';\nexport * from './components/dialog/dialog.helpers';\nexport {\n  debounce as nanoDebounce,\n  throttle as nanoThrottle,\n} from './utils/throttle';\nexport { getTabbableElements as nanoGetTabElements } from './utils/tabbable';\n\nexport function componentPrefix(prefix: string) {\n  if (!window || !document) return;\n\n  const tagTransform = setTagPrefix(prefix);\n\n  const autoLoaderScript = document.querySelector(\n    `script[src$=\"/${NAMESPACE}.esm.js\"]`\n  );\n  if (autoLoaderScript) {\n    autoLoaderScript['data-opts'] = {\n      transformTagName: tagTransform,\n    };\n  }\n  return tagTransform;\n}\n\nexport { getTagPrefix } from './utils/renderer';\n\nexport const initialize = (\n  helpers: { _ael?: any; _ce?: any; _rel?: any } = {}\n) => {\n  if (typeof (window as any) === 'undefined') {\n    return;\n  }\n  const platformHelpers: any = {};\n  if (helpers._ael) {\n    platformHelpers.ael = helpers._ael;\n  }\n  if (helpers._rel) {\n    platformHelpers.rel = helpers._rel;\n  }\n  if (helpers._ce) {\n    platformHelpers.ce = helpers._ce;\n  }\n  // setPlatformHelpers(platformHelpers);\n};\n\nexport * from './components';\n"],"mappings":";;;oRAiBA,MAAMA,EAAe,CACnBC,EACAC,EAAmC,KAE5B,GAAGD,UAENC,EAAQC,OACJD,EACGE,KACC,CAACC,EAAKC,IACJ,qBAAqBA,oBAAoBD,EAAIE,0BAA0BF,EAAIG,qBAE9EC,KAAK,IACR,KAIV,MAAMC,EAAiB,CACrBC,EACAT,EAAmC,MAEnC,GAAIA,EAAQC,OAAQ,CAClBS,MAAMC,KAAKF,EAAMG,iBAAiB,0BAA0BV,KACzDC,IACC,MAAMU,EAAWb,EAAQc,MACvB,CAACC,EAAKX,IAAMD,EAAIa,QAAQb,MAAQC,EAAEa,aAEpC,GAAIJ,GAAYA,EAASK,QAAS,CAChCf,EAAIgB,iBAAiB,QAASN,EAASK,Q,OAe1CE,eAAeC,EACpBtB,EACAuB,EAA+B,KAC/BC,EACAC,EACAxB,EAAmC,IAEnC,MAAMyB,EAA+B,CACnCC,MAAO,UACPC,SAAU,IACVC,SAAU,QACPJ,GAELD,EAAOA,GAAQ,oBACf,MAAMd,EAA8BoB,OAAOC,OACzCC,SAASC,cAAcC,EAAa,eACpC,IACKR,EACHS,KAAM,MACNC,UAAW,8BACUZ,wCACjBzB,EAAaC,EAASC,eAI9BQ,EAAeC,EAAOT,GAEtB+B,SAASK,KAAKC,YAAY5B,GAC1B,OAAO,IAAI6B,SAA+BC,IACxCC,uBAAsBpB,MAAOqB,UACrBhC,EAAMiC,MAAMpB,GAClBiB,EAAQ9B,EAAM,GACd,GAEN,C,SAWgBkC,EACd5C,EACAC,EAAmC,GACnC4C,EACArB,EAA2B,oBAC3BC,EAAuC,IAEvC,MAAMC,EAA+B,CACnCC,MAAO,UACPC,SAAUkB,SACVjB,SAAU,SACPJ,GAELD,EAAOA,GAAQ,oBACf,MAAMd,EAA8BoB,OAAOC,OACzCC,SAASC,cAAcC,EAAa,eACpC,IACKR,EACHS,KAAM,MACNC,UAAW,aACPZ,EAAO,oBAAoBA,8BAAmC,eAC9DzB,EAAaC,EAASC,eAI9BQ,EAAeC,EAAOT,GAEtB+B,SAASK,KAAKC,YAAY5B,GAC1B,OAAO,IAAI6B,SAA+BC,IACxCO,YAAW1B,MAAOqB,UACVhC,EAAMA,MAAMmC,GAClBL,EAAQ9B,EAAM,GACb,IAAI,GAEX,C,SC5HgBsC,EACdX,EACApC,EAAuE,GACvEgD,GAEA,MAAMvB,EAAgC,CACpCwB,cAAe,MACfL,MAAO,YACJI,GAEL,MAAME,EAAgCrB,OAAOC,OAC3CC,SAASC,cACPC,EAAa,gBAEf,IACKR,EACHS,KAAM,MACNC,UAAW,WACTC,YAEApC,EAAQC,OACJD,EACGE,KACC,CAACC,EAAKC,IACJ,qBAAqBA,oBAAoBD,EAAIE,0BAA0BF,EAAIG,qBAE9EC,KAAK,IACR,OAKV,GAAIP,EAAQC,OAAQ,CAClBS,MAAMC,KAAKuC,EAAOtC,iBAAiB,0BAA0BV,KAC1DC,IACC,MAAMU,EAAWb,EAAQc,MACvB,CAACC,EAAKX,IAAMD,EAAIa,QAAQb,MAAQC,EAAEa,aAEpC,GAAIJ,GAAYA,EAASK,QAAS,CAChCf,EAAIgB,iBAAiB,QAASN,EAASK,Q,KAM/Ca,SAASK,KAAKC,YAAYa,GAC1B,OAAOA,CACT,C,SCjDgBC,EAAgBC,GAC9B,IAAKC,SAAWtB,SAAU,OAE1B,MAAMuB,EAAeC,EAAaH,GAElC,MAAMI,EAAmBzB,SAAS0B,cAChC,iBAAiBC,cAEnB,GAAIF,EAAkB,CACpBA,EAAiB,aAAe,CAC9BG,iBAAkBL,E,CAGtB,OAAOA,CACT,C,MAIaM,EAAa,CACxBC,EAAiD,MAEjD,UAAYR,SAAmB,YAAa,CAC1C,M","ignoreList":[]}

package/dist/nano-components/lazyload-8ff69ba4.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{F as t,u as i}from"./nano-slides-2715825b.js";import"./index-6cc72cd9.js";import"./renderer-4bc3e2dc.js";t.createMethods.push("_createLazyload");const s=t.prototype;s._createLazyload=function(){this.on("select",this.lazyLoad)};s.lazyLoad=function(){const t=this.options.lazyLoad;if(!t){return}const i=typeof t=="number"?t:0;const s=this.getAdjacentCellElements(i);let o=[];s.forEach((function(t){const i=a(t);o=o.concat(i)}));o.forEach((function(t){new c(t,this)}),this)};function a(t){if(t.nodeName=="IMG"){const i=t.getAttribute("data-flickity-lazyload");const s=t.getAttribute("data-flickity-lazyload-src");const a=t.getAttribute("data-flickity-lazyload-srcset");if(i||s||a){return[t]}}const s="img[data-flickity-lazyload], "+"img[data-flickity-lazyload-src], img[data-flickity-lazyload-srcset]";const a=t.querySelectorAll(s);return i.makeArray(a)}function c(t,i){this.img=t;this.flickity=i;this.load()}c.prototype.handleEvent=i.handleEvent;c.prototype.load=function(){this.img.addEventListener("load",this);this.img.addEventListener("error",this);const t=this.img.getAttribute("data-flickity-lazyload")||this.img.getAttribute("data-flickity-lazyload-src");const i=this.img.getAttribute("data-flickity-lazyload-srcset");this.img.src=t;if(i){this.img.setAttribute("srcset",i)}this.img.removeAttribute("data-flickity-lazyload");this.img.removeAttribute("data-flickity-lazyload-src");this.img.removeAttribute("data-flickity-lazyload-srcset")};c.prototype.onload=function(t){this.complete(t,"flickity-lazyloaded")};c.prototype.onerror=function(t){this.complete(t,"flickity-lazyerror")};c.prototype.complete=function(t,i){this.img.removeEventListener("load",this);this.img.removeEventListener("error",this);const s=this.flickity.getParentCell(this.img);const a=s&&s.element;this.flickity.cellSizeChange(a);this.img.classList.add(i);this.flickity.dispatchEvent("lazyLoad",t,a)};t.LazyLoader=c;
+//# sourceMappingURL=lazyload-8ff69ba4.js.map

package/dist/nano-components/{lazyload-49b745e4.js.map → lazyload-8ff69ba4.js.map}

@@ -1 +1 @@
-{"version":3,"names":["Flickity","createMethods","push","proto","prototype","_createLazyload","this","on","lazyLoad","options","adjCount","cellElems","getAdjacentCellElements","lazyImages","forEach","cellElem","lazyCellImages","getCellLazyImages","concat","img","LazyLoader","nodeName","lazyloadAttr","getAttribute","srcAttr","srcsetAttr","lazySelector","imgs","querySelectorAll","utils","makeArray","flickity","load","handleEvent","addEventListener","src","srcset","setAttribute","removeAttribute","onload","event","complete","onerror","className","removeEventListener","cell","getParentCell","element","cellSizeChange","classList","add","dispatchEvent"],"sources":["src/components/slides/lib/js/lazyload.ts"],"sourcesContent":["import Flickity from './flickity';\nimport { utils } from './utils/utils';\n\nFlickity.createMethods.push('_createLazyload');\nconst proto = Flickity.prototype;\n\nproto._createLazyload = function () {\n  this.on('select', this.lazyLoad);\n};\n\nproto.lazyLoad = function () {\n  const lazyLoad = this.options.lazyLoad;\n  if (!lazyLoad) {\n    return;\n  }\n  // get adjacent cells, use lazyLoad option for adjacent count\n  const adjCount = typeof lazyLoad == 'number' ? lazyLoad : 0;\n  const cellElems = this.getAdjacentCellElements(adjCount);\n  // get lazy images in those cells\n  let lazyImages = [];\n  cellElems.forEach(function (cellElem) {\n    const lazyCellImages = getCellLazyImages(cellElem);\n    lazyImages = lazyImages.concat(lazyCellImages);\n  });\n  // load lazy images\n  lazyImages.forEach(function (img) {\n    new LazyLoader(img, this);\n  }, this);\n};\n\nfunction getCellLazyImages(cellElem) {\n  // check if cell element is lazy image\n  if (cellElem.nodeName == 'IMG') {\n    const lazyloadAttr = cellElem.getAttribute('data-flickity-lazyload');\n    const srcAttr = cellElem.getAttribute('data-flickity-lazyload-src');\n    const srcsetAttr = cellElem.getAttribute('data-flickity-lazyload-srcset');\n    if (lazyloadAttr || srcAttr || srcsetAttr) {\n      return [cellElem];\n    }\n  }\n  // select lazy images in cell\n  const lazySelector =\n    'img[data-flickity-lazyload], ' +\n    'img[data-flickity-lazyload-src], img[data-flickity-lazyload-srcset]';\n  const imgs = cellElem.querySelectorAll(lazySelector);\n  return utils.makeArray(imgs);\n}\n\n// -------------------------- LazyLoader -------------------------- //\n\n/**\n * class to handle loading images\n */\nfunction LazyLoader(img, flickity) {\n  this.img = img;\n  this.flickity = flickity;\n  this.load();\n}\n\nLazyLoader.prototype.handleEvent = utils.handleEvent;\n\nLazyLoader.prototype.load = function () {\n  this.img.addEventListener('load', this);\n  this.img.addEventListener('error', this);\n  // get src & srcset\n  const src =\n    this.img.getAttribute('data-flickity-lazyload') ||\n    this.img.getAttribute('data-flickity-lazyload-src');\n  const srcset = this.img.getAttribute('data-flickity-lazyload-srcset');\n  // set src & serset\n  this.img.src = src;\n  if (srcset) {\n    this.img.setAttribute('srcset', srcset);\n  }\n  // remove attr\n  this.img.removeAttribute('data-flickity-lazyload');\n  this.img.removeAttribute('data-flickity-lazyload-src');\n  this.img.removeAttribute('data-flickity-lazyload-srcset');\n};\n\nLazyLoader.prototype.onload = function (event) {\n  this.complete(event, 'flickity-lazyloaded');\n};\n\nLazyLoader.prototype.onerror = function (event) {\n  this.complete(event, 'flickity-lazyerror');\n};\n\nLazyLoader.prototype.complete = function (event, className) {\n  // unbind events\n  this.img.removeEventListener('load', this);\n  this.img.removeEventListener('error', this);\n\n  const cell = this.flickity.getParentCell(this.img);\n  const cellElem = cell && cell.element;\n  this.flickity.cellSizeChange(cellElem);\n\n  this.img.classList.add(className);\n  this.flickity.dispatchEvent('lazyLoad', event, cellElem);\n};\n\n// @ts-ignore\nFlickity.LazyLoader = LazyLoader;\n"],"mappings":";;;iFAGAA,EAASC,cAAcC,KAAK,mBAC5B,MAAMC,EAAQH,EAASI,UAEvBD,EAAME,gBAAkB,WACtBC,KAAKC,GAAG,SAAUD,KAAKE,SACzB,EAEAL,EAAMK,SAAW,WACf,MAAMA,EAAWF,KAAKG,QAAQD,SAC9B,IAAKA,EAAU,CACb,M,CAGF,MAAME,SAAkBF,GAAY,SAAWA,EAAW,EAC1D,MAAMG,EAAYL,KAAKM,wBAAwBF,GAE/C,IAAIG,EAAa,GACjBF,EAAUG,SAAQ,SAAUC,GAC1B,MAAMC,EAAiBC,EAAkBF,GACzCF,EAAaA,EAAWK,OAAOF,E,IAGjCH,EAAWC,SAAQ,SAAUK,GAC3B,IAAIC,EAAWD,EAAKb,K,GACnBA,KACL,EAEA,SAASW,EAAkBF,GAEzB,GAAIA,EAASM,UAAY,MAAO,CAC9B,MAAMC,EAAeP,EAASQ,aAAa,0BAC3C,MAAMC,EAAUT,EAASQ,aAAa,8BACtC,MAAME,EAAaV,EAASQ,aAAa,iCACzC,GAAID,GAAgBE,GAAWC,EAAY,CACzC,MAAO,CAACV,E,EAIZ,MAAMW,EACJ,gCACA,sEACF,MAAMC,EAAOZ,EAASa,iBAAiBF,GACvC,OAAOG,EAAMC,UAAUH,EACzB,CAOA,SAASP,EAAWD,EAAKY,GACvBzB,KAAKa,IAAMA,EACXb,KAAKyB,SAAWA,EAChBzB,KAAK0B,MACP,CAEAZ,EAAWhB,UAAU6B,YAAcJ,EAAMI,YAEzCb,EAAWhB,UAAU4B,KAAO,WAC1B1B,KAAKa,IAAIe,iBAAiB,OAAQ5B,MAClCA,KAAKa,IAAIe,iBAAiB,QAAS5B,MAEnC,MAAM6B,EACJ7B,KAAKa,IAAII,aAAa,2BACtBjB,KAAKa,IAAII,aAAa,8BACxB,MAAMa,EAAS9B,KAAKa,IAAII,aAAa,iCAErCjB,KAAKa,IAAIgB,IAAMA,EACf,GAAIC,EAAQ,CACV9B,KAAKa,IAAIkB,aAAa,SAAUD,E,CAGlC9B,KAAKa,IAAImB,gBAAgB,0BACzBhC,KAAKa,IAAImB,gBAAgB,8BACzBhC,KAAKa,IAAImB,gBAAgB,gCAC3B,EAEAlB,EAAWhB,UAAUmC,OAAS,SAAUC,GACtClC,KAAKmC,SAASD,EAAO,sBACvB,EAEApB,EAAWhB,UAAUsC,QAAU,SAAUF,GACvClC,KAAKmC,SAASD,EAAO,qBACvB,EAEApB,EAAWhB,UAAUqC,SAAW,SAAUD,EAAOG,GAE/CrC,KAAKa,IAAIyB,oBAAoB,OAAQtC,MACrCA,KAAKa,IAAIyB,oBAAoB,QAAStC,MAEtC,MAAMuC,EAAOvC,KAAKyB,SAASe,cAAcxC,KAAKa,KAC9C,MAAMJ,EAAW8B,GAAQA,EAAKE,QAC9BzC,KAAKyB,SAASiB,eAAejC,GAE7BT,KAAKa,IAAI8B,UAAUC,IAAIP,GACvBrC,KAAKyB,SAASoB,cAAc,WAAYX,EAAOzB,EACjD,EAGAf,EAASoB,WAAaA","ignoreList":[]}
+{"version":3,"names":["Flickity","createMethods","push","proto","prototype","_createLazyload","this","on","lazyLoad","options","adjCount","cellElems","getAdjacentCellElements","lazyImages","forEach","cellElem","lazyCellImages","getCellLazyImages","concat","img","LazyLoader","nodeName","lazyloadAttr","getAttribute","srcAttr","srcsetAttr","lazySelector","imgs","querySelectorAll","utils","makeArray","flickity","load","handleEvent","addEventListener","src","srcset","setAttribute","removeAttribute","onload","event","complete","onerror","className","removeEventListener","cell","getParentCell","element","cellSizeChange","classList","add","dispatchEvent"],"sources":["src/components/slides/lib/js/lazyload.ts"],"sourcesContent":["import Flickity from './flickity';\nimport { utils } from './utils/utils';\n\nFlickity.createMethods.push('_createLazyload');\nconst proto = Flickity.prototype;\n\nproto._createLazyload = function () {\n  this.on('select', this.lazyLoad);\n};\n\nproto.lazyLoad = function () {\n  const lazyLoad = this.options.lazyLoad;\n  if (!lazyLoad) {\n    return;\n  }\n  // get adjacent cells, use lazyLoad option for adjacent count\n  const adjCount = typeof lazyLoad == 'number' ? lazyLoad : 0;\n  const cellElems = this.getAdjacentCellElements(adjCount);\n  // get lazy images in those cells\n  let lazyImages = [];\n  cellElems.forEach(function (cellElem) {\n    const lazyCellImages = getCellLazyImages(cellElem);\n    lazyImages = lazyImages.concat(lazyCellImages);\n  });\n  // load lazy images\n  lazyImages.forEach(function (img) {\n    new LazyLoader(img, this);\n  }, this);\n};\n\nfunction getCellLazyImages(cellElem) {\n  // check if cell element is lazy image\n  if (cellElem.nodeName == 'IMG') {\n    const lazyloadAttr = cellElem.getAttribute('data-flickity-lazyload');\n    const srcAttr = cellElem.getAttribute('data-flickity-lazyload-src');\n    const srcsetAttr = cellElem.getAttribute('data-flickity-lazyload-srcset');\n    if (lazyloadAttr || srcAttr || srcsetAttr) {\n      return [cellElem];\n    }\n  }\n  // select lazy images in cell\n  const lazySelector =\n    'img[data-flickity-lazyload], ' +\n    'img[data-flickity-lazyload-src], img[data-flickity-lazyload-srcset]';\n  const imgs = cellElem.querySelectorAll(lazySelector);\n  return utils.makeArray(imgs);\n}\n\n// -------------------------- LazyLoader -------------------------- //\n\n/**\n * class to handle loading images\n */\nfunction LazyLoader(img, flickity) {\n  this.img = img;\n  this.flickity = flickity;\n  this.load();\n}\n\nLazyLoader.prototype.handleEvent = utils.handleEvent;\n\nLazyLoader.prototype.load = function () {\n  this.img.addEventListener('load', this);\n  this.img.addEventListener('error', this);\n  // get src & srcset\n  const src =\n    this.img.getAttribute('data-flickity-lazyload') ||\n    this.img.getAttribute('data-flickity-lazyload-src');\n  const srcset = this.img.getAttribute('data-flickity-lazyload-srcset');\n  // set src & serset\n  this.img.src = src;\n  if (srcset) {\n    this.img.setAttribute('srcset', srcset);\n  }\n  // remove attr\n  this.img.removeAttribute('data-flickity-lazyload');\n  this.img.removeAttribute('data-flickity-lazyload-src');\n  this.img.removeAttribute('data-flickity-lazyload-srcset');\n};\n\nLazyLoader.prototype.onload = function (event) {\n  this.complete(event, 'flickity-lazyloaded');\n};\n\nLazyLoader.prototype.onerror = function (event) {\n  this.complete(event, 'flickity-lazyerror');\n};\n\nLazyLoader.prototype.complete = function (event, className) {\n  // unbind events\n  this.img.removeEventListener('load', this);\n  this.img.removeEventListener('error', this);\n\n  const cell = this.flickity.getParentCell(this.img);\n  const cellElem = cell && cell.element;\n  this.flickity.cellSizeChange(cellElem);\n\n  this.img.classList.add(className);\n  this.flickity.dispatchEvent('lazyLoad', event, cellElem);\n};\n\n// @ts-ignore\nFlickity.LazyLoader = LazyLoader;\n"],"mappings":";;;gHAGAA,EAASC,cAAcC,KAAK,mBAC5B,MAAMC,EAAQH,EAASI,UAEvBD,EAAME,gBAAkB,WACtBC,KAAKC,GAAG,SAAUD,KAAKE,SACzB,EAEAL,EAAMK,SAAW,WACf,MAAMA,EAAWF,KAAKG,QAAQD,SAC9B,IAAKA,EAAU,CACb,M,CAGF,MAAME,SAAkBF,GAAY,SAAWA,EAAW,EAC1D,MAAMG,EAAYL,KAAKM,wBAAwBF,GAE/C,IAAIG,EAAa,GACjBF,EAAUG,SAAQ,SAAUC,GAC1B,MAAMC,EAAiBC,EAAkBF,GACzCF,EAAaA,EAAWK,OAAOF,E,IAGjCH,EAAWC,SAAQ,SAAUK,GAC3B,IAAIC,EAAWD,EAAKb,K,GACnBA,KACL,EAEA,SAASW,EAAkBF,GAEzB,GAAIA,EAASM,UAAY,MAAO,CAC9B,MAAMC,EAAeP,EAASQ,aAAa,0BAC3C,MAAMC,EAAUT,EAASQ,aAAa,8BACtC,MAAME,EAAaV,EAASQ,aAAa,iCACzC,GAAID,GAAgBE,GAAWC,EAAY,CACzC,MAAO,CAACV,E,EAIZ,MAAMW,EACJ,gCACA,sEACF,MAAMC,EAAOZ,EAASa,iBAAiBF,GACvC,OAAOG,EAAMC,UAAUH,EACzB,CAOA,SAASP,EAAWD,EAAKY,GACvBzB,KAAKa,IAAMA,EACXb,KAAKyB,SAAWA,EAChBzB,KAAK0B,MACP,CAEAZ,EAAWhB,UAAU6B,YAAcJ,EAAMI,YAEzCb,EAAWhB,UAAU4B,KAAO,WAC1B1B,KAAKa,IAAIe,iBAAiB,OAAQ5B,MAClCA,KAAKa,IAAIe,iBAAiB,QAAS5B,MAEnC,MAAM6B,EACJ7B,KAAKa,IAAII,aAAa,2BACtBjB,KAAKa,IAAII,aAAa,8BACxB,MAAMa,EAAS9B,KAAKa,IAAII,aAAa,iCAErCjB,KAAKa,IAAIgB,IAAMA,EACf,GAAIC,EAAQ,CACV9B,KAAKa,IAAIkB,aAAa,SAAUD,E,CAGlC9B,KAAKa,IAAImB,gBAAgB,0BACzBhC,KAAKa,IAAImB,gBAAgB,8BACzBhC,KAAKa,IAAImB,gBAAgB,gCAC3B,EAEAlB,EAAWhB,UAAUmC,OAAS,SAAUC,GACtClC,KAAKmC,SAASD,EAAO,sBACvB,EAEApB,EAAWhB,UAAUsC,QAAU,SAAUF,GACvClC,KAAKmC,SAASD,EAAO,qBACvB,EAEApB,EAAWhB,UAAUqC,SAAW,SAAUD,EAAOG,GAE/CrC,KAAKa,IAAIyB,oBAAoB,OAAQtC,MACrCA,KAAKa,IAAIyB,oBAAoB,QAAStC,MAEtC,MAAMuC,EAAOvC,KAAKyB,SAASe,cAAcxC,KAAKa,KAC9C,MAAMJ,EAAW8B,GAAQA,EAAKE,QAC9BzC,KAAKyB,SAASiB,eAAejC,GAE7BT,KAAKa,IAAI8B,UAAUC,IAAIP,GACvBrC,KAAKyB,SAASoB,cAAc,WAAYX,EAAOzB,EACjD,EAGAf,EAASoB,WAAaA","ignoreList":[]}

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

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as o,c as s,g as e,h as n,a as t}from"./index-3118109b.js";import{g as i}from"./dom-d7f9f24c.js";import{c as r}from"./theme-d553c17a.js";const a=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:block}";const d=a;const f=class{constructor(e){o(this,e);this.nanoToggle=s(this,"nanoToggle",7)}itemOpened;get el(){return e(this)}nanoToggle;color;onToggleHandler(o){o.stopPropagation();const s=i(this.el,"nano-details")||this.el.querySelectorAll("nano-details");s.forEach(((s,e)=>{if(s!==o.target)s.open=false;else this.itemOpened=e}));this.nanoToggle.emit()}onClosedHandler(o){o.stopPropagation();this.itemOpened=null;this.nanoToggle.emit()}render(){return n(t,{key:"04218d48d43e211e98c808e19308f5ff530616f1",class:{...r(this.color),[`nano-color-${this.itemOpened}`]:typeof this.itemOpened==="number"}},n("slot",{key:"47208f8dd5405fb037ead669df2da04fb38fdf77"}))}};f.style=d;export{f as nano_accordion};
+import{r as o,c as e,g as s,a as n}from"./index-6cc72cd9.js";import{t,h as r}from"./renderer-4bc3e2dc.js";import{g as a}from"./dom-fafdec9a.js";import{c as i}from"./theme-d553c17a.js";const c=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:block}";const d=c;const b=class{constructor(s){o(this,s);this.nanoToggle=e(this,"nanoToggle",7)}itemOpened;get el(){return s(this)}nanoToggle;color;onToggleHandler(o){o.stopPropagation();const e=a(this.el,t("nano-details"))||this.el.querySelectorAll(t("nano-details"));e.forEach(((e,s)=>{if(e!==o.target)e.open=false;else this.itemOpened=s}));this.nanoToggle.emit()}onClosedHandler(o){o.stopPropagation();this.itemOpened=null;this.nanoToggle.emit()}render(){return r(n,{key:"60b444ced7959370455b575616c5e0cfe45ae85d",class:{...i(this.color),[`nano-color-${this.itemOpened}`]:typeof this.itemOpened==="number","nano-accordion":true}},r("slot",{key:"53cb7e62571e9bc8e88a958a4b1a62550c4d797c"}))}};b.style=d;export{b as nano_accordion};
 //# sourceMappingURL=nano-accordion.entry.js.map

package/dist/nano-components/nano-accordion.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["accordionCss","NanoAccordionStyle0","Accordion","itemOpened","nanoToggle","color","onToggleHandler","event","stopPropagation","items","getDirectChildren","this","el","querySelectorAll","forEach","item","i","target","open","emit","onClosedHandler","render","h","Host","key","class","createColorClasses"],"sources":["src/components/accordion/accordion.scss?tag=nano-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import {\n  Component,\n  h,\n  Listen,\n  Element,\n  Host,\n  Prop,\n  EventEmitter,\n  Event,\n  State,\n} from '@stencil/core';\n\nimport { getDirectChildren } from '../../utils/dom';\nimport { createColorClasses } from '../../utils/theme';\nimport type { Color } from '../../types/shared';\n\n/**\n * Simple accordion - only one item open at a time - must be used with [details](story/components-accordion--details) elements.\n */\n@Component({\n  tag: 'nano-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: true,\n})\nexport class Accordion {\n  @State() itemOpened?: number;\n\n  @Element() el: HTMLNanoAccordionElement;\n\n  /**\n   * Fires when accordion elements toggle\n   */\n  @Event() nanoToggle: EventEmitter;\n\n  /**\n   * Color to use from the color palette.\n   */\n  @Prop() color?: Color;\n\n  @Listen('nanoOpened')\n  onToggleHandler(event: CustomEvent) {\n    event.stopPropagation();\n\n    const items =\n      getDirectChildren(this.el, 'nano-details') ||\n      this.el.querySelectorAll('nano-details');\n    items.forEach((item: HTMLNanoDetailsElement, i) => {\n      if (item !== event.target) item.open = false;\n      else this.itemOpened = i;\n    });\n    this.nanoToggle.emit();\n  }\n\n  @Listen('nanoClosed')\n  onClosedHandler(event: CustomEvent) {\n    event.stopPropagation();\n    this.itemOpened = null;\n    this.nanoToggle.emit();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          ...createColorClasses(this.color),\n          [`nano-color-${this.itemOpened}`]:\n            typeof this.itemOpened === 'number',\n        }}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":";;;kJAAA,MAAMA,EAAe,uOACrB,MAAAC,EAAeD,E,MCuBFE,EAAS,M,gEACXC,W,wBAOAC,WAKDC,MAGR,eAAAC,CAAgBC,GACdA,EAAMC,kBAEN,MAAMC,EACJC,EAAkBC,KAAKC,GAAI,iBAC3BD,KAAKC,GAAGC,iBAAiB,gBAC3BJ,EAAMK,SAAQ,CAACC,EAA8BC,KAC3C,GAAID,IAASR,EAAMU,OAAQF,EAAKG,KAAO,WAClCP,KAAKR,WAAaa,CAAC,IAE1BL,KAAKP,WAAWe,M,CAIlB,eAAAC,CAAgBb,GACdA,EAAMC,kBACNG,KAAKR,WAAa,KAClBQ,KAAKP,WAAWe,M,CAGlB,MAAAE,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,IACFC,EAAmBf,KAAKN,OAC3B,CAAC,cAAcM,KAAKR,qBACXQ,KAAKR,aAAe,WAG/BmB,EAAA,QAAAE,IAAA,6C","ignoreList":[]}
+{"version":3,"names":["accordionCss","NanoAccordionStyle0","Accordion","itemOpened","nanoToggle","color","onToggleHandler","event","stopPropagation","items","getDirectChildren","this","el","transformTag","querySelectorAll","forEach","item","i","target","open","emit","onClosedHandler","render","h","Host","key","class","createColorClasses"],"sources":["src/components/accordion/accordion.scss?tag=nano-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import {\n  Component,\n  Listen,\n  Element,\n  Host,\n  Prop,\n  EventEmitter,\n  Event,\n  State,\n} from '@stencil/core';\n\nimport { h, transformTag } from '../../utils/renderer';\nimport { getDirectChildren } from '../../utils/dom';\nimport { createColorClasses } from '../../utils/theme';\nimport type { Color } from '../../types/shared';\n\n/**\n * Simple accordion - only one item open at a time - must be used with [details](story/components-accordion--details) elements.\n */\n@Component({\n  tag: 'nano-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: true,\n})\nexport class Accordion {\n  @State() itemOpened?: number;\n\n  @Element() el: HTMLNanoAccordionElement;\n\n  /**\n   * Fires when accordion elements toggle\n   */\n  @Event() nanoToggle: EventEmitter;\n\n  /**\n   * Color to use from the color palette.\n   */\n  @Prop() color?: Color;\n\n  @Listen('nanoOpened')\n  onToggleHandler(event: CustomEvent) {\n    event.stopPropagation();\n\n    const items =\n      getDirectChildren(this.el, transformTag('nano-details')) ||\n      this.el.querySelectorAll(transformTag('nano-details'));\n    items.forEach((item: HTMLNanoDetailsElement, i) => {\n      if (item !== event.target) item.open = false;\n      else this.itemOpened = i;\n    });\n    this.nanoToggle.emit();\n  }\n\n  @Listen('nanoClosed')\n  onClosedHandler(event: CustomEvent) {\n    event.stopPropagation();\n    this.itemOpened = null;\n    this.nanoToggle.emit();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          ...createColorClasses(this.color),\n          [`nano-color-${this.itemOpened}`]:\n            typeof this.itemOpened === 'number',\n          'nano-accordion': true,\n        }}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":";;;wLAAA,MAAMA,EAAe,uOACrB,MAAAC,EAAeD,E,MCuBFE,EAAS,M,gEACXC,W,wBAOAC,WAKDC,MAGR,eAAAC,CAAgBC,GACdA,EAAMC,kBAEN,MAAMC,EACJC,EAAkBC,KAAKC,GAAIC,EAAa,kBACxCF,KAAKC,GAAGE,iBAAiBD,EAAa,iBACxCJ,EAAMM,SAAQ,CAACC,EAA8BC,KAC3C,GAAID,IAAST,EAAMW,OAAQF,EAAKG,KAAO,WAClCR,KAAKR,WAAac,CAAC,IAE1BN,KAAKP,WAAWgB,M,CAIlB,eAAAC,CAAgBd,GACdA,EAAMC,kBACNG,KAAKR,WAAa,KAClBQ,KAAKP,WAAWgB,M,CAGlB,MAAAE,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,IACFC,EAAmBhB,KAAKN,OAC3B,CAAC,cAAcM,KAAKR,qBACXQ,KAAKR,aAAe,SAC7B,iBAAkB,OAGpBoB,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

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

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as e,g as a,h as i,a as o}from"./index-3118109b.js";import{M as s}from"./modal-02828a39.js";import{l as n,u as r}from"./scroll-f373a189.js";import{c as l}from"./theme-d553c17a.js";import"./tabbable-44932eb7.js";import"./dom-d7f9f24c.js";const c=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--border-color:var(--nano-layer-border-color, rgba(0, 0, 0, 0.1));--border-width:var(--nano-layer-border-width, 1px);--background:var(--nano-layer-bg, #fff);--tint-color:var(--nano-color-base, var(--nano-color-primary, #007495));--icon-size:2rem;--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--close-button-color:#b5aea7;display:block}:host(.nano-color){--tint-color:var(--nano-color-base, var(--nano-color-primary, #007495))}.alert{position:relative;background-color:var(--background);border:solid var(--border-width) var(--border-color);border-block-start-width:4px;border-block-start-color:var(--tint-color);border-radius:var(--border-radius);opacity:0;transform:scale(0.9);transition:var(--nano-transition-medium, 0.5s) opacity ease, var(--nano-transition-fast, 0.3s) transform ease}.alert:focus{outline:none}.alert:not(.alert--showing){position:absolute;inline-size:1px;block-size:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.alert--open{opacity:1;transform:none}.alert--toasty,.alert--modal{box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));margin:var(--nano-spacing-medium, 16px)}.alert--modal.alert--nodismiss{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.alert__content{display:flex;align-items:stretch}.alert__modal-wrap{position:fixed;display:flex;align-items:center;justify-content:center;inset:0;z-index:var(--nano-layer-index-alert, 800)}.alert__message{flex:1 1 auto;padding:var(--nano-spacing-medium, 16px);overflow:hidden;line-height:1.6}.alert__close{--color:var(--close-button-color);flex:0 0 auto;display:flex;align-items:center;font-size:1.1em;padding-inline:0 var(--nano-spacing-medium, 16px);padding-block:0}.alert__footer{padding:0 var(--nano-spacing-small, 8px) 0;display:flex;flex-direction:row;justify-content:space-around;align-items:center}.alert__footer ::slotted(*){flex:1;margin:0 var(--nano-spacing-small, 8px) var(--nano-spacing-medium, 16px) !important}.alert__overlay{position:fixed;inset:0;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity;z-index:var(--nano-layer-index-alert, 800);-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));pointer-events:all}.alert__overlay--open{opacity:1}.alert__icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--icon-size)}.alert__icon ::slotted(*),.alert__icon::slotted(*){color:var(--tint-color);margin-inline-start:var(--nano-spacing-medium, 16px)}";const h=c;let d;let f;let m;let u;if(globalThis["document"]){d=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--tr"});f=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--tl"});m=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--bl"});u=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--br"})}const b=class{constructor(a){t(this,a);this.nanoShow=e(this,"nanoShow",7);this.nanoAfterShow=e(this,"nanoAfterShow",7);this.nanoHide=e(this,"nanoHide",7);this.nanoAfterHide=e(this,"nanoAfterHide",7)}autoHideTimeout;panel;overlay;modal;originalTrigger;goingToHide=false;goingToShow=false;isModal=false;isToast=false;isShowing=false;label;noDismiss=false;get host(){return a(this)}open=false;handleOpenChange(){if(this.open)this.show();else this.hide()}closable=false;color;duration=Infinity;handleDurationChange(){this.restartAutoHide()}hoist=false;handleHoistChange(){if(!this.hoist||document.body.children[0]===this.host)return;document.body.prepend(this.host)}nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;async show(){if(this.goingToShow)return;const t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;return false}this.host.hidden=false;this.goingToShow=true;this.open=true;{requestAnimationFrame((()=>{this.isShowing=true;this.goingToShow=false}))}if(this.duration<Infinity){clearTimeout(this.autoHideTimeout);this.autoHideTimeout=setTimeout((()=>this.hide()),this.duration)}}async hide(){if(this.goingToHide){return}const t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return false}this.goingToHide=true;this.open=false;requestAnimationFrame((()=>this.goingToHide=false));clearTimeout(this.autoHideTimeout)}async toast(t="tr"){this.isToast=true;return new Promise((e=>{let a;switch(t){case"tl":a=f;break;case"bl":a=m;break;case"br":a=u;break;default:a=d;break}if(!a.parentElement){document.body.appendChild(a)}a.appendChild(this.host);this.connectedCallback();this.show();const i=()=>{this.host.remove();this.isToast=false;e();if(!a.querySelector("nano-alert")){a.remove()}};this.host.addEventListener("nanoAfterHide",i,{once:true});this.host.addEventListener("nano-after-hide",i,{once:true})}))}async alert(t){this.isModal=true;this.label=t;return new Promise((t=>{if(!document.body.contains(this.host)){document.body.appendChild(this.host)}this.modal.activate();n(this.host);this.originalTrigger=document.activeElement;requestAnimationFrame((()=>{this.show()}));const e=()=>requestAnimationFrame((()=>this.panel.focus({preventScroll:true})));const a=()=>{this.modal.deactivate();this.host.remove();this.label=undefined;this.isModal=false;t();if(this.originalTrigger&&typeof this.originalTrigger.focus==="function"){setTimeout((()=>this.originalTrigger.focus()))}};this.host.addEventListener("nanoAfterShow",e,{once:true});this.host.addEventListener("nano-after-show",e,{once:true});this.host.addEventListener("nanoAfterHide",a,{once:true});this.host.addEventListener("nano-after-hide",a,{once:true})}))}handleMouseMove=()=>{this.restartAutoHide()};handleCloseClick=()=>{this.hide()};handleTransitionEnd=t=>{if(t.propertyName==="opacity"&&(t.target===this.panel||t.target===this.overlay)){this.host.hidden=!this.open;this.isShowing=this.open;if(this.open)this.nanoAfterShow.emit();else this.nanoAfterHide.emit()}};handleButtonClick=t=>{if(t.defaultPrevented)return;if(t.target.tagName&&t.target.tagName.toLowerCase()==="button")this.hide()};restartAutoHide=()=>{clearTimeout(this.autoHideTimeout);if(this.open&&this.duration<Infinity){this.autoHideTimeout=setTimeout((()=>this.hide()),this.duration)}};connectedCallback(){this.modal=new s(this.host);this.handleHoistChange();this.host.addEventListener("click",this.handleButtonClick);this.isShowing=typeof this.host.getAttribute("showing")==="string"}disconnectedCallback(){r(this.host);this.host.removeEventListener("click",this.handleButtonClick)}componentDidLoad(){if(this.open&&!this.isShowing){this.show()}}Panel=()=>i("div",{ref:t=>this.panel=t,part:"panel",class:{alert:true,"alert--open":this.open,"alert--toasty":this.isToast,"alert--modal":!!this.isModal,"alert--showing":this.isShowing,"alert--nodismiss":this.noDismiss},tabIndex:this.isModal?0:undefined,role:this.isModal?"alertdialog":"alert","aria-live":"assertive","aria-atomic":"true","aria-hidden":this.isShowing?"false":"true","aria-modal":this.isModal?"true":undefined,"aria-label":this.label?this.label:undefined,onMouseMove:this.handleMouseMove,onTransitionEnd:this.handleTransitionEnd},i("div",{class:"alert__content"},i("div",{part:"icon",class:"alert__icon"},i("slot",{name:"icon"})),i("div",{part:"message",class:"alert__message"},i("slot",null)),this.closable&&i("div",{class:"alert__close"},i("nano-icon-button",{class:"alert__close",iconName:"light/xmark",label:"close menu",onClick:this.handleCloseClick}))),i("div",{class:"alert__footer"},i("slot",{name:"footer"})));render(){return i(o,{key:"15bcc286efac5acab202d218203baee6737f385b",class:{...l(this.color)},showing:this.isShowing},this.isModal&&[i("div",{key:"22b78d8f7a22394f70c9d1457fb2dc5ec4b2556f",part:"overlay",class:{alert__overlay:true,"alert__overlay--open":this.open},ref:t=>this.overlay=t}),i("div",{key:"f3fcf43f5c7dc42aa7bd9dd5cac214044af5f4f5",class:"alert__modal-wrap",onClick:t=>{if(!t.target.classList.contains("alert__modal-wrap"))return;this.noDismiss=true;setTimeout((()=>this.noDismiss=false),250)}},i(this.Panel,{key:"2a3dc3e67dcfd71a739652337f6384d55bd2247e"}))],!this.isModal&&i(this.Panel,{key:"588ba40ffe5e9ba4d5b41838bda0c4f2ea11ea40"}))}static get watchers(){return{open:["handleOpenChange"],duration:["handleDurationChange"],hoist:["handleHoistChange"]}}};b.style=h;export{b as nano_alert};
+import{r as t,c as e,g as a,a as i}from"./index-6cc72cd9.js";import{M as o}from"./modal-02828a39.js";import{l as s,u as n}from"./scroll-1afc6a4e.js";import{c as r}from"./theme-d553c17a.js";import{h as l,t as c}from"./renderer-4bc3e2dc.js";import"./tabbable-44932eb7.js";import"./dom-fafdec9a.js";const h=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--border-color:var(--nano-layer-border-color, rgba(0, 0, 0, 0.1));--border-width:var(--nano-layer-border-width, 1px);--background:var(--nano-layer-bg, #fff);--tint-color:var(--nano-color-base, var(--nano-color-primary, #007495));--icon-size:2rem;--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--close-button-color:#b5aea7;display:block}:host(.nano-color){--tint-color:var(--nano-color-base, var(--nano-color-primary, #007495))}.alert{position:relative;background-color:var(--background);border:solid var(--border-width) var(--border-color);border-block-start-width:4px;border-block-start-color:var(--tint-color);border-radius:var(--border-radius);opacity:0;transform:scale(0.9);transition:var(--nano-transition-medium, 0.5s) opacity ease, var(--nano-transition-fast, 0.3s) transform ease}.alert:focus{outline:none}.alert:not(.alert--showing){position:absolute;inline-size:1px;block-size:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.alert--open{opacity:1;transform:none}.alert--toasty,.alert--modal{box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));margin:var(--nano-spacing-medium, 16px)}.alert--modal.alert--nodismiss{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.alert__content{display:flex;align-items:stretch}.alert__modal-wrap{position:fixed;display:flex;align-items:center;justify-content:center;inset:0;z-index:var(--nano-layer-index-alert, 800)}.alert__message{flex:1 1 auto;padding:var(--nano-spacing-medium, 16px);overflow:hidden;line-height:1.6}.alert__close{--color:var(--close-button-color);flex:0 0 auto;display:flex;align-items:center;font-size:1.1em;padding-inline:0 var(--nano-spacing-medium, 16px);padding-block:0}.alert__footer{padding:0 var(--nano-spacing-small, 8px) 0;display:flex;flex-direction:row;justify-content:space-around;align-items:center}.alert__footer ::slotted(*){flex:1;margin:0 var(--nano-spacing-small, 8px) var(--nano-spacing-medium, 16px) !important}.alert__overlay{position:fixed;inset:0;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity;z-index:var(--nano-layer-index-alert, 800);-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));pointer-events:all}.alert__overlay--open{opacity:1}.alert__icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--icon-size)}.alert__icon ::slotted(*),.alert__icon::slotted(*){color:var(--tint-color);margin-inline-start:var(--nano-spacing-medium, 16px)}";const d=h;let f;let m;let u;let b;if(globalThis["document"]){f=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--tr"});m=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--tl"});u=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--bl"});b=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--br"})}const p=class{constructor(a){t(this,a);this.nanoShow=e(this,"nanoShow",7);this.nanoAfterShow=e(this,"nanoAfterShow",7);this.nanoHide=e(this,"nanoHide",7);this.nanoAfterHide=e(this,"nanoAfterHide",7)}autoHideTimeout;panel;overlay;modal;originalTrigger;goingToHide=false;goingToShow=false;isModal=false;isToast=false;isShowing=false;label;noDismiss=false;get host(){return a(this)}open=false;handleOpenChange(){if(this.open)this.show();else this.hide()}closable=false;color;duration=Infinity;handleDurationChange(){this.restartAutoHide()}hoist=false;handleHoistChange(){if(!this.hoist||document.body.children[0]===this.host)return;document.body.prepend(this.host)}nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;async show(){if(this.goingToShow)return;const t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;return false}this.host.hidden=false;this.goingToShow=true;this.open=true;{requestAnimationFrame((()=>{this.isShowing=true;this.goingToShow=false}))}if(this.duration<Infinity){clearTimeout(this.autoHideTimeout);this.autoHideTimeout=setTimeout((()=>this.hide()),this.duration)}}async hide(){if(this.goingToHide){return}const t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return false}this.goingToHide=true;this.open=false;requestAnimationFrame((()=>this.goingToHide=false));clearTimeout(this.autoHideTimeout)}async toast(t="tr"){this.isToast=true;return new Promise((e=>{let a;switch(t){case"tl":a=m;break;case"bl":a=u;break;case"br":a=b;break;default:a=f;break}if(!a.parentElement){document.body.appendChild(a)}a.appendChild(this.host);this.connectedCallback();this.show();const i=()=>{this.host.remove();this.isToast=false;e();if(!a.querySelector(c("nano-alert"))){a.remove()}};this.host.addEventListener("nanoAfterHide",i,{once:true});this.host.addEventListener("nano-after-hide",i,{once:true})}))}async alert(t){this.isModal=true;this.label=t;return new Promise((t=>{if(!document.body.contains(this.host)){document.body.appendChild(this.host)}this.modal.activate();s(this.host);this.originalTrigger=document.activeElement;requestAnimationFrame((()=>{this.show()}));const e=()=>requestAnimationFrame((()=>this.panel.focus({preventScroll:true})));const a=()=>{this.modal.deactivate();this.host.remove();this.label=undefined;this.isModal=false;t();if(this.originalTrigger&&typeof this.originalTrigger.focus==="function"){setTimeout((()=>this.originalTrigger.focus()))}};this.host.addEventListener("nanoAfterShow",e,{once:true});this.host.addEventListener("nano-after-show",e,{once:true});this.host.addEventListener("nanoAfterHide",a,{once:true});this.host.addEventListener("nano-after-hide",a,{once:true})}))}handleMouseMove=()=>{this.restartAutoHide()};handleCloseClick=()=>{this.hide()};handleTransitionEnd=t=>{if(t.propertyName==="opacity"&&(t.target===this.panel||t.target===this.overlay)){this.host.hidden=!this.open;this.isShowing=this.open;if(this.open)this.nanoAfterShow.emit();else this.nanoAfterHide.emit()}};handleButtonClick=t=>{if(t.defaultPrevented)return;if(t.target.tagName&&t.target.tagName.toLowerCase()==="button")this.hide()};restartAutoHide=()=>{clearTimeout(this.autoHideTimeout);if(this.open&&this.duration<Infinity){this.autoHideTimeout=setTimeout((()=>this.hide()),this.duration)}};connectedCallback(){this.modal=new o(this.host);this.handleHoistChange();this.host.addEventListener("click",this.handleButtonClick);this.isShowing=typeof this.host.getAttribute("showing")==="string"}disconnectedCallback(){n(this.host);this.host.removeEventListener("click",this.handleButtonClick)}componentDidLoad(){if(this.open&&!this.isShowing){this.show()}}Panel=()=>l("div",{ref:t=>this.panel=t,part:"panel",class:{alert:true,"alert--open":this.open,"alert--toasty":this.isToast,"alert--modal":!!this.isModal,"alert--showing":this.isShowing,"alert--nodismiss":this.noDismiss},tabIndex:this.isModal?0:undefined,role:this.isModal?"alertdialog":"alert","aria-live":"assertive","aria-atomic":"true","aria-hidden":this.isShowing?"false":"true","aria-modal":this.isModal?"true":undefined,"aria-label":this.label?this.label:undefined,onMouseMove:this.handleMouseMove,onTransitionEnd:this.handleTransitionEnd},l("div",{class:"alert__content"},l("div",{part:"icon",class:"alert__icon"},l("slot",{name:"icon"})),l("div",{part:"message",class:"alert__message"},l("slot",null)),this.closable&&l("div",{class:"alert__close"},l("nano-icon-button",{class:"alert__close",iconName:"light/xmark",label:"close menu",onClick:this.handleCloseClick}))),l("div",{class:"alert__footer"},l("slot",{name:"footer"})));render(){return l(i,{key:"0279c18aae2396ad177089cc75566e883d90e13c",class:{...r(this.color),"nano-alert":true},showing:this.isShowing},this.isModal&&[l("div",{key:"bf3e853b342bdd95fa760ce9318c280fc7763ac6",part:"overlay",class:{alert__overlay:true,"alert__overlay--open":this.open},ref:t=>this.overlay=t}),l("div",{key:"e1834c979a55eff1022d7c768d5d1f698afcfade",class:"alert__modal-wrap",onClick:t=>{if(!t.target.classList.contains("alert__modal-wrap"))return;this.noDismiss=true;setTimeout((()=>this.noDismiss=false),250)}},l(this.Panel,{key:"d30e62e22c1ea9b97b57590d9fe926bb0623b893"}))],!this.isModal&&l(this.Panel,{key:"cd72c23c11e27ea221ca7ab3327288f34cd8a597"}))}static get watchers(){return{open:["handleOpenChange"],duration:["handleDurationChange"],hoist:["handleHoistChange"]}}};p.style=d;export{p as nano_alert};
 //# sourceMappingURL=nano-alert.entry.js.map

package/dist/nano-components/nano-alert.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["alertCss","NanoAlertStyle0","toastStackTr","toastStackTl","toastStackBl","toastStackBr","globalThis","Object","assign","document","createElement","className","Alert","autoHideTimeout","panel","overlay","modal","originalTrigger","goingToHide","goingToShow","isModal","isToast","isShowing","label","noDismiss","open","handleOpenChange","this","show","hide","closable","color","duration","Infinity","handleDurationChange","restartAutoHide","hoist","handleHoistChange","body","children","host","prepend","nanoShow","nanoAfterShow","nanoHide","nanoAfterHide","emit","defaultPrevented","hidden","requestAnimationFrame","clearTimeout","setTimeout","toast","position","Promise","resolve","toastStack","parentElement","appendChild","connectedCallback","onClose","remove","querySelector","addEventListener","once","alert","contains","activate","lockBodyScrolling","activeElement","onOpen","focus","preventScroll","deactivate","undefined","handleMouseMove","handleCloseClick","handleTransitionEnd","event","propertyName","target","handleButtonClick","e","tagName","toLowerCase","Modal","getAttribute","disconnectedCallback","unlockBodyScrolling","removeEventListener","componentDidLoad","Panel","h","ref","div","part","class","tabIndex","role","onMouseMove","onTransitionEnd","name","iconName","onClick","render","Host","key","createColorClasses","showing","alert__overlay","classList"],"sources":["src/components/alert/alert.scss?tag=nano-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/nano-theme/tokens' as tokens;\n@use '../../global/style/utilities/mixins' as mx;\n\n:host {\n  /**\n   * @prop --border-radius: defaults to #{tokens.$layer-border-radius};\n   * @prop --border-color: defaults to #{tokens.$layer-border-color};\n   * @prop --border-width: defaults to #{tokens.$layer-border-width};\n   * @prop --background: defaults to #{tokens.$layer-bg-color};\n   * @prop --tint-color: defaults to var(--nano-color-base, #{nano-color(primary, base)});\n   * @prop --icon-size: defaults to 1.5rem;\n   * @prop --scrim-color: overlay colour of alert display. Defaults to #{tokens.$layer-overlay-dark};\n   * @prop --close-button-color: defaults to #{map.get(tokens.$colors, mediumgrey)} ;\n   */\n\n  --border-radius: #{tokens.$layer-border-radius};\n  --border-color: #{tokens.$layer-border-color};\n  --border-width: #{tokens.$layer-border-width};\n  --background: #{tokens.$layer-bg-color};\n  --tint-color: var(--nano-color-base, #{tokens.nano-color(primary, base)});\n  --icon-size: 2rem;\n  --scrim-color: #{tokens.$layer-overlay-dark};\n  --close-button-color: #{map.get(tokens.$colors, palegrey)};\n\n  display: block;\n}\n\n:host(.nano-color) {\n  --tint-color: var(--nano-color-base, #{tokens.nano-color(primary, base)});\n}\n\n.alert {\n  position: relative;\n  background-color: var(--background);\n  border: solid var(--border-width) var(--border-color);\n  border-block-start-width: 4px;\n  border-block-start-color: var(--tint-color);\n  border-radius: var(--border-radius);\n  opacity: 0;\n  transform: scale(0.9);\n  transition:\n    #{tokens.$transition-medium} opacity ease,\n    #{tokens.$transition-fast} transform ease;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:not(.alert--showing) {\n    @include mx.hidden;\n  }\n\n  &--open {\n    opacity: 1;\n    transform: none;\n  }\n\n  &--toasty,\n  &--modal {\n    box-shadow: #{tokens.$layer-shadow-large};\n    margin: #{tokens.$spacing-medium};\n  }\n\n  &--modal {\n    &.alert--nodismiss {\n      animation: cannotClose 0.25s ease-in-out 1;\n\n      @keyframes cannotClose {\n        0% {\n          transform: scale(1);\n        }\n\n        50% {\n          transform: scale(1.08);\n        }\n\n        100% {\n          transform: scale(1);\n        }\n      }\n    }\n  }\n}\n\n.alert__content {\n  display: flex;\n  align-items: stretch;\n}\n\n.alert__modal-wrap {\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  inset: 0;\n  z-index: #{tokens.$layer-index-alert};\n}\n\n.alert__message {\n  flex: 1 1 auto;\n  padding: #{tokens.$spacing-medium};\n  overflow: hidden;\n  line-height: 1.6;\n}\n\n.alert__close {\n  --color: var(--close-button-color);\n\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: 1.1em;\n  padding-inline: 0 #{tokens.$spacing-medium};\n  padding-block: 0;\n}\n\n.alert__footer {\n  padding: 0 #{tokens.$spacing-small} 0;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-around;\n  align-items: center;\n\n  ::slotted(*) {\n    flex: 1;\n    margin: 0 #{tokens.$spacing-small} #{tokens.$spacing-medium} !important;\n  }\n}\n\n.alert__overlay {\n  position: fixed;\n  inset: 0;\n  background-color: var(--scrim-color);\n  opacity: 0;\n  transition: #{tokens.$transition-fast} opacity;\n  z-index: #{tokens.$layer-index-alert};\n  backdrop-filter: blur(#{tokens.$layer-overlay-blur});\n  pointer-events: all;\n\n  &--open {\n    opacity: 1;\n  }\n}\n\n.alert__icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--icon-size);\n\n  ::slotted(*), &::slotted(*) {\n    color: var(--tint-color);\n    margin-inline-start: #{tokens.$spacing-medium};\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n  VNode,\n  Build,\n} from '@stencil/core';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { createColorClasses } from '../../utils/theme';\nimport type { Color } from '../../types/shared';\n\nlet toastStackTr: HTMLElement;\nlet toastStackTl: HTMLElement;\nlet toastStackBl: HTMLElement;\nlet toastStackBr: HTMLElement;\n\nif (globalThis['document']) {\n  toastStackTr = Object.assign(document.createElement('div'), {\n    className: 'nano-toast-stack nano-toast-stack--tr',\n  });\n  toastStackTl = Object.assign(document.createElement('div'), {\n    className: 'nano-toast-stack nano-toast-stack--tl',\n  });\n  toastStackBl = Object.assign(document.createElement('div'), {\n    className: 'nano-toast-stack nano-toast-stack--bl',\n  });\n  toastStackBr = Object.assign(document.createElement('div'), {\n    className: 'nano-toast-stack nano-toast-stack--br',\n  });\n}\n\n/**\n * Alerts are used to display important messages either inline, as toast notifications or as modals requiring action.\n * @slot - The alert's content.\n * @slot icon - An icon to show in the alert.\n * @slot footer - Place items at the bottom of the alert. Best used with `button` elements - esp when used as with the `alert()` method.\n */\n@Component({\n  tag: 'nano-alert',\n  styleUrl: 'alert.scss',\n  shadow: true,\n})\nexport class Alert implements ComponentInterface {\n  private autoHideTimeout: ReturnType<typeof setTimeout>;\n  private panel: HTMLElement;\n  private overlay: HTMLElement;\n  private modal: Modal;\n  private originalTrigger: HTMLElement | null;\n  private goingToHide = false;\n  private goingToShow = false;\n\n  @State() isModal = false;\n  @State() isToast = false;\n  @State() isShowing = false;\n  @State() label: string;\n  @State() noDismiss = false;\n\n  @Element() host: HTMLNanoAlertElement;\n\n  /** Indicates whether or not the alert 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.open) this.show();\n    else this.hide();\n  }\n\n  /** Set to true to make the alert closable. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** The color to use from the application's color palette. */\n  @Prop({ reflect: true }) color?: Color;\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the\n   * alert before it closes (e.g. moves the mouse over it), the timer will restart.\n   */\n  @Prop() duration = Infinity;\n\n  @Watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /**\n   * Relocate the dialog to the root of the DOM.\n   * Most useful in conjunction with `alert()` when parental elements\n   * have css stacking constraints which don't allow for `position: fixed`\n   */\n  @Prop() hoist = false;\n\n  @Watch('hoist')\n  handleHoistChange() {\n    if (!this.hoist || document.body.children[0] === this.host) return;\n    document.body.prepend(this.host);\n  }\n\n  /** Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the alert opens and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the alert closes and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /**\n   * Shows the alert.\n   * @returns a promise that resolves after the alert is shown\n   */\n  @Method()\n  async show() {\n    if (this.goingToShow) return;\n\n    const nanoShow = this.nanoShow.emit();\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      return false;\n    }\n\n    this.host.hidden = false;\n    this.goingToShow = true;\n    this.open = true;\n\n    if (Build.isBrowser) {\n      requestAnimationFrame(() => {\n        this.isShowing = true;\n        this.goingToShow = false;\n      });\n    } else {\n      this.isShowing = true;\n      this.goingToShow = false;\n    }\n\n    if (this.duration < Infinity) {\n      clearTimeout(this.autoHideTimeout);\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  /**\n   * Hides the alert\n   * @returns a promise that resolves after the alert is hidden\n   */\n  @Method()\n  async hide() {\n    if (this.goingToHide) {\n      return;\n    }\n    const nanoHide = this.nanoHide.emit();\n\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return false;\n    }\n    this.goingToHide = true;\n    this.open = false;\n\n    requestAnimationFrame(() => (this.goingToHide = false));\n    clearTimeout(this.autoHideTimeout);\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   *\n   * @param position options are tr (top-right - default), tl (top-left), br (bottom-right), bl (bottom-left)\n   * @returns a promise which will resolve after the alert has hidden\n   */\n  @Method()\n  async toast(position: 'tr' | 'tl' | 'bl' | 'br' = 'tr') {\n    this.isToast = true;\n    return new Promise<void>((resolve) => {\n      let toastStack: HTMLElement;\n      switch (position) {\n        case 'tl':\n          toastStack = toastStackTl;\n          break;\n        case 'bl':\n          toastStack = toastStackBl;\n          break;\n        case 'br':\n          toastStack = toastStackBr;\n          break;\n        default:\n          toastStack = toastStackTr;\n          break;\n      }\n\n      if (!toastStack.parentElement) {\n        document.body.appendChild(toastStack);\n      }\n\n      toastStack.appendChild(this.host);\n      this.connectedCallback();\n      this.show();\n\n      const onClose = () => {\n        this.host.remove();\n        this.isToast = false;\n        resolve();\n\n        // Remove the toast stack from the DOM when there are no more alerts\n        if (!toastStack.querySelector('nano-alert')) {\n          toastStack.remove();\n        }\n      };\n\n      this.host.addEventListener('nanoAfterHide', onClose, { once: true });\n      this.host.addEventListener('nano-after-hide', onClose, { once: true });\n    });\n  }\n\n  /**\n   * Displays the alert as a dialog / modal - more akin to a traditional js alert().\n   * @param label a label for assistive technology\n   */\n  @Method()\n  async alert(label: string) {\n    this.isModal = true;\n    this.label = label;\n\n    return new Promise<void>((resolve) => {\n      if (!document.body.contains(this.host)) {\n        document.body.appendChild(this.host);\n      }\n\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n      this.originalTrigger = document.activeElement as HTMLElement;\n\n      requestAnimationFrame(() => {\n        this.show();\n      });\n\n      const onOpen = () =>\n        requestAnimationFrame(() => this.panel.focus({ preventScroll: true }));\n\n      const onClose = () => {\n        this.modal.deactivate();\n        this.host.remove();\n        this.label = undefined;\n        this.isModal = false;\n        resolve();\n\n        // Restore focus to the original trigger\n        if (\n          this.originalTrigger &&\n          typeof this.originalTrigger.focus === 'function'\n        ) {\n          setTimeout(() => this.originalTrigger.focus());\n        }\n      };\n\n      this.host.addEventListener('nanoAfterShow', onOpen, { once: true });\n      this.host.addEventListener('nano-after-show', onOpen, { once: true });\n\n      this.host.addEventListener('nanoAfterHide', onClose, {\n        once: true,\n      });\n      this.host.addEventListener('nano-after-hide', onClose, {\n        once: true,\n      });\n    });\n  }\n\n  private handleMouseMove = () => {\n    this.restartAutoHide();\n  };\n\n  private handleCloseClick = () => {\n    this.hide();\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    if (\n      event.propertyName === 'opacity' &&\n      (event.target === this.panel || event.target === this.overlay)\n    ) {\n      this.host.hidden = !this.open;\n      this.isShowing = this.open;\n\n      if (this.open) this.nanoAfterShow.emit();\n      else this.nanoAfterHide.emit();\n    }\n  };\n\n  private handleButtonClick = (e: PointerEvent & { target: HTMLElement }) => {\n    if (e.defaultPrevented) return;\n    if (e.target.tagName && e.target.tagName.toLowerCase() === 'button')\n      this.hide();\n  };\n\n  private restartAutoHide = () => {\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  };\n\n  connectedCallback() {\n    this.modal = new Modal(this.host);\n    this.handleHoistChange();\n    this.host.addEventListener('click', this.handleButtonClick);\n    this.isShowing = typeof this.host.getAttribute('showing') === 'string';\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n    this.host.removeEventListener('click', this.handleButtonClick);\n  }\n\n  componentDidLoad() {\n    // Show on init if open\n    if (this.open && !this.isShowing) {\n      this.show();\n    }\n  }\n\n  private Panel = (): VNode => {\n    return (\n      <div\n        ref={(div) => (this.panel = div)}\n        part=\"panel\"\n        class={{\n          alert: true,\n          'alert--open': this.open,\n          'alert--toasty': this.isToast,\n          'alert--modal': !!this.isModal,\n          'alert--showing': this.isShowing,\n          'alert--nodismiss': this.noDismiss,\n        }}\n        tabIndex={this.isModal ? 0 : undefined}\n        role={this.isModal ? 'alertdialog' : 'alert'}\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        aria-hidden={this.isShowing ? 'false' : 'true'}\n        aria-modal={this.isModal ? 'true' : undefined}\n        aria-label={this.label ? this.label : undefined}\n        onMouseMove={this.handleMouseMove}\n        onTransitionEnd={this.handleTransitionEnd}\n      >\n        <div class=\"alert__content\">\n          <div part=\"icon\" class=\"alert__icon\">\n            <slot name=\"icon\" />\n          </div>\n          <div part=\"message\" class=\"alert__message\">\n            <slot />\n          </div>\n          {this.closable && (\n            <div class=\"alert__close\">\n              <nano-icon-button\n                class=\"alert__close\"\n                iconName=\"light/xmark\"\n                label=\"close menu\"\n                onClick={this.handleCloseClick}\n              ></nano-icon-button>\n            </div>\n          )}\n        </div>\n        <div class=\"alert__footer\">\n          <slot name=\"footer\" />\n        </div>\n      </div>\n    );\n  };\n\n  render() {\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color) }}\n        showing={this.isShowing}\n      >\n        {this.isModal && [\n          <div\n            part=\"overlay\"\n            class={{\n              alert__overlay: true,\n              'alert__overlay--open': this.open,\n            }}\n            ref={(div) => (this.overlay = div)}\n          />,\n          <div\n            class=\"alert__modal-wrap\"\n            onClick={(e: MouseEvent & { target: HTMLElement }) => {\n              if (!e.target.classList.contains('alert__modal-wrap')) return;\n              this.noDismiss = true;\n              setTimeout(() => (this.noDismiss = false), 250);\n            }}\n          >\n            <this.Panel />\n          </div>,\n        ]}\n        {!this.isModal && <this.Panel />}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["alertCss","NanoAlertStyle0","toastStackTr","toastStackTl","toastStackBl","toastStackBr","globalThis","Object","assign","document","createElement","className","Alert","autoHideTimeout","panel","overlay","modal","originalTrigger","goingToHide","goingToShow","isModal","isToast","isShowing","label","noDismiss","open","handleOpenChange","this","show","hide","closable","color","duration","Infinity","handleDurationChange","restartAutoHide","hoist","handleHoistChange","body","children","host","prepend","nanoShow","nanoAfterShow","nanoHide","nanoAfterHide","emit","defaultPrevented","hidden","requestAnimationFrame","clearTimeout","setTimeout","toast","position","Promise","resolve","toastStack","parentElement","appendChild","connectedCallback","onClose","remove","querySelector","transformTag","addEventListener","once","alert","contains","activate","lockBodyScrolling","activeElement","onOpen","focus","preventScroll","deactivate","undefined","handleMouseMove","handleCloseClick","handleTransitionEnd","event","propertyName","target","handleButtonClick","e","tagName","toLowerCase","Modal","getAttribute","disconnectedCallback","unlockBodyScrolling","removeEventListener","componentDidLoad","Panel","h","ref","div","part","class","tabIndex","role","onMouseMove","onTransitionEnd","name","iconName","onClick","render","Host","key","createColorClasses","showing","alert__overlay","classList"],"sources":["src/components/alert/alert.scss?tag=nano-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/nano-theme/tokens' as tokens;\n@use '../../global/style/utilities/mixins' as mx;\n\n:host {\n  /**\n   * @prop --border-radius: defaults to #{tokens.$layer-border-radius};\n   * @prop --border-color: defaults to #{tokens.$layer-border-color};\n   * @prop --border-width: defaults to #{tokens.$layer-border-width};\n   * @prop --background: defaults to #{tokens.$layer-bg-color};\n   * @prop --tint-color: defaults to var(--nano-color-base, #{nano-color(primary, base)});\n   * @prop --icon-size: defaults to 1.5rem;\n   * @prop --scrim-color: overlay colour of alert display. Defaults to #{tokens.$layer-overlay-dark};\n   * @prop --close-button-color: defaults to #{map.get(tokens.$colors, mediumgrey)} ;\n   */\n\n  --border-radius: #{tokens.$layer-border-radius};\n  --border-color: #{tokens.$layer-border-color};\n  --border-width: #{tokens.$layer-border-width};\n  --background: #{tokens.$layer-bg-color};\n  --tint-color: var(--nano-color-base, #{tokens.nano-color(primary, base)});\n  --icon-size: 2rem;\n  --scrim-color: #{tokens.$layer-overlay-dark};\n  --close-button-color: #{map.get(tokens.$colors, palegrey)};\n\n  display: block;\n}\n\n:host(.nano-color) {\n  --tint-color: var(--nano-color-base, #{tokens.nano-color(primary, base)});\n}\n\n.alert {\n  position: relative;\n  background-color: var(--background);\n  border: solid var(--border-width) var(--border-color);\n  border-block-start-width: 4px;\n  border-block-start-color: var(--tint-color);\n  border-radius: var(--border-radius);\n  opacity: 0;\n  transform: scale(0.9);\n  transition:\n    #{tokens.$transition-medium} opacity ease,\n    #{tokens.$transition-fast} transform ease;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:not(.alert--showing) {\n    @include mx.hidden;\n  }\n\n  &--open {\n    opacity: 1;\n    transform: none;\n  }\n\n  &--toasty,\n  &--modal {\n    box-shadow: #{tokens.$layer-shadow-large};\n    margin: #{tokens.$spacing-medium};\n  }\n\n  &--modal {\n    &.alert--nodismiss {\n      animation: cannotClose 0.25s ease-in-out 1;\n\n      @keyframes cannotClose {\n        0% {\n          transform: scale(1);\n        }\n\n        50% {\n          transform: scale(1.08);\n        }\n\n        100% {\n          transform: scale(1);\n        }\n      }\n    }\n  }\n}\n\n.alert__content {\n  display: flex;\n  align-items: stretch;\n}\n\n.alert__modal-wrap {\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  inset: 0;\n  z-index: #{tokens.$layer-index-alert};\n}\n\n.alert__message {\n  flex: 1 1 auto;\n  padding: #{tokens.$spacing-medium};\n  overflow: hidden;\n  line-height: 1.6;\n}\n\n.alert__close {\n  --color: var(--close-button-color);\n\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: 1.1em;\n  padding-inline: 0 #{tokens.$spacing-medium};\n  padding-block: 0;\n}\n\n.alert__footer {\n  padding: 0 #{tokens.$spacing-small} 0;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-around;\n  align-items: center;\n\n  ::slotted(*) {\n    flex: 1;\n    margin: 0 #{tokens.$spacing-small} #{tokens.$spacing-medium} !important;\n  }\n}\n\n.alert__overlay {\n  position: fixed;\n  inset: 0;\n  background-color: var(--scrim-color);\n  opacity: 0;\n  transition: #{tokens.$transition-fast} opacity;\n  z-index: #{tokens.$layer-index-alert};\n  backdrop-filter: blur(#{tokens.$layer-overlay-blur});\n  pointer-events: all;\n\n  &--open {\n    opacity: 1;\n  }\n}\n\n.alert__icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--icon-size);\n\n  ::slotted(*), &::slotted(*) {\n    color: var(--tint-color);\n    margin-inline-start: #{tokens.$spacing-medium};\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  Host,\n  VNode,\n  Build,\n} from '@stencil/core';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { createColorClasses } from '../../utils/theme';\nimport { transformTag, h } from '../../utils/renderer';\nimport type { Color } from '../../types/shared';\n\nlet toastStackTr: HTMLElement;\nlet toastStackTl: HTMLElement;\nlet toastStackBl: HTMLElement;\nlet toastStackBr: HTMLElement;\n\nif (globalThis['document']) {\n  toastStackTr = Object.assign(document.createElement('div'), {\n    className: 'nano-toast-stack nano-toast-stack--tr',\n  });\n  toastStackTl = Object.assign(document.createElement('div'), {\n    className: 'nano-toast-stack nano-toast-stack--tl',\n  });\n  toastStackBl = Object.assign(document.createElement('div'), {\n    className: 'nano-toast-stack nano-toast-stack--bl',\n  });\n  toastStackBr = Object.assign(document.createElement('div'), {\n    className: 'nano-toast-stack nano-toast-stack--br',\n  });\n}\n\n/**\n * Alerts are used to display important messages either inline, as toast notifications or as modals requiring action.\n * @slot - The alert's content.\n * @slot icon - An icon to show in the alert.\n * @slot footer - Place items at the bottom of the alert. Best used with `button` elements - esp when used as with the `alert()` method.\n */\n@Component({\n  tag: 'nano-alert',\n  styleUrl: 'alert.scss',\n  shadow: true,\n})\nexport class Alert implements ComponentInterface {\n  private autoHideTimeout: ReturnType<typeof setTimeout>;\n  private panel: HTMLElement;\n  private overlay: HTMLElement;\n  private modal: Modal;\n  private originalTrigger: HTMLElement | null;\n  private goingToHide = false;\n  private goingToShow = false;\n\n  @State() isModal = false;\n  @State() isToast = false;\n  @State() isShowing = false;\n  @State() label: string;\n  @State() noDismiss = false;\n\n  @Element() host: HTMLNanoAlertElement;\n\n  /** Indicates whether or not the alert 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.open) this.show();\n    else this.hide();\n  }\n\n  /** Set to true to make the alert closable. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** The color to use from the application's color palette. */\n  @Prop({ reflect: true }) color?: Color;\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the\n   * alert before it closes (e.g. moves the mouse over it), the timer will restart.\n   */\n  @Prop() duration = Infinity;\n\n  @Watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /**\n   * Relocate the dialog to the root of the DOM.\n   * Most useful in conjunction with `alert()` when parental elements\n   * have css stacking constraints which don't allow for `position: fixed`\n   */\n  @Prop() hoist = false;\n\n  @Watch('hoist')\n  handleHoistChange() {\n    if (!this.hoist || document.body.children[0] === this.host) return;\n    document.body.prepend(this.host);\n  }\n\n  /** Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the alert opens and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the alert closes and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /**\n   * Shows the alert.\n   * @returns a promise that resolves after the alert is shown\n   */\n  @Method()\n  async show() {\n    if (this.goingToShow) return;\n\n    const nanoShow = this.nanoShow.emit();\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      return false;\n    }\n\n    this.host.hidden = false;\n    this.goingToShow = true;\n    this.open = true;\n\n    if (Build.isBrowser) {\n      requestAnimationFrame(() => {\n        this.isShowing = true;\n        this.goingToShow = false;\n      });\n    } else {\n      this.isShowing = true;\n      this.goingToShow = false;\n    }\n\n    if (this.duration < Infinity) {\n      clearTimeout(this.autoHideTimeout);\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  /**\n   * Hides the alert\n   * @returns a promise that resolves after the alert is hidden\n   */\n  @Method()\n  async hide() {\n    if (this.goingToHide) {\n      return;\n    }\n    const nanoHide = this.nanoHide.emit();\n\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return false;\n    }\n    this.goingToHide = true;\n    this.open = false;\n\n    requestAnimationFrame(() => (this.goingToHide = false));\n    clearTimeout(this.autoHideTimeout);\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   *\n   * @param position options are tr (top-right - default), tl (top-left), br (bottom-right), bl (bottom-left)\n   * @returns a promise which will resolve after the alert has hidden\n   */\n  @Method()\n  async toast(position: 'tr' | 'tl' | 'bl' | 'br' = 'tr') {\n    this.isToast = true;\n    return new Promise<void>((resolve) => {\n      let toastStack: HTMLElement;\n      switch (position) {\n        case 'tl':\n          toastStack = toastStackTl;\n          break;\n        case 'bl':\n          toastStack = toastStackBl;\n          break;\n        case 'br':\n          toastStack = toastStackBr;\n          break;\n        default:\n          toastStack = toastStackTr;\n          break;\n      }\n\n      if (!toastStack.parentElement) {\n        document.body.appendChild(toastStack);\n      }\n\n      toastStack.appendChild(this.host);\n      this.connectedCallback();\n      this.show();\n\n      const onClose = () => {\n        this.host.remove();\n        this.isToast = false;\n        resolve();\n\n        // Remove the toast stack from the DOM when there are no more alerts\n        if (!toastStack.querySelector(transformTag('nano-alert'))) {\n          toastStack.remove();\n        }\n      };\n\n      this.host.addEventListener('nanoAfterHide', onClose, { once: true });\n      this.host.addEventListener('nano-after-hide', onClose, { once: true });\n    });\n  }\n\n  /**\n   * Displays the alert as a dialog / modal - more akin to a traditional js alert().\n   * @param label a label for assistive technology\n   */\n  @Method()\n  async alert(label: string) {\n    this.isModal = true;\n    this.label = label;\n\n    return new Promise<void>((resolve) => {\n      if (!document.body.contains(this.host)) {\n        document.body.appendChild(this.host);\n      }\n\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n      this.originalTrigger = document.activeElement as HTMLElement;\n\n      requestAnimationFrame(() => {\n        this.show();\n      });\n\n      const onOpen = () =>\n        requestAnimationFrame(() => this.panel.focus({ preventScroll: true }));\n\n      const onClose = () => {\n        this.modal.deactivate();\n        this.host.remove();\n        this.label = undefined;\n        this.isModal = false;\n        resolve();\n\n        // Restore focus to the original trigger\n        if (\n          this.originalTrigger &&\n          typeof this.originalTrigger.focus === 'function'\n        ) {\n          setTimeout(() => this.originalTrigger.focus());\n        }\n      };\n\n      this.host.addEventListener('nanoAfterShow', onOpen, { once: true });\n      this.host.addEventListener('nano-after-show', onOpen, { once: true });\n\n      this.host.addEventListener('nanoAfterHide', onClose, {\n        once: true,\n      });\n      this.host.addEventListener('nano-after-hide', onClose, {\n        once: true,\n      });\n    });\n  }\n\n  private handleMouseMove = () => {\n    this.restartAutoHide();\n  };\n\n  private handleCloseClick = () => {\n    this.hide();\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    if (\n      event.propertyName === 'opacity' &&\n      (event.target === this.panel || event.target === this.overlay)\n    ) {\n      this.host.hidden = !this.open;\n      this.isShowing = this.open;\n\n      if (this.open) this.nanoAfterShow.emit();\n      else this.nanoAfterHide.emit();\n    }\n  };\n\n  private handleButtonClick = (e: PointerEvent & { target: HTMLElement }) => {\n    if (e.defaultPrevented) return;\n    if (e.target.tagName && e.target.tagName.toLowerCase() === 'button')\n      this.hide();\n  };\n\n  private restartAutoHide = () => {\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  };\n\n  connectedCallback() {\n    this.modal = new Modal(this.host);\n    this.handleHoistChange();\n    this.host.addEventListener('click', this.handleButtonClick);\n    this.isShowing = typeof this.host.getAttribute('showing') === 'string';\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n    this.host.removeEventListener('click', this.handleButtonClick);\n  }\n\n  componentDidLoad() {\n    // Show on init if open\n    if (this.open && !this.isShowing) {\n      this.show();\n    }\n  }\n\n  private Panel = (): VNode => {\n    return (\n      <div\n        ref={(div) => (this.panel = div)}\n        part=\"panel\"\n        class={{\n          alert: true,\n          'alert--open': this.open,\n          'alert--toasty': this.isToast,\n          'alert--modal': !!this.isModal,\n          'alert--showing': this.isShowing,\n          'alert--nodismiss': this.noDismiss,\n        }}\n        tabIndex={this.isModal ? 0 : undefined}\n        role={this.isModal ? 'alertdialog' : 'alert'}\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        aria-hidden={this.isShowing ? 'false' : 'true'}\n        aria-modal={this.isModal ? 'true' : undefined}\n        aria-label={this.label ? this.label : undefined}\n        onMouseMove={this.handleMouseMove}\n        onTransitionEnd={this.handleTransitionEnd}\n      >\n        <div class=\"alert__content\">\n          <div part=\"icon\" class=\"alert__icon\">\n            <slot name=\"icon\" />\n          </div>\n          <div part=\"message\" class=\"alert__message\">\n            <slot />\n          </div>\n          {this.closable && (\n            <div class=\"alert__close\">\n              <nano-icon-button\n                class=\"alert__close\"\n                iconName=\"light/xmark\"\n                label=\"close menu\"\n                onClick={this.handleCloseClick}\n              ></nano-icon-button>\n            </div>\n          )}\n        </div>\n        <div class=\"alert__footer\">\n          <slot name=\"footer\" />\n        </div>\n      </div>\n    );\n  };\n\n  render() {\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color), 'nano-alert': true }}\n        showing={this.isShowing}\n      >\n        {this.isModal && [\n          <div\n            part=\"overlay\"\n            class={{\n              alert__overlay: true,\n              'alert__overlay--open': this.open,\n            }}\n            ref={(div) => (this.overlay = div)}\n          />,\n          <div\n            class=\"alert__modal-wrap\"\n            onClick={(e: MouseEvent & { target: HTMLElement }) => {\n              if (!e.target.classList.contains('alert__modal-wrap')) return;\n              this.noDismiss = true;\n              setTimeout(() => (this.noDismiss = false), 250);\n            }}\n          >\n            <this.Panel />\n          </div>,\n        ]}\n        {!this.isModal && <this.Panel />}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/nano-components/nano-algolia-filter.entry.js

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as e,g as i,w as s,h,a as n}from"./index-3118109b.js";import{C as l}from"./component-store-b798181b.js";import{W as o}from"./algolia-data-8fc24341.js";import"./throttle-df960210.js";const r=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:none}:host ::slotted([slot=filter-template]){display:none !important}:host(.show-filter){display:block}";const a=r;const d=class{constructor(i){t(this,i);this.nanoFilterChanged=e(this,"nanoFilterChanged",7);this.nanoTplUpdated=e(this,"nanoTplUpdated",7)}get el(){return i(this)}templateStr;templateSlot;outputSlot;outputEle;filterId=null;tplDidRnder;tplWillRnder=new Promise((t=>{this.tplDidRnder=t}));changeEvent;internalValue=[undefined];showFilter=false;indexResults=null;filterChanged=null;facets;tplRenderFn;globalStoreMethod;filterName=null;value="";operator="or";storeId;storeMethod="session";nanoFilterChanged;nanoTplUpdated;valueSet(){const t=this.value;let e;if(typeof t==="string")e=t.length?t.split("|"):[];else e=this.value;if(this.didValueChange(e)){const t=this.setFieldValues(e);if(t&&t.length)this.internalValue=e;else{this.tplWillRnder.then((t=>{this.setFieldValues(e);this.internalValue=e}))}}}valueChanged(){this.value=this.internalValue;this.nanoFilterChanged.emit({filterId:this.filterId,facetName:this.filterName,value:this.internalValue,operator:this.operator})}appliedFilterChanged(){if(this.filterName&&this.filterChanged&&(this.filterChanged!==this.filterId||this.operator==="and")){this.updateContent()}}tplUpdate(){this.updateContent()}handleFilterChange(){if(this.indexResults&&this.indexResults.appliedFilters){const t=this.indexResults.appliedFilters.find((t=>t.name===this.filterName));if(!t)return;this.tplWillRnder.then((e=>{const i=this.setFieldValues(t.values);if(i&&i.length)this.value=i}))}this.updateContent()}handleChangeEvent(){const t=this.getFieldValues();if(this.didValueChange(t)){this.internalValue=t;return true}return false}updateContent(){const t=this.outputSlot||this.outputEle;if(!this.el)return;if(!this.templateStr)this.showFilter=true;else if(!this.filterName||!t||this.templateStr&&(!this.indexResults||!this.indexResults.origFilters[this.filterName])){this.showFilter=false}if(!t)return;if(!this.indexResults){if(this.templateStr){s((()=>{t.innerHTML=this.tplRenderFn(this.templateStr,{orig:{},dyn:{},selected:this.internalValue&&this.internalValue.length?this.internalValue:this.value});if(!this.value||!this.value.length)this.handleChangeEvent()}))}else if(!this.value||!this.value.length)this.handleChangeEvent();return}s((()=>{t.innerHTML=this.tplRenderFn(this.templateStr,{orig:{...this.indexResults.origFilters[this.filterName]},dyn:{...this.indexResults.dynFilters[this.filterName]},selected:this.internalValue&&this.internalValue.length?this.internalValue:this.value});this.tplDidRnder();this.setFieldValues();if(!this.showFilter)this.showFilter=true;this.nanoTplUpdated.emit(this.el)}))}getFieldValues(){const t=[];const e=this.outputSlot.querySelectorAll('input[type="checkbox"], input[type="radio"], select');for(let i=0;i<e.length;i++){const s=e[i];if(s.type==="select-multiple"){const e=s;for(let i=0;i<e.options.length;i++){if(!e.options[i].selected||!e.options[i].value.length)continue;t.push(e.options[i].value)}}else if(s.type!=="checkbox"&&s.type!=="radio"||s.checked&&s.value.length){t.push(s.value)}}return t}setFieldValues(t){t=t||this.internalValue;if(!t)return;const e=[];const i=this.outputSlot.querySelectorAll('input[type="checkbox"], input[type="radio"], select, nano-select, nano-checkbox');for(let s=0;s<i.length;s++){const h=i[s];if(h.disabled||h.type==="file"||h.type==="reset"||h.type==="submit"||h.type==="button")continue;if(h.type==="select-multiple"||h.type==="select-one"){const i=h;for(let s=0;s<i.options.length;s++){if(!t.includes(i.options[s].value))i.options[s].selected=false;else{e.push(i.value);i.options[s].selected=true;if(h.type==="select-one")i.value=i.options[s].value}}}else if(["checkbox","radio","tag","segment","segment-pill"].includes(h.type)){if(t.includes(h.value)){e.push(h.value);h.checked=true}else if(!t.length&&!h.value.length){h.checked=true}else h.checked=false}}return e}didValueChange(t){if(!!this.internalValue&&!t)return true;if(!this.internalValue&&!t)return false;if(this.internalValue&&t.length!==this.internalValue.length)return true;let e=false;for(let i=0;i<t.length;i++){if(!e&&(!this.internalValue||!this.internalValue.includes(t[i])))e=true}return e}connectedCallback(){this.templateSlot=this.el.querySelector('[slot="filter-template"]');this.outputSlot=this.el.querySelector('[slot="output"]');this.filterId=this.filterName+"_"+f++;if(this.templateSlot){this.templateStr=this.templateSlot.innerHTML;this.templateStr=this.templateStr.replace(/=&gt;/gm,"=>")}}componentWillLoad(){if(this.storeId)l.init(this,["value"],this.storeMethod||this.globalStoreMethod,this.storeId)}componentDidLoad(){this.updateContent();if(this.templateStr&&this.filterName&&this.indexResults&&this.indexResults.origFilters[this.filterName])this.showFilter=true}render(){return h(n,{key:"7fceca55176bed53e7b205f9a76d7756d77d1525",class:{"show-filter":this.showFilter}},h("div",{key:"9a4de79e4b28d167a4dd1ff2d92381e2a2e942a7",ref:t=>this.outputEle=t},h("slot",{key:"112ec321906665e4ba7b3e0c8377bfb49d12b6de",name:"output"})))}static get watchers(){return{value:["valueSet"],internalValue:["valueChanged"],facets:["appliedFilterChanged"],tplRenderFn:["tplUpdate"],indexResults:["handleFilterChange"]}}};o(d,["globalStoreMethod","indexResults","filterChanged","facets","tplRenderFn","changeEvent"]);let f=0;d.style=a;export{d as nano_algolia_filter};
+import{r as t,c as e,g as i,d as s,a as h}from"./index-6cc72cd9.js";import{C as n}from"./component-store-199a9fd8.js";import{h as l}from"./renderer-4bc3e2dc.js";import{W as o}from"./algolia-data-f0f72f1d.js";import"./throttle-df960210.js";const r=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:none}:host ::slotted([slot=filter-template]){display:none !important}:host(.show-filter){display:block}";const a=r;const f=class{constructor(i){t(this,i);this.nanoFilterChanged=e(this,"nanoFilterChanged",7);this.nanoTplUpdated=e(this,"nanoTplUpdated",7)}get el(){return i(this)}templateStr;templateSlot;outputSlot;outputEle;filterId=null;tplDidRnder;tplWillRnder=new Promise((t=>{this.tplDidRnder=t}));changeEvent;internalValue=[undefined];showFilter=false;indexResults=null;filterChanged=null;facets;tplRenderFn;globalStoreMethod;filterName=null;value="";operator="or";storeId;storeMethod="session";nanoFilterChanged;nanoTplUpdated;valueSet(){const t=this.value;let e;if(typeof t==="string")e=t.length?t.split("|"):[];else e=this.value;if(this.didValueChange(e)){const t=this.setFieldValues(e);if(t&&t.length)this.internalValue=e;else{this.tplWillRnder.then((t=>{this.setFieldValues(e);this.internalValue=e}))}}}valueChanged(){this.value=this.internalValue;this.nanoFilterChanged.emit({filterId:this.filterId,facetName:this.filterName,value:this.internalValue,operator:this.operator})}appliedFilterChanged(){if(this.filterName&&this.filterChanged&&(this.filterChanged!==this.filterId||this.operator==="and")){this.updateContent()}}tplUpdate(){this.updateContent()}handleFilterChange(){if(this.indexResults&&this.indexResults.appliedFilters){const t=this.indexResults.appliedFilters.find((t=>t.name===this.filterName));if(!t)return;this.tplWillRnder.then((e=>{const i=this.setFieldValues(t.values);if(i&&i.length)this.value=i}))}this.updateContent()}handleChangeEvent(){const t=this.getFieldValues();if(this.didValueChange(t)){this.internalValue=t;return true}return false}updateContent(){const t=this.outputSlot||this.outputEle;if(!this.el)return;if(!this.templateStr)this.showFilter=true;else if(!this.filterName||!t||this.templateStr&&(!this.indexResults||!this.indexResults.origFilters[this.filterName])){this.showFilter=false}if(!t)return;if(!this.indexResults){if(this.templateStr){s((()=>{t.innerHTML=this.tplRenderFn(this.templateStr,{orig:{},dyn:{},selected:this.internalValue&&this.internalValue.length?this.internalValue:this.value});if(!this.value||!this.value.length)this.handleChangeEvent()}))}else if(!this.value||!this.value.length)this.handleChangeEvent();return}s((()=>{t.innerHTML=this.tplRenderFn(this.templateStr,{orig:{...this.indexResults.origFilters[this.filterName]},dyn:{...this.indexResults.dynFilters[this.filterName]},selected:this.internalValue&&this.internalValue.length?this.internalValue:this.value});this.tplDidRnder();this.setFieldValues();if(!this.showFilter)this.showFilter=true;this.nanoTplUpdated.emit(this.el)}))}getFieldValues(){const t=[];const e=this.outputSlot.querySelectorAll('input[type="checkbox"], input[type="radio"], select');for(let i=0;i<e.length;i++){const s=e[i];if(s.type==="select-multiple"){const e=s;for(let i=0;i<e.options.length;i++){if(!e.options[i].selected||!e.options[i].value.length)continue;t.push(e.options[i].value)}}else if(s.type!=="checkbox"&&s.type!=="radio"||s.checked&&s.value.length){t.push(s.value)}}return t}setFieldValues(t){t=t||this.internalValue;if(!t)return;const e=[];const i=this.outputSlot.querySelectorAll('input[type="checkbox"], input[type="radio"], select, nano-select, nano-checkbox');for(let s=0;s<i.length;s++){const h=i[s];if(h.disabled||h.type==="file"||h.type==="reset"||h.type==="submit"||h.type==="button")continue;if(h.type==="select-multiple"||h.type==="select-one"){const i=h;for(let s=0;s<i.options.length;s++){if(!t.includes(i.options[s].value))i.options[s].selected=false;else{e.push(i.value);i.options[s].selected=true;if(h.type==="select-one")i.value=i.options[s].value}}}else if(["checkbox","radio","tag","segment","segment-pill"].includes(h.type)){if(t.includes(h.value)){e.push(h.value);h.checked=true}else if(!t.length&&!h.value.length){h.checked=true}else h.checked=false}}return e}didValueChange(t){if(!!this.internalValue&&!t)return true;if(!this.internalValue&&!t)return false;if(this.internalValue&&t.length!==this.internalValue.length)return true;let e=false;for(let i=0;i<t.length;i++){if(!e&&(!this.internalValue||!this.internalValue.includes(t[i])))e=true}return e}connectedCallback(){this.templateSlot=this.el.querySelector('[slot="filter-template"]');this.outputSlot=this.el.querySelector('[slot="output"]');this.filterId=this.filterName+"_"+d++;if(this.templateSlot){this.templateStr=this.templateSlot.innerHTML;this.templateStr=this.templateStr.replace(/=&gt;/gm,"=>")}}componentWillLoad(){if(this.storeId)n.init(this,["value"],this.storeMethod||this.globalStoreMethod,this.storeId)}componentDidLoad(){this.updateContent();if(this.templateStr&&this.filterName&&this.indexResults&&this.indexResults.origFilters[this.filterName])this.showFilter=true}render(){return l(h,{key:"81d343828cf739b8e85cab7f56fa48ad1c3fc34e",class:{"show-filter":this.showFilter,"nano-filter":true}},l("div",{key:"909831f2c2e4605163227a188df31b3b130fd7d1",ref:t=>this.outputEle=t},l("slot",{key:"854cff616358aaee8cb6594db55a4a49d4322b74",name:"output"})))}static get watchers(){return{value:["valueSet"],internalValue:["valueChanged"],facets:["appliedFilterChanged"],tplRenderFn:["tplUpdate"],indexResults:["handleFilterChange"]}}};o(f,["globalStoreMethod","indexResults","filterChanged","facets","tplRenderFn","changeEvent"]);let d=0;f.style=a;export{f as nano_algolia_filter};
 //# sourceMappingURL=nano-algolia-filter.entry.js.map

package/dist/nano-components/nano-algolia-filter.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["algoliaFilterCss","NanoAlgoliaFilterStyle0","AlgoliaFilter","templateStr","templateSlot","outputSlot","outputEle","filterId","tplDidRnder","tplWillRnder","Promise","resolve","this","changeEvent","internalValue","undefined","showFilter","indexResults","filterChanged","facets","tplRenderFn","globalStoreMethod","filterName","value","operator","storeId","storeMethod","nanoFilterChanged","nanoTplUpdated","valueSet","valStr","vals","length","split","didValueChange","foundVals","setFieldValues","then","_","valueChanged","emit","facetName","appliedFilterChanged","updateContent","tplUpdate","handleFilterChange","appliedFilters","foundValue","find","filter","name","values","handleChangeEvent","getFieldValues","outputTo","el","origFilters","writeTask","innerHTML","orig","dyn","selected","dynFilters","fields","querySelectorAll","i","field","type","select","n","options","push","checked","found","disabled","includes","newVal","hasChanged","connectedCallback","querySelector","filterIds","replace","componentWillLoad","ComponentStore","init","componentDidLoad","render","h","Host","key","class","ref","div","Wormhole"],"sources":["src/components/algolia/algolia-filter.scss?tag=nano-algolia-filter&encapsulation=shadow","src/components/algolia/algolia-filter.tsx"],"sourcesContent":[":host {\n  display: none;\n\n  ::slotted([slot='filter-template']) {\n    display: none !important;\n  }\n}\n\n:host(.show-filter) {\n  display: block;\n}\n","import {\n  Component,\n  h,\n  Element,\n  Host,\n  Prop,\n  Watch,\n  State,\n  EventEmitter,\n  Event,\n  writeTask,\n  Listen,\n} from '@stencil/core';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\nimport {\n  SearchChangeEvent,\n  Wormhole,\n  WormholeConsumerConstructor,\n} from './algolia-data';\nimport type {\n  IndexResult,\n  FilterChangeEventDetail,\n  AlgoliaFacet,\n} from './algolia-interface';\n\n/**\n * Displays and syncs algolia filters\n * Must be nested within an nano-algolia component.\n * @slot filter-template - Template string (format from nano-algolia 'tplEngine' property).\n * @slot output - A placeholder for template output.\n */\n@Component({\n  tag: 'nano-algolia-filter',\n  shadow: true,\n  styleUrl: 'algolia-filter.scss',\n})\nexport class AlgoliaFilter {\n  @Element() el: HTMLNanoAlgoliaFilterElement;\n\n  private templateStr: string;\n  private templateSlot: HTMLElement;\n  private outputSlot: HTMLElement;\n  private outputEle: HTMLElement;\n  private filterId: string = null;\n  private tplDidRnder;\n  private tplWillRnder = new Promise((resolve) => {\n    this.tplDidRnder = resolve;\n  });\n\n  @State() changeEvent: SearchChangeEvent;\n  @State() internalValue: Array<string> = [undefined];\n  @State() showFilter: boolean = false;\n  @State() indexResults: IndexResult = null;\n  @State() filterChanged: string = null;\n  @State() facets: AlgoliaFacet;\n  @State() tplRenderFn: (...args: any[]) => any;\n  @State() globalStoreMethod: StorageMethods;\n\n  /**\n   * Name of this filter - must match an appropriate algolia facet on a parent nano-algolia index to display\n   */\n  @Prop() filterName: string = null;\n\n  /**\n   * Set values of this filter. Will result in form elements being selected. '|' delimited string or array.\n   */\n  @Prop({ mutable: true }) value: string | Array<string> = '';\n\n  /**\n   * The internal operator joining filter values.\n   */\n  @Prop() operator: 'or' | 'and' = 'or';\n\n  /**\n   * Store search queries (against this ID) to the component store.\n   * Use in conjunction with storeMethod\n   */\n  @Prop() storeId?: string;\n\n  /**\n   * The method of storage.\n   * Either session storage, url hash (after the '#') or url query (after the '?').\n   */\n  @Prop() storeMethod: StorageMethods = 'session';\n\n  /**\n   * Emitted when the filter value changes\n   */\n  @Event() nanoFilterChanged!: EventEmitter<FilterChangeEventDetail>;\n\n  /**\n   * Emitted when templates are updated\n   */\n  @Event() nanoTplUpdated!: EventEmitter<HTMLNanoAlgoliaFilterElement>;\n\n  // Public facing. When changed attempts to 'check' any relevant fields in the template.\n  @Watch('value')\n  valueSet() {\n    const valStr = this.value as string;\n    let vals;\n\n    if (typeof valStr === 'string')\n      vals = valStr.length ? valStr.split('|') : [];\n    else vals = this.value as Array<string>;\n\n    if (this.didValueChange(vals)) {\n      const foundVals = this.setFieldValues(vals);\n      // found in template, set the internal state (this emits the changed event)\n      if (foundVals && foundVals.length) this.internalValue = vals;\n      // not found in template, wait for it to render.\n      else {\n        this.tplWillRnder.then((_) => {\n          this.setFieldValues(vals);\n          this.internalValue = vals;\n        });\n      }\n    }\n  }\n\n  // Value has changed and is reflected in template. Emit event.\n  @Watch('internalValue')\n  valueChanged() {\n    this.value = this.internalValue;\n    this.nanoFilterChanged.emit({\n      filterId: this.filterId,\n      facetName: this.filterName,\n      value: this.internalValue,\n      operator: this.operator,\n    });\n  }\n\n  // New facets from algolia. Update template\n  @Watch('facets')\n  appliedFilterChanged() {\n    if (\n      this.filterName &&\n      this.filterChanged &&\n      (this.filterChanged !== this.filterId || this.operator === 'and')\n    ) {\n      this.updateContent();\n    }\n  }\n\n  @Watch('tplRenderFn')\n  tplUpdate() {\n    this.updateContent();\n  }\n\n  @Watch('indexResults')\n  handleFilterChange() {\n    if (this.indexResults && this.indexResults.appliedFilters) {\n      const foundValue = this.indexResults.appliedFilters.find(\n        (filter) => filter.name === this.filterName\n      );\n      if (!foundValue) return;\n\n      this.tplWillRnder.then((_) => {\n        const foundVals = this.setFieldValues(foundValue.values);\n        if (foundVals && foundVals.length) this.value = foundVals;\n      });\n    }\n    this.updateContent();\n  }\n\n  @Listen('nanoChange')\n  @Listen('change')\n  handleChangeEvent() {\n    const vals = this.getFieldValues();\n    if (this.didValueChange(vals)) {\n      this.internalValue = vals;\n      return true;\n    }\n    return false;\n  }\n\n  private updateContent() {\n    const outputTo = this.outputSlot || this.outputEle;\n    if (!this.el) return;\n\n    // there's no template so show output right away\n    if (!this.templateStr) this.showFilter = true;\n    // there's a template but no index set so hide filters atm\n    else if (\n      !this.filterName ||\n      !outputTo ||\n      (this.templateStr &&\n        (!this.indexResults || !this.indexResults.origFilters[this.filterName]))\n    ) {\n      this.showFilter = false;\n    }\n\n    // there's no output element so nothing else to do\n    if (!outputTo) return;\n\n    // there's no index set atm but get any static filter values so we can apply them\n    if (!this.indexResults) {\n      if (this.templateStr) {\n        writeTask(() => {\n          outputTo.innerHTML = this.tplRenderFn(this.templateStr, {\n            orig: {},\n            dyn: {},\n            selected:\n              this.internalValue && this.internalValue.length\n                ? this.internalValue\n                : this.value,\n          });\n          if (!this.value || !this.value.length) this.handleChangeEvent();\n        });\n      } else if (!this.value || !this.value.length) this.handleChangeEvent();\n      return;\n    }\n\n    // everything is in place - render as normal and set values\n    writeTask(() => {\n      outputTo.innerHTML = this.tplRenderFn(this.templateStr, {\n        orig: { ...this.indexResults.origFilters[this.filterName] },\n        dyn: { ...this.indexResults.dynFilters[this.filterName] },\n        selected:\n          this.internalValue && this.internalValue.length\n            ? this.internalValue\n            : this.value,\n      });\n      this.tplDidRnder();\n      this.setFieldValues();\n\n      if (!this.showFilter) this.showFilter = true;\n      this.nanoTplUpdated.emit(this.el);\n    });\n  }\n\n  // go through form elements and extract their current value\n  private getFieldValues() {\n    const values = [];\n    const fields = this.outputSlot.querySelectorAll(\n      'input[type=\"checkbox\"], input[type=\"radio\"], select'\n    );\n\n    for (let i = 0; i < fields.length; i++) {\n      const field = fields[i] as HTMLInputElement;\n\n      // If a multi-select, get all selections\n      if (field.type === 'select-multiple') {\n        const select: HTMLSelectElement = field as any;\n        for (let n = 0; n < select.options.length; n++) {\n          if (!select.options[n].selected || !select.options[n].value.length)\n            continue;\n          values.push(select.options[n].value);\n        }\n      } else if (\n        (field.type !== 'checkbox' && field.type !== 'radio') ||\n        (field.checked && field.value.length)\n      ) {\n        values.push(field.value);\n      }\n    }\n    return values;\n  }\n\n  // go through form elements and select / check them as appropriate\n  private setFieldValues(vals?: string[]): void | string[] {\n    vals = vals || this.internalValue;\n    if (!vals) return;\n\n    const found = [];\n    const fields = this.outputSlot.querySelectorAll(\n      'input[type=\"checkbox\"], input[type=\"radio\"], select, nano-select, nano-checkbox'\n    );\n\n    for (let i = 0; i < fields.length; i++) {\n      const field = fields[i] as HTMLInputElement;\n\n      if (\n        field.disabled ||\n        field.type === 'file' ||\n        field.type === 'reset' ||\n        field.type === 'submit' ||\n        field.type === 'button'\n      )\n        continue;\n\n      if (field.type === 'select-multiple' || field.type === 'select-one') {\n        const select: HTMLSelectElement = field as any;\n        for (let n = 0; n < select.options.length; n++) {\n          if (!vals.includes(select.options[n].value))\n            select.options[n].selected = false;\n          else {\n            found.push(select.value);\n            select.options[n].selected = true;\n            if (field.type === 'select-one')\n              select.value = select.options[n].value;\n          }\n        }\n      } else if (\n        ['checkbox', 'radio', 'tag', 'segment', 'segment-pill'].includes(\n          field.type\n        )\n      ) {\n        if (vals.includes(field.value)) {\n          found.push(field.value);\n          field.checked = true;\n        } else if (!vals.length && !field.value.length) {\n          field.checked = true;\n        } else field.checked = false;\n      }\n    }\n    return found;\n  }\n\n  private didValueChange(newVal: Array<string>) {\n    if (!!this.internalValue && !newVal) return true;\n    if (!this.internalValue && !newVal) return false;\n    if (this.internalValue && newVal.length !== this.internalValue.length)\n      return true;\n\n    let hasChanged = false;\n    for (let i = 0; i < newVal.length; i++) {\n      if (\n        !hasChanged &&\n        (!this.internalValue || !this.internalValue.includes(newVal[i]))\n      )\n        hasChanged = true;\n    }\n    return hasChanged;\n  }\n\n  connectedCallback() {\n    this.templateSlot = this.el.querySelector('[slot=\"filter-template\"]');\n    this.outputSlot = this.el.querySelector('[slot=\"output\"]');\n    this.filterId = this.filterName + '_' + filterIds++;\n\n    if (this.templateSlot) {\n      this.templateStr = this.templateSlot.innerHTML;\n      this.templateStr = this.templateStr.replace(/=&gt;/gm, '=>');\n    }\n  }\n\n  componentWillLoad() {\n    if (this.storeId)\n      ComponentStore.init(\n        this,\n        ['value'],\n        this.storeMethod || this.globalStoreMethod,\n        this.storeId\n      );\n  }\n\n  componentDidLoad() {\n    this.updateContent();\n\n    if (\n      this.templateStr &&\n      this.filterName &&\n      this.indexResults &&\n      this.indexResults.origFilters[this.filterName]\n    )\n      this.showFilter = true;\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'show-filter': this.showFilter,\n        }}\n      >\n        <div ref={(div) => (this.outputEle = div)}>\n          <slot name=\"output\" />\n        </div>\n      </Host>\n    );\n  }\n}\n\nWormhole(AlgoliaFilter as WormholeConsumerConstructor, [\n  'globalStoreMethod',\n  'indexResults',\n  'filterChanged',\n  'facets',\n  'tplRenderFn',\n  'changeEvent',\n]);\nlet filterIds = 0;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["algoliaFilterCss","NanoAlgoliaFilterStyle0","AlgoliaFilter","templateStr","templateSlot","outputSlot","outputEle","filterId","tplDidRnder","tplWillRnder","Promise","resolve","this","changeEvent","internalValue","undefined","showFilter","indexResults","filterChanged","facets","tplRenderFn","globalStoreMethod","filterName","value","operator","storeId","storeMethod","nanoFilterChanged","nanoTplUpdated","valueSet","valStr","vals","length","split","didValueChange","foundVals","setFieldValues","then","_","valueChanged","emit","facetName","appliedFilterChanged","updateContent","tplUpdate","handleFilterChange","appliedFilters","foundValue","find","filter","name","values","handleChangeEvent","getFieldValues","outputTo","el","origFilters","writeTask","innerHTML","orig","dyn","selected","dynFilters","fields","querySelectorAll","i","field","type","select","n","options","push","checked","found","disabled","includes","newVal","hasChanged","connectedCallback","querySelector","filterIds","replace","componentWillLoad","ComponentStore","init","componentDidLoad","render","h","Host","key","class","ref","div","Wormhole"],"sources":["src/components/algolia/algolia-filter.scss?tag=nano-algolia-filter&encapsulation=shadow","src/components/algolia/algolia-filter.tsx"],"sourcesContent":[":host {\n  display: none;\n\n  ::slotted([slot='filter-template']) {\n    display: none !important;\n  }\n}\n\n:host(.show-filter) {\n  display: block;\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  Watch,\n  State,\n  EventEmitter,\n  Event,\n  writeTask,\n  Listen,\n} from '@stencil/core';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\nimport { h } from '../../utils/renderer';\nimport {\n  SearchChangeEvent,\n  Wormhole,\n  WormholeConsumerConstructor,\n} from './algolia-data';\nimport type {\n  IndexResult,\n  FilterChangeEventDetail,\n  AlgoliaFacet,\n} from './algolia-interface';\n\n/**\n * Displays and syncs algolia filters\n * Must be nested within an nano-algolia component.\n * @slot filter-template - Template string (format from nano-algolia 'tplEngine' property).\n * @slot output - A placeholder for template output.\n */\n@Component({\n  tag: 'nano-algolia-filter',\n  shadow: true,\n  styleUrl: 'algolia-filter.scss',\n})\nexport class AlgoliaFilter {\n  @Element() el: HTMLNanoAlgoliaFilterElement;\n\n  private templateStr: string;\n  private templateSlot: HTMLElement;\n  private outputSlot: HTMLElement;\n  private outputEle: HTMLElement;\n  private filterId: string = null;\n  private tplDidRnder;\n  private tplWillRnder = new Promise((resolve) => {\n    this.tplDidRnder = resolve;\n  });\n\n  @State() changeEvent: SearchChangeEvent;\n  @State() internalValue: Array<string> = [undefined];\n  @State() showFilter: boolean = false;\n  @State() indexResults: IndexResult = null;\n  @State() filterChanged: string = null;\n  @State() facets: AlgoliaFacet;\n  @State() tplRenderFn: (...args: any[]) => any;\n  @State() globalStoreMethod: StorageMethods;\n\n  /**\n   * Name of this filter - must match an appropriate algolia facet on a parent nano-algolia index to display\n   */\n  @Prop() filterName: string = null;\n\n  /**\n   * Set values of this filter. Will result in form elements being selected. '|' delimited string or array.\n   */\n  @Prop({ mutable: true }) value: string | Array<string> = '';\n\n  /**\n   * The internal operator joining filter values.\n   */\n  @Prop() operator: 'or' | 'and' = 'or';\n\n  /**\n   * Store search queries (against this ID) to the component store.\n   * Use in conjunction with storeMethod\n   */\n  @Prop() storeId?: string;\n\n  /**\n   * The method of storage.\n   * Either session storage, url hash (after the '#') or url query (after the '?').\n   */\n  @Prop() storeMethod: StorageMethods = 'session';\n\n  /**\n   * Emitted when the filter value changes\n   */\n  @Event() nanoFilterChanged!: EventEmitter<FilterChangeEventDetail>;\n\n  /**\n   * Emitted when templates are updated\n   */\n  @Event() nanoTplUpdated!: EventEmitter<HTMLNanoAlgoliaFilterElement>;\n\n  // Public facing. When changed attempts to 'check' any relevant fields in the template.\n  @Watch('value')\n  valueSet() {\n    const valStr = this.value as string;\n    let vals;\n\n    if (typeof valStr === 'string')\n      vals = valStr.length ? valStr.split('|') : [];\n    else vals = this.value as Array<string>;\n\n    if (this.didValueChange(vals)) {\n      const foundVals = this.setFieldValues(vals);\n      // found in template, set the internal state (this emits the changed event)\n      if (foundVals && foundVals.length) this.internalValue = vals;\n      // not found in template, wait for it to render.\n      else {\n        this.tplWillRnder.then((_) => {\n          this.setFieldValues(vals);\n          this.internalValue = vals;\n        });\n      }\n    }\n  }\n\n  // Value has changed and is reflected in template. Emit event.\n  @Watch('internalValue')\n  valueChanged() {\n    this.value = this.internalValue;\n    this.nanoFilterChanged.emit({\n      filterId: this.filterId,\n      facetName: this.filterName,\n      value: this.internalValue,\n      operator: this.operator,\n    });\n  }\n\n  // New facets from algolia. Update template\n  @Watch('facets')\n  appliedFilterChanged() {\n    if (\n      this.filterName &&\n      this.filterChanged &&\n      (this.filterChanged !== this.filterId || this.operator === 'and')\n    ) {\n      this.updateContent();\n    }\n  }\n\n  @Watch('tplRenderFn')\n  tplUpdate() {\n    this.updateContent();\n  }\n\n  @Watch('indexResults')\n  handleFilterChange() {\n    if (this.indexResults && this.indexResults.appliedFilters) {\n      const foundValue = this.indexResults.appliedFilters.find(\n        (filter) => filter.name === this.filterName\n      );\n      if (!foundValue) return;\n\n      this.tplWillRnder.then((_) => {\n        const foundVals = this.setFieldValues(foundValue.values);\n        if (foundVals && foundVals.length) this.value = foundVals;\n      });\n    }\n    this.updateContent();\n  }\n\n  @Listen('nanoChange')\n  @Listen('change')\n  handleChangeEvent() {\n    const vals = this.getFieldValues();\n    if (this.didValueChange(vals)) {\n      this.internalValue = vals;\n      return true;\n    }\n    return false;\n  }\n\n  private updateContent() {\n    const outputTo = this.outputSlot || this.outputEle;\n    if (!this.el) return;\n\n    // there's no template so show output right away\n    if (!this.templateStr) this.showFilter = true;\n    // there's a template but no index set so hide filters atm\n    else if (\n      !this.filterName ||\n      !outputTo ||\n      (this.templateStr &&\n        (!this.indexResults || !this.indexResults.origFilters[this.filterName]))\n    ) {\n      this.showFilter = false;\n    }\n\n    // there's no output element so nothing else to do\n    if (!outputTo) return;\n\n    // there's no index set atm but get any static filter values so we can apply them\n    if (!this.indexResults) {\n      if (this.templateStr) {\n        writeTask(() => {\n          outputTo.innerHTML = this.tplRenderFn(this.templateStr, {\n            orig: {},\n            dyn: {},\n            selected:\n              this.internalValue && this.internalValue.length\n                ? this.internalValue\n                : this.value,\n          });\n          if (!this.value || !this.value.length) this.handleChangeEvent();\n        });\n      } else if (!this.value || !this.value.length) this.handleChangeEvent();\n      return;\n    }\n\n    // everything is in place - render as normal and set values\n    writeTask(() => {\n      outputTo.innerHTML = this.tplRenderFn(this.templateStr, {\n        orig: { ...this.indexResults.origFilters[this.filterName] },\n        dyn: { ...this.indexResults.dynFilters[this.filterName] },\n        selected:\n          this.internalValue && this.internalValue.length\n            ? this.internalValue\n            : this.value,\n      });\n      this.tplDidRnder();\n      this.setFieldValues();\n\n      if (!this.showFilter) this.showFilter = true;\n      this.nanoTplUpdated.emit(this.el);\n    });\n  }\n\n  // go through form elements and extract their current value\n  private getFieldValues() {\n    const values = [];\n    const fields = this.outputSlot.querySelectorAll(\n      'input[type=\"checkbox\"], input[type=\"radio\"], select'\n    );\n\n    for (let i = 0; i < fields.length; i++) {\n      const field = fields[i] as HTMLInputElement;\n\n      // If a multi-select, get all selections\n      if (field.type === 'select-multiple') {\n        const select: HTMLSelectElement = field as any;\n        for (let n = 0; n < select.options.length; n++) {\n          if (!select.options[n].selected || !select.options[n].value.length)\n            continue;\n          values.push(select.options[n].value);\n        }\n      } else if (\n        (field.type !== 'checkbox' && field.type !== 'radio') ||\n        (field.checked && field.value.length)\n      ) {\n        values.push(field.value);\n      }\n    }\n    return values;\n  }\n\n  // go through form elements and select / check them as appropriate\n  private setFieldValues(vals?: string[]): void | string[] {\n    vals = vals || this.internalValue;\n    if (!vals) return;\n\n    const found = [];\n    const fields = this.outputSlot.querySelectorAll(\n      'input[type=\"checkbox\"], input[type=\"radio\"], select, nano-select, nano-checkbox'\n    );\n\n    for (let i = 0; i < fields.length; i++) {\n      const field = fields[i] as HTMLInputElement;\n\n      if (\n        field.disabled ||\n        field.type === 'file' ||\n        field.type === 'reset' ||\n        field.type === 'submit' ||\n        field.type === 'button'\n      )\n        continue;\n\n      if (field.type === 'select-multiple' || field.type === 'select-one') {\n        const select: HTMLSelectElement = field as any;\n        for (let n = 0; n < select.options.length; n++) {\n          if (!vals.includes(select.options[n].value))\n            select.options[n].selected = false;\n          else {\n            found.push(select.value);\n            select.options[n].selected = true;\n            if (field.type === 'select-one')\n              select.value = select.options[n].value;\n          }\n        }\n      } else if (\n        ['checkbox', 'radio', 'tag', 'segment', 'segment-pill'].includes(\n          field.type\n        )\n      ) {\n        if (vals.includes(field.value)) {\n          found.push(field.value);\n          field.checked = true;\n        } else if (!vals.length && !field.value.length) {\n          field.checked = true;\n        } else field.checked = false;\n      }\n    }\n    return found;\n  }\n\n  private didValueChange(newVal: Array<string>) {\n    if (!!this.internalValue && !newVal) return true;\n    if (!this.internalValue && !newVal) return false;\n    if (this.internalValue && newVal.length !== this.internalValue.length)\n      return true;\n\n    let hasChanged = false;\n    for (let i = 0; i < newVal.length; i++) {\n      if (\n        !hasChanged &&\n        (!this.internalValue || !this.internalValue.includes(newVal[i]))\n      )\n        hasChanged = true;\n    }\n    return hasChanged;\n  }\n\n  connectedCallback() {\n    this.templateSlot = this.el.querySelector('[slot=\"filter-template\"]');\n    this.outputSlot = this.el.querySelector('[slot=\"output\"]');\n    this.filterId = this.filterName + '_' + filterIds++;\n\n    if (this.templateSlot) {\n      this.templateStr = this.templateSlot.innerHTML;\n      this.templateStr = this.templateStr.replace(/=&gt;/gm, '=>');\n    }\n  }\n\n  componentWillLoad() {\n    if (this.storeId)\n      ComponentStore.init(\n        this,\n        ['value'],\n        this.storeMethod || this.globalStoreMethod,\n        this.storeId\n      );\n  }\n\n  componentDidLoad() {\n    this.updateContent();\n\n    if (\n      this.templateStr &&\n      this.filterName &&\n      this.indexResults &&\n      this.indexResults.origFilters[this.filterName]\n    )\n      this.showFilter = true;\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'show-filter': this.showFilter,\n          'nano-filter': true,\n        }}\n      >\n        <div ref={(div) => (this.outputEle = div)}>\n          <slot name=\"output\" />\n        </div>\n      </Host>\n    );\n  }\n}\n\nWormhole(AlgoliaFilter as WormholeConsumerConstructor, [\n  'globalStoreMethod',\n  'indexResults',\n  'filterChanged',\n  'facets',\n  'tplRenderFn',\n  'changeEvent',\n]);\nlet filterIds = 0;\n"],"mappings":"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","ignoreList":[]}

package/dist/nano-components/nano-algolia-pagination.entry.js

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as e,g as a,h as n,a as s}from"./index-3118109b.js";import{W as i}from"./algolia-data-8fc24341.js";const o=class{constructor(a){t(this,a);this.nanoPageChanged=e(this,"nanoPageChanged",7)}get el(){return a(this)}outputEle;outputSlot;outputTo;templateStr;templateSlot;currentPage=null;canGoPrev=false;canGoNext=false;show=true;tplRenderFn;indexResults=null;infiniteScroll=false;maxToShow=null;nanoPageChanged;currentPageChange(){}infiniteScrollChange(){this.show=!this.infiniteScroll}async nextPage(){}async prevPage(){}async goToPage(t){console.info(t)}updateContent(){this.outputTo=this.outputSlot||this.outputEle;if(!this.templateStr||!this.outputTo||!this.indexResults){this.show=false;return}}componentWillLoad(){this.templateSlot=this.el.querySelector('[slot="filter-template"]');this.outputSlot=this.el.querySelector('[slot="output"]');if(this.templateSlot)this.templateStr=this.templateSlot.innerHTML}componentDidLoad(){this.updateContent()}render(){return n(s,{key:"3168d162f59e4a753d3b1c1557ccdd502de66cbb",class:{"show-pagination":this.show}},n("div",{key:"e90d2eeaef3131be78bb6bebfd4e62c3e2abf708",ref:t=>this.outputEle=t},n("slot",{key:"36e2f104745f285da532c099c863a6ac48e3f265",name:"output"})))}static get watchers(){return{currentPage:["currentPageChange"],infiniteScroll:["infiniteScrollChange"]}}};i(o,["indexResults","filterChanged","tplRenderFn"]);export{o as nano_algolia_pagination};
+import{r as t,c as e,g as a,h as n,a as s}from"./index-6cc72cd9.js";import{W as i}from"./algolia-data-f0f72f1d.js";const o=class{constructor(a){t(this,a);this.nanoPageChanged=e(this,"nanoPageChanged",7)}get el(){return a(this)}outputEle;outputSlot;outputTo;templateStr;templateSlot;currentPage=null;canGoPrev=false;canGoNext=false;show=true;tplRenderFn;indexResults=null;infiniteScroll=false;maxToShow=null;nanoPageChanged;currentPageChange(){}infiniteScrollChange(){this.show=!this.infiniteScroll}async nextPage(){}async prevPage(){}async goToPage(t){console.info(t)}updateContent(){this.outputTo=this.outputSlot||this.outputEle;if(!this.templateStr||!this.outputTo||!this.indexResults){this.show=false;return}}componentWillLoad(){this.templateSlot=this.el.querySelector('[slot="filter-template"]');this.outputSlot=this.el.querySelector('[slot="output"]');if(this.templateSlot)this.templateStr=this.templateSlot.innerHTML}componentDidLoad(){this.updateContent()}render(){return n(s,{key:"12cc1de8e3bfe96c0368ff394eb6a2cfdf0344c8",class:{"show-pagination":this.show}},n("div",{key:"70dc4683c476084346dc69246acb2092719d0b60",ref:t=>this.outputEle=t},n("slot",{key:"04f51858db37f6a25cae5fead48c5016a4159944",name:"output"})))}static get watchers(){return{currentPage:["currentPageChange"],infiniteScroll:["infiniteScrollChange"]}}};i(o,["indexResults","filterChanged","tplRenderFn"]);export{o as nano_algolia_pagination};
 //# sourceMappingURL=nano-algolia-pagination.entry.js.map

package/dist/nano-components/nano-algolia-results.entry.js

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as s,g as e,B as i,d as h,h as a,a as n}from"./index-3118109b.js";import{S as l,W as d}from"./algolia-data-8fc24341.js";const o=class{constructor(e){t(this,e);this.nanoPageChanged=s(this,"nanoPageChanged",7);this.nanoTplUpdated=s(this,"nanoTplUpdated",7)}get el(){return e(this)}resultTpl;resultTplSlot;startTpl;startTplSlot;endTpl;endTplSlot;outputSlot;outputEle;outputTo;startOutputSlot;endOutputSlot;io;infiniteScrollBar;append=false;shouldClear=true;currHitNum=0;showResults=false;tplRenderFn;results=null;indexResults=null;resultsPage=0;changeEvent=l.Init;facets;isLoading=true;infiniteScroll=false;appendPages=false;nanoPageChanged;nanoTplUpdated;addContentIndex(){this.shouldPageClear();if(this.shouldClear||this.resultsPage===0)this.currHitNum=0;if(this.indexResults&&this.indexResults.results){this.indexResults.results.map((t=>{t._uIndex=this.currHitNum++}))}}resultsChange(){this.shouldPageClear();this.updateResultContent();this.infiniteScrollChange()}headerFooterChange(){this.updateStartEndContent()}appendChange(){this.append=this.infiniteScroll?true:this.appendPages}infiniteScrollChange(){this.append=this.infiniteScroll?true:this.appendPages;if(this.infiniteScroll)this.attachIO();else this.detachIO()}handlePageChage(){if(this.infiniteScroll)this.attachIO();else this.detachIO()}handleLoading(){if(!this.isLoading)this.infiniteScrollChange()}shouldPageClear(){this.shouldClear=this.changeEvent===l.Page?!this.append:true}nextPage(){this.shouldClear=!this.append;this.nanoPageChanged.emit({page:this.resultsPage+1})}attachIO(){if(!this.infiniteScrollBar||!this.infiniteScroll||this.io||!i.isBrowser||typeof window==="undefined"||!window.IntersectionObserver)return;this.io=new window.IntersectionObserver((async t=>{if(t[0].isIntersecting||t[1]&&t[1].isIntersecting){this.nextPage();this.detachIO()}}),{document,rootMargin:"100px",threshold:1});this.io.observe(this.infiniteScrollBar)}detachIO(){if(this.io){this.io.disconnect();this.io=null}}updateStartEndContent(){if(this.startTpl&&this.startOutputSlot){this.startOutputSlot.innerHTML=this.tplRenderFn(this.startTpl,this.indexResults)}if(this.endOutputSlot&&this.endTpl){this.endOutputSlot.innerHTML=this.tplRenderFn(this.endTpl,this.indexResults)}this.nanoTplUpdated.emit(this.el)}updateResultContent(){this.outputTo=this.outputSlot||this.outputEle;if(!this.resultTpl||!this.indexResults)return;if(this.shouldClear)this.outputTo.innerHTML="";if(!this.tplRenderFn)return;const t=document.createElement("div");t.innerHTML=this.tplRenderFn(this.resultTpl,this.indexResults);Array.from(t.children).forEach((t=>{this.outputTo.appendChild(t)}));this.shouldClear=true;this.nanoTplUpdated.emit(this.el)}connectedCallback(){h((()=>{this.startTplSlot=this.el.querySelector('[slot="start-template"]');this.startOutputSlot=this.el.querySelector('[slot="start-output"]');if(this.startTplSlot){this.startTpl=this.startTplSlot.innerHTML;this.startTpl=this.startTpl.replace(/=>/gm,"=>")}this.resultTplSlot=this.el.querySelector('[slot="result-template"]');this.outputSlot=this.el.querySelector('[slot="result-output"]');if(this.resultTplSlot){this.resultTpl=this.resultTplSlot.innerHTML;this.resultTpl=this.resultTpl.replace(/=>/gm,"=>")}this.endTplSlot=this.el.querySelector('[slot="end-template"]');this.endOutputSlot=this.el.querySelector('[slot="end-output"]');if(this.endTplSlot){this.endTpl=this.endTplSlot.innerHTML;this.endTpl=this.endTpl.replace(/=>/gm,"=>")}if(this.indexResults){this.addContentIndex();this.updateResultContent()}}))}componentDidLoad(){this.updateStartEndContent()}disconnectedCallback(){if(this.io){this.io.disconnect();this.io=undefined}}render(){return a(n,{key:"4147d35d40d51e93ad297d55b78c7cb19b6b20c1",class:{"show-results":this.showResults}},a("div",{key:"354c9705a9650c00ab1e4787cf4ff9673d47e6bf",class:"default"},a("slot",{key:"afc1b38a92df5498f471e09137e214899c93b99a"})),a("div",{key:"904cf500535009e93fff280964c57f7b00f5c9bd",ref:t=>this.outputEle=t},a("slot",{key:"46724c1448e12efab63f79d29dfff8d45be29150",name:"start-output"}),a("slot",{key:"14f524dae0de0418dbc34dbe0878552a36876173",name:"result-output"}),a("div",{key:"065e03e12a29882464e89ec74664eb2613c60ebf",ref:t=>this.infiniteScrollBar=t}),a("slot",{key:"ee51e59caa058ba382c1e361f1d538b863ff2a6d",name:"end-output"})))}static get watchers(){return{results:["addContentIndex","resultsChange"],tplRenderFn:["resultsChange"],facets:["headerFooterChange"],appendPages:["appendChange"],infiniteScroll:["infiniteScrollChange"],resultsPage:["handlePageChage"],isLoading:["handleLoading"]}}};d(o,["indexResults","results","tplRenderFn","resultsPage","changeEvent","facets","isLoading"]);export{o as nano_algolia_results};
+import{r as t,c as s,g as e,B as i,e as h,a}from"./index-6cc72cd9.js";import{h as n}from"./renderer-4bc3e2dc.js";import{S as d,W as l}from"./algolia-data-f0f72f1d.js";const o=class{constructor(e){t(this,e);this.nanoPageChanged=s(this,"nanoPageChanged",7);this.nanoTplUpdated=s(this,"nanoTplUpdated",7)}get el(){return e(this)}resultTpl;resultTplSlot;startTpl;startTplSlot;endTpl;endTplSlot;outputSlot;outputEle;outputTo;startOutputSlot;endOutputSlot;io;infiniteScrollBar;append=false;shouldClear=true;currHitNum=0;showResults=false;tplRenderFn;results=null;indexResults=null;resultsPage=0;changeEvent=d.Init;facets;isLoading=true;infiniteScroll=false;appendPages=false;nanoPageChanged;nanoTplUpdated;addContentIndex(){this.shouldPageClear();if(this.shouldClear||this.resultsPage===0)this.currHitNum=0;if(this.indexResults&&this.indexResults.results){this.indexResults.results.map((t=>{t._uIndex=this.currHitNum++}))}}resultsChange(){this.shouldPageClear();this.updateResultContent();this.infiniteScrollChange()}headerFooterChange(){this.updateStartEndContent()}appendChange(){this.append=this.infiniteScroll?true:this.appendPages}infiniteScrollChange(){this.append=this.infiniteScroll?true:this.appendPages;if(this.infiniteScroll)this.attachIO();else this.detachIO()}handlePageChage(){if(this.infiniteScroll)this.attachIO();else this.detachIO()}handleLoading(){if(!this.isLoading)this.infiniteScrollChange()}shouldPageClear(){this.shouldClear=this.changeEvent===d.Page?!this.append:true}nextPage(){this.shouldClear=!this.append;this.nanoPageChanged.emit({page:this.resultsPage+1})}attachIO(){if(!this.infiniteScrollBar||!this.infiniteScroll||this.io||!i.isBrowser||typeof window==="undefined"||!window.IntersectionObserver)return;this.io=new window.IntersectionObserver((async t=>{if(t[0].isIntersecting||t[1]&&t[1].isIntersecting){this.nextPage();this.detachIO()}}),{document,rootMargin:"100px",threshold:1});this.io.observe(this.infiniteScrollBar)}detachIO(){if(this.io){this.io.disconnect();this.io=null}}updateStartEndContent(){if(this.startTpl&&this.startOutputSlot){this.startOutputSlot.innerHTML=this.tplRenderFn(this.startTpl,this.indexResults)}if(this.endOutputSlot&&this.endTpl){this.endOutputSlot.innerHTML=this.tplRenderFn(this.endTpl,this.indexResults)}this.nanoTplUpdated.emit(this.el)}updateResultContent(){this.outputTo=this.outputSlot||this.outputEle;if(!this.resultTpl||!this.indexResults)return;if(this.shouldClear)this.outputTo.innerHTML="";if(!this.tplRenderFn)return;const t=document.createElement("div");t.innerHTML=this.tplRenderFn(this.resultTpl,this.indexResults);Array.from(t.children).forEach((t=>{this.outputTo.appendChild(t)}));this.shouldClear=true;this.nanoTplUpdated.emit(this.el)}connectedCallback(){h((()=>{this.startTplSlot=this.el.querySelector('[slot="start-template"]');this.startOutputSlot=this.el.querySelector('[slot="start-output"]');if(this.startTplSlot){this.startTpl=this.startTplSlot.innerHTML;this.startTpl=this.startTpl.replace(/=>/gm,"=>")}this.resultTplSlot=this.el.querySelector('[slot="result-template"]');this.outputSlot=this.el.querySelector('[slot="result-output"]');if(this.resultTplSlot){this.resultTpl=this.resultTplSlot.innerHTML;this.resultTpl=this.resultTpl.replace(/=>/gm,"=>")}this.endTplSlot=this.el.querySelector('[slot="end-template"]');this.endOutputSlot=this.el.querySelector('[slot="end-output"]');if(this.endTplSlot){this.endTpl=this.endTplSlot.innerHTML;this.endTpl=this.endTpl.replace(/=>/gm,"=>")}if(this.indexResults){this.addContentIndex();this.updateResultContent()}}))}componentDidLoad(){this.updateStartEndContent()}disconnectedCallback(){if(this.io){this.io.disconnect();this.io=undefined}}render(){return n(a,{key:"e5124d09c5619d77f6debca38bd5059ecfb9dce5",class:{"show-results":this.showResults,"nano-results":true}},n("div",{key:"773924ac30cd4e8c57d6767f96a8c9173d6e9ec6",class:"default"},n("slot",{key:"5a330fe6afa15143c006fc3690d1ddb0ccf3bc8d"})),n("div",{key:"3a716202a7364efa1eeb90ea525670c4da5fc7e1",ref:t=>this.outputEle=t},n("slot",{key:"af5860bd4dc7e2472d18f1b86175f5772bac426b",name:"start-output"}),n("slot",{key:"7b57ec404897b71f60a06ca661558624d5db1ac0",name:"result-output"}),n("div",{key:"cff39c4ed229e1081f9160d8a447d56841209b4e",ref:t=>this.infiniteScrollBar=t}),n("slot",{key:"79c19d45895d5f7a285e0beb640f84251d37b558",name:"end-output"})))}static get watchers(){return{results:["addContentIndex","resultsChange"],tplRenderFn:["resultsChange"],facets:["headerFooterChange"],appendPages:["appendChange"],infiniteScroll:["infiniteScrollChange"],resultsPage:["handlePageChage"],isLoading:["handleLoading"]}}};l(o,["indexResults","results","tplRenderFn","resultsPage","changeEvent","facets","isLoading"]);export{o as nano_algolia_results};
 //# sourceMappingURL=nano-algolia-results.entry.js.map