@nanoporetech-digital/components 3.7.1 → 3.8.1

package/dist/nano-components/p-45abbbdd.js.map

@@ -1 +1 @@
-{"version":3,"sources":["src/utils/tabbable.ts"],"names":["isTabbable","el","tag","tagName","toLowerCase","getAttribute","hasAttribute","offsetParent","window","getComputedStyle","visibility","includes","getTabbableElements","root","first","tabbableElements","HTMLElement","push","shadowRoot","mode","map","HTMLSlotElement","assignedElements","slottedEl","Array","from","querySelectorAll","getNearestTabbableElement","length"],"mappings":";;;AACA,SAASA,EAAWC,GAClB,MAAMC,EAAMD,EAAGE,QAAQC,cAGvB,GAAIH,EAAGI,aAAa,cAAgB,KAAM,CACxC,OAAO,MAIT,GAAIJ,EAAGK,aAAa,YAAa,CAC/B,OAAO,MAIT,GACEL,EAAGK,aAAa,kBAChBL,EAAGI,aAAa,mBAAqB,QACrC,CACA,OAAO,MAIT,GAAIJ,EAAGK,aAAa,YAAa,CAC/B,OAAO,KAIT,GACEL,EAAGK,aAAa,oBAChBL,EAAGI,aAAa,qBAAuB,QACvC,CACA,OAAO,KAIT,IAAKH,IAAQ,SAAWA,IAAQ,UAAYD,EAAGK,aAAa,YAAa,CACvE,OAAO,KAIT,GACEJ,IAAQ,SACRD,EAAGI,aAAa,UAAY,UAC3BJ,EAAGK,aAAa,WACjB,CACA,OAAO,MAIT,IAAKL,EAAGM,aAAc,CACpB,OAAO,MAIT,GAAIC,OAAOC,iBAAiBR,GAAIS,aAAe,SAAU,CACvD,OAAO,MAIT,MAAO,CACL,SACA,QACA,SACA,WACA,IACA,QACA,QACA,WACAC,SAAST,YAKGU,EACdC,EACAC,EAAiB,OAEjB,MAAMC,EAAkC,GAExC,GAAIF,aAAgBG,YAAa,CAE/B,GAAIhB,EAAWa,GAAO,CACpBE,EAAiBE,KAAKJ,GAEtB,GAAIC,EAAO,OAAOC,EAIpB,GAAIF,EAAKK,YAAcL,EAAKK,WAAWC,OAAS,OAAQ,CACtDP,EAAoBC,EAAKK,WAAYJ,GAAOM,KAAKnB,IAC/C,IAAKc,EAAiBJ,SAASV,GAAKc,EAAiBE,KAAKhB,MAK9D,GAAIoB,iBAAmBR,aAAgBQ,gBAAiB,CACtDR,EAAKS,mBAAmBF,KAAKG,IAC3BX,EAAoBW,EAAWT,GAAOM,KAAKnB,IACzC,IAAKc,EAAiBJ,SAASV,GAAKc,EAAiBE,KAAKhB,UAOlEuB,MAAMC,KAAKZ,EAAKa,iBAAiB,MAAMN,KAAKnB,IAC1CW,EAAoBX,EAAIa,GAAOM,KAAKnB,IAClC,IAAKc,EAAiBJ,SAASV,GAAKc,EAAiBE,KAAKhB,SAI9D,OAAOc,WAGOY,EAA0B1B,GACxC,MAAMc,EAAmBH,EAAoBX,EAAmB,MAChE,OAAOc,EAAiBa,OAASb,EAAiB,GAAK","sourcesContent":["// Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable\nfunction isTabbable(el: HTMLElement) {\n  const tag = el.tagName.toLowerCase();\n\n  // Elements with a -1 tab index are not tabbable\n  if (el.getAttribute('tabindex') === '-1') {\n    return false;\n  }\n\n  // Elements with a disabled attribute are not tabbable\n  if (el.hasAttribute('disabled')) {\n    return false;\n  }\n\n  // Elements with aria-disabled are not tabbable\n  if (\n    el.hasAttribute('aria-disabled') &&\n    el.getAttribute('aria-disabled') !== 'false'\n  ) {\n    return false;\n  }\n\n  // Elements with a tabindex other than -1 are tabbable\n  if (el.hasAttribute('tabindex')) {\n    return true;\n  }\n\n  // Elements with a contenteditable attribute are tabbable\n  if (\n    el.hasAttribute('contenteditable') &&\n    el.getAttribute('contenteditable') !== 'false'\n  ) {\n    return true;\n  }\n\n  // Audio and video elements with the controls attribute are tabbable\n  if ((tag === 'audio' || tag === 'video') && el.hasAttribute('controls')) {\n    return true;\n  }\n\n  // Radios without a checked attribute are not tabbable\n  if (\n    tag === 'input' &&\n    el.getAttribute('type') === 'radio' &&\n    !el.hasAttribute('checked')\n  ) {\n    return false;\n  }\n\n  // Elements that are hidden have no offsetParent and are not tabbable\n  if (!el.offsetParent) {\n    return false;\n  }\n\n  // Elements without visibility are not tabbable (calculated last due to performance)\n  if (window.getComputedStyle(el).visibility === 'hidden') {\n    return false;\n  }\n\n  // At this point, the following elements are considered tabbable\n  return [\n    'button',\n    'input',\n    'select',\n    'textarea',\n    'a',\n    'audio',\n    'video',\n    'summary',\n  ].includes(tag);\n}\n\n// Locates all tabbable elements within an element. If the target element is tabbable, it will be included in the\n// resulting array. This function will also look in open shadow roots.\nexport function getTabbableElements(\n  root: HTMLElement | ShadowRoot,\n  first: boolean = false\n) {\n  const tabbableElements: HTMLElement[] = [];\n\n  if (root instanceof HTMLElement) {\n    // Is the root element tabbable?\n    if (isTabbable(root)) {\n      tabbableElements.push(root);\n\n      if (first) return tabbableElements;\n    }\n\n    // Look for tabbable elements in the shadow root\n    if (root.shadowRoot && root.shadowRoot.mode === 'open') {\n      getTabbableElements(root.shadowRoot, first).map((el) => {\n        if (!tabbableElements.includes(el)) tabbableElements.push(el);\n      });\n    }\n\n    // Look at slotted elements\n    if (HTMLSlotElement && root instanceof HTMLSlotElement) {\n      root.assignedElements().map((slottedEl: HTMLElement) => {\n        getTabbableElements(slottedEl, first).map((el) => {\n          if (!tabbableElements.includes(el)) tabbableElements.push(el);\n        });\n      });\n    }\n  }\n\n  // Look for tabbable elements in children\n  Array.from(root.querySelectorAll('*')).map((el: HTMLElement) => {\n    getTabbableElements(el, first).map((el) => {\n      if (!tabbableElements.includes(el)) tabbableElements.push(el);\n    });\n  });\n\n  return tabbableElements;\n}\n\nexport function getNearestTabbableElement(el: Element): HTMLElement | null {\n  const tabbableElements = getTabbableElements(el as HTMLElement, true);\n  return tabbableElements.length ? tabbableElements[0] : null;\n}\n"]}
+{"version":3,"names":["isTabbable","el","tag","tagName","toLowerCase","getAttribute","hasAttribute","offsetParent","window","getComputedStyle","visibility","includes","getTabbableElements","root","first","tabbableElements","HTMLElement","push","shadowRoot","mode","map","HTMLSlotElement","assignedElements","slottedEl","Array","from","querySelectorAll","getNearestTabbableElement","length"],"sources":["./src/utils/tabbable.ts"],"sourcesContent":["// Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable\nfunction isTabbable(el: HTMLElement) {\n  const tag = el.tagName.toLowerCase();\n\n  // Elements with a -1 tab index are not tabbable\n  if (el.getAttribute('tabindex') === '-1') {\n    return false;\n  }\n\n  // Elements with a disabled attribute are not tabbable\n  if (el.hasAttribute('disabled')) {\n    return false;\n  }\n\n  // Elements with aria-disabled are not tabbable\n  if (\n    el.hasAttribute('aria-disabled') &&\n    el.getAttribute('aria-disabled') !== 'false'\n  ) {\n    return false;\n  }\n\n  // Elements with a tabindex other than -1 are tabbable\n  if (el.hasAttribute('tabindex')) {\n    return true;\n  }\n\n  // Elements with a contenteditable attribute are tabbable\n  if (\n    el.hasAttribute('contenteditable') &&\n    el.getAttribute('contenteditable') !== 'false'\n  ) {\n    return true;\n  }\n\n  // Audio and video elements with the controls attribute are tabbable\n  if ((tag === 'audio' || tag === 'video') && el.hasAttribute('controls')) {\n    return true;\n  }\n\n  // Radios without a checked attribute are not tabbable\n  if (\n    tag === 'input' &&\n    el.getAttribute('type') === 'radio' &&\n    !el.hasAttribute('checked')\n  ) {\n    return false;\n  }\n\n  // Elements that are hidden have no offsetParent and are not tabbable\n  if (!el.offsetParent) {\n    return false;\n  }\n\n  // Elements without visibility are not tabbable (calculated last due to performance)\n  if (window.getComputedStyle(el).visibility === 'hidden') {\n    return false;\n  }\n\n  // At this point, the following elements are considered tabbable\n  return [\n    'button',\n    'input',\n    'select',\n    'textarea',\n    'a',\n    'audio',\n    'video',\n    'summary',\n  ].includes(tag);\n}\n\n// Locates all tabbable elements within an element. If the target element is tabbable, it will be included in the\n// resulting array. This function will also look in open shadow roots.\nexport function getTabbableElements(\n  root: HTMLElement | ShadowRoot,\n  first: boolean = false\n) {\n  const tabbableElements: HTMLElement[] = [];\n\n  if (root instanceof HTMLElement) {\n    // Is the root element tabbable?\n    if (isTabbable(root)) {\n      tabbableElements.push(root);\n\n      if (first) return tabbableElements;\n    }\n\n    // Look for tabbable elements in the shadow root\n    if (root.shadowRoot && root.shadowRoot.mode === 'open') {\n      getTabbableElements(root.shadowRoot, first).map((el) => {\n        if (!tabbableElements.includes(el)) tabbableElements.push(el);\n      });\n    }\n\n    // Look at slotted elements\n    if (HTMLSlotElement && root instanceof HTMLSlotElement) {\n      root.assignedElements().map((slottedEl: HTMLElement) => {\n        getTabbableElements(slottedEl, first).map((el) => {\n          if (!tabbableElements.includes(el)) tabbableElements.push(el);\n        });\n      });\n    }\n  }\n\n  // Look for tabbable elements in children\n  Array.from(root.querySelectorAll('*')).map((el: HTMLElement) => {\n    getTabbableElements(el, first).map((el) => {\n      if (!tabbableElements.includes(el)) tabbableElements.push(el);\n    });\n  });\n\n  return tabbableElements;\n}\n\nexport function getNearestTabbableElement(el: Element): HTMLElement | null {\n  const tabbableElements = getTabbableElements(el as HTMLElement, true);\n  return tabbableElements.length ? tabbableElements[0] : null;\n}\n"],"mappings":";;;AACA,SAASA,EAAWC,GAClB,MAAMC,EAAMD,EAAGE,QAAQC,cAGvB,GAAIH,EAAGI,aAAa,cAAgB,KAAM,CACxC,OAAO,K,CAIT,GAAIJ,EAAGK,aAAa,YAAa,CAC/B,OAAO,K,CAIT,GACEL,EAAGK,aAAa,kBAChBL,EAAGI,aAAa,mBAAqB,QACrC,CACA,OAAO,K,CAIT,GAAIJ,EAAGK,aAAa,YAAa,CAC/B,OAAO,I,CAIT,GACEL,EAAGK,aAAa,oBAChBL,EAAGI,aAAa,qBAAuB,QACvC,CACA,OAAO,I,CAIT,IAAKH,IAAQ,SAAWA,IAAQ,UAAYD,EAAGK,aAAa,YAAa,CACvE,OAAO,I,CAIT,GACEJ,IAAQ,SACRD,EAAGI,aAAa,UAAY,UAC3BJ,EAAGK,aAAa,WACjB,CACA,OAAO,K,CAIT,IAAKL,EAAGM,aAAc,CACpB,OAAO,K,CAIT,GAAIC,OAAOC,iBAAiBR,GAAIS,aAAe,SAAU,CACvD,OAAO,K,CAIT,MAAO,CACL,SACA,QACA,SACA,WACA,IACA,QACA,QACA,WACAC,SAAST,EACb,C,SAIgBU,EACdC,EACAC,EAAiB,OAEjB,MAAMC,EAAkC,GAExC,GAAIF,aAAgBG,YAAa,CAE/B,GAAIhB,EAAWa,GAAO,CACpBE,EAAiBE,KAAKJ,GAEtB,GAAIC,EAAO,OAAOC,C,CAIpB,GAAIF,EAAKK,YAAcL,EAAKK,WAAWC,OAAS,OAAQ,CACtDP,EAAoBC,EAAKK,WAAYJ,GAAOM,KAAKnB,IAC/C,IAAKc,EAAiBJ,SAASV,GAAKc,EAAiBE,KAAKhB,EAAG,G,CAKjE,GAAIoB,iBAAmBR,aAAgBQ,gBAAiB,CACtDR,EAAKS,mBAAmBF,KAAKG,IAC3BX,EAAoBW,EAAWT,GAAOM,KAAKnB,IACzC,IAAKc,EAAiBJ,SAASV,GAAKc,EAAiBE,KAAKhB,EAAG,GAC7D,G,EAMRuB,MAAMC,KAAKZ,EAAKa,iBAAiB,MAAMN,KAAKnB,IAC1CW,EAAoBX,EAAIa,GAAOM,KAAKnB,IAClC,IAAKc,EAAiBJ,SAASV,GAAKc,EAAiBE,KAAKhB,EAAG,GAC7D,IAGJ,OAAOc,CACT,C,SAEgBY,EAA0B1B,GACxC,MAAMc,EAAmBH,EAAoBX,EAAmB,MAChE,OAAOc,EAAiBa,OAASb,EAAiB,GAAK,IACzD,Q"}

