@nanoporetech-digital/components 8.9.3 → 8.10.1

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

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{r as n,g as o,a as e}from"./index-BM3Om9WE.js";import{h as t}from"./renderer-DasB4P10.js";const i=class{constructor(o){n(this,o)}mo;get host(){return o(this)}hasIconBox;hasScrim;hasSecondaryContent;hasQuote;hasBg;hasBackBtn;hasCtas;breadCrumbs;breadCrumbChange(){this.breadCrumbs.filter((n=>"A"===n.tagName&&!n.nextElementSibling.classList.contains("slash"))).forEach((n=>{n.insertAdjacentHTML("afterend",'<span slot="breadcrumb" class="slash">/</span>')}))}iconBoxItems;iconBoxItemChange(){this.iconBoxItems.forEach((n=>n.classList.remove("last"))),this.iconBoxItems[this.iconBoxItems.length-1]&&this.iconBoxItems[this.iconBoxItems.length-1].classList&&this.iconBoxItems[this.iconBoxItems.length-1].classList.add("last")}imgSrc;imgSrcSet=null;largeScreenBP=900;theme="dark";level="top";slotChangeObserver(){this.mo&&this.mo.disconnect(),(this.mo=new MutationObserver((()=>this.processSlottedContent()))).observe(this.host,{childList:!0})}processSlottedContent(){this.hasCtas=!!this.host.querySelector('[slot="secondary-ctas"]'),this.iconBoxItems=Array.from(this.host.querySelectorAll('[slot="icon-box-item"]')),this.hasIconBox=!!this.host.querySelector('[slot="icon-box"]')||!!this.iconBoxItems.length,this.hasScrim=!!this.host.querySelector('[slot="scrim"]'),this.breadCrumbs=Array.from(this.host.querySelectorAll('[slot="breadcrumb"]')),this.hasSecondaryContent=!!(this.host.querySelector('[slot="icon-box"]')||this.host.querySelector('[slot="quote"]')||this.host.querySelector('[slot="icon-box-item"]')||this.host.querySelector('[slot="secondary-content"]')),this.hasBg=!!this.host.querySelector('[slot="background"]')||!!this.imgSrc,this.hasBackBtn=!!this.host.querySelector('[slot="back-btn"]'),this.hasQuote=!!this.host.querySelector('[slot="quote"]')}disconnectedCallback(){this.mo&&this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver()}componentWillLoad(){this.processSlottedContent()}HeroContent=()=>[!this.hasIconBox&&this.hasCtas?t("div",{class:"hero__ctas"},t("slot",{name:"secondary-ctas"})):"",t("div",{class:"hero__scrim"},t("slot",{name:"scrim"})),t("nano-grid",{class:"hero__content",xlCols:2,xlSize:this.largeScreenBP},t("div",{"grid-states":"xl-col-span-2"},t("div",{class:"hero__breadcrumbs"},t("slot",{name:"breadcrumb"}))),t("div",{"grid-states":this.hasSecondaryContent?"xl-col-span-1 xl-col-start-1 xl-row-start-2":"xl-col-span-2 xl-col-start-1 xl-row-start-2"},t("div",{class:"hero__primary"},t("div",{class:"hero__primary-content"},t("slot",{name:"back-btn"}),t("div",null,t("slot",{name:"primary-content"}))))),this.hasSecondaryContent&&t("div",{"grid-states":"xl-col-span-1 xl-col-start-2 xl-row-start-2"},t("div",{class:"hero__secondary"},t("slot",{name:"secondary-content"}),this.hasIconBox&&t("div",{class:"hero__icon-box"},t("slot",{name:"icon-box"}),t("slot",{name:"icon-box-item"})),this.hasQuote&&t("div",{class:"hero__quote-content"},t("span",{class:"hero__quote"},t("slot",{name:"quote"})),t("div",{class:"hero__quote-author"},t("slot",{name:"quote-author"}))))))];render(){return t(e,{key:"8270c80717ac41cc4cd5bedb577b131fe01ac967",class:"nano-hero"},t("div",{key:"8b04bda451af03b648beb5576cd0badd48364aab",class:{hero:!0,"hero--light":"light"===this.theme,"hero--secondary":this.hasSecondaryContent,"hero--iconbox":this.hasIconBox,"hero--rtl":"rtl"===this.host.dir||"rtl"===this.host.ownerDocument.dir,"hero--scrim":this.hasScrim,"hero--breadcrumb":!!this.breadCrumbs.length,"hero--hasbg":this.hasBg,"hero--backbtn":this.hasBackBtn,"hero--sub":"sub"===this.level}},t("div",{key:"be91fa5b23ceddaf411b269eb6635b886c83174d",class:"hero__bg-wrap"},!!this.imgSrc&&t("nano-img",{key:"961b0a21220f0305cc0f4a4af0c6cd5e99446c41",class:"hero__img",lazy:!1,background:!0,srcSet:this.imgSrcSet,src:this.imgSrc},t(this.HeroContent,{key:"b272423beee722ae9d4adc0313d2d9ca4e6e3cd4"})),!this.imgSrc&&[t("div",{key:"f10056208ed97f1d4a051572261c874e5dae6e96",class:"hero__bg-slot"},t("slot",{key:"225c3a0b114b16e8edb063d6979683b343e85419",name:"background"})),t(this.HeroContent,{key:"375442509ce1954ca651d56d49488b0da464e577"})])))}static get watchers(){return{breadCrumbs:["breadCrumbChange"],iconBoxItems:["iconBoxItemChange"]}}};i.style=":host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host {\n  /**\n   * @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n   * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n   * @prop --theme-color: Text color. Default depends on theme;\n   * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #90c6e7;\n   * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n   * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n   * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n   * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n   * @prop --quote-size: Font size of the quote. Defaults to 1.3em and grows to 3rem on the xl breakpoint;\n  */\n  --nano-loader-base: #4a4a4a;\n  --nano-loader-tint: #7d7d7d;\n  --theme-color: #fff;\n  --theme-tint-color: #90c6e7;\n  --scrim-color: 0 0 0;\n  --scrim-direction: -50deg;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 0.7;\n  --padding: 0;\n  --quote-size: 1.3rem;\n  color: var(--theme-color);\n  display: block;\n  container-type: inline-size;\n}\n\n:host([theme=light]) {\n  --nano-loader-base: #fff;\n  --nano-loader-tint: white;\n  --theme-color: #4a4a4a;\n  --scrim-color: 255 255 255;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 1;\n  --scrim-direction: 270deg;\n  color: var(--theme-color);\n}\n:host([theme=light]) .hero__primary-content {\n  --color: #4a4a4a;\n}\n\n.hero {\n  position: relative;\n}\n@container (min-width: 800px) {\n  .hero {\n    --quote-size: 3rem;\n  }\n}\n.hero--rtl {\n  --scrim-direction: 270deg;\n}\n.hero--secondary:not(.hero--iconbox) {\n  --scrim-direction: 0deg;\n}\n.hero__bg-wrap {\n  overflow: hidden;\n}\n.hero__bg-slot {\n  position: absolute;\n  inset: 0;\n}\n.hero__ctas {\n  display: flex;\n  justify-content: flex-end;\n  padding-block: 32px 0;\n  padding-inline: 32px;\n  margin-block-end: -64px;\n  position: relative;\n  z-index: 1;\n}\n@media (width <= 52em) {\n  .hero__ctas {\n    display: none;\n  }\n}\n@media (width <= 58em) {\n  .hero__ctas {\n    margin-block-end: -48px;\n  }\n}\n.hero__ctas ::slotted(a.button[slot=secondary-ctas]) {\n  padding-inline: 0.5rem !important;\n  font-size: 0.875rem !important;\n  margin-block: 0 !important;\n  margin-inline: 0.25rem !important;\n}\n.hero__img {\n  display: block;\n  --padding: inherit;\n}\n.hero__breadcrumbs {\n  display: none;\n  margin-block: 20px 0;\n  margin-inline: 14px;\n  line-height: 14px;\n}\n.hero--breadcrumb .hero__breadcrumbs {\n  display: block;\n}\n@container (min-width: 800px) {\n  .hero__breadcrumbs {\n    margin-block: 0;\n    margin-inline: 50px;\n    max-inline-size: 50%;\n  }\n}\n@container (min-width: 900px) {\n  .hero__breadcrumbs {\n    margin-block: 0;\n    margin-inline: 83px;\n  }\n}\n.hero__breadcrumbs ::slotted(*[slot=breadcrumb]) {\n  font-size: 0.85rem;\n  text-transform: uppercase;\n  letter-spacing: 1.5px;\n  font-weight: 600;\n  font-stretch: 125%;\n  display: inline-block;\n  margin-block-end: 16px;\n  position: relative;\n  z-index: 2;\n}\n.hero--hasbg .hero__breadcrumbs ::slotted(*[slot=breadcrumb]) {\n  text-shadow: 1px 1px rgba(0, 0, 0, 0.15);\n}\n.hero__breadcrumbs ::slotted(a[slot=breadcrumb]) {\n  color: var(--theme-tint-color) !important;\n  cursor: pointer;\n}\n.hero__breadcrumbs ::slotted(.slash[slot=breadcrumb]) {\n  color: var(--theme-color);\n  position: relative;\n  margin-block: 0;\n  margin-inline: 0.5rem;\n  display: inline-block;\n}\n.hero__scrim {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  background: linear-gradient(var(--scrim-direction), rgb(var(--scrim-color)/var(--scrim-opacity-from)) 0%, rgb(var(--scrim-color)/var(--scrim-opacity-to)) 100%);\n}\n.hero--scrim .hero__scrim {\n  background: none;\n}\n.hero__content {\n  max-inline-size: 1440px;\n  display: block;\n  --grid-row-gap: 0;\n  margin-block: 0;\n  margin-inline: auto;\n  position: relative;\n}\n@container (min-width: 800px) {\n  .hero__content {\n    margin-block: 50px 0 !important;\n    max-inline-size: 1540px !important;\n  }\n}\n@container (min-width: 900px) {\n  .hero__content {\n    margin-block: 83px 0 !important;\n    max-inline-size: 1606px !important;\n  }\n}\n.hero__primary {\n  margin: 16px;\n}\n.hero--breadcrumb .hero__primary {\n  margin-block: 0;\n  margin-inline: 16px;\n}\n.hero--backbtn .hero__primary {\n  margin-inline-start: 0;\n}\n.hero__primary ::slotted(.nano-icon-button[slot=back-btn]) {\n  font-size: 2rem;\n}\n@container (min-width: 800px) {\n  .hero__primary {\n    margin-block: 0 50px !important;\n    margin-inline: 50px 0 !important;\n  }\n  .hero__primary ::slotted(.nano-icon-button[slot=back-btn]) {\n    margin-block: 0 !important;\n    margin-inline: -3rem 0 !important;\n  }\n}\n@container (min-width: 900px) {\n  .hero__primary {\n    margin-block: 0 83px !important;\n    margin-inline: 83px 0 !important;\n  }\n}\n.hero__primary-content {\n  max-inline-size: 45rem;\n  --color: #fff;\n  display: flex;\n}\n.hero--backbtn .hero__primary-content > div {\n  padding-block: 10px 0;\n  padding-inline: 0;\n}\n.hero__primary-content ::slotted(h1[slot=primary-content]) {\n  margin-block: 0 18px !important;\n  font-size: 2rem !important;\n}\n@container (min-width: 800px) {\n  .hero__primary-content ::slotted(h1[slot=primary-content]) {\n    line-height: 31px !important;\n    margin-block-end: 30px !important;\n  }\n  .hero__primary-content ::slotted(.button[slot=primary-content]) {\n    margin-block-start: 20px !important;\n  }\n}\n.hero__secondary {\n  display: none;\n  block-size: 100%;\n  padding-block: 0 20px;\n  padding-inline: 14px;\n}\n.hero--secondary .hero__secondary {\n  display: flex;\n  align-items: center;\n}\n@container (min-width: 800px) {\n  .hero__secondary {\n    padding-block: 0 50px;\n    padding-inline: 50px;\n    justify-content: flex-end;\n  }\n}\n@container (min-width: 900px) {\n  .hero__secondary {\n    padding-block: 0 83px;\n    padding-inline: 83px;\n  }\n}\n.hero__icon-box {\n  background: rgba(0, 0, 0, 0.7);\n  padding: 24px;\n  inline-size: 100%;\n  margin-block-end: auto;\n  display: flex;\n  flex-direction: column;\n  color: white;\n}\n@container (min-width: 800px) {\n  .hero__icon-box {\n    max-inline-size: 410px;\n    flex: 0 1 410px;\n  }\n}\n.hero__icon-box ::slotted([slot=icon-box-item]) {\n  --nano-color-base: var(--theme-tint-color);\n  --nano-icon-size: 32px;\n  --nano-icon-margin-end: 20px;\n  display: flex;\n  align-items: center;\n  font-size: 0.8125rem;\n  margin-block-end: 20px;\n}\n.hero__icon-box ::slotted(.last[slot=icon-box-item]) {\n  margin-block-end: 0;\n}\n.hero__quote-content {\n  margin-block-start: auto;\n  text-align: center;\n  inline-size: 100%;\n}\n@container (min-width: 800px) {\n  .hero__quote-content {\n    max-inline-size: 500px;\n    flex: 0 1 500px;\n    text-align: initial;\n  }\n}\n.hero__quote::before, .hero__quote::after {\n  content: '\"';\n  font-size: var(--quote-size);\n  font-weight: 600;\n  font-style: italic;\n  line-height: 0;\n  color: #abb6b8;\n  display: inline;\n  position: relative;\n}\n.hero__quote ::slotted([slot=quote]) {\n  font-size: var(--quote-size);\n  font-weight: 200;\n  display: inline;\n}\n.hero__quote-author {\n  text-align: end;\n  font-size: 1rem;\n  opacity: 0.8;\n}\n@container (min-width: 800px) {\n  .hero--sub .hero__content {\n    margin-block-start: 40px;\n  }\n  .hero--sub .hero__content .hero__primary {\n    margin-block: 0 40px;\n    margin-inline: 50px 0;\n  }\n  .hero--sub .hero__content .hero__secondary {\n    padding-block: 0 50px;\n    padding-inline: 40px 50px;\n  }\n  .hero--sub .hero__content ::slotted(.button[slot=primary-content]) {\n    margin-block-start: 8px !important;\n  }\n  .hero--sub .hero__content ::slotted(h1[slot=primary-content]) {\n    margin-block-end: 18px !important;\n  }\n}\n@container (min-width: 900px) {\n  .hero--sub .hero__content .hero__primary {\n    margin-block: 0 40px;\n    margin-inline: 83px 0;\n  }\n  .hero--sub .hero__content .hero__secondary {\n    padding-block: 0 83px;\n    padding-inline: 40px 83px;\n  }\n}";export{i as nano_hero}
+import{r as n,g as o,a as e}from"./index-BM3Om9WE.js";import{h as t}from"./renderer-DpNDfhNy.js";const i=class{constructor(o){n(this,o)}mo;get host(){return o(this)}hasIconBox;hasScrim;hasSecondaryContent;hasQuote;hasBg;hasBackBtn;hasCtas;breadCrumbs;breadCrumbChange(){this.breadCrumbs.filter((n=>"A"===n.tagName&&!n.nextElementSibling.classList.contains("slash"))).forEach((n=>{n.insertAdjacentHTML("afterend",'<span slot="breadcrumb" class="slash">/</span>')}))}iconBoxItems;iconBoxItemChange(){this.iconBoxItems.forEach((n=>n.classList.remove("last"))),this.iconBoxItems[this.iconBoxItems.length-1]&&this.iconBoxItems[this.iconBoxItems.length-1].classList&&this.iconBoxItems[this.iconBoxItems.length-1].classList.add("last")}imgSrc;imgSrcSet=null;largeScreenBP=900;theme="dark";level="top";slotChangeObserver(){this.mo&&this.mo.disconnect(),(this.mo=new MutationObserver((()=>this.processSlottedContent()))).observe(this.host,{childList:!0})}processSlottedContent(){this.hasCtas=!!this.host.querySelector('[slot="secondary-ctas"]'),this.iconBoxItems=Array.from(this.host.querySelectorAll('[slot="icon-box-item"]')),this.hasIconBox=!!this.host.querySelector('[slot="icon-box"]')||!!this.iconBoxItems.length,this.hasScrim=!!this.host.querySelector('[slot="scrim"]'),this.breadCrumbs=Array.from(this.host.querySelectorAll('[slot="breadcrumb"]')),this.hasSecondaryContent=!!(this.host.querySelector('[slot="icon-box"]')||this.host.querySelector('[slot="quote"]')||this.host.querySelector('[slot="icon-box-item"]')||this.host.querySelector('[slot="secondary-content"]')),this.hasBg=!!this.host.querySelector('[slot="background"]')||!!this.imgSrc,this.hasBackBtn=!!this.host.querySelector('[slot="back-btn"]'),this.hasQuote=!!this.host.querySelector('[slot="quote"]')}disconnectedCallback(){this.mo&&this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver()}componentWillLoad(){this.processSlottedContent()}HeroContent=()=>[!this.hasIconBox&&this.hasCtas?t("div",{class:"hero__ctas"},t("slot",{name:"secondary-ctas"})):"",t("div",{class:"hero__scrim"},t("slot",{name:"scrim"})),t("nano-grid",{class:"hero__content",xlCols:2,xlSize:this.largeScreenBP},t("div",{"grid-states":"xl-col-span-2"},t("div",{class:"hero__breadcrumbs"},t("slot",{name:"breadcrumb"}))),t("div",{"grid-states":this.hasSecondaryContent?"xl-col-span-1 xl-col-start-1 xl-row-start-2":"xl-col-span-2 xl-col-start-1 xl-row-start-2"},t("div",{class:"hero__primary"},t("div",{class:"hero__primary-content"},t("slot",{name:"back-btn"}),t("div",null,t("slot",{name:"primary-content"}))))),this.hasSecondaryContent&&t("div",{"grid-states":"xl-col-span-1 xl-col-start-2 xl-row-start-2"},t("div",{class:"hero__secondary"},t("slot",{name:"secondary-content"}),this.hasIconBox&&t("div",{class:"hero__icon-box"},t("slot",{name:"icon-box"}),t("slot",{name:"icon-box-item"})),this.hasQuote&&t("div",{class:"hero__quote-content"},t("span",{class:"hero__quote"},t("slot",{name:"quote"})),t("div",{class:"hero__quote-author"},t("slot",{name:"quote-author"}))))))];render(){return t(e,{key:"8270c80717ac41cc4cd5bedb577b131fe01ac967",class:"nano-hero"},t("div",{key:"8b04bda451af03b648beb5576cd0badd48364aab",class:{hero:!0,"hero--light":"light"===this.theme,"hero--secondary":this.hasSecondaryContent,"hero--iconbox":this.hasIconBox,"hero--rtl":"rtl"===this.host.dir||"rtl"===this.host.ownerDocument.dir,"hero--scrim":this.hasScrim,"hero--breadcrumb":!!this.breadCrumbs.length,"hero--hasbg":this.hasBg,"hero--backbtn":this.hasBackBtn,"hero--sub":"sub"===this.level}},t("div",{key:"be91fa5b23ceddaf411b269eb6635b886c83174d",class:"hero__bg-wrap"},!!this.imgSrc&&t("nano-img",{key:"961b0a21220f0305cc0f4a4af0c6cd5e99446c41",class:"hero__img",lazy:!1,background:!0,srcSet:this.imgSrcSet,src:this.imgSrc},t(this.HeroContent,{key:"b272423beee722ae9d4adc0313d2d9ca4e6e3cd4"})),!this.imgSrc&&[t("div",{key:"f10056208ed97f1d4a051572261c874e5dae6e96",class:"hero__bg-slot"},t("slot",{key:"225c3a0b114b16e8edb063d6979683b343e85419",name:"background"})),t(this.HeroContent,{key:"375442509ce1954ca651d56d49488b0da464e577"})])))}static get watchers(){return{breadCrumbs:["breadCrumbChange"],iconBoxItems:["iconBoxItemChange"]}}};i.style=":host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host {\n  /**\n   * @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n   * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n   * @prop --theme-color: Text color. Default depends on theme;\n   * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #90c6e7;\n   * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n   * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n   * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n   * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n   * @prop --quote-size: Font size of the quote. Defaults to 1.3em and grows to 3rem on the xl breakpoint;\n  */\n  --nano-loader-base: #4a4a4a;\n  --nano-loader-tint: #7d7d7d;\n  --theme-color: #fff;\n  --theme-tint-color: #90c6e7;\n  --scrim-color: 0 0 0;\n  --scrim-direction: -50deg;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 0.7;\n  --padding: 0;\n  --quote-size: 1.3rem;\n  color: var(--theme-color);\n  display: block;\n  container-type: inline-size;\n}\n\n:host([theme=light]) {\n  --nano-loader-base: #fff;\n  --nano-loader-tint: white;\n  --theme-color: #4a4a4a;\n  --scrim-color: 255 255 255;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 1;\n  --scrim-direction: 270deg;\n  color: var(--theme-color);\n}\n:host([theme=light]) .hero__primary-content {\n  --color: #4a4a4a;\n}\n\n.hero {\n  position: relative;\n}\n@container (min-width: 800px) {\n  .hero {\n    --quote-size: 3rem;\n  }\n}\n.hero--rtl {\n  --scrim-direction: 270deg;\n}\n.hero--secondary:not(.hero--iconbox) {\n  --scrim-direction: 0deg;\n}\n.hero__bg-wrap {\n  overflow: hidden;\n}\n.hero__bg-slot {\n  position: absolute;\n  inset: 0;\n}\n.hero__ctas {\n  display: flex;\n  justify-content: flex-end;\n  padding-block: 32px 0;\n  padding-inline: 32px;\n  margin-block-end: -64px;\n  position: relative;\n  z-index: 1;\n}\n@media (width <= 52em) {\n  .hero__ctas {\n    display: none;\n  }\n}\n@media (width <= 58em) {\n  .hero__ctas {\n    margin-block-end: -48px;\n  }\n}\n.hero__ctas ::slotted(a.button[slot=secondary-ctas]) {\n  padding-inline: 0.5rem !important;\n  font-size: 0.875rem !important;\n  margin-block: 0 !important;\n  margin-inline: 0.25rem !important;\n}\n.hero__img {\n  display: block;\n  --padding: inherit;\n}\n.hero__breadcrumbs {\n  display: none;\n  margin-block: 20px 0;\n  margin-inline: 14px;\n  line-height: 14px;\n}\n.hero--breadcrumb .hero__breadcrumbs {\n  display: block;\n}\n@container (min-width: 800px) {\n  .hero__breadcrumbs {\n    margin-block: 0;\n    margin-inline: 50px;\n    max-inline-size: 50%;\n  }\n}\n@container (min-width: 900px) {\n  .hero__breadcrumbs {\n    margin-block: 0;\n    margin-inline: 83px;\n  }\n}\n.hero__breadcrumbs ::slotted(*[slot=breadcrumb]) {\n  font-size: 0.85rem;\n  text-transform: uppercase;\n  letter-spacing: 1.5px;\n  font-weight: 600;\n  font-stretch: 125%;\n  display: inline-block;\n  margin-block-end: 16px;\n  position: relative;\n  z-index: 2;\n}\n.hero--hasbg .hero__breadcrumbs ::slotted(*[slot=breadcrumb]) {\n  text-shadow: 1px 1px rgba(0, 0, 0, 0.15);\n}\n.hero__breadcrumbs ::slotted(a[slot=breadcrumb]) {\n  color: var(--theme-tint-color) !important;\n  cursor: pointer;\n}\n.hero__breadcrumbs ::slotted(.slash[slot=breadcrumb]) {\n  color: var(--theme-color);\n  position: relative;\n  margin-block: 0;\n  margin-inline: 0.5rem;\n  display: inline-block;\n}\n.hero__scrim {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  background: linear-gradient(var(--scrim-direction), rgb(var(--scrim-color)/var(--scrim-opacity-from)) 0%, rgb(var(--scrim-color)/var(--scrim-opacity-to)) 100%);\n}\n.hero--scrim .hero__scrim {\n  background: none;\n}\n.hero__content {\n  max-inline-size: 1440px;\n  display: block;\n  --grid-row-gap: 0;\n  margin-block: 0;\n  margin-inline: auto;\n  position: relative;\n}\n@container (min-width: 800px) {\n  .hero__content {\n    margin-block: 50px 0 !important;\n    max-inline-size: 1540px !important;\n  }\n}\n@container (min-width: 900px) {\n  .hero__content {\n    margin-block: 83px 0 !important;\n    max-inline-size: 1606px !important;\n  }\n}\n.hero__primary {\n  margin: 16px;\n}\n.hero--breadcrumb .hero__primary {\n  margin-block: 0;\n  margin-inline: 16px;\n}\n.hero--backbtn .hero__primary {\n  margin-inline-start: 0;\n}\n.hero__primary ::slotted(.nano-icon-button[slot=back-btn]) {\n  font-size: 2rem;\n}\n@container (min-width: 800px) {\n  .hero__primary {\n    margin-block: 0 50px !important;\n    margin-inline: 50px 0 !important;\n  }\n  .hero__primary ::slotted(.nano-icon-button[slot=back-btn]) {\n    margin-block: 0 !important;\n    margin-inline: -3rem 0 !important;\n  }\n}\n@container (min-width: 900px) {\n  .hero__primary {\n    margin-block: 0 83px !important;\n    margin-inline: 83px 0 !important;\n  }\n}\n.hero__primary-content {\n  max-inline-size: 45rem;\n  --color: #fff;\n  display: flex;\n}\n.hero--backbtn .hero__primary-content > div {\n  padding-block: 10px 0;\n  padding-inline: 0;\n}\n.hero__primary-content ::slotted(h1[slot=primary-content]) {\n  margin-block: 0 18px !important;\n  font-size: 2rem !important;\n}\n@container (min-width: 800px) {\n  .hero__primary-content ::slotted(h1[slot=primary-content]) {\n    line-height: 31px !important;\n    margin-block-end: 30px !important;\n  }\n  .hero__primary-content ::slotted(.button[slot=primary-content]) {\n    margin-block-start: 20px !important;\n  }\n}\n.hero__secondary {\n  display: none;\n  block-size: 100%;\n  padding-block: 0 20px;\n  padding-inline: 14px;\n}\n.hero--secondary .hero__secondary {\n  display: flex;\n  align-items: center;\n}\n@container (min-width: 800px) {\n  .hero__secondary {\n    padding-block: 0 50px;\n    padding-inline: 50px;\n    justify-content: flex-end;\n  }\n}\n@container (min-width: 900px) {\n  .hero__secondary {\n    padding-block: 0 83px;\n    padding-inline: 83px;\n  }\n}\n.hero__icon-box {\n  background: rgba(0, 0, 0, 0.7);\n  padding: 24px;\n  inline-size: 100%;\n  margin-block-end: auto;\n  display: flex;\n  flex-direction: column;\n  color: white;\n}\n@container (min-width: 800px) {\n  .hero__icon-box {\n    max-inline-size: 410px;\n    flex: 0 1 410px;\n  }\n}\n.hero__icon-box ::slotted([slot=icon-box-item]) {\n  --nano-color-base: var(--theme-tint-color);\n  --nano-icon-size: 32px;\n  --nano-icon-margin-end: 20px;\n  display: flex;\n  align-items: center;\n  font-size: 0.8125rem;\n  margin-block-end: 20px;\n}\n.hero__icon-box ::slotted(.last[slot=icon-box-item]) {\n  margin-block-end: 0;\n}\n.hero__quote-content {\n  margin-block-start: auto;\n  text-align: center;\n  inline-size: 100%;\n}\n@container (min-width: 800px) {\n  .hero__quote-content {\n    max-inline-size: 500px;\n    flex: 0 1 500px;\n    text-align: initial;\n  }\n}\n.hero__quote::before, .hero__quote::after {\n  content: '\"';\n  font-size: var(--quote-size);\n  font-weight: 600;\n  font-style: italic;\n  line-height: 0;\n  color: #abb6b8;\n  display: inline;\n  position: relative;\n}\n.hero__quote ::slotted([slot=quote]) {\n  font-size: var(--quote-size);\n  font-weight: 200;\n  display: inline;\n}\n.hero__quote-author {\n  text-align: end;\n  font-size: 1rem;\n  opacity: 0.8;\n}\n@container (min-width: 800px) {\n  .hero--sub .hero__content {\n    margin-block-start: 40px;\n  }\n  .hero--sub .hero__content .hero__primary {\n    margin-block: 0 40px;\n    margin-inline: 50px 0;\n  }\n  .hero--sub .hero__content .hero__secondary {\n    padding-block: 0 50px;\n    padding-inline: 40px 50px;\n  }\n  .hero--sub .hero__content ::slotted(.button[slot=primary-content]) {\n    margin-block-start: 8px !important;\n  }\n  .hero--sub .hero__content ::slotted(h1[slot=primary-content]) {\n    margin-block-end: 18px !important;\n  }\n}\n@container (min-width: 900px) {\n  .hero--sub .hero__content .hero__primary {\n    margin-block: 0 40px;\n    margin-inline: 83px 0;\n  }\n  .hero--sub .hero__content .hero__secondary {\n    padding-block: 0 83px;\n    padding-inline: 40px 83px;\n  }\n}";export{i as nano_hero}

