@nanoporetech-digital/components 6.0.1 → 6.2.0

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

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as n,h as o,a as t,g as e}from"./index-9695db0a.js";const i=":host {\n  box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n/**\nTODO - as soon as container queries hits everywhere, strip out reliance on nano-grid breakpoints\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: 90deg;\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 (max-width: 52em) {\n  .hero__ctas {\n    display: none;\n  }\n}\n@media (max-width: 58em) {\n  .hero__ctas {\n    margin-block-end: -48px;\n  }\n}\n.hero__ctas ::slotted(a.button[slot=secondary-ctas]) {\n  padding-block: 0.25rem !important;\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  line-height: 26px !important;\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: 700;\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: 300;\n  font-style: italic;\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}";const r=class{constructor(t){n(this,t);this.HeroContent=()=>[!this.hasIconBox&&this.hasCtas?o("div",{class:"hero__ctas"},o("slot",{name:"secondary-ctas"})):"",o("div",{class:"hero__scrim"},o("slot",{name:"scrim"})),o("nano-grid",{class:"hero__content",xlCols:2,xlSize:this.largeScreenBP},o("div",{"grid-states":"xl-col-span-2"},o("div",{class:"hero__breadcrumbs"},o("slot",{name:"breadcrumb"}))),o("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"},o("div",{class:"hero__primary"},o("div",{class:"hero__primary-content"},o("slot",{name:"back-btn"}),o("div",null,o("slot",{name:"primary-content"}))))),this.hasSecondaryContent&&o("div",{"grid-states":"xl-col-span-1 xl-col-start-2 xl-row-start-2"},o("div",{class:"hero__secondary"},o("slot",{name:"secondary-content"}),this.hasIconBox&&o("div",{class:"hero__icon-box"},o("slot",{name:"icon-box"}),o("slot",{name:"icon-box-item"})),this.hasQuote&&o("div",{class:"hero__quote-content"},o("span",{class:"hero__quote"},o("slot",{name:"quote"})),o("div",{class:"hero__quote-author"},o("slot",{name:"quote-author"}))))))];this.hasIconBox=undefined;this.hasScrim=undefined;this.hasSecondaryContent=undefined;this.hasQuote=undefined;this.hasBg=undefined;this.hasBackBtn=undefined;this.hasCtas=undefined;this.breadCrumbs=undefined;this.iconBoxItems=undefined;this.imgSrc=undefined;this.imgSrcSet=null;this.largeScreenBP=900;this.theme="dark";this.level="top"}breadCrumbChange(){this.breadCrumbs.filter((n=>n.tagName==="A"&&!n.nextElementSibling.classList.contains("slash"))).forEach((n=>{n.insertAdjacentHTML("afterend",'<span slot="breadcrumb" class="slash">/</span>')}))}iconBoxItemChange(){this.iconBoxItems.forEach((n=>n.classList.remove("last")));if(this.iconBoxItems[this.iconBoxItems.length-1]&&this.iconBoxItems[this.iconBoxItems.length-1].classList)this.iconBoxItems[this.iconBoxItems.length-1].classList.add("last")}slotChangeObserver(){if(!window["MutationObserver"])return;if(this.mo)this.mo.disconnect();const n=this.mo=new MutationObserver((()=>this.processSlottedContent()));n.observe(this.host,{childList:true})}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(){if(this.mo)this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver()}componentWillLoad(){this.processSlottedContent()}render(){const n=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";return o(t,null,o("div",{class:{hero:true,"hero--light":this.theme==="light","hero--secondary":this.hasSecondaryContent,"hero--iconbox":this.hasIconBox,"hero--rtl":n,"hero--scrim":this.hasScrim,"hero--breadcrumb":!!this.breadCrumbs.length,"hero--hasbg":this.hasBg,"hero--backbtn":this.hasBackBtn,"hero--sub":this.level==="sub"}},o("div",{class:"hero__bg-wrap"},!!this.imgSrc&&o("nano-img",{class:"hero__img",lazy:false,background:true,srcSet:this.imgSrcSet,src:this.imgSrc},o(this.HeroContent,null)),!this.imgSrc&&[o("div",{class:"hero__bg-slot"},o("slot",{name:"background"})),o(this.HeroContent,null)])))}get host(){return e(this)}static get watchers(){return{breadCrumbs:["breadCrumbChange"],iconBoxItems:["iconBoxItemChange"]}}};r.style=i;export{r as nano_hero};
+import{r as n,h as o,a as t,g as e}from"./index-9695db0a.js";const i=":host {\n  box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n/**\nTODO - as soon as container queries hits everywhere, strip out reliance on nano-grid breakpoints\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: 90deg;\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 (max-width: 52em) {\n  .hero__ctas {\n    display: none;\n  }\n}\n@media (max-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  line-height: 26px !important;\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: 700;\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: 300;\n  font-style: italic;\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}";const r=class{constructor(t){n(this,t);this.HeroContent=()=>[!this.hasIconBox&&this.hasCtas?o("div",{class:"hero__ctas"},o("slot",{name:"secondary-ctas"})):"",o("div",{class:"hero__scrim"},o("slot",{name:"scrim"})),o("nano-grid",{class:"hero__content",xlCols:2,xlSize:this.largeScreenBP},o("div",{"grid-states":"xl-col-span-2"},o("div",{class:"hero__breadcrumbs"},o("slot",{name:"breadcrumb"}))),o("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"},o("div",{class:"hero__primary"},o("div",{class:"hero__primary-content"},o("slot",{name:"back-btn"}),o("div",null,o("slot",{name:"primary-content"}))))),this.hasSecondaryContent&&o("div",{"grid-states":"xl-col-span-1 xl-col-start-2 xl-row-start-2"},o("div",{class:"hero__secondary"},o("slot",{name:"secondary-content"}),this.hasIconBox&&o("div",{class:"hero__icon-box"},o("slot",{name:"icon-box"}),o("slot",{name:"icon-box-item"})),this.hasQuote&&o("div",{class:"hero__quote-content"},o("span",{class:"hero__quote"},o("slot",{name:"quote"})),o("div",{class:"hero__quote-author"},o("slot",{name:"quote-author"}))))))];this.hasIconBox=undefined;this.hasScrim=undefined;this.hasSecondaryContent=undefined;this.hasQuote=undefined;this.hasBg=undefined;this.hasBackBtn=undefined;this.hasCtas=undefined;this.breadCrumbs=undefined;this.iconBoxItems=undefined;this.imgSrc=undefined;this.imgSrcSet=null;this.largeScreenBP=900;this.theme="dark";this.level="top"}breadCrumbChange(){this.breadCrumbs.filter((n=>n.tagName==="A"&&!n.nextElementSibling.classList.contains("slash"))).forEach((n=>{n.insertAdjacentHTML("afterend",'<span slot="breadcrumb" class="slash">/</span>')}))}iconBoxItemChange(){this.iconBoxItems.forEach((n=>n.classList.remove("last")));if(this.iconBoxItems[this.iconBoxItems.length-1]&&this.iconBoxItems[this.iconBoxItems.length-1].classList)this.iconBoxItems[this.iconBoxItems.length-1].classList.add("last")}slotChangeObserver(){if(!window["MutationObserver"])return;if(this.mo)this.mo.disconnect();const n=this.mo=new MutationObserver((()=>this.processSlottedContent()));n.observe(this.host,{childList:true})}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(){if(this.mo)this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver()}componentWillLoad(){this.processSlottedContent()}render(){const n=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";return o(t,null,o("div",{class:{hero:true,"hero--light":this.theme==="light","hero--secondary":this.hasSecondaryContent,"hero--iconbox":this.hasIconBox,"hero--rtl":n,"hero--scrim":this.hasScrim,"hero--breadcrumb":!!this.breadCrumbs.length,"hero--hasbg":this.hasBg,"hero--backbtn":this.hasBackBtn,"hero--sub":this.level==="sub"}},o("div",{class:"hero__bg-wrap"},!!this.imgSrc&&o("nano-img",{class:"hero__img",lazy:false,background:true,srcSet:this.imgSrcSet,src:this.imgSrc},o(this.HeroContent,null)),!this.imgSrc&&[o("div",{class:"hero__bg-slot"},o("slot",{name:"background"})),o(this.HeroContent,null)])))}get host(){return e(this)}static get watchers(){return{breadCrumbs:["breadCrumbChange"],iconBoxItems:["iconBoxItemChange"]}}};r.style=i;export{r as nano_hero};
 //# sourceMappingURL=nano-hero.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["heroCss","Hero","this","HeroContent","hasIconBox","hasCtas","h","class","name","xlCols","xlSize","largeScreenBP","hasSecondaryContent","hasQuote","breadCrumbChange","breadCrumbs","filter","crumb","tagName","nextElementSibling","classList","contains","forEach","insertAdjacentHTML","iconBoxItemChange","iconBoxItems","item","remove","length","add","slotChangeObserver","window","mo","disconnect","MutationObserver","processSlottedContent","observe","host","childList","querySelector","Array","from","querySelectorAll","hasScrim","hasBg","imgSrc","hasBackBtn","disconnectedCallback","componentDidLoad","componentWillLoad","render","rtl","dir","ownerDocument","Host","hero","theme","level","lazy","background","srcSet","imgSrcSet","src"],"sources":["./src/components/hero/hero.scss?tag=nano-hero&encapsulation=shadow","./src/components/hero/hero.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n\n/**\nTODO - as soon as container queries hits everywhere, strip out reliance on nano-grid breakpoints\n**/\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 #{map.get($colors, lightblue)};\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\n  --nano-loader-base: #{map.get($colors, black)};\n  --nano-loader-tint: #{lighten(map.get($colors, black), 20%)};\n  --theme-color: #{map.get($colors, white)};\n  --theme-tint-color: #{map.get($colors, lightblue)};\n  --scrim-color: 0 0 0;\n  --scrim-direction: 90deg;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 0.7;\n  --padding: 0;\n  --quote-size: 1.3rem;\n\n  color: var(--theme-color);\n  display: block;\n  container-type: inline-size;\n}\n\n:host([theme='light']) {\n  --nano-loader-base: #{map.get($colors, white)};\n  --nano-loader-tint: #{lighten(map.get($colors, white), 20%)};\n  --theme-color: #{map.get($colors, black)};\n  --scrim-color: 255 255 255;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 1;\n  --scrim-direction: 270deg;\n\n  color: var(--theme-color);\n\n  .hero__primary-content {\n    --color: #{map.get($colors, black)};\n  }\n}\n\n.hero {\n  position: relative;\n\n  @container (min-width: 800px) {\n    --quote-size: 3rem;\n  }\n\n  &--rtl {\n    --scrim-direction: 270deg;\n  }\n\n  &--secondary:not(.hero--iconbox) {\n    --scrim-direction: 0deg;\n  }\n\n  &__bg-wrap {\n    overflow: hidden;\n  }\n\n  &__bg-slot {\n    position: absolute;\n    inset: 0;\n  }\n\n  &__ctas {\n    @media (max-width: 52em) {\n      display: none;\n    }\n\n    @media (max-width: 58em) {\n      margin-block-end: -48px;\n    }\n\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    ::slotted(a.button[slot='secondary-ctas']) {\n      padding-block: 0.25rem !important;\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  }\n\n  &__img {\n    display: block;\n\n    --padding: inherit;\n  }\n\n  &__breadcrumbs {\n    display: none;\n    margin-block: 20px 0;\n    margin-inline: 14px;\n    line-height: 14px;\n\n    .hero--breadcrumb & {\n      display: block;\n    }\n\n    @container (min-width: 800px) {\n      margin-block: 0;\n      margin-inline: 50px;\n      max-inline-size: 50%;\n    }\n\n    @container (min-width: 900px) {\n      margin-block: 0;\n      margin-inline: 83px;\n    }\n\n    ::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 & {\n        text-shadow: 1px 1px rgb(0 0 0 / 15%);\n      }\n    }\n\n    ::slotted(a[slot='breadcrumb']) {\n      color: var(--theme-tint-color) !important;\n      cursor: pointer;\n    }\n\n    ::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  }\n\n  &__scrim {\n    position: absolute;\n    inset: 0;\n    z-index: 0;\n    background:\n      linear-gradient(\n        var(--scrim-direction),\n        rgb(var(--scrim-color) / var(--scrim-opacity-from)) 0%,\n        rgb(var(--scrim-color) / var(--scrim-opacity-to)) 100%\n      );\n\n    .hero--scrim & {\n      background: none;\n    }\n  }\n\n  &__content {\n    max-inline-size: 1440px;\n    display: block;\n\n    --grid-row-gap: 0;\n\n    margin-block: 0;\n    margin-inline: auto;\n    position: relative;\n\n    @container (min-width: 800px) {\n      margin-block: 50px 0 !important;\n      max-inline-size: 1540px !important;\n    }\n\n    @container (min-width: 900px) {\n      margin-block: 83px 0 !important;\n      max-inline-size: 1606px !important;\n    }\n  }\n\n  &__primary {\n    margin: 16px;\n\n    .hero--breadcrumb & {\n      margin-block: 0;\n      margin-inline: 16px;\n    }\n\n    .hero--backbtn & {\n      margin-inline-start: 0;\n    }\n\n    ::slotted(nano-icon-button[slot='back-btn']) {\n      font-size: 2rem;\n    }\n\n    @container (min-width: 800px) {\n      margin-block: 0 50px !important;\n      margin-inline: 50px 0 !important;\n\n      ::slotted(nano-icon-button[slot='back-btn']) {\n        margin-block: 0 !important;\n        margin-inline: -3rem 0 !important;\n      }\n    }\n\n    @container (min-width: 900px) {\n      margin-block: 0 83px !important;\n      margin-inline: 83px 0 !important;\n    }\n  }\n\n  &__primary-content {\n    max-inline-size: 45rem;\n\n    --color: #fff;\n\n    display: flex;\n\n    .hero--backbtn & {\n      > div {\n        padding-block: 10px 0;\n        padding-inline: 0;\n      }\n    }\n\n    ::slotted(h1[slot='primary-content']) {\n      line-height: 26px !important;\n      margin-block: 0 18px !important;\n      font-size: 2rem !important;\n    }\n\n    @container (min-width: 800px) {\n      ::slotted(h1[slot='primary-content']) {\n        line-height: 31px !important;\n        margin-block-end: 30px !important;\n      }\n\n      ::slotted(.button[slot='primary-content']) {\n        margin-block-start: 20px !important;\n      }\n    }\n  }\n\n  &__secondary {\n    display: none;\n    block-size: 100%;\n    padding-block: 0 20px;\n    padding-inline: 14px;\n\n    .hero--secondary & {\n      display: flex;\n      align-items: center;\n    }\n\n    @container (min-width: 800px) {\n      padding-block: 0 50px;\n      padding-inline: 50px;\n      justify-content: flex-end;\n    }\n\n    @container (min-width: 900px) {\n      padding-block: 0 83px;\n      padding-inline: 83px;\n    }\n  }\n\n  &__icon-box {\n    background: rgb(0 0 0 / 70%);\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      max-inline-size: 410px;\n      flex: 0 1 410px;\n    }\n\n    ::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\n      display: flex;\n      align-items: center;\n      font-size: 0.8125rem;\n      margin-block-end: 20px;\n    }\n\n    ::slotted(.last[slot='icon-box-item']) {\n      margin-block-end: 0;\n    }\n  }\n\n  &__quote-content {\n    margin-block-start: auto;\n    text-align: center;\n    inline-size: 100%;\n\n    @container (min-width: 800px) {\n      max-inline-size: 500px;\n      flex: 0 1 500px;\n      text-align: initial;\n    }\n  }\n\n  &__quote {\n    &::before,\n    &::after {\n      content: '\"';\n      font-size: var(--quote-size);\n      font-weight: 700;\n      font-style: italic;\n      line-height: 0;\n      color: #abb6b8;\n      display: inline;\n      position: relative;\n    }\n\n    ::slotted([slot='quote']) {\n      font-size: var(--quote-size);\n      font-weight: 300;\n      font-style: italic;\n      display: inline;\n    }\n  }\n\n  &__quote-author {\n    text-align: end;\n    font-size: 1rem;\n    opacity: 0.8;\n  }\n\n  &--sub {\n    .hero__content {\n      @container (min-width: 800px) {\n        margin-block-start: 40px;\n\n        .hero__primary {\n          margin-block: 0 40px;\n          margin-inline: 50px 0;\n        }\n\n        .hero__secondary {\n          padding-block: 0 50px;\n          padding-inline: 40px 50px;\n        }\n\n        ::slotted(.button[slot='primary-content']) {\n          margin-block-start: 8px !important;\n        }\n\n        ::slotted(h1[slot='primary-content']) {\n          margin-block-end: 18px !important;\n        }\n      }\n\n      @container (min-width: 900px) {\n        .hero__primary {\n          margin-block: 0 40px;\n          margin-inline: 83px 0;\n        }\n\n        .hero__secondary {\n          padding-block: 0 83px;\n          padding-inline: 40px 83px;\n        }\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  h,\n  ComponentInterface,\n  VNode,\n  State,\n  Element,\n  Watch,\n  Host,\n} from '@stencil/core';\n/**\n * Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.\n * @slot primary-content - title, leading paragraph and CTA\n * @slot breadcrumb - each individual bread crumb should be assigned seperately\n * @slot secondary-content - free form secondary content.\n * @slot icon-box - free form icon box container\n * @slot icon-box-item - seperate icon box items. Designed to contain 1 icon and 1 text element.\n * @slot secondary-ctas - CTAs. each individual button should be assigned seperately\n * @slot quote - quote content\n * @slot quote-author - quote author\n * @slot scrim - optional background overlay (e.g. faded colour or gradient)\n * @slot background - custom background. Only active when img-src is empty\n * @slot back-btn - a back button.\n */\n@Component({\n  tag: 'nano-hero',\n  styleUrl: 'hero.scss',\n  shadow: true,\n})\nexport class Hero implements ComponentInterface {\n  private mo?: MutationObserver;\n\n  @Element() host: HTMLNanoHeroElement;\n\n  @State() hasIconBox: boolean;\n  @State() hasScrim: boolean;\n  @State() hasSecondaryContent: boolean;\n  @State() hasQuote: boolean;\n  @State() hasBg: boolean;\n  @State() hasBackBtn: boolean;\n  @State() hasCtas: boolean;\n  @State() breadCrumbs: Element[];\n  @Watch('breadCrumbs')\n  breadCrumbChange() {\n    // safari doesn't support ::slotted()::after ... so this :/\n    this.breadCrumbs\n      .filter(\n        (crumb) =>\n          crumb.tagName === 'A' &&\n          !crumb.nextElementSibling.classList.contains('slash')\n      )\n      .forEach((crumb) => {\n        crumb.insertAdjacentHTML(\n          'afterend',\n          '<span slot=\"breadcrumb\" class=\"slash\">/</span>'\n        );\n      });\n  }\n  @State() iconBoxItems: Element[];\n  @Watch('iconBoxItems')\n  iconBoxItemChange() {\n    this.iconBoxItems.forEach((item) => item.classList.remove('last'));\n    if (\n      this.iconBoxItems[this.iconBoxItems.length - 1] &&\n      this.iconBoxItems[this.iconBoxItems.length - 1].classList\n    )\n      this.iconBoxItems[this.iconBoxItems.length - 1].classList.add('last');\n  }\n\n  /** src for background image. For more control use the `background` slot instead. */\n  @Prop() imgSrc?: string;\n\n  /** Optional list string providing media sizes with corresponding image srcs.\n   * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` */\n  @Prop() imgSrcSet?: string = null;\n\n  /** The Break Point width that the hero component will change to the large view. Defaults to the XL grid size (900px) */\n  @Prop() largeScreenBP: number = 900;\n\n  /** Base style for the hero. Either 'light' (white bg / dark text), or 'dark' (dark bg / white text) */\n  @Prop() theme: 'dark' | 'light' = 'dark';\n\n  /** Set the content structure level of the hero. Defaults to 'top'  */\n  @Prop() level: 'top' | 'sub' = 'top';\n\n  private slotChangeObserver() {\n    if (!window['MutationObserver']) return;\n\n    if (this.mo) this.mo.disconnect();\n    const mo = (this.mo = new MutationObserver(() =>\n      this.processSlottedContent()\n    ));\n    mo.observe(this.host, { childList: true });\n  }\n\n  // Event handlers\n\n  private processSlottedContent() {\n    this.hasCtas = !!this.host.querySelector('[slot=\"secondary-ctas\"]');\n    this.iconBoxItems = Array.from(\n      this.host.querySelectorAll('[slot=\"icon-box-item\"]')\n    );\n    this.hasIconBox =\n      !!this.host.querySelector('[slot=\"icon-box\"]') ||\n      !!this.iconBoxItems.length;\n    this.hasScrim = !!this.host.querySelector('[slot=\"scrim\"]');\n    this.breadCrumbs = Array.from(\n      this.host.querySelectorAll('[slot=\"breadcrumb\"]')\n    );\n    this.hasSecondaryContent =\n      !!this.host.querySelector('[slot=\"icon-box\"]') ||\n      !!this.host.querySelector('[slot=\"quote\"]') ||\n      !!this.host.querySelector('[slot=\"icon-box-item\"]') ||\n      !!this.host.querySelector('[slot=\"secondary-content\"]');\n    this.hasBg =\n      !!this.host.querySelector('[slot=\"background\"]') || !!this.imgSrc;\n    this.hasBackBtn = !!this.host.querySelector('[slot=\"back-btn\"]');\n    this.hasQuote = !!this.host.querySelector('[slot=\"quote\"]');\n  }\n\n  // Component lifecycle\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n  }\n\n  componentWillLoad() {\n    this.processSlottedContent();\n  }\n\n  private HeroContent = (): VNode[] => {\n    return [\n      !this.hasIconBox && this.hasCtas ? (\n        <div class=\"hero__ctas\">\n          <slot name=\"secondary-ctas\" />\n        </div>\n      ) : (\n        ''\n      ),\n      <div class=\"hero__scrim\">\n        <slot name=\"scrim\" />\n      </div>,\n      <nano-grid class=\"hero__content\" xlCols={2} xlSize={this.largeScreenBP}>\n        <div grid-states=\"xl-col-span-2\">\n          <div class=\"hero__breadcrumbs\">\n            <slot name=\"breadcrumb\" />\n          </div>\n        </div>\n        <div\n          grid-states={\n            this.hasSecondaryContent\n              ? 'xl-col-span-1 xl-col-start-1 xl-row-start-2'\n              : 'xl-col-span-2 xl-col-start-1 xl-row-start-2'\n          }\n        >\n          <div class=\"hero__primary\">\n            <div class=\"hero__primary-content\">\n              <slot name=\"back-btn\" />\n              <div>\n                <slot name=\"primary-content\" />\n              </div>\n            </div>\n          </div>\n        </div>\n        {this.hasSecondaryContent && (\n          <div grid-states=\"xl-col-span-1 xl-col-start-2 xl-row-start-2\">\n            <div class=\"hero__secondary\">\n              <slot name=\"secondary-content\" />\n              {this.hasIconBox && (\n                <div class=\"hero__icon-box\">\n                  <slot name=\"icon-box\" />\n                  <slot name=\"icon-box-item\" />\n                </div>\n              )}\n              {this.hasQuote && (\n                <div class=\"hero__quote-content\">\n                  <span class=\"hero__quote\">\n                    <slot name=\"quote\" />\n                  </span>\n                  <div class=\"hero__quote-author\">\n                    <slot name=\"quote-author\" />\n                  </div>\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n      </nano-grid>,\n    ];\n  };\n\n  render() {\n    const rtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host>\n        <div\n          class={{\n            hero: true,\n            'hero--light': this.theme === 'light',\n            'hero--secondary': this.hasSecondaryContent,\n            'hero--iconbox': this.hasIconBox,\n            'hero--rtl': rtl,\n            'hero--scrim': this.hasScrim,\n            'hero--breadcrumb': !!this.breadCrumbs.length,\n            'hero--hasbg': this.hasBg,\n            'hero--backbtn': this.hasBackBtn,\n            'hero--sub': this.level === 'sub',\n          }}\n        >\n          <div class=\"hero__bg-wrap\">\n            {!!this.imgSrc && (\n              <nano-img\n                class=\"hero__img\"\n                lazy={false}\n                background\n                srcSet={this.imgSrcSet}\n                src={this.imgSrc}\n              >\n                <this.HeroContent />\n              </nano-img>\n            )}\n            {!this.imgSrc && [\n              <div class=\"hero__bg-slot\">\n                <slot name=\"background\" />\n              </div>,\n              <this.HeroContent />,\n            ]}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["heroCss","Hero","this","HeroContent","hasIconBox","hasCtas","h","class","name","xlCols","xlSize","largeScreenBP","hasSecondaryContent","hasQuote","breadCrumbChange","breadCrumbs","filter","crumb","tagName","nextElementSibling","classList","contains","forEach","insertAdjacentHTML","iconBoxItemChange","iconBoxItems","item","remove","length","add","slotChangeObserver","window","mo","disconnect","MutationObserver","processSlottedContent","observe","host","childList","querySelector","Array","from","querySelectorAll","hasScrim","hasBg","imgSrc","hasBackBtn","disconnectedCallback","componentDidLoad","componentWillLoad","render","rtl","dir","ownerDocument","Host","hero","theme","level","lazy","background","srcSet","imgSrcSet","src"],"sources":["./src/components/hero/hero.scss?tag=nano-hero&encapsulation=shadow","./src/components/hero/hero.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n\n/**\nTODO - as soon as container queries hits everywhere, strip out reliance on nano-grid breakpoints\n**/\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 #{map.get($colors, lightblue)};\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\n  --nano-loader-base: #{map.get($colors, black)};\n  --nano-loader-tint: #{lighten(map.get($colors, black), 20%)};\n  --theme-color: #{map.get($colors, white)};\n  --theme-tint-color: #{map.get($colors, lightblue)};\n  --scrim-color: 0 0 0;\n  --scrim-direction: 90deg;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 0.7;\n  --padding: 0;\n  --quote-size: 1.3rem;\n\n  color: var(--theme-color);\n  display: block;\n  container-type: inline-size;\n}\n\n:host([theme='light']) {\n  --nano-loader-base: #{map.get($colors, white)};\n  --nano-loader-tint: #{lighten(map.get($colors, white), 20%)};\n  --theme-color: #{map.get($colors, black)};\n  --scrim-color: 255 255 255;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 1;\n  --scrim-direction: 270deg;\n\n  color: var(--theme-color);\n\n  .hero__primary-content {\n    --color: #{map.get($colors, black)};\n  }\n}\n\n.hero {\n  position: relative;\n\n  @container (min-width: 800px) {\n    --quote-size: 3rem;\n  }\n\n  &--rtl {\n    --scrim-direction: 270deg;\n  }\n\n  &--secondary:not(.hero--iconbox) {\n    --scrim-direction: 0deg;\n  }\n\n  &__bg-wrap {\n    overflow: hidden;\n  }\n\n  &__bg-slot {\n    position: absolute;\n    inset: 0;\n  }\n\n  &__ctas {\n    @media (max-width: 52em) {\n      display: none;\n    }\n\n    @media (max-width: 58em) {\n      margin-block-end: -48px;\n    }\n\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    ::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  }\n\n  &__img {\n    display: block;\n\n    --padding: inherit;\n  }\n\n  &__breadcrumbs {\n    display: none;\n    margin-block: 20px 0;\n    margin-inline: 14px;\n    line-height: 14px;\n\n    .hero--breadcrumb & {\n      display: block;\n    }\n\n    @container (min-width: 800px) {\n      margin-block: 0;\n      margin-inline: 50px;\n      max-inline-size: 50%;\n    }\n\n    @container (min-width: 900px) {\n      margin-block: 0;\n      margin-inline: 83px;\n    }\n\n    ::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 & {\n        text-shadow: 1px 1px rgb(0 0 0 / 15%);\n      }\n    }\n\n    ::slotted(a[slot='breadcrumb']) {\n      color: var(--theme-tint-color) !important;\n      cursor: pointer;\n    }\n\n    ::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  }\n\n  &__scrim {\n    position: absolute;\n    inset: 0;\n    z-index: 0;\n    background:\n      linear-gradient(\n        var(--scrim-direction),\n        rgb(var(--scrim-color) / var(--scrim-opacity-from)) 0%,\n        rgb(var(--scrim-color) / var(--scrim-opacity-to)) 100%\n      );\n\n    .hero--scrim & {\n      background: none;\n    }\n  }\n\n  &__content {\n    max-inline-size: 1440px;\n    display: block;\n\n    --grid-row-gap: 0;\n\n    margin-block: 0;\n    margin-inline: auto;\n    position: relative;\n\n    @container (min-width: 800px) {\n      margin-block: 50px 0 !important;\n      max-inline-size: 1540px !important;\n    }\n\n    @container (min-width: 900px) {\n      margin-block: 83px 0 !important;\n      max-inline-size: 1606px !important;\n    }\n  }\n\n  &__primary {\n    margin: 16px;\n\n    .hero--breadcrumb & {\n      margin-block: 0;\n      margin-inline: 16px;\n    }\n\n    .hero--backbtn & {\n      margin-inline-start: 0;\n    }\n\n    ::slotted(nano-icon-button[slot='back-btn']) {\n      font-size: 2rem;\n    }\n\n    @container (min-width: 800px) {\n      margin-block: 0 50px !important;\n      margin-inline: 50px 0 !important;\n\n      ::slotted(nano-icon-button[slot='back-btn']) {\n        margin-block: 0 !important;\n        margin-inline: -3rem 0 !important;\n      }\n    }\n\n    @container (min-width: 900px) {\n      margin-block: 0 83px !important;\n      margin-inline: 83px 0 !important;\n    }\n  }\n\n  &__primary-content {\n    max-inline-size: 45rem;\n\n    --color: #fff;\n\n    display: flex;\n\n    .hero--backbtn & {\n      > div {\n        padding-block: 10px 0;\n        padding-inline: 0;\n      }\n    }\n\n    ::slotted(h1[slot='primary-content']) {\n      line-height: 26px !important;\n      margin-block: 0 18px !important;\n      font-size: 2rem !important;\n    }\n\n    @container (min-width: 800px) {\n      ::slotted(h1[slot='primary-content']) {\n        line-height: 31px !important;\n        margin-block-end: 30px !important;\n      }\n\n      ::slotted(.button[slot='primary-content']) {\n        margin-block-start: 20px !important;\n      }\n    }\n  }\n\n  &__secondary {\n    display: none;\n    block-size: 100%;\n    padding-block: 0 20px;\n    padding-inline: 14px;\n\n    .hero--secondary & {\n      display: flex;\n      align-items: center;\n    }\n\n    @container (min-width: 800px) {\n      padding-block: 0 50px;\n      padding-inline: 50px;\n      justify-content: flex-end;\n    }\n\n    @container (min-width: 900px) {\n      padding-block: 0 83px;\n      padding-inline: 83px;\n    }\n  }\n\n  &__icon-box {\n    background: rgb(0 0 0 / 70%);\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      max-inline-size: 410px;\n      flex: 0 1 410px;\n    }\n\n    ::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\n      display: flex;\n      align-items: center;\n      font-size: 0.8125rem;\n      margin-block-end: 20px;\n    }\n\n    ::slotted(.last[slot='icon-box-item']) {\n      margin-block-end: 0;\n    }\n  }\n\n  &__quote-content {\n    margin-block-start: auto;\n    text-align: center;\n    inline-size: 100%;\n\n    @container (min-width: 800px) {\n      max-inline-size: 500px;\n      flex: 0 1 500px;\n      text-align: initial;\n    }\n  }\n\n  &__quote {\n    &::before,\n    &::after {\n      content: '\"';\n      font-size: var(--quote-size);\n      font-weight: 700;\n      font-style: italic;\n      line-height: 0;\n      color: #abb6b8;\n      display: inline;\n      position: relative;\n    }\n\n    ::slotted([slot='quote']) {\n      font-size: var(--quote-size);\n      font-weight: 300;\n      font-style: italic;\n      display: inline;\n    }\n  }\n\n  &__quote-author {\n    text-align: end;\n    font-size: 1rem;\n    opacity: 0.8;\n  }\n\n  &--sub {\n    .hero__content {\n      @container (min-width: 800px) {\n        margin-block-start: 40px;\n\n        .hero__primary {\n          margin-block: 0 40px;\n          margin-inline: 50px 0;\n        }\n\n        .hero__secondary {\n          padding-block: 0 50px;\n          padding-inline: 40px 50px;\n        }\n\n        ::slotted(.button[slot='primary-content']) {\n          margin-block-start: 8px !important;\n        }\n\n        ::slotted(h1[slot='primary-content']) {\n          margin-block-end: 18px !important;\n        }\n      }\n\n      @container (min-width: 900px) {\n        .hero__primary {\n          margin-block: 0 40px;\n          margin-inline: 83px 0;\n        }\n\n        .hero__secondary {\n          padding-block: 0 83px;\n          padding-inline: 40px 83px;\n        }\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  h,\n  ComponentInterface,\n  VNode,\n  State,\n  Element,\n  Watch,\n  Host,\n} from '@stencil/core';\n/**\n * Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.\n * @slot primary-content - title, leading paragraph and CTA\n * @slot breadcrumb - each individual bread crumb should be assigned seperately\n * @slot secondary-content - free form secondary content.\n * @slot icon-box - free form icon box container\n * @slot icon-box-item - seperate icon box items. Designed to contain 1 icon and 1 text element.\n * @slot secondary-ctas - CTAs. each individual button should be assigned seperately\n * @slot quote - quote content\n * @slot quote-author - quote author\n * @slot scrim - optional background overlay (e.g. faded colour or gradient)\n * @slot background - custom background. Only active when img-src is empty\n * @slot back-btn - a back button.\n */\n@Component({\n  tag: 'nano-hero',\n  styleUrl: 'hero.scss',\n  shadow: true,\n})\nexport class Hero implements ComponentInterface {\n  private mo?: MutationObserver;\n\n  @Element() host: HTMLNanoHeroElement;\n\n  @State() hasIconBox: boolean;\n  @State() hasScrim: boolean;\n  @State() hasSecondaryContent: boolean;\n  @State() hasQuote: boolean;\n  @State() hasBg: boolean;\n  @State() hasBackBtn: boolean;\n  @State() hasCtas: boolean;\n  @State() breadCrumbs: Element[];\n  @Watch('breadCrumbs')\n  breadCrumbChange() {\n    // safari doesn't support ::slotted()::after ... so this :/\n    this.breadCrumbs\n      .filter(\n        (crumb) =>\n          crumb.tagName === 'A' &&\n          !crumb.nextElementSibling.classList.contains('slash')\n      )\n      .forEach((crumb) => {\n        crumb.insertAdjacentHTML(\n          'afterend',\n          '<span slot=\"breadcrumb\" class=\"slash\">/</span>'\n        );\n      });\n  }\n  @State() iconBoxItems: Element[];\n  @Watch('iconBoxItems')\n  iconBoxItemChange() {\n    this.iconBoxItems.forEach((item) => item.classList.remove('last'));\n    if (\n      this.iconBoxItems[this.iconBoxItems.length - 1] &&\n      this.iconBoxItems[this.iconBoxItems.length - 1].classList\n    )\n      this.iconBoxItems[this.iconBoxItems.length - 1].classList.add('last');\n  }\n\n  /** src for background image. For more control use the `background` slot instead. */\n  @Prop() imgSrc?: string;\n\n  /** Optional list string providing media sizes with corresponding image srcs.\n   * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` */\n  @Prop() imgSrcSet?: string = null;\n\n  /** The Break Point width that the hero component will change to the large view. Defaults to the XL grid size (900px) */\n  @Prop() largeScreenBP: number = 900;\n\n  /** Base style for the hero. Either 'light' (white bg / dark text), or 'dark' (dark bg / white text) */\n  @Prop() theme: 'dark' | 'light' = 'dark';\n\n  /** Set the content structure level of the hero. Defaults to 'top'  */\n  @Prop() level: 'top' | 'sub' = 'top';\n\n  private slotChangeObserver() {\n    if (!window['MutationObserver']) return;\n\n    if (this.mo) this.mo.disconnect();\n    const mo = (this.mo = new MutationObserver(() =>\n      this.processSlottedContent()\n    ));\n    mo.observe(this.host, { childList: true });\n  }\n\n  // Event handlers\n\n  private processSlottedContent() {\n    this.hasCtas = !!this.host.querySelector('[slot=\"secondary-ctas\"]');\n    this.iconBoxItems = Array.from(\n      this.host.querySelectorAll('[slot=\"icon-box-item\"]')\n    );\n    this.hasIconBox =\n      !!this.host.querySelector('[slot=\"icon-box\"]') ||\n      !!this.iconBoxItems.length;\n    this.hasScrim = !!this.host.querySelector('[slot=\"scrim\"]');\n    this.breadCrumbs = Array.from(\n      this.host.querySelectorAll('[slot=\"breadcrumb\"]')\n    );\n    this.hasSecondaryContent =\n      !!this.host.querySelector('[slot=\"icon-box\"]') ||\n      !!this.host.querySelector('[slot=\"quote\"]') ||\n      !!this.host.querySelector('[slot=\"icon-box-item\"]') ||\n      !!this.host.querySelector('[slot=\"secondary-content\"]');\n    this.hasBg =\n      !!this.host.querySelector('[slot=\"background\"]') || !!this.imgSrc;\n    this.hasBackBtn = !!this.host.querySelector('[slot=\"back-btn\"]');\n    this.hasQuote = !!this.host.querySelector('[slot=\"quote\"]');\n  }\n\n  // Component lifecycle\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n  }\n\n  componentWillLoad() {\n    this.processSlottedContent();\n  }\n\n  private HeroContent = (): VNode[] => {\n    return [\n      !this.hasIconBox && this.hasCtas ? (\n        <div class=\"hero__ctas\">\n          <slot name=\"secondary-ctas\" />\n        </div>\n      ) : (\n        ''\n      ),\n      <div class=\"hero__scrim\">\n        <slot name=\"scrim\" />\n      </div>,\n      <nano-grid class=\"hero__content\" xlCols={2} xlSize={this.largeScreenBP}>\n        <div grid-states=\"xl-col-span-2\">\n          <div class=\"hero__breadcrumbs\">\n            <slot name=\"breadcrumb\" />\n          </div>\n        </div>\n        <div\n          grid-states={\n            this.hasSecondaryContent\n              ? 'xl-col-span-1 xl-col-start-1 xl-row-start-2'\n              : 'xl-col-span-2 xl-col-start-1 xl-row-start-2'\n          }\n        >\n          <div class=\"hero__primary\">\n            <div class=\"hero__primary-content\">\n              <slot name=\"back-btn\" />\n              <div>\n                <slot name=\"primary-content\" />\n              </div>\n            </div>\n          </div>\n        </div>\n        {this.hasSecondaryContent && (\n          <div grid-states=\"xl-col-span-1 xl-col-start-2 xl-row-start-2\">\n            <div class=\"hero__secondary\">\n              <slot name=\"secondary-content\" />\n              {this.hasIconBox && (\n                <div class=\"hero__icon-box\">\n                  <slot name=\"icon-box\" />\n                  <slot name=\"icon-box-item\" />\n                </div>\n              )}\n              {this.hasQuote && (\n                <div class=\"hero__quote-content\">\n                  <span class=\"hero__quote\">\n                    <slot name=\"quote\" />\n                  </span>\n                  <div class=\"hero__quote-author\">\n                    <slot name=\"quote-author\" />\n                  </div>\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n      </nano-grid>,\n    ];\n  };\n\n  render() {\n    const rtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host>\n        <div\n          class={{\n            hero: true,\n            'hero--light': this.theme === 'light',\n            'hero--secondary': this.hasSecondaryContent,\n            'hero--iconbox': this.hasIconBox,\n            'hero--rtl': rtl,\n            'hero--scrim': this.hasScrim,\n            'hero--breadcrumb': !!this.breadCrumbs.length,\n            'hero--hasbg': this.hasBg,\n            'hero--backbtn': this.hasBackBtn,\n            'hero--sub': this.level === 'sub',\n          }}\n        >\n          <div class=\"hero__bg-wrap\">\n            {!!this.imgSrc && (\n              <nano-img\n                class=\"hero__img\"\n                lazy={false}\n                background\n                srcSet={this.imgSrcSet}\n                src={this.imgSrc}\n              >\n                <this.HeroContent />\n              </nano-img>\n            )}\n            {!this.imgSrc && [\n              <div class=\"hero__bg-slot\">\n                <slot name=\"background\" />\n              </div>,\n              <this.HeroContent />,\n            ]}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,c as s,h as e,g as i}from"./index-9695db0a.js";import{f as n}from"./scroll-parent-bab1cbf7.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);this.ioCallback=t=>{t.forEach((t=>{this.nanoIntersectionChange.emit(t);if(t.isIntersecting)this.nanoIntersecting.emit(t);if(!t.isIntersecting)this.nanoNotIntersecting.emit(t)}))};this.handleSlotChange=()=>{this.addIO()};this.root="auto";this.rootMargin=undefined;this.threshold=undefined}get observerOptions(){const t={};if(!!this._root)t.root=this._root;if(this.rootMargin)t.rootMargin=this.rootMargin;if(this.threshold)t.threshold=this._threshold;return t}get elements(){const t=this.defaultSlot?.assignedElements()||[];return t.flatMap((t=>{const s=getComputedStyle(t);if(s.display.includes("contents"))return Array.from(t.children);else return t}))}handleRootChange(){if(!this.root){this._root=undefined;this.removeIO();return}let t;if(this.root==="auto"){t=n(this.host)}else if(this.root==="root"){t=undefined}else{t=this.root}if(t===document.documentElement)t=undefined;if(t===this._root)return;this._root=t;this.addIO()}handleThresholdChange(){if(!this.threshold){this._threshold=undefined;return}if(this.threshold.includes(",")){this._threshold=this.threshold.split(",").map((t=>Number(t)));return}this._threshold=Number(this.threshold)}addIO(){if(!window["IntersectionObserver"]||!this.elements?.length)return;if(this.io)this.removeIO();const t=this.io=new IntersectionObserver(this.ioCallback,this.observerOptions);this.elements?.forEach((s=>{t.observe(s)}))}removeIO(){if(!this.io)return;this.io.disconnect();this.io=undefined}connectedCallback(){this.handleThresholdChange();this.handleRootChange()}disconnectedCallback(){this.removeIO();this.root=this._root=undefined}render(){return e("slot",{ref:t=>this.defaultSlot=t,onSlotchange:this.handleSlotChange})}get host(){return i(this)}static get watchers(){return{root:["handleRootChange"],threshold:["handleThresholdChange"]}}};h.style="nano-intersection-observe { display: contents }";export{h as nano_intersection_observe};
+//# sourceMappingURL=nano-intersection-observe.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["IntersectionObserve","this","ioCallback","entries","forEach","entry","nanoIntersectionChange","emit","isIntersecting","nanoIntersecting","nanoNotIntersecting","handleSlotChange","addIO","observerOptions","opts","_root","root","rootMargin","threshold","_threshold","elements","slotted","defaultSlot","assignedElements","flatMap","el","style","getComputedStyle","display","includes","Array","from","children","handleRootChange","undefined","removeIO","newRoot","findScrollParent","host","document","documentElement","handleThresholdChange","split","map","numStr","Number","window","length","io","IntersectionObserver","observe","disconnect","connectedCallback","disconnectedCallback","render","h","ref","slot","onSlotchange"],"sources":["./src/components/intersection-observe/intersection-observe.tsx"],"sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Watch,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { findScrollParent } from '../../utils/scroll-parent';\n\n/**\n * A thin, declarative interface to the IntersectionObserver API.\n * @slot - Main slot for any content.\n */\n@Component({\n  tag: 'nano-intersection-observe',\n  styles: `nano-intersection-observe { display: contents }`,\n  shadow: true,\n})\nexport class IntersectionObserve implements ComponentInterface {\n  private io: IntersectionObserver;\n  private _root: Element | Document;\n  private _threshold: number | number[];\n  private defaultSlot: HTMLSlotElement;\n\n  get observerOptions() {\n    const opts: IntersectionObserverInit = {};\n\n    if (!!this._root) opts.root = this._root;\n    if (this.rootMargin) opts.rootMargin = this.rootMargin;\n    if (this.threshold) opts.threshold = this._threshold;\n\n    return opts;\n  }\n\n  get elements(): Element[] | undefined {\n    const slotted = this.defaultSlot?.assignedElements() || [];\n\n    return slotted.flatMap((el) => {\n      const style = getComputedStyle(el);\n      if (style.display.includes('contents')) return Array.from(el.children);\n      else return el;\n    });\n  }\n\n  @Element() host: HTMLNanoIntersectionObserveElement;\n\n  /** The element that is used as the viewport for checking visibility of the target. Must be the ancestor of the target.\n   * Defaults to an automatic check for ancestors that `overflow: auto` or otherwise the `Document`. */\n  @Prop() root: globalThis.Element | 'root' | 'auto' = 'auto';\n\n  @Watch('root')\n  handleRootChange() {\n    if (!this.root) {\n      this._root = undefined;\n      this.removeIO();\n      return;\n    }\n\n    let newRoot;\n\n    if (this.root === 'auto') {\n      // try to find nearest scrolling parent\n      newRoot = findScrollParent(this.host);\n    } else if (this.root === 'root') {\n      newRoot = undefined;\n    } else {\n      // root is set explicitly\n      newRoot = this.root;\n    }\n\n    // if it's the document - unset as that's IO's default\n    if (newRoot === document.documentElement) newRoot = undefined;\n    // if new root is what we already have - ignore\n    if (newRoot === this._root) return;\n\n    // cache and setup io\n    this._root = newRoot;\n    this.addIO();\n  }\n\n  /**\n   * Margin around the root. Can be similar to CSS margins property, e.g. \"10px 20px 30px 40px\" (top, right, bottom, left).\n   * The values can be percentages. This set of values serves to grow or shrink each side of the root element's\n   * bounding box before computing intersections. Defaults to zeros. */\n  @Prop() rootMargin?: string;\n\n  /**\n   * Indicate at what percentage of the target's visibility the observer's callback should be executed.\n   * If you only want to detect when visibility passes the 50% mark, you can use a value of '0.5'.\n   * If you want the callback to run every time visibility passes another '25%',\n   * you would specify a string of values (separated by ',') array '0, 0.25, 0.5, 0.75, 1'.\n   * A value of '1.0' means that the threshold isn't considered passed until every pixel is visible.\n   */\n  @Prop() threshold?: string;\n\n  @Watch('threshold')\n  handleThresholdChange() {\n    if (!this.threshold) {\n      this._threshold = undefined;\n      return;\n    }\n\n    if (this.threshold.includes(',')) {\n      this._threshold = this.threshold\n        .split(',')\n        .map((numStr) => Number(numStr));\n      return;\n    }\n\n    this._threshold = Number(this.threshold);\n  }\n\n  /** A resize break point is switched on or off */\n  @Event() nanoIntersectionChange!: EventEmitter<IntersectionObserverEntry>;\n\n  /** A resize break point is switched on or off */\n  @Event() nanoIntersecting!: EventEmitter<IntersectionObserverEntry>;\n\n  /** A resize break point is switched on or off */\n  @Event() nanoNotIntersecting!: EventEmitter<IntersectionObserverEntry>;\n\n  private ioCallback: IntersectionObserverCallback = (entries) => {\n    entries.forEach((entry) => {\n      this.nanoIntersectionChange.emit(entry);\n      if (entry.isIntersecting) this.nanoIntersecting.emit(entry);\n      if (!entry.isIntersecting) this.nanoNotIntersecting.emit(entry);\n    });\n  };\n\n  private handleSlotChange = () => {\n    this.addIO();\n  };\n\n  private addIO() {\n    if (!window['IntersectionObserver'] || !this.elements?.length) return;\n    if (this.io) this.removeIO();\n\n    const io = (this.io = new IntersectionObserver(\n      this.ioCallback,\n      this.observerOptions\n    ));\n    this.elements?.forEach((el) => {\n      io.observe(el);\n    });\n  }\n\n  private removeIO() {\n    if (!this.io) return;\n\n    this.io.disconnect();\n    this.io = undefined;\n  }\n\n  connectedCallback(): void {\n    this.handleThresholdChange();\n    this.handleRootChange();\n  }\n\n  disconnectedCallback(): void {\n    this.removeIO();\n    this.root = this._root = undefined;\n  }\n\n  render() {\n    return (\n      <slot\n        ref={(slot) => (this.defaultSlot = slot as HTMLSlotElement)}\n        onSlotchange={this.handleSlotChange}\n      />\n    );\n  }\n}\n"],"mappings":";;;mHAqBaA,EAAmB,M,oMAuGtBC,KAAAC,WAA4CC,IAClDA,EAAQC,SAASC,IACfJ,KAAKK,uBAAuBC,KAAKF,GACjC,GAAIA,EAAMG,eAAgBP,KAAKQ,iBAAiBF,KAAKF,GACrD,IAAKA,EAAMG,eAAgBP,KAAKS,oBAAoBH,KAAKF,EAAM,GAC/D,EAGIJ,KAAAU,iBAAmB,KACzBV,KAAKW,OAAO,E,UAlFuC,O,mDAxBjDC,sBACF,MAAMC,EAAiC,GAEvC,KAAMb,KAAKc,MAAOD,EAAKE,KAAOf,KAAKc,MACnC,GAAId,KAAKgB,WAAYH,EAAKG,WAAahB,KAAKgB,WAC5C,GAAIhB,KAAKiB,UAAWJ,EAAKI,UAAYjB,KAAKkB,WAE1C,OAAOL,C,CAGLM,eACF,MAAMC,EAAUpB,KAAKqB,aAAaC,oBAAsB,GAExD,OAAOF,EAAQG,SAASC,IACtB,MAAMC,EAAQC,iBAAiBF,GAC/B,GAAIC,EAAME,QAAQC,SAAS,YAAa,OAAOC,MAAMC,KAAKN,EAAGO,eACxD,OAAOP,CAAE,G,CAWlBQ,mBACE,IAAKhC,KAAKe,KAAM,CACdf,KAAKc,MAAQmB,UACbjC,KAAKkC,WACL,M,CAGF,IAAIC,EAEJ,GAAInC,KAAKe,OAAS,OAAQ,CAExBoB,EAAUC,EAAiBpC,KAAKqC,K,MAC3B,GAAIrC,KAAKe,OAAS,OAAQ,CAC/BoB,EAAUF,S,KACL,CAELE,EAAUnC,KAAKe,I,CAIjB,GAAIoB,IAAYG,SAASC,gBAAiBJ,EAAUF,UAEpD,GAAIE,IAAYnC,KAAKc,MAAO,OAG5Bd,KAAKc,MAAQqB,EACbnC,KAAKW,O,CAmBP6B,wBACE,IAAKxC,KAAKiB,UAAW,CACnBjB,KAAKkB,WAAae,UAClB,M,CAGF,GAAIjC,KAAKiB,UAAUW,SAAS,KAAM,CAChC5B,KAAKkB,WAAalB,KAAKiB,UACpBwB,MAAM,KACNC,KAAKC,GAAWC,OAAOD,KAC1B,M,CAGF3C,KAAKkB,WAAa0B,OAAO5C,KAAKiB,U,CAwBxBN,QACN,IAAKkC,OAAO,0BAA4B7C,KAAKmB,UAAU2B,OAAQ,OAC/D,GAAI9C,KAAK+C,GAAI/C,KAAKkC,WAElB,MAAMa,EAAM/C,KAAK+C,GAAK,IAAIC,qBACxBhD,KAAKC,WACLD,KAAKY,iBAEPZ,KAAKmB,UAAUhB,SAASqB,IACtBuB,EAAGE,QAAQzB,EAAG,G,CAIVU,WACN,IAAKlC,KAAK+C,GAAI,OAEd/C,KAAK+C,GAAGG,aACRlD,KAAK+C,GAAKd,S,CAGZkB,oBACEnD,KAAKwC,wBACLxC,KAAKgC,kB,CAGPoB,uBACEpD,KAAKkC,WACLlC,KAAKe,KAAOf,KAAKc,MAAQmB,S,CAG3BoB,SACE,OACEC,EAAA,QACEC,IAAMC,GAAUxD,KAAKqB,YAAcmC,EACnCC,aAAczD,KAAKU,kB"}

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

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as i,d as s,h as e,a as n,g as r}from"./index-9695db0a.js";const h=class{constructor(e){t(this,e);this.nanoResizeStateChange=i(this,"nanoResizeStateChange",7);this.nanoResizeObserverReady=i(this,"nanoResizeObserverReady",7);this.nanoResizeContentFitChange=i(this,"nanoResizeContentFitChange",7);this.nanoResize=i(this,"nanoResize",7);this.isReady=false;this.assessChanges=()=>{if(!this.currentWidth&&!this.currentHeight)return;s((()=>this.assesContentFit()));if(!this.states||!this.appliedStates)return;const t={h:new Map,w:new Map};let i=false;Object.keys(this.appliedStates).forEach((s=>{let e;if(s==="h")e=this.currentHeight;else e=this.currentWidth;this.appliedStates[s].forEach(((n,r)=>{if(e>=r&&n.applied===false){n.applied=true;t[s].set(r,n);i=true}else if(e<r&&n.applied===true){n.applied=false;t[s].set(r,n);i=true}}))}));if(i)this.applyChanges(t);else if(!this.classNames.includes("is-ready"))this.classNames=[...this.classNames,"is-ready"]};this.currentWidth=undefined;this.currentHeight=undefined;this.classNames=[];this.contentFitX=null;this.contentFitY=null;this.notifyContentFit=undefined;this.states=undefined}classNameChange(){this.host.className=this.classNames.join(" ");if(!this.isReady&&this.classNames.includes("is-ready")){this.isReady=true;this.nanoResizeObserverReady.emit()}}newStatesProp(){this.statesChanged()}dimensionChanged(){this.assessChanges()}statesChanged(){if(!this.states)return;const t=t=>{const i=t.split(/(\d+)/).filter((t=>t.length));return{bp:parseInt(i[0]),dir:i[1]}};this.appliedStates={h:new Map,w:new Map};this.states.split(",").map((i=>{i=i.trim();if(i.includes(" ")){const[s,...e]=i.split(" ");const{bp:n,dir:r}=t(s);this.appliedStates[r].set(n,{states:e,applied:false})}else{const{bp:s,dir:e}=t(i);this.appliedStates[e].set(s,{applied:false})}}))}assesContentFit(){if(!this.notifyContentFit)return;const t=t=>{if(window.getComputedStyle(t).display!=="contents")return t;const i=t=>Array.from(t.children).find((t=>{if(window.getComputedStyle(t).display!=="contents")return t;i(t)}));return i(t)};let i=false;const s=t(this.host.firstElementChild);if(s){if(this.notifyContentFit&&this.notifyContentFit.includes("x")){if(this.currentWidth<s.scrollWidth&&this.contentFitX!==false){i=true;this.contentFitX=false}else if(this.currentWidth>=s.scrollWidth&&this.contentFitX!==true){i=true;this.contentFitX=true}}if(this.notifyContentFit&&this.notifyContentFit.includes("y")){if(this.currentHeight<s.scrollHeight&&this.contentFitY!==false){i=true;this.contentFitY=false}else if(this.currentHeight>=s.scrollHeight&&this.contentFitY!==true){i=true;this.contentFitY=true}}if(i){this.nanoResizeContentFitChange.emit({x:this.contentFitX,y:this.contentFitY})}}}applyChanges(t){if(!this.states)return;let i=[...this.classNames];Object.keys(t).forEach((s=>{t[s].forEach((t=>{if(!t.states)return;t.states.map((s=>{if(t.applied){i.push(s);i=i.filter((t=>t!=="not-"+s))}else{i.push("not-"+s);i=i.filter((t=>t!==s))}}))}))}));this.classNames=["is-ready",...i];this.nanoResizeStateChange.emit(this.toSimpleObj(t))}toSimpleObj(t){const i={};Object.keys(t).forEach((s=>{t[s].forEach(((t,e)=>{i[e+s]=t.applied}))}));return i}attachRO(){if(!window["ResizeObserver"])return;this.ro=new ResizeObserver((t=>{const{width:i,height:s}=this.host.getBoundingClientRect();this.currentWidth=Math.ceil(i);this.currentHeight=Math.ceil(s);this.nanoResize.emit(t)}));this.ro.observe(this.host)}componentWillLoad(){this.classNames=Array.from(this.host.classList);this.statesChanged();this.applyChanges(this.appliedStates);if(!this.currentWidth&&!this.currentHeight){s((()=>{const{width:t,height:i}=this.host.getBoundingClientRect();this.currentWidth=Math.ceil(t);this.currentHeight=Math.ceil(i)}))}else{this.assessChanges()}}connectedCallback(){if(!this.ro)this.attachRO()}disconnectedCallback(){if(this.ro)this.ro.disconnect()}render(){return e(n,null,e("slot",null),!!this.notifyContentFit&&(this.contentFitX!==null||this.contentFitY!==null)&&[!!this.contentFitX?e("slot",{name:"content-fit-x"}):e("slot",{name:"content-nofit-x"}),!!this.contentFitY?e("slot",{name:"content-fit-y"}):e("slot",{name:"content-nofit-y"})])}get host(){return r(this)}static get watchers(){return{classNames:["classNameChange"],states:["newStatesProp","statesChanged"],currentHeight:["dimensionChanged"],currentWidth:["dimensionChanged"]}}};h.style="nano-resize-observe { display: contents }";const a=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--base-color-rgb:var(--nano-skeleton-rgb, 228 230 232);--color:var(--nano-skeleton-color, rgb(var(--base-color-rgb) / 100%));--tint:var(--nano-skeleton-tint, rgb(var(--base-color-rgb) / 50%));display:block;position:relative;border-radius:0.25rem;min-block-size:1em;line-height:inherit}.skeleton{display:flex;min-inline-size:100%;min-block-size:100%;border-radius:inherit;line-height:inherit}.skeleton__indicator{flex:1 1 auto;background:var(--color);border-radius:inherit;line-height:inherit}.skeleton.animate .skeleton__indicator{background:linear-gradient(270deg, var(--tint), var(--color), var(--color), var(--tint));background-size:400% 100%;animation:loader 6s ease-in-out infinite}@keyframes loader{0%{background-position:200% 0}100%{background-position:-200% 0}}";const o=class{constructor(i){t(this,i);this.animated=true}render(){return e("div",{class:{skeleton:true,animate:this.animated}},e("div",{class:"skeleton__indicator"}," "))}};o.style=a;export{h as nano_resize_observe,o as nano_skeleton};
+import{r as t,c as i,d as s,h as e,a as n,g as r}from"./index-9695db0a.js";const h=class{constructor(e){t(this,e);this.nanoResizeStateChange=i(this,"nanoResizeStateChange",7);this.nanoResizeObserverReady=i(this,"nanoResizeObserverReady",7);this.nanoResizeContentFitChange=i(this,"nanoResizeContentFitChange",7);this.nanoResize=i(this,"nanoResize",7);this.isReady=false;this.assessChanges=()=>{if(!this.currentWidth&&!this.currentHeight)return;s((()=>this.assesContentFit()));if(!this.states||!this.appliedStates)return;const t={h:new Map,w:new Map};let i=false;Object.keys(this.appliedStates).forEach((s=>{let e;if(s==="h")e=this.currentHeight;else e=this.currentWidth;this.appliedStates[s].forEach(((n,r)=>{if(e>=r&&n.applied===false){n.applied=true;t[s].set(r,n);i=true}else if(e<r&&n.applied===true){n.applied=false;t[s].set(r,n);i=true}}))}));if(i)this.applyChanges(t);else if(!this.classNames.includes("is-ready"))this.classNames=[...this.classNames,"is-ready"]};this.currentWidth=undefined;this.currentHeight=undefined;this.classNames=[];this.contentFitX=null;this.contentFitY=null;this.notifyContentFit=undefined;this.states=undefined}classNameChange(){this.host.className=this.classNames.join(" ");if(!this.isReady&&this.classNames.includes("is-ready")){this.isReady=true;this.nanoResizeObserverReady.emit()}}newStatesProp(){this.statesChanged()}dimensionChanged(){this.assessChanges()}statesChanged(){if(!this.states)return;const t=t=>{const i=t.split(/(\d+)/).filter((t=>t.length));return{bp:parseInt(i[0]),dir:i[1]}};this.appliedStates={h:new Map,w:new Map};this.states.split(",").map((i=>{i=i.trim();if(i.includes(" ")){const[s,...e]=i.split(" ");const{bp:n,dir:r}=t(s);this.appliedStates[r].set(n,{states:e,applied:false})}else{const{bp:s,dir:e}=t(i);this.appliedStates[e].set(s,{applied:false})}}))}assesContentFit(){if(!this.notifyContentFit)return;const t=t=>{if(window.getComputedStyle(t).display!=="contents")return t;const i=t=>Array.from(t.children).find((t=>{if(window.getComputedStyle(t).display!=="contents")return t;i(t)}));return i(t)};let i=false;const s=t(this.host.firstElementChild);if(s){if(this.notifyContentFit&&this.notifyContentFit.includes("x")){if(this.currentWidth<s.scrollWidth&&this.contentFitX!==false){i=true;this.contentFitX=false}else if(this.currentWidth>=s.scrollWidth&&this.contentFitX!==true){i=true;this.contentFitX=true}}if(this.notifyContentFit&&this.notifyContentFit.includes("y")){if(this.currentHeight<s.scrollHeight&&this.contentFitY!==false){i=true;this.contentFitY=false}else if(this.currentHeight>=s.scrollHeight&&this.contentFitY!==true){i=true;this.contentFitY=true}}if(i){this.nanoResizeContentFitChange.emit({x:this.contentFitX,y:this.contentFitY})}}}applyChanges(t){if(!this.states)return;let i=[...this.classNames];Object.keys(t).forEach((s=>{t[s].forEach((t=>{if(!t.states)return;t.states.map((s=>{if(t.applied){i.push(s);i=i.filter((t=>t!=="not-"+s))}else{i.push("not-"+s);i=i.filter((t=>t!==s))}}))}))}));this.classNames=["is-ready",...i];this.nanoResizeStateChange.emit(this.toSimpleObj(t))}toSimpleObj(t){const i={};Object.keys(t).forEach((s=>{t[s].forEach(((t,e)=>{i[e+s]=t.applied}))}));return i}attachRO(){if(!window["ResizeObserver"])return;this.ro=new ResizeObserver((t=>{const{width:i,height:s}=this.host.getBoundingClientRect();this.currentWidth=Math.ceil(i);this.currentHeight=Math.ceil(s);this.nanoResize.emit(t)}));this.ro.observe(this.host)}componentWillLoad(){this.classNames=Array.from(this.host.classList);this.statesChanged();this.applyChanges(this.appliedStates);if(!this.currentWidth&&!this.currentHeight){s((()=>{const{width:t,height:i}=this.host.getBoundingClientRect();this.currentWidth=Math.ceil(t);this.currentHeight=Math.ceil(i)}))}else{this.assessChanges()}}connectedCallback(){if(!this.ro)this.attachRO()}disconnectedCallback(){if(this.ro)this.ro.disconnect()}render(){return e(n,null,e("slot",null),!!this.notifyContentFit&&(this.contentFitX!==null||this.contentFitY!==null)&&[!!this.contentFitX?e("slot",{name:"content-fit-x"}):e("slot",{name:"content-nofit-x"}),!!this.contentFitY?e("slot",{name:"content-fit-y"}):e("slot",{name:"content-nofit-y"})])}get host(){return r(this)}static get watchers(){return{classNames:["classNameChange"],states:["newStatesProp","statesChanged"],currentHeight:["dimensionChanged"],currentWidth:["dimensionChanged"]}}};h.style="nano-resize-observe { display: block }";const a=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--base-color-rgb:var(--nano-skeleton-rgb, 228 230 232);--color:var(--nano-skeleton-color, rgb(var(--base-color-rgb) / 100%));--tint:var(--nano-skeleton-tint, rgb(var(--base-color-rgb) / 50%));display:block;position:relative;border-radius:0.25rem;min-block-size:1em;line-height:inherit}.skeleton{display:flex;min-inline-size:100%;min-block-size:100%;border-radius:inherit;line-height:inherit}.skeleton__indicator{flex:1 1 auto;background:var(--color);border-radius:inherit;line-height:inherit}.skeleton.animate .skeleton__indicator{background:linear-gradient(270deg, var(--tint), var(--color), var(--color), var(--tint));background-size:400% 100%;animation:loader 6s ease-in-out infinite}@keyframes loader{0%{background-position:200% 0}100%{background-position:-200% 0}}";const o=class{constructor(i){t(this,i);this.animated=true}render(){return e("div",{class:{skeleton:true,animate:this.animated}},e("div",{class:"skeleton__indicator"}," "))}};o.style=a;export{h as nano_resize_observe,o as nano_skeleton};
 //# sourceMappingURL=nano-resize-observe_2.entry.js.map