package/dist/nano-components/{p-885b6950.js → p-45b7682a.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{a as t}from"./p-845ae77e.js";const o=new Set;function n(t){o.add(t);document.body.classList.add("nano-scroll-lock")}function c(t){o.delete(t);if(o.size===0){document.body.classList.remove("nano-scroll-lock")}}function s(t,o,n=false){if(!n){try{t.scrollTo({left:o,behavior:"smooth"})}catch(n){t.scrollLeft=o}return}try{t.scrollTo({top:o,behavior:"smooth"})}catch(n){t.scrollTop=o}}function e(o,n,c="vertical",e="start"){const i=t(o,n);const a=i.top+n.scrollTop;const r=i.left+n.scrollLeft;const f=n.scrollLeft;const l=n.scrollLeft+n.offsetWidth;const u=n.scrollTop;const h=n.scrollTop+n.offsetHeight;if(c==="horizontal"||c==="both"){if(e==="start"){if(r<f)s(n,r);else if(r+o.clientWidth>l)s(n,r-n.offsetWidth+o.clientWidth)}else s(n,n.scrollLeft+i.left-n.offsetWidth/2+o.offsetWidth/2)}if(c==="vertical"||c==="both"){if(a<u)s(n,a,true);else if(a+o.clientHeight>h){s(n,a-n.offsetHeight+o.clientHeight,true)}}}export{n as l,e as s,c as u};
-//# sourceMappingURL=p-885b6950.js.map
+import{a as t}from"./p-257432ff.js";const o=new Set;function n(t){o.add(t);document.body.classList.add("nano-scroll-lock")}function c(t){o.delete(t);if(o.size===0){document.body.classList.remove("nano-scroll-lock")}}function s(t,o,n=false){if(!n){try{t.scrollTo({left:o,behavior:"smooth"})}catch(n){t.scrollLeft=o}return}try{t.scrollTo({top:o,behavior:"smooth"})}catch(n){t.scrollTop=o}}function e(o,n,c="vertical",e="start"){const i=t(o,n);const f=i.top+n.scrollTop;const r=i.left+n.scrollLeft;const a=n.scrollLeft;const l=n.scrollLeft+n.offsetWidth;const u=n.scrollTop;const h=n.scrollTop+n.offsetHeight;if(c==="horizontal"||c==="both"){if(e==="start"){if(r<a)s(n,r);else if(r+o.clientWidth>l)s(n,r-n.offsetWidth+o.clientWidth)}else s(n,n.scrollLeft+i.left-n.offsetWidth/2+o.offsetWidth/2)}if(c==="vertical"||c==="both"){if(f<u)s(n,f,true);else if(f+o.clientHeight>h){s(n,f-n.offsetHeight+o.clientHeight,true)}}}export{n as l,e as s,c as u};
+//# sourceMappingURL=p-45b7682a.js.map

package/dist/nano-components/p-45b7682a.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["locks","Set","lockBodyScrolling","lockingEl","add","document","body","classList","unlockBodyScrolling","delete","size","remove","scrollTo","element","scrollAmt","vertical","left","behavior","e","scrollLeft","top","scrollTop","scrollIntoView","container","direction","position","offset","getOffset","offsetTop","offsetLeft","minX","maxX","offsetWidth","minY","maxY","offsetHeight","clientWidth","clientHeight"],"sources":["./src/utils/scroll.ts"],"sourcesContent":["import { getOffset } from './dom';\n\nconst locks = new Set();\n\n/**\n * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\n * without premature unlocking.\n */\nexport function lockBodyScrolling(lockingEl: HTMLElement) {\n  locks.add(lockingEl);\n  document.body.classList.add('nano-scroll-lock');\n}\n\n/**\n * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.\n */\nexport function unlockBodyScrolling(lockingEl: HTMLElement) {\n  locks.delete(lockingEl);\n\n  if (locks.size === 0) {\n    document.body.classList.remove('nano-scroll-lock');\n  }\n}\n\nfunction scrollTo(\n  element: HTMLElement,\n  scrollAmt: number,\n  vertical: boolean = false\n) {\n  if (!vertical) {\n    try {\n      element.scrollTo({ left: scrollAmt, behavior: 'smooth' });\n    } catch (e) {\n      element.scrollLeft = scrollAmt;\n    }\n    return;\n  }\n  try {\n    element.scrollTo({ top: scrollAmt, behavior: 'smooth' });\n  } catch (e) {\n    element.scrollTop = scrollAmt;\n  }\n}\n\n/**\n * Scrolls an element into view of its container. If the element is already in view, nothing will happen.\n */\nexport function scrollIntoView(\n  element: HTMLElement,\n  container: HTMLElement,\n  direction: 'horizontal' | 'vertical' | 'both' = 'vertical',\n  position: 'center' | 'start' = 'start'\n) {\n  const offset = getOffset(element, container);\n  const offsetTop = offset.top + container.scrollTop;\n  const offsetLeft = offset.left + container.scrollLeft;\n  const minX = container.scrollLeft;\n  const maxX = container.scrollLeft + container.offsetWidth;\n  const minY = container.scrollTop;\n  const maxY = container.scrollTop + container.offsetHeight;\n\n  if (direction === 'horizontal' || direction === 'both') {\n    if (position === 'start') {\n      if (offsetLeft < minX) scrollTo(container, offsetLeft);\n      else if (offsetLeft + element.clientWidth > maxX)\n        scrollTo(\n          container,\n          offsetLeft - container.offsetWidth + element.clientWidth\n        );\n    } else\n      scrollTo(\n        container,\n        container.scrollLeft +\n          offset.left -\n          container.offsetWidth / 2 +\n          element.offsetWidth / 2\n      );\n  }\n\n  if (direction === 'vertical' || direction === 'both') {\n    if (offsetTop < minY) scrollTo(container, offsetTop, true);\n    else if (offsetTop + element.clientHeight > maxY) {\n      scrollTo(\n        container,\n        offsetTop - container.offsetHeight + element.clientHeight,\n        true\n      );\n    }\n  }\n}\n"],"mappings":";;;oCAEA,MAAMA,EAAQ,IAAIC,I,SAMFC,EAAkBC,GAChCH,EAAMI,IAAID,GACVE,SAASC,KAAKC,UAAUH,IAAI,mBAC9B,C,SAKgBI,EAAoBL,GAClCH,EAAMS,OAAON,GAEb,GAAIH,EAAMU,OAAS,EAAG,CACpBL,SAASC,KAAKC,UAAUI,OAAO,mB,CAEnC,CAEA,SAASC,EACPC,EACAC,EACAC,EAAoB,OAEpB,IAAKA,EAAU,CACb,IACEF,EAAQD,SAAS,CAAEI,KAAMF,EAAWG,SAAU,U,CAC9C,MAAOC,GACPL,EAAQM,WAAaL,C,CAEvB,M,CAEF,IACED,EAAQD,SAAS,CAAEQ,IAAKN,EAAWG,SAAU,U,CAC7C,MAAOC,GACPL,EAAQQ,UAAYP,C,CAExB,C,SAKgBQ,EACdT,EACAU,EACAC,EAAgD,WAChDC,EAA+B,SAE/B,MAAMC,EAASC,EAAUd,EAASU,GAClC,MAAMK,EAAYF,EAAON,IAAMG,EAAUF,UACzC,MAAMQ,EAAaH,EAAOV,KAAOO,EAAUJ,WAC3C,MAAMW,EAAOP,EAAUJ,WACvB,MAAMY,EAAOR,EAAUJ,WAAaI,EAAUS,YAC9C,MAAMC,EAAOV,EAAUF,UACvB,MAAMa,EAAOX,EAAUF,UAAYE,EAAUY,aAE7C,GAAIX,IAAc,cAAgBA,IAAc,OAAQ,CACtD,GAAIC,IAAa,QAAS,CACxB,GAAII,EAAaC,EAAMlB,EAASW,EAAWM,QACtC,GAAIA,EAAahB,EAAQuB,YAAcL,EAC1CnB,EACEW,EACAM,EAAaN,EAAUS,YAAcnB,EAAQuB,Y,MAGjDxB,EACEW,EACAA,EAAUJ,WACRO,EAAOV,KACPO,EAAUS,YAAc,EACxBnB,EAAQmB,YAAc,E,CAI9B,GAAIR,IAAc,YAAcA,IAAc,OAAQ,CACpD,GAAII,EAAYK,EAAMrB,EAASW,EAAWK,EAAW,WAChD,GAAIA,EAAYf,EAAQwB,aAAeH,EAAM,CAChDtB,EACEW,EACAK,EAAYL,EAAUY,aAAetB,EAAQwB,aAC7C,K,EAIR,Q"}