package/dist/nano-components/nano-icon-button_2.entry.js

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{r as t,g as o,a as i,c as r}from"./index-BM3Om9WE.js";import{h as n}from"./renderer-DasB4P10.js";import{P as e}from"./popover-DNdFZ1hX.js";const a=class{constructor(o){t(this,o)}button;get host(){return o(this)}iconName;iconSrc;type="button";name;value;label;showTooltip=!1;disabled=!1;href;rel;target;form;async setFocus(){this.button.focus()}findForm(){const{form:t,host:o}=this;if(!t)return o.closest("form");if(t instanceof HTMLFormElement)return t;if("string"==typeof t){const o=document.getElementById(t);if(o instanceof HTMLFormElement)return o}return null}handleClick=t=>{if("button"===this.type)return;const o=this.findForm();if(o){t.preventDefault();const i=document.createElement("button");i.type=this.type,i.style.display="none",o.appendChild(i),i.click(),i.remove()}};content(){return n(void 0===this.href?"button":"a",{onClick:this.handleClick,part:"base",ref:t=>this.button=t,class:{"icon-button":!0,"icon-button--disabled":this.disabled},name:this.name,value:this.value,href:this.href||void 0,target:this.href&&this.target?this.target:void 0,rel:this.rel||void 0,type:!this.href&&this.type?this.type:void 0},n("span",{class:"icon-button__label"},this.label),n("nano-icon",{name:this.iconName,src:this.iconSrc,"aria-hidden":"true",lazy:!1,part:"icon"}))}render(){return n(i,{class:"nano-icon-button","aria-disabled":this.disabled?"true":null},this.showTooltip?n("nano-tooltip",{content:this.label},this.content()):this.content())}};a.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--border-radius:none;--active-color:var(--nano-color-neutral-800);--hover-color:var(--nano-color-primary-1100);--padding:var(--nano-spacing-xs);--box-shadow:none;--button-bg:transparent;color:currentcolor;border-radius:var(--border-radius);display:inline-block}.icon-button{flex:0 0 auto;display:flex;align-items:center;border:none;border-radius:inherit;background:inherit;font-size:inherit;color:inherit;padding:var(--padding);cursor:pointer;appearance:none;box-shadow:var(--box-shadow)}.icon-button:hover:not(.icon-button--disabled),.icon-button:focus:not(.icon-button--disabled){color:var(--hover-color)}.icon-button:active:not(.icon-button--disabled){color:var(--active-color)}.icon-button:focus-visible:not(.icon-button--disabled){outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.icon-button__label{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}:host([disabled]:not([disabled=false])){opacity:0.5;cursor:not-allowed}.icon-button--disabled{pointer-events:none}";const s=class{constructor(o){t(this,o),this.nanoShow=r(this,"nanoShow",7),this.nanoAfterShow=r(this,"nanoAfterShow",7),this.nanoHide=r(this,"nanoHide",7),this.nanoAfterHide=r(this,"nanoAfterHide",7)}isVisible=!1;popover;tooltipPositioner;tooltip;_target;get target(){return this._target}set target(t){t!==this._target&&this._target&&this._target.removeAttribute("aria-label"),t.setAttribute("aria-label",this.label),this._target=t}label="";get host(){return o(this)}content="";setLabel(){const t=Array.from(this.host.querySelectorAll('[slot="content"]')).map((t=>t.textContent)).join(" ").trim();(this.target||(this.target=this.getTarget(),this.target))&&(this.label=t||this.content,this.target.setAttribute("aria-label",this.label))}placement="top";disabled=!1;distance=10;open=!1;skidding=0;hoist=!1;trigger="hover focus";handleOpenChange(){this.open?this.show():this.hide()}nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;async show(){this.isVisible||this.disabled||(this.nanoShow.emit().defaultPrevented?this.open=!1:(this.isVisible=!0,this.open=!0,"function"==typeof this.tooltipPositioner?.showPopover?(this.hoist=!0,this.popover.show(),this.tooltipPositioner.showPopover()):this.popover.show()))}async hide(){this.isVisible&&(this.nanoHide.emit().defaultPrevented?this.open=!0:(this.isVisible=!1,this.open=!1,this.popover.hide(),setTimeout((()=>{this.open||"function"!=typeof this.tooltipPositioner?.hidePopover||this.tooltipPositioner.hidePopover()}),300)))}getTarget(){let t=Array.from(this.host.children);t=t.flatMap((t=>{const o=getComputedStyle(t).display;return"none"===o?[]:"contents"===o&&t.children?.length?Array.from(t.children):t}));const o=t.find((t=>"style"!==t.tagName.toLowerCase()&&"content"!==t.getAttribute("slot")));if(!o)throw new Error("Invalid tooltip target: no child element was found.");return o}hasTrigger(t){return this.trigger.split(" ").includes(t)}syncOptions(){this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.tooltip,onAfterHide:()=>this.nanoAfterHide.emit(),onAfterShow:()=>this.nanoAfterShow.emit()})}handleBlur=()=>{this.hasTrigger("focus")&&this.hide()};handleClick=()=>{this.hasTrigger("click")&&(this.open?this.hide():this.show())};handleFocus=()=>{this.hasTrigger("focus")&&this.show()};handleKeyDown=t=>{this.open&&"Escape"===t.key&&(t.stopPropagation(),this.hide())};handleMouseOver=()=>{this.hasTrigger("hover")&&this.show()};handleMouseOut=()=>{this.hasTrigger("hover")&&this.hide()};handleSlotChange=()=>{this.target=this.getTarget()};componentDidLoad(){this.target=this.getTarget(),this.popover=new e(this.target,this.tooltipPositioner,{sameWidth:!1}),this.syncOptions(),this.setLabel(),this.tooltipPositioner.hidden=!this.open,this.open&&this.show()}componentDidUpdate(){this.syncOptions()}disconnectedCallback(){this.popover&&this.popover.destroy()}render(){return n(i,{key:"30c71d884cf8fc1c2e97092dad0fb5d6695c77a8",onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onMouseOut:this.handleMouseOut,onBlur:this.handleBlur,onFocus:this.handleFocus,onClick:this.handleClick,class:"nano-tooltip"},n("slot",{key:"b7e7893c178d99abeb0f1e5a35892fddc8ab302a",onSlotchange:this.handleSlotChange}),n("div",{key:"83aae47d9745dcce88f6119ffa63b3bea809dc17",ref:t=>this.tooltipPositioner=t,class:"tooltip-positioner",popover:"manual"},n("div",{key:"f5cd2aa11ef281358d11057c866b298202398fc2",part:"base",ref:t=>this.tooltip=t,class:{tooltip:!0,"tooltip--open":this.open},role:"tooltip","aria-hidden":this.open?"false":"true"},n("slot",{key:"0dc5a5f28b439406f2d19dc4822b221bbb65a9e8",name:"content",onSlotchange:()=>this.setLabel()},this.content),n("div",{key:"d196bcffcfd4b26cf085ec21cc7965a369dd55ab",class:"tooltip-arrow","data-popper-arrow":!0}))))}static get watchers(){return{content:["setLabel"],open:["handleOpenChange"]}}};s.style=':host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--border-radius:0px;--max-width:20rem;--hide-delay:var(--nano-transition-x-fast);--hide-duration:var(--nano-transition-x-fast);--hide-timing-function:ease;--show-delay:var(--nano-transition-x-fast);--show-duration:var(--nano-transition-x-fast);--show-timing-function:ease;--background:var(--nano-color-neutral-1200);--color:var(--nano-color-base-0);--padding:var(--nano-spacing-sm);--arrow-size:5px;--arrow-offset:5px;display:contents}.tooltip-arrow{content:"";position:absolute;color:var(--background);transform:none !important;inset-inline-start:unset !important}.tooltip{max-inline-size:var(--max-width);border-radius:var(--border-radius);background-color:var(--background);font-size:var(--nano-font-size-2xs);line-height:1.5;color:var(--color);opacity:0;padding:var(--padding);transform:translateY(10px) translateZ(0);transform-origin:bottom;transition:opacity, transform var(--hide-duration) var(--hide-timing-function) var(--hide-delay);white-space:normal;transition-delay:var(--show-delay);transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.tooltip ::slotted(*){color:inherit;font-size:inherit;line-height:inherit}.tooltip-positioner{position:absolute;z-index:var(--nano-z-index-tooltip);border:0;background:none;padding:0;overflow:visible;color:unset}.tooltip-positioner::backdrop{display:none}.tooltip-positioner[popover],.tooltip-positioner:popover-open{inset:unset}.tooltip-positioner[data-popper-placement^=top] .tooltip{transform-origin:bottom;transform:translateY(-10px) translateZ(0)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;transform:none}.tooltip-positioner[data-popper-placement^=bottom] .tooltip-arrow{inset-block-end:100%;inset-inline-start:calc(50% - var(--arrow-size)) !important;border-block-end:var(--arrow-size) solid;border-inline-start:var(--arrow-size) solid transparent;border-inline-end:var(--arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip-arrow{inset-inline-start:var(--arrow-offset) !important}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip-arrow{inset-inline:auto var(--arrow-offset) !important}.tooltip-positioner[data-popper-placement^=top] .tooltip-arrow{inset-block-start:100%;inset-inline-start:calc(50% - var(--arrow-size)) !important;border-block-start:var(--arrow-size) solid;border-inline-start:var(--arrow-size) solid transparent;border-inline-end:var(--arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip-arrow{inset-inline-start:var(--arrow-offset) !important}.tooltip-positioner[data-popper-placement=top-end] .tooltip-arrow{inset-inline:auto var(--arrow-offset) !important}.tooltip-positioner[data-popper-placement^=left] .tooltip-arrow{inset-block-start:calc(50% - var(--arrow-size)) !important;inset-inline-start:100% !important;border-inline-start:var(--arrow-size) solid;border-block-start:var(--arrow-size) solid transparent;border-block-end:var(--arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip-arrow{inset-block-start:var(--arrow-offset) !important}.tooltip-positioner[data-popper-placement=left-end] .tooltip-arrow{inset-block:auto var(--arrow-offset) !important}.tooltip-positioner[data-popper-placement^=right] .tooltip-arrow{inset-block-start:calc(50% - var(--arrow-size)) !important;inset-inline-end:100% !important;border-inline-end:var(--arrow-size) solid;border-block-start:var(--arrow-size) solid transparent;border-block-end:var(--arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip-arrow{inset-block-start:var(--arrow-offset) !important}.tooltip-positioner[data-popper-placement=right-end] .tooltip-arrow{inset-block:auto var(--arrow-offset) !important}';export{a as nano_icon_button,s as nano_tooltip}
+import{r as t,g as o,a as i,c as r}from"./index-BM3Om9WE.js";import{h as n}from"./renderer-DpNDfhNy.js";import{P as e}from"./popover-DNdFZ1hX.js";const a=class{constructor(o){t(this,o)}button;get host(){return o(this)}iconName;iconSrc;type="button";name;value;label;showTooltip=!1;disabled=!1;href;rel;target;form;async setFocus(){this.button.focus()}findForm(){const{form:t,host:o}=this;if(!t)return o.closest("form");if(t instanceof HTMLFormElement)return t;if("string"==typeof t){const o=document.getElementById(t);if(o instanceof HTMLFormElement)return o}return null}handleClick=t=>{if("button"===this.type)return;const o=this.findForm();if(o){t.preventDefault();const i=document.createElement("button");i.type=this.type,i.style.display="none",o.appendChild(i),i.click(),i.remove()}};content(){return n(void 0===this.href?"button":"a",{onClick:this.handleClick,part:"base",ref:t=>this.button=t,class:{"icon-button":!0,"icon-button--disabled":this.disabled},name:this.name,value:this.value,href:this.href||void 0,target:this.href&&this.target?this.target:void 0,rel:this.rel||void 0,type:!this.href&&this.type?this.type:void 0},n("span",{class:"icon-button__label"},this.label),n("nano-icon",{name:this.iconName,src:this.iconSrc,"aria-hidden":"true",lazy:!1,part:"icon"}))}render(){return n(i,{class:"nano-icon-button","aria-disabled":this.disabled?"true":null},this.showTooltip?n("nano-tooltip",{content:this.label},this.content()):this.content())}};a.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--border-radius:none;--active-color:var(--nano-color-neutral-800);--hover-color:var(--nano-color-primary-1100);--padding:var(--nano-spacing-xs);--box-shadow:none;--button-bg:transparent;color:currentcolor;border-radius:var(--border-radius);display:inline-block}.icon-button{flex:0 0 auto;display:flex;align-items:center;border:none;border-radius:inherit;background:inherit;font-size:inherit;color:inherit;padding:var(--padding);cursor:pointer;appearance:none;box-shadow:var(--box-shadow)}.icon-button:hover:not(.icon-button--disabled),.icon-button:focus:not(.icon-button--disabled){color:var(--hover-color)}.icon-button:active:not(.icon-button--disabled){color:var(--active-color)}.icon-button:focus-visible:not(.icon-button--disabled){outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.icon-button__label{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}:host([disabled]:not([disabled=false])){opacity:0.5;cursor:not-allowed}.icon-button--disabled{pointer-events:none}";const s=class{constructor(o){t(this,o),this.nanoShow=r(this,"nanoShow",7),this.nanoAfterShow=r(this,"nanoAfterShow",7),this.nanoHide=r(this,"nanoHide",7),this.nanoAfterHide=r(this,"nanoAfterHide",7)}isVisible=!1;popover;tooltipPositioner;tooltip;_target;get target(){return this._target}set target(t){t!==this._target&&this._target&&this._target.removeAttribute("aria-label"),t.setAttribute("aria-label",this.label),this._target=t}label="";get host(){return o(this)}content="";setLabel(){const t=Array.from(this.host.querySelectorAll('[slot="content"]')).map((t=>t.textContent)).join(" ").trim();(this.target||(this.target=this.getTarget(),this.target))&&(this.label=t||this.content,this.target.setAttribute("aria-label",this.label))}placement="top";disabled=!1;distance=10;open=!1;skidding=0;hoist=!1;trigger="hover focus";handleOpenChange(){this.open?this.show():this.hide()}nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;async show(){this.isVisible||this.disabled||(this.nanoShow.emit().defaultPrevented?this.open=!1:(this.isVisible=!0,this.open=!0,"function"==typeof this.tooltipPositioner?.showPopover?(this.hoist=!0,this.popover.show(),this.tooltipPositioner.showPopover()):this.popover.show()))}async hide(){this.isVisible&&(this.nanoHide.emit().defaultPrevented?this.open=!0:(this.isVisible=!1,this.open=!1,this.popover.hide(),setTimeout((()=>{this.open||"function"!=typeof this.tooltipPositioner?.hidePopover||this.tooltipPositioner.hidePopover()}),300)))}getTarget(){let t=Array.from(this.host.children);t=t.flatMap((t=>{const o=getComputedStyle(t).display;return"none"===o?[]:"contents"===o&&t.children?.length?Array.from(t.children):t}));const o=t.find((t=>"style"!==t.tagName.toLowerCase()&&"content"!==t.getAttribute("slot")));if(!o)throw new Error("Invalid tooltip target: no child element was found.");return o}hasTrigger(t){return this.trigger.split(" ").includes(t)}syncOptions(){this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.tooltip,onAfterHide:()=>this.nanoAfterHide.emit(),onAfterShow:()=>this.nanoAfterShow.emit()})}handleBlur=()=>{this.hasTrigger("focus")&&this.hide()};handleClick=()=>{this.hasTrigger("click")&&(this.open?this.hide():this.show())};handleFocus=()=>{this.hasTrigger("focus")&&this.show()};handleKeyDown=t=>{this.open&&"Escape"===t.key&&(t.stopPropagation(),this.hide())};handleMouseOver=()=>{this.hasTrigger("hover")&&this.show()};handleMouseOut=()=>{this.hasTrigger("hover")&&this.hide()};handleSlotChange=()=>{this.target=this.getTarget()};componentDidLoad(){this.target=this.getTarget(),this.popover=new e(this.target,this.tooltipPositioner,{sameWidth:!1}),this.syncOptions(),this.setLabel(),this.tooltipPositioner.hidden=!this.open,this.open&&this.show()}componentDidUpdate(){this.syncOptions()}disconnectedCallback(){this.popover&&this.popover.destroy()}render(){return n(i,{key:"4e1a851a25fb3b85f17ce51e6d3ca6c4ef88096b",onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onMouseOut:this.handleMouseOut,onBlur:this.handleBlur,onFocus:this.handleFocus,onClick:this.handleClick,class:"nano-tooltip"},n("slot",{key:"040fd84cf165db44447013c4f830c127f9c3cffa",onSlotchange:this.handleSlotChange}),n("div",{key:"ce342385aa99cb783ee5438812eba7eb6d52993a",ref:t=>this.tooltipPositioner=t,class:"tooltip-positioner",popover:"manual"},n("div",{key:"37c9a935a2e9b9d1970a1bf4269aea5fd959176b",part:"base",ref:t=>this.tooltip=t,class:{tooltip:!0,"tooltip--open":this.open},role:"tooltip","aria-hidden":this.open?"false":"true"},n("slot",{key:"2131e35600ffcf0bf1531f84a2dbc0d954083ab8",name:"content",onSlotchange:()=>this.setLabel()},this.content),n("div",{key:"98953a383fbc4f68c96015e1e44a5618fb6efb97",class:"tooltip-arrow","data-popper-arrow":!0}))))}static get watchers(){return{content:["setLabel"],open:["handleOpenChange"]}}};s.style=':host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--border-radius:0px;--max-width:20rem;--hide-delay:var(--nano-transition-x-fast);--hide-duration:var(--nano-transition-x-fast);--hide-timing-function:ease;--show-delay:var(--nano-transition-x-fast);--show-duration:var(--nano-transition-x-fast);--show-timing-function:ease;--background:var(--nano-color-neutral-1200);--color:var(--nano-color-base-0);--padding:var(--nano-spacing-sm);--arrow-size:5px;--arrow-offset:5px;display:contents}.tooltip-arrow{content:"";position:absolute;color:var(--background);transform:none !important;inset-inline-start:unset !important}.tooltip{max-inline-size:var(--max-width);border-radius:var(--border-radius);background-color:var(--background);font-size:var(--nano-font-size-2xs);line-height:1.5;color:var(--color);opacity:0;padding:var(--padding);transform:translateY(10px) translateZ(0);transform-origin:bottom;transition:opacity, transform var(--hide-duration) var(--hide-timing-function) var(--hide-delay);white-space:normal;transition-delay:var(--show-delay);transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.tooltip ::slotted(*){color:inherit;font-size:inherit;line-height:inherit}.tooltip-positioner{position:absolute;z-index:var(--nano-z-index-tooltip);border:0;background:none;padding:0;overflow:visible;color:unset}.tooltip-positioner::backdrop{display:none}.tooltip-positioner[popover],.tooltip-positioner:popover-open{inset:unset}.tooltip-positioner[data-popper-placement^=top] .tooltip{transform-origin:bottom;transform:translateY(-10px) translateZ(0)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;transform:none}.tooltip-positioner[data-popper-placement^=bottom] .tooltip-arrow{inset-block-end:100%;inset-inline-start:calc(50% - var(--arrow-size)) !important;border-block-end:var(--arrow-size) solid;border-inline-start:var(--arrow-size) solid transparent;border-inline-end:var(--arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip-arrow{inset-inline-start:var(--arrow-offset) !important}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip-arrow{inset-inline:auto var(--arrow-offset) !important}.tooltip-positioner[data-popper-placement^=top] .tooltip-arrow{inset-block-start:100%;inset-inline-start:calc(50% - var(--arrow-size)) !important;border-block-start:var(--arrow-size) solid;border-inline-start:var(--arrow-size) solid transparent;border-inline-end:var(--arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip-arrow{inset-inline-start:var(--arrow-offset) !important}.tooltip-positioner[data-popper-placement=top-end] .tooltip-arrow{inset-inline:auto var(--arrow-offset) !important}.tooltip-positioner[data-popper-placement^=left] .tooltip-arrow{inset-block-start:calc(50% - var(--arrow-size)) !important;inset-inline-start:100% !important;border-inline-start:var(--arrow-size) solid;border-block-start:var(--arrow-size) solid transparent;border-block-end:var(--arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip-arrow{inset-block-start:var(--arrow-offset) !important}.tooltip-positioner[data-popper-placement=left-end] .tooltip-arrow{inset-block:auto var(--arrow-offset) !important}.tooltip-positioner[data-popper-placement^=right] .tooltip-arrow{inset-block-start:calc(50% - var(--arrow-size)) !important;inset-inline-end:100% !important;border-inline-end:var(--arrow-size) solid;border-block-start:var(--arrow-size) solid transparent;border-block-end:var(--arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip-arrow{inset-block-start:var(--arrow-offset) !important}.tooltip-positioner[data-popper-placement=right-end] .tooltip-arrow{inset-block:auto var(--arrow-offset) !important}';export{a as nano_icon_button,s as nano_tooltip}

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

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{k as i,r as o,c as t,g as n,a as r}from"./index-BM3Om9WE.js";import{h as e}from"./renderer-DasB4P10.js";let s;const a=(i,o)=>(i||!o||l(o)||(i=o),m(i)&&(i=h(i)),m(i)&&""!==i.trim()?""!==i.replace(/[a-z]|-|\/|\d/gi,"")?(console.warn("invalid characters in icon name "+i),null):i:null),c=i=>m(i)&&(i=i.trim(),l(i))?i:null,l=i=>i.length>0&&/(\/|\.)/.test(i),m=i=>"string"==typeof i,h=i=>i.toLowerCase(),d=i=>{if(1===i.nodeType){if("script"===i.nodeName.toLowerCase())return!1;for(let o=0;o<i.attributes.length;o++){const t=i.attributes[o].value;if(m(t)&&0===t.toLowerCase().indexOf("on"))return!1}for(let o=0;o<i.childNodes.length;o++)if(!d(i.childNodes[o]))return!1}return!0},p=new Map,f=new Map,u=class{constructor(i){o(this,i),this.nanoLoad=t(this,"nanoLoad",7),this.nanoError=t(this,"nanoError",7)}io;get el(){return n(this)}svgContent;isVisible=!1;isLoading=!0;color;role;setAriaLabel(){if(this.ariaLabel||this.el.ariaLabel)"presentation"===this.role&&(this.ariaLabel=void 0);else if(!this.role||"presentation"!==this.role){const i=a(this.name,this.icon);i&&(this.ariaLabel=i.split("/").slice(-1)[0].replace(/-/g," "))}}ariaLabel;updateRole(){this.ariaLabel?this.role="img":this.ariaLabel||(this.role="presentation")}flipRtl;name;src;icon;size="auto";lazy=!0;loadIcon(){if(this.isVisible){const o=(o=>{let t=c(o.src);return t||(t=a(o.name,o.icon),t?(n=t,(()=>{if(!s){const i=window;i.Nanoicons=i.Nanoicons||{},s=i.Nanoicons.map=i.Nanoicons.map||new Map}return s})().get(n)||(n.startsWith("device/")||n.startsWith("pictogram/")?i(`../nano-assets/icon/${n}.svg`):i(`../nano-assets/fontawesome-pro/svgs/${n}.svg`))):o.icon&&(t=c(o.icon),t)?t:null);var n})(this);o&&(p.has(o)?(this.svgContent=p.get(o),requestAnimationFrame((()=>{this.isLoading=!1,this.nanoLoad.emit()}))):(i=>{let o=f.get(i);return o||(o=fetch(i).then((o=>{if(o.ok)return o.text().then((o=>{p.set(i,(i=>{if(i&&document){const o=document.createElement("div");o.innerHTML=i;for(let i=o.childNodes.length-1;i>=0;i--)"svg"!==o.childNodes[i].nodeName.toLowerCase()&&o.removeChild(o.childNodes[i]);const t=o.firstElementChild;if(t&&"svg"===t.nodeName.toLowerCase()){const i=t.getAttribute("class")||"";if(t.setAttribute("class",(i+" sc-nano-icon s-nano-icon svg").trim()),d(t))return o.innerHTML}}return""})(o))}));p.set(i,"")})),f.set(i,o)),o})(o).then((()=>{this.svgContent=p.get(o),requestAnimationFrame((()=>{this.isLoading=!1,this.nanoLoad.emit()})),this.setAriaLabel()}),(()=>{this.nanoError.emit()})))}}nanoLoad;nanoError;waitUntilVisible(i,o,t){if(this.lazy&&"undefined"!=typeof window&&window.IntersectionObserver){const n=this.io=new window.IntersectionObserver((i=>{(i[0].isIntersecting||i[1]&&i[1].isIntersecting)&&(n.disconnect(),this.io=void 0,t())}),{rootMargin:o});n.observe(i)}else t()}isRtl(){if("rtl"===this.el.ownerDocument?.dir)return!0;if(this.el.closest('[dir="rtl"]'))return!0;const i=this.el.getRootNode().host;return!(!i||!i.closest('[dir="rtl"]'))}connectedCallback(){this.waitUntilVisible(this.el,"50px",(()=>{this.isVisible=!0,this.loadIcon()}))}disconnectedCallback(){this.io&&(this.io.disconnect(),this.io=void 0)}componentWillLoad(){this.updateRole(),this.setAriaLabel()}render(){const i=this.flipRtl||this.name&&this.name.match(/right|left/)&&(this.name.indexOf("arrow")>-1||this.name.indexOf("chevron")>-1)&&this.isRtl();return e(r,{key:"0bc1c17119f0e49b9798a1b61a4a768f6406129f",class:{loading:this.isLoading,"flip-rtl":!!i,"nano-icon":!0}},e("div",this.svgContent?{class:"icon-inner",innerHTML:this.svgContent}:{class:"icon-inner"}))}static get assetsDirs(){return["device","pictogram"]}static get watchers(){return{role:["setAriaLabel"],ariaLabel:["updateRole"],name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"]}}};u.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--icon-size:1em;--primary-color:currentcolor\n  --secondary-color: color-mix(in srgb, currentColor 50%, transparent);--primary-opacity:0.8;--secondary-opacity:1;display:inline-block;inline-size:var(--icon-size);block-size:var(--icon-size);min-inline-size:var(--icon-size);min-block-size:var(--icon-size);contain:strict;fill:currentcolor;box-sizing:content-box !important;transition:opacity 0.3s ease;color:currentcolor}:host .nanoicon{stroke:currentcolor}.nanoicon-fill-none{fill:none}.icon-inner,.nanoicon,svg,.svg{display:block;block-size:100%;inline-size: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([name^=pictogram]),:host([name^=device]){font-size:max(var(--nano-pictogram-size-medium), var(--icon-size))}:host([size=small][name^=pictogram]),:host([size=small][name^=device]){font-size:var(--nano-pictogram-size-small)}:host([size=regular]){font-size:var(--nano-icon-size-small)}:host([size=regular][name^=pictogram]),:host([size=regular][name^=device]){font-size:var(--nano-pictogram-size-medium)}:host([size=large]){font-size:var(--nano-icon-size-large)}:host([size=large][name^=pictogram]),:host([size=large][name^=device]){font-size:var(--nano-pictogram-size-large)}:host([size=xl][name^=pictogram]),:host([size=xl][name^=device]){font-size:var(--nano-pictogram-size-x-large)}:host([name^=pictogram]),:host([name^=device]),:host([color=primary]){color:var(--nano-color-primary-1100)}:host([color=neutral]){color:var(--nano-color-base-1000)}";export{u as nano_icon}
+import{k as i,r as o,c as t,g as n,a as r}from"./index-BM3Om9WE.js";import{h as e}from"./renderer-DpNDfhNy.js";let s;const a=(i,o)=>(i||!o||l(o)||(i=o),h(i)&&(i=m(i)),h(i)&&""!==i.trim()?""!==i.replace(/[a-z]|-|\/|\d/gi,"")?(console.warn("invalid characters in icon name "+i),null):i:null),c=i=>h(i)&&(i=i.trim(),l(i))?i:null,l=i=>i.length>0&&/(\/|\.)/.test(i),h=i=>"string"==typeof i,m=i=>i.toLowerCase(),d=i=>{if(1===i.nodeType){if("script"===i.nodeName.toLowerCase())return!1;for(let o=0;o<i.attributes.length;o++){const t=i.attributes[o].value;if(h(t)&&0===t.toLowerCase().indexOf("on"))return!1}for(let o=0;o<i.childNodes.length;o++)if(!d(i.childNodes[o]))return!1}return!0},p=new Map,f=new Map,u=class{constructor(i){o(this,i),this.nanoLoad=t(this,"nanoLoad",7),this.nanoError=t(this,"nanoError",7)}io;get el(){return n(this)}svgContent;isVisible=!1;isLoading=!0;color;role;setAriaLabel(){if(this.ariaLabel||this.el.ariaLabel)"presentation"===this.role&&(this.ariaLabel=void 0);else if(!this.role||"presentation"!==this.role){const i=a(this.name,this.icon);i&&(this.ariaLabel=i.split("/").slice(-1)[0].replace(/-/g," "))}}ariaLabel;updateRole(){this.ariaLabel?this.role="img":this.ariaLabel||(this.role="presentation")}flipRtl;name;src;icon;size="auto";lazy=!0;loadIcon(){if(this.isVisible){const o=(o=>{let t=c(o.src);return t||(t=a(o.name,o.icon),t?(n=t,(()=>{if(!s){const i=window;i.Nanoicons=i.Nanoicons||{},s=i.Nanoicons.map=i.Nanoicons.map||new Map}return s})().get(n)||(n.startsWith("device/")||n.startsWith("pictogram/")?i(`../nano-assets/icon/${n}.svg`):i(`../nano-assets/fontawesome-pro/svgs/${n}.svg`))):o.icon&&(t=c(o.icon),t)?t:null);var n})(this);o&&(p.has(o)?(this.svgContent=p.get(o),requestAnimationFrame((()=>{this.isLoading=!1,this.nanoLoad.emit()}))):(i=>{let o=f.get(i);return o||(o=fetch(i).then((o=>{if(o.ok)return o.text().then((o=>{p.set(i,(i=>{if(i&&document){const o=document.createElement("div");o.innerHTML=i;for(let i=o.childNodes.length-1;i>=0;i--)"svg"!==o.childNodes[i].nodeName.toLowerCase()&&o.removeChild(o.childNodes[i]);const t=o.firstElementChild;if(t&&"svg"===t.nodeName.toLowerCase()){const i=t.getAttribute("class")||"";if(t.setAttribute("class",(i+" sc-nano-icon s-nano-icon svg").trim()),d(t))return o.innerHTML}}return""})(o))}));p.set(i,"")})),f.set(i,o)),o})(o).then((()=>{this.svgContent=p.get(o),requestAnimationFrame((()=>{this.isLoading=!1,this.nanoLoad.emit()})),this.setAriaLabel()}),(()=>{this.nanoError.emit()})))}}nanoLoad;nanoError;waitUntilVisible(i,o,t){if(this.lazy&&"undefined"!=typeof window&&window.IntersectionObserver){const n=this.io=new window.IntersectionObserver((i=>{(i[0].isIntersecting||i[1]&&i[1].isIntersecting)&&(n.disconnect(),this.io=void 0,t())}),{rootMargin:o});n.observe(i)}else t()}isRtl(){if("rtl"===this.el.ownerDocument?.dir)return!0;if(this.el.closest('[dir="rtl"]'))return!0;const i=this.el.getRootNode().host;return!(!i||!i.closest('[dir="rtl"]'))}connectedCallback(){this.waitUntilVisible(this.el,"50px",(()=>{this.isVisible=!0,this.loadIcon()}))}disconnectedCallback(){this.io&&(this.io.disconnect(),this.io=void 0)}componentWillLoad(){this.updateRole(),this.setAriaLabel()}render(){const i=this.flipRtl||this.name&&this.name.match(/right|left/)&&(this.name.indexOf("arrow")>-1||this.name.indexOf("chevron")>-1)&&this.isRtl();return e(r,{key:"0bc1c17119f0e49b9798a1b61a4a768f6406129f",class:{loading:this.isLoading,"flip-rtl":!!i,"nano-icon":!0}},e("div",this.svgContent?{class:"icon-inner",innerHTML:this.svgContent}:{class:"icon-inner"}))}static get assetsDirs(){return["device","pictogram"]}static get watchers(){return{role:["setAriaLabel"],ariaLabel:["updateRole"],name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"]}}};u.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--icon-size:1em;--primary-color:currentcolor\n  --secondary-color: color-mix(in srgb, currentColor 50%, transparent);--primary-opacity:0.8;--secondary-opacity:1;display:inline-block;inline-size:var(--icon-size);block-size:var(--icon-size);min-inline-size:var(--icon-size);min-block-size:var(--icon-size);contain:strict;fill:currentcolor;box-sizing:content-box !important;transition:opacity 0.3s ease;color:currentcolor}:host .nanoicon{stroke:currentcolor}.nanoicon-fill-none{fill:none}.icon-inner,.nanoicon,svg,.svg{display:block;block-size:100%;inline-size: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([name^=pictogram]),:host([name^=device]){font-size:max(var(--nano-pictogram-size-medium), var(--icon-size))}:host([size=small][name^=pictogram]),:host([size=small][name^=device]){font-size:var(--nano-pictogram-size-small)}:host([size=regular]){font-size:var(--nano-icon-size-small)}:host([size=regular][name^=pictogram]),:host([size=regular][name^=device]){font-size:var(--nano-pictogram-size-medium)}:host([size=large]){font-size:var(--nano-icon-size-large)}:host([size=large][name^=pictogram]),:host([size=large][name^=device]){font-size:var(--nano-pictogram-size-large)}:host([size=xl][name^=pictogram]),:host([size=xl][name^=device]){font-size:var(--nano-pictogram-size-x-large)}:host([name^=pictogram]),:host([name^=device]),:host([color=primary]){color:var(--nano-color-primary-1100)}:host([color=neutral]){color:var(--nano-color-base-1000)}";export{u as nano_icon}

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

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{r as a,g as e,a as t}from"./index-BM3Om9WE.js";import{h as r}from"./renderer-DasB4P10.js";import{H as i}from"./slot-CFTP7C_Z.js";import{g as n}from"./dom-dlicJTEJ.js";import{f as o}from"./scroll-1nFw8CNk.js";const l=class{constructor(e){a(this,e)}get host(){return e(this)}autoExternalLinks=!1;io;mobileNavWrapper;slotCtrl=new i(this,"[default]","back","accessory");autoActive=!0;externalLinks="auto";createMobileMenu(){const a=n(this.host,"ul")[0];if(!a)return;const e=a.cloneNode(!0);n(e,"li",!0).forEach((a=>{const e=n(a,"a",!0)[0],t=n(a,"ul",!0)[0];if(e&&t){const r=this.createDetails(e.textContent?.trim()||"",t);e.remove(),a.prepend(r)}})),this.mobileNavWrapper.appendChild(e)}createDetails(a,e){const t=document.createElement("nano-details");return t.setAttribute("label",a),t.classList.add("nav-details"),t.appendChild(e),t}assessLinks(){if("auto"!==this.externalLinks)return;const a=this.host.querySelectorAll('a[href^="#"]'),e=this.host.querySelectorAll("a[href]");this.autoExternalLinks=!(a.length>e.length/2)}setupIntersectionObserver(){if(!this.autoActive)return;const a=this.host.querySelectorAll('a[href^="#"]'),e=[],t=o(this.host);a.forEach((a=>{const t=a.getAttribute("href")?.substring(1);if(!t)return;const r=document.getElementById(t);r&&e.push(r)})),this.io&&this.io.disconnect(),this.io=new IntersectionObserver((t=>{t.forEach((a=>{const e=a.target.getAttribute("id");e&&this.host.querySelector(`a[href="#${e}"]`)&&(a.isIntersecting?a.target.classList.add("in-view"):a.target.classList.remove("in-view"))}));const r=e.filter((a=>a.classList.contains("in-view")));if(r.length){r.sort(((a,e)=>e.getBoundingClientRect().top-a.getBoundingClientRect().top)),a.forEach((a=>a.classList.remove("is-active")));const e=r[0].getAttribute("id"),t=this.host.querySelector(`a[href="#${e}"]`);t?.classList.add("is-active")}}),{root:t===document.documentElement?null:t,rootMargin:"0px 0px -60% 0px",threshold:0}),e.forEach((a=>this.io.observe(a)))}handleSlotChange=()=>{this.assessLinks(),this.createMobileMenu(),this.setupIntersectionObserver()};componentDidLoad(){this.createMobileMenu()}connectedCallback(){this.assessLinks(),this.setupIntersectionObserver()}disconnectedCallback(){this.io&&(this.io.disconnect(),this.io=null)}render(){return r(t,{key:"a975c3e0b58fe39d504281784dd2f16e086eb0a1",class:{"nano-in-page-nav":!0,"external-links":!0===this.externalLinks||"auto"===this.externalLinks&&this.autoExternalLinks}},r("nav",{key:"26a999b2b5282f8e39f8e07e6e4190374e3c68c9",part:"root"},(this.slotCtrl.has("back")||this.slotCtrl.has("accessory"))&&r("div",{key:"507955a2092b3c1c5bfcaefe4debb97ba8ce1063",class:"header"},r("slot",{key:"5e3cd2413baf55b8905912316a1a17358e8597b5",name:"back"}),r("slot",{key:"ea39a03ba015a9bd2d031e839ae379699ba96d1a",name:"accessory"})),r("div",{key:"e6db628b6f4d1dc036a945554cfd8c90e8308307",class:"desktop-nav"},r("slot",{key:"1adc8091b920e22b54d8b83e0b60200f2ff1d45d",onSlotchange:()=>this.handleSlotChange})),r("nano-details",{key:"61fe2ef173d090faed09515c16df421cda50c11c",label:"Menu",class:"details-wrapper mobile-nav",ref:a=>this.mobileNavWrapper=a})))}};l.style=':host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:block}:host(.external-links){--color-bg:var(--nano-color-base-0) !important}:host(.external-links) .nano-details{--border-active:3px solid var(--nano-color-neutral-1200) !important}:host(.external-links) nav{border-block:1px solid var(--nano-color-neutral-200)}.desktop-nav{display:block}@media (width <= 730px){.desktop-nav{display:none}}.mobile-nav{display:none}@media (width <= 730px){.mobile-nav{display:block}}nav{background-color:var(--color-bg);padding:0}@media (width <= 730px){nav:has(.details-wrapper[open]){box-shadow:var(--nano-shadow-l1)}}.header{padding:var(--spacing-l2) var(--spacing-l2) 0;display:flex;flex-direction:column;gap:var(--spacing-l2);font-size:var(--font-size)}.header ::slotted(a[slot=back]),.header::slotted(a[slot=back]){display:flex !important;align-items:center !important;padding:0 !important;margin:0;gap:var(--spacing-l3) !important;cursor:pointer}.header ::slotted(a[slot=back])::before,.header::slotted(a[slot=back])::before{content:"";display:inline-block;background-size:cover;inline-size:1rem;block-size:1rem;background-color:var(--color-primary);-webkit-mask-image:var(--nano-component-icon-chevron);mask-image:var(--nano-component-icon-chevron);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transform-origin:center;rotate:calc(180deg * var(--flip-icon-ltr))}.details-wrapper{--padding:0;--btn-bg-color:transparent;--btn-bg-color--hover:transparent;--btn-text-color:var(--color-text);border:none}.details-wrapper::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);padding:var(--spacing-l2)}.details-wrapper[open]::part(header){background-color:var(--nano-color-primary-75)}.details-wrapper::part(content){padding:0}.details-wrapper::part(body){padding:0}.details-wrapper.sticky.stuck[open]::part(header){z-index:var(--nano-z-index-menubar);inset-block-start:0;position:sticky;box-shadow:var(--nano-shadow-l1);padding:var(--spacing-l2)}.details-wrapper a,.details-wrapper ul,.details-wrapper li{all:unset}.details-wrapper ul{display:flex;flex-direction:column;list-style:none}.details-wrapper ul:not(ul ul){padding:0 var(--spacing-l2) 0 var(--spacing-l2)}.details-wrapper a{cursor:pointer}.details-wrapper a:hover{text-decoration:underline}.details-wrapper a:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.details-wrapper ul>li:not(ul>li li){margin:0;padding:var(--spacing-l2) 0;display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;inline-size:100%}.details-wrapper ul>li:not(ul>li li):not(:last-of-type){border-block-end:1px solid var(--color-bottom-border)}.details-wrapper ul>li:not(ul>li li) a{color:var(--color-text)}.details-wrapper ul>li:not(ul>li li) a.is-active{border-inline-start:var(--border-active);padding-inline-start:1rem;display:block}.details-wrapper ul>li:not(ul>li li) a:hover{color:var(--color-text-hover)}.details-wrapper ul>li>ul,.details-wrapper ul>li>.nano-details>ul{padding:var(--list-gap) 0 0 var(--spacing-l2);gap:var(--list-gap)}.details-wrapper ul>li>ul a,.details-wrapper ul>li>.nano-details>ul a{color:var(--color-primary) !important}.details-wrapper ul>li>ul>li>.nano-details>ul,.details-wrapper ul>li>.nano-details>ul>li>.nano-details>ul{padding:var(--list-gap) 0 0 var(--nano-spacing-xl)}.details-wrapper .nano-details .nano-details:not(.nano-details .nano-details .nano-details){color:var(--color-text)}.details-wrapper .nano-details{--padding:0;--btn-bg-color:transparent;--btn-bg-color--open:var(--nano-color-primary-75);--btn-bg-color--hover:transparent;border:none;color:var(--color-primary)}.details-wrapper .nano-details .is-active::part(header){border-inline-start:var(--border-active);padding-inline-start:1rem !important;color:var(--color-primary)}.details-wrapper .nano-details[open]>[slot=icon-start]{rotate:90deg}.details-wrapper .nano-details::part(icon--start){margin-inline-end:var(--spacing-l3)}.details-wrapper .nano-details::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing)}.details-wrapper .nano-details::part(header):hover{text-decoration:underline}.details-wrapper .nano-details:not(.nav-details){color:var(--color-primary)}';export{l as nano_in_page_nav}
+import{r as a,g as e,a as t}from"./index-BM3Om9WE.js";import{h as r}from"./renderer-DpNDfhNy.js";import{H as i}from"./slot-D31cEKyt.js";import{g as n}from"./dom-dlicJTEJ.js";import{f as o}from"./scroll-1nFw8CNk.js";const l=class{constructor(e){a(this,e)}get host(){return e(this)}autoExternalLinks=!1;io;mobileNavWrapper;slotCtrl=new i(this,"[default]","back","accessory");autoActive=!0;externalLinks="auto";createMobileMenu(){const a=n(this.host,"ul")[0];if(!a)return;const e=a.cloneNode(!0);n(e,"li",!0).forEach((a=>{const e=n(a,"a",!0)[0],t=n(a,"ul",!0)[0];if(e&&t){const r=this.createDetails(e.textContent?.trim()||"",t);e.remove(),a.prepend(r)}})),this.mobileNavWrapper.appendChild(e)}createDetails(a,e){const t=document.createElement("nano-details");return t.setAttribute("label",a),t.classList.add("nav-details"),t.appendChild(e),t}assessLinks(){if("auto"!==this.externalLinks)return;const a=this.host.querySelectorAll('a[href^="#"]'),e=this.host.querySelectorAll("a[href]");this.autoExternalLinks=!(a.length>e.length/2)}setupIntersectionObserver(){if(!this.autoActive)return;const a=this.host.querySelectorAll('a[href^="#"]'),e=[],t=o(this.host);a.forEach((a=>{const t=a.getAttribute("href")?.substring(1);if(!t)return;const r=document.getElementById(t);r&&e.push(r)})),this.io&&this.io.disconnect(),this.io=new IntersectionObserver((t=>{t.forEach((a=>{const e=a.target.getAttribute("id");e&&this.host.querySelector(`a[href="#${e}"]`)&&(a.isIntersecting?a.target.classList.add("in-view"):a.target.classList.remove("in-view"))}));const r=e.filter((a=>a.classList.contains("in-view")));if(r.length){r.sort(((a,e)=>e.getBoundingClientRect().top-a.getBoundingClientRect().top)),a.forEach((a=>a.classList.remove("is-active")));const e=r[0].getAttribute("id"),t=this.host.querySelector(`a[href="#${e}"]`);t?.classList.add("is-active")}}),{root:t===document.documentElement?null:t,rootMargin:"0px 0px -60% 0px",threshold:0}),e.forEach((a=>this.io.observe(a)))}handleSlotChange=()=>{this.assessLinks(),this.createMobileMenu(),this.setupIntersectionObserver()};componentDidLoad(){this.createMobileMenu()}connectedCallback(){this.assessLinks(),this.setupIntersectionObserver()}disconnectedCallback(){this.io&&(this.io.disconnect(),this.io=null)}render(){return r(t,{key:"a975c3e0b58fe39d504281784dd2f16e086eb0a1",class:{"nano-in-page-nav":!0,"external-links":!0===this.externalLinks||"auto"===this.externalLinks&&this.autoExternalLinks}},r("nav",{key:"26a999b2b5282f8e39f8e07e6e4190374e3c68c9",part:"root"},(this.slotCtrl.has("back")||this.slotCtrl.has("accessory"))&&r("div",{key:"507955a2092b3c1c5bfcaefe4debb97ba8ce1063",class:"header"},r("slot",{key:"5e3cd2413baf55b8905912316a1a17358e8597b5",name:"back"}),r("slot",{key:"ea39a03ba015a9bd2d031e839ae379699ba96d1a",name:"accessory"})),r("div",{key:"e6db628b6f4d1dc036a945554cfd8c90e8308307",class:"desktop-nav"},r("slot",{key:"1adc8091b920e22b54d8b83e0b60200f2ff1d45d",onSlotchange:()=>this.handleSlotChange})),r("nano-details",{key:"61fe2ef173d090faed09515c16df421cda50c11c",label:"Menu",class:"details-wrapper mobile-nav",ref:a=>this.mobileNavWrapper=a})))}};l.style=':host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:block}:host(.external-links){--color-bg:var(--nano-color-base-0) !important}:host(.external-links) .nano-details{--border-active:3px solid var(--nano-color-neutral-1200) !important}:host(.external-links) nav{border-block:1px solid var(--nano-color-neutral-200)}.desktop-nav{display:block}@media (width <= 730px){.desktop-nav{display:none}}.mobile-nav{display:none}@media (width <= 730px){.mobile-nav{display:block}}nav{background-color:var(--color-bg);padding:0}@media (width <= 730px){nav:has(.details-wrapper[open]){box-shadow:var(--nano-shadow-l1)}}.header{padding:var(--spacing-l2) var(--spacing-l2) 0;display:flex;flex-direction:column;gap:var(--spacing-l2);font-size:var(--font-size)}.header ::slotted(a[slot=back]),.header::slotted(a[slot=back]){display:flex !important;align-items:center !important;padding:0 !important;margin:0;gap:var(--spacing-l3) !important;cursor:pointer}.header ::slotted(a[slot=back])::before,.header::slotted(a[slot=back])::before{content:"";display:inline-block;background-size:cover;inline-size:1rem;block-size:1rem;background-color:var(--color-primary);-webkit-mask-image:var(--nano-component-icon-chevron);mask-image:var(--nano-component-icon-chevron);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transform-origin:center;rotate:calc(180deg * var(--flip-icon-ltr))}.details-wrapper{--padding:0;--btn-bg-color:transparent;--btn-bg-color--hover:transparent;--btn-text-color:var(--color-text);border:none}.details-wrapper::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);padding:var(--spacing-l2)}.details-wrapper[open]::part(header){background-color:var(--nano-color-primary-75)}.details-wrapper::part(content){padding:0}.details-wrapper::part(body){padding:0}.details-wrapper.sticky.stuck[open]::part(header){z-index:var(--nano-z-index-menubar);inset-block-start:0;position:sticky;box-shadow:var(--nano-shadow-l1);padding:var(--spacing-l2)}.details-wrapper a,.details-wrapper ul,.details-wrapper li{all:unset}.details-wrapper ul{display:flex;flex-direction:column;list-style:none}.details-wrapper ul:not(ul ul){padding:0 var(--spacing-l2) 0 var(--spacing-l2)}.details-wrapper a{cursor:pointer}.details-wrapper a:hover{text-decoration:underline}.details-wrapper a:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.details-wrapper ul>li:not(ul>li li){margin:0;padding:var(--spacing-l2) 0;display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;inline-size:100%}.details-wrapper ul>li:not(ul>li li):not(:last-of-type){border-block-end:1px solid var(--color-bottom-border)}.details-wrapper ul>li:not(ul>li li) a{color:var(--color-text)}.details-wrapper ul>li:not(ul>li li) a.is-active{border-inline-start:var(--border-active);padding-inline-start:1rem;display:block}.details-wrapper ul>li:not(ul>li li) a:hover{color:var(--color-text-hover)}.details-wrapper ul>li>ul,.details-wrapper ul>li>.nano-details>ul{padding:var(--list-gap) 0 0 var(--spacing-l2);gap:var(--list-gap)}.details-wrapper ul>li>ul a,.details-wrapper ul>li>.nano-details>ul a{color:var(--color-primary) !important}.details-wrapper ul>li>ul>li>.nano-details>ul,.details-wrapper ul>li>.nano-details>ul>li>.nano-details>ul{padding:var(--list-gap) 0 0 var(--nano-spacing-xl)}.details-wrapper .nano-details .nano-details:not(.nano-details .nano-details .nano-details){color:var(--color-text)}.details-wrapper .nano-details{--padding:0;--btn-bg-color:transparent;--btn-bg-color--open:var(--nano-color-primary-75);--btn-bg-color--hover:transparent;border:none;color:var(--color-primary)}.details-wrapper .nano-details .is-active::part(header){border-inline-start:var(--border-active);padding-inline-start:1rem !important;color:var(--color-primary)}.details-wrapper .nano-details[open]>[slot=icon-start]{rotate:90deg}.details-wrapper .nano-details::part(icon--start){margin-inline-end:var(--spacing-l3)}.details-wrapper .nano-details::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing)}.details-wrapper .nano-details::part(header):hover{text-decoration:underline}.details-wrapper .nano-details:not(.nav-details){color:var(--color-primary)}';export{l as nano_in_page_nav}

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

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{r as t,g as n,a}from"./index-BM3Om9WE.js";import{h as i}from"./renderer-DasB4P10.js";const o=class{constructor(n){t(this,n)}get host(){return n(this)}inputElement;ignoreInputChange=!1;inputElementChanged(t,n){n&&n.removeEventListener("nanoChange",this.inputChangeHandler),this.inputElement&&(this.inputElement.label=this.inputElement.label||"Increment value",this.inputElement.hideLabel=!0,this.inputElement.type="number",this.inputElement.max=this.inputElement.max||"10",this.inputElement.min=this.inputElement.min||"0",this.inputElement.step=this.inputElement.step||"1",this.inputElement.value=this.inputElement.value||"0",this.inputElement.addEventListener("nanoChange",this.inputChangeHandler))}inputChangeHandler=()=>{if(!this.ignoreInputChange){this.ignoreInputChange=!0;let t=Number(this.inputElement.value);t=isNaN(t)?0:t,t=Math.max(t,parseFloat(this.inputElement.min)||0),t=Math.min(t,parseFloat(this.inputElement.max)||1/0),this.inputElement.value=t.toString(),requestAnimationFrame((()=>{this.ignoreInputChange=!1}))}};handleSlotChange=()=>{this.inputElement=this.host.querySelector("nano-input")};handleMinus=()=>{if(this.inputElement){const t=parseFloat(this.inputElement.value)||0,n=parseFloat(this.inputElement.step)||1,a=Math.max(t-n,parseFloat(this.inputElement.min)||0);this.ignoreInputChange=!0,this.inputElement.value=a.toString(),this.ignoreInputChange=!1}};handlePlus=()=>{if(this.inputElement){const t=parseFloat(this.inputElement.value)||0,n=parseFloat(this.inputElement.step)||1,a=Math.min(t+n,parseFloat(this.inputElement.max)||1/0);this.ignoreInputChange=!0,this.inputElement.value=a.toString(),this.ignoreInputChange=!1}};componentWillLoad(){this.handleSlotChange()}render(){return i(a,{key:"14c12f59b2f00d22bc58fb5ca64616a0a6b19749",class:"nano-increment"},i("div",{key:"77800505fe9e0d79fda864dc48cb199e6ea611c7",class:"root"},i("div",{key:"01576d846ca2708319d9faf1c7a0a25169f6c3f4",class:"minus"},i("nano-icon-button",{key:"a6b30034c64de602ac504a882aa3ff7c5a933083",iconName:"light/minus",label:"Decrement",onClick:this.handleMinus})),i("slot",{key:"f04566d5f4a52f23a36bfb1c86a8dadfa3638d66",onSlotchange:this.handleSlotChange}),i("div",{key:"4f1e183e7d547d5f72154115300d14cfbbe3d62b",class:"plus"},i("nano-icon-button",{key:"20af1b2a19cd8c9264e6375f4a5c05b9f917d979",iconName:"light/plus",label:"Increment",onClick:this.handlePlus}))))}static get watchers(){return{inputElement:["inputElementChanged"]}}};o.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:inline-block}.root{display:grid;grid-template-columns:min-content auto 1fr;grid-template-rows:max-content max-content;align-items:stretch}::slotted(*){text-align:center}nano-icon-button{background:var(--nano-color-base-0);color:var(--nano-color-primary-1000);display:flex;border-radius:var(--nano-border-radius-pill);position:relative;z-index:1;inline-size:fit-content;block-size:100%}nano-icon-button:hover{background:var(--nano-color-primary-100)}nano-icon-button:active{background:var(--nano-color-primary-300)}nano-icon-button::part(base){border:1px solid var(--nano-color-neutral-300)}nano-icon-button::part(base):focus-visible{outline:var(--nano-focus-ring-color) solid 3px;outline-offset:-2px}.minus{grid-column:1;grid-row:1}.minus nano-icon-button{--padding:0.4375em 0.625em 0.4375em 1.125em;border-start-end-radius:0;border-end-end-radius:0}.minus nano-icon-button::part(base){border-inline-end:none}.plus{grid-column:3;grid-row:1}.plus nano-icon-button{--padding:0.4375em 1.125em 0.4375em 0.625em;border-start-start-radius:0;border-end-start-radius:0}.plus nano-icon-button::part(base){border-inline-start:none}";export{o as nano_increment}
+import{r as t,g as n,a}from"./index-BM3Om9WE.js";import{h as i}from"./renderer-DpNDfhNy.js";const o=class{constructor(n){t(this,n)}get host(){return n(this)}inputElement;ignoreInputChange=!1;inputElementChanged(t,n){n&&n.removeEventListener("nanoChange",this.inputChangeHandler),this.inputElement&&(this.inputElement.label=this.inputElement.label||"Increment value",this.inputElement.hideLabel=!0,this.inputElement.type="number",this.inputElement.max=this.inputElement.max||"10",this.inputElement.min=this.inputElement.min||"0",this.inputElement.step=this.inputElement.step||"1",this.inputElement.value=this.inputElement.value||"0",this.inputElement.addEventListener("nanoChange",this.inputChangeHandler))}inputChangeHandler=()=>{if(!this.ignoreInputChange){this.ignoreInputChange=!0;let t=Number(this.inputElement.value);t=isNaN(t)?0:t,t=Math.max(t,parseFloat(this.inputElement.min)||0),t=Math.min(t,parseFloat(this.inputElement.max)||1/0),this.inputElement.value=t.toString(),requestAnimationFrame((()=>{this.ignoreInputChange=!1}))}};handleSlotChange=()=>{this.inputElement=this.host.querySelector("nano-input")};handleMinus=()=>{if(this.inputElement){const t=parseFloat(this.inputElement.value)||0,n=parseFloat(this.inputElement.step)||1,a=Math.max(t-n,parseFloat(this.inputElement.min)||0);this.ignoreInputChange=!0,this.inputElement.value=a.toString(),this.ignoreInputChange=!1}};handlePlus=()=>{if(this.inputElement){const t=parseFloat(this.inputElement.value)||0,n=parseFloat(this.inputElement.step)||1,a=Math.min(t+n,parseFloat(this.inputElement.max)||1/0);this.ignoreInputChange=!0,this.inputElement.value=a.toString(),this.ignoreInputChange=!1}};componentWillLoad(){this.handleSlotChange()}render(){return i(a,{key:"14c12f59b2f00d22bc58fb5ca64616a0a6b19749",class:"nano-increment"},i("div",{key:"77800505fe9e0d79fda864dc48cb199e6ea611c7",class:"root"},i("div",{key:"01576d846ca2708319d9faf1c7a0a25169f6c3f4",class:"minus"},i("nano-icon-button",{key:"a6b30034c64de602ac504a882aa3ff7c5a933083",iconName:"light/minus",label:"Decrement",onClick:this.handleMinus})),i("slot",{key:"f04566d5f4a52f23a36bfb1c86a8dadfa3638d66",onSlotchange:this.handleSlotChange}),i("div",{key:"4f1e183e7d547d5f72154115300d14cfbbe3d62b",class:"plus"},i("nano-icon-button",{key:"20af1b2a19cd8c9264e6375f4a5c05b9f917d979",iconName:"light/plus",label:"Increment",onClick:this.handlePlus}))))}static get watchers(){return{inputElement:["inputElementChanged"]}}};o.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:inline-block}.root{display:grid;grid-template-columns:min-content auto 1fr;grid-template-rows:max-content max-content;align-items:stretch}::slotted(*){text-align:center}nano-icon-button{background:var(--nano-color-base-0);color:var(--nano-color-primary-1000);display:flex;border-radius:var(--nano-border-radius-pill);position:relative;z-index:1;inline-size:fit-content;block-size:100%}nano-icon-button:hover{background:var(--nano-color-primary-100)}nano-icon-button:active{background:var(--nano-color-primary-300)}nano-icon-button::part(base){border:1px solid var(--nano-color-neutral-300)}nano-icon-button::part(base):focus-visible{outline:var(--nano-focus-ring-color) solid 3px;outline-offset:-2px}.minus{grid-column:1;grid-row:1}.minus nano-icon-button{--padding:0.4375em 0.625em 0.4375em 1.125em;border-start-end-radius:0;border-end-end-radius:0}.minus nano-icon-button::part(base){border-inline-end:none}.plus{grid-column:3;grid-row:1}.plus nano-icon-button{--padding:0.4375em 1.125em 0.4375em 0.625em;border-start-start-radius:0;border-end-start-radius:0}.plus nano-icon-button::part(base){border-inline-start:none}";export{o as nano_increment}

package/dist/nano-components/nano-input-otp.entry.js

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{r as t,c as i,g as n,h as o,F as s,a}from"./index-BM3Om9WE.js";const e=class{constructor(n){t(this,n),this.nanoInput=i(this,"nanoInput",7),this.nanoChange=i(this,"nanoChange",7),this.nanoComplete=i(this,"nanoComplete",7),this.nanoBlur=i(this,"nanoBlur",7),this.nanoFocus=i(this,"nanoFocus",7)}inputRefs=[];inputId="nano-input-otp-"+r++;focusedValue;isKeyboardNavigation=!1;get el(){return n(this)}inputValues=[];hasFocus=!1;previousInputValues=[];invalid=!1;valid=!1;disabled=!1;inputmode;length=6;pattern;readonly=!1;type="number";value="";allowInvalid=!1;showValidity=!1;nanoInput;nanoChange;nanoComplete;nanoBlur;nanoFocus;async setFocus(t){if("number"==typeof t){const i=Math.max(0,Math.min(t,this.length-1));this.inputRefs[i]?.focus()}else{const t=this.getTabbableIndex();this.inputRefs[t]?.focus()}}valueChanged(){this.initializeValues(),this.updateTabIndexes(),this.computeValidity()}componentWillLoad(){this.initializeValues(),this.computeValidity()}componentDidLoad(){this.updateTabIndexes()}get validKeyPattern(){return new RegExp(`^${this.getPattern()}$`,"u")}get specialCharsPattern(){return new RegExp("^[\\p{S}\\p{P}]$","u")}getPattern(){const{pattern:t,type:i}=this;return t||("number"===i?"[\\p{N}]":"[\\p{L}\\p{N}]")}getInputmode(){const{inputmode:t}=this;return t||("number"==this.type?"numeric":"text")}initializeValues(){this.inputValues=Array(this.length).fill(""),null!=this.value&&0!==String(this.value).length&&(String(this.value).split("").slice(0,this.length).forEach(((t,i)=>{(this.allowInvalid&&!this.specialCharsPattern.test(t)||this.validKeyPattern.test(t))&&(this.inputValues[i]=t)})),this.value=this.inputValues.join(""),this.previousInputValues=[...this.inputValues])}isRTL=t=>t&&""!==t.dir?"rtl"===t.dir.toLowerCase():"rtl"===document?.dir.toLowerCase();updateValue(t){const{inputValues:i,length:n}=this,o=this.getValidChars(i.join("")).join("");this.value=o,this.computeValidity(),this.emitNanoInput(t),o.length===n&&this.nanoComplete.emit({value:o,valid:this.valid})}emitNanoChange(t){const{value:i}=this,n=null==i?i:i.toString();this.computeValidity(),this.nanoChange.emit({value:n?.toString(),event:t,valid:this.valid})}emitNanoInput(t){const{value:i}=this,n=null==i?i:i.toString();this.computeValidity(),this.nanoInput.emit({value:n?.toString(),event:t,valid:this.valid})}onFocus=t=>i=>{const{inputRefs:n}=this;this.hasFocus||(this.nanoFocus.emit(i),this.focusedValue=this.value),this.hasFocus=!0;let o=t;if(!this.isKeyboardNavigation){const i=this.inputValues[t]?t:this.getFirstEmptyIndex();o=-1===i?this.length-1:i,this.inputRefs[o]?.focus()}n.forEach(((t,i)=>{t.tabIndex=i===o?0:-1})),this.isKeyboardNavigation=!1};onBlur=t=>{const{inputRefs:i}=this,n=t.relatedTarget;null!=n&&i.includes(n)||(this.hasFocus=!1,this.updateTabIndexes(),this.nanoBlur.emit(t),this.focusedValue!==this.value&&this.emitNanoChange(t))};focusNext(t){const{inputRefs:i,length:n}=this;t<n-1&&i[t+1]?.focus()}focusPrevious(t){const{inputRefs:i}=this;t>0&&i[t-1]?.focus()}getFirstEmptyIndex(){const{inputValues:t,length:i}=this;return Array.from({length:i},((i,n)=>t[n]||"")).findIndex((t=>!t||""===t))??-1}getTabbableIndex(){const{length:t}=this,i=this.getFirstEmptyIndex();return-1===i?t-1:i}updateTabIndexes(){const{inputRefs:t,inputValues:i,length:n}=this;let o=-1;for(let t=0;t<n;t++)if(!i[t]||""===i[t]){o=t;break}t.forEach(((t,s)=>{const a=-1===o?s===n-1:o===s;t.tabIndex=a?0:-1,t.setAttribute("aria-hidden",i[s]&&""!==i[s]||a?"false":"true")}))}onKeyDown=t=>i=>{const{length:n}=this,o=this.isRTL(this.el),s=i.target;if(!(s.selectionStart!==s.selectionEnd||(i.metaKey||i.ctrlKey)&&["a","c","v","x","r","z","y"].includes(i.key.toLowerCase())))if("Backspace"===i.key)if(this.inputValues[t]){for(let i=t;i<n-1;i++)this.inputValues[i]=this.inputValues[i+1];this.inputValues[n-1]="";for(let t=0;t<n;t++)this.inputRefs[t].value=this.inputValues[t]||"";this.updateValue(i),i.preventDefault()}else!this.inputValues[t]&&t>0&&this.focusPrevious(t);else if("ArrowLeft"===i.key||"ArrowRight"===i.key){this.isKeyboardNavigation=!0,i.preventDefault();const s="ArrowLeft"===i.key;s&&o||!s&&!o?this.inputValues[t]&&t<n-1&&this.focusNext(t):this.focusPrevious(t)}else if("Tab"===i.key)return void(this.isKeyboardNavigation=!0)};onInput=t=>i=>{const{length:n,validKeyPattern:o,allowInvalid:s}=this,a=i.target,e=a.value,r=this.previousInputValues[t]||"";if(e.length-r.length>1){const t=this.getValidChars(e);0===t.length&&requestAnimationFrame((()=>{this.inputRefs.forEach((t=>{t.value=""}))}));for(let i=0;i<n;i++)this.inputValues[i]=t[i]||"",this.inputRefs[i].value=t[i]||"";return this.updateValue(i),setTimeout((()=>{const i=t.length<n?t.length:n-1;this.inputRefs[i]?.focus()}),20),void(this.previousInputValues=[...this.inputValues])}if(!s&&e.length>0&&!o.test(e[e.length-1])||s&&this.specialCharsPattern.test(e[e.length-1]))return a.value=this.inputValues[t]||"",void(this.previousInputValues=[...this.inputValues]);if(0===a.selectionStart&&a.selectionEnd===e.length||!this.inputValues[t])return this.inputValues[t]=e,a.value=e,this.updateValue(i),this.focusNext(t),void(this.previousInputValues=[...this.inputValues]);if(this.inputValues[t]&&""===this.inputValues[this.inputValues.length-1]&&2===e.length){let n=i.data;if(n||(n=e.split("").find(((t,i)=>t!==r[i]))||e[e.length-1]),!s&&!o.test(n))return a.value=this.inputValues[t]||"",void(this.previousInputValues=[...this.inputValues]);for(let i=this.inputValues.length-1;i>t;i--)this.inputValues[i]=this.inputValues[i-1],this.inputRefs[i].value=this.inputValues[i]||"";return this.inputValues[t]=n,this.inputRefs[t].value=n,this.updateValue(i),void(this.previousInputValues=[...this.inputValues])}const p=e[(a.selectionStart??e.length)-1]??e[0];if(!s&&!o.test(p))return a.value=this.inputValues[t]||"",void(this.previousInputValues=[...this.inputValues]);this.inputValues[t]=p,a.value=p,this.updateValue(i),this.previousInputValues=[...this.inputValues]};onPaste=t=>{const{inputRefs:i,length:n}=this;t.preventDefault();const o=t.clipboardData?.getData("text");if(!o)return void this.emitNanoInput(t);const s=this.getValidChars(o);s.forEach(((t,i)=>{i<n&&(this.inputRefs[i].value=t,this.inputValues[i]=t)})),this.value=s.join(""),this.updateValue(t);const a=s.length<n?s.length:n-1;i[a]?.focus()};showSeparator(t){const{length:i}=this;return!(i<3||i%2!=0)&&t===i/2-1}getValidChars(t){const{allowInvalid:i,validKeyPattern:n,length:o}=this;return t.split("").filter(i?t=>""!==t.trim()&&!this.specialCharsPattern.test(t):t=>""!==t.trim()&&n.test(t)).slice(0,o)}computeValidity(){const{inputValues:t}=this;this.invalid=this.allowInvalid&&this.inputValues.some((t=>""!==t&&!this.validKeyPattern.test(t))),this.valid=this.inputValues.length===this.length&&this.inputValues.every((t=>""!==t&&this.validKeyPattern.test(t))),t.some((t=>""!==t&&!this.validKeyPattern.test(t)))}render(){const{disabled:t,el:i,hasFocus:n,inputId:e,inputRefs:r,inputValues:p,length:h,readonly:l,invalid:u,valid:c}=this,d=this.getInputmode(),v=this.getTabbableIndex(),g=this.getPattern(),b=""!==i.querySelector(".input-otp-description")?.textContent?.trim();return o(a,{key:"f397a0775d2d961ccc9013206fae72a8d0ad90ae",class:{"has-focus":n,"input-otp-disabled":t,"input-otp-readonly":l,"nano-invalid":u,"nano-valid":c}},o("div",{key:"add5fe905af87f4c9b87d29c66134ede52ff2b6b",role:"group","aria-label":"One-time password input",class:"input-otp-group"},Array.from({length:h}).map(((i,n)=>o(s,null,o("div",{class:"native-wrapper"},o("input",{class:"native-input",id:`${e}-${n}`,"aria-label":`Input ${n+1} of ${h}`,type:"text",inputmode:d,pattern:g,disabled:t,readOnly:l,tabIndex:n===v?0:-1,value:p[n]||"",autocomplete:"one-time-code",ref:t=>r[n]=t,onInput:this.onInput(n),onBlur:this.onBlur,onFocus:this.onFocus(n),onKeyDown:this.onKeyDown(n),onPaste:this.onPaste})),this.showSeparator(n)&&o("div",{class:"input-otp-separator"})))),this.showValidity&&o("div",{key:"71d38d8f343be559d187f1c5710a64733cf7ceaa",class:{"input-otp-icon":!0,"input-otp-icon--valid":c,"input-otp-icon--invalid":u}},o("slot",{key:"14529ecc57a6268932bc1485f0a425bb6cb45c51",name:"validity-icon"},o("nano-icon",{key:"65669a6b4ca76011b721e76fb68b7f9bfeb87092",hidden:!c,name:"light/circle-check",class:"input-otp-valid-icon","aria-label":"Valid input"})))),o("div",{key:"3e677ab8517765759a0cc4a0aa6f0fec58767c90",class:{"input-otp-description":!0,"input-otp-description-hidden":!b,"input-otp-description-inset":this.showValidity}},o("slot",{key:"e875d5c5d7ed8f804b9866618b7ed5e5211dd7b1"})))}static get watchers(){return{value:["valueChanged"]}}};let r=0;e.style=".sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{box-sizing:border-box}[hidden].sc-nano-input-otp{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{box-sizing:border-box}[hidden].sc-nano-input-otp{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-input-otp-h{--margin-top:0;--margin-end:0;--margin-bottom:0;--margin-start:0;--padding-top:var(--nano-spacing-md);--padding-end:0;--padding-bottom:var(--nano-spacing-xl);--padding-start:0;--color:initial;--min-width:40px;--width:40px;--height:50px;--gap:8px;--separator-width:7px;--separator-height:1px;--separator-border-radius:0;--separator-color:var(--nano-color-primary-1000);--highlight-color-valid:var(--nano-color-success-1100);--highlight-color-invalid:var(--nano-color-warning-1100);--border-radius:8px;--border-color:var(--nano-color-neutral-700);--border-width:1px;display:block;position:relative}.input-otp-group.sc-nano-input-otp{margin:var(--margin-top) var(--margin-end) var(--margin-bottom) var(--margin-start);padding:var(--padding-top) var(--padding-end) var(--padding-bottom) var(--padding-start);display:flex;align-items:center;justify-content:center;gap:var(--gap)}.native-wrapper.sc-nano-input-otp{display:flex;align-items:center;justify-content:center;min-inline-size:var(--min-width)}.native-input.sc-nano-input-otp{border-radius:var(--border-radius);inline-size:var(--width);min-inline-size:inherit;block-size:var(--height);border-width:var(--border-width);border-style:solid;border-color:var(--border-color);background:var(--background);color:var(--color);font-size:inherit;text-align:center;appearance:none}.input-otp-description.sc-nano-input-otp{color:currentcolor;font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);text-align:center;position:relative;inset-inline-start:-24px}.input-otp-description-hidden.sc-nano-input-otp{display:none}.input-otp-separator.sc-nano-input-otp{border-radius:var(--separator-border-radius);flex-shrink:0;inline-size:var(--separator-width);block-size:var(--separator-height);background:var(--separator-color)}.input-otp-disabled.sc-nano-input-otp-h{--color:var(--nano-color-neutral-700);opacity:0.5}.input-otp-disabled.sc-nano-input-otp-h,.input-otp-disabled.sc-nano-input-otp-h .native-input.sc-nano-input-otp:disabled{cursor:not-allowed}.has-focus.sc-nano-input-otp-h .native-input.sc-nano-input-otp:focus{outline:var(--nano-focus-ring)}.nano-invalid.sc-nano-input-otp-h .native-input.sc-nano-input-otp{border-color:var(--highlight-color-invalid)}.nano-valid.sc-nano-input-otp-h .native-input.sc-nano-input-otp{border-color:var(--highlight-color-valid)}.input-otp-icon.sc-nano-input-otp{inline-size:24px;block-size:24px;display:flex;align-items:center}.input-otp-icon--valid.sc-nano-input-otp{color:var(--nano-color-success-1100)}.input-otp-icon--invalid.sc-nano-input-otp{color:var(--nano-color-warning-1100)}";export{e as nano_input_otp}
+import{r as t,c as i,g as n,h as o,F as s,a as e}from"./index-BM3Om9WE.js";import{H as a}from"./slot-D31cEKyt.js";import"./dom-dlicJTEJ.js";const r=class{constructor(n){t(this,n),this.nanoInput=i(this,"nanoInput",7),this.nanoChange=i(this,"nanoChange",7),this.nanoComplete=i(this,"nanoComplete",7),this.nanoBlur=i(this,"nanoBlur",7),this.nanoFocus=i(this,"nanoFocus",7)}inputRefs=[];inputId="nano-input-otp-"+h++;slotCtrl=new a(this,"[default]");focusedValue;isKeyboardNavigation=!1;get el(){return n(this)}inputValues=[];hasFocus=!1;previousInputValues=[];invalid=!1;valid=!1;disabled=!1;inputmode;length=6;pattern;readonly=!1;type="number";value="";allowInvalid=!1;showValidity=!1;nanoInput;nanoChange;nanoComplete;nanoBlur;nanoFocus;async setFocus(t){if("number"==typeof t){const i=Math.max(0,Math.min(t,this.length-1));this.inputRefs[i]?.focus()}else{const t=this.getTabbableIndex();this.inputRefs[t]?.focus()}}valueChanged(){this.initializeValues(),this.updateTabIndexes(),this.computeValidity()}componentWillLoad(){this.initializeValues(),this.computeValidity()}componentDidLoad(){this.updateTabIndexes()}get validKeyPattern(){return new RegExp(`^${this.getPattern()}$`,"u")}get specialCharsPattern(){return new RegExp("^[\\p{S}\\p{P}]$","u")}getPattern(){const{pattern:t,type:i}=this;return t||("number"===i?"[\\p{N}]":"[\\p{L}\\p{N}]")}getInputmode(){const{inputmode:t}=this;return t||("number"==this.type?"numeric":"text")}initializeValues(){this.inputValues=Array(this.length).fill(""),null!=this.value&&0!==String(this.value).length&&(String(this.value).split("").slice(0,this.length).forEach(((t,i)=>{(this.allowInvalid&&!this.specialCharsPattern.test(t)||this.validKeyPattern.test(t))&&(this.inputValues[i]=t)})),this.value=this.inputValues.join(""),this.previousInputValues=[...this.inputValues])}isRTL=t=>t&&""!==t.dir?"rtl"===t.dir.toLowerCase():"rtl"===document?.dir.toLowerCase();updateValue(t){const{inputValues:i,length:n}=this,o=this.getValidChars(i.join("")).join("");this.value=o,this.computeValidity(),this.emitNanoInput(t),o.length===n&&this.nanoComplete.emit({value:o,valid:this.valid})}emitNanoChange(t){const{value:i}=this,n=null==i?i:i.toString();this.computeValidity(),this.nanoChange.emit({value:n?.toString(),event:t,valid:this.valid})}emitNanoInput(t){const{value:i}=this,n=null==i?i:i.toString();this.computeValidity(),this.nanoInput.emit({value:n?.toString(),event:t,valid:this.valid})}onFocus=t=>i=>{const{inputRefs:n}=this;this.hasFocus||(this.nanoFocus.emit(i),this.focusedValue=this.value),this.hasFocus=!0;let o=t;if(!this.isKeyboardNavigation){const i=this.inputValues[t]?t:this.getFirstEmptyIndex();o=-1===i?this.length-1:i,this.inputRefs[o]?.focus()}n.forEach(((t,i)=>{t.tabIndex=i===o?0:-1})),this.isKeyboardNavigation=!1};onBlur=t=>{const{inputRefs:i}=this,n=t.relatedTarget;null!=n&&i.includes(n)||(this.hasFocus=!1,this.updateTabIndexes(),this.nanoBlur.emit(t),this.focusedValue!==this.value&&this.emitNanoChange(t))};focusNext(t){const{inputRefs:i,length:n}=this;t<n-1&&i[t+1]?.focus()}focusPrevious(t){const{inputRefs:i}=this;t>0&&i[t-1]?.focus()}getFirstEmptyIndex(){const{inputValues:t,length:i}=this;return Array.from({length:i},((i,n)=>t[n]||"")).findIndex((t=>!t||""===t))??-1}getTabbableIndex(){const{length:t}=this,i=this.getFirstEmptyIndex();return-1===i?t-1:i}updateTabIndexes(){const{inputRefs:t,inputValues:i,length:n}=this;let o=-1;for(let t=0;t<n;t++)if(!i[t]||""===i[t]){o=t;break}t.forEach(((t,s)=>{const e=-1===o?s===n-1:o===s;t.tabIndex=e?0:-1,t.setAttribute("aria-hidden",i[s]&&""!==i[s]||e?"false":"true")}))}onKeyDown=t=>i=>{const{length:n}=this,o=this.isRTL(this.el),s=i.target;if(!(s.selectionStart!==s.selectionEnd||(i.metaKey||i.ctrlKey)&&["a","c","v","x","r","z","y"].includes(i.key.toLowerCase())))if("Backspace"===i.key)if(this.inputValues[t]){for(let i=t;i<n-1;i++)this.inputValues[i]=this.inputValues[i+1];this.inputValues[n-1]="";for(let t=0;t<n;t++)this.inputRefs[t].value=this.inputValues[t]||"";this.updateValue(i),i.preventDefault()}else!this.inputValues[t]&&t>0&&this.focusPrevious(t);else if("ArrowLeft"===i.key||"ArrowRight"===i.key){this.isKeyboardNavigation=!0,i.preventDefault();const s="ArrowLeft"===i.key;s&&o||!s&&!o?this.inputValues[t]&&t<n-1&&this.focusNext(t):this.focusPrevious(t)}else if("Tab"===i.key)return void(this.isKeyboardNavigation=!0)};onInput=t=>i=>{const{length:n,validKeyPattern:o,allowInvalid:s}=this,e=i.target,a=e.value,r=this.previousInputValues[t]||"";if(a.length-r.length>1){const t=this.getValidChars(a);0===t.length&&requestAnimationFrame((()=>{this.inputRefs.forEach((t=>{t.value=""}))}));for(let i=0;i<n;i++)this.inputValues[i]=t[i]||"",this.inputRefs[i].value=t[i]||"";return this.updateValue(i),setTimeout((()=>{const i=t.length<n?t.length:n-1;this.inputRefs[i]?.focus()}),20),void(this.previousInputValues=[...this.inputValues])}if(!s&&a.length>0&&!o.test(a[a.length-1])||s&&this.specialCharsPattern.test(a[a.length-1]))return e.value=this.inputValues[t]||"",void(this.previousInputValues=[...this.inputValues]);if(0===e.selectionStart&&e.selectionEnd===a.length||!this.inputValues[t])return this.inputValues[t]=a,e.value=a,this.updateValue(i),this.focusNext(t),void(this.previousInputValues=[...this.inputValues]);if(this.inputValues[t]&&""===this.inputValues[this.inputValues.length-1]&&2===a.length){let n=i.data;if(n||(n=a.split("").find(((t,i)=>t!==r[i]))||a[a.length-1]),!s&&!o.test(n))return e.value=this.inputValues[t]||"",void(this.previousInputValues=[...this.inputValues]);for(let i=this.inputValues.length-1;i>t;i--)this.inputValues[i]=this.inputValues[i-1],this.inputRefs[i].value=this.inputValues[i]||"";return this.inputValues[t]=n,this.inputRefs[t].value=n,this.updateValue(i),void(this.previousInputValues=[...this.inputValues])}const h=a[(e.selectionStart??a.length)-1]??a[0];if(!s&&!o.test(h))return e.value=this.inputValues[t]||"",void(this.previousInputValues=[...this.inputValues]);this.inputValues[t]=h,e.value=h,this.updateValue(i),this.previousInputValues=[...this.inputValues]};onPaste=t=>{const{inputRefs:i,length:n}=this;t.preventDefault();const o=t.clipboardData?.getData("text");if(!o)return void this.emitNanoInput(t);const s=this.getValidChars(o);s.forEach(((t,i)=>{i<n&&(this.inputRefs[i].value=t,this.inputValues[i]=t)})),this.value=s.join(""),this.updateValue(t);const e=s.length<n?s.length:n-1;i[e]?.focus()};showSeparator(t){const{length:i}=this;return!(i<3||i%2!=0)&&t===i/2-1}getValidChars(t){const{allowInvalid:i,validKeyPattern:n,length:o}=this;return t.split("").filter(i?t=>""!==t.trim()&&!this.specialCharsPattern.test(t):t=>""!==t.trim()&&n.test(t)).slice(0,o)}computeValidity(){const{inputValues:t}=this;this.invalid=this.allowInvalid&&this.inputValues.some((t=>""!==t&&!this.validKeyPattern.test(t))),this.valid=this.inputValues.length===this.length&&this.inputValues.every((t=>""!==t&&this.validKeyPattern.test(t))),t.some((t=>""!==t&&!this.validKeyPattern.test(t)))}render(){const{disabled:t,hasFocus:i,inputId:n,inputRefs:a,inputValues:r,length:h,readonly:p,invalid:l,valid:c}=this,u=this.getInputmode(),d=this.getTabbableIndex(),v=this.getPattern();return o(e,{key:"fb427bd3cb9bda29ec05c851e23a522c6966f4c0",class:{"has-focus":i,"input-otp-disabled":t,"input-otp-readonly":p,"nano-invalid":l,"nano-valid":c}},o("div",{key:"7b5067c8e3f91b71d9110c26e7ec6a91c560de8c",class:"input-otp-container"},o("div",{key:"a2420e14e2392429eca041ed0ce70e2b387d4922",class:"input-otp-group",role:"group","aria-label":"One-time password input"},Array.from({length:h}).map(((i,e)=>o(s,null,o("div",{class:"native-wrapper"},o("input",{class:"native-input",id:`${n}-${e}`,"aria-label":`Input ${e+1} of ${h}`,type:"text",inputmode:u,pattern:v,disabled:t,readOnly:p,tabIndex:e===d?0:-1,value:r[e]||"",autocomplete:"one-time-code",ref:t=>a[e]=t,onInput:this.onInput(e),onBlur:this.onBlur,onFocus:this.onFocus(e),onKeyDown:this.onKeyDown(e),onPaste:this.onPaste})),this.showSeparator(e)&&o("div",{class:"input-otp-separator"}))))),this.showValidity&&o("div",{key:"345be96b0c208d367804822eef00fbfdee3ecbfe",class:{"input-otp-icon":!0,"input-otp-icon--valid":c,"input-otp-icon--invalid":l},part:"validity-icon"},o("slot",{key:"7d4a86988e4097f3422aaa2f0ee5df4518da1d41",name:"validity-icon"},o("nano-icon",{key:"6b81e7a0430e36c0381b7787558509f525f7eed5",hidden:!c,name:"light/circle-check",class:"input-otp-valid-icon","aria-label":"Valid input"})))),this.slotCtrl.has("[default]")&&o("div",{key:"6d97b65cc7fad0f1828608887773081312f3bf92",class:"input-otp-description"},o("slot",{key:"459b7f12a59fec36ff465126c79083f14dce4a8a"})))}static get watchers(){return{value:["valueChanged"]}}};let h=0;r.style=".sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{box-sizing:border-box}[hidden].sc-nano-input-otp{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{box-sizing:border-box}[hidden].sc-nano-input-otp{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-input-otp-h{--color:initial;--min-width:40px;--width:40px;--height:50px;--gap:8px;--icon-size:var(--nano-pictogram-size-small);--inline-padding:calc(var(--icon-size) + var(--gap));--spacing:var(--nano-spacing-xl);--separator-width:7px;--separator-height:1px;--separator-border-radius:0;--separator-color:var(--nano-color-primary-1000);--highlight-color-valid:var(--nano-color-success-1100);--highlight-color-invalid:var(--nano-color-warning-1100);--border-radius:8px;--border-color:var(--nano-color-neutral-700);--border-width:1px;display:block;position:relative;margin-inline:var(--inline-padding)}.input-otp-container.sc-nano-input-otp{position:relative;inline-size:fit-content;block-size:fit-content;margin:0 auto}.input-otp-group.sc-nano-input-otp{display:flex;align-items:center;justify-content:center;gap:var(--gap)}.native-wrapper.sc-nano-input-otp{display:flex;align-items:center;justify-content:center;min-inline-size:var(--min-width)}.native-input.sc-nano-input-otp{border-radius:var(--border-radius);inline-size:var(--width);min-inline-size:inherit;block-size:var(--height);border-width:var(--border-width);border-style:solid;border-color:var(--border-color);background:var(--background);color:var(--color);font-size:inherit;text-align:center;appearance:none}.input-otp-description.sc-nano-input-otp{color:currentcolor;font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);text-align:center;position:relative;margin-inline-start:var(--spacing)}.input-otp-description-hidden.sc-nano-input-otp{display:none}.input-otp-separator.sc-nano-input-otp{border-radius:var(--separator-border-radius);flex-shrink:0;inline-size:var(--separator-width);block-size:var(--separator-height);background:var(--separator-color)}.input-otp-disabled.sc-nano-input-otp-h{--color:var(--nano-color-neutral-700);opacity:0.5}.input-otp-disabled.sc-nano-input-otp-h,.input-otp-disabled.sc-nano-input-otp-h .native-input.sc-nano-input-otp:disabled{cursor:not-allowed}.has-focus.sc-nano-input-otp-h .native-input.sc-nano-input-otp:focus{outline:var(--nano-focus-ring)}.nano-invalid.sc-nano-input-otp-h .native-input.sc-nano-input-otp{border-color:var(--highlight-color-invalid)}.nano-valid.sc-nano-input-otp-h .native-input.sc-nano-input-otp{border-color:var(--highlight-color-valid)}.input-otp-icon.sc-nano-input-otp{position:absolute;inset-block-start:50%;transform:translateY(-43%);inset-inline-end:calc((var(--gap) + var(--icon-size)) * -1);inline-size:var(--icon-size);block-size:var(--icon-size);display:flex;align-items:center}.input-otp-icon--valid.sc-nano-input-otp{color:var(--nano-color-success-1100)}.input-otp-icon--invalid.sc-nano-input-otp{color:var(--nano-color-warning-1100)}";export{r as nano_input_otp}

package/dist/nano-components/nano-intersection-observe.entry.js

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{r as t,c as s,g as e,a as i}from"./index-BM3Om9WE.js";import{h as n}from"./renderer-DasB4P10.js";import{f as o}from"./scroll-1nFw8CNk.js";import"./dom-dlicJTEJ.js";const h=class{constructor(e){t(this,e),this.nanoIntersectionChange=s(this,"nanoIntersectionChange",7),this.nanoIntersecting=s(this,"nanoIntersecting",7),this.nanoNotIntersecting=s(this,"nanoNotIntersecting",7)}io;_root;_threshold;defaultSlot;get observerOptions(){const t={};return this._root&&(t.root=this._root),this.rootMargin&&(t.rootMargin=this.rootMargin),this.threshold&&(t.threshold=this._threshold),t}get elements(){return(this.defaultSlot?.assignedElements()||[]).flatMap((t=>getComputedStyle(t).display.includes("contents")?Array.from(t.children):t))}get host(){return e(this)}root="auto";handleRootChange(){if(this.removeIO(),!this.root)return;let t;"auto"===this.root?t=o(this.host):"root"===this.root?t=void 0:"string"==typeof this.root?(t=this.host.closest(this.root),t||(console.warn(`nano-intersection-observe: root element "${this.root}" not found.`),t=void 0)):t=this.root,t===document.documentElement&&(t=void 0),t===this._root&&this.io||(this._root=t,this.addIO())}rootMargin;threshold;handleThresholdChange(){this._threshold=this.threshold?this.threshold.includes(",")?this.threshold.split(",").map((t=>Number(t))):Number(this.threshold):void 0}nanoIntersectionChange;nanoIntersecting;nanoNotIntersecting;ioCallback=t=>{t.forEach((t=>{this.nanoIntersectionChange.emit(t),t.isIntersecting&&this.nanoIntersecting.emit(t),t.isIntersecting||this.nanoNotIntersecting.emit(t)}))};handleSlotChange=()=>{this.addIO()};addIO(){if(!this.elements?.length)return;this.io&&this.removeIO();const t=this.io=new IntersectionObserver(this.ioCallback,this.observerOptions);this.elements?.forEach((s=>{t.observe(s)}))}removeIO(){this.io&&(this.io.disconnect(),this.io=void 0)}connectedCallback(){this.handleThresholdChange(),this.handleRootChange()}disconnectedCallback(){this.removeIO()}render(){return n(i,{key:"c837369d760b533f7bbed5ade5994206923e6ffa",class:"nano-intersection-observe"},n("slot",{key:"c12806aaf721afbd10a14a3f6c23bd08217128b6",ref:t=>this.defaultSlot=t,onSlotchange:this.handleSlotChange}))}static get watchers(){return{root:["handleRootChange"],threshold:["handleThresholdChange"],defaultSlot:["addIO"]}}};h.style="nano-intersection-observe { display: contents }";export{h as nano_intersection_observe}
+import{r as t,c as e,g as s,a as i}from"./index-BM3Om9WE.js";import{h as n}from"./renderer-DpNDfhNy.js";import{f as o}from"./scroll-1nFw8CNk.js";import"./dom-dlicJTEJ.js";const h=class{constructor(s){t(this,s),this.nanoIntersectionChange=e(this,"nanoIntersectionChange",7),this.nanoIntersecting=e(this,"nanoIntersecting",7),this.nanoNotIntersecting=e(this,"nanoNotIntersecting",7)}io;_root;_threshold;defaultSlot;get observerOptions(){const t={};return this._root&&(t.root=this._root),this.rootMargin&&(t.rootMargin=this.rootMargin),this.threshold&&(t.threshold=this._threshold),t}get elements(){return(this.defaultSlot?.assignedElements()||[]).flatMap((t=>getComputedStyle(t).display.includes("contents")?Array.from(t.children):t))}get host(){return s(this)}root="auto";handleRootChange(){if(this.removeIO(),!this.root)return;let t;"auto"===this.root?t=o(this.host):"root"===this.root?t=void 0:"string"==typeof this.root?(t=this.host.closest(this.root),t||(console.warn(`nano-intersection-observe: root element "${this.root}" not found.`),t=void 0)):t=this.root,t===document.documentElement&&(t=void 0),t===this._root&&this.io||(this._root=t,this.addIO())}rootMargin;threshold;handleThresholdChange(){this._threshold=this.threshold?this.threshold.includes(",")?this.threshold.split(",").map((t=>Number(t))):Number(this.threshold):void 0}nanoIntersectionChange;nanoIntersecting;nanoNotIntersecting;ioCallback=t=>{t.forEach((t=>{this.nanoIntersectionChange.emit(t),t.isIntersecting&&this.nanoIntersecting.emit(t),t.isIntersecting||this.nanoNotIntersecting.emit(t)}))};handleSlotChange=()=>{this.addIO()};addIO(){if(!this.elements?.length)return;this.io&&this.removeIO();const t=this.io=new IntersectionObserver(this.ioCallback,this.observerOptions);this.elements?.forEach((e=>{t.observe(e)}))}removeIO(){this.io&&(this.io.disconnect(),this.io=void 0)}connectedCallback(){this.handleThresholdChange(),this.handleRootChange()}disconnectedCallback(){this.removeIO()}render(){return n(i,{key:"6ed0913499a9caede509c0394a2be337ddbcfc7c",class:"nano-intersection-observe"},n("slot",{key:"a55eeb8c1527dd62aba761b60b6a0764cbd5bfa4",ref:t=>this.defaultSlot=t,onSlotchange:this.handleSlotChange}))}static get watchers(){return{root:["handleRootChange"],threshold:["handleThresholdChange"],defaultSlot:["addIO"]}}};h.style="nano-intersection-observe { display: contents }";export{h as nano_intersection_observe}

package/dist/nano-components/nano-masked-overflow.entry.js

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{r as t,g as i,a}from"./index-BM3Om9WE.js";import{h as o}from"./renderer-DasB4P10.js";import{g as s,a as e}from"./dom-dlicJTEJ.js";import{d as n}from"./throttle-C93FMm2Z.js";import{s as r}from"./scroll-1nFw8CNk.js";const l=class{label;scrollControls=!0;orientation="horizontal";showIndicator=!1;hideScrollbars;watchHideScrollbars(){null==this.hideScrollbars&&(this.hideScrollbars="vertical"!==this.orientation)}activeHandler=t=>t.classList.add("active");inactiveHandler=t=>t.classList.remove("active");isActiveHandler=t=>t.classList.contains("active");watchIsActiveHandler(){this.instantReCalc=!0,this.activeItem=this.allActiveItems.find(((t,i)=>this.isActiveHandler(t,i))),setTimeout((()=>this.instantReCalc=!1),300)}async syncActiveItem(){this.activeItem=this.allActiveItems.find(((t,i)=>this.isActiveHandler(t,i)))}constructor(i){t(this,i),this.recalculatePositions=n(this.recalculatePositions.bind(this),80)}ro;nav;itemContainer;isRtl;endBtn;startBtn;activeIndicator;mutationObservers=new WeakMap;get scrollProp(){return"horizontal"===this.orientation?"scrollWidth":"scrollHeight"}get clientDimensionProp(){return"horizontal"===this.orientation?"clientWidth":"clientHeight"}get scrollOffset(){return"horizontal"===this.orientation?"scrollLeft":"scrollTop"}get host(){return i(this)}instantReCalc=!1;hasScrollControls=!1;watchScrollControls(){this.hasScrollControls?this.handleScroll():this.hideControlStart=this.hideControlEnd=!0}hideControlEnd=!0;hideEndBtn(){this.endBtn&&this.activateBtn(this.endBtn,!this.hideControlEnd)}hideControlStart=!0;hideStartBtn(){this.startBtn&&this.activateBtn(this.startBtn,!this.hideControlStart)}activateBtn(t,i=!0){if(!i)return t.tabIndex=-1,t.disabled=!0,void t.classList.remove("is-shown");t.removeAttribute("tabindex"),t.disabled=!1,t.classList.add("is-shown")}get allActiveItems(){return this.allItems.filter((t=>!t.disabled||t.classList.contains("disabled")))}get allItems(){return s(this.host,"*","slot")}get activeItem(){return this._activeItem}set activeItem(t){t&&t!==this.activeItem&&!t.disabled&&this.allActiveItems.includes(t)&&(this._activeItem=t,this.allActiveItems.forEach(((t,i)=>{t===this._activeItem?this.activeHandler(t,i):this.inactiveHandler(t,i)})),this.recalculatePositions())}_activeItem;get navDim(){if(!this.nav)return 0;const t=getComputedStyle(this.nav);let i=this.nav[this.clientDimensionProp];return"horizontal"===this.orientation?i-(parseFloat(t.paddingLeft)+parseFloat(t.paddingRight)):i-(parseFloat(t.paddingTop)+parseFloat(t.paddingBottom))}scrollToActiveItem(){this.nav&&this.activeItem&&this.hasScrollControls&&r(this.activeItem,this.nav,this.orientation,"center")}syncActiveItemIndicator(){if(!this.activeItem||!this.showIndicator)return;const t=this.activeItem,i=t.clientWidth||0,a=t.clientHeight+2||0,o=e(t,this.itemContainer);if(!this.activeIndicator)return;const s=o.top,n=o.left;switch(this.instantReCalc&&(this.activeIndicator.style.transition="none"),this.orientation){case"horizontal":this.activeIndicator.style.width=`${i}px`,this.activeIndicator.style.height=null,this.activeIndicator.style.transform=`translateX(${n}px)`;break;case"vertical":this.activeIndicator.style.width=null,this.activeIndicator.style.height=`${a}px`,this.activeIndicator.style.transform=`translateY(${s}px)`}setTimeout((()=>this.activeIndicator.style.transition=null),400)}updateScrollControls=()=>{this.nav&&(this.hasScrollControls=this.nav[this.scrollProp]>this.nav[this.clientDimensionProp]&&this.nav[this.scrollProp]>=this.itemContainer[this.clientDimensionProp],this.handleScroll())};handleScroll=()=>{if(!this.hasScrollControls)return void(this.hideControlStart=this.hideControlEnd=!0);const t=this.isRtl?0===this.nav[this.scrollOffset]:Math.abs(this.nav[this.clientDimensionProp]-(this.nav[this.scrollProp]-this.nav[this.scrollOffset]))<2;(this.isRtl?Math.abs(this.nav[this.scrollProp]+this.nav[this.scrollOffset]-this.nav[this.clientDimensionProp])<2:0===this.nav[this.scrollOffset])?(this.hideControlStart=!0,this.hideControlEnd=!1):t?(this.hideControlStart=!1,this.hideControlEnd=!0):(this.hideControlEnd=!1,this.hideControlStart=!1)};handleBtnClick=(t=!1)=>{const i=this.navDim;let a;a=t?this.nav[this.scrollOffset]+i-20:this.nav[this.scrollOffset]-i+20;try{this.nav.scroll({left:"horizontal"===this.orientation?a:0,top:"vertical"===this.orientation?a:0,behavior:"smooth"})}catch(t){this.nav[this.scrollOffset]=a}};slotChangeHandler=()=>{if(this.allActiveItems.length<2)return;const t=this.allActiveItems.find(((t,i)=>this.isActiveHandler(t,i)));t&&(this.activeItem=t),this.recalculatePositions(),this.showIndicator&&this.allActiveItems.forEach((t=>{if(this.mutationObservers.get(t))return;const i=new MutationObserver((()=>this.syncActiveItemIndicator()));i.observe(t,{characterData:!0,childList:!0,subtree:!0}),this.mutationObservers.set(t,i)}))};handleClick=t=>{if(this.allActiveItems.length<2)return;const i=t.composedPath().find((t=>this.allActiveItems.includes(t)));i&&(this.activeItem=i)};handleKeyDown=t=>{if(["Enter"," "].includes(t.key)){const i=t.composedPath().find((t=>this.allActiveItems.includes(t)));i&&(this.activeItem=i)}};recalculatePositions=()=>{this.updateScrollControls(),this.syncActiveItemIndicator(),this.scrollToActiveItem()};connectedCallback(){this.instantReCalc=!0,this.isRtl="horizontal"===this.orientation&&!!this.host.closest('[dir="rtl"]'),window.MutationObserver&&this.slotChangeHandler(),window.ResizeObserver&&(this.ro&&(this.ro.disconnect(),this.ro=void 0),(this.ro=new ResizeObserver(this.recalculatePositions)).observe(this.host))}componentWillLoad(){this.watchHideScrollbars()}componentDidLoad(){this.activeItem=this.allActiveItems.find(((t,i)=>this.isActiveHandler(t,i))),requestAnimationFrame((()=>this.instantReCalc=!1))}disconnectedCallback(){this.ro&&(this.ro.disconnect(),this.ro=void 0)}render(){return o(a,{key:"cace0ef58ad901ea08d057420906d95ffa2600dd",dir:this.isRtl?"rtl":null,class:"nano-masked-overflow","has-scroll-controls":this.hasScrollControls},o("div",{key:"6133235c4eb2be34c93cb681cd612ae7d227e8eb",part:"base",class:{onav:!0,[`onav--${this.orientation}`]:!0,"onav--has-scroll-controls":this.hasScrollControls,"onav--has-scroll-controls-start":!this.hideControlStart,"onav--has-scroll-controls-end":!this.hideControlEnd,"onav--no-transitions":this.instantReCalc,"onnav--has-indicator":this.showIndicator,"onnav--hide-scrollbars":this.hideScrollbars&&"false"!==this.hideScrollbars},onClick:this.handleClick,onKeyDown:this.handleKeyDown},o("div",{key:"56f5264594f6963dddbdbad7ecd6c25ae4c0732a",class:"onav__nav"},this.scrollControls&&o("nano-icon-button",{key:"be07616305b1753d843f346420149055b59f8023",part:"scroll-button scroll-button-prev",class:{"onav__scroll-button":!0,"onav__scroll-button--start":!0},ref:t=>this.startBtn=t,onClick:()=>this.handleBtnClick(!1),label:"Click to scroll",iconName:"horizontal"===this.orientation?"light/chevron-left":"light/chevron-up"}),o("div",{key:"33c5125be511e2ed550ea4a4130ada309d6d4884",part:"scroller",ref:t=>this.nav=t,class:"onav__scroller",onScroll:this.handleScroll,tabindex:this.hasScrollControls?0:void 0,role:"region","aria-label":this.label||void 0},o("div",{key:"c7e3fa9f1272bcd57694aa7dd433f2da1ca4d4cb",part:"items",ref:t=>this.itemContainer=t,class:"onav__items"},this.showIndicator&&o("div",{key:"5029cad9fb763501e8e670f3347e55e7eafbcb87",part:"indicator",ref:t=>this.activeIndicator=t,class:"onav__active-indicator"}),o("slot",{key:"1438ac0d40a0ec2952cf9b66bc2f854d5b96c690",onSlotchange:this.slotChangeHandler}))),this.scrollControls&&o("nano-icon-button",{key:"05dea3796c9d9e758c229f76fcb4dde2bd90fa65",part:"scroll-button scroll-button-next",class:{"onav__scroll-button":!0,"onav__scroll-button--end":!0},ref:t=>this.endBtn=t,onClick:()=>this.handleBtnClick(!0),label:"Click to scroll",iconName:"horizontal"===this.orientation?"light/chevron-right":"light/chevron-down"}))))}static get watchers(){return{hideScrollbars:["watchHideScrollbars"],isActiveHandler:["watchIsActiveHandler"],hasScrollControls:["watchScrollControls"],hideControlEnd:["hideEndBtn"],hideControlStart:["hideStartBtn"]}}};l.style=':host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--indicator-transition:var(--nano-transition-fast);--indicator-color:var(--nano-color-primary-1000);--indicator-size:3px;--indicator-track-color:var(--nano-color-neutral-300);--indicator-track-size:var(--indicator-size);--scroll-btn-color:var(--nano-color-primary-1200);--scroll-btn-size:1rem;--fade-size:100px;position:relative;z-index:var(--nano-z-index-raised)}:host([orientation=horizontal]){display:block}:host([orientation=vertical]){display:flex}.onav--no-transitions *{transition-duration:0s !important}.onav__nav:has(.onav__scroller:focus-visible){outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.onav__scroller{scrollbar-width:thin;overflow:auto;display:flex;transition:var(--nano-transition-fast) ease}.onav__scroller:focus{outline:none}.onnav--hide-scrollbars .onav__scroller{scrollbar-width:none;-ms-overflow-style:none}.onnav--hide-scrollbars .onav__scroller::-webkit-scrollbar{inline-size:0;block-size:0}.onav__items{flex:1 1 auto;position:relative;inline-size:auto;flex-wrap:nowrap;display:flex}.onnav--has-indicator .onav__items::before{content:"";background:var(--indicator-track-color);display:block;position:absolute;z-index:1}.onav__active-indicator{position:absolute;z-index:10;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease, var(--indicator-transition) height ease}.nano-icon-button.onav__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;border:unset;z-index:2;transition:var(--nano-transition-fast) ease opacity;opacity:0;color:var(--scroll-btn-color);font-size:var(--scroll-btn-size);pointer-events:none}.nano-icon-button.onav__scroll-button.is-shown{opacity:1;pointer-events:all}.onav--horizontal.onav--has-scroll-controls .onav__scroller{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%);mask-image:linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%)}.onav--horizontal.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--horizontal.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:calc(var(--fade-size) * -2) 0;mask-position:calc(var(--fade-size) * -2) 0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--horizontal.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100%;mask-size:100%}.onav--horizontal .onav__items{flex-direction:row}.onav--horizontal .onav__items::before{inline-size:100%;block-size:var(--indicator-track-size);inset-block-end:0}.onav--horizontal .onav__active-indicator{inset-block-end:0;border-block-end:solid var(--indicator-size) var(--indicator-color)}.onav--horizontal .onav__scroll-button{inset-block:0}.onav--horizontal .onav__scroll-button--start{inset-inline-start:0}.onav--horizontal .onav__scroll-button--end{inset-inline-end:0}.onav--vertical{--fade-size:70px;inline-size:100%;display:flex}.onav--vertical .onav__nav{max-block-size:100%;min-inline-size:100%;display:flex}.onav--vertical .onav__scroller{inline-size:100%;flex-direction:column}.onav--vertical.onav--has-scroll-controls .onav__scroller{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%);mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%)}.onav--vertical.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% calc(100% + var(--fade-size) * 2);mask-size:100% calc(100% + var(--fade-size) * 2)}.onav--vertical.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:0 calc(var(--fade-size) * -2);mask-position:0 calc(var(--fade-size) * -2);-webkit-mask-size:100% calc(100% + var(--fade-size) * 2);mask-size:100% calc(100% + var(--fade-size) * 2)}.onav--vertical.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% 100%;mask-size:100% 100%}.onav--vertical .onav__items{flex-direction:column;inline-size:fit-content}.onav--vertical .onav__items::before{block-size:100%;inline-size:var(--indicator-track-size);inset-inline-start:0}.onav--vertical .onav__active-indicator{inset-inline-start:0;border-inline-start:solid var(--indicator-size) var(--indicator-color)}.onav--vertical .onav__scroll-button{inset-inline:0}.onav--vertical .onav__scroll-button--start{inset-block-start:0}.onav--vertical .onav__scroll-button--end{inset-block-end:0}';export{l as nano_masked_overflow}
+import{r as t,g as i,a}from"./index-BM3Om9WE.js";import{h as o}from"./renderer-DpNDfhNy.js";import{g as s,a as e}from"./dom-dlicJTEJ.js";import{d as n}from"./throttle-C93FMm2Z.js";import{s as r}from"./scroll-1nFw8CNk.js";const l=class{label;scrollControls=!0;orientation="horizontal";showIndicator=!1;hideScrollbars;watchHideScrollbars(){null==this.hideScrollbars&&(this.hideScrollbars="vertical"!==this.orientation)}activeHandler=t=>t.classList.add("active");inactiveHandler=t=>t.classList.remove("active");isActiveHandler=t=>t.classList.contains("active");watchIsActiveHandler(){this.instantReCalc=!0,this.activeItem=this.allActiveItems.find(((t,i)=>this.isActiveHandler(t,i))),setTimeout((()=>this.instantReCalc=!1),300)}async syncActiveItem(){this.activeItem=this.allActiveItems.find(((t,i)=>this.isActiveHandler(t,i)))}constructor(i){t(this,i),this.recalculatePositions=n(this.recalculatePositions.bind(this),80)}ro;nav;itemContainer;isRtl;endBtn;startBtn;activeIndicator;mutationObservers=new WeakMap;get scrollProp(){return"horizontal"===this.orientation?"scrollWidth":"scrollHeight"}get clientDimensionProp(){return"horizontal"===this.orientation?"clientWidth":"clientHeight"}get scrollOffset(){return"horizontal"===this.orientation?"scrollLeft":"scrollTop"}get host(){return i(this)}instantReCalc=!1;hasScrollControls=!1;watchScrollControls(){this.hasScrollControls?this.handleScroll():this.hideControlStart=this.hideControlEnd=!0}hideControlEnd=!0;hideEndBtn(){this.endBtn&&this.activateBtn(this.endBtn,!this.hideControlEnd)}hideControlStart=!0;hideStartBtn(){this.startBtn&&this.activateBtn(this.startBtn,!this.hideControlStart)}activateBtn(t,i=!0){if(!i)return t.tabIndex=-1,t.disabled=!0,void t.classList.remove("is-shown");t.removeAttribute("tabindex"),t.disabled=!1,t.classList.add("is-shown")}get allActiveItems(){return this.allItems.filter((t=>!t.disabled||t.classList.contains("disabled")))}get allItems(){return s(this.host,"*","slot")}get activeItem(){return this._activeItem}set activeItem(t){t&&t!==this.activeItem&&!t.disabled&&this.allActiveItems.includes(t)&&(this._activeItem=t,this.allActiveItems.forEach(((t,i)=>{t===this._activeItem?this.activeHandler(t,i):this.inactiveHandler(t,i)})),this.recalculatePositions())}_activeItem;get navDim(){if(!this.nav)return 0;const t=getComputedStyle(this.nav);let i=this.nav[this.clientDimensionProp];return"horizontal"===this.orientation?i-(parseFloat(t.paddingLeft)+parseFloat(t.paddingRight)):i-(parseFloat(t.paddingTop)+parseFloat(t.paddingBottom))}scrollToActiveItem(){this.nav&&this.activeItem&&this.hasScrollControls&&r(this.activeItem,this.nav,this.orientation,"center")}syncActiveItemIndicator(){if(!this.activeItem||!this.showIndicator)return;const t=this.activeItem,i=t.clientWidth||0,a=t.clientHeight+2||0,o=e(t,this.itemContainer);if(!this.activeIndicator)return;const s=o.top,n=o.left;switch(this.instantReCalc&&(this.activeIndicator.style.transition="none"),this.orientation){case"horizontal":this.activeIndicator.style.width=`${i}px`,this.activeIndicator.style.height=null,this.activeIndicator.style.transform=`translateX(${n}px)`;break;case"vertical":this.activeIndicator.style.width=null,this.activeIndicator.style.height=`${a}px`,this.activeIndicator.style.transform=`translateY(${s}px)`}setTimeout((()=>this.activeIndicator.style.transition=null),400)}updateScrollControls=()=>{this.nav&&(this.hasScrollControls=this.nav[this.scrollProp]>this.nav[this.clientDimensionProp]&&this.nav[this.scrollProp]>=this.itemContainer[this.clientDimensionProp],this.handleScroll())};handleScroll=()=>{if(!this.hasScrollControls)return void(this.hideControlStart=this.hideControlEnd=!0);const t=this.isRtl?0===this.nav[this.scrollOffset]:Math.abs(this.nav[this.clientDimensionProp]-(this.nav[this.scrollProp]-this.nav[this.scrollOffset]))<2;(this.isRtl?Math.abs(this.nav[this.scrollProp]+this.nav[this.scrollOffset]-this.nav[this.clientDimensionProp])<2:0===this.nav[this.scrollOffset])?(this.hideControlStart=!0,this.hideControlEnd=!1):t?(this.hideControlStart=!1,this.hideControlEnd=!0):(this.hideControlEnd=!1,this.hideControlStart=!1)};handleBtnClick=(t=!1)=>{const i=this.navDim;let a;a=t?this.nav[this.scrollOffset]+i-20:this.nav[this.scrollOffset]-i+20;try{this.nav.scroll({left:"horizontal"===this.orientation?a:0,top:"vertical"===this.orientation?a:0,behavior:"smooth"})}catch(t){this.nav[this.scrollOffset]=a}};slotChangeHandler=()=>{if(this.allActiveItems.length<2)return;const t=this.allActiveItems.find(((t,i)=>this.isActiveHandler(t,i)));t&&(this.activeItem=t),this.recalculatePositions(),this.showIndicator&&this.allActiveItems.forEach((t=>{if(this.mutationObservers.get(t))return;const i=new MutationObserver((()=>this.syncActiveItemIndicator()));i.observe(t,{characterData:!0,childList:!0,subtree:!0}),this.mutationObservers.set(t,i)}))};handleClick=t=>{if(this.allActiveItems.length<2)return;const i=t.composedPath().find((t=>this.allActiveItems.includes(t)));i&&(this.activeItem=i)};handleKeyDown=t=>{if(["Enter"," "].includes(t.key)){const i=t.composedPath().find((t=>this.allActiveItems.includes(t)));i&&(this.activeItem=i)}};recalculatePositions=()=>{this.updateScrollControls(),this.syncActiveItemIndicator(),this.scrollToActiveItem()};connectedCallback(){this.instantReCalc=!0,this.isRtl="horizontal"===this.orientation&&!!this.host.closest('[dir="rtl"]'),window.MutationObserver&&this.slotChangeHandler(),window.ResizeObserver&&(this.ro&&(this.ro.disconnect(),this.ro=void 0),(this.ro=new ResizeObserver(this.recalculatePositions)).observe(this.host))}componentWillLoad(){this.watchHideScrollbars()}componentDidLoad(){this.activeItem=this.allActiveItems.find(((t,i)=>this.isActiveHandler(t,i))),requestAnimationFrame((()=>this.instantReCalc=!1))}disconnectedCallback(){this.ro&&(this.ro.disconnect(),this.ro=void 0)}render(){return o(a,{key:"f09154c9daef9d42d1ac6bf1ae1cab43b25fc759",dir:this.isRtl?"rtl":null,class:"nano-masked-overflow","has-scroll-controls":this.hasScrollControls},o("div",{key:"c08a301b623b69a8a8936e846fb4d61c3d7a5d42",part:"base",class:{onav:!0,[`onav--${this.orientation}`]:!0,"onav--has-scroll-controls":this.hasScrollControls,"onav--has-scroll-controls-start":!this.hideControlStart,"onav--has-scroll-controls-end":!this.hideControlEnd,"onav--no-transitions":this.instantReCalc,"onnav--has-indicator":this.showIndicator,"onnav--hide-scrollbars":this.hideScrollbars&&"false"!==this.hideScrollbars},onClick:this.handleClick,onKeyDown:this.handleKeyDown},o("div",{key:"4430bfab6920f77fe64885eb12c7a1f2ebfdbf31",class:"onav__nav"},this.scrollControls&&o("nano-icon-button",{key:"800ac8de65485ebaa4060c26a7f0b3432348c8d1",part:"scroll-button scroll-button-prev",class:{"onav__scroll-button":!0,"onav__scroll-button--start":!0},ref:t=>this.startBtn=t,onClick:()=>this.handleBtnClick(!1),label:"Click to scroll",iconName:"horizontal"===this.orientation?"light/chevron-left":"light/chevron-up"}),o("div",{key:"48fff7814d1c8a864ca9f29c0b4bc2196c7b4a98",part:"scroller",ref:t=>this.nav=t,class:"onav__scroller",onScroll:this.handleScroll,tabindex:this.hasScrollControls?0:void 0,role:"region","aria-label":this.label||void 0},o("div",{key:"376a6e0007b1e9e35d3226e6575d0ca840b1f75a",part:"items",ref:t=>this.itemContainer=t,class:"onav__items"},this.showIndicator&&o("div",{key:"c0b933b6b29071de0f5b3d3b97497de231b45801",part:"indicator",ref:t=>this.activeIndicator=t,class:"onav__active-indicator"}),o("slot",{key:"2bff315c99ce804c26240ef5e134c1f08fed0547",onSlotchange:this.slotChangeHandler}))),this.scrollControls&&o("nano-icon-button",{key:"d568e4adaf25dbf10127e433220fa6900298e31f",part:"scroll-button scroll-button-next",class:{"onav__scroll-button":!0,"onav__scroll-button--end":!0},ref:t=>this.endBtn=t,onClick:()=>this.handleBtnClick(!0),label:"Click to scroll",iconName:"horizontal"===this.orientation?"light/chevron-right":"light/chevron-down"}))))}static get watchers(){return{hideScrollbars:["watchHideScrollbars"],isActiveHandler:["watchIsActiveHandler"],hasScrollControls:["watchScrollControls"],hideControlEnd:["hideEndBtn"],hideControlStart:["hideStartBtn"]}}};l.style=':host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--indicator-transition:var(--nano-transition-fast);--indicator-color:var(--nano-color-primary-1000);--indicator-size:3px;--indicator-track-color:var(--nano-color-neutral-300);--indicator-track-size:var(--indicator-size);--scroll-btn-color:var(--nano-color-primary-1200);--scroll-btn-size:1rem;--fade-size:100px;position:relative;z-index:var(--nano-z-index-raised)}:host([orientation=horizontal]){display:block}:host([orientation=vertical]){display:flex}.onav--no-transitions *{transition-duration:0s !important}.onav__nav:has(.onav__scroller:focus-visible){outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.onav__scroller{scrollbar-width:thin;overflow:auto;display:flex;transition:var(--nano-transition-fast) ease}.onav__scroller:focus{outline:none}.onnav--hide-scrollbars .onav__scroller{scrollbar-width:none;-ms-overflow-style:none}.onnav--hide-scrollbars .onav__scroller::-webkit-scrollbar{inline-size:0;block-size:0}.onav__items{flex:1 1 auto;position:relative;inline-size:auto;flex-wrap:nowrap;display:flex}.onnav--has-indicator .onav__items::before{content:"";background:var(--indicator-track-color);display:block;position:absolute;z-index:1}.onav__active-indicator{position:absolute;z-index:10;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease, var(--indicator-transition) height ease}.nano-icon-button.onav__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;border:unset;z-index:2;transition:var(--nano-transition-fast) ease opacity;opacity:0;color:var(--scroll-btn-color);font-size:var(--scroll-btn-size);pointer-events:none}.nano-icon-button.onav__scroll-button.is-shown{opacity:1;pointer-events:all}.onav--horizontal.onav--has-scroll-controls .onav__scroller{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%);mask-image:linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%)}.onav--horizontal.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--horizontal.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:calc(var(--fade-size) * -2) 0;mask-position:calc(var(--fade-size) * -2) 0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--horizontal.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100%;mask-size:100%}.onav--horizontal .onav__items{flex-direction:row}.onav--horizontal .onav__items::before{inline-size:100%;block-size:var(--indicator-track-size);inset-block-end:0}.onav--horizontal .onav__active-indicator{inset-block-end:0;border-block-end:solid var(--indicator-size) var(--indicator-color)}.onav--horizontal .onav__scroll-button{inset-block:0}.onav--horizontal .onav__scroll-button--start{inset-inline-start:0}.onav--horizontal .onav__scroll-button--end{inset-inline-end:0}.onav--vertical{--fade-size:70px;inline-size:100%;display:flex}.onav--vertical .onav__nav{max-block-size:100%;min-inline-size:100%;display:flex}.onav--vertical .onav__scroller{inline-size:100%;flex-direction:column}.onav--vertical.onav--has-scroll-controls .onav__scroller{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%);mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%)}.onav--vertical.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% calc(100% + var(--fade-size) * 2);mask-size:100% calc(100% + var(--fade-size) * 2)}.onav--vertical.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:0 calc(var(--fade-size) * -2);mask-position:0 calc(var(--fade-size) * -2);-webkit-mask-size:100% calc(100% + var(--fade-size) * 2);mask-size:100% calc(100% + var(--fade-size) * 2)}.onav--vertical.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% 100%;mask-size:100% 100%}.onav--vertical .onav__items{flex-direction:column;inline-size:fit-content}.onav--vertical .onav__items::before{block-size:100%;inline-size:var(--indicator-track-size);inset-inline-start:0}.onav--vertical .onav__active-indicator{inset-inline-start:0;border-inline-start:solid var(--indicator-size) var(--indicator-color)}.onav--vertical .onav__scroll-button{inset-inline:0}.onav--vertical .onav__scroll-button--start{inset-block-start:0}.onav--vertical .onav__scroll-button--end{inset-block-end:0}';export{l as nano_masked_overflow}

package/dist/nano-components/nano-menu-drawer.entry.js

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{r as o,g as n,d as e,a as t}from"./index-BM3Om9WE.js";import{c as a}from"./dom-dlicJTEJ.js";import{t as i,h as s}from"./renderer-DasB4P10.js";import{H as r}from"./slot-CFTP7C_Z.js";const l=class{constructor(n){o(this,n)}containerDiv;contentDiv;globalNav;children=[];ro;slotCtrl=new r(this,"foot");get el(){return n(this)}reset=!1;isLoading=!0;hide=!1;secondaryOpen=!1;open=!0;hideWidth=576;cancelNavItemEvents(o){o.detail.secondaryMenu&&(o.stopPropagation(),this.secondaryOpen="nanoOpen"===o.type)}openChange(){if(localStorage.setItem("nanoMenuDrawerOpen",this.open.toString()),this.containerDiv){const o=document.documentElement.clientWidth,n=Math.abs(window.innerWidth-o);if(this.open){const o=this.contentDiv.scrollWidth;e((()=>{this.containerDiv.style.width=o+"px",this.containerDiv.style.setProperty("--menu-width",o+"px"),this.containerDiv.style.setProperty("--scrollbar-width",n+"px")}))}else e((()=>{this.containerDiv.style.width=null,this.containerDiv.style.removeProperty("--menu-width"),this.containerDiv.style.setProperty("--scrollbar-width",n+"px")}))}}moveItemsToGlobalNav(){const o=this.el.querySelectorAll(i("nano-nav-item"));this.hide=!0,this.globalNav.triggerResize(),o.forEach((o=>{this.children.push({slot:o.getAttribute("slot"),element:o}),o.setAttribute("slot","menu"),o.classList.add("nano-global-nav-menu"),this.globalNav.appendChild(o)}))}moveItemsToDrawer(){this.children&&this.children.length&&(this.children.forEach((o=>{o.element.removeAttribute("slot"),o.element.classList.remove("nano-global-nav-menu"),o.slot&&o.slot.length&&o.element.setAttribute("slot",o.slot),this.el.appendChild(o.element)})),this.children=[],this.hide=!1)}onResize=()=>{if(!this.globalNav)return;const{width:o}=this.globalNav.getBoundingClientRect();o>this.hideWidth?this.moveItemsToDrawer():this.moveItemsToGlobalNav()};toggle=o=>{o.preventDefault(),this.open=!this.open};attachRO(){this.ro||(this.ro=new ResizeObserver((()=>{this.onResize()})),this.ro.observe(this.globalNav))}componentWillLoad(){this.globalNav=a(i("nano-global-nav"),this.el),this.globalNav||console.warn("nano-menu-drawer: no nano-global-nav found in the document. nano-global-nav is required to use nano-menu-drawer.");{const o=localStorage.getItem("nanoMenuDrawerOpen");this.open=o?"true"===o:this.open,this.globalNav.componentOnReady().then((()=>{this.openChange()}))}}connectedCallback(){this.onResize()}componentDidLoad(){this.attachRO()}disconnectedCallback(){this.ro?.disconnect(),this.ro=void 0}render(){return s(t,{key:"48267091ca0646f3a1717e2dc3ab21ab3d4b9b28",class:{open:this.open,"secondary-open":this.secondaryOpen,hide:this.hide,loading:this.isLoading,"has-global-nav":!!this.globalNav,"nano-menu-drawer":!0},dir:"rtl"===this.el.ownerDocument.dir?"rtl":null},s("div",{key:"f73a9c15c9760493b38ac5b199f2d374eb99ffd0",ref:o=>this.containerDiv=o,class:"container"},s("div",{key:"a2a254a08025a5d4f33ecd10fb25ee2bedddc657",class:"content-wrap "+(this.secondaryOpen?"secondary-open":"")},s("nav",{key:"4c93989684795be81b332aa12638424493eda51f",ref:o=>this.contentDiv=o,class:"content"},s("div",{key:"fb7fdba72b7e211dd99020b9a78dde35c11f0c7e",class:"head"},s("button",{key:"1829973a4d5bb9c4053bd5a5b8d7d24befc02599",onClick:this.toggle,class:"collapse-btn"},s("nano-icon",{key:"614bca81c5086ed499a62d38540f6c107f5c779e",name:"light/arrow-right-to-line"}),s("span",{key:"da6cbb5a0c0f0a908afac83b01322bc5bfede0b5",class:"visually-hidden"},"collapse / expand menu"))),s("slot",{key:"d3ddb04ad19784a71575ff50c2cbd4410b70dcb6"}),this.slotCtrl.has("foot")&&s("div",{key:"5282ecb332f91aaedf7996f1a86165656187f12a",class:"foot"},s("slot",{key:"c0c227384d0ec749a03c1fdfe5764923f08c2405",name:"foot"}))))))}static get watchers(){return{open:["openChange"]}}};l.style=':host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--padding-top:13px;--padding-end:13px;--padding-bottom:13px;--padding-start:13px;--icon-size:19px;--font-size:var(--nano-font-size-xs);--bg-color:var(--nano-color-surface-50);--bg-color-hover:var(--nano-color-neutral-75);--bg-color-selected:var(--nano-color-neutral-300);--bg-color-open:var(--nano-color-neutral-300);--content-color:var(--nano-color-neutral-1400);--divider-color:var(--nano-color-neutral-300);--global-nav-height:76px;--menu-width:calc((var(--padding-end) + var(--padding-start)) + var(--icon-size));color-scheme:dark;display:block;z-index:1;background:var(--bg-color);color:var(--content-color);min-block-size:100%}:host(.hide){display:none}.head{border-block-end:var(--divider-color) 1px solid}.container{inset-inline-end:auto;color:var(--content-color);inline-size:var(--menu-width);transition:inline-size 0.3s ease;inset-block-start:var(--global-nav-height);position:sticky;display:flex;flex-direction:column;block-size:100%;max-block-size:calc(100vh - var(--global-nav-height))}:host(.open) .container{inline-size:auto}.content-wrap{inset-inline-start:0;inset-block-start:0;inline-size:inherit;background:var(--bg-color);font-size:var(--font-size);line-height:1;display:flex;flex-direction:column;align-items:stretch;flex:1;box-shadow:var(--nano-shadow-ls)}.content-wrap.secondary-open{box-shadow:none}.content-wrap::after{content:"";position:absolute;inset:calc(var(--global-nav-height) * -1) 0 0;background-color:var(--bg-color);z-index:-1}.content{inline-size:auto;display:flex;flex-direction:column;overflow:hidden visible;flex:1}.collapse-btn{all:unset;padding-block:6px;margin-block-start:5px;padding-inline:var(--padding-start) var(--padding-end);inline-size:100%;display:flex;justify-items:flex-start;appearance:none;cursor:pointer;font-size:var(--icon-size)}.collapse-btn:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.collapse-btn:hover{background-color:var(--bg-color-hover)}.collapse-btn:active{background-color:var(--bg-color-selected)}.collapse-btn .nano-icon{transition:var(--nano-transition-x-fast) rotate ease-in-out;rotate:0deg}:host(.open) .collapse-btn .nano-icon{rotate:180deg}.visually-hidden{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.foot{margin-block:auto var(--padding-bottom)}';export{l as nano_menu_drawer}
+import{r as o,g as n,d as e,a as t}from"./index-BM3Om9WE.js";import{c as a}from"./dom-dlicJTEJ.js";import{t as i,h as s}from"./renderer-DpNDfhNy.js";import{H as r}from"./slot-D31cEKyt.js";const l=class{constructor(n){o(this,n)}containerDiv;contentDiv;globalNav;children=[];ro;slotCtrl=new r(this,"foot");get el(){return n(this)}reset=!1;isLoading=!0;hide=!1;secondaryOpen=!1;open=!0;hideWidth=576;cancelNavItemEvents(o){o.detail.secondaryMenu&&(o.stopPropagation(),this.secondaryOpen="nanoOpen"===o.type)}openChange(){if(localStorage.setItem("nanoMenuDrawerOpen",this.open.toString()),this.containerDiv){const o=document.documentElement.clientWidth,n=Math.abs(window.innerWidth-o);if(this.open){const o=this.contentDiv.scrollWidth;e((()=>{this.containerDiv.style.width=o+"px",this.containerDiv.style.setProperty("--menu-width",o+"px"),this.containerDiv.style.setProperty("--scrollbar-width",n+"px")}))}else e((()=>{this.containerDiv.style.width=null,this.containerDiv.style.removeProperty("--menu-width"),this.containerDiv.style.setProperty("--scrollbar-width",n+"px")}))}}moveItemsToGlobalNav(){const o=this.el.querySelectorAll(i("nano-nav-item"));this.hide=!0,this.globalNav.triggerResize(),o.forEach((o=>{this.children.push({slot:o.getAttribute("slot"),element:o}),o.setAttribute("slot","menu"),o.classList.add("nano-global-nav-menu"),this.globalNav.appendChild(o)}))}moveItemsToDrawer(){this.children&&this.children.length&&(this.children.forEach((o=>{o.element.removeAttribute("slot"),o.element.classList.remove("nano-global-nav-menu"),o.slot&&o.slot.length&&o.element.setAttribute("slot",o.slot),this.el.appendChild(o.element)})),this.children=[],this.hide=!1)}onResize=()=>{if(!this.globalNav)return;const{width:o}=this.globalNav.getBoundingClientRect();o>this.hideWidth?this.moveItemsToDrawer():this.moveItemsToGlobalNav()};toggle=o=>{o.preventDefault(),this.open=!this.open};attachRO(){this.ro||(this.ro=new ResizeObserver((()=>{this.onResize()})),this.ro.observe(this.globalNav))}componentWillLoad(){this.globalNav=a(i("nano-global-nav"),this.el),this.globalNav||console.warn("nano-menu-drawer: no nano-global-nav found in the document. nano-global-nav is required to use nano-menu-drawer.");{const o=localStorage.getItem("nanoMenuDrawerOpen");this.open=o?"true"===o:this.open,this.globalNav.componentOnReady().then((()=>{this.openChange()}))}}connectedCallback(){this.onResize()}componentDidLoad(){this.attachRO()}disconnectedCallback(){this.ro?.disconnect(),this.ro=void 0}render(){return s(t,{key:"bed821db8e5a30f26c3c9bad45b01321bdf4ca77",class:{open:this.open,"secondary-open":this.secondaryOpen,hide:this.hide,loading:this.isLoading,"has-global-nav":!!this.globalNav,"nano-menu-drawer":!0},dir:"rtl"===this.el.ownerDocument.dir?"rtl":null},s("div",{key:"e80fe18a73873359fc1d86ca93a06b8c6d3173c1",ref:o=>this.containerDiv=o,class:"container"},s("div",{key:"fe83b1858bacd94f3e0540ee3933d1018f7bfb9d",class:"content-wrap "+(this.secondaryOpen?"secondary-open":"")},s("nav",{key:"bed3b6c253cf16f8a796393be71c2c1b9aebd266",ref:o=>this.contentDiv=o,class:"content"},s("div",{key:"a8ea363c51345c83fcbf8723a32627bd99c5a9cf",class:"head"},s("button",{key:"fa9765354704685582e64771ded73c30c88e0374",onClick:this.toggle,class:"collapse-btn"},s("nano-icon",{key:"0489c46c0c76a72720daf6656e26c2946433bccc",name:"light/arrow-right-to-line"}),s("span",{key:"81b00aaf09a528d6137351df20e23149a5325bf0",class:"visually-hidden"},"collapse / expand menu"))),s("slot",{key:"ab5f6ed3b81b2d5f741a1d102a12db5b0f68bae7"}),this.slotCtrl.has("foot")&&s("div",{key:"dbb8345173ee78b9685cc46c6dcde5c2d617a868",class:"foot"},s("slot",{key:"93bfeb1493a1d5e9a420803a09e64dced877591b",name:"foot"}))))))}static get watchers(){return{open:["openChange"]}}};l.style=':host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--padding-top:13px;--padding-end:13px;--padding-bottom:13px;--padding-start:13px;--icon-size:19px;--font-size:var(--nano-font-size-xs);--bg-color:var(--nano-color-surface-50);--bg-color-hover:var(--nano-color-neutral-75);--bg-color-selected:var(--nano-color-neutral-300);--bg-color-open:var(--nano-color-neutral-300);--content-color:var(--nano-color-neutral-1400);--divider-color:var(--nano-color-neutral-300);--global-nav-height:76px;--menu-width:calc((var(--padding-end) + var(--padding-start)) + var(--icon-size));color-scheme:dark;display:block;z-index:1;background:var(--bg-color);color:var(--content-color);min-block-size:100%}:host(.hide){display:none}.head{border-block-end:var(--divider-color) 1px solid}.container{inset-inline-end:auto;color:var(--content-color);inline-size:var(--menu-width);transition:inline-size 0.3s ease;inset-block-start:var(--global-nav-height);position:sticky;display:flex;flex-direction:column;block-size:100%;max-block-size:calc(100vh - var(--global-nav-height))}:host(.open) .container{inline-size:auto}.content-wrap{inset-inline-start:0;inset-block-start:0;inline-size:inherit;background:var(--bg-color);font-size:var(--font-size);line-height:1;display:flex;flex-direction:column;align-items:stretch;flex:1;box-shadow:var(--nano-shadow-ls)}.content-wrap.secondary-open{box-shadow:none}.content-wrap::after{content:"";position:absolute;inset:calc(var(--global-nav-height) * -1) 0 0;background-color:var(--bg-color);z-index:-1}.content{inline-size:auto;display:flex;flex-direction:column;overflow:hidden visible;flex:1}.collapse-btn{all:unset;padding-block:6px;margin-block-start:5px;padding-inline:var(--padding-start) var(--padding-end);inline-size:100%;display:flex;justify-items:flex-start;appearance:none;cursor:pointer;font-size:var(--icon-size)}.collapse-btn:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.collapse-btn:hover{background-color:var(--bg-color-hover)}.collapse-btn:active{background-color:var(--bg-color-selected)}.collapse-btn .nano-icon{transition:var(--nano-transition-x-fast) rotate ease-in-out;rotate:0deg}:host(.open) .collapse-btn .nano-icon{rotate:180deg}.visually-hidden{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.foot{margin-block:auto var(--padding-bottom)}';export{l as nano_menu_drawer}

package/dist/nano-components/nano-more-less.entry.js

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{r as t,g as e,a as s}from"./index-BM3Om9WE.js";import{h as a}from"./renderer-DasB4P10.js";const n=class{constructor(e){t(this,e)}get host(){return e(this)}show=!1;childrenSelector;maxToShow=3;noHideBtn=!1;get children(){let t;return t=this.childrenSelector?this.host.querySelectorAll(this.childrenSelector):this.host.children,Array.from(t).filter((t=>!t.hasAttribute("slot")))}handleShowHideElements(){this.children.forEach(((t,e)=>{this.show?"none"===t.style.display&&(t.style.display=""):t.style.display=e>=this.maxToShow?"none":""}))}handleClick(t){this.show=!this.show}connectedCallback(){this.handleShowHideElements()}render(){return a(s,{key:"85aea064a37e2a66a31e8bab208eba423aa32a4e",class:"nano-more-less"},a("slot",{key:"c7288c755fa9cb24abb335158fe9ae1e116a012e",onSlotchange:()=>this.handleShowHideElements()}),this.children?.length>this.maxToShow&&[a("div",{key:"ff18caab62f14cdff9cc5953cda9d4980e6e4b6a",style:{display:this.show?"none":"contents"},class:"button-wrapper",part:"button-wrapper button-wrapper--less",onClick:t=>this.handleClick(t)},a("slot",{key:"8a7a856af8fca1221c308c2a0982e09b9c9da74f",name:"less"},a("button",{key:"33578129514a86169e642f32fb9a66d257412719",part:"button button--less"},"Show more (+",this.children.length-this.maxToShow,")"))),this.noHideBtn?"":a("div",{style:{display:this.show?"contents":"none"},class:"button-wrapper",part:"button-wrapper button-wrapper--more",onClick:t=>this.handleClick(t)},a("slot",{name:"more"},a("button",{part:"button button--more"},"Show less (-",this.children.length-this.maxToShow,")")))])}static get watchers(){return{maxToShow:["handleShowHideElements"],show:["handleShowHideElements"],childrenSelector:["handleShowHideElements"]}}};n.style=":host { display: contents; }";export{n as nano_more_less}
+import{r as t,g as e,a as s}from"./index-BM3Om9WE.js";import{h as n}from"./renderer-DpNDfhNy.js";const o=class{constructor(e){t(this,e)}get host(){return e(this)}show=!1;childrenSelector;maxToShow=3;noHideBtn=!1;get children(){let t;return t=this.childrenSelector?this.host.querySelectorAll(this.childrenSelector):this.host.children,Array.from(t).filter((t=>!t.hasAttribute("slot")))}handleShowHideElements(){this.children.forEach(((t,e)=>{this.show?"none"===t.style.display&&(t.style.display=""):t.style.display=e>=this.maxToShow?"none":""}))}handleClick(t){this.show=!this.show}connectedCallback(){this.handleShowHideElements()}render(){return n(s,{key:"b129148afdc959f912a16d1e2642c3e920a0a381",class:"nano-more-less"},n("slot",{key:"92aa96b6301d14f7b4d9aee9cc4cafbf0ff75431",onSlotchange:()=>this.handleShowHideElements()}),this.children?.length>this.maxToShow&&[n("div",{key:"73a5c457e8243cd8cf8e8ec1e681aa2c62244936",style:{display:this.show?"none":"contents"},class:"button-wrapper",part:"button-wrapper button-wrapper--less",onClick:t=>this.handleClick(t)},n("slot",{key:"48802275120ff78676a19b25f792806dd03db2c1",name:"less"},n("button",{key:"703d054e4560cf22d571a29838dfbd649062f7ca",part:"button button--less"},"Show more (+",this.children.length-this.maxToShow,")"))),this.noHideBtn?"":n("div",{style:{display:this.show?"contents":"none"},class:"button-wrapper",part:"button-wrapper button-wrapper--more",onClick:t=>this.handleClick(t)},n("slot",{name:"more"},n("button",{part:"button button--more"},"Show less (-",this.children.length-this.maxToShow,")")))])}static get watchers(){return{maxToShow:["handleShowHideElements"],show:["handleShowHideElements"],childrenSelector:["handleShowHideElements"]}}};o.style=":host { display: contents; }";export{o as nano_more_less}

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

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{r as t,c as e,g as a,a as n}from"./index-BM3Om9WE.js";import{g as s}from"./dom-dlicJTEJ.js";import{g as i}from"./tabbable-BgopY-vd.js";import{t as o,h as r}from"./renderer-DasB4P10.js";import{H as c}from"./slot-CFTP7C_Z.js";import{f as d}from"./active-element-CKJIkX0R.js";const h=(t,e)=>{const a={className:"",show:!0,showDisplay:"block",showProp:"classList",timeout:1e3,...e};return new Promise((e=>{const n=s=>{s.target!==t&&!s.composedPath().some((t=>t===s.target))||a.transitionProp&&!a.transitionProp.includes(s.propertyName)||(t.dataset.displayTransition="true",t.removeEventListener("transitionend",n),e("shown"))},s=n=>{n.target!==t&&!n.composedPath().some((t=>t===n.target))||a.transitionProp&&!a.transitionProp.includes(n.propertyName)||(t.style.display="none",t.dataset.displayTransition="false",t.removeEventListener("transitionend",s),e("hidden"))};a.show?(t.addEventListener("transitionend",n),t.style.display=a.showDisplay,setTimeout((()=>t[a.showProp].add(a.className)),50)):(t.addEventListener("transitionend",s),t[a.showProp].remove(a.className)),a.timeout&&setTimeout((()=>{a.show&&"true"!==t.dataset.displayTransition?(t.dataset.displayTransition="true",t.removeEventListener("transitionend",n),e("shown")):a.show||"false"===t.dataset.displayTransition||(t.style.display="none",t.dataset.displayTransition="false",t.removeEventListener("transitionend",s),e("hidden"))}),a.timeout)}))},l=class{constructor(a){t(this,a),this.nanoClose=e(this,"nanoClose",7),this.nanoOpen=e(this,"nanoOpen",7),this.nanoOpening=e(this,"nanoOpening",7),this.nanoClosing=e(this,"nanoClosing",7)}secondaryDiv;slotCtrl=new c(this,"secondary","close-button");controlElement;get host(){return a(this)}didOpen=!1;isInMenuDrawer=!1;href=null;target="_self";disabled=!1;open=!1;selected=!1;checkbox=!1;closeOnBlur=!0;nanoClose;nanoOpen;nanoOpening;nanoClosing;async setFocus(){this.controlElement&&this.controlElement.focus()}openChange(){this.slotCtrl.has("secondary")&&(this.open?this.openSecondary():this.closeSecondary())}didOpenChange(){if(!this.slotCtrl.has("secondary"))return;if(!this.didOpen)return d(this.host,this.controlElement)&&this.controlElement.focus({preventScroll:!0}),void this.nanoClose.emit({secondaryMenu:this.secondaryDiv});const t=new window.IntersectionObserver((e=>{e[0].boundingClientRect.top<0&&this.secondaryDiv.scrollIntoView({behavior:"smooth"}),t.disconnect()}),{threshold:1});t.observe(this.secondaryDiv),this.secondaryDiv.focus({preventScroll:!0});const e=i(this.secondaryDiv,!0);e[0]&&e[0].focus({preventScroll:!0}),this.nanoOpen.emit({secondaryMenu:this.secondaryDiv})}handleClose(t){this.didOpen&&this.slotCtrl.has("secondary")&&this.closeOnBlur&&(t.key&&"Escape"===t.key?this.closeSecondary():t.composedPath().some((t=>t===this.secondaryDiv))||this.closeSecondary())}closeSecondary=async()=>{this.slotCtrl.has("secondary")&&this.open&&(this.open=!1,await h(this.secondaryDiv,{className:"modal--open",showProp:"part",show:!1}),this.nanoClosing.emit({secondaryMenu:this.secondaryDiv}),this.didOpen=!1)};openSecondary=async()=>{this.slotCtrl.has("secondary")&&!this.open&&(this.open=!0,await h(this.secondaryDiv,{className:"modal--open",showProp:"part",show:!0}),this.nanoOpening.emit({secondaryMenu:this.secondaryDiv}),this.didOpen=!0)};toggleSecondary=()=>{this.slotCtrl.has("secondary")&&(this.didOpen?this.closeSecondary():this.openSecondary())};handleClick=()=>{this.disabled||(this.slotCtrl.has("secondary")?this.toggleSecondary():this.checkbox&&(this.selected=!this.selected))};handleDefaultSlotChange=()=>{const t=s(this.host,"a")[0];if(t){this.href=t.getAttribute("href");const e=document.createElement("span");t.childNodes.forEach((t=>{e.append(t)})),this.host.append(e),t.remove()}};async closeMenu(){this.closeSecondary()}async openMenu(){this.openSecondary()}connectedCallback(){this.handleDefaultSlotChange(),this.isInMenuDrawer=!!this.host.closest(o("nano-menu-drawer"))}componentDidLoad(){this.openChange()}render(){return r(n,{key:"b6ce27588c1ca2ac2a42d0aada06d7f554a1174a",class:{"nano-menu-drawer":this.isInMenuDrawer,"nano-nav-item":!0,disabled:this.disabled},role:this.host.closest('[role="menu"]')?"menuitem":void 0,"aria-disabled":this.disabled?"true":void 0},r("div",{key:"e8faa3568a13feb95ef131f0bd412577120fbf84",class:{navitem:!0,"navitem--open":this.open,"navitem--active":this.selected},part:"trigger-wrapper"},this.href&&!this.disabled&&r("a",{key:"4a4da7478db63015d0dcd81ed053146f8eeac5f3",part:"trigger trigger--anchor",target:this.target,ref:t=>this.controlElement=t,href:this.href,class:{navitem__trigger:!0}},r("slot",{key:"1eafb7864368850ad2539c402eb1b00877f3d55e",name:"icon-start"}),r("span",{key:"8953312d4dad64ced970d2f1120c07b6c36070f1",class:"navitem__label",part:"label"},r("slot",{key:"390f468f8d1f5d4f0669cae53ef140e452b16b07",onSlotchange:this.handleDefaultSlotChange})),r("slot",{key:"3ecd42c2ca6c1546f48a1a5fcf7742d90ad4e1c4",name:"icon-end"})),(!this.href||this.disabled)&&r("button",{key:"0694ce0708264ef1305e4b926a2f40f1875025a9",role:this.checkbox?"checkbox":void 0,"aria-checked":this.checkbox?this.selected.toString():void 0,part:"trigger trigger--button",ref:t=>this.controlElement=t,onClick:this.handleClick,disabled:this.disabled,class:{navitem__trigger:!0}},r("slot",{key:"c3cc4fcbb527f5f8ea2786243fe610d587e36190",name:"icon-start"}),r("span",{key:"385c92f1f2cc26b9c7e4f1a8601920c1f3bf2171",class:"navitem__label",part:"label"},r("slot",{key:"4e7a75c8903081856c20206aa309c2a9855991da",onSlotchange:this.handleDefaultSlotChange})),r("slot",{key:"668b95901ba0b914ccc193d4f3cc4433d908c014",name:"icon-end"})),this.slotCtrl.has("secondary")&&!this.disabled&&r("div",{key:"f81c9aeb6c903b25a662fd1fc615d6f95f6b8f4d",part:"modal",class:{navitem__modal:!0,"navitem__modal--open":this.didOpen},ref:t=>this.secondaryDiv=t,tabIndex:-1},r("div",{key:"70a4b002e989753c461c7dac4dd975200a92e3de",class:"navitem__modal-content",part:"modal-content "+(this.didOpen?"modal-content--open":"")},this.slotCtrl.has("close-button")&&r("div",{key:"7b0daad80ae03a29789c9d2bef74d2473f2f1f39",part:"close-button",onClick:this.closeSecondary},r("slot",{key:"858798062958ea0f4ee809cbf853bdb83dd4d184",name:"close-button"})),r("slot",{key:"41583a8cc59babbfb1a9a084a3de31c61a145fbc",name:"secondary"})),r("div",{key:"5c260dca9a8fdf7951349df64a037fc7415c3c4b",class:"navitem__modal-mask",onClick:this.closeSecondary,part:"modal-mask "+(this.didOpen?"modal-mask--open":"")}))))}static get watchers(){return{open:["openChange"],didOpen:["didOpenChange"]}}};l.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:contents}.navitem{background:inherit;color:inherit}a,button{all:unset;color:inherit;text-decoration:inherit;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:var(--padding);gap:var(--nano-spacing-md);inline-size:100%;box-sizing:border-box;background:inherit}a:hover,a:focus,a:active,button:hover,button:focus,button:active{color:inherit}a:focus-visible,button:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}a[disabled],button[disabled]{opacity:0.5;cursor:not-allowed}.navitem__label{margin-inline-end:auto}.navitem__modal{all:unset;display:none;position:absolute;color:initial;opacity:0;transition:var(--nano-transition-fast) ease}.navitem--open .navitem__modal{opacity:1}::slotted([slot=close-button]){all:unset}::slotted([slot=close-button]):focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}";export{l as nano_nav_item}
+import{r as t,c as e,g as a,a as n}from"./index-BM3Om9WE.js";import{g as i}from"./dom-dlicJTEJ.js";import{g as s}from"./tabbable-BgopY-vd.js";import{t as o,h as r}from"./renderer-DpNDfhNy.js";import{H as c}from"./slot-D31cEKyt.js";import{f as d}from"./active-element-CKJIkX0R.js";const h=(t,e)=>{const a={className:"",show:!0,showDisplay:"block",showProp:"classList",timeout:1e3,...e};return new Promise((e=>{const n=i=>{i.target!==t&&!i.composedPath().some((t=>t===i.target))||a.transitionProp&&!a.transitionProp.includes(i.propertyName)||(t.dataset.displayTransition="true",t.removeEventListener("transitionend",n),e("shown"))},i=n=>{n.target!==t&&!n.composedPath().some((t=>t===n.target))||a.transitionProp&&!a.transitionProp.includes(n.propertyName)||(t.style.display="none",t.dataset.displayTransition="false",t.removeEventListener("transitionend",i),e("hidden"))};a.show?(t.addEventListener("transitionend",n),t.style.display=a.showDisplay,setTimeout((()=>t[a.showProp].add(a.className)),50)):(t.addEventListener("transitionend",i),t[a.showProp].remove(a.className)),a.timeout&&setTimeout((()=>{a.show&&"true"!==t.dataset.displayTransition?(t.dataset.displayTransition="true",t.removeEventListener("transitionend",n),e("shown")):a.show||"false"===t.dataset.displayTransition||(t.style.display="none",t.dataset.displayTransition="false",t.removeEventListener("transitionend",i),e("hidden"))}),a.timeout)}))},l=class{constructor(a){t(this,a),this.nanoClose=e(this,"nanoClose",7),this.nanoOpen=e(this,"nanoOpen",7),this.nanoOpening=e(this,"nanoOpening",7),this.nanoClosing=e(this,"nanoClosing",7)}secondaryDiv;slotCtrl=new c(this,"secondary","close-button");controlElement;get host(){return a(this)}didOpen=!1;isInMenuDrawer=!1;href=null;target="_self";disabled=!1;open=!1;selected=!1;checkbox=!1;closeOnBlur=!0;nanoClose;nanoOpen;nanoOpening;nanoClosing;async setFocus(){this.controlElement&&this.controlElement.focus()}openChange(){this.slotCtrl.has("secondary")&&(this.open?this.openSecondary():this.closeSecondary())}didOpenChange(){if(!this.slotCtrl.has("secondary"))return;if(!this.didOpen)return d(this.host,this.controlElement)&&this.controlElement.focus({preventScroll:!0}),void this.nanoClose.emit({secondaryMenu:this.secondaryDiv});const t=new window.IntersectionObserver((e=>{e[0].boundingClientRect.top<0&&this.secondaryDiv.scrollIntoView({behavior:"smooth"}),t.disconnect()}),{threshold:1});t.observe(this.secondaryDiv),this.secondaryDiv.focus({preventScroll:!0});const e=s(this.secondaryDiv,!0);e[0]&&e[0].focus({preventScroll:!0}),this.nanoOpen.emit({secondaryMenu:this.secondaryDiv})}handleClose(t){this.didOpen&&this.slotCtrl.has("secondary")&&this.closeOnBlur&&(t.key&&"Escape"===t.key?this.closeSecondary():t.composedPath().some((t=>t===this.secondaryDiv))||this.closeSecondary())}closeSecondary=async()=>{this.slotCtrl.has("secondary")&&this.open&&(this.open=!1,await h(this.secondaryDiv,{className:"modal--open",showProp:"part",show:!1}),this.nanoClosing.emit({secondaryMenu:this.secondaryDiv}),this.didOpen=!1)};openSecondary=async()=>{this.slotCtrl.has("secondary")&&!this.open&&(this.open=!0,await h(this.secondaryDiv,{className:"modal--open",showProp:"part",show:!0}),this.nanoOpening.emit({secondaryMenu:this.secondaryDiv}),this.didOpen=!0)};toggleSecondary=()=>{this.slotCtrl.has("secondary")&&(this.didOpen?this.closeSecondary():this.openSecondary())};handleClick=()=>{this.disabled||(this.slotCtrl.has("secondary")?this.toggleSecondary():this.checkbox&&(this.selected=!this.selected))};handleDefaultSlotChange=()=>{const t=i(this.host,"a")[0];if(t){this.href=t.getAttribute("href");const e=document.createElement("span");t.childNodes.forEach((t=>{e.append(t)})),this.host.append(e),t.remove()}};async closeMenu(){this.closeSecondary()}async openMenu(){this.openSecondary()}connectedCallback(){this.handleDefaultSlotChange(),this.isInMenuDrawer=!!this.host.closest(o("nano-menu-drawer"))}componentDidLoad(){this.openChange()}render(){return r(n,{key:"b6ce27588c1ca2ac2a42d0aada06d7f554a1174a",class:{"nano-menu-drawer":this.isInMenuDrawer,"nano-nav-item":!0,disabled:this.disabled},role:this.host.closest('[role="menu"]')?"menuitem":void 0,"aria-disabled":this.disabled?"true":void 0},r("div",{key:"e8faa3568a13feb95ef131f0bd412577120fbf84",class:{navitem:!0,"navitem--open":this.open,"navitem--active":this.selected},part:"trigger-wrapper"},this.href&&!this.disabled&&r("a",{key:"4a4da7478db63015d0dcd81ed053146f8eeac5f3",part:"trigger trigger--anchor",target:this.target,ref:t=>this.controlElement=t,href:this.href,class:{navitem__trigger:!0}},r("slot",{key:"1eafb7864368850ad2539c402eb1b00877f3d55e",name:"icon-start"}),r("span",{key:"8953312d4dad64ced970d2f1120c07b6c36070f1",class:"navitem__label",part:"label"},r("slot",{key:"390f468f8d1f5d4f0669cae53ef140e452b16b07",onSlotchange:this.handleDefaultSlotChange})),r("slot",{key:"3ecd42c2ca6c1546f48a1a5fcf7742d90ad4e1c4",name:"icon-end"})),(!this.href||this.disabled)&&r("button",{key:"0694ce0708264ef1305e4b926a2f40f1875025a9",role:this.checkbox?"checkbox":void 0,"aria-checked":this.checkbox?this.selected.toString():void 0,part:"trigger trigger--button",ref:t=>this.controlElement=t,onClick:this.handleClick,disabled:this.disabled,class:{navitem__trigger:!0}},r("slot",{key:"c3cc4fcbb527f5f8ea2786243fe610d587e36190",name:"icon-start"}),r("span",{key:"385c92f1f2cc26b9c7e4f1a8601920c1f3bf2171",class:"navitem__label",part:"label"},r("slot",{key:"4e7a75c8903081856c20206aa309c2a9855991da",onSlotchange:this.handleDefaultSlotChange})),r("slot",{key:"668b95901ba0b914ccc193d4f3cc4433d908c014",name:"icon-end"})),this.slotCtrl.has("secondary")&&!this.disabled&&r("div",{key:"f81c9aeb6c903b25a662fd1fc615d6f95f6b8f4d",part:"modal",class:{navitem__modal:!0,"navitem__modal--open":this.didOpen},ref:t=>this.secondaryDiv=t,tabIndex:-1},r("div",{key:"70a4b002e989753c461c7dac4dd975200a92e3de",class:"navitem__modal-content",part:"modal-content "+(this.didOpen?"modal-content--open":"")},this.slotCtrl.has("close-button")&&r("div",{key:"7b0daad80ae03a29789c9d2bef74d2473f2f1f39",part:"close-button",onClick:this.closeSecondary},r("slot",{key:"858798062958ea0f4ee809cbf853bdb83dd4d184",name:"close-button"})),r("slot",{key:"41583a8cc59babbfb1a9a084a3de31c61a145fbc",name:"secondary"})),r("div",{key:"5c260dca9a8fdf7951349df64a037fc7415c3c4b",class:"navitem__modal-mask",onClick:this.closeSecondary,part:"modal-mask "+(this.didOpen?"modal-mask--open":"")}))))}static get watchers(){return{open:["openChange"],didOpen:["didOpenChange"]}}};l.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:contents}.navitem{background:inherit;color:inherit}a,button{all:unset;color:inherit;text-decoration:inherit;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:var(--padding);gap:var(--nano-spacing-md);inline-size:100%;box-sizing:border-box;background:inherit}a:hover,a:focus,a:active,button:hover,button:focus,button:active{color:inherit}a:focus-visible,button:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}a[disabled],button[disabled]{opacity:0.5;cursor:not-allowed}.navitem__label{margin-inline-end:auto}.navitem__modal{all:unset;display:none;position:absolute;color:initial;opacity:0;transition:var(--nano-transition-fast) ease}.navitem--open .navitem__modal{opacity:1}::slotted([slot=close-button]){all:unset}::slotted([slot=close-button]):focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}";export{l as nano_nav_item}

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

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{r as n,c as a,g as e,a as t}from"./index-BM3Om9WE.js";import{h as i}from"./renderer-DasB4P10.js";import{a as r}from"./math-BEqsTfVK.js";import{a as s}from"./throttle-C93FMm2Z.js";const o=class{constructor(e){n(this,e),this.nanoChange=a(this,"nanoChange",7),this.nanoStyle=a(this,"nanoStyle",7),this.nanoFocus=a(this,"nanoFocus",7),this.nanoBlur=a(this,"nanoBlur",7)}noUpdate=!1;rect;hasFocus=!1;rangeSlider;gesture;get el(){return e(this)}ratioA=0;ratioB=0;pressedKnob;debounce=0;debounceChanged(){this.nanoChange=s(this.nanoChange,this.debounce)}name="";required=!1;hideLabel=!1;_label="";get label(){return this.required&&!this._label.endsWith("*")?this._label+" *":this._label}set label(n){this._label=n}dualKnobs=!1;min=0;minChanged(){this.noUpdate||this.updateRatio()}max=100;maxChanged(){this.noUpdate||this.updateRatio()}tooltip=!0;snaps=!1;step=1;ticks=!1;disabled=!1;disabledChanged(){this.gesture&&this.gesture.enable(!this.disabled),this.emitStyle()}value=0;valueChanged(n){this.noUpdate||this.updateRatio(),n=this.ensureValueInBounds(n),this.nanoChange.emit({value:n})}clampBounds=n=>r(this.min,n,this.max);ensureValueInBounds=n=>this.dualKnobs?{lower:this.clampBounds(n.lower),upper:this.clampBounds(n.upper)}:this.clampBounds(n);nanoChange;nanoStyle;nanoFocus;nanoBlur;connectedCallback(){this.updateRatio(),this.debounceChanged(),this.disabledChanged()}disconnectedCallback(){this.gesture&&(this.gesture.destroy(),this.gesture=void 0)}async componentDidLoad(){const n=this.rangeSlider;n&&(this.gesture=(await import("./index-BQSuCPXH.js")).createGesture({el:n,gestureName:"range",gesturePriority:100,threshold:0,onStart:n=>this.onStart(n),onMove:n=>this.onMove(n),onEnd:n=>this.onEnd(n)}),this.gesture.enable(!this.disabled))}handleKeyboard=(n,a)=>{let e=this.step;e=e>0?e:1,e/=this.max-this.min,a||(e*=-1),"A"===n?this.ratioA=r(0,this.ratioA+e,1):this.ratioB=r(0,this.ratioB+e,1),this.updateValue()};getValue(){const n=this.value||0;return this.dualKnobs?"object"==typeof n?n:{lower:0,upper:n}:"object"==typeof n?n.upper:n}emitStyle(){this.nanoStyle.emit({interactive:!0,"interactive-disabled":this.disabled})}onStart(n){const a=this.rect=this.rangeSlider.getBoundingClientRect(),e=n.currentX;let t=r(0,(e-a.left)/a.width,1);"rtl"===document.dir&&(t=1-t),this.pressedKnob=!this.dualKnobs||Math.abs(this.ratioA-t)<Math.abs(this.ratioB-t)?"A":"B",this.setFocus(this.pressedKnob),this.update(e)}onMove(n){this.update(n.currentX)}onEnd(n){this.update(n.currentX),this.pressedKnob=void 0}update(n){const a=this.rect;let e=r(0,(n-a.left)/a.width,1);"rtl"===document.dir&&(e=1-e),this.snaps&&(e=c(h(e,this.min,this.max,this.step),this.min,this.max)),"A"===this.pressedKnob?this.ratioA=e:this.ratioB=e,this.updateValue()}get valA(){return h(this.ratioA,this.min,this.max,this.step)}get valB(){return h(this.ratioB,this.min,this.max,this.step)}get ratioLower(){return this.dualKnobs?Math.min(this.ratioA,this.ratioB):0}get ratioUpper(){return this.dualKnobs?Math.max(this.ratioA,this.ratioB):this.ratioA}updateRatio(){const n=this.getValue(),{min:a,max:e}=this;this.dualKnobs?(this.ratioA=c(n.lower,a,e),this.ratioB=c(n.upper,a,e)):this.ratioA=c(n,a,e)}updateValue(){this.noUpdate=!0;const{valA:n,valB:a}=this;this.value=this.dualKnobs?{lower:Math.min(n,a),upper:Math.max(n,a)}:n,this.noUpdate=!1}setFocus(n){const a=this.el.querySelector("A"===n?".range-knob-a":".range-knob-b");a&&a.focus()}onBlur=()=>{this.hasFocus&&(this.hasFocus=!1,this.nanoBlur.emit(),this.emitStyle())};onFocus=()=>{this.hasFocus||(this.hasFocus=!0,this.nanoFocus.emit(),this.emitStyle())};render(){const{min:n,max:a,step:e,handleKeyboard:r,pressedKnob:s,disabled:o,tooltip:h,ratioLower:g,ratioUpper:d}=this,b=100*g+"%",p=100-100*d+"%",u="rtl"===document.dir,m=u?"right":"left",v=u?"left":"right",k=n=>({[m]:n[m]}),f={[m]:b,[v]:p},w=[];if(this.snaps&&this.ticks)for(let t=n;t<=a;t+=e){const e=c(t,n,a),i={ratio:e,active:e>=g&&e<=d};i[m]=100*e+"%",w.push(i)}return i(t,{onFocusin:this.onFocus,onFocusout:this.onBlur,class:{"range-disabled":o,"range-pressed":void 0!==s,"range-has-pin":h,"range-snaps":this.snaps,"nano-range":!0}},i("label",{class:"range-label"+(this.hideLabel?" visually-hidden":""),part:"label",htmlFor:this.name},i("slot",{name:"label"},this.label)),i("input",{class:"range-input visually-hidden",name:this.name,id:this.name,disabled:this.disabled,required:this.required,value:JSON.stringify(this.getValue()),onFocus:()=>{this.setFocus(this.pressedKnob||"A")}}),i("div",{class:"range-wrap"},i("slot",{name:"start"}),i("div",{class:"range-slider",ref:n=>this.rangeSlider=n},w.map((n=>i("span",{style:k(n),role:"presentation",class:{"range-tick":!0,"range-tick-active":n.active},part:n.active?"tick-active":"tick"}))),i("div",{class:"range-bar",role:"presentation",part:"bar"}),i("div",{class:"range-bar range-bar-active",role:"presentation",style:f,part:"bar-active"}),l(u,{knob:"A",pressed:"A"===s,value:this.valA,ratio:this.ratioA,tooltip:h,disabled:o,handleKeyboard:r,min:n,max:a}),this.dualKnobs&&l(u,{knob:"B",pressed:"B"===s,value:this.valB,ratio:this.ratioB,tooltip:h,disabled:o,handleKeyboard:r,min:n,max:a})),i("slot",{name:"end"})))}static get watchers(){return{debounce:["debounceChanged"],min:["minChanged"],max:["maxChanged"],disabled:["disabledChanged"],value:["valueChanged"]}}},l=(n,{knob:a,value:e,ratio:t,min:r,max:s,disabled:o,pressed:l,tooltip:h,handleKeyboard:c})=>{const g=n?"right":"left";return i("div",{onKeyDown:n=>{const e=n.key;"ArrowLeft"===e||"ArrowDown"===e?(c(a,!1),n.preventDefault(),n.stopPropagation()):"ArrowRight"!==e&&"ArrowUp"!==e||(c(a,!0),n.preventDefault(),n.stopPropagation())},class:{"range-knob-handle":!0,"range-knob-a":"A"===a,"range-knob-b":"B"===a,"range-knob-pressed":l,"range-knob-min":e===r,"range-knob-max":e===s},style:(()=>{const n={};return n[g]=100*t+"%",n})(),role:"slider",tabindex:o?-1:0,"aria-valuemin":r,"aria-valuemax":s,"aria-disabled":o?"true":null,"aria-valuenow":e},h&&i("div",{class:"range-pin",role:"presentation",part:"pin"},Math.round(e)),i("div",{class:"range-knob",role:"presentation",part:"knob"}))},h=(n,a,e,t)=>{let i=(e-a)*n;return t>0&&(i=Math.round(i/t)*t+a),r(a,i,e)},c=(n,a,e)=>r(0,(n-a)/(e-a),1);o.style=".sc-nano-range-h,*.sc-nano-range,*.sc-nano-range::before,*.sc-nano-range::after{box-sizing:border-box}[hidden].sc-nano-range{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-range-h,*.sc-nano-range,*.sc-nano-range::before,*.sc-nano-range::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-range-h,*.sc-nano-range,*.sc-nano-range::before,*.sc-nano-range::after{box-sizing:border-box}[hidden].sc-nano-range{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-range-h,*.sc-nano-range,*.sc-nano-range::before,*.sc-nano-range::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-range-h{--inactive-color:var(--nano-color-neutral-800);--knob-color:var(--nano-color-primary-1200);--knob-active-color:var(--nano-color-primary-1400);--knob-width:1.75rem;--knob-height:1.25rem;--bar-height:.5em;--bar-background:var(--nano-color-neutral-300);--bar-background-active:var(--nano-color-primary-1000);--tooltip-background:var(--nano-color-base-0);--tooltip-color:var(--nano-color-neutral-1400)}.range-wrap.sc-nano-range{display:flex;position:relative;flex:3;align-items:center;-webkit-user-select:none;user-select:none}.range-wrap.sc-nano-range-s>ion-icon[slot],.range-wrap .sc-nano-range-s>ion-icon[slot]{font-size:1.5em}.range-wrap.sc-nano-range-s>[slot=start],.range-wrap .sc-nano-range-s>[slot=start]{margin-inline:0 calc(var(--knob-width) * 0.66);margin-block:0;font-size:0.9em}.range-wrap.sc-nano-range-s>[slot=end],.range-wrap .sc-nano-range-s>[slot=end]{margin-inline:calc(var(--knob-width) * 0.66) 0;margin-block:0;font-size:0.9em}.range-slider.sc-nano-range{position:relative;flex:1;inline-size:100%;block-size:var(--knob-height);contain:size layout style;cursor:grab;touch-action:pan-y}.range-pressed.sc-nano-range-h .range-slider.sc-nano-range{cursor:grabbing}.range-label.sc-nano-range{inline-size:100%;overflow:clip;white-space:nowrap;text-overflow:ellipsis;color:var(--nano-color-base-1000);font-size:var(--nano-font-size-xs);padding-block-end:var(--nano-spacing-sm);line-height:1;display:flex;align-items:center}.visually-hidden.sc-nano-range{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.range-bar.sc-nano-range{inset-block-start:calc((var(--knob-height) - var(--bar-height)) / 2);inset-inline-start:0;position:absolute;inline-size:100%;block-size:var(--bar-height);background:var(--bar-background);pointer-events:none}.range-bar-active.sc-nano-range{inset-block-end:0;inline-size:auto;background:var(--bar-background-active)}.range-knob.sc-nano-range{border-radius:var(--nano-border-radius-pill);position:absolute;inline-size:var(--knob-width);block-size:var(--knob-height);background:var(--knob-color);z-index:2;pointer-events:none;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%}.sc-nano-range-h:not(.range-has-pin) .range-knob-pressed.sc-nano-range .range-knob.sc-nano-range{background:var(--knob-active-color)}.range-knob-handle.sc-nano-range{inset-block-start:50%;translate:0 -50%;inset-inline-start:0;margin-inline-start:calc(0px - var(--knob-width));position:absolute;inline-size:calc(var(--knob-width) * 2);block-size:calc(var(--knob-height) * 2);text-align:center}.range-knob-handle.sc-nano-range:focus{outline:none}.range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{outline:var(--nano-focus-ring)}.range-tick.sc-nano-range{position:absolute;inset-block-start:calc((var(--knob-height) - var(--bar-height)) / 2);inline-size:var(--bar-height);block-size:var(--bar-height);background:var(--inactive-color);z-index:1;pointer-events:none}.range-tick-active.sc-nano-range{background:transparent}.range-pin.sc-nano-range{transform:translate3d(0, 0, 0) scale(0.01);transform-origin:center top;padding:0.66em 0;text-align:center;box-sizing:border-box;display:inline-block;position:relative;min-inline-size:2.33em;block-size:2.33em;transition:transform 120ms ease, background 120ms ease;background:var(--tooltip-background);color:var(--tooltip-color);font-size:0.75em;box-shadow:var(--nano-shadow-l1)}.range-knob-pressed.sc-nano-range .range-pin.sc-nano-range{transform:translate3d(0, -100%, 0) scale(1)}.range-disabled.sc-nano-range-h{pointer-events:none}.range-disabled.sc-nano-range-h .range-bar-active.sc-nano-range,.range-disabled.sc-nano-range-h .range-bar.sc-nano-range,.range-disabled.sc-nano-range-h .range-tick.sc-nano-range{background-color:var(--inactive-color)}.range-disabled.sc-nano-range-h .range-knob.sc-nano-range{transform:scale(0.55);outline:5px solid #fff;background-color:var(--inactive-color)}";export{o as nano_range}
+import{r as n,c as a,g as e,a as t}from"./index-BM3Om9WE.js";import{h as i}from"./renderer-DpNDfhNy.js";import{a as r}from"./math-BEqsTfVK.js";import{a as s}from"./throttle-C93FMm2Z.js";const o=class{constructor(e){n(this,e),this.nanoChange=a(this,"nanoChange",7),this.nanoStyle=a(this,"nanoStyle",7),this.nanoFocus=a(this,"nanoFocus",7),this.nanoBlur=a(this,"nanoBlur",7)}noUpdate=!1;rect;hasFocus=!1;rangeSlider;gesture;get el(){return e(this)}ratioA=0;ratioB=0;pressedKnob;debounce=0;debounceChanged(){this.nanoChange=s(this.nanoChange,this.debounce)}name="";required=!1;hideLabel=!1;_label="";get label(){return this.required&&!this._label.endsWith("*")?this._label+" *":this._label}set label(n){this._label=n}dualKnobs=!1;min=0;minChanged(){this.noUpdate||this.updateRatio()}max=100;maxChanged(){this.noUpdate||this.updateRatio()}tooltip=!0;snaps=!1;step=1;ticks=!1;disabled=!1;disabledChanged(){this.gesture&&this.gesture.enable(!this.disabled),this.emitStyle()}value=0;valueChanged(n){this.noUpdate||this.updateRatio(),n=this.ensureValueInBounds(n),this.nanoChange.emit({value:n})}clampBounds=n=>r(this.min,n,this.max);ensureValueInBounds=n=>this.dualKnobs?{lower:this.clampBounds(n.lower),upper:this.clampBounds(n.upper)}:this.clampBounds(n);nanoChange;nanoStyle;nanoFocus;nanoBlur;connectedCallback(){this.updateRatio(),this.debounceChanged(),this.disabledChanged()}disconnectedCallback(){this.gesture&&(this.gesture.destroy(),this.gesture=void 0)}async componentDidLoad(){const n=this.rangeSlider;n&&(this.gesture=(await import("./index-BQSuCPXH.js")).createGesture({el:n,gestureName:"range",gesturePriority:100,threshold:0,onStart:n=>this.onStart(n),onMove:n=>this.onMove(n),onEnd:n=>this.onEnd(n)}),this.gesture.enable(!this.disabled))}handleKeyboard=(n,a)=>{let e=this.step;e=e>0?e:1,e/=this.max-this.min,a||(e*=-1),"A"===n?this.ratioA=r(0,this.ratioA+e,1):this.ratioB=r(0,this.ratioB+e,1),this.updateValue()};getValue(){const n=this.value||0;return this.dualKnobs?"object"==typeof n?n:{lower:0,upper:n}:"object"==typeof n?n.upper:n}emitStyle(){this.nanoStyle.emit({interactive:!0,"interactive-disabled":this.disabled})}onStart(n){const a=this.rect=this.rangeSlider.getBoundingClientRect(),e=n.currentX;let t=r(0,(e-a.left)/a.width,1);"rtl"===document.dir&&(t=1-t),this.pressedKnob=!this.dualKnobs||Math.abs(this.ratioA-t)<Math.abs(this.ratioB-t)?"A":"B",this.setFocus(this.pressedKnob),this.update(e)}onMove(n){this.update(n.currentX)}onEnd(n){this.update(n.currentX),this.pressedKnob=void 0}update(n){const a=this.rect;let e=r(0,(n-a.left)/a.width,1);"rtl"===document.dir&&(e=1-e),this.snaps&&(e=c(h(e,this.min,this.max,this.step),this.min,this.max)),"A"===this.pressedKnob?this.ratioA=e:this.ratioB=e,this.updateValue()}get valA(){return h(this.ratioA,this.min,this.max,this.step)}get valB(){return h(this.ratioB,this.min,this.max,this.step)}get ratioLower(){return this.dualKnobs?Math.min(this.ratioA,this.ratioB):0}get ratioUpper(){return this.dualKnobs?Math.max(this.ratioA,this.ratioB):this.ratioA}updateRatio(){const n=this.getValue(),{min:a,max:e}=this;this.dualKnobs?(this.ratioA=c(n.lower,a,e),this.ratioB=c(n.upper,a,e)):this.ratioA=c(n,a,e)}updateValue(){this.noUpdate=!0;const{valA:n,valB:a}=this;this.value=this.dualKnobs?{lower:Math.min(n,a),upper:Math.max(n,a)}:n,this.noUpdate=!1}setFocus(n){const a=this.el.querySelector("A"===n?".range-knob-a":".range-knob-b");a&&a.focus()}onBlur=()=>{this.hasFocus&&(this.hasFocus=!1,this.nanoBlur.emit(),this.emitStyle())};onFocus=()=>{this.hasFocus||(this.hasFocus=!0,this.nanoFocus.emit(),this.emitStyle())};render(){const{min:n,max:a,step:e,handleKeyboard:r,pressedKnob:s,disabled:o,tooltip:h,ratioLower:g,ratioUpper:d}=this,b=100*g+"%",p=100-100*d+"%",u="rtl"===document.dir,m=u?"right":"left",v=u?"left":"right",k=n=>({[m]:n[m]}),f={[m]:b,[v]:p},w=[];if(this.snaps&&this.ticks)for(let t=n;t<=a;t+=e){const e=c(t,n,a),i={ratio:e,active:e>=g&&e<=d};i[m]=100*e+"%",w.push(i)}return i(t,{onFocusin:this.onFocus,onFocusout:this.onBlur,class:{"range-disabled":o,"range-pressed":void 0!==s,"range-has-pin":h,"range-snaps":this.snaps,"nano-range":!0}},i("label",{class:"range-label"+(this.hideLabel?" visually-hidden":""),part:"label",htmlFor:this.name},i("slot",{name:"label"},this.label)),i("input",{class:"range-input visually-hidden",name:this.name,id:this.name,disabled:this.disabled,required:this.required,value:JSON.stringify(this.getValue()),onFocus:()=>{this.setFocus(this.pressedKnob||"A")}}),i("div",{class:"range-wrap"},i("slot",{name:"start"}),i("div",{class:"range-slider",ref:n=>this.rangeSlider=n},w.map((n=>i("span",{style:k(n),role:"presentation",class:{"range-tick":!0,"range-tick-active":n.active},part:n.active?"tick-active":"tick"}))),i("div",{class:"range-bar",role:"presentation",part:"bar"}),i("div",{class:"range-bar range-bar-active",role:"presentation",style:f,part:"bar-active"}),l(u,{knob:"A",pressed:"A"===s,value:this.valA,ratio:this.ratioA,tooltip:h,disabled:o,handleKeyboard:r,min:n,max:a}),this.dualKnobs&&l(u,{knob:"B",pressed:"B"===s,value:this.valB,ratio:this.ratioB,tooltip:h,disabled:o,handleKeyboard:r,min:n,max:a})),i("slot",{name:"end"})))}static get watchers(){return{debounce:["debounceChanged"],min:["minChanged"],max:["maxChanged"],disabled:["disabledChanged"],value:["valueChanged"]}}},l=(n,{knob:a,value:e,ratio:t,min:r,max:s,disabled:o,pressed:l,tooltip:h,handleKeyboard:c})=>{const g=n?"right":"left";return i("div",{onKeyDown:n=>{const e=n.key;"ArrowLeft"===e||"ArrowDown"===e?(c(a,!1),n.preventDefault(),n.stopPropagation()):"ArrowRight"!==e&&"ArrowUp"!==e||(c(a,!0),n.preventDefault(),n.stopPropagation())},class:{"range-knob-handle":!0,"range-knob-a":"A"===a,"range-knob-b":"B"===a,"range-knob-pressed":l,"range-knob-min":e===r,"range-knob-max":e===s},style:(()=>{const n={};return n[g]=100*t+"%",n})(),role:"slider",tabindex:o?-1:0,"aria-valuemin":r,"aria-valuemax":s,"aria-disabled":o?"true":null,"aria-valuenow":e},h&&i("div",{class:"range-pin",role:"presentation",part:"pin"},Math.round(e)),i("div",{class:"range-knob",role:"presentation",part:"knob"}))},h=(n,a,e,t)=>{let i=(e-a)*n;return t>0&&(i=Math.round(i/t)*t+a),r(a,i,e)},c=(n,a,e)=>r(0,(n-a)/(e-a),1);o.style=".sc-nano-range-h,*.sc-nano-range,*.sc-nano-range::before,*.sc-nano-range::after{box-sizing:border-box}[hidden].sc-nano-range{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-range-h,*.sc-nano-range,*.sc-nano-range::before,*.sc-nano-range::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-range-h,*.sc-nano-range,*.sc-nano-range::before,*.sc-nano-range::after{box-sizing:border-box}[hidden].sc-nano-range{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-range-h,*.sc-nano-range,*.sc-nano-range::before,*.sc-nano-range::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-range-h{--inactive-color:var(--nano-color-neutral-800);--knob-color:var(--nano-color-primary-1200);--knob-active-color:var(--nano-color-primary-1400);--knob-width:1.75rem;--knob-height:1.25rem;--bar-height:.5em;--bar-background:var(--nano-color-neutral-300);--bar-background-active:var(--nano-color-primary-1000);--tooltip-background:var(--nano-color-base-0);--tooltip-color:var(--nano-color-neutral-1400)}.range-wrap.sc-nano-range{display:flex;position:relative;flex:3;align-items:center;-webkit-user-select:none;user-select:none}.range-wrap.sc-nano-range-s>ion-icon[slot],.range-wrap .sc-nano-range-s>ion-icon[slot]{font-size:1.5em}.range-wrap.sc-nano-range-s>[slot=start],.range-wrap .sc-nano-range-s>[slot=start]{margin-inline:0 calc(var(--knob-width) * 0.66);margin-block:0;font-size:0.9em}.range-wrap.sc-nano-range-s>[slot=end],.range-wrap .sc-nano-range-s>[slot=end]{margin-inline:calc(var(--knob-width) * 0.66) 0;margin-block:0;font-size:0.9em}.range-slider.sc-nano-range{position:relative;flex:1;inline-size:100%;block-size:var(--knob-height);contain:size layout style;cursor:grab;touch-action:pan-y}.range-pressed.sc-nano-range-h .range-slider.sc-nano-range{cursor:grabbing}.range-label.sc-nano-range{inline-size:100%;overflow:clip;white-space:nowrap;text-overflow:ellipsis;color:var(--nano-color-base-1000);font-size:var(--nano-font-size-xs);padding-block-end:var(--nano-spacing-sm);line-height:1;display:flex;align-items:center}.visually-hidden.sc-nano-range{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.range-bar.sc-nano-range{inset-block-start:calc((var(--knob-height) - var(--bar-height)) / 2);inset-inline-start:0;position:absolute;inline-size:100%;block-size:var(--bar-height);background:var(--bar-background);pointer-events:none}.range-bar-active.sc-nano-range{inset-block-end:0;inline-size:auto;background:var(--bar-background-active)}.range-knob.sc-nano-range{border-radius:var(--nano-border-radius-pill);position:absolute;inline-size:var(--knob-width);block-size:var(--knob-height);background:var(--knob-color);z-index:2;pointer-events:none;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%}.sc-nano-range-h:not(.range-has-pin) .range-knob-pressed.sc-nano-range .range-knob.sc-nano-range{background:var(--knob-active-color)}.range-knob-handle.sc-nano-range{inset-block-start:50%;translate:0 -50%;inset-inline-start:0;margin-inline-start:calc(0px - var(--knob-width));position:absolute;inline-size:calc(var(--knob-width) * 2);block-size:calc(var(--knob-height) * 2);text-align:center}.range-knob-handle.sc-nano-range:focus{outline:none}.range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{outline:var(--nano-focus-ring)}.range-tick.sc-nano-range{position:absolute;inset-block-start:calc((var(--knob-height) - var(--bar-height)) / 2);inline-size:var(--bar-height);block-size:var(--bar-height);background:var(--inactive-color);z-index:1;pointer-events:none}.range-tick-active.sc-nano-range{background:transparent}.range-pin.sc-nano-range{transform:translate3d(0, 0, 0) scale(0.01);transform-origin:center top;padding:0.66em 0;text-align:center;box-sizing:border-box;display:inline-block;position:relative;min-inline-size:2.33em;block-size:2.33em;transition:transform 120ms ease, background 120ms ease;background:var(--tooltip-background);color:var(--tooltip-color);font-size:0.75em;box-shadow:var(--nano-shadow-l1)}.range-knob-pressed.sc-nano-range .range-pin.sc-nano-range{transform:translate3d(0, -100%, 0) scale(1)}.range-disabled.sc-nano-range-h{pointer-events:none}.range-disabled.sc-nano-range-h .range-bar-active.sc-nano-range,.range-disabled.sc-nano-range-h .range-bar.sc-nano-range,.range-disabled.sc-nano-range-h .range-tick.sc-nano-range{background-color:var(--inactive-color)}.range-disabled.sc-nano-range-h .range-knob.sc-nano-range{transform:scale(0.55);outline:5px solid #fff;background-color:var(--inactive-color)}";export{o as nano_range}