package/dist/nano-components/nano-resize-observe_2.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["ResizeObserve","this","isReady","assessChanges","currentWidth","currentHeight","readTask","assesContentFit","states","appliedStates","changedStates","h","Map","w","hasChanged","Object","keys","forEach","dimType","dim","state","bp","applied","set","applyChanges","classNames","includes","classNameChange","host","className","join","nanoResizeObserverReady","emit","newStatesProp","statesChanged","dimensionChanged","toBpDir","bpDir","bpDirSpl","split","filter","bs","length","parseInt","dir","map","st","trim","key","classes","notifyContentFit","findNonContentsEle","ele","window","getComputedStyle","display","recurse","e","Array","from","children","find","cEle","didChange","measureEle","firstElementChild","scrollWidth","contentFitX","scrollHeight","contentFitY","nanoResizeContentFitChange","x","y","changes","push","cl","nanoResizeStateChange","toSimpleObj","stateMaps","retObj","attachRO","ro","ResizeObserver","width","height","getBoundingClientRect","Math","ceil","nanoResize","observe","componentWillLoad","classList","connectedCallback","disconnectedCallback","disconnect","render","Host","name","skeletonCss","Skeleton","class","skeleton","animate","animated"],"sources":["./src/components/resize-observe/resize-observe.tsx","./src/components/skeleton/skeleton.scss?tag=nano-skeleton&encapsulation=shadow","./src/components/skeleton/skeleton.tsx"],"sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Host,\n  State,\n  Watch,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  readTask,\n} from '@stencil/core';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\ntype ResizeObserverState = { states?: string[]; applied?: boolean };\ninterface StateMaps {\n  h: Map<number, ResizeObserverState>;\n  w: Map<number, ResizeObserverState>;\n}\n\n/**\n * A Resize-Observer utility component.\n * Takes a string list of sizes and optional class-names.\n * Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * Additionally, can fire events when content no-longer fits within the element.\n * @slot - Main slot for any content.\n * @slot content-fit-x - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off\n * @slot content-nofit-x - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off\n * @slot content-fit-y - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off\n * @slot content-nofit-y - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off\n */\n@Component({\n  tag: 'nano-resize-observe',\n  styles: `nano-resize-observe { display: contents }`,\n  shadow: true,\n})\nexport class ResizeObserve implements ComponentInterface {\n  private ro: ResizeObserver;\n  private appliedStates: StateMaps;\n  private isReady = false;\n\n  @Element() host: HTMLNanoResizeObserveElement;\n  @State() currentWidth: number;\n  @State() currentHeight: number;\n  @State() classNames: string[] = [];\n  @State() contentFitX = null;\n  @State() contentFitY = null;\n\n  @Watch('classNames')\n  classNameChange() {\n    this.host.className = this.classNames.join(' ');\n    if (!this.isReady && this.classNames.includes('is-ready')) {\n      this.isReady = true;\n      this.nanoResizeObserverReady.emit();\n    }\n  }\n\n  /** Fire `nanoResizeContentFitChange` events notifying\n   * whether content currently fits or does not on the x, y or both axis'.\n   * Also makes the `content-fit-...` slots available */\n  @Prop() notifyContentFit: 'x' | 'y' | 'xy';\n\n  /** string list of sizes and optional class-names.\n   * Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\n   * Format: `states=\"800w, 300h class1 class2\"` */\n  @Prop() states: string;\n\n  @Watch('states')\n  newStatesProp() {\n    this.statesChanged();\n  }\n\n  /** A resize break point is switched on or off */\n  @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\n\n  /** Fires after the initial loading and assessment */\n  @Event() nanoResizeObserverReady!: EventEmitter<void>;\n\n  /** Fires when the content either begins or stops fitting.\n   * Will only work when `notifyContentFit` is set. */\n  @Event() nanoResizeContentFitChange!: EventEmitter<{\n    x: boolean;\n    y: boolean;\n  }>;\n\n  /** Fires after any resizing */\n  @Event() nanoResize!: EventEmitter<ResizeObserverEntry[]>;\n\n  @Watch('currentHeight')\n  @Watch('currentWidth')\n  dimensionChanged() {\n    this.assessChanges();\n  }\n\n  @Watch('states')\n  statesChanged() {\n    if (!this.states) return;\n\n    const toBpDir = (bpDir: string) => {\n      const bpDirSpl = bpDir.split(/(\\d+)/).filter((bs) => bs.length);\n      return { bp: parseInt(bpDirSpl[0]), dir: bpDirSpl[1] };\n    };\n    this.appliedStates = { h: new Map(), w: new Map() };\n\n    // parse state string\n    this.states.split(',').map((st) => {\n      st = st.trim();\n      if (st.includes(' ')) {\n        const [key, ...classes] = st.split(' ');\n        const { bp, dir } = toBpDir(key);\n        this.appliedStates[dir as keyof StateMaps].set(bp, {\n          states: classes,\n          applied: false,\n        });\n      } else {\n        const { bp, dir } = toBpDir(st);\n        this.appliedStates[dir as keyof StateMaps].set(bp, { applied: false });\n      }\n    });\n  }\n\n  private assesContentFit() {\n    if (!this.notifyContentFit) return;\n\n    const findNonContentsEle = (ele: Element) => {\n      if (window.getComputedStyle(ele).display !== 'contents') return ele;\n\n      const recurse = (e: Element): Element | null => {\n        return Array.from(e.children).find((cEle: HTMLElement) => {\n          if (window.getComputedStyle(cEle).display !== 'contents') return cEle;\n          recurse(cEle);\n        });\n      };\n      return recurse(ele);\n    };\n\n    let didChange = false;\n    const measureEle = findNonContentsEle(this.host.firstElementChild);\n\n    if (measureEle) {\n      if (this.notifyContentFit && this.notifyContentFit.includes('x')) {\n        if (\n          this.currentWidth < measureEle.scrollWidth &&\n          this.contentFitX !== false\n        ) {\n          didChange = true;\n          this.contentFitX = false;\n        } else if (\n          this.currentWidth >= measureEle.scrollWidth &&\n          this.contentFitX !== true\n        ) {\n          didChange = true;\n          this.contentFitX = true;\n        }\n      }\n\n      if (this.notifyContentFit && this.notifyContentFit.includes('y')) {\n        if (\n          this.currentHeight < measureEle.scrollHeight &&\n          this.contentFitY !== false\n        ) {\n          didChange = true;\n          this.contentFitY = false;\n        } else if (\n          this.currentHeight >= measureEle.scrollHeight &&\n          this.contentFitY !== true\n        ) {\n          didChange = true;\n          this.contentFitY = true;\n        }\n      }\n\n      if (didChange) {\n        this.nanoResizeContentFitChange.emit({\n          x: this.contentFitX,\n          y: this.contentFitY,\n        });\n      }\n    }\n  }\n\n  private assessChanges = () => {\n    if (!this.currentWidth && !this.currentHeight) return;\n    readTask(() => this.assesContentFit());\n\n    if (!this.states || !this.appliedStates) return;\n\n    const changedStates: StateMaps = { h: new Map(), w: new Map() };\n    let hasChanged = false;\n\n    Object.keys(this.appliedStates).forEach((dimType) => {\n      let dim: number;\n      if (dimType === 'h') dim = this.currentHeight;\n      else dim = this.currentWidth;\n\n      this.appliedStates[dimType].forEach(\n        (state: ResizeObserverState, bp: number) => {\n          if (dim >= bp && state.applied === false) {\n            state.applied = true;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          } else if (dim < bp && state.applied === true) {\n            state.applied = false;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          }\n        }\n      );\n    });\n    if (hasChanged) this.applyChanges(changedStates);\n    else if (!this.classNames.includes('is-ready'))\n      this.classNames = [...this.classNames, 'is-ready'];\n  };\n\n  private applyChanges(changes: StateMaps) {\n    if (!this.states) return;\n\n    let classNames = [...this.classNames];\n    Object.keys(changes).forEach((dimType: keyof StateMaps) => {\n      changes[dimType].forEach((state) => {\n        if (!state.states) return;\n        state.states.map((st) => {\n          if (state.applied) {\n            classNames.push(st);\n            classNames = classNames.filter((cl) => cl !== 'not-' + st);\n          } else {\n            classNames.push('not-' + st);\n            classNames = classNames.filter((cl) => cl !== st);\n          }\n        });\n      });\n    });\n    this.classNames = ['is-ready', ...classNames];\n    this.nanoResizeStateChange.emit(this.toSimpleObj(changes));\n  }\n\n  private toSimpleObj(stateMaps: StateMaps) {\n    const retObj = {};\n    Object.keys(stateMaps).forEach((dimType: keyof StateMaps) => {\n      stateMaps[dimType].forEach((state: ResizeObserverState, bp: number) => {\n        retObj[bp + dimType] = state.applied;\n      });\n    });\n    return retObj;\n  }\n\n  private attachRO() {\n    if (!window['ResizeObserver']) return;\n\n    this.ro = new ResizeObserver((ro) => {\n      const { width, height } = this.host.getBoundingClientRect();\n      this.currentWidth = Math.ceil(width);\n      this.currentHeight = Math.ceil(height);\n      this.nanoResize.emit(ro);\n    });\n    this.ro.observe(this.host);\n  }\n\n  componentWillLoad() {\n    this.classNames = Array.from(this.host.classList);\n\n    this.statesChanged();\n    // set all class as 'not-' by deafult\n    this.applyChanges(this.appliedStates);\n\n    if (!this.currentWidth && !this.currentHeight) {\n      readTask(() => {\n        const { width, height } = this.host.getBoundingClientRect();\n        this.currentWidth = Math.ceil(width);\n        this.currentHeight = Math.ceil(height);\n      });\n    } else {\n      this.assessChanges();\n    }\n  }\n\n  connectedCallback() {\n    if (!this.ro) this.attachRO();\n  }\n\n  disconnectedCallback() {\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n        {!!this.notifyContentFit &&\n          (this.contentFitX !== null || this.contentFitY !== null) && [\n            !!this.contentFitX ? (\n              <slot name=\"content-fit-x\" />\n            ) : (\n              <slot name=\"content-nofit-x\" />\n            ),\n            !!this.contentFitY ? (\n              <slot name=\"content-fit-y\" />\n            ) : (\n              <slot name=\"content-nofit-y\" />\n            ),\n          ]}\n      </Host>\n    );\n  }\n}\n","@import '../../global/style/nano-theme/components';\n\n:host {\n  /**\n   * @prop --base-color-rgb: default #{$skeleton-color-rgb};\n   * @prop --color: default var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n   * @prop --tint: default var(--nano-skeleton-tint, rgba(var(--base-color-rgb), .3));\n   */\n\n  --base-color-rgb: #{$skeleton-color-rgb};\n  --color: var(--nano-skeleton-color, rgb(var(--base-color-rgb) / 100%));\n  --tint: var(--nano-skeleton-tint, rgb(var(--base-color-rgb) / 50%));\n\n  display: block;\n  position: relative;\n  border-radius: 0.25rem;\n  min-block-size: 1em;\n  line-height: inherit;\n}\n\n.skeleton {\n  display: flex;\n  min-inline-size: 100%;\n  min-block-size: 100%;\n  border-radius: inherit;\n  line-height: inherit;\n}\n\n.skeleton__indicator {\n  flex: 1 1 auto;\n  background: var(--color);\n  border-radius: inherit;\n  line-height: inherit;\n}\n\n.skeleton.animate .skeleton__indicator {\n  background:\n    linear-gradient(\n      270deg,\n      var(--tint),\n      var(--color),\n      var(--color),\n      var(--tint)\n    );\n  background-size: 400% 100%;\n  animation: loader 6s ease-in-out infinite;\n}\n\n@keyframes loader {\n  0% {\n    background-position: 200% 0;\n  }\n\n  100% {\n    background-position: -200% 0;\n  }\n}\n","import { Component, Prop, h, ComponentInterface } from '@stencil/core';\n\n/**\n * Skeletons are used to show where content will eventually be drawn.\n * Simple containers for scaffolding layouts that mimic what users will see when content has finished loading.\n * Prevents large areas of empty space during asynchronous operations.\n */\n@Component({\n  tag: 'nano-skeleton',\n  styleUrl: 'skeleton.scss',\n  shadow: true,\n})\nexport class Skeleton implements ComponentInterface {\n  /** When `true`, the skeleton will animate. */\n  @Prop() animated = true;\n\n  render() {\n    return (\n      <div\n        class={{\n          skeleton: true,\n          animate: this.animated,\n        }}\n      >\n        <div class=\"skeleton__indicator\">&nbsp;</div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["ResizeObserve","this","isReady","assessChanges","currentWidth","currentHeight","readTask","assesContentFit","states","appliedStates","changedStates","h","Map","w","hasChanged","Object","keys","forEach","dimType","dim","state","bp","applied","set","applyChanges","classNames","includes","classNameChange","host","className","join","nanoResizeObserverReady","emit","newStatesProp","statesChanged","dimensionChanged","toBpDir","bpDir","bpDirSpl","split","filter","bs","length","parseInt","dir","map","st","trim","key","classes","notifyContentFit","findNonContentsEle","ele","window","getComputedStyle","display","recurse","e","Array","from","children","find","cEle","didChange","measureEle","firstElementChild","scrollWidth","contentFitX","scrollHeight","contentFitY","nanoResizeContentFitChange","x","y","changes","push","cl","nanoResizeStateChange","toSimpleObj","stateMaps","retObj","attachRO","ro","ResizeObserver","width","height","getBoundingClientRect","Math","ceil","nanoResize","observe","componentWillLoad","classList","connectedCallback","disconnectedCallback","disconnect","render","Host","name","skeletonCss","Skeleton","class","skeleton","animate","animated"],"sources":["./src/components/resize-observe/resize-observe.tsx","./src/components/skeleton/skeleton.scss?tag=nano-skeleton&encapsulation=shadow","./src/components/skeleton/skeleton.tsx"],"sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Host,\n  State,\n  Watch,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  readTask,\n} from '@stencil/core';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\ntype ResizeObserverState = { states?: string[]; applied?: boolean };\ninterface StateMaps {\n  h: Map<number, ResizeObserverState>;\n  w: Map<number, ResizeObserverState>;\n}\n\n/**\n * A Resize-Observer utility component.\n * Takes a string list of sizes and optional class-names.\n * Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * Additionally, can fire events when content no-longer fits within the element.\n * @slot - Main slot for any content.\n * @slot content-fit-x - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off\n * @slot content-nofit-x - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off\n * @slot content-fit-y - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off\n * @slot content-nofit-y - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off\n */\n@Component({\n  tag: 'nano-resize-observe',\n  styles: `nano-resize-observe { display: block }`,\n  shadow: true,\n})\nexport class ResizeObserve implements ComponentInterface {\n  private ro: ResizeObserver;\n  private appliedStates: StateMaps;\n  private isReady = false;\n\n  @Element() host: HTMLNanoResizeObserveElement;\n  @State() currentWidth: number;\n  @State() currentHeight: number;\n  @State() classNames: string[] = [];\n  @State() contentFitX = null;\n  @State() contentFitY = null;\n\n  @Watch('classNames')\n  classNameChange() {\n    this.host.className = this.classNames.join(' ');\n    if (!this.isReady && this.classNames.includes('is-ready')) {\n      this.isReady = true;\n      this.nanoResizeObserverReady.emit();\n    }\n  }\n\n  /** Fire `nanoResizeContentFitChange` events notifying\n   * whether content currently fits or does not on the x, y or both axis'.\n   * Also makes the `content-fit-...` slots available */\n  @Prop() notifyContentFit: 'x' | 'y' | 'xy';\n\n  /** string list of sizes and optional class-names.\n   * Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\n   * Format: `states=\"800w, 300h class1 class2\"` */\n  @Prop() states: string;\n\n  @Watch('states')\n  newStatesProp() {\n    this.statesChanged();\n  }\n\n  /** A resize break point is switched on or off */\n  @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\n\n  /** Fires after the initial loading and assessment */\n  @Event() nanoResizeObserverReady!: EventEmitter<void>;\n\n  /** Fires when the content either begins or stops fitting.\n   * Will only work when `notifyContentFit` is set. */\n  @Event() nanoResizeContentFitChange!: EventEmitter<{\n    x: boolean;\n    y: boolean;\n  }>;\n\n  /** Fires after any resizing */\n  @Event() nanoResize!: EventEmitter<ResizeObserverEntry[]>;\n\n  @Watch('currentHeight')\n  @Watch('currentWidth')\n  dimensionChanged() {\n    this.assessChanges();\n  }\n\n  @Watch('states')\n  statesChanged() {\n    if (!this.states) return;\n\n    const toBpDir = (bpDir: string) => {\n      const bpDirSpl = bpDir.split(/(\\d+)/).filter((bs) => bs.length);\n      return { bp: parseInt(bpDirSpl[0]), dir: bpDirSpl[1] };\n    };\n    this.appliedStates = { h: new Map(), w: new Map() };\n\n    // parse state string\n    this.states.split(',').map((st) => {\n      st = st.trim();\n      if (st.includes(' ')) {\n        const [key, ...classes] = st.split(' ');\n        const { bp, dir } = toBpDir(key);\n        this.appliedStates[dir as keyof StateMaps].set(bp, {\n          states: classes,\n          applied: false,\n        });\n      } else {\n        const { bp, dir } = toBpDir(st);\n        this.appliedStates[dir as keyof StateMaps].set(bp, { applied: false });\n      }\n    });\n  }\n\n  private assesContentFit() {\n    if (!this.notifyContentFit) return;\n\n    const findNonContentsEle = (ele: Element) => {\n      if (window.getComputedStyle(ele).display !== 'contents') return ele;\n\n      const recurse = (e: Element): Element | null => {\n        return Array.from(e.children).find((cEle: HTMLElement) => {\n          if (window.getComputedStyle(cEle).display !== 'contents') return cEle;\n          recurse(cEle);\n        });\n      };\n      return recurse(ele);\n    };\n\n    let didChange = false;\n    const measureEle = findNonContentsEle(this.host.firstElementChild);\n\n    if (measureEle) {\n      if (this.notifyContentFit && this.notifyContentFit.includes('x')) {\n        if (\n          this.currentWidth < measureEle.scrollWidth &&\n          this.contentFitX !== false\n        ) {\n          didChange = true;\n          this.contentFitX = false;\n        } else if (\n          this.currentWidth >= measureEle.scrollWidth &&\n          this.contentFitX !== true\n        ) {\n          didChange = true;\n          this.contentFitX = true;\n        }\n      }\n\n      if (this.notifyContentFit && this.notifyContentFit.includes('y')) {\n        if (\n          this.currentHeight < measureEle.scrollHeight &&\n          this.contentFitY !== false\n        ) {\n          didChange = true;\n          this.contentFitY = false;\n        } else if (\n          this.currentHeight >= measureEle.scrollHeight &&\n          this.contentFitY !== true\n        ) {\n          didChange = true;\n          this.contentFitY = true;\n        }\n      }\n\n      if (didChange) {\n        this.nanoResizeContentFitChange.emit({\n          x: this.contentFitX,\n          y: this.contentFitY,\n        });\n      }\n    }\n  }\n\n  private assessChanges = () => {\n    if (!this.currentWidth && !this.currentHeight) return;\n    readTask(() => this.assesContentFit());\n\n    if (!this.states || !this.appliedStates) return;\n\n    const changedStates: StateMaps = { h: new Map(), w: new Map() };\n    let hasChanged = false;\n\n    Object.keys(this.appliedStates).forEach((dimType) => {\n      let dim: number;\n      if (dimType === 'h') dim = this.currentHeight;\n      else dim = this.currentWidth;\n\n      this.appliedStates[dimType].forEach(\n        (state: ResizeObserverState, bp: number) => {\n          if (dim >= bp && state.applied === false) {\n            state.applied = true;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          } else if (dim < bp && state.applied === true) {\n            state.applied = false;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          }\n        }\n      );\n    });\n    if (hasChanged) this.applyChanges(changedStates);\n    else if (!this.classNames.includes('is-ready'))\n      this.classNames = [...this.classNames, 'is-ready'];\n  };\n\n  private applyChanges(changes: StateMaps) {\n    if (!this.states) return;\n\n    let classNames = [...this.classNames];\n    Object.keys(changes).forEach((dimType: keyof StateMaps) => {\n      changes[dimType].forEach((state) => {\n        if (!state.states) return;\n        state.states.map((st) => {\n          if (state.applied) {\n            classNames.push(st);\n            classNames = classNames.filter((cl) => cl !== 'not-' + st);\n          } else {\n            classNames.push('not-' + st);\n            classNames = classNames.filter((cl) => cl !== st);\n          }\n        });\n      });\n    });\n    this.classNames = ['is-ready', ...classNames];\n    this.nanoResizeStateChange.emit(this.toSimpleObj(changes));\n  }\n\n  private toSimpleObj(stateMaps: StateMaps) {\n    const retObj = {};\n    Object.keys(stateMaps).forEach((dimType: keyof StateMaps) => {\n      stateMaps[dimType].forEach((state: ResizeObserverState, bp: number) => {\n        retObj[bp + dimType] = state.applied;\n      });\n    });\n    return retObj;\n  }\n\n  private attachRO() {\n    if (!window['ResizeObserver']) return;\n\n    this.ro = new ResizeObserver((ro) => {\n      const { width, height } = this.host.getBoundingClientRect();\n      this.currentWidth = Math.ceil(width);\n      this.currentHeight = Math.ceil(height);\n      this.nanoResize.emit(ro);\n    });\n    this.ro.observe(this.host);\n  }\n\n  componentWillLoad() {\n    this.classNames = Array.from(this.host.classList);\n\n    this.statesChanged();\n    // set all class as 'not-' by deafult\n    this.applyChanges(this.appliedStates);\n\n    if (!this.currentWidth && !this.currentHeight) {\n      readTask(() => {\n        const { width, height } = this.host.getBoundingClientRect();\n        this.currentWidth = Math.ceil(width);\n        this.currentHeight = Math.ceil(height);\n      });\n    } else {\n      this.assessChanges();\n    }\n  }\n\n  connectedCallback() {\n    if (!this.ro) this.attachRO();\n  }\n\n  disconnectedCallback() {\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n        {!!this.notifyContentFit &&\n          (this.contentFitX !== null || this.contentFitY !== null) && [\n            !!this.contentFitX ? (\n              <slot name=\"content-fit-x\" />\n            ) : (\n              <slot name=\"content-nofit-x\" />\n            ),\n            !!this.contentFitY ? (\n              <slot name=\"content-fit-y\" />\n            ) : (\n              <slot name=\"content-nofit-y\" />\n            ),\n          ]}\n      </Host>\n    );\n  }\n}\n","@import '../../global/style/nano-theme/components';\n\n:host {\n  /**\n   * @prop --base-color-rgb: default #{$skeleton-color-rgb};\n   * @prop --color: default var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n   * @prop --tint: default var(--nano-skeleton-tint, rgba(var(--base-color-rgb), .3));\n   */\n\n  --base-color-rgb: #{$skeleton-color-rgb};\n  --color: var(--nano-skeleton-color, rgb(var(--base-color-rgb) / 100%));\n  --tint: var(--nano-skeleton-tint, rgb(var(--base-color-rgb) / 50%));\n\n  display: block;\n  position: relative;\n  border-radius: 0.25rem;\n  min-block-size: 1em;\n  line-height: inherit;\n}\n\n.skeleton {\n  display: flex;\n  min-inline-size: 100%;\n  min-block-size: 100%;\n  border-radius: inherit;\n  line-height: inherit;\n}\n\n.skeleton__indicator {\n  flex: 1 1 auto;\n  background: var(--color);\n  border-radius: inherit;\n  line-height: inherit;\n}\n\n.skeleton.animate .skeleton__indicator {\n  background:\n    linear-gradient(\n      270deg,\n      var(--tint),\n      var(--color),\n      var(--color),\n      var(--tint)\n    );\n  background-size: 400% 100%;\n  animation: loader 6s ease-in-out infinite;\n}\n\n@keyframes loader {\n  0% {\n    background-position: 200% 0;\n  }\n\n  100% {\n    background-position: -200% 0;\n  }\n}\n","import { Component, Prop, h, ComponentInterface } from '@stencil/core';\n\n/**\n * Skeletons are used to show where content will eventually be drawn.\n * Simple containers for scaffolding layouts that mimic what users will see when content has finished loading.\n * Prevents large areas of empty space during asynchronous operations.\n */\n@Component({\n  tag: 'nano-skeleton',\n  styleUrl: 'skeleton.scss',\n  shadow: true,\n})\nexport class Skeleton implements ComponentInterface {\n  /** When `true`, the skeleton will animate. */\n  @Prop() animated = true;\n\n  render() {\n    return (\n      <div\n        class={{\n          skeleton: true,\n          animate: this.animated,\n        }}\n      >\n        <div class=\"skeleton__indicator\">&nbsp;</div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as i,h as s,a as e,g as h}from"./index-9695db0a.js";import{a as n}from"./dom-8599fac1.js";import{d as o}from"./throttle-ac4fcefa.js";const r=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--stuck-left:initial;--stuck-right:initial;--stuck-z-index:var(--nano-layer-index-menubar, 10);--top-hide:translateY(-110%);--bottom-hide:translateY(110%);display:block;max-inline-size:100%}:host([sticky]){position:sticky;transition:0.3s ease transform;will-change:min-block-size}:host([sticky][stuck]){inset-inline:var(--stuck-left) var(--stuck-right);z-index:var(--stuck-z-index) !important}:host([sticky][hide][placed-top]){transform:var(--top-hide)}:host([sticky][hide][placed-bottom]){transform:var(--bottom-hide)}:host([sticky][index="1"]){z-index:calc(var(--stuck-z-index) + 1)}:host([sticky][index="2"]){z-index:calc(var(--stuck-z-index) + 2)}:host([sticky][index="3"]){z-index:calc(var(--stuck-z-index) + 3)}:host([sticky][index="4"]){z-index:calc(var(--stuck-z-index) + 4)}:host([sticky][index="5"]){z-index:calc(var(--stuck-z-index) + 5)}.sticker{display:inherit;max-inline-size:inherit;inline-size:100%}.sticker:not(.stuck){inline-size:auto !important}.sticker.sticky{transition:0.3s ease all;position:relative}:host([index="1"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 1)}:host([index="2"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 2)}:host([index="3"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 3)}:host([index="4"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 4)}:host([index="5"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 5)}.sticker.stuck{position:fixed;inset-inline:var(--stuck-left) var(--stuck-right);z-index:var(--stuck-z-index);transform:translateY(0)}:host([placed-top]) .sticker.stuck{inset-block-start:0}:host([placed-bottom]) .sticker.stuck{inset-block-end:0}:host([placed-top]) .sticker.stuck.hide{transform:var(--top-hide)}:host([placed-bottom]) .sticker.stuck.hide{transform:var(--bottom-hide)}.sticker-content{display:flex;flex-wrap:wrap}';function a(t){return t instanceof Document?window.pageYOffset:t.scrollTop}function c(t,i){const s=i instanceof Document?document.documentElement:i;return n(t,s)}const f=class{constructor(s){t(this,s);this.nanoStuck=i(this,"nanoStuck",7);this.nanoUnstuck=i(this,"nanoUnstuck",7);this.nanoHide=i(this,"nanoHide",7);this.nanoShow=i(this,"nanoShow",7);this.isRtl=false;this.scrollPosCache=0;this.scrollPosThresholdCache=0;this.cacheOffset=0;this.pauseResizeWatcher=false;this.listenForScrollParent=false;this.positions=[];this.pauseHide=false;this.hasBootstrapped=false;this.setupParentResizeListener=()=>{if(!window["ResizeObserver"])return;if(this.parentSizeObserver){this.parentSizeObserver.disconnect();this.parentSizeObserver=undefined}this.parentSizeObserver=new ResizeObserver((t=>{for(const i of t){let t,s;if(i.contentRect.height)t=i.contentRect.height;if(i.contentRect.width)s=i.contentRect.width;if(typeof this.quietMode==="object"){if(s<this.quietMode.w||t<this.quietMode.h)this.quietModeIsOn=true;else this.quietModeIsOn=false}if(this.breakPointMin){if(s>this.breakPointMin)this.isSticky=true;else this.isSticky=false}if(this.breakPointMax){if(s<this.breakPointMax)this.isSticky=true;else this.isSticky=false}if(this.isRootSticker&&this.sticker&&this.autoResize)this.sticker.style.width=this.host.scrollWidth+"px"}}));const t=this.scrollParent instanceof Document?this.scrollParent.documentElement:this.scrollParent;if(t)this.parentSizeObserver.observe(t)};this.onStickToDisplayEvent=t=>{if(t.detail.sticker!==this.stickToEle)return;switch(t.type){case"nanoHide":this._offset=0;this.cacheOffset=this.offset;this.offset=0;if(!this.isStuck)this.moveTrigger(false);if(!this.isRootSticker&&this.quietModeIsOn){requestAnimationFrame((()=>{this.stickToEle.style.minHeight=this.stickToEleInitSize.height+(this.host.scrollHeight+(typeof this.cacheOffset==="object"?this.cacheOffset.v:this.cacheOffset))+"px";this.stickToEle.setTriggerPos(this.stickToEleInitSize.height*-1)}))}break;case"nanoShow":this._offset=this.stickToEleInitSize.height;this.offset=this.cacheOffset;this.moveTrigger(true);if(!this.isRootSticker&&this.quietModeIsOn){requestAnimationFrame((()=>{this.stickToEle.style.minHeight="";this.stickToEle.setTriggerPos(0)}))}break;case"nanoStuck":this.stickToEleInitSize=this.stickToEle.getBoundingClientRect();this._offset=this.stickToEleInitSize.height;break}};this.onStickEvent=async t=>{const i=t.detail?t.detail.sticker:null;if(!i||i.position!==this.position)return;const s=await i.getTriggerPos();if(t.type==="nanoStuck"&&i!==this.host&&i.scrollParent===this.host.scrollParent){this.stickerIndex++;if(!this.hideOnNewStickers)return;if(this.positions.includes("top")&&this.triggerPos.top<s.top||this.positions.includes("bottom")&&this.triggerPos.top>s.top){this.multiStickerHide=true;this.stuckCounter++}}if(t.type==="nanoUnstuck"&&i!==this.host&&i.scrollParent===this.host.scrollParent){this.stickerIndex--;if(!this.hideOnNewStickers)return;if(this.positions.includes("top")&&this.triggerPos.top<s.top||this.positions.includes("bottom")&&this.triggerPos.top>s.top){this.stuckCounter--;if(this.stuckCounter<1)this.multiStickerHide=false}}};this.onScroll=()=>{const t=a(this.scrollParent);if(t<this.scrollPosCache){if(!this.positions.includes("bottom"))this.handleScrollTo();else this.handleScrollAway(t)}if(t>this.scrollPosCache){if(!this.positions.includes("bottom"))this.handleScrollAway(t);else this.handleScrollTo()}this.scrollPosCache=t};this.isStuck=false;this.isRootSticker=true;this.hide=false;this.scrollHide=false;this.multiStickerHide=false;this.scrollingTo=false;this.quietModeIsOn=false;this.stuckCounter=0;this.stickerIndex=0;this.stickToEle=undefined;this.triggerPos=undefined;this.trigger=undefined;this._offset=0;this.autoResize=true;this.isSticky=true;this.offset=0;this.position="top";this.quietMode={h:600,w:600};this.hideOnNewStickers=true;this.breakPointMax=null;this.breakPointMin=null;this.scrollParent=undefined;this.stickTo=undefined}async isHiding(){return this.hide}async isSticking(){this.shouldStick();return this.isStuck}async setTriggerPos(t){return this._offset=t}async getTriggerPos(){return this.triggerPos}async pauseHiding(t){return this.pauseHide=t}updateTriggerOffset(){if(!this.trigger||!this.scrollParent||!this.listenForScrollParent)return;this.triggerPos=c(this.trigger,this.scrollParent)}stickerResizeListener(){if(!this.content||!window["ResizeObserver"])return;if(this.contentSizeObserver){this.contentSizeObserver.disconnect();this.contentSizeObserver=undefined}this.contentSizeObserver=new ResizeObserver((t=>{for(const i of t){if(this.pauseResizeWatcher)return;if(i.contentRect.height){if(this.position==="top")this.host.style.height=i.contentRect.height+"px";if(this.position==="bottom")this.host.style.minHeight=i.contentRect.height+"px"}}}));this.contentSizeObserver.observe(this.content)}quietModeChange(){if(this.quietMode==="on")requestAnimationFrame((()=>this.quietModeIsOn=true));else if(this.quietMode==="off")requestAnimationFrame((()=>this.quietModeIsOn=false))}setOffset(){if(this.trigger)this.trigger.setAttribute("style","");let t,i,s,e;const h=this.isRootSticker||this.stickToEle?this.sticker:this.host;if(!h)return;if(typeof this.offset==="object")({v:t,h:i}=this.offset);else t=i=this.offset;if(typeof this._offset==="object")({v:t=s,h:i=e}=this._offset);else s=e=this._offset;const n=s=>{const e=s.match(/(top|bottom)/)?t:i;o(s);h.style[s]=e+"px";if(e)this.host.style.setProperty("--hide-transform-amount",`(110% + ${e}px)`);else this.host.style.setProperty("--hide-transform-amount",null)};const o=h=>{const n=h.match(/(top|bottom)/)?t+s:i+e;this.trigger.style[h]=n*-1+"px";this.trigger.style.position="relative";this.trigger.style.minHeight="1px";this.trigger.style.maxHeight="1px";this.trigger.style.overflow="hidden"};if(this.positions.includes("start")&&this.isRtl||this.positions.includes("end")&&!this.isRtl)n("right");if(this.positions.includes("end")&&this.isRtl||this.positions.includes("start")&&!this.isRtl)n("left");if(this.positions.includes("top"))n("top");if(this.positions.includes("bottom"))n("bottom")}positionChange(){this.positions=this.position.split("-");this.setOffset()}async stuckChange(){if(this.isStuck){if(this.stickToEle){const t=this.host.children;this.slottedContent=Array.from(t);this.slottedContent.forEach((t=>{this.stickToEle.appendChild(t);t.style.order=this.stickerIndex+""}));this.nanoStuck.emit({sticker:this.stickToEle})}else this.nanoStuck.emit({sticker:this.host})}else{this.scrollHide=false;if(this.stickToEle){this.slottedContent.forEach((t=>{this.host.appendChild(t);t.style.order=""}));this.nanoUnstuck.emit({sticker:this.stickToEle})}else this.nanoUnstuck.emit({sticker:this.host})}}attachScrollListeners(){if(this.quietModeIsOn)this.scrollParent.addEventListener("scroll",this.onScroll,{passive:true,capture:false});else if(this.scrollParent){this.scrollParent.removeEventListener("scroll",this.onScroll);this.moveTrigger(true)}}handleParentEvents(t,i=null){if(!this.listenForScrollParent)return;if(i)this.manageListenersOnParent(false,i);if(this.scrollParent)this.manageListenersOnParent(!this.stickToEle)}stickToEleChange(t,i){if(this.stickToEle){this.stickToEle.addEventListener("nanoHide",this.onStickToDisplayEvent);this.stickToEle.addEventListener("nanoShow",this.onStickToDisplayEvent);this.stickToEle.addEventListener("nanoStuck",this.onStickToDisplayEvent);this.stickToEle.addEventListener("nanoUnstuck",this.onStickToDisplayEvent)}if(i){i.removeEventListener("nanoHide",this.onStickToDisplayEvent);i.removeEventListener("nanoShow",this.onStickToDisplayEvent);i.removeEventListener("nanoStuck",this.onStickToDisplayEvent);i.removeEventListener("nanoUnstuck",this.onStickToDisplayEvent)}}stickToChange(){if(typeof this.stickTo==="string")this.stickToEle=this.scrollParent.querySelector(this.stickTo);else if(!!this.stickTo)this.stickToEle=this.stickTo;else this.stickToEle=undefined}visibilityDecisionHandler(){if(this.multiStickerHide||this.scrollHide)this.hide=true;else this.hide=false}handleHideChange(){if(this.hide)this.nanoHide.emit({sticker:this.host});else this.nanoShow.emit({sticker:this.host})}setupIO(){if(this.io){this.io.disconnect();this.io=undefined}if(!this.scrollParent||!this.hasBootstrapped||!this.trigger)return;this.isRootSticker=this.scrollParent instanceof Document;let t=this.scrollParent;if(this.scrollParent instanceof Document)t=null;this.io=new window.IntersectionObserver((t=>{if(this.pauseResizeWatcher||!this.isSticky)return;this.shouldStick(t.slice(-1)[0])}),{root:t});this.io.observe(this.trigger)}manageListenersOnParent(t,i){const s=i||this.scrollParent;if(!s)return;if(!t){try{if(this.quietModeIsOn)s.removeEventListener("scroll",this.onScroll);s.removeEventListener("nanoStuck",this.onStickEvent);s.removeEventListener("nanoUnstuck",this.onStickEvent)}catch(t){console.error("Events haven`t been added")}}else{s.addEventListener("nanoStuck",this.onStickEvent);s.addEventListener("nanoUnstuck",this.onStickEvent);if(this.quietModeIsOn)this.attachScrollListeners()}this.setupParentResizeListener()}handleScrollTo(){this.scrollPosThresholdCache=null;if(!this.scrollHide)return;if(this.scrollingTo!==true){this._offset=this.cacheOffset||this._offset}this.scrollingTo=true;this.scrollHide=false}handleScrollAway(t){if(this.scrollHide)return;if(!this.isStuck)return;if(this.scrollingTo!==false){this.cacheOffset=this._offset;this._offset=0}this.scrollingTo=false;if(!this.scrollPosThresholdCache)this.scrollPosThresholdCache=t;else if(!this.pauseHide&&Math.abs(t-this.scrollPosThresholdCache)>100)this.scrollHide=true}moveTrigger(t){if(this.positions.includes("bottom")&&!t||!this.positions.includes("bottom")&&t){this.host.parentNode.insertBefore(this.trigger,this.host)}else this.host.parentNode.insertBefore(this.trigger,this.host.nextSibling)}getScrollParent(){const t=/(auto|scroll)/;const i=(t,s)=>{if(t.parentNode===null){return s}return i(t.parentNode,s.concat([t]))};const s=(t,i)=>getComputedStyle(t,null).getPropertyValue(i);const e=t=>s(t,"overflow")+s(t,"overflow-y")+s(t,"overflow-x");const h=i=>t.test(e(i));const n=document.documentElement.getBoundingClientRect().height;const o=t=>{if(!(typeof t==="object"))return;const s=i(t,[]);return s.find((t=>h(t)&&t.getBoundingClientRect().height!==n))||document};return o(this.host)}shouldStick(t){let i;if(this.positions.includes("top")){if(!this.isRootSticker){i=c(this.trigger,this.scrollParent).top}else{i=this.trigger.getBoundingClientRect().top}this.isStuck=i<-1}else if(this.positions.includes("bottom")){i=this.trigger.getBoundingClientRect().top;const s=t&&t.rootBounds?t.rootBounds:(this.scrollParent instanceof Document?document.documentElement:this.scrollParent).getBoundingClientRect();this.isStuck=!t.isIntersecting||i>s.height+s.top}}bootstrapGurantor(){this.hasBootstrapped=true;this.scrollParent=this.scrollParent||this.getScrollParent();this.isRootSticker=this.scrollParent instanceof Document;this.trigger=this.trigger||document.createElement("div");this.trigger.innerHTML="&nbsp;";this.trigger.classList.add("sticker-trigger");this.positionChange();this.moveTrigger(true);this.quietModeChange();this.listenForScrollParent=true;this.handleParentEvents(true);this.stickerIndex=Array.from(this.scrollParent.querySelectorAll("nano-sticker")).filter((t=>t.position===this.position)).findIndex((t=>t===this.host));this.setOffset();this.stickerResizeListener();this.setupParentResizeListener();this.slottedContent=Array.from(this.host.children);this.slottedContent.forEach((t=>{t.style.order=this.stickerIndex+""}));this.updateTriggerOffset();this.stickToChange();this.setupIO();this.onStickToDisplayEvent=o(this.onStickToDisplayEvent,50)}connectedCallback(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";document.documentElement.addEventListener("nanoComponentsReady",(()=>{setTimeout((t=>this.bootstrapGurantor()),200)}));setTimeout((t=>{if(!this.hasBootstrapped)this.bootstrapGurantor()}),1e3)}disconnectedCallback(){if(this.io){this.io.disconnect();this.io=undefined}if(this.parentSizeObserver){this.parentSizeObserver.disconnect();this.parentSizeObserver=undefined}this.scrollParent=null;this.hasBootstrapped=false}render(){return s(e,{sticky:!this.isRootSticker&&!this.stickToEle&&this.isSticky,hide:this.hide&&this.isStuck,siblings:this.stuckCounter,index:this.stickerIndex,stuck:this.isStuck&&this.isSticky,"placed-bottom":this.positions.includes("bottom"),"placed-top":this.positions.includes("top"),"placed-end":this.positions.includes("end"),"placed-start":this.positions.includes("start")},s("div",{class:{sticker:true,sticky:this.isRootSticker&&this.isSticky,stuck:this.isStuck&&this.isRootSticker&&this.isSticky,hide:this.isRootSticker&&this.hide&&this.isStuck},ref:t=>this.sticker=t},s("div",{class:"sticker-content",ref:t=>this.content=t},s("slot",null))))}get host(){return h(this)}static get watchers(){return{trigger:["updateTriggerOffset"],scrollParent:["updateTriggerOffset","handleParentEvents","setupIO"],position:["stickerResizeListener","positionChange"],quietMode:["quietModeChange"],offset:["setOffset"],_offset:["setOffset"],isStuck:["stuckChange"],quietModeIsOn:["attachScrollListeners"],stickToEle:["handleParentEvents","stickToEleChange"],stickTo:["stickToChange"],multiStickerHide:["visibilityDecisionHandler"],scrollHide:["visibilityDecisionHandler"],hide:["handleHideChange"]}}};f.style=r;export{f as nano_sticker};
+import{r as t,c as i,h as s,a as e,g as h}from"./index-9695db0a.js";import{a as n}from"./dom-8599fac1.js";import{d as o}from"./throttle-ac4fcefa.js";import{f as r}from"./scroll-parent-bab1cbf7.js";const a=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--stuck-left:initial;--stuck-right:initial;--stuck-z-index:var(--nano-layer-index-menubar, 10);--top-hide:translateY(-110%);--bottom-hide:translateY(110%);display:block;max-inline-size:100%}:host([sticky]){position:sticky;transition:0.3s ease transform;will-change:min-block-size}:host([sticky][stuck]){inset-inline:var(--stuck-left) var(--stuck-right);z-index:var(--stuck-z-index) !important}:host([sticky][hide][placed-top]){transform:var(--top-hide)}:host([sticky][hide][placed-bottom]){transform:var(--bottom-hide)}:host([sticky][index="1"]){z-index:calc(var(--stuck-z-index) + 1)}:host([sticky][index="2"]){z-index:calc(var(--stuck-z-index) + 2)}:host([sticky][index="3"]){z-index:calc(var(--stuck-z-index) + 3)}:host([sticky][index="4"]){z-index:calc(var(--stuck-z-index) + 4)}:host([sticky][index="5"]){z-index:calc(var(--stuck-z-index) + 5)}.sticker{display:inherit;max-inline-size:inherit;inline-size:100%}.sticker:not(.stuck){inline-size:auto !important}.sticker.sticky{transition:0.3s ease all;position:relative}:host([index="1"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 1)}:host([index="2"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 2)}:host([index="3"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 3)}:host([index="4"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 4)}:host([index="5"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 5)}.sticker.stuck{position:fixed;inset-inline:var(--stuck-left) var(--stuck-right);z-index:var(--stuck-z-index);transform:translateY(0)}:host([placed-top]) .sticker.stuck{inset-block-start:0}:host([placed-bottom]) .sticker.stuck{inset-block-end:0}:host([placed-top]) .sticker.stuck.hide{transform:var(--top-hide)}:host([placed-bottom]) .sticker.stuck.hide{transform:var(--bottom-hide)}.sticker-content{display:flex;flex-wrap:wrap}';function c(t){return t instanceof Document?window.pageYOffset:t.scrollTop}function f(t,i){const s=i instanceof Document?document.documentElement:i;return n(t,s)}const l=class{constructor(s){t(this,s);this.nanoStuck=i(this,"nanoStuck",7);this.nanoUnstuck=i(this,"nanoUnstuck",7);this.nanoHide=i(this,"nanoHide",7);this.nanoShow=i(this,"nanoShow",7);this.isRtl=false;this.scrollPosCache=0;this.scrollPosThresholdCache=0;this.cacheOffset=0;this.pauseResizeWatcher=false;this.listenForScrollParent=false;this.positions=[];this.pauseHide=false;this.hasBootstrapped=false;this.setupParentResizeListener=()=>{if(!window["ResizeObserver"])return;if(this.parentSizeObserver){this.parentSizeObserver.disconnect();this.parentSizeObserver=undefined}this.parentSizeObserver=new ResizeObserver((t=>{for(const i of t){let t,s;if(i.contentRect.height)t=i.contentRect.height;if(i.contentRect.width)s=i.contentRect.width;if(typeof this.quietMode==="object"){if(s<this.quietMode.w||t<this.quietMode.h)this.quietModeIsOn=true;else this.quietModeIsOn=false}if(this.breakPointMin){if(s>this.breakPointMin)this.isSticky=true;else this.isSticky=false}if(this.breakPointMax){if(s<this.breakPointMax)this.isSticky=true;else this.isSticky=false}if(this.isRootSticker&&this.sticker&&this.autoResize)this.sticker.style.width=this.host.scrollWidth+"px"}}));const t=this.scrollParent instanceof Document?this.scrollParent.documentElement:this.scrollParent;if(t)this.parentSizeObserver.observe(t)};this.onStickToDisplayEvent=t=>{if(t.detail.sticker!==this.stickToEle)return;switch(t.type){case"nanoHide":this._offset=0;this.cacheOffset=this.offset;this.offset=0;if(!this.isStuck)this.moveTrigger(false);if(!this.isRootSticker&&this.quietModeIsOn){requestAnimationFrame((()=>{this.stickToEle.style.minHeight=this.stickToEleInitSize.height+(this.host.scrollHeight+(typeof this.cacheOffset==="object"?this.cacheOffset.v:this.cacheOffset))+"px";this.stickToEle.setTriggerPos(this.stickToEleInitSize.height*-1)}))}break;case"nanoShow":this._offset=this.stickToEleInitSize.height;this.offset=this.cacheOffset;this.moveTrigger(true);if(!this.isRootSticker&&this.quietModeIsOn){requestAnimationFrame((()=>{this.stickToEle.style.minHeight="";this.stickToEle.setTriggerPos(0)}))}break;case"nanoStuck":this.stickToEleInitSize=this.stickToEle.getBoundingClientRect();this._offset=this.stickToEleInitSize.height;break}};this.onStickEvent=async t=>{const i=t.detail?t.detail.sticker:null;if(!i||i.position!==this.position)return;const s=await i.getTriggerPos();if(t.type==="nanoStuck"&&i!==this.host&&i.scrollParent===this.host.scrollParent){this.stickerIndex++;if(!this.hideOnNewStickers)return;if(this.positions.includes("top")&&this.triggerPos.top<s.top||this.positions.includes("bottom")&&this.triggerPos.top>s.top){this.multiStickerHide=true;this.stuckCounter++}}if(t.type==="nanoUnstuck"&&i!==this.host&&i.scrollParent===this.host.scrollParent){this.stickerIndex--;if(!this.hideOnNewStickers)return;if(this.positions.includes("top")&&this.triggerPos.top<s.top||this.positions.includes("bottom")&&this.triggerPos.top>s.top){this.stuckCounter--;if(this.stuckCounter<1)this.multiStickerHide=false}}};this.onScroll=()=>{const t=c(this.scrollParent);if(t<this.scrollPosCache){if(!this.positions.includes("bottom"))this.handleScrollTo();else this.handleScrollAway(t)}if(t>this.scrollPosCache){if(!this.positions.includes("bottom"))this.handleScrollAway(t);else this.handleScrollTo()}this.scrollPosCache=t};this.isStuck=false;this.isRootSticker=true;this.hide=false;this.scrollHide=false;this.multiStickerHide=false;this.scrollingTo=false;this.quietModeIsOn=false;this.stuckCounter=0;this.stickerIndex=0;this.stickToEle=undefined;this.triggerPos=undefined;this.trigger=undefined;this._offset=0;this.autoResize=true;this.isSticky=true;this.offset=0;this.position="top";this.quietMode={h:600,w:600};this.hideOnNewStickers=true;this.breakPointMax=null;this.breakPointMin=null;this.scrollParent=undefined;this.stickTo=undefined}async isHiding(){return this.hide}async isSticking(){this.shouldStick();return this.isStuck}async setTriggerPos(t){return this._offset=t}async getTriggerPos(){return this.triggerPos}async pauseHiding(t){return this.pauseHide=t}updateTriggerOffset(){if(!this.trigger||!this.scrollParent||!this.listenForScrollParent)return;this.triggerPos=f(this.trigger,this.scrollParent)}stickerResizeListener(){if(!this.content||!window["ResizeObserver"])return;if(this.contentSizeObserver){this.contentSizeObserver.disconnect();this.contentSizeObserver=undefined}this.contentSizeObserver=new ResizeObserver((t=>{for(const i of t){if(this.pauseResizeWatcher)return;if(i.contentRect.height){if(this.position==="top")this.host.style.height=i.contentRect.height+"px";if(this.position==="bottom")this.host.style.minHeight=i.contentRect.height+"px"}}}));this.contentSizeObserver.observe(this.content)}quietModeChange(){if(this.quietMode==="on")requestAnimationFrame((()=>this.quietModeIsOn=true));else if(this.quietMode==="off")requestAnimationFrame((()=>this.quietModeIsOn=false))}setOffset(){if(this.trigger)this.trigger.setAttribute("style","");let t,i,s,e;const h=this.isRootSticker||this.stickToEle?this.sticker:this.host;if(!h)return;if(typeof this.offset==="object")({v:t,h:i}=this.offset);else t=i=this.offset;if(typeof this._offset==="object")({v:t=s,h:i=e}=this._offset);else s=e=this._offset;const n=s=>{const e=s.match(/(top|bottom)/)?t:i;o(s);h.style[s]=e+"px";if(e)this.host.style.setProperty("--hide-transform-amount",`(110% + ${e}px)`);else this.host.style.setProperty("--hide-transform-amount",null)};const o=h=>{const n=h.match(/(top|bottom)/)?t+s:i+e;this.trigger.style[h]=n*-1+"px";this.trigger.style.position="relative";this.trigger.style.minHeight="1px";this.trigger.style.maxHeight="1px";this.trigger.style.overflow="hidden"};if(this.positions.includes("start")&&this.isRtl||this.positions.includes("end")&&!this.isRtl)n("right");if(this.positions.includes("end")&&this.isRtl||this.positions.includes("start")&&!this.isRtl)n("left");if(this.positions.includes("top"))n("top");if(this.positions.includes("bottom"))n("bottom")}positionChange(){this.positions=this.position.split("-");this.setOffset()}async stuckChange(){if(this.isStuck){if(this.stickToEle){const t=this.host.children;this.slottedContent=Array.from(t);this.slottedContent.forEach((t=>{this.stickToEle.appendChild(t);t.style.order=this.stickerIndex+""}));this.nanoStuck.emit({sticker:this.stickToEle})}else this.nanoStuck.emit({sticker:this.host})}else{this.scrollHide=false;if(this.stickToEle){this.slottedContent.forEach((t=>{this.host.appendChild(t);t.style.order=""}));this.nanoUnstuck.emit({sticker:this.stickToEle})}else this.nanoUnstuck.emit({sticker:this.host})}}attachScrollListeners(){if(this.quietModeIsOn)this.scrollParent.addEventListener("scroll",this.onScroll,{passive:true,capture:false});else if(this.scrollParent){this.scrollParent.removeEventListener("scroll",this.onScroll);this.moveTrigger(true)}}handleParentEvents(t,i=null){if(!this.listenForScrollParent)return;if(i)this.manageListenersOnParent(false,i);if(this.scrollParent)this.manageListenersOnParent(!this.stickToEle)}stickToEleChange(t,i){if(this.stickToEle){this.stickToEle.addEventListener("nanoHide",this.onStickToDisplayEvent);this.stickToEle.addEventListener("nanoShow",this.onStickToDisplayEvent);this.stickToEle.addEventListener("nanoStuck",this.onStickToDisplayEvent);this.stickToEle.addEventListener("nanoUnstuck",this.onStickToDisplayEvent)}if(i){i.removeEventListener("nanoHide",this.onStickToDisplayEvent);i.removeEventListener("nanoShow",this.onStickToDisplayEvent);i.removeEventListener("nanoStuck",this.onStickToDisplayEvent);i.removeEventListener("nanoUnstuck",this.onStickToDisplayEvent)}}stickToChange(){if(typeof this.stickTo==="string")this.stickToEle=this.scrollParent.querySelector(this.stickTo);else if(!!this.stickTo)this.stickToEle=this.stickTo;else this.stickToEle=undefined}visibilityDecisionHandler(){if(this.multiStickerHide||this.scrollHide)this.hide=true;else this.hide=false}handleHideChange(){if(this.hide)this.nanoHide.emit({sticker:this.host});else this.nanoShow.emit({sticker:this.host})}setupIO(){if(this.io){this.io.disconnect();this.io=undefined}if(!this.scrollParent||!this.hasBootstrapped||!this.trigger)return;this.isRootSticker=this.scrollParent instanceof Document;let t=this.scrollParent;if(this.scrollParent instanceof Document)t=null;this.io=new window.IntersectionObserver((t=>{if(this.pauseResizeWatcher||!this.isSticky)return;this.shouldStick(t.slice(-1)[0])}),{root:t});this.io.observe(this.trigger)}manageListenersOnParent(t,i){const s=i||this.scrollParent;if(!s)return;if(!t){try{if(this.quietModeIsOn)s.removeEventListener("scroll",this.onScroll);s.removeEventListener("nanoStuck",this.onStickEvent);s.removeEventListener("nanoUnstuck",this.onStickEvent)}catch(t){console.error("Events haven`t been added")}}else{s.addEventListener("nanoStuck",this.onStickEvent);s.addEventListener("nanoUnstuck",this.onStickEvent);if(this.quietModeIsOn)this.attachScrollListeners()}this.setupParentResizeListener()}handleScrollTo(){this.scrollPosThresholdCache=null;if(!this.scrollHide)return;if(this.scrollingTo!==true){this._offset=this.cacheOffset||this._offset}this.scrollingTo=true;this.scrollHide=false}handleScrollAway(t){if(this.scrollHide)return;if(!this.isStuck)return;if(this.scrollingTo!==false){this.cacheOffset=this._offset;this._offset=0}this.scrollingTo=false;if(!this.scrollPosThresholdCache)this.scrollPosThresholdCache=t;else if(!this.pauseHide&&Math.abs(t-this.scrollPosThresholdCache)>100)this.scrollHide=true}moveTrigger(t){if(this.positions.includes("bottom")&&!t||!this.positions.includes("bottom")&&t){this.host.parentNode.insertBefore(this.trigger,this.host)}else this.host.parentNode.insertBefore(this.trigger,this.host.nextSibling)}shouldStick(t){let i;if(this.positions.includes("top")){if(!this.isRootSticker){i=f(this.trigger,this.scrollParent).top}else{i=this.trigger.getBoundingClientRect().top}this.isStuck=i<-1}else if(this.positions.includes("bottom")){i=this.trigger.getBoundingClientRect().top;const s=t&&t.rootBounds?t.rootBounds:(this.scrollParent instanceof Document?document.documentElement:this.scrollParent).getBoundingClientRect();this.isStuck=!t.isIntersecting||i>s.height+s.top}}bootstrapGurantor(){this.hasBootstrapped=true;this.scrollParent=this.scrollParent||r(this.host);this.isRootSticker=this.scrollParent instanceof Document;this.trigger=this.trigger||document.createElement("div");this.trigger.innerHTML="&nbsp;";this.trigger.classList.add("sticker-trigger");this.positionChange();this.moveTrigger(true);this.quietModeChange();this.listenForScrollParent=true;this.handleParentEvents(true);this.stickerIndex=Array.from(this.scrollParent.querySelectorAll("nano-sticker")).filter((t=>t.position===this.position)).findIndex((t=>t===this.host));this.setOffset();this.stickerResizeListener();this.setupParentResizeListener();this.slottedContent=Array.from(this.host.children);this.slottedContent.forEach((t=>{t.style.order=this.stickerIndex+""}));this.updateTriggerOffset();this.stickToChange();this.setupIO();this.onStickToDisplayEvent=o(this.onStickToDisplayEvent,50)}connectedCallback(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";document.documentElement.addEventListener("nanoComponentsReady",(()=>{setTimeout((t=>this.bootstrapGurantor()),200)}));setTimeout((t=>{if(!this.hasBootstrapped)this.bootstrapGurantor()}),1e3)}disconnectedCallback(){if(this.io){this.io.disconnect();this.io=undefined}if(this.parentSizeObserver){this.parentSizeObserver.disconnect();this.parentSizeObserver=undefined}this.scrollParent=null;this.hasBootstrapped=false}render(){return s(e,{sticky:!this.isRootSticker&&!this.stickToEle&&this.isSticky,hide:this.hide&&this.isStuck,siblings:this.stuckCounter,index:this.stickerIndex,stuck:this.isStuck&&this.isSticky,"placed-bottom":this.positions.includes("bottom"),"placed-top":this.positions.includes("top"),"placed-end":this.positions.includes("end"),"placed-start":this.positions.includes("start")},s("div",{class:{sticker:true,sticky:this.isRootSticker&&this.isSticky,stuck:this.isStuck&&this.isRootSticker&&this.isSticky,hide:this.isRootSticker&&this.hide&&this.isStuck},ref:t=>this.sticker=t},s("div",{class:"sticker-content",ref:t=>this.content=t},s("slot",null))))}get host(){return h(this)}static get watchers(){return{trigger:["updateTriggerOffset"],scrollParent:["updateTriggerOffset","handleParentEvents","setupIO"],position:["stickerResizeListener","positionChange"],quietMode:["quietModeChange"],offset:["setOffset"],_offset:["setOffset"],isStuck:["stuckChange"],quietModeIsOn:["attachScrollListeners"],stickToEle:["handleParentEvents","stickToEleChange"],stickTo:["stickToChange"],multiStickerHide:["visibilityDecisionHandler"],scrollHide:["visibilityDecisionHandler"],hide:["handleHideChange"]}}};l.style=a;export{l as nano_sticker};
 //# sourceMappingURL=nano-sticker.entry.js.map