package/dist/nano-components/p-4b1d73e9.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,c as a,h as o,a as n,g as i}from"./p-bf91c50e.js";import{g as s,a as r}from"./p-257432ff.js";import{f as e}from"./p-f8f89998.js";import{s as h}from"./p-45b7682a.js";import{C as l}from"./p-909a424c.js";import{c as d}from"./p-411bb8f1.js";import{d as c}from"./p-167b9165.js";import"./p-9746b0a5.js";import"./p-69a3e911.js";const b=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-track-color:#e4e6e8;--indicator-size:0;--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background-rgb:var(--nano-layer-bg-rgb, 255 255 255);--scroll-btn-color:"currentColor";--content-padding:2rem 2.5rem;--content-bg:rgb(var(--background-rgb));--content-border-radius:var(--border-radius);--tabs-padding-start:2.5rem;--tabs-padding-end:2.5rem;--tabs-padding-top:0;--tabs-padding-bottom:0;--tabs-container-bg:"transparent";--tabs-bg-rgb:var(--background-rgb);--tab-border-radius:var(--border-radius);--tab-text-color:#007495;--shadow-opacity:0.1;--fade-transparency:0;display:block;position:relative;z-index:var(--nano-layer-index-raised, 5)}@media only screen and (max-width: 768px){:host{--tabs-padding-start:1.5rem;--tabs-padding-end:1.5rem}}:host ::slotted(nano-tab){--tab-indicator-color:var(--indicator-color);--bg-rgb:var(--tabs-bg-rgb);--border-radius:var(--tab-border-radius)}:host([placement=start]),:host([placement=end]){--content-padding:1rem;--tabs-padding-start:0;--tabs-padding-end:0;--tabs-padding-top:0;--tabs-padding-bottom:0;--tab-text-color:#455556;--indicator-color:#007495;--indicator-size:2px}:host(.nano-color){--indicator-color:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--tab-text-color:rgb(var(--nano-color-base-rgb) / 70%)}:host(.nano-color) ::slotted(nano-tab){--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #00637f))}.nano-tab-group{display:flex;border-radius:0;width:100%;flex:inherit}.nano-tab-group__tabs{display:flex;position:relative;width:100%}.nano-tab-group__active-tab-indicator{position:absolute;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease}.nano-tab-group__body{background:var(--content-bg)}.nano-tab-group:not(.focus-visible) ::slotted(nano-tab){--focus-shadow:none}.nano-tab-group .nano-tab-group__nav-container{position:relative;display:flex;background:var(--tabs-container-bg)}.nano-tab-group button{-webkit-appearance:none;appearance:none;background-color:transparent}.nano-tab-group__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;inset-block:0;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color)}.nano-tab-group__scroll-button:focus{outline:none}.nano-tab-group__scroll-button.is-shown{opacity:1}.nano-tab-group__scroll-button.focus-visible:focus{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tab-group__scroll-button--left{inset-inline-start:0}.nano-tab-group__scroll-button--right{inset-inline-end:0}.nano-tab-group__scroll-button nano-icon{font-size:16px}.nano-tab-group--top{flex-direction:column}.nano-tab-group--top .nano-tab-group__nav-container::after{content:"";width:86%;box-shadow:0 10px 40px 10px rgb(0 0 0/var(--shadow-opacity));height:10px;position:absolute;inset-inline-start:7%;inset-block-end:-10px;border-radius:10px;z-index:-1}.nano-tab-group--top .nano-tab-group__nav{scrollbar-width:none;-ms-overflow-style:none;padding-inline:var(--tabs-padding-start) var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);display:flex;overflow-x:auto;overflow-y:hidden;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 4);mask-size:calc(100% + var(--tabs-padding-end) * 4);-webkit-mask-position:calc(var(--tabs-padding-end) * -2);mask-position:calc(var(--tabs-padding-end) * -2)}.nano-tab-group--top .nano-tab-group__nav::-webkit-scrollbar{inline-size:0;block-size:0}.nano-tab-group--top .nano-tab-group__nav::after{content:" ";padding-inline:0 var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);line-height:1;flex:0 0 auto}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left .nano-tab-group__nav{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 2);mask-size:calc(100% + var(--tabs-padding-end) * 2)}.nano-tab-group--top.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-position:calc(var(--tabs-padding-end) * -1);mask-position:calc(var(--tabs-padding-end) * -1);-webkit-mask-size:calc(100% + var(--tabs-padding-end));mask-size:calc(100% + var(--tabs-padding-end))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.nano-tab-group--top .nano-tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row;text-align:center;color:var(--tab-text-color);width:auto}.nano-tab-group--top .nano-tab-group__active-tab-indicator{inset-block-end:-2px;-webkit-border-after:solid var(--indicator-size) var(--indicator-color);border-block-end:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--top .nano-tab-group__body{order:2;background:var(--content-bg);position:relative;overflow:hidden;width:auto;display:flex;justify-content:center;padding:var(--content-padding);border-radius:var(--content-border-radius);flex:1 1 auto}.nano-tab-group--start{flex-direction:row}.nano-tab-group--start .nano-tab-group__tabs{flex:0 0 auto;flex-direction:column;color:var(--tab-text-color);background:rgb(var(--tabs-bg-rgb));-webkit-border-start:solid var(--indicator-size) var(--indicator-track-color);border-inline-start:solid var(--indicator-size) var(--indicator-track-color);text-align:start}.nano-tab-group--start .nano-tab-group__active-tab-indicator{inset-inline-start:-2px;-webkit-border-start:solid var(--indicator-size) var(--indicator-color);border-inline-start:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--start .nano-tab-group__body{flex:1 1 auto;order:2;padding:var(--content-padding);overflow:hidden;border-start-start-radius:0;border-start-end-radius:var(--content-border-radius);border-end-end-radius:var(--content-border-radius);border-end-start-radius:0}';const p=class{constructor(o){t(this,o);this.nanoTabShow=a(this,"nanoTabShow",7);this.nanoTabHide=a(this,"nanoTabHide",7);this.nanoTabWillClose=a(this,"nanoTabWillClose",7);this.nanoTabClose=a(this,"nanoTabClose",7);this.initialTouchX=null;this.initialTouchY=null;this.mutationObservers=new WeakMap;this.updateScrollControls=()=>{if(this.noScrollControls){this.hasScrollControls=false}else{this.hasScrollControls=["top"].includes(this.placement)&&this.nav.scrollWidth>this.nav.clientWidth&&this.nav.scrollWidth>this.tabs.clientWidth}};this.handleClick=t=>{const a=t.target;const o=a.closest("nano-tab");if(o)this.setActiveTab(o)};this.handleKeyDown=t=>{if(["Enter"," "].includes(t.key)){const a=t.target;const o=a.closest("nano-tab");if(o){this.setActiveTab(o);t.preventDefault()}}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const a=document.activeElement;if(a&&a.tagName.toLowerCase()==="nano-tab"){const o=this.getAllActiveTabs;let n=o.indexOf(a);if(t.key==="Home"){n=0}else if(t.key==="End"){n=o.length-1}else if(this.isRtl&&t.key==="ArrowRight"||!this.isRtl&&t.key==="ArrowLeft"){n=Math.max(0,n-1)}else if(this.isRtl&&t.key==="ArrowLeft"||!this.isRtl&&t.key==="ArrowRight"){n=Math.min(o.length-1,n+1)}o[n].setFocus();if(["top"].includes(this.placement)){h(o[n],this.nav,"horizontal","center")}t.stopPropagation();t.preventDefault()}}};this.handleTabScroll=()=>{if(!this.hasScrollControls){this.hideControlLeft=this.hideControlRight=true;return}const t=this.isRtl?this.nav.scrollLeft===0:this.nav.scrollWidth-this.nav.scrollLeft===this.nav.clientWidth;const a=this.isRtl?this.nav.scrollWidth+this.nav.scrollLeft===this.nav.clientWidth:this.nav.scrollLeft===0;if(a){this.hideControlLeft=true;this.hideControlRight=false}else if(t){this.hideControlLeft=false;this.hideControlRight=true}else{this.hideControlRight=false;this.hideControlLeft=false}};this.handleBtnClick=(t=false)=>{const a=this.getNavWidth();let o;if(t)o=this.nav.scrollLeft+a-20;else o=this.nav.scrollLeft-a+20;try{this.nav.scroll({left:o,behavior:"smooth"})}catch(t){this.nav.scrollLeft=o}};this.handleTouchStart=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];this.initialTouchX=a.pageX;this.initialTouchY=a.pageY};this.handleTouchEnd=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];const o=a.pageX-this.initialTouchX;const n=a.pageY-this.initialTouchY;const i=70;const s=this.initialTouchX-a.clientX;const r=this.initialTouchY-a.clientY;const e=Math.abs(o)>=i&&Math.abs(n)<=i;const h=this.getAllActiveTabs;const l=h.findIndex((t=>t.active));if(e){const t=o<0&&this.placement==="top"||o>0&&this.placement!=="top"?1:-1;if(h[l+t]){this.setActiveTab(h[l+t]);if(Math.abs(s)>Math.abs(r)){if(s>0)this.activePanel.setAttribute("animation-dir","left");else this.activePanel.setAttribute("animation-dir","right")}}}this.initialTouchX=null;this.initialTouchY=null};this.handleContentSlotChange=()=>{setTimeout((()=>{this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false)}))};this.handleTabSlotChange=t=>{setTimeout((()=>{this.setAriaLabels();this.handleTabScroll();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);this.updateScrollControls()}),500);const a=t.target.assignedElements({flatten:true});a.forEach((t=>{if(!this.mutationObservers.get(t)){const a=new MutationObserver((()=>{setTimeout((()=>{this.syncActiveTabIndicator();this.handleTabScroll();this.updateScrollControls()}),500)}));this.mutationObservers.set(t,a);a.observe(t,{characterData:true,childList:true,subtree:true})}}))};this.hasScrollControls=false;this.hideControlRight=true;this.hideControlLeft=true;this.tab=undefined;this.placement="top";this.noScrollControls=false;this.color=undefined;this.storeId=undefined;this.storeMethod="session";this.disableSwipe=undefined}handleTabNameChange(){if(this.activeTab&&this.activeTab.panel===this.tab)return;const t=this.getAllActiveTabs.find((t=>t.panel===this.tab));this.setActiveTab(t)}handlePlacementChange(){this.syncActiveTabIndicator()}handleNoScrollControlsChange(){this.updateScrollControls()}hideRightBtn(){if(!this.rightBtn)return;c(this.rightBtn,"is-shown",!this.hideControlRight)}hideLeftBtn(){if(!this.leftBtn)return;c(this.leftBtn,"is-shown",!this.hideControlLeft)}watchScrollControls(){if(this.hasScrollControls)setTimeout((t=>this.handleTabScroll()),20);else setTimeout((t=>{this.hideControlLeft=this.hideControlRight=true}),20)}async show(t){if(this.activeTab&&this.activeTab.panel===t)return;const a=this.getAllActiveTabs.find((a=>a.panel===t));if(a)this.setActiveTab(a)}get getAllActiveTabs(){return this.getAllTabs.filter((t=>!t.disabled))}get getAllTabs(){return s(this.host,"nano-tab")}get getAllPanels(){return s(this.host,"nano-tab-content")}get getActiveTab(){return this.getAllActiveTabs.find((t=>t.active))}setActiveTab(t,a=true){if(t&&t!==this.activeTab&&!t.disabled&&this.getAllActiveTabs.includes(t)){const o=this.activeTab;this.activeTab=t;this.tab=t.panel;this.getAllActiveTabs.map((t=>t.active=t===this.activeTab));this.getAllPanels.map((t=>{if(t.name===this.activeTab.panel){t.active=true;this.activePanel=t}else t.active=false;t.removeAttribute("animation-dir")}));this.syncActiveTabIndicator();if(this.nav&&["top"].includes(this.placement)){h(this.activeTab,this.nav,"horizontal","center")}if(a){if(o){this.nanoTabHide.emit({name:o.panel})}this.nanoTabShow.emit({name:this.activeTab.panel})}}}setAriaLabels(){const t=this.getAllActiveTabs;const a=this.getAllPanels;t.map((t=>{const o=a.find((a=>a.name===t.panel));if(o){t.setAttribute("aria-controls",o.getAttribute("id"));o.setAttribute("aria-labelledby",t.getAttribute("id"))}}))}syncActiveTabIndicator(){var t;this.getAllTabs.forEach((t=>t.setAttribute("direction",this.placement==="top"?"horizontal":"vertical")));const a=this.getActiveTab;const o=((t=a.shadowRoot.querySelector(".nanotab"))===null||t===void 0?void 0:t.clientWidth)||0;const n=a.clientHeight;const i=r(a,this.tabs);if(!this.activeTabIndicator)return;const s=i.top+this.nav.scrollTop;const e=i.left;switch(this.placement){case"top":this.activeTabIndicator.style.width=`${o}px`;this.activeTabIndicator.style.height=null;this.activeTabIndicator.style.transform=`translateX(${e}px)`;break;case"start":this.activeTabIndicator.style.width=null;this.activeTabIndicator.style.height=`${n}px`;this.activeTabIndicator.style.transform=`translateY(${s}px)`;break}}getNavWidth(){if(!this.nav)return 0;const t=getComputedStyle(this.nav);let a=this.nav.clientWidth;return a-=parseFloat(t.paddingLeft)+parseFloat(t.paddingRight)}handleTabClose(t){var a;let o=this.getAllActiveTabs.indexOf(t.target);const n=t.target;if(o<0)return;const i=this.getAllPanels.find((t=>t.name===n.panel));if(!i)return;t.stopImmediatePropagation();const s=this.nanoTabWillClose.emit({name:n.panel});if(s.defaultPrevented)return;if(n.active){o=o===0?1:o-1;const t=(a=this.getAllActiveTabs[o])===null||a===void 0?void 0:a.panel;if(t)this.host.show(t)}n.remove();i.remove();this.nanoTabClose.emit({name:n.panel})}componentDidLoad(){const t=new IntersectionObserver(((t,a)=>{if(t[0].intersectionRatio>0){this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);if(this.storeId)l.init(this,["tab"],this.storeMethod,this.storeId);a.unobserve(t[0].target)}}));t.observe(this.host);e.observe(this.tabGroup);if(this.leftBtn){e.observe(this.leftBtn);e.observe(this.rightBtn)}requestAnimationFrame((()=>this.updateScrollControls()));if(!window["ResizeObserver"])return;this.resizeObserver=new ResizeObserver((()=>{setTimeout((()=>{this.updateScrollControls();this.syncActiveTabIndicator();h(this.activeTab,this.nav,"horizontal","center")}),500)}));this.resizeObserver.observe(this.nav)}connectedCallback(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"}disconnectedCallback(){e.unobserve(this.tabGroup);if(this.leftBtn){e.unobserve(this.leftBtn);e.unobserve(this.rightBtn)}if(this.resizeObserver)this.resizeObserver.unobserve(this.nav)}render(){this.isRtl=this.host.ownerDocument.dir==="rtl";return o(n,{class:Object.assign({},d(this.color)),dir:this.isRtl?"rtl":null},o("div",{part:"base",ref:t=>this.tabGroup=t,class:{"nano-tab-group":true,"nano-tab-group--top":this.placement==="top","nano-tab-group--start":this.placement==="start","nano-tab-group--has-scroll-controls":this.hasScrollControls,"nano-tab-group--has-scroll-controls-left":!this.hideControlLeft,"nano-tab-group--has-scroll-controls-right":!this.hideControlRight},onClick:this.handleClick,onKeyDown:this.handleKeyDown},o("div",{class:"nano-tab-group__nav-container",part:"nav"},this.placement==="top"&&o("button",{class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--left":true},ref:t=>this.leftBtn=t,onClick:()=>this.handleBtnClick(false)},o("nano-icon",{name:"light/chevron-left"})),o("div",{ref:t=>this.nav=t,class:"nano-tab-group__nav",onScroll:this.handleTabScroll},o("div",{ref:t=>this.tabs=t,part:"tabs",class:"nano-tab-group__tabs",role:"tablist"},o("div",{ref:t=>this.activeTabIndicator=t,part:"active-tab-indicator",class:"nano-tab-group__active-tab-indicator"}),o("slot",{name:"tabs",onSlotchange:this.handleTabSlotChange}))),this.placement==="top"&&o("button",{class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--right":true},ref:t=>this.rightBtn=t,onClick:()=>this.handleBtnClick(true)},o("nano-icon",{name:"light/chevron-right"}))),o("slot",{name:"tab-content-header"}),o("div",{part:"body",class:"nano-tab-group__body",onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},o("slot",{onSlotchange:this.handleContentSlotChange}))))}get host(){return i(this)}static get watchers(){return{tab:["handleTabNameChange"],placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"],hideControlRight:["hideRightBtn"],hideControlLeft:["hideLeftBtn"],hasScrollControls:["watchScrollControls"]}}};p.style=b;export{p as nano_tab_group};
+//# sourceMappingURL=p-4b1d73e9.entry.js.map

