@nanoporetech-digital/components 8.9.2 → 8.10.0

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:"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}

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-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}

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-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 s,g as e,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(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}

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:"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}

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-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}

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 a}from"./renderer-DpNDfhNy.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}

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-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=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}

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

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{r as n,c as i,g as a,a as t}from"./index-BM3Om9WE.js";import{h as s}from"./renderer-DasB4P10.js";import{a as o}from"./math-BEqsTfVK.js";const e=class{constructor(a){n(this,a),this.nanoChange=i(this,"nanoChange",7),this.nanoBlur=i(this,"nanoBlur",7),this.nanoFocus=i(this,"nanoFocus",7)}rating;isRtl;indicator;get host(){return a(this)}hoverValue=0;isHovering=!1;value=0;max=5;precision=1;readonly=!1;disabled=!1;name="";required=!1;hideLabel=!0;_label="";get label(){return this.required&&!this._label.endsWith("*")?this._label+" *":this._label}set label(n){this._label=n}symbolName="solid/star-sharp";symbol=()=>'<nano-icon name="'+this.symbolName+'"></nano-icon>';handleValueChange(){this.nanoChange.emit()}handleSymbolChange(){this.symbol||(this.symbol=()=>'<nano-icon name="'+this.symbolName+'"></nano-icon>')}nanoChange;nanoBlur;nanoFocus;async setFocus(){this.rating.focus()}async removeFocus(){this.rating.blur()}getValueFromMousePosition(n){const i=this.rating.getBoundingClientRect().left,a=this.rating.getBoundingClientRect().width;let t;return t=this.roundToPrecision((n.clientX-i)/a*this.max,this.precision),this.isRtl&&(t=this.max+this.precision-t),o(t,0,this.max)}roundToPrecision(n,i=.5){const a=1/i;return Math.ceil(n*a)/a}handleClick=n=>{if(this.disabled||this.readonly)return;const i=this.getValueFromMousePosition(n);this.value=i===this.value?0:i,this.isHovering=!1};handleKeyDown=n=>{this.disabled||this.readonly||("ArrowLeft"===n.key&&(this.value=this.roundToPrecision(Math.max(0,this.value-(n.shiftKey?1:this.precision))),n.preventDefault()),"ArrowRight"===n.key&&(this.value=this.roundToPrecision(Math.min(this.max,this.value+(n.shiftKey?1:this.precision))),n.preventDefault()),"Home"===n.key&&(this.value=0,n.preventDefault()),"End"===n.key&&(this.value=this.max,n.preventDefault()))};handleMouseEnter=()=>{this.isHovering=!0};handleMouseLeave=()=>{this.isHovering=!1};handleFocus=()=>{this.nanoFocus.emit()};handleBlur=()=>{this.nanoBlur.emit()};handleMouseMove=n=>{this.hoverValue=this.getValueFromMousePosition(n)};clip(n){if(!this.rating)return;const i=this.rating.getBoundingClientRect().width;return this.isRtl?`rect(0, ${i}px, 2em, ${i-i/100*(n/this.max*100)}px)`:`rect(0, ${i/100*(n/this.max*100)}px, 2em, 0)`}componentDidLoad(){setTimeout((()=>this.indicator.style.clip=this.clip(this.value)),20)}connectedCallback(){this.isRtl="rtl"===this.host.dir||"rtl"===this.host.ownerDocument.dir}render(){this.isRtl="rtl"===this.host.dir||"rtl"===this.host.ownerDocument.dir;const n=Array.from(Array(this.max).keys());let i=0;return i=this.disabled||this.readonly?this.value:this.isHovering?this.hoverValue:this.value,s(t,{key:"b28d1a7ff7743338ff5ae18c386e49ee20f8df8e",class:"nano-rating"},s("label",{key:"6fda8cf5da0b9ed38776ec3a9b93ec4fc02598b0",class:"rating-label"+(this.hideLabel?" visually-hidden":""),part:"label",htmlFor:this.name},s("slot",{key:"e92e2482a6aefd90bd27b5831ec75f0fb12fcd8b",name:"label"},this.label)),s("input",{key:"ef40cee201942dc8f0851f2ee4d785d3b1d27936",class:"range-input visually-hidden",name:this.name,id:this.name,disabled:this.disabled||this.readonly,required:this.required,value:this.value,onFocus:()=>{this.setFocus()}}),s("div",{key:"46c610322bc3b802d822cd22bfdcf3ad32f7e4d2",class:"rating-wrap"},s("div",{key:"fd509ff1f80a8172c00f2b320e6f5dbfd1252676",dir:this.isRtl?"rtl":null,ref:n=>this.rating=n,part:"base",class:{rating:!0,"rating--readonly":this.readonly,"rating--disabled":this.disabled},"aria-disabled":this.disabled?"true":"false","aria-readonly":this.readonly?"true":"false","aria-valuenow":this.value,"aria-valuemin":0,"aria-valuemax":this.max,tabIndex:this.disabled?-1:0,onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onMouseMove:this.handleMouseMove,onFocus:this.handleFocus,onBlur:this.handleBlur},s("span",{key:"d03101004803060722fd234f3500a5f7ac6e0603",class:"rating__symbols rating__symbols--inactive"},n.map((n=>s("span",{class:{rating__symbol:!0,"rating__symbol--hover":this.isHovering&&Math.ceil(i)===n+1},onMouseEnter:this.handleMouseEnter,innerHTML:this.symbol(n+1)})))),s("span",{key:"2e5b35988ef0b699c515fd86a5ab14b3a98f9215",ref:n=>this.indicator=n,class:"rating__symbols rating__symbols--indicator",style:{clip:this.clip(i)}},n.map((n=>s("span",{class:{rating__symbol:!0,"rating__symbol--hover":this.isHovering&&Math.ceil(i)===n+1},innerHTML:this.symbol(n+1)})))))))}static get watchers(){return{value:["handleValueChange"],symbolName:["handleSymbolChange"]}}};e.style=".sc-nano-rating-h,*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{box-sizing:border-box}[hidden].sc-nano-rating{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-rating-h,*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-rating-h,*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{box-sizing:border-box}[hidden].sc-nano-rating{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-rating-h,*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-rating-h{--symbol-color:var(--nano-color-neutral-400);--symbol-color-active:var(--nano-color-primary-1200);--symbol-spacing:0.25rem;--symbol-size:1.3125rem;display:inline-block}.rating-wrap.sc-nano-rating{position:relative;margin-block:0;margin-inline:calc(var(--symbol-spacing) * -1)}.rating-label.sc-nano-rating{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-rating{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.rating.sc-nano-rating{position:relative;vertical-align:middle;inline-size:100%}.rating.sc-nano-rating:focus{outline:none}.rating.sc-nano-rating:focus-visible:focus{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.rating__symbols.sc-nano-rating{display:flex;align-items:center;position:relative;font-size:var(--symbol-size);color:var(--symbol-color);white-space:nowrap;cursor:pointer;line-height:0;justify-content:space-between}.rating__symbols--inactive.sc-nano-rating .rating__symbol.sc-nano-rating>.sc-nano-rating:not(.nano-icon){background-color:currentcolor !important}.rating__symbols.sc-nano-rating>*.sc-nano-rating{margin:var(--symbol-spacing)}.rating__symbols--indicator.sc-nano-rating{position:absolute;inset-block-start:0;inset-inline-start:0;color:var(--symbol-color-active);pointer-events:none;inline-size:100%}.rating__symbol.sc-nano-rating{transition:0.2s transform;text-align:center}.rating__symbol--hover.sc-nano-rating{transform:scale(1.2)}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:default}.rating--disabled.sc-nano-rating .rating__symbol.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbol.sc-nano-rating{transform:none !important}.rating--disabled.sc-nano-rating{opacity:0.5}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:not-allowed}";export{e as nano_rating}
+import{r as n,c as i,g as a,a as t}from"./index-BM3Om9WE.js";import{h as s}from"./renderer-DpNDfhNy.js";import{a as o}from"./math-BEqsTfVK.js";const e=class{constructor(a){n(this,a),this.nanoChange=i(this,"nanoChange",7),this.nanoBlur=i(this,"nanoBlur",7),this.nanoFocus=i(this,"nanoFocus",7)}rating;isRtl;indicator;get host(){return a(this)}hoverValue=0;isHovering=!1;value=0;max=5;precision=1;readonly=!1;disabled=!1;name="";required=!1;hideLabel=!0;_label="";get label(){return this.required&&!this._label.endsWith("*")?this._label+" *":this._label}set label(n){this._label=n}symbolName="solid/star-sharp";symbol=()=>'<nano-icon name="'+this.symbolName+'"></nano-icon>';handleValueChange(){this.nanoChange.emit()}handleSymbolChange(){this.symbol||(this.symbol=()=>'<nano-icon name="'+this.symbolName+'"></nano-icon>')}nanoChange;nanoBlur;nanoFocus;async setFocus(){this.rating.focus()}async removeFocus(){this.rating.blur()}getValueFromMousePosition(n){const i=this.rating.getBoundingClientRect().left,a=this.rating.getBoundingClientRect().width;let t;return t=this.roundToPrecision((n.clientX-i)/a*this.max,this.precision),this.isRtl&&(t=this.max+this.precision-t),o(t,0,this.max)}roundToPrecision(n,i=.5){const a=1/i;return Math.ceil(n*a)/a}handleClick=n=>{if(this.disabled||this.readonly)return;const i=this.getValueFromMousePosition(n);this.value=i===this.value?0:i,this.isHovering=!1};handleKeyDown=n=>{this.disabled||this.readonly||("ArrowLeft"===n.key&&(this.value=this.roundToPrecision(Math.max(0,this.value-(n.shiftKey?1:this.precision))),n.preventDefault()),"ArrowRight"===n.key&&(this.value=this.roundToPrecision(Math.min(this.max,this.value+(n.shiftKey?1:this.precision))),n.preventDefault()),"Home"===n.key&&(this.value=0,n.preventDefault()),"End"===n.key&&(this.value=this.max,n.preventDefault()))};handleMouseEnter=()=>{this.isHovering=!0};handleMouseLeave=()=>{this.isHovering=!1};handleFocus=()=>{this.nanoFocus.emit()};handleBlur=()=>{this.nanoBlur.emit()};handleMouseMove=n=>{this.hoverValue=this.getValueFromMousePosition(n)};clip(n){if(!this.rating)return;const i=this.rating.getBoundingClientRect().width;return this.isRtl?`rect(0, ${i}px, 2em, ${i-i/100*(n/this.max*100)}px)`:`rect(0, ${i/100*(n/this.max*100)}px, 2em, 0)`}componentDidLoad(){setTimeout((()=>this.indicator.style.clip=this.clip(this.value)),20)}connectedCallback(){this.isRtl="rtl"===this.host.dir||"rtl"===this.host.ownerDocument.dir}render(){this.isRtl="rtl"===this.host.dir||"rtl"===this.host.ownerDocument.dir;const n=Array.from(Array(this.max).keys());let i=0;return i=this.disabled||this.readonly?this.value:this.isHovering?this.hoverValue:this.value,s(t,{key:"b28d1a7ff7743338ff5ae18c386e49ee20f8df8e",class:"nano-rating"},s("label",{key:"6fda8cf5da0b9ed38776ec3a9b93ec4fc02598b0",class:"rating-label"+(this.hideLabel?" visually-hidden":""),part:"label",htmlFor:this.name},s("slot",{key:"e92e2482a6aefd90bd27b5831ec75f0fb12fcd8b",name:"label"},this.label)),s("input",{key:"ef40cee201942dc8f0851f2ee4d785d3b1d27936",class:"range-input visually-hidden",name:this.name,id:this.name,disabled:this.disabled||this.readonly,required:this.required,value:this.value,onFocus:()=>{this.setFocus()}}),s("div",{key:"46c610322bc3b802d822cd22bfdcf3ad32f7e4d2",class:"rating-wrap"},s("div",{key:"fd509ff1f80a8172c00f2b320e6f5dbfd1252676",dir:this.isRtl?"rtl":null,ref:n=>this.rating=n,part:"base",class:{rating:!0,"rating--readonly":this.readonly,"rating--disabled":this.disabled},"aria-disabled":this.disabled?"true":"false","aria-readonly":this.readonly?"true":"false","aria-valuenow":this.value,"aria-valuemin":0,"aria-valuemax":this.max,tabIndex:this.disabled?-1:0,onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onMouseMove:this.handleMouseMove,onFocus:this.handleFocus,onBlur:this.handleBlur},s("span",{key:"d03101004803060722fd234f3500a5f7ac6e0603",class:"rating__symbols rating__symbols--inactive"},n.map((n=>s("span",{class:{rating__symbol:!0,"rating__symbol--hover":this.isHovering&&Math.ceil(i)===n+1},onMouseEnter:this.handleMouseEnter,innerHTML:this.symbol(n+1)})))),s("span",{key:"2e5b35988ef0b699c515fd86a5ab14b3a98f9215",ref:n=>this.indicator=n,class:"rating__symbols rating__symbols--indicator",style:{clip:this.clip(i)}},n.map((n=>s("span",{class:{rating__symbol:!0,"rating__symbol--hover":this.isHovering&&Math.ceil(i)===n+1},innerHTML:this.symbol(n+1)})))))))}static get watchers(){return{value:["handleValueChange"],symbolName:["handleSymbolChange"]}}};e.style=".sc-nano-rating-h,*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{box-sizing:border-box}[hidden].sc-nano-rating{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-rating-h,*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-rating-h,*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{box-sizing:border-box}[hidden].sc-nano-rating{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-rating-h,*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-rating-h{--symbol-color:var(--nano-color-neutral-400);--symbol-color-active:var(--nano-color-primary-1200);--symbol-spacing:0.25rem;--symbol-size:1.3125rem;display:inline-block}.rating-wrap.sc-nano-rating{position:relative;margin-block:0;margin-inline:calc(var(--symbol-spacing) * -1)}.rating-label.sc-nano-rating{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-rating{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.rating.sc-nano-rating{position:relative;vertical-align:middle;inline-size:100%}.rating.sc-nano-rating:focus{outline:none}.rating.sc-nano-rating:focus-visible:focus{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.rating__symbols.sc-nano-rating{display:flex;align-items:center;position:relative;font-size:var(--symbol-size);color:var(--symbol-color);white-space:nowrap;cursor:pointer;line-height:0;justify-content:space-between}.rating__symbols--inactive.sc-nano-rating .rating__symbol.sc-nano-rating>.sc-nano-rating:not(.nano-icon){background-color:currentcolor !important}.rating__symbols.sc-nano-rating>*.sc-nano-rating{margin:var(--symbol-spacing)}.rating__symbols--indicator.sc-nano-rating{position:absolute;inset-block-start:0;inset-inline-start:0;color:var(--symbol-color-active);pointer-events:none;inline-size:100%}.rating__symbol.sc-nano-rating{transition:0.2s transform;text-align:center}.rating__symbol--hover.sc-nano-rating{transform:scale(1.2)}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:default}.rating--disabled.sc-nano-rating .rating__symbol.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbol.sc-nano-rating{transform:none !important}.rating--disabled.sc-nano-rating{opacity:0.5}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:not-allowed}";export{e as nano_rating}

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

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{r as t,c as s,g as i,e,a as n}from"./index-BM3Om9WE.js";import{h}from"./renderer-DasB4P10.js";const a=class{constructor(i){t(this,i),this.nanoResizeStateChange=s(this,"nanoResizeStateChange",7),this.nanoResizeObserverReady=s(this,"nanoResizeObserverReady",7),this.nanoResizeContentFitChange=s(this,"nanoResizeContentFitChange",7),this.nanoResize=s(this,"nanoResize",7)}ro;appliedStates;isReady=!1;get host(){return i(this)}currentWidth;currentHeight;classNames=[];contentFitX=null;contentFitY=null;classNameChange(){this.host.className=this.classNames.join(" "),!this.isReady&&this.classNames.includes("is-ready")&&(this.isReady=!0,this.nanoResizeObserverReady.emit())}notifyContentFit;states;newStatesProp(){this.statesChanged()}nanoResizeStateChange;nanoResizeObserverReady;nanoResizeContentFitChange;nanoResize;dimensionChanged(){this.assessChanges()}statesChanged(){if(!this.states)return;const t=t=>{const s=t.split(/(\d+)/).filter((t=>t.length));return{bp:parseInt(s[0]),dir:s[1]}};this.appliedStates={h:new Map,w:new Map},this.states.split(",").map((s=>{if((s=s.trim()).includes(" ")){const[i,...e]=s.split(" "),{bp:n,dir:h}=t(i);this.appliedStates[h].set(n,{states:e,applied:!1})}else{const{bp:i,dir:e}=t(s);this.appliedStates[e].set(i,{applied:!1})}}))}assesContentFit(){if(!this.notifyContentFit)return;const t=(t=>{if("contents"!==window.getComputedStyle(t).display)return t;const s=t=>Array.from(t.children).find((t=>{if("contents"!==window.getComputedStyle(t).display)return t;s(t)}));return s(t)})(this.host.firstElementChild);if(!t)return;let s=!1;const{width:i,height:e}=this.host.getBoundingClientRect();this.notifyContentFit&&this.notifyContentFit.includes("x")&&(i<t.scrollWidth&&!1!==this.contentFitX?(s=!0,this.contentFitX=!1):i>=t.scrollWidth&&!0!==this.contentFitX&&(s=!0,this.contentFitX=!0)),this.notifyContentFit&&this.notifyContentFit.includes("y")&&(e<t.scrollHeight&&!1!==this.contentFitY?(s=!0,this.contentFitY=!1):e>=t.scrollHeight&&!0!==this.contentFitY&&(s=!0,this.contentFitY=!0)),s&&this.nanoResizeContentFitChange.emit({x:this.contentFitX,y:this.contentFitY})}assessChanges=()=>{if(!this.currentWidth&&!this.currentHeight)return;if(e((()=>this.assesContentFit())),!this.states||!this.appliedStates)return;const t={h:new Map,w:new Map};let s=!1;Object.keys(this.appliedStates).forEach((i=>{let e;e="h"===i?this.currentHeight:this.currentWidth,this.appliedStates[i].forEach(((n,h)=>{e>=h&&!1===n.applied?(n.applied=!0,t[i].set(h,n),s=!0):e<h&&!0===n.applied&&(n.applied=!1,t[i].set(h,n),s=!0)}))})),s?this.applyChanges(t):this.classNames.includes("is-ready")||(this.classNames=[...this.classNames,"is-ready"])};applyChanges(t){if(!this.states)return;let s=[...this.classNames];Object.keys(t).forEach((i=>{t[i].forEach((t=>{t.states&&t.states.map((i=>{t.applied?(s.push(i),s=s.filter((t=>t!=="not-"+i))):(s.push("not-"+i),s=s.filter((t=>t!==i)))}))}))})),this.classNames=[...new Set(["is-ready",...s])],this.nanoResizeStateChange.emit(this.toSimpleObj(t))}toSimpleObj(t){const s={};return Object.keys(t).forEach((i=>{t[i].forEach(((t,e)=>{s[e+i]=t.applied}))})),s}attachRO(){window.ResizeObserver&&(this.ro=new ResizeObserver((t=>{const{width:s,height:i}=this.host.getBoundingClientRect();this.currentWidth=Math.ceil(s),this.currentHeight=Math.ceil(i),this.nanoResize.emit(t)})),this.ro.observe(this.host))}componentWillLoad(){this.classNames=Array.from(this.host.classList),this.statesChanged(),this.applyChanges(this.appliedStates),this.currentWidth||this.currentHeight?this.assessChanges():e((()=>{const{width:t,height:s}=this.host.getBoundingClientRect();this.currentWidth=Math.ceil(t),this.currentHeight=Math.ceil(s)}))}connectedCallback(){this.ro||this.attachRO()}disconnectedCallback(){this.ro&&(this.ro.disconnect(),this.ro=void 0)}render(){return h(n,{key:"5db8e84066e7fd3d903f19e2256844331580947a",class:{"nano-resize-observe":!0,"content-fit-x":this.contentFitX,"content-fit-y":this.contentFitY,"content-nofit-x":!1===this.contentFitX,"content-nofit-y":!1===this.contentFitY}},h("slot",{key:"ee5842c110b25f82eacbb4ba618d33dad345e732"}),!!this.notifyContentFit&&(null!==this.contentFitX||null!==this.contentFitY)&&[h("slot",this.contentFitX?{name:"content-fit-x"}:{name:"content-nofit-x"}),h("slot",this.contentFitY?{name:"content-fit-y"}:{name:"content-nofit-y"})])}static get watchers(){return{classNames:["classNameChange"],states:["newStatesProp","statesChanged"],currentHeight:["dimensionChanged"],currentWidth:["dimensionChanged"]}}};a.style=":host { display: block }";export{a as nano_resize_observe}
+import{r as t,c as s,g as i,e,a as n}from"./index-BM3Om9WE.js";import{h}from"./renderer-DpNDfhNy.js";const a=class{constructor(i){t(this,i),this.nanoResizeStateChange=s(this,"nanoResizeStateChange",7),this.nanoResizeObserverReady=s(this,"nanoResizeObserverReady",7),this.nanoResizeContentFitChange=s(this,"nanoResizeContentFitChange",7),this.nanoResize=s(this,"nanoResize",7)}ro;appliedStates;isReady=!1;get host(){return i(this)}currentWidth;currentHeight;classNames=[];contentFitX=null;contentFitY=null;classNameChange(){this.host.className=this.classNames.join(" "),!this.isReady&&this.classNames.includes("is-ready")&&(this.isReady=!0,this.nanoResizeObserverReady.emit())}notifyContentFit;states;newStatesProp(){this.statesChanged()}nanoResizeStateChange;nanoResizeObserverReady;nanoResizeContentFitChange;nanoResize;dimensionChanged(){this.assessChanges()}statesChanged(){if(!this.states)return;const t=t=>{const s=t.split(/(\d+)/).filter((t=>t.length));return{bp:parseInt(s[0]),dir:s[1]}};this.appliedStates={h:new Map,w:new Map},this.states.split(",").map((s=>{if((s=s.trim()).includes(" ")){const[i,...e]=s.split(" "),{bp:n,dir:h}=t(i);this.appliedStates[h].set(n,{states:e,applied:!1})}else{const{bp:i,dir:e}=t(s);this.appliedStates[e].set(i,{applied:!1})}}))}assesContentFit(){if(!this.notifyContentFit)return;const t=(t=>{if("contents"!==window.getComputedStyle(t).display)return t;const s=t=>Array.from(t.children).find((t=>{if("contents"!==window.getComputedStyle(t).display)return t;s(t)}));return s(t)})(this.host.firstElementChild);if(!t)return;let s=!1;const{width:i,height:e}=this.host.getBoundingClientRect();this.notifyContentFit&&this.notifyContentFit.includes("x")&&(i<t.scrollWidth&&!1!==this.contentFitX?(s=!0,this.contentFitX=!1):i>=t.scrollWidth&&!0!==this.contentFitX&&(s=!0,this.contentFitX=!0)),this.notifyContentFit&&this.notifyContentFit.includes("y")&&(e<t.scrollHeight&&!1!==this.contentFitY?(s=!0,this.contentFitY=!1):e>=t.scrollHeight&&!0!==this.contentFitY&&(s=!0,this.contentFitY=!0)),s&&this.nanoResizeContentFitChange.emit({x:this.contentFitX,y:this.contentFitY})}assessChanges=()=>{if(!this.currentWidth&&!this.currentHeight)return;if(e((()=>this.assesContentFit())),!this.states||!this.appliedStates)return;const t={h:new Map,w:new Map};let s=!1;Object.keys(this.appliedStates).forEach((i=>{let e;e="h"===i?this.currentHeight:this.currentWidth,this.appliedStates[i].forEach(((n,h)=>{e>=h&&!1===n.applied?(n.applied=!0,t[i].set(h,n),s=!0):e<h&&!0===n.applied&&(n.applied=!1,t[i].set(h,n),s=!0)}))})),s?this.applyChanges(t):this.classNames.includes("is-ready")||(this.classNames=[...this.classNames,"is-ready"])};applyChanges(t){if(!this.states)return;let s=[...this.classNames];Object.keys(t).forEach((i=>{t[i].forEach((t=>{t.states&&t.states.map((i=>{t.applied?(s.push(i),s=s.filter((t=>t!=="not-"+i))):(s.push("not-"+i),s=s.filter((t=>t!==i)))}))}))})),this.classNames=[...new Set(["is-ready",...s])],this.nanoResizeStateChange.emit(this.toSimpleObj(t))}toSimpleObj(t){const s={};return Object.keys(t).forEach((i=>{t[i].forEach(((t,e)=>{s[e+i]=t.applied}))})),s}attachRO(){window.ResizeObserver&&(this.ro=new ResizeObserver((t=>{const{width:s,height:i}=this.host.getBoundingClientRect();this.currentWidth=Math.ceil(s),this.currentHeight=Math.ceil(i),this.nanoResize.emit(t)})),this.ro.observe(this.host))}componentWillLoad(){this.classNames=Array.from(this.host.classList),this.statesChanged(),this.applyChanges(this.appliedStates),this.currentWidth||this.currentHeight?this.assessChanges():e((()=>{const{width:t,height:s}=this.host.getBoundingClientRect();this.currentWidth=Math.ceil(t),this.currentHeight=Math.ceil(s)}))}connectedCallback(){this.ro||this.attachRO()}disconnectedCallback(){this.ro&&(this.ro.disconnect(),this.ro=void 0)}render(){return h(n,{key:"5db8e84066e7fd3d903f19e2256844331580947a",class:{"nano-resize-observe":!0,"content-fit-x":this.contentFitX,"content-fit-y":this.contentFitY,"content-nofit-x":!1===this.contentFitX,"content-nofit-y":!1===this.contentFitY}},h("slot",{key:"ee5842c110b25f82eacbb4ba618d33dad345e732"}),!!this.notifyContentFit&&(null!==this.contentFitX||null!==this.contentFitY)&&[h("slot",this.contentFitX?{name:"content-fit-x"}:{name:"content-nofit-x"}),h("slot",this.contentFitY?{name:"content-fit-y"}:{name:"content-nofit-y"})])}static get watchers(){return{classNames:["classNameChange"],states:["newStatesProp","statesChanged"],currentHeight:["dimensionChanged"],currentWidth:["dimensionChanged"]}}};a.style=":host { display: block }";export{a as nano_resize_observe}