package/dist/nano-components/p-4b1d73e9.entry.js.map

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

package/dist/nano-components/{p-69e5a37d.entry.js → p-4e104cb1.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{i as n,r as i,h as o,a as t,g as r}from"./p-1fe12320.js";import{c as s}from"./p-7b3638b7.js";let e;const a=()=>{if(!e){const n=window;n.Nanoicons=n.Nanoicons||{};e=n.Nanoicons.map=n.Nanoicons.map||new Map}return e};const c=n=>{let i=h(n.src);if(i){return i}i=f(n.name,n.icon);if(i){return l(i)}if(n.icon){i=h(n.icon);if(i){return i}}return null};const l=i=>{const o=a().get(i);if(o){return o}return n(`../node_modules/@fortawesome/fontawesome-pro/svgs/${i}.svg`)};const f=(n,i)=>{if(!n&&i&&!d(i)){n=i}if(u(n)){n=m(n)}if(!u(n)||n.trim()===""){return null}const o=n.replace(/[a-z]|-|\/|\d/gi,"");if(o!==""){console.warn("invalid characters in icon name "+n);return null}return n};const h=n=>{if(u(n)){n=n.trim();if(d(n)){return n}}return null};const d=n=>n.length>0&&/(\/|\.)/.test(n);const u=n=>typeof n==="string";const m=n=>n.toLowerCase();const p=n=>{if(n){const i=document.createElement("div");i.innerHTML=n;for(let n=i.childNodes.length-1;n>=0;n--){if(i.childNodes[n].nodeName.toLowerCase()!=="svg"){i.removeChild(i.childNodes[n])}}const o=i.firstElementChild;if(o&&o.nodeName.toLowerCase()==="svg"){const n=o.getAttribute("class")||"";o.setAttribute("class",(n+" sc-nano-icon s-nano-icon svg").trim());if(g(o)){return i.innerHTML}}}return""};const g=n=>{if(n.nodeType===1){if(n.nodeName.toLowerCase()==="script"){return false}for(let i=0;i<n.attributes.length;i++){const o=n.attributes[i].value;if(u(o)&&o.toLowerCase().indexOf("on")===0){return false}}for(let i=0;i<n.childNodes.length;i++){if(!g(n.childNodes[i])){return false}}}return true};const v=new Map;const w=new Map;const b=n=>{let i=w.get(n);if(!i){i=fetch(n).then((i=>{if(i.ok){return i.text().then((i=>{v.set(n,p(i))}))}v.set(n,"")}));w.set(n,i)}return i};const y=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--color:var(--nano-color-base, "currentColor");--primary-color:var(--nano-color-tint, "currentColor");--secondary-color:var(--nano-color-shade, "currentColor");--stroke-width:32px;--primary-opacity:0.8;--secondary-opacity:1;--icon-size:var(--nano-icon-size, 1em);--icon-margin-top:var(--nano-icon-margin-top, 0);--icon-margin-end:var(--nano-icon-margin-end, 0);--icon-margin-bottom:var(--nano-icon-margin-bottom, 0);--icon-margin-start:var(--nano-icon-margin-start, 0);display:inline-block;width:var(--icon-size);height:var(--icon-size);min-width:var(--icon-size);min-height:var(--icon-size);contain:strict;fill:currentColor;box-sizing:content-box !important;transition:opacity 0.3s ease;color:var(--color);margin-inline:var(--icon-margin-start) var(--icon-margin-end);margin-block:var(--icon-margin-top) var(--icon-margin-bottom)}:host .nanoicon{stroke:currentColor}.nanoicon-fill-none{fill:none}.nanoicon-stroke-width{stroke-width:32px;stroke-width:var(--stroke-width)}.icon-inner,.nanoicon,svg,.svg{display:block;height:100%;width:100%;overflow:visible}:host(.loading){opacity:0}.fa-primary{color:var(--primary-color);opacity:var(--primary-opacity, 1)}.fa-secondary{color:var(--secondary-color);opacity:var(--secondary-opacity) !important}:host(.flip-rtl) .icon-inner{transform:scaleX(-1)}:host(.icon-small){font-size:18px !important}:host(.icon-large){font-size:32px !important}';const x=!!document.head.attachShadow;const z=class{constructor(n){i(this,n);this.svgContent=undefined;this.isVisible=false;this.isLoading=true;this.color=undefined;this.ariaLabel=undefined;this.flipRtl=undefined;this.name=undefined;this.src=undefined;this.icon=undefined;this.size=undefined;this.lazy=true}setAriaLabel(){if(!this.ariaLabel){const n=f(this.name,this.icon);if(n){this.ariaLabel=n.split("/").slice(-1)[0].replace(/\-/g," ")}}}connectedCallback(){this.waitUntilVisible(this.el,"50px",(()=>{this.isVisible=true;this.loadIcon()}))}disconnectedCallback(){if(this.io){this.io.disconnect();this.io=undefined}}componentWillLoad(){this.setAriaLabel()}waitUntilVisible(n,i,o){if(x&&this.lazy&&typeof window!=="undefined"&&window.IntersectionObserver){const t=this.io=new window.IntersectionObserver((n=>{if(n[0].isIntersecting||n[1]&&n[1].isIntersecting){t.disconnect();this.io=undefined;o()}}),{rootMargin:i});t.observe(n)}else{o()}}loadIcon(){if(this.isVisible){const n=c(this);if(n){if(v.has(n)){this.svgContent=v.get(n);this.isLoading=false}else{b(n).then((()=>{this.svgContent=v.get(n);this.isLoading=false}))}}}this.setAriaLabel()}render(){const n=this.flipRtl||this.name&&(this.name.indexOf("arrow")>-1||this.name.indexOf("chevron")>-1)&&this.el.ownerDocument.dir==="rtl"&&this.flipRtl!==false;return o(t,{role:"img",class:{...s(this.color),loading:this.isLoading,[`icon-${this.size}`]:!!this.size,"flip-rtl":!!n}},this.svgContent?o("div",{class:"icon-inner",innerHTML:this.svgContent}):o("div",{class:"icon-inner"}))}static get assetsDirs(){return["../../../node_modules/@fortawesome/fontawesome-pro/svgs"]}get el(){return r(this)}static get watchers(){return{name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"]}}};z.style=y;export{z as nano_icon};
-//# sourceMappingURL=p-69e5a37d.entry.js.map
+import{i as n,r as i,h as o,a as t,g as r}from"./p-bf91c50e.js";import{c as s}from"./p-411bb8f1.js";let e;const a=()=>{if(!e){const n=window;n.Nanoicons=n.Nanoicons||{};e=n.Nanoicons.map=n.Nanoicons.map||new Map}return e};const c=n=>{let i=h(n.src);if(i){return i}i=f(n.name,n.icon);if(i){return l(i)}if(n.icon){i=h(n.icon);if(i){return i}}return null};const l=i=>{const o=a().get(i);if(o){return o}return n(`../node_modules/@fortawesome/fontawesome-pro/svgs/${i}.svg`)};const f=(n,i)=>{if(!n&&i&&!d(i)){n=i}if(u(n)){n=m(n)}if(!u(n)||n.trim()===""){return null}const o=n.replace(/[a-z]|-|\/|\d/gi,"");if(o!==""){console.warn("invalid characters in icon name "+n);return null}return n};const h=n=>{if(u(n)){n=n.trim();if(d(n)){return n}}return null};const d=n=>n.length>0&&/(\/|\.)/.test(n);const u=n=>typeof n==="string";const m=n=>n.toLowerCase();const p=n=>{if(n){const i=document.createElement("div");i.innerHTML=n;for(let n=i.childNodes.length-1;n>=0;n--){if(i.childNodes[n].nodeName.toLowerCase()!=="svg"){i.removeChild(i.childNodes[n])}}const o=i.firstElementChild;if(o&&o.nodeName.toLowerCase()==="svg"){const n=o.getAttribute("class")||"";o.setAttribute("class",(n+" sc-nano-icon s-nano-icon svg").trim());if(g(o)){return i.innerHTML}}}return""};const g=n=>{if(n.nodeType===1){if(n.nodeName.toLowerCase()==="script"){return false}for(let i=0;i<n.attributes.length;i++){const o=n.attributes[i].value;if(u(o)&&o.toLowerCase().indexOf("on")===0){return false}}for(let i=0;i<n.childNodes.length;i++){if(!g(n.childNodes[i])){return false}}}return true};const v=new Map;const w=new Map;const b=n=>{let i=w.get(n);if(!i){i=fetch(n).then((i=>{if(i.ok){return i.text().then((i=>{v.set(n,p(i))}))}v.set(n,"")}));w.set(n,i)}return i};const y=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--color:var(--nano-color-base, "currentColor");--primary-color:var(--nano-color-tint, "currentColor");--secondary-color:var(--nano-color-shade, "currentColor");--stroke-width:32px;--primary-opacity:0.8;--secondary-opacity:1;--icon-size:var(--nano-icon-size, 1em);--icon-margin-top:var(--nano-icon-margin-top, 0);--icon-margin-end:var(--nano-icon-margin-end, 0);--icon-margin-bottom:var(--nano-icon-margin-bottom, 0);--icon-margin-start:var(--nano-icon-margin-start, 0);display:inline-block;width:var(--icon-size);height:var(--icon-size);min-width:var(--icon-size);min-height:var(--icon-size);contain:strict;fill:currentcolor;box-sizing:content-box !important;transition:opacity 0.3s ease;color:var(--color);margin-inline:var(--icon-margin-start) var(--icon-margin-end);margin-block:var(--icon-margin-top) var(--icon-margin-bottom)}:host .nanoicon{stroke:currentcolor}.nanoicon-fill-none{fill:none}.nanoicon-stroke-width{stroke-width:32px;stroke-width:var(--stroke-width)}.icon-inner,.nanoicon,svg,.svg{display:block;height:100%;width:100%;overflow:visible}:host(.loading){opacity:0}.fa-primary{color:var(--primary-color);opacity:var(--primary-opacity, 1)}.fa-secondary{color:var(--secondary-color);opacity:var(--secondary-opacity) !important}:host(.flip-rtl) .icon-inner{transform:scaleX(-1)}:host(.icon-small){font-size:18px !important}:host(.icon-large){font-size:32px !important}';const x=class{constructor(n){i(this,n);this.svgContent=undefined;this.isVisible=false;this.isLoading=true;this.color=undefined;this.ariaLabel=undefined;this.flipRtl=undefined;this.name=undefined;this.src=undefined;this.icon=undefined;this.size=undefined;this.lazy=true}setAriaLabel(){if(!this.ariaLabel){const n=f(this.name,this.icon);if(n){this.ariaLabel=n.split("/").slice(-1)[0].replace(/\-/g," ")}}}connectedCallback(){this.waitUntilVisible(this.el,"50px",(()=>{this.isVisible=true;this.loadIcon()}))}disconnectedCallback(){if(this.io){this.io.disconnect();this.io=undefined}}componentWillLoad(){this.setAriaLabel()}waitUntilVisible(n,i,o){if(this.lazy&&typeof window!=="undefined"&&window.IntersectionObserver){const t=this.io=new window.IntersectionObserver((n=>{if(n[0].isIntersecting||n[1]&&n[1].isIntersecting){t.disconnect();this.io=undefined;o()}}),{rootMargin:i});t.observe(n)}else{o()}}loadIcon(){if(this.isVisible){const n=c(this);if(n){if(v.has(n)){this.svgContent=v.get(n);requestAnimationFrame((()=>this.isLoading=false))}else{b(n).then((()=>{this.svgContent=v.get(n);requestAnimationFrame((()=>this.isLoading=false))}))}}}this.setAriaLabel()}render(){const n=this.flipRtl||this.name&&(this.name.indexOf("arrow")>-1||this.name.indexOf("chevron")>-1)&&this.el.ownerDocument.dir==="rtl"&&this.flipRtl!==false;return o(t,{role:"img",class:Object.assign(Object.assign({},s(this.color)),{loading:this.isLoading,[`icon-${this.size}`]:!!this.size,"flip-rtl":!!n})},this.svgContent?o("div",{class:"icon-inner",innerHTML:this.svgContent}):o("div",{class:"icon-inner"}))}static get assetsDirs(){return["../../../node_modules/@fortawesome/fontawesome-pro/svgs"]}get el(){return r(this)}static get watchers(){return{name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"]}}};x.style=y;export{x as nano_icon};
+//# sourceMappingURL=p-4e104cb1.entry.js.map

package/dist/nano-components/p-4e104cb1.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CACHED_MAP","getIconMap","win","window","Nanoicons","map","Map","getUrl","i","url","getSrc","src","getName","name","icon","getNamedUrl","iconName","get","getAssetPath","isSrc","isStr","toLower","trim","invalidChars","replace","console","warn","str","length","test","val","toLowerCase","validateContent","svgContent","div","document","createElement","innerHTML","childNodes","nodeName","removeChild","svgElm","firstElementChild","svgClass","getAttribute","setAttribute","isValid","elm","nodeType","attributes","value","indexOf","iconContent","requests","getSvgContent","req","fetch","then","rsp","ok","text","set","iconCss","Icon","setAriaLabel","this","ariaLabel","label","split","slice","connectedCallback","waitUntilVisible","el","isVisible","loadIcon","disconnectedCallback","io","disconnect","undefined","componentWillLoad","rootMargin","cb","lazy","IntersectionObserver","data","isIntersecting","observe","has","requestAnimationFrame","isLoading","render","flipRtl","ownerDocument","dir","h","Host","role","class","Object","assign","createColorClasses","color","loading","size"],"sources":["./src/components/icon/utils.ts","./src/components/icon/validate.ts","./src/components/icon/request.ts","./src/components/icon/icon.scss?tag=nano-icon&encapsulation=shadow","./src/components/icon/icon.tsx"],"sourcesContent":["import { getAssetPath } from '@stencil/core';\nimport { Icon } from './icon';\n\nlet CACHED_MAP: Map<string, string>;\n\nexport const getIconMap = (): Map<string, string> => {\n  if (!CACHED_MAP) {\n    const win = window as any;\n    win.Nanoicons = win.Nanoicons || {};\n    CACHED_MAP = win.Nanoicons.map = win.Nanoicons.map || new Map();\n  }\n  return CACHED_MAP;\n};\n\nexport const addIcons = (icons: { [name: string]: string }) => {\n  const map = getIconMap();\n  Object.keys(icons).forEach((name) => map.set(name, icons[name]));\n};\n\nexport const getUrl = (i: Icon) => {\n  let url = getSrc(i.src);\n  if (url) {\n    return url;\n  }\n\n  url = getName(i.name, i.icon);\n  if (url) {\n    return getNamedUrl(url);\n  }\n\n  if (i.icon) {\n    url = getSrc(i.icon);\n    if (url) {\n      return url;\n    }\n  }\n  return null;\n};\n\nconst getNamedUrl = (iconName: string) => {\n  const url = getIconMap().get(iconName);\n  if (url) {\n    return url;\n  }\n  return getAssetPath(\n    `../node_modules/@fortawesome/fontawesome-pro/svgs/${iconName}.svg`\n  );\n};\n\nexport const getName = (\n  iconName: string | undefined,\n  icon: string | undefined\n) => {\n  if (!iconName && icon && !isSrc(icon)) {\n    iconName = icon;\n  }\n  if (isStr(iconName)) {\n    iconName = toLower(iconName);\n  }\n\n  if (!isStr(iconName) || iconName.trim() === '') {\n    return null;\n  }\n\n  // only allow alpha characters and dash\n  const invalidChars = iconName.replace(/[a-z]|-|\\/|\\d/gi, '');\n  if (invalidChars !== '') {\n    console.warn('invalid characters in icon name ' + iconName);\n    return null;\n  }\n  return iconName;\n};\n\nexport const getSrc = (src: string | undefined) => {\n  if (isStr(src)) {\n    src = src.trim();\n    if (isSrc(src)) {\n      return src;\n    }\n  }\n  return null;\n};\n\nexport const isSrc = (str: string) => str.length > 0 && /(\\/|\\.)/.test(str);\nexport const isStr = (val: any): val is string => typeof val === 'string';\nexport const toLower = (val: string) => val.toLowerCase();\n","import { isStr } from './utils';\n\nexport const validateContent = (svgContent: string | null) => {\n  if (svgContent) {\n    const div = document.createElement('div');\n    div.innerHTML = svgContent;\n\n    // setup this way to ensure it works on our buddy IE\n    for (let i = div.childNodes.length - 1; i >= 0; i--) {\n      if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {\n        div.removeChild(div.childNodes[i]);\n      }\n    }\n\n    // must only have 1 root element\n    const svgElm = div.firstElementChild;\n    if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {\n      const svgClass = svgElm.getAttribute('class') || '';\n      svgElm.setAttribute(\n        'class',\n        (svgClass + ' sc-nano-icon s-nano-icon svg').trim()\n      );\n\n      // root element must be an svg\n      // lets double check we've got valid elements\n      // do not allow scripts\n      if (isValid(svgElm as any)) {\n        return div.innerHTML;\n      }\n    }\n  }\n  return '';\n};\n\nexport const isValid = (elm: HTMLElement) => {\n  if (elm.nodeType === 1) {\n    if (elm.nodeName.toLowerCase() === 'script') {\n      return false;\n    }\n\n    for (let i = 0; i < elm.attributes.length; i++) {\n      const val = elm.attributes[i].value;\n      if (isStr(val) && val.toLowerCase().indexOf('on') === 0) {\n        return false;\n      }\n    }\n\n    for (let i = 0; i < elm.childNodes.length; i++) {\n      if (!isValid(elm.childNodes[i] as any)) {\n        return false;\n      }\n    }\n  }\n  return true;\n};\n","import { validateContent } from './validate';\nexport const iconContent = new Map<string, string>();\nconst requests = new Map<string, Promise<any>>();\n\nexport const getSvgContent = (url: string) => {\n  // see if we already have a request for this url\n  let req = requests.get(url);\n  if (!req) {\n    // we don't already have a request\n    req = fetch(url).then((rsp) => {\n      if (rsp.ok) {\n        return rsp.text().then((svgContent) => {\n          iconContent.set(url, validateContent(svgContent));\n        });\n      }\n      iconContent.set(url, '');\n    });\n\n    // cache for the same requests\n    requests.set(url, req);\n  }\n  return req;\n};\n","@import '../../global/style/utilities/globals';\n\n:host {\n  /**\n  * @prop --color: defaults to current context color\n  * @prop --primary-color: used for duotone icons to set the primary color\n  * @prop --secondary-color: used for duotone icons to set the secondary color\n  * @prop --primary-opacity: used for duotone icons to set the primary opacity\n  * @prop --secondary-opacity: used for duotone icons to set the secondary opacity\n  * @prop --stroke-width: 32px default stroke width\n  */\n\n  --color: var(--nano-color-base, 'currentColor');\n  --primary-color: var(--nano-color-tint, 'currentColor');\n  --secondary-color: var(--nano-color-shade, 'currentColor');\n  --stroke-width: 32px;\n  --primary-opacity: 0.8;\n  --secondary-opacity: 1;\n  --icon-size: var(--nano-icon-size, 1em);\n  --icon-margin-top: var(--nano-icon-margin-top, 0);\n  --icon-margin-end: var(--nano-icon-margin-end, 0);\n  --icon-margin-bottom: var(--nano-icon-margin-bottom, 0);\n  --icon-margin-start: var(--nano-icon-margin-start, 0);\n\n  display: inline-block;\n  width: var(--icon-size);\n  height: var(--icon-size);\n  min-width: var(--icon-size);\n  min-height: var(--icon-size);\n  contain: strict;\n  fill: currentcolor;\n  box-sizing: content-box !important;\n  transition: opacity 0.3s ease;\n  color: var(--color);\n  margin-inline: var(--icon-margin-start) var(--icon-margin-end);\n  margin-block: var(--icon-margin-top) var(--icon-margin-bottom);\n}\n\n:host .nanoicon {\n  stroke: currentcolor;\n}\n\n.nanoicon-fill-none {\n  fill: none;\n}\n\n.nanoicon-stroke-width {\n  stroke-width: 32px;\n  stroke-width: var(--stroke-width);\n}\n\n.icon-inner,\n.nanoicon,\nsvg,\n.svg {\n  display: block;\n  height: 100%;\n  width: 100%;\n  overflow: visible;\n}\n\n:host(.loading) {\n  opacity: 0;\n}\n\n.fa-primary {\n  color: var(--primary-color);\n  opacity: var(--primary-opacity, 1);\n}\n\n.fa-secondary {\n  color: var(--secondary-color);\n  opacity: var(--secondary-opacity) !important;\n}\n\n/* Icon RTL\n * -----------------------------------------------------------\n */\n:host(.flip-rtl) .icon-inner {\n  transform: scaleX(-1);\n}\n\n/* Icon Sizes\n * -----------------------------------------------------------\n */\n:host(.icon-small) {\n  font-size: 18px !important;\n}\n\n:host(.icon-large) {\n  font-size: 32px !important;\n}\n","import {\n  Build,\n  Component,\n  Element,\n  Host,\n  Prop,\n  State,\n  Watch,\n  h,\n} from '@stencil/core';\nimport { createColorClasses } from '../../utils/theme';\nimport { getSvgContent, iconContent } from './request';\nimport { getName, getUrl } from './utils';\nimport type { Color } from '../../interface';\n\n/**\n * An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path). Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.\n */\n@Component({\n  tag: 'nano-icon',\n  assetsDirs: ['../../../node_modules/@fortawesome/fontawesome-pro/svgs'],\n  styleUrl: 'icon.scss',\n  shadow: true,\n})\nexport class Icon {\n  private io?: IntersectionObserver;\n\n  @Element() el!: HTMLNanoIconElement;\n\n  @State() svgContent?: string;\n  @State() isVisible = false;\n  @State() isLoading = true;\n\n  /**\n   * Color to use from your application's color palette.\n   * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * Specifies the label to use for accessibility. Defaults to the icon name.\n   */\n  @Prop({ mutable: true, reflect: true }) ariaLabel: string;\n\n  /**\n   * Specifies whether the icon should horizontally flip when `dir` is `\"rtl\"`.\n   */\n  @Prop() flipRtl?: boolean;\n\n  /**\n   * Specifies which icon to use from the built-in set of icons.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Specifies the exact `src` of an SVG file to use.\n   */\n  @Prop() src?: string;\n\n  /**\n   * A combination of both `name` and `src`. If a `src` url is detected\n   * it will set the `src` property. Otherwise it assumes it's a built-in named\n   * SVG and set the `name` property.\n   */\n  @Prop() icon?: any;\n\n  /**\n   * The size of the icon.\n   * Available options are: `\"small\"` and `\"large\"`.\n   */\n  @Prop() size?: 'small' | 'large';\n\n  /**\n   * If enabled, nano-icon will be loaded lazily when it's visible in the viewport.\n   * Default, `true`.\n   */\n  @Prop() lazy = true;\n\n  private setAriaLabel() {\n    if (!this.ariaLabel) {\n      const label = getName(this.name, this.icon);\n      // user did not provide a label\n      // come up with the label based on the icon name\n      if (label) {\n        this.ariaLabel = label.split('/').slice(-1)[0].replace(/\\-/g, ' ');\n      }\n    }\n  }\n\n  connectedCallback() {\n    // purposely do not return the promise here because loading\n    // the svg file should not hold up loading the app\n    // only load the svg if it's visible\n    this.waitUntilVisible(this.el, '50px', () => {\n      this.isVisible = true;\n      this.loadIcon();\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  componentWillLoad() {\n    this.setAriaLabel();\n  }\n\n  private waitUntilVisible(\n    el: HTMLElement,\n    rootMargin: string,\n    cb: () => void\n  ) {\n    if (\n      Build.isBrowser &&\n      this.lazy &&\n      typeof window !== 'undefined' &&\n      (window as any).IntersectionObserver\n    ) {\n      const io = (this.io = new (window as any).IntersectionObserver(\n        (data: IntersectionObserverEntry[]) => {\n          if (data[0].isIntersecting || (data[1] && data[1].isIntersecting)) {\n            io.disconnect();\n            this.io = undefined;\n            cb();\n          }\n        },\n        { rootMargin }\n      ));\n\n      io.observe(el);\n    } else {\n      // browser doesn't support IntersectionObserver\n      // so just fallback to always show it\n      cb();\n    }\n  }\n\n  @Watch('name')\n  @Watch('src')\n  @Watch('icon')\n  loadIcon() {\n    if (Build.isBrowser && this.isVisible) {\n      const url = getUrl(this);\n      if (url) {\n        if (iconContent.has(url)) {\n          // sync if it's already loaded\n          this.svgContent = iconContent.get(url);\n          requestAnimationFrame(() => (this.isLoading = false));\n        } else {\n          // async if it hasn't been loaded\n          getSvgContent(url).then(() => {\n            this.svgContent = iconContent.get(url);\n            requestAnimationFrame(() => (this.isLoading = false));\n          });\n        }\n      }\n    }\n    this.setAriaLabel();\n  }\n\n  render() {\n    const flipRtl =\n      this.flipRtl ||\n      (this.name &&\n        (this.name.indexOf('arrow') > -1 ||\n          this.name.indexOf('chevron') > -1) &&\n        (this.el.ownerDocument as Document).dir === 'rtl' &&\n        this.flipRtl !== false);\n\n    return (\n      <Host\n        role=\"img\"\n        class={{\n          ...createColorClasses(this.color),\n          loading: this.isLoading,\n          [`icon-${this.size}`]: !!this.size,\n          'flip-rtl': !!flipRtl,\n        }}\n      >\n        {Build.isBrowser && this.svgContent ? (\n          <div class=\"icon-inner\" innerHTML={this.svgContent}></div>\n        ) : (\n          <div class=\"icon-inner\"></div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/nano-components/p-51bc8b59.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+var r="top";var t="bottom";var e="right";var n="left";var a="auto";var i=[r,t,e,n];var o="start";var f="end";var v="clippingParents";var u="viewport";var s="popper";var c="reference";var l=i.reduce((function(r,t){return r.concat([t+"-"+o,t+"-"+f])}),[]);var d=[].concat(i,[a]).reduce((function(r,t){return r.concat([t,t+"-"+o,t+"-"+f])}),[]);var p="beforeRead";var h="read";var b="afterRead";var m="beforeMain";var y="main";var w="afterMain";var x="beforeWrite";var O="write";var g="afterWrite";var j=[p,h,b,m,y,w,x,O,g];function k(r){return r?(r.nodeName||"").toLowerCase():null}function A(r){if(r==null){return window}if(r.toString()!=="[object Window]"){var t=r.ownerDocument;return t?t.defaultView||window:window}return r}function M(r){var t=A(r).Element;return r instanceof t||r instanceof Element}function q(r){var t=A(r).HTMLElement;return r instanceof t||r instanceof HTMLElement}function E(r){if(typeof ShadowRoot==="undefined"){return false}var t=A(r).ShadowRoot;return r instanceof t||r instanceof ShadowRoot}function P(r){var t=r.state;Object.keys(t.elements).forEach((function(r){var e=t.styles[r]||{};var n=t.attributes[r]||{};var a=t.elements[r];if(!q(a)||!k(a)){return}Object.assign(a.style,e);Object.keys(n).forEach((function(r){var t=n[r];if(t===false){a.removeAttribute(r)}else{a.setAttribute(r,t===true?"":t)}}))}))}function S(r){var t=r.state;var e={popper:{position:t.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};Object.assign(t.elements.popper.style,e.popper);t.styles=e;if(t.elements.arrow){Object.assign(t.elements.arrow.style,e.arrow)}return function(){Object.keys(t.elements).forEach((function(r){var n=t.elements[r];var a=t.attributes[r]||{};var i=Object.keys(t.styles.hasOwnProperty(r)?t.styles[r]:e[r]);var o=i.reduce((function(r,t){r[t]="";return r}),{});if(!q(n)||!k(n)){return}Object.assign(n.style,o);Object.keys(a).forEach((function(r){n.removeAttribute(r)}))}))}}const W={name:"applyStyles",enabled:true,phase:"write",fn:P,effect:S,requires:["computeStyles"]};function B(r){return r.split("-")[0]}var T=Math.max;var R=Math.min;var H=Math.round;function L(){var r=navigator.userAgentData;if(r!=null&&r.brands){return r.brands.map((function(r){return r.brand+"/"+r.version})).join(" ")}return navigator.userAgent}function F(){return!/^((?!chrome|android).)*safari/i.test(L())}function I(r,t,e){if(t===void 0){t=false}if(e===void 0){e=false}var n=r.getBoundingClientRect();var a=1;var i=1;if(t&&q(r)){a=r.offsetWidth>0?H(n.width)/r.offsetWidth||1:1;i=r.offsetHeight>0?H(n.height)/r.offsetHeight||1:1}var o=M(r)?A(r):window,f=o.visualViewport;var v=!F()&&e;var u=(n.left+(v&&f?f.offsetLeft:0))/a;var s=(n.top+(v&&f?f.offsetTop:0))/i;var c=n.width/a;var l=n.height/i;return{width:c,height:l,top:s,right:u+c,bottom:s+l,left:u,x:u,y:s}}function C(r){var t=I(r);var e=r.offsetWidth;var n=r.offsetHeight;if(Math.abs(t.width-e)<=1){e=t.width}if(Math.abs(t.height-n)<=1){n=t.height}return{x:r.offsetLeft,y:r.offsetTop,width:e,height:n}}function z(r,t){var e=t.getRootNode&&t.getRootNode();if(r.contains(t)){return true}else if(e&&E(e)){var n=t;do{if(n&&r.isSameNode(n)){return true}n=n.parentNode||n.host}while(n)}return false}function D(r){return A(r).getComputedStyle(r)}function U(r){return["table","td","th"].indexOf(k(r))>=0}function V(r){return((M(r)?r.ownerDocument:r.document)||window.document).documentElement}function $(r){if(k(r)==="html"){return r}return r.assignedSlot||r.parentNode||(E(r)?r.host:null)||V(r)}function _(r){if(!q(r)||D(r).position==="fixed"){return null}return r.offsetParent}function G(r){var t=/firefox/i.test(L());var e=/Trident/i.test(L());if(e&&q(r)){var n=D(r);if(n.position==="fixed"){return null}}var a=$(r);if(E(a)){a=a.host}while(q(a)&&["html","body"].indexOf(k(a))<0){var i=D(a);if(i.transform!=="none"||i.perspective!=="none"||i.contain==="paint"||["transform","perspective"].indexOf(i.willChange)!==-1||t&&i.willChange==="filter"||t&&i.filter&&i.filter!=="none"){return a}else{a=a.parentNode}}return null}function J(r){var t=A(r);var e=_(r);while(e&&U(e)&&D(e).position==="static"){e=_(e)}if(e&&(k(e)==="html"||k(e)==="body"&&D(e).position==="static")){return t}return e||G(r)||t}function K(r){return["top","bottom"].indexOf(r)>=0?"x":"y"}function N(r,t,e){return T(r,R(t,e))}function Q(r,t,e){var n=N(r,t,e);return n>e?e:n}function X(){return{top:0,right:0,bottom:0,left:0}}function Y(r){return Object.assign({},X(),r)}function Z(r,t){return t.reduce((function(t,e){t[e]=r;return t}),{})}var rr=function r(t,e){t=typeof t==="function"?t(Object.assign({},e.rects,{placement:e.placement})):t;return Y(typeof t!=="number"?t:Z(t,i))};function tr(a){var i;var o=a.state,f=a.name,v=a.options;var u=o.elements.arrow;var s=o.modifiersData.popperOffsets;var c=B(o.placement);var l=K(c);var d=[n,e].indexOf(c)>=0;var p=d?"height":"width";if(!u||!s){return}var h=rr(v.padding,o);var b=C(u);var m=l==="y"?r:n;var y=l==="y"?t:e;var w=o.rects.reference[p]+o.rects.reference[l]-s[l]-o.rects.popper[p];var x=s[l]-o.rects.reference[l];var O=J(u);var g=O?l==="y"?O.clientHeight||0:O.clientWidth||0:0;var j=w/2-x/2;var k=h[m];var A=g-b[p]-h[y];var M=g/2-b[p]/2+j;var q=N(k,M,A);var E=l;o.modifiersData[f]=(i={},i[E]=q,i.centerOffset=q-M,i)}function er(r){var t=r.state,e=r.options;var n=e.element,a=n===void 0?"[data-popper-arrow]":n;if(a==null){return}if(typeof a==="string"){a=t.elements.popper.querySelector(a);if(!a){return}}if(!z(t.elements.popper,a)){return}t.elements.arrow=a}const nr={name:"arrow",enabled:true,phase:"main",fn:tr,effect:er,requires:["popperOffsets"],requiresIfExists:["preventOverflow"]};function ar(r){return r.split("-")[1]}var ir={top:"auto",right:"auto",bottom:"auto",left:"auto"};function or(r){var t=r.x,e=r.y;var n=window;var a=n.devicePixelRatio||1;return{x:H(t*a)/a||0,y:H(e*a)/a||0}}function fr(a){var i;var o=a.popper,v=a.popperRect,u=a.placement,s=a.variation,c=a.offsets,l=a.position,d=a.gpuAcceleration,p=a.adaptive,h=a.roundOffsets,b=a.isFixed;var m=c.x,y=m===void 0?0:m,w=c.y,x=w===void 0?0:w;var O=typeof h==="function"?h({x:y,y:x}):{x:y,y:x};y=O.x;x=O.y;var g=c.hasOwnProperty("x");var j=c.hasOwnProperty("y");var k=n;var M=r;var q=window;if(p){var E=J(o);var P="clientHeight";var S="clientWidth";if(E===A(o)){E=V(o);if(D(E).position!=="static"&&l==="absolute"){P="scrollHeight";S="scrollWidth"}}E=E;if(u===r||(u===n||u===e)&&s===f){M=t;var W=b&&E===q&&q.visualViewport?q.visualViewport.height:E[P];x-=W-v.height;x*=d?1:-1}if(u===n||(u===r||u===t)&&s===f){k=e;var B=b&&E===q&&q.visualViewport?q.visualViewport.width:E[S];y-=B-v.width;y*=d?1:-1}}var T=Object.assign({position:l},p&&ir);var R=h===true?or({x:y,y:x}):{x:y,y:x};y=R.x;x=R.y;if(d){var H;return Object.assign({},T,(H={},H[M]=j?"0":"",H[k]=g?"0":"",H.transform=(q.devicePixelRatio||1)<=1?"translate("+y+"px, "+x+"px)":"translate3d("+y+"px, "+x+"px, 0)",H))}return Object.assign({},T,(i={},i[M]=j?x+"px":"",i[k]=g?y+"px":"",i.transform="",i))}function vr(r){var t=r.state,e=r.options;var n=e.gpuAcceleration,a=n===void 0?true:n,i=e.adaptive,o=i===void 0?true:i,f=e.roundOffsets,v=f===void 0?true:f;var u={placement:B(t.placement),variation:ar(t.placement),popper:t.elements.popper,popperRect:t.rects.popper,gpuAcceleration:a,isFixed:t.options.strategy==="fixed"};if(t.modifiersData.popperOffsets!=null){t.styles.popper=Object.assign({},t.styles.popper,fr(Object.assign({},u,{offsets:t.modifiersData.popperOffsets,position:t.options.strategy,adaptive:o,roundOffsets:v})))}if(t.modifiersData.arrow!=null){t.styles.arrow=Object.assign({},t.styles.arrow,fr(Object.assign({},u,{offsets:t.modifiersData.arrow,position:"absolute",adaptive:false,roundOffsets:v})))}t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-placement":t.placement})}const ur={name:"computeStyles",enabled:true,phase:"beforeWrite",fn:vr,data:{}};var sr={passive:true};function cr(r){var t=r.state,e=r.instance,n=r.options;var a=n.scroll,i=a===void 0?true:a,o=n.resize,f=o===void 0?true:o;var v=A(t.elements.popper);var u=[].concat(t.scrollParents.reference,t.scrollParents.popper);if(i){u.forEach((function(r){r.addEventListener("scroll",e.update,sr)}))}if(f){v.addEventListener("resize",e.update,sr)}return function(){if(i){u.forEach((function(r){r.removeEventListener("scroll",e.update,sr)}))}if(f){v.removeEventListener("resize",e.update,sr)}}}const lr={name:"eventListeners",enabled:true,phase:"write",fn:function r(){},effect:cr,data:{}};var dr={left:"right",right:"left",bottom:"top",top:"bottom"};function pr(r){return r.replace(/left|right|bottom|top/g,(function(r){return dr[r]}))}var hr={start:"end",end:"start"};function br(r){return r.replace(/start|end/g,(function(r){return hr[r]}))}function mr(r){var t=A(r);var e=t.pageXOffset;var n=t.pageYOffset;return{scrollLeft:e,scrollTop:n}}function yr(r){return I(V(r)).left+mr(r).scrollLeft}function wr(r,t){var e=A(r);var n=V(r);var a=e.visualViewport;var i=n.clientWidth;var o=n.clientHeight;var f=0;var v=0;if(a){i=a.width;o=a.height;var u=F();if(u||!u&&t==="fixed"){f=a.offsetLeft;v=a.offsetTop}}return{width:i,height:o,x:f+yr(r),y:v}}function xr(r){var t;var e=V(r);var n=mr(r);var a=(t=r.ownerDocument)==null?void 0:t.body;var i=T(e.scrollWidth,e.clientWidth,a?a.scrollWidth:0,a?a.clientWidth:0);var o=T(e.scrollHeight,e.clientHeight,a?a.scrollHeight:0,a?a.clientHeight:0);var f=-n.scrollLeft+yr(r);var v=-n.scrollTop;if(D(a||e).direction==="rtl"){f+=T(e.clientWidth,a?a.clientWidth:0)-i}return{width:i,height:o,x:f,y:v}}function Or(r){var t=D(r),e=t.overflow,n=t.overflowX,a=t.overflowY;return/auto|scroll|overlay|hidden/.test(e+a+n)}function gr(r){if(["html","body","#document"].indexOf(k(r))>=0){return r.ownerDocument.body}if(q(r)&&Or(r)){return r}return gr($(r))}function jr(r,t){var e;if(t===void 0){t=[]}var n=gr(r);var a=n===((e=r.ownerDocument)==null?void 0:e.body);var i=A(n);var o=a?[i].concat(i.visualViewport||[],Or(n)?n:[]):n;var f=t.concat(o);return a?f:f.concat(jr($(o)))}function kr(r){return Object.assign({},r,{left:r.x,top:r.y,right:r.x+r.width,bottom:r.y+r.height})}function Ar(r,t){var e=I(r,false,t==="fixed");e.top=e.top+r.clientTop;e.left=e.left+r.clientLeft;e.bottom=e.top+r.clientHeight;e.right=e.left+r.clientWidth;e.width=r.clientWidth;e.height=r.clientHeight;e.x=e.left;e.y=e.top;return e}function Mr(r,t,e){return t===u?kr(wr(r,e)):M(t)?Ar(t,e):kr(xr(V(r)))}function qr(r){var t=jr($(r));var e=["absolute","fixed"].indexOf(D(r).position)>=0;var n=e&&q(r)?J(r):r;if(!M(n)){return[]}return t.filter((function(r){return M(r)&&z(r,n)&&k(r)!=="body"}))}function Er(r,t,e,n){var a=t==="clippingParents"?qr(r):[].concat(t);var i=[].concat(a,[e]);var o=i[0];var f=i.reduce((function(t,e){var a=Mr(r,e,n);t.top=T(a.top,t.top);t.right=R(a.right,t.right);t.bottom=R(a.bottom,t.bottom);t.left=T(a.left,t.left);return t}),Mr(r,o,n));f.width=f.right-f.left;f.height=f.bottom-f.top;f.x=f.left;f.y=f.top;return f}function Pr(a){var i=a.reference,v=a.element,u=a.placement;var s=u?B(u):null;var c=u?ar(u):null;var l=i.x+i.width/2-v.width/2;var d=i.y+i.height/2-v.height/2;var p;switch(s){case r:p={x:l,y:i.y-v.height};break;case t:p={x:l,y:i.y+i.height};break;case e:p={x:i.x+i.width,y:d};break;case n:p={x:i.x-v.width,y:d};break;default:p={x:i.x,y:i.y}}var h=s?K(s):null;if(h!=null){var b=h==="y"?"height":"width";switch(c){case o:p[h]=p[h]-(i[b]/2-v[b]/2);break;case f:p[h]=p[h]+(i[b]/2-v[b]/2);break}}return p}function Sr(n,a){if(a===void 0){a={}}var o=a,f=o.placement,l=f===void 0?n.placement:f,d=o.strategy,p=d===void 0?n.strategy:d,h=o.boundary,b=h===void 0?v:h,m=o.rootBoundary,y=m===void 0?u:m,w=o.elementContext,x=w===void 0?s:w,O=o.altBoundary,g=O===void 0?false:O,j=o.padding,k=j===void 0?0:j;var A=Y(typeof k!=="number"?k:Z(k,i));var q=x===s?c:s;var E=n.rects.popper;var P=n.elements[g?q:x];var S=Er(M(P)?P:P.contextElement||V(n.elements.popper),b,y,p);var W=I(n.elements.reference);var B=Pr({reference:W,element:E,strategy:"absolute",placement:l});var T=kr(Object.assign({},E,B));var R=x===s?T:W;var H={top:S.top-R.top+A.top,bottom:R.bottom-S.bottom+A.bottom,left:S.left-R.left+A.left,right:R.right-S.right+A.right};var L=n.modifiersData.offset;if(x===s&&L){var F=L[l];Object.keys(H).forEach((function(n){var a=[e,t].indexOf(n)>=0?1:-1;var i=[r,t].indexOf(n)>=0?"y":"x";H[n]+=F[i]*a}))}return H}function Wr(r,t){if(t===void 0){t={}}var e=t,n=e.placement,a=e.boundary,o=e.rootBoundary,f=e.padding,v=e.flipVariations,u=e.allowedAutoPlacements,s=u===void 0?d:u;var c=ar(n);var p=c?v?l:l.filter((function(r){return ar(r)===c})):i;var h=p.filter((function(r){return s.indexOf(r)>=0}));if(h.length===0){h=p}var b=h.reduce((function(t,e){t[e]=Sr(r,{placement:e,boundary:a,rootBoundary:o,padding:f})[B(e)];return t}),{});return Object.keys(b).sort((function(r,t){return b[r]-b[t]}))}function Br(r){if(B(r)===a){return[]}var t=pr(r);return[br(r),t,br(t)]}function Tr(i){var f=i.state,v=i.options,u=i.name;if(f.modifiersData[u]._skip){return}var s=v.mainAxis,c=s===void 0?true:s,l=v.altAxis,d=l===void 0?true:l,p=v.fallbackPlacements,h=v.padding,b=v.boundary,m=v.rootBoundary,y=v.altBoundary,w=v.flipVariations,x=w===void 0?true:w,O=v.allowedAutoPlacements;var g=f.options.placement;var j=B(g);var k=j===g;var A=p||(k||!x?[pr(g)]:Br(g));var M=[g].concat(A).reduce((function(r,t){return r.concat(B(t)===a?Wr(f,{placement:t,boundary:b,rootBoundary:m,padding:h,flipVariations:x,allowedAutoPlacements:O}):t)}),[]);var q=f.rects.reference;var E=f.rects.popper;var P=new Map;var S=true;var W=M[0];for(var T=0;T<M.length;T++){var R=M[T];var H=B(R);var L=ar(R)===o;var F=[r,t].indexOf(H)>=0;var I=F?"width":"height";var C=Sr(f,{placement:R,boundary:b,rootBoundary:m,altBoundary:y,padding:h});var z=F?L?e:n:L?t:r;if(q[I]>E[I]){z=pr(z)}var D=pr(z);var U=[];if(c){U.push(C[H]<=0)}if(d){U.push(C[z]<=0,C[D]<=0)}if(U.every((function(r){return r}))){W=R;S=false;break}P.set(R,U)}if(S){var V=x?3:1;var $=function r(t){var e=M.find((function(r){var e=P.get(r);if(e){return e.slice(0,t).every((function(r){return r}))}}));if(e){W=e;return"break"}};for(var _=V;_>0;_--){var G=$(_);if(G==="break")break}}if(f.placement!==W){f.modifiersData[u]._skip=true;f.placement=W;f.reset=true}}const Rr={name:"flip",enabled:true,phase:"main",fn:Tr,requiresIfExists:["offset"],data:{_skip:false}};function Hr(r,t,e){if(e===void 0){e={x:0,y:0}}return{top:r.top-t.height-e.y,right:r.right-t.width+e.x,bottom:r.bottom-t.height+e.y,left:r.left-t.width-e.x}}function Lr(a){return[r,e,t,n].some((function(r){return a[r]>=0}))}function Fr(r){var t=r.state,e=r.name;var n=t.rects.reference;var a=t.rects.popper;var i=t.modifiersData.preventOverflow;var o=Sr(t,{elementContext:"reference"});var f=Sr(t,{altBoundary:true});var v=Hr(o,n);var u=Hr(f,a,i);var s=Lr(v);var c=Lr(u);t.modifiersData[e]={referenceClippingOffsets:v,popperEscapeOffsets:u,isReferenceHidden:s,hasPopperEscaped:c};t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-reference-hidden":s,"data-popper-escaped":c})}const Ir={name:"hide",enabled:true,phase:"main",requiresIfExists:["preventOverflow"],fn:Fr};function Cr(t,a,i){var o=B(t);var f=[n,r].indexOf(o)>=0?-1:1;var v=typeof i==="function"?i(Object.assign({},a,{placement:t})):i,u=v[0],s=v[1];u=u||0;s=(s||0)*f;return[n,e].indexOf(o)>=0?{x:s,y:u}:{x:u,y:s}}function zr(r){var t=r.state,e=r.options,n=r.name;var a=e.offset,i=a===void 0?[0,0]:a;var o=d.reduce((function(r,e){r[e]=Cr(e,t.rects,i);return r}),{});var f=o[t.placement],v=f.x,u=f.y;if(t.modifiersData.popperOffsets!=null){t.modifiersData.popperOffsets.x+=v;t.modifiersData.popperOffsets.y+=u}t.modifiersData[n]=o}const Dr={name:"offset",enabled:true,phase:"main",requires:["popperOffsets"],fn:zr};function Ur(r){var t=r.state,e=r.name;t.modifiersData[e]=Pr({reference:t.rects.reference,element:t.rects.popper,strategy:"absolute",placement:t.placement})}const Vr={name:"popperOffsets",enabled:true,phase:"read",fn:Ur,data:{}};function $r(r){return r==="x"?"y":"x"}function _r(a){var i=a.state,f=a.options,v=a.name;var u=f.mainAxis,s=u===void 0?true:u,c=f.altAxis,l=c===void 0?false:c,d=f.boundary,p=f.rootBoundary,h=f.altBoundary,b=f.padding,m=f.tether,y=m===void 0?true:m,w=f.tetherOffset,x=w===void 0?0:w;var O=Sr(i,{boundary:d,rootBoundary:p,padding:b,altBoundary:h});var g=B(i.placement);var j=ar(i.placement);var k=!j;var A=K(g);var M=$r(A);var q=i.modifiersData.popperOffsets;var E=i.rects.reference;var P=i.rects.popper;var S=typeof x==="function"?x(Object.assign({},i.rects,{placement:i.placement})):x;var W=typeof S==="number"?{mainAxis:S,altAxis:S}:Object.assign({mainAxis:0,altAxis:0},S);var H=i.modifiersData.offset?i.modifiersData.offset[i.placement]:null;var L={x:0,y:0};if(!q){return}if(s){var F;var I=A==="y"?r:n;var z=A==="y"?t:e;var D=A==="y"?"height":"width";var U=q[A];var V=U+O[I];var $=U-O[z];var _=y?-P[D]/2:0;var G=j===o?E[D]:P[D];var Y=j===o?-P[D]:-E[D];var Z=i.elements.arrow;var rr=y&&Z?C(Z):{width:0,height:0};var tr=i.modifiersData["arrow#persistent"]?i.modifiersData["arrow#persistent"].padding:X();var er=tr[I];var nr=tr[z];var ir=N(0,E[D],rr[D]);var or=k?E[D]/2-_-ir-er-W.mainAxis:G-ir-er-W.mainAxis;var fr=k?-E[D]/2+_+ir+nr+W.mainAxis:Y+ir+nr+W.mainAxis;var vr=i.elements.arrow&&J(i.elements.arrow);var ur=vr?A==="y"?vr.clientTop||0:vr.clientLeft||0:0;var sr=(F=H==null?void 0:H[A])!=null?F:0;var cr=U+or-sr-ur;var lr=U+fr-sr;var dr=N(y?R(V,cr):V,U,y?T($,lr):$);q[A]=dr;L[A]=dr-U}if(l){var pr;var hr=A==="x"?r:n;var br=A==="x"?t:e;var mr=q[M];var yr=M==="y"?"height":"width";var wr=mr+O[hr];var xr=mr-O[br];var Or=[r,n].indexOf(g)!==-1;var gr=(pr=H==null?void 0:H[M])!=null?pr:0;var jr=Or?wr:mr-E[yr]-P[yr]-gr+W.altAxis;var kr=Or?mr+E[yr]+P[yr]-gr-W.altAxis:xr;var Ar=y&&Or?Q(jr,mr,kr):N(y?jr:wr,mr,y?kr:xr);q[M]=Ar;L[M]=Ar-mr}i.modifiersData[v]=L}const Gr={name:"preventOverflow",enabled:true,phase:"main",fn:_r,requiresIfExists:["offset"]};function Jr(r){return{scrollLeft:r.scrollLeft,scrollTop:r.scrollTop}}function Kr(r){if(r===A(r)||!q(r)){return mr(r)}else{return Jr(r)}}function Nr(r){var t=r.getBoundingClientRect();var e=H(t.width)/r.offsetWidth||1;var n=H(t.height)/r.offsetHeight||1;return e!==1||n!==1}function Qr(r,t,e){if(e===void 0){e=false}var n=q(t);var a=q(t)&&Nr(t);var i=V(t);var o=I(r,a,e);var f={scrollLeft:0,scrollTop:0};var v={x:0,y:0};if(n||!n&&!e){if(k(t)!=="body"||Or(i)){f=Kr(t)}if(q(t)){v=I(t,true);v.x+=t.clientLeft;v.y+=t.clientTop}else if(i){v.x=yr(i)}}return{x:o.left+f.scrollLeft-v.x,y:o.top+f.scrollTop-v.y,width:o.width,height:o.height}}function Xr(r){var t=new Map;var e=new Set;var n=[];r.forEach((function(r){t.set(r.name,r)}));function a(r){e.add(r.name);var i=[].concat(r.requires||[],r.requiresIfExists||[]);i.forEach((function(r){if(!e.has(r)){var n=t.get(r);if(n){a(n)}}}));n.push(r)}r.forEach((function(r){if(!e.has(r.name)){a(r)}}));return n}function Yr(r){var t=Xr(r);return j.reduce((function(r,e){return r.concat(t.filter((function(r){return r.phase===e})))}),[])}function Zr(r){var t;return function(){if(!t){t=new Promise((function(e){Promise.resolve().then((function(){t=undefined;e(r())}))}))}return t}}function rt(r){var t=r.reduce((function(r,t){var e=r[t.name];r[t.name]=e?Object.assign({},e,t,{options:Object.assign({},e.options,t.options),data:Object.assign({},e.data,t.data)}):t;return r}),{});return Object.keys(t).map((function(r){return t[r]}))}var tt={placement:"bottom",modifiers:[],strategy:"absolute"};function et(){for(var r=arguments.length,t=new Array(r),e=0;e<r;e++){t[e]=arguments[e]}return!t.some((function(r){return!(r&&typeof r.getBoundingClientRect==="function")}))}function nt(r){if(r===void 0){r={}}var t=r,e=t.defaultModifiers,n=e===void 0?[]:e,a=t.defaultOptions,i=a===void 0?tt:a;return function r(t,e,a){if(a===void 0){a=i}var o={placement:"bottom",orderedModifiers:[],options:Object.assign({},tt,i),modifiersData:{},elements:{reference:t,popper:e},attributes:{},styles:{}};var f=[];var v=false;var u={state:o,setOptions:function r(a){var f=typeof a==="function"?a(o.options):a;c();o.options=Object.assign({},i,o.options,f);o.scrollParents={reference:M(t)?jr(t):t.contextElement?jr(t.contextElement):[],popper:jr(e)};var v=Yr(rt([].concat(n,o.options.modifiers)));o.orderedModifiers=v.filter((function(r){return r.enabled}));s();return u.update()},forceUpdate:function r(){if(v){return}var t=o.elements,e=t.reference,n=t.popper;if(!et(e,n)){return}o.rects={reference:Qr(e,J(n),o.options.strategy==="fixed"),popper:C(n)};o.reset=false;o.placement=o.options.placement;o.orderedModifiers.forEach((function(r){return o.modifiersData[r.name]=Object.assign({},r.data)}));for(var a=0;a<o.orderedModifiers.length;a++){if(o.reset===true){o.reset=false;a=-1;continue}var i=o.orderedModifiers[a],f=i.fn,s=i.options,c=s===void 0?{}:s,l=i.name;if(typeof f==="function"){o=f({state:o,options:c,name:l,instance:u})||o}}},update:Zr((function(){return new Promise((function(r){u.forceUpdate();r(o)}))})),destroy:function r(){c();v=true}};if(!et(t,e)){return u}u.setOptions(a).then((function(r){if(!v&&a.onFirstUpdate){a.onFirstUpdate(r)}}));function s(){o.orderedModifiers.forEach((function(r){var t=r.name,e=r.options,n=e===void 0?{}:e,a=r.effect;if(typeof a==="function"){var i=a({state:o,name:t,instance:u,options:n});var v=function r(){};f.push(i||v)}}))}function c(){f.forEach((function(r){return r()}));f=[]}return u}}var at=[lr,Vr,ur,W,Dr,Rr,Gr,nr,Ir];var it=nt({defaultModifiers:at});class ot{constructor(r,t,e){this.handleTransitionEnd=this.handleTransitionEnd.bind(this);this.anchor=r;this.popover=t;this.options=Object.assign({skidding:0,distance:0,placement:"bottom-start",strategy:"absolute",transitionElement:this.popover,visibleClass:"popover-visible",onAfterShow:()=>{},onAfterHide:()=>{},onTransitionEnd:()=>{}},e);this.popover.hidden=true;this.popover.classList.remove(this.options.visibleClass);this.popover.addEventListener("transitionend",this.handleTransitionEnd)}handleTransitionEnd(r){const t=r.target;if(t===this.options.transitionElement){this.options.onTransitionEnd.call(this,r);if(this.isVisible===false&&!this.popover.hidden){this.popover.hidden=true;this.popover.classList.remove(this.options.visibleClass);this.options.onAfterHide.call(this)}}}destroy(){this.popover.removeEventListener("transitionend",this.handleTransitionEnd);if(this.popper){this.popper.destroy();this.popper=null}}show(){this.isVisible=true;this.popover.hidden=false;requestAnimationFrame((()=>this.popover.classList.add(this.options.visibleClass)));if(this.popper){this.popper.destroy()}const r=this.options.placement.includes("center")?"top":this.options.placement;this.popper=it(this.anchor,this.popover,{placement:r,strategy:this.options.strategy,modifiers:[{name:"sameWidth",enabled:true,fn:({state:r})=>{r.styles.popper.minWidth=`${r.rects.reference.width}px`},phase:"beforeWrite",requires:["computeStyles"]},{name:"flip",options:{boundary:"viewport"}},{name:"offset",options:{padding:5,offset:({reference:r})=>{if(this.options.placement!=="center")return[this.options.skidding,this.options.distance];return[this.options.skidding,(r.height+1)*-1]}}}]});this.popover.addEventListener("transitionend",(()=>this.options.onAfterShow.call(this)),{once:true});requestAnimationFrame((()=>this.popper.update()))}hide(){this.isVisible=false;this.popover.classList.remove(this.options.visibleClass)}setOptions(r){this.options=Object.assign(this.options,r);this.isVisible?this.popover.classList.add(this.options.visibleClass):this.popover.classList.remove(this.options.visibleClass);const t=this.options.placement.includes("center")?"top":this.options.placement;if(this.popper){this.popper.setOptions({placement:t,strategy:this.options.strategy});requestAnimationFrame((()=>this.popper.update()))}}}export{ot as P};
+//# sourceMappingURL=p-51bc8b59.js.map