@nanoporetech-digital/components 3.14.0 → 4.0.0

package/dist/nano-components/{p-75df97c2.entry.js → p-107d4549.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as n,h as t,a as i,g as e}from"./p-6ef53fa1.js";const o=":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  display: block;\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}\n\n:host(.is-xl) {\n  --quote-size: 3rem;\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.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  -webkit-margin-after: -64px;\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    -webkit-margin-after: -48px;\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  container-type: inline-size;\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.is-xl .hero__breadcrumbs {\n  margin-block: 0;\n  margin-inline: 50px;\n  max-inline-size: 50%;\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.is-xxl .hero__breadcrumbs {\n  margin-block: 0;\n  margin-inline: 83px;\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  -webkit-margin-after: 16px;\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.hero__content.is-xl {\n  -webkit-margin-before: 50px;\n          margin-block-start: 50px;\n  max-inline-size: 1540px;\n}\n@container (min-width: 800px) {\n  .hero__content {\n    margin-block: 50px 0 !important;\n    max-inline-size: 1540px !important;\n  }\n}\n.hero__content.is-xxl {\n  -webkit-margin-before: 83px;\n          margin-block-start: 83px;\n  max-inline-size: 1606px;\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  -webkit-margin-start: 0;\n          margin-inline-start: 0;\n}\n.hero__primary ::slotted(nano-icon-button[slot=back-btn]) {\n  font-size: 2rem;\n}\n.is-xl .hero__primary {\n  margin-block: 0 50px;\n  margin-inline: 50px 0;\n}\n.is-xl .hero__primary ::slotted(nano-icon-button[slot=back-btn]) {\n  margin-block: 0;\n  margin-inline: -3rem 0;\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.is-xxl .hero__primary {\n  margin-block: 0 83px !important;\n  margin-inline: 83px 0 !important;\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.is-xl .hero__primary-content ::slotted(h1[slot=primary-content]) {\n  line-height: 31px !important;\n  -webkit-margin-after: 30px !important;\n          margin-block-end: 30px !important;\n}\n.is-xl .hero__primary-content ::slotted(.button[slot=primary-content]) {\n  -webkit-margin-before: 20px !important;\n          margin-block-start: 20px !important;\n}\n@container (min-width: 800px) {\n  .hero__primary-content ::slotted(h1[slot=primary-content]) {\n    line-height: 31px !important;\n    -webkit-margin-after: 30px !important;\n            margin-block-end: 30px !important;\n  }\n  .hero__primary-content ::slotted(.button[slot=primary-content]) {\n    -webkit-margin-before: 20px !important;\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.is-xl .hero__secondary {\n  padding-block: 0 50px;\n  padding-inline: 50px;\n  justify-content: flex-end;\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.is-xxl .hero__secondary {\n  padding-block: 0 83px;\n  padding-inline: 83px;\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  -webkit-margin-after: auto;\n          margin-block-end: auto;\n  display: flex;\n  flex-direction: column;\n  color: white;\n}\n.is-xl .hero__icon-box {\n  max-inline-size: 410px;\n  flex: 0 1 410px;\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  -webkit-margin-after: 20px;\n          margin-block-end: 20px;\n}\n.hero__icon-box ::slotted(.last[slot=icon-box-item]) {\n  -webkit-margin-after: 0;\n          margin-block-end: 0;\n}\n.hero__quote-content {\n  -webkit-margin-before: auto;\n          margin-block-start: auto;\n  text-align: center;\n  inline-size: 100%;\n}\n.is-xl .hero__quote-content {\n  max-inline-size: 500px;\n  flex: 0 1 500px;\n  text-align: initial;\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.hero--sub .hero__content.is-xl {\n  -webkit-margin-before: 40px;\n          margin-block-start: 40px;\n}\n.hero--sub .hero__content.is-xl .hero__primary {\n  margin-block: 0 40px;\n  margin-inline: 50px 0;\n}\n.hero--sub .hero__content.is-xl .hero__secondary {\n  padding-block: 0 50px;\n  padding-inline: 40px 50px;\n}\n.hero--sub .hero__content.is-xl ::slotted(.button[slot=primary-content]) {\n  -webkit-margin-before: 8px !important;\n          margin-block-start: 8px !important;\n}\n.hero--sub .hero__content.is-xl ::slotted(h1[slot=primary-content]) {\n  -webkit-margin-after: 18px !important;\n          margin-block-end: 18px !important;\n}\n.hero--sub .hero__content.is-xxl .hero__primary {\n  margin-block: 0 40px;\n  margin-inline: 83px 0;\n}\n.hero--sub .hero__content.is-xxl .hero__secondary {\n  padding-block: 0 83px;\n  padding-inline: 40px 83px;\n}";const r=class{constructor(i){n(this,i);this.handleGridChange=n=>{this.gridSizes=n.detail};this.HeroContent=()=>[!this.hasIconBox&&this.hasCtas?t("div",{class:"hero__ctas"},t("slot",{name:"secondary-ctas"})):"",t("div",{class:"hero__scrim"},t("slot",{name:"scrim"})),t("nano-grid",{onNanoBpChange:this.handleGridChange,class:"hero__content",xlCols:2,xlSize:this.largeScreenBP},t("nano-grid-item",{gridStates:"xl-col-span-2"},t("div",{class:"hero__breadcrumbs"},t("slot",{name:"breadcrumb"}))),t("nano-grid-item",{gridStates:this.hasSecondaryContent?"xl-col-span-1 xl-col-start-1 xl-row-start-2":"xl-col-span-2 xl-col-start-1 xl-row-start-2"},t("div",{class:"hero__primary"},t("div",{class:"hero__primary-content"},t("slot",{name:"back-btn"}),t("div",null,t("slot",{name:"primary-content"}))))),this.hasSecondaryContent&&t("nano-grid-item",{gridStates:"xl-col-span-1 xl-col-start-2 xl-row-start-2"},t("div",{class:"hero__secondary"},t("slot",{name:"secondary-content"}),this.hasIconBox&&t("div",{class:"hero__icon-box"},t("slot",{name:"icon-box"}),t("slot",{name:"icon-box-item"})),this.hasQuote&&t("div",{class:"hero__quote-content"},t("span",{class:"hero__quote"},t("slot",{name:"quote"})),t("div",{class:"hero__quote-author"},t("slot",{name:"quote-author"}))))))];this.gridSizes=[];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 t(i,{class:{[this.gridSizes.join(" ")]:true}},t("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"}},t("div",{class:"hero__bg-wrap"},!!this.imgSrc&&t("nano-img",{class:"hero__img",lazy:false,background:true,srcSet:this.imgSrcSet,src:this.imgSrc},t(this.HeroContent,null)),!this.imgSrc&&[t("div",{class:"hero__bg-slot"},t("slot",{name:"background"})),t(this.HeroContent,null)])))}get host(){return e(this)}static get watchers(){return{breadCrumbs:["breadCrumbChange"],iconBoxItems:["iconBoxItemChange"]}}};r.style=o;export{r as nano_hero};
-//# sourceMappingURL=p-75df97c2.entry.js.map
+import{r as n,h as t,a as i,g as e}from"./p-f6a8467a.js";const o=":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  display: block;\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}\n\n:host(.is-xl) {\n  --quote-size: 3rem;\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.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  -webkit-margin-after: -64px;\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    -webkit-margin-after: -48px;\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  container-type: inline-size;\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.is-xl .hero__breadcrumbs {\n  margin-block: 0;\n  margin-inline: 50px;\n  max-inline-size: 50%;\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.is-xxl .hero__breadcrumbs {\n  margin-block: 0;\n  margin-inline: 83px;\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  -webkit-margin-after: 16px;\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.hero__content.is-xl {\n  -webkit-margin-before: 50px;\n          margin-block-start: 50px;\n  max-inline-size: 1540px;\n}\n@container (min-width: 800px) {\n  .hero__content {\n    margin-block: 50px 0 !important;\n    max-inline-size: 1540px !important;\n  }\n}\n.hero__content.is-xxl {\n  -webkit-margin-before: 83px;\n          margin-block-start: 83px;\n  max-inline-size: 1606px;\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  -webkit-margin-start: 0;\n          margin-inline-start: 0;\n}\n.hero__primary ::slotted(nano-icon-button[slot=back-btn]) {\n  font-size: 2rem;\n}\n.is-xl .hero__primary {\n  margin-block: 0 50px;\n  margin-inline: 50px 0;\n}\n.is-xl .hero__primary ::slotted(nano-icon-button[slot=back-btn]) {\n  margin-block: 0;\n  margin-inline: -3rem 0;\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.is-xxl .hero__primary {\n  margin-block: 0 83px !important;\n  margin-inline: 83px 0 !important;\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.is-xl .hero__primary-content ::slotted(h1[slot=primary-content]) {\n  line-height: 31px !important;\n  -webkit-margin-after: 30px !important;\n          margin-block-end: 30px !important;\n}\n.is-xl .hero__primary-content ::slotted(.button[slot=primary-content]) {\n  -webkit-margin-before: 20px !important;\n          margin-block-start: 20px !important;\n}\n@container (min-width: 800px) {\n  .hero__primary-content ::slotted(h1[slot=primary-content]) {\n    line-height: 31px !important;\n    -webkit-margin-after: 30px !important;\n            margin-block-end: 30px !important;\n  }\n  .hero__primary-content ::slotted(.button[slot=primary-content]) {\n    -webkit-margin-before: 20px !important;\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.is-xl .hero__secondary {\n  padding-block: 0 50px;\n  padding-inline: 50px;\n  justify-content: flex-end;\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.is-xxl .hero__secondary {\n  padding-block: 0 83px;\n  padding-inline: 83px;\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  -webkit-margin-after: auto;\n          margin-block-end: auto;\n  display: flex;\n  flex-direction: column;\n  color: white;\n}\n.is-xl .hero__icon-box {\n  max-inline-size: 410px;\n  flex: 0 1 410px;\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  -webkit-margin-after: 20px;\n          margin-block-end: 20px;\n}\n.hero__icon-box ::slotted(.last[slot=icon-box-item]) {\n  -webkit-margin-after: 0;\n          margin-block-end: 0;\n}\n.hero__quote-content {\n  -webkit-margin-before: auto;\n          margin-block-start: auto;\n  text-align: center;\n  inline-size: 100%;\n}\n.is-xl .hero__quote-content {\n  max-inline-size: 500px;\n  flex: 0 1 500px;\n  text-align: initial;\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.hero--sub .hero__content.is-xl {\n  -webkit-margin-before: 40px;\n          margin-block-start: 40px;\n}\n.hero--sub .hero__content.is-xl .hero__primary {\n  margin-block: 0 40px;\n  margin-inline: 50px 0;\n}\n.hero--sub .hero__content.is-xl .hero__secondary {\n  padding-block: 0 50px;\n  padding-inline: 40px 50px;\n}\n.hero--sub .hero__content.is-xl ::slotted(.button[slot=primary-content]) {\n  -webkit-margin-before: 8px !important;\n          margin-block-start: 8px !important;\n}\n.hero--sub .hero__content.is-xl ::slotted(h1[slot=primary-content]) {\n  -webkit-margin-after: 18px !important;\n          margin-block-end: 18px !important;\n}\n.hero--sub .hero__content.is-xxl .hero__primary {\n  margin-block: 0 40px;\n  margin-inline: 83px 0;\n}\n.hero--sub .hero__content.is-xxl .hero__secondary {\n  padding-block: 0 83px;\n  padding-inline: 40px 83px;\n}";const r=class{constructor(i){n(this,i);this.handleGridChange=n=>{this.gridSizes=n.detail};this.HeroContent=()=>[!this.hasIconBox&&this.hasCtas?t("div",{class:"hero__ctas"},t("slot",{name:"secondary-ctas"})):"",t("div",{class:"hero__scrim"},t("slot",{name:"scrim"})),t("nano-grid",{onNanoBpChange:this.handleGridChange,class:"hero__content",xlCols:2,xlSize:this.largeScreenBP},t("nano-grid-item",{gridStates:"xl-col-span-2"},t("div",{class:"hero__breadcrumbs"},t("slot",{name:"breadcrumb"}))),t("nano-grid-item",{gridStates:this.hasSecondaryContent?"xl-col-span-1 xl-col-start-1 xl-row-start-2":"xl-col-span-2 xl-col-start-1 xl-row-start-2"},t("div",{class:"hero__primary"},t("div",{class:"hero__primary-content"},t("slot",{name:"back-btn"}),t("div",null,t("slot",{name:"primary-content"}))))),this.hasSecondaryContent&&t("nano-grid-item",{gridStates:"xl-col-span-1 xl-col-start-2 xl-row-start-2"},t("div",{class:"hero__secondary"},t("slot",{name:"secondary-content"}),this.hasIconBox&&t("div",{class:"hero__icon-box"},t("slot",{name:"icon-box"}),t("slot",{name:"icon-box-item"})),this.hasQuote&&t("div",{class:"hero__quote-content"},t("span",{class:"hero__quote"},t("slot",{name:"quote"})),t("div",{class:"hero__quote-author"},t("slot",{name:"quote-author"}))))))];this.gridSizes=[];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 t(i,{class:{[this.gridSizes.join(" ")]:true}},t("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"}},t("div",{class:"hero__bg-wrap"},!!this.imgSrc&&t("nano-img",{class:"hero__img",lazy:false,background:true,srcSet:this.imgSrcSet,src:this.imgSrc},t(this.HeroContent,null)),!this.imgSrc&&[t("div",{class:"hero__bg-slot"},t("slot",{name:"background"})),t(this.HeroContent,null)])))}get host(){return e(this)}static get watchers(){return{breadCrumbs:["breadCrumbChange"],iconBoxItems:["iconBoxItemChange"]}}};r.style=o;export{r as nano_hero};
+//# sourceMappingURL=p-107d4549.entry.js.map

package/dist/nano-components/p-15217442.entry.js

@@ -0,0 +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"./p-f6a8467a.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.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((()=>{const{width:t,height:i}=this.host.getBoundingClientRect();this.currentWidth=Math.ceil(t);this.currentHeight=Math.ceil(i)}));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};
+//# sourceMappingURL=p-15217442.entry.js.map

package/dist/nano-components/p-15217442.entry.js.map

@@ -0,0 +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","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  @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(() => {\n      const { width, height } = this.host.getBoundingClientRect();\n      this.currentWidth = Math.ceil(width);\n      this.currentHeight = Math.ceil(height);\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/p-1b7bad31.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+export{T as nano_table}from"./p-42e7f253.js";import"./p-f6a8467a.js";import"./p-ee045579.js";import"./p-9746b0a5.js";import"./p-9ebbb814.js";
+//# sourceMappingURL=p-1b7bad31.entry.js.map

package/dist/nano-components/{p-93bece01.entry.js → p-1c6c94cb.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as i,c as t,h as s,a as h,g as e}from"./p-6ef53fa1.js";import{a as n}from"./p-ed6adde2.js";import{C as a}from"./p-9d1432be.js";import{W as r}from"./p-d518b939.js";import"./p-69a3e911.js";import"./p-9746b0a5.js";const o=class{constructor(s){i(this,s);this.nanoSearchResult=t(this,"nanoSearchResult",7);this.nanoSearch=t(this,"nanoSearch",7);this.nanoSearchReset=t(this,"nanoSearchReset",7);this.handleFocus=()=>{if(this.inputField)this.inputField.setFocus()};this.searchStr="";this.algoliaIndex=null;this.currentResults=undefined;this.appId="";this.apiKey="";this.searchIndex=null;this.searchIndexName=undefined;this.minChars=2;this.autoEmit=true;this.browseIndex=false;this.storeId=undefined;this.storeMethod="session"}async search(){this.emitResults()}searchIndexNameChange(){if(!this.searchIndexName||!this.searchIndexName.length)return;this.searchIndex={index:this.searchIndexName}}algoliaChange(){this.internalIndex=this.algoliaIndex}browseIndexChange(){if(this.browseIndex){this.searchStr="*";this.searchSubmit()}}initAlgoliaClient(){if(this.isNested||!this.appId||!this.apiKey)return;this.algoliaClient=n(this.appId,this.apiKey);if(this.searchIndex)this.algoliaIndex=this.algoliaClient.initIndex(this.searchIndex.index)}async searchSubmit(i){if(!this.internalIndex){console.error("No algolia index set");return}if(i){if(i.target.tagName.toLowerCase()!=="nano-input")return;this.searchStr=i.detail.value}else{this.inputField=this.inputField||this.host.querySelector("nano-input");if(!this.inputField)return;this.searchStr=this.inputField.value}if(this.searchStr.length<this.minChars){if(this.browseIndex)this.searchStr="*";else{if(this.searchStr.length===0){this.nanoSearchResult.emit({results:[],client:{apiKey:this.appId,appId:this.appId}});return}if(this.searchStr.length<this.minChars)return}}let t={};if(this.searchIndex.filters)t={facets:this.searchIndex.filters};const s=this.fixDomain(await this.internalIndex.search(this.searchStr,t));s.indexName=this.searchIndex.name;s.selected=true;s.domain=this.searchIndex.domain||null;s.index=this.searchIndex.index;this.currentResults=s;this.nanoSearch.emit({results:[this.currentResults],client:{apiKey:this.appId,appId:this.appId}});if(this.autoEmit)this.emitResults()}emitResults(){this.nanoSearchResult.emit({results:[this.currentResults],client:{apiKey:this.appId,appId:this.appId}})}fixDomain(i){if(!this.searchIndex.domain)return i;i.hits.map((i=>{if(i.url&&!i.url.match(/^http/))i.url=location.protocol+"//"+this.searchIndex.domain+i.url}));return i}connectedCallback(){this.isNested=this.host.parentElement.tagName.toLowerCase()==="nano-algolia"&&this.host.hasAttribute("slot")&&this.host.getAttribute("slot")==="search-input";if(!this.isNested){this.host.addEventListener("openWormhole",(i=>{i.detail.onOpen.resolve();this.searchIndexNameChange();this.initAlgoliaClient()}))}}componentWillLoad(){this.inputField=this.host.querySelector("nano-input");if(this.storeId)a.init(this,["searchStr"],this.storeMethod,this.storeId)}render(){return s(h,{onFocus:this.handleFocus,tabindex:"-1"},s("slot",null))}get host(){return e(this)}static get watchers(){return{searchIndexName:["searchIndexNameChange"],algoliaIndex:["algoliaChange"],browseIndex:["browseIndexChange"],apiKey:["initAlgoliaClient"],appId:["initAlgoliaClient"],searchIndex:["initAlgoliaClient"]}}};r(o,["algoliaIndex","searchIndex","browseIndex"]);export{o as nano_algolia_input};
-//# sourceMappingURL=p-93bece01.entry.js.map
+import{r as i,c as t,h as s,a as h,g as e}from"./p-f6a8467a.js";import{a as n}from"./p-ed6adde2.js";import{C as a}from"./p-a6ff5ca6.js";import{W as r}from"./p-60a8c896.js";import"./p-69a3e911.js";import"./p-9746b0a5.js";const o=class{constructor(s){i(this,s);this.nanoSearchResult=t(this,"nanoSearchResult",7);this.nanoSearch=t(this,"nanoSearch",7);this.nanoSearchReset=t(this,"nanoSearchReset",7);this.handleFocus=()=>{if(this.inputField)this.inputField.setFocus()};this.searchStr="";this.algoliaIndex=null;this.currentResults=undefined;this.appId="";this.apiKey="";this.searchIndex=null;this.searchIndexName=undefined;this.minChars=2;this.autoEmit=true;this.browseIndex=false;this.storeId=undefined;this.storeMethod="session"}async search(){this.emitResults()}searchIndexNameChange(){if(!this.searchIndexName||!this.searchIndexName.length)return;this.searchIndex={index:this.searchIndexName}}algoliaChange(){this.internalIndex=this.algoliaIndex}browseIndexChange(){if(this.browseIndex){this.searchStr="*";this.searchSubmit()}}initAlgoliaClient(){if(this.isNested||!this.appId||!this.apiKey)return;this.algoliaClient=n(this.appId,this.apiKey);if(this.searchIndex)this.algoliaIndex=this.algoliaClient.initIndex(this.searchIndex.index)}async searchSubmit(i){if(!this.internalIndex){console.error("No algolia index set");return}if(i){if(i.target.tagName.toLowerCase()!=="nano-input")return;this.searchStr=i.detail.value}else{this.inputField=this.inputField||this.host.querySelector("nano-input");if(!this.inputField)return;this.searchStr=this.inputField.value}if(this.searchStr.length<this.minChars){if(this.browseIndex)this.searchStr="*";else{if(this.searchStr.length===0){this.nanoSearchResult.emit({results:[],client:{apiKey:this.appId,appId:this.appId}});return}if(this.searchStr.length<this.minChars)return}}let t={};if(this.searchIndex.filters)t={facets:this.searchIndex.filters};const s=this.fixDomain(await this.internalIndex.search(this.searchStr,t));s.indexName=this.searchIndex.name;s.selected=true;s.domain=this.searchIndex.domain||null;s.index=this.searchIndex.index;this.currentResults=s;this.nanoSearch.emit({results:[this.currentResults],client:{apiKey:this.appId,appId:this.appId}});if(this.autoEmit)this.emitResults()}emitResults(){this.nanoSearchResult.emit({results:[this.currentResults],client:{apiKey:this.appId,appId:this.appId}})}fixDomain(i){if(!this.searchIndex.domain)return i;i.hits.map((i=>{if(i.url&&!i.url.match(/^http/))i.url=location.protocol+"//"+this.searchIndex.domain+i.url}));return i}connectedCallback(){this.isNested=this.host.parentElement.tagName.toLowerCase()==="nano-algolia"&&this.host.hasAttribute("slot")&&this.host.getAttribute("slot")==="search-input";if(!this.isNested){this.host.addEventListener("openWormhole",(i=>{i.detail.onOpen.resolve();this.searchIndexNameChange();this.initAlgoliaClient()}))}}componentWillLoad(){this.inputField=this.host.querySelector("nano-input");if(this.storeId)a.init(this,["searchStr"],this.storeMethod,this.storeId)}render(){return s(h,{onFocus:this.handleFocus,tabindex:"-1"},s("slot",null))}get host(){return e(this)}static get watchers(){return{searchIndexName:["searchIndexNameChange"],algoliaIndex:["algoliaChange"],browseIndex:["browseIndexChange"],apiKey:["initAlgoliaClient"],appId:["initAlgoliaClient"],searchIndex:["initAlgoliaClient"]}}};r(o,["algoliaIndex","searchIndex","browseIndex"]);export{o as nano_algolia_input};
+//# sourceMappingURL=p-1c6c94cb.entry.js.map

package/dist/nano-components/{p-a9beb006.entry.js → p-207a1fbc.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as s,c as o,h as t,a as n,g as e}from"./p-6ef53fa1.js";import{g as i}from"./p-257432ff.js";import{c as r}from"./p-411bb8f1.js";const a=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:block}";const l=class{constructor(t){s(this,t);this.nanoToggle=o(this,"nanoToggle",7);this.itemOpened=undefined;this.color=undefined}onToggleHandler(s){s.stopPropagation();const o=i(this.el,"nano-details")||this.el.querySelectorAll("nano-details");o.forEach(((o,t)=>{if(o!==s.target)o.open=false;else this.itemOpened=t}));this.nanoToggle.emit()}onClosedHandler(s){s.stopPropagation();this.itemOpened=null;this.nanoToggle.emit()}render(){return t(n,{class:Object.assign(Object.assign({},r(this.color)),{[`nano-color-${this.itemOpened}`]:typeof this.itemOpened==="number"})},t("slot",null))}get el(){return e(this)}};l.style=a;export{l as nano_accordion};
-//# sourceMappingURL=p-a9beb006.entry.js.map
+import{r as s,c as o,h as t,a as n,g as e}from"./p-f6a8467a.js";import{g as i}from"./p-257432ff.js";import{c as r}from"./p-411bb8f1.js";const a=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:block}";const l=class{constructor(t){s(this,t);this.nanoToggle=o(this,"nanoToggle",7);this.itemOpened=undefined;this.color=undefined}onToggleHandler(s){s.stopPropagation();const o=i(this.el,"nano-details")||this.el.querySelectorAll("nano-details");o.forEach(((o,t)=>{if(o!==s.target)o.open=false;else this.itemOpened=t}));this.nanoToggle.emit()}onClosedHandler(s){s.stopPropagation();this.itemOpened=null;this.nanoToggle.emit()}render(){return t(n,{class:Object.assign(Object.assign({},r(this.color)),{[`nano-color-${this.itemOpened}`]:typeof this.itemOpened==="number"})},t("slot",null))}get el(){return e(this)}};l.style=a;export{l as nano_accordion};
+//# sourceMappingURL=p-207a1fbc.entry.js.map

package/dist/nano-components/{p-d32dafd9.entry.js → p-239d343a.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as i,c as t,h as r,a as s,g as n}from"./p-6ef53fa1.js";import{d as e}from"./p-9746b0a5.js";const o=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--grid-col-gap:var(--nano-spacing-medium, 16px);--grid-row-gap:var(--nano-spacing-medium, 16px);--current-grid-size:"\'grid size: sm\'";display:block;opacity:0;transition:0.2s ease opacity;max-width:100%}:host .grid{display:grid;grid-gap:var(--grid-row-gap) var(--grid-col-gap);block-size:inherit;min-block-size:inherit}:host(.ready){opacity:1}:host(.has-grid) .grid{display:grid}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-1){grid-column-start:1 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-1){grid-row-start:1 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-1){grid-column-end:span 1 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-1){grid-row-end:span 1 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-2){grid-column-start:2 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-2){grid-row-start:2 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-2){grid-column-end:span 2 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-2){grid-row-end:span 2 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-3){grid-column-start:3 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-3){grid-row-start:3 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-3){grid-column-end:span 3 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-3){grid-row-end:span 3 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-4){grid-column-start:4 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-4){grid-row-start:4 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-4){grid-column-end:span 4 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-4){grid-row-end:span 4 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-5){grid-column-start:5 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-5){grid-row-start:5 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-5){grid-column-end:span 5 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-5){grid-row-end:span 5 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-6){grid-column-start:6 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-6){grid-row-start:6 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-6){grid-column-end:span 6 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-6){grid-row-end:span 6 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-7){grid-column-start:7 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-7){grid-row-start:7 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-7){grid-column-end:span 7 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-7){grid-row-end:span 7 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-8){grid-column-start:8 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-8){grid-row-start:8 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-8){grid-column-end:span 8 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-8){grid-row-end:span 8 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-9){grid-column-start:9 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-9){grid-row-start:9 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-9){grid-column-end:span 9 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-9){grid-row-end:span 9 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-10){grid-column-start:10 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-10){grid-row-start:10 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-10){grid-column-end:span 10 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-10){grid-row-end:span 10 !important}:host([content-panel]:not([content-panel=false])) .grid{grid-template-rows:auto 1fr}:host([full-height]:not([full-height=false])){block-size:100%}:host([full-height]:not([full-height=false])) .grid{grid-template-rows:1fr}:host([show-helper]:not([show-helper=false])) .grid{position:relative}:host([show-helper]:not([show-helper=false])) .grid::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(to right, rgba(126, 195, 241, 0.25), rgba(126, 195, 241, 0.25) var(--col-width), transparent var(--col-width), transparent var(--repeat-width));background-size:calc(100% + var(--grid-col-gap)) 100%;z-index:100}:host([show-helper]:not([show-helper=false])) .grid::before{content:var(--current-grid-size);font-size:30px;position:absolute;inline-size:100%;inset-inline-start:0;text-align:center;inset-block-start:50%;transform:translateY(-50%);color:rgba(0, 0, 0, 0.2);text-transform:uppercase;z-index:99;pointer-events:none}:host(.nano-grid-1){--current-grid-size:"grid size: 1";--col-width:calc(100% - var(--grid-col-gap));--repeat-width:calc(100% / 1)}:host(.nano-grid-1) .grid{grid-template-columns:repeat(1, minmax(var(--col-width), 1fr))}:host(.nano-grid-2){--current-grid-size:"grid size: 2";--col-width:calc(50% - var(--grid-col-gap));--repeat-width:calc(100% / 2)}:host(.nano-grid-2) .grid{grid-template-columns:repeat(2, minmax(var(--col-width), 1fr))}:host(.nano-grid-3){--current-grid-size:"grid size: 3";--col-width:calc(33.3333333333% - var(--grid-col-gap));--repeat-width:calc(100% / 3)}:host(.nano-grid-3) .grid{grid-template-columns:repeat(3, minmax(var(--col-width), 1fr))}:host(.nano-grid-4){--current-grid-size:"grid size: 4";--col-width:calc(25% - var(--grid-col-gap));--repeat-width:calc(100% / 4)}:host(.nano-grid-4) .grid{grid-template-columns:repeat(4, minmax(var(--col-width), 1fr))}:host(.nano-grid-5){--current-grid-size:"grid size: 5";--col-width:calc(20% - var(--grid-col-gap));--repeat-width:calc(100% / 5)}:host(.nano-grid-5) .grid{grid-template-columns:repeat(5, minmax(var(--col-width), 1fr))}:host(.nano-grid-6){--current-grid-size:"grid size: 6";--col-width:calc(16.6666666667% - var(--grid-col-gap));--repeat-width:calc(100% / 6)}:host(.nano-grid-6) .grid{grid-template-columns:repeat(6, minmax(var(--col-width), 1fr))}:host(.nano-grid-7){--current-grid-size:"grid size: 7";--col-width:calc(14.2857142857% - var(--grid-col-gap));--repeat-width:calc(100% / 7)}:host(.nano-grid-7) .grid{grid-template-columns:repeat(7, minmax(var(--col-width), 1fr))}:host(.nano-grid-8){--current-grid-size:"grid size: 8";--col-width:calc(12.5% - var(--grid-col-gap));--repeat-width:calc(100% / 8)}:host(.nano-grid-8) .grid{grid-template-columns:repeat(8, minmax(var(--col-width), 1fr))}:host(.nano-grid-9){--current-grid-size:"grid size: 9";--col-width:calc(11.1111111111% - var(--grid-col-gap));--repeat-width:calc(100% / 9)}:host(.nano-grid-9) .grid{grid-template-columns:repeat(9, minmax(var(--col-width), 1fr))}:host(.nano-grid-10){--current-grid-size:"grid size: 10";--col-width:calc(10% - var(--grid-col-gap));--repeat-width:calc(100% / 10)}:host(.nano-grid-10) .grid{grid-template-columns:repeat(10, minmax(var(--col-width), 1fr))}';const a=["col-span","col-start","row-span","row-start"];const d=class{constructor(r){i(this,r);this.nanoBpChange=t(this,"nanoBpChange",7);this.generalClasses=[""];this.gridClass=null;this.isSizes=[null];this.ready=false;this.isSmall=false;this.isMedium=false;this.isLarge=false;this.isXL=false;this.isXXL=false;this.sSize=300;this.mSize=550;this.lSize=800;this.xlSize=1e3;this.sCols=undefined;this.mCols=undefined;this.lCols=undefined;this.xlCols=undefined;this.xxlCols=undefined;this.showHelper=false;this.contentPanel=false;this.fullHeight=false;this.stateChange=e(this.stateChange.bind(this),100)}propChanged(){this.applySizeClasses()}applySizeClasses(){const i=this.currentWidth;this.isSmall=false;this.isMedium=false;this.isLarge=false;this.isXL=false;this.isXXL=false;this.generalClasses=[];this.gridClass=null;this.isSizes=[null];this.isSmall=true;this.generalClasses.push("is-small");if(this.sCols)this.gridClass=`nano-grid-${this.sCols}`;this.isSizes.push({size:"s",active:true});if(i>this.sSize){this.isMedium=true;this.generalClasses.push("is-medium");if(this.mCols)this.gridClass=`nano-grid-${this.mCols}`;this.isSizes.push({size:"m",active:true})}if(i>this.mSize){this.isLarge=true;this.generalClasses.push("is-large");if(this.lCols)this.gridClass=`nano-grid-${this.lCols}`;this.isSizes.push({size:"l",active:true})}if(i>this.lSize){this.isXL=true;this.generalClasses.push("is-xl");if(this.xlCols)this.gridClass=`nano-grid-${this.xlCols}`;this.isSizes.push({size:"xl",active:true})}if(i>this.xlSize){this.isXXL=true;this.generalClasses.push("is-xxl");if(this.xxlCols)this.gridClass=`nano-grid-${this.xxlCols}`;this.isSizes.push({size:"xxl",active:true})}this.el.style.setProperty("--current-grid-size",`'grid size: ${this.isSizes.slice().pop().size}'`);this.applyChildrenClasses();setTimeout((()=>this.ready=true),0)}stateChange(){this.nanoBpChange.emit(this.generalClasses)}applyChildrenClasses(){const i=this.el.querySelectorAll("nano-grid-item");if(i.length){i.forEach((i=>{i.changeBP(this.isSizes)}));return}let t=[""];let r="";let s;let n;const e=this.el;[].map.call(e.children,(i=>{if(!i.hasAttribute("grid-states"))return;n=i.className.split(" ").filter((i=>!i.startsWith("nano-grid-")));i.className=n.join(" ").trim();const e=i.getAttribute("grid-states").split(" ");a.forEach((o=>{s=false;this.isSizes.slice().reverse().forEach((function(a){if(s||!a)return;s=e.find((i=>i.indexOf(`${a.size}-${o}`)===0));if(s){n=i.className.split(" ").filter((i=>!i.includes("nano-grid-${stateOpt}")));i.className=n.join(" ").trim();t=s.split("-");t.shift();r=t.join("-");i.classList.add(`nano-grid-${r}`)}}))}))}))}componentWillLoad(){const i=this.el;[].map.call(i.children,(i=>i.classList.add("nano-griditem")))}componentDidLoad(){if(!window["ResizeObserver"])return;this.ro=new ResizeObserver((i=>{for(const t of i){if(!t.contentRect.width)return;this.currentWidth=t.contentRect.width;this.applySizeClasses()}}));this.ro.observe(this.el)}disconnectedCallback(){if(this.ro)this.ro.disconnect()}render(){return r(s,{class:{[this.generalClasses.join(" ")]:true,"has-grid":!!this.gridClass,ready:this.ready,[this.gridClass]:true}},r("div",{class:{grid:true}},r("slot",null)))}get el(){return n(this)}static get watchers(){return{sSize:["propChanged"],mSize:["propChanged"],lSize:["propChanged"],xlSize:["propChanged"],sCols:["propChanged"],mCols:["propChanged"],lCols:["propChanged"],xlCols:["propChanged"],xxlCols:["propChanged"],isSmall:["stateChange"],isMedium:["stateChange"],isLarge:["stateChange"],isXL:["stateChange"],isXXL:["stateChange"]}}};d.style=o;const h=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:inline-block}";const g=["col-span","col-start","row-span","row-start"];const l=class{constructor(t){i(this,t);this.currGridSizes=[null];this.gridStates=""}updateGridClasses(){this.applyChildrenClasses()}async changeBP(i){if(this.currGridSizes===i)return;this.currGridSizes=i;if(!this.gridStates.length)return;this.applyChildrenClasses()}applyChildrenClasses(){let i=[""];let t="";let r;let s;s=this.el.className.split(" ").filter((i=>!i.startsWith("nano-grid-")));this.el.className=s.join(" ").trim();const n=this.gridStates.split(" ");g.forEach((e=>{r=false;this.currGridSizes.slice().reverse().forEach((o=>{if(r||!o)return;r=n.find((i=>i.indexOf(`${o.size}-${e}`)===0));if(r){s=this.el.className.split(" ").filter((i=>!i.includes("nano-grid-${stateOpt}")));this.el.className=s.join(" ").trim();i=r.split("-");i.shift();t=i.join("-");this.el.classList.add(`nano-grid-${t}`)}}))}))}render(){return r("slot",null)}get el(){return n(this)}static get watchers(){return{gridStates:["updateGridClasses"]}}};l.style=h;const c=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding:0;display:inline-block;object-fit:cover;object-position:center;background-size:cover;background-position:center}:host *{border-radius:inherit}:host([background]:not([background=false])){display:block}.img{position:relative;object-fit:inherit;object-position:inherit;background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit;flex:1 1 100%;display:flex;flex-direction:column;min-block-size:inherit;max-block-size:inherit;max-inline-size:inherit;min-height:inherit;min-width:inherit;block-size:inherit;inline-size:inherit;height:inherit;width:inherit;max-height:inherit;max-width:inherit;aspect-ratio:inherit}.img__loader,.img__observer{position:absolute;inset:0;block-size:100%;inline-size:100%;z-index:-1}.img__image,.img__bg{border-radius:inherit;display:block;opacity:0;transition:0.5s ease opacity, 0.3s ease filter 0.4s;filter:blur(5px);flex:1}.img__image.loaded,.img__bg.loaded{opacity:1;filter:blur(0.1px)}@media not all and (min-resolution: 0.001dpcm){@supports (-webkit-appearance: none){.img__image.loaded,.img__bg.loaded{filter:blur(0)}}}.img__image{object-fit:inherit;object-position:inherit;max-inline-size:100%;min-block-size:inherit;max-block-size:inherit;min-height:inherit;min-width:inherit;block-size:auto;inline-size:inherit;height:inherit;width:inherit;max-height:inherit;max-width:inherit;aspect-ratio:inherit}.img__image.hide{visibility:hidden}.img__image.hide.no-height{block-size:1px;position:absolute;z-index:-1}.img__bg{background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit;overflow:auto;padding:var(--padding)}.img__bg.no-height{position:absolute;inset:0}";const p=class{constructor(r){i(this,r);this.nanoImgWillLoad=t(this,"nanoImgWillLoad",7);this.nanoImgDidLoad=t(this,"nanoImgDidLoad",7);this.nanoImgError=t(this,"nanoImgError",7);this._srcSet={};this.onLoad=()=>{this.nanoImgDidLoad.emit();setTimeout((()=>this.hasLoaded=true),50)};this.onError=()=>{this.nanoImgError.emit()};this.onResize=i=>{Object.entries(i.detail).forEach((([i,t])=>{this._srcSet[i].active=t}));const t=[];Object.keys(this._srcSet).sort().forEach((i=>{if(this._srcSet[i].active)t.push(this._srcSet[i].src)}));if(t.length)this._src=t.slice(-1)[0];else this._src=this.src};this.loadSrc=undefined;this.loadError=undefined;this.hasLoaded=false;this.imgStates=null;this._src=undefined;this.alt=undefined;this.src=undefined;this.srcSet=undefined;this.lazy=true;this.background=undefined;this.autoHeight="content"}_srcChanged(){this.hasLoaded=false;this.addIO()}srcChanged(){this._src=this.src}srcSetChanged(){if(!this.srcSet)return;delete this._srcSet;this._srcSet={};this.imgStates=this.srcSet.split(",").map((i=>{const[t,r]=i.split(" ").filter((i=>i.length));this._srcSet[t]={src:r,active:false};return t})).join(", ")}lazyChanged(){if(!this.lazy)this.load()}addIO(){if(!this._src||this.hasLoaded)return;if(!this.lazy){this.load();return}if(typeof window!=="undefined"&&"IntersectionObserver"in window){this.removeIO();this.io=new IntersectionObserver((i=>{if(i[0].isIntersecting){this.load();this.removeIO()}}));this.io.observe(this.host)}else setTimeout((()=>this.load()),200)}load(){this.loadError=this.onError;this.loadSrc=this._src;this.nanoImgWillLoad.emit()}removeIO(){if(this.io){this.io.disconnect();this.io=undefined}}connectedCallback(){this.srcChanged();this.srcSetChanged();this.lazyChanged()}componentDidLoad(){this.addIO()}disconnectedCallback(){this.removeIO()}render(){const i=!!this.loadSrc?{"background-image":`url(${this.loadSrc})`}:{};return r("div",{class:"img"},r("nano-skeleton",{class:"img__loader"}),!!this.background&&r("div",{class:{loaded:this.hasLoaded,img__bg:true,"no-height":this.autoHeight==="image"},style:i},r("slot",null)),r("img",{class:{img__image:true,loaded:this.hasLoaded,hide:this.background,"no-height":this.autoHeight==="content"},decoding:"async",src:this.loadSrc,loading:undefined,alt:this.alt,onLoad:this.onLoad,onError:this.loadError}),r("nano-resize-observe",{class:"img__observer",onNanoResizeStateChange:this.onResize,states:this.imgStates}))}get host(){return n(this)}static get watchers(){return{_src:["_srcChanged"],src:["srcChanged"],srcSet:["srcSetChanged"],lazy:["lazyChanged"]}}};p.style=c;export{d as nano_grid,l as nano_grid_item,p as nano_img};
-//# sourceMappingURL=p-d32dafd9.entry.js.map
+import{r as i,c as t,h as r,a as s,g as n}from"./p-f6a8467a.js";import{d as e}from"./p-9746b0a5.js";const o=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--grid-col-gap:var(--nano-spacing-medium, 16px);--grid-row-gap:var(--nano-spacing-medium, 16px);--current-grid-size:"\'grid size: sm\'";display:block;opacity:0;transition:0.2s ease opacity;max-width:100%}:host .grid{display:grid;grid-gap:var(--grid-row-gap) var(--grid-col-gap);block-size:inherit;min-block-size:inherit}:host(.ready){opacity:1}:host(.has-grid) .grid{display:grid}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-1){grid-column-start:1 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-1){grid-row-start:1 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-1){grid-column-end:span 1 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-1){grid-row-end:span 1 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-2){grid-column-start:2 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-2){grid-row-start:2 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-2){grid-column-end:span 2 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-2){grid-row-end:span 2 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-3){grid-column-start:3 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-3){grid-row-start:3 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-3){grid-column-end:span 3 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-3){grid-row-end:span 3 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-4){grid-column-start:4 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-4){grid-row-start:4 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-4){grid-column-end:span 4 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-4){grid-row-end:span 4 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-5){grid-column-start:5 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-5){grid-row-start:5 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-5){grid-column-end:span 5 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-5){grid-row-end:span 5 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-6){grid-column-start:6 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-6){grid-row-start:6 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-6){grid-column-end:span 6 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-6){grid-row-end:span 6 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-7){grid-column-start:7 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-7){grid-row-start:7 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-7){grid-column-end:span 7 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-7){grid-row-end:span 7 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-8){grid-column-start:8 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-8){grid-row-start:8 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-8){grid-column-end:span 8 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-8){grid-row-end:span 8 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-9){grid-column-start:9 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-9){grid-row-start:9 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-9){grid-column-end:span 9 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-9){grid-row-end:span 9 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-10){grid-column-start:10 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-10){grid-row-start:10 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-10){grid-column-end:span 10 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-10){grid-row-end:span 10 !important}:host([content-panel]:not([content-panel=false])) .grid{grid-template-rows:auto 1fr}:host([full-height]:not([full-height=false])){block-size:100%}:host([full-height]:not([full-height=false])) .grid{grid-template-rows:1fr}:host([show-helper]:not([show-helper=false])) .grid{position:relative}:host([show-helper]:not([show-helper=false])) .grid::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(to right, rgba(126, 195, 241, 0.25), rgba(126, 195, 241, 0.25) var(--col-width), transparent var(--col-width), transparent var(--repeat-width));background-size:calc(100% + var(--grid-col-gap)) 100%;z-index:100}:host([show-helper]:not([show-helper=false])) .grid::before{content:var(--current-grid-size);font-size:30px;position:absolute;inline-size:100%;inset-inline-start:0;text-align:center;inset-block-start:50%;transform:translateY(-50%);color:rgba(0, 0, 0, 0.2);text-transform:uppercase;z-index:99;pointer-events:none}:host(.nano-grid-1){--current-grid-size:"grid size: 1";--col-width:calc(100% - var(--grid-col-gap));--repeat-width:calc(100% / 1)}:host(.nano-grid-1) .grid{grid-template-columns:repeat(1, minmax(var(--col-width), 1fr))}:host(.nano-grid-2){--current-grid-size:"grid size: 2";--col-width:calc(50% - var(--grid-col-gap));--repeat-width:calc(100% / 2)}:host(.nano-grid-2) .grid{grid-template-columns:repeat(2, minmax(var(--col-width), 1fr))}:host(.nano-grid-3){--current-grid-size:"grid size: 3";--col-width:calc(33.3333333333% - var(--grid-col-gap));--repeat-width:calc(100% / 3)}:host(.nano-grid-3) .grid{grid-template-columns:repeat(3, minmax(var(--col-width), 1fr))}:host(.nano-grid-4){--current-grid-size:"grid size: 4";--col-width:calc(25% - var(--grid-col-gap));--repeat-width:calc(100% / 4)}:host(.nano-grid-4) .grid{grid-template-columns:repeat(4, minmax(var(--col-width), 1fr))}:host(.nano-grid-5){--current-grid-size:"grid size: 5";--col-width:calc(20% - var(--grid-col-gap));--repeat-width:calc(100% / 5)}:host(.nano-grid-5) .grid{grid-template-columns:repeat(5, minmax(var(--col-width), 1fr))}:host(.nano-grid-6){--current-grid-size:"grid size: 6";--col-width:calc(16.6666666667% - var(--grid-col-gap));--repeat-width:calc(100% / 6)}:host(.nano-grid-6) .grid{grid-template-columns:repeat(6, minmax(var(--col-width), 1fr))}:host(.nano-grid-7){--current-grid-size:"grid size: 7";--col-width:calc(14.2857142857% - var(--grid-col-gap));--repeat-width:calc(100% / 7)}:host(.nano-grid-7) .grid{grid-template-columns:repeat(7, minmax(var(--col-width), 1fr))}:host(.nano-grid-8){--current-grid-size:"grid size: 8";--col-width:calc(12.5% - var(--grid-col-gap));--repeat-width:calc(100% / 8)}:host(.nano-grid-8) .grid{grid-template-columns:repeat(8, minmax(var(--col-width), 1fr))}:host(.nano-grid-9){--current-grid-size:"grid size: 9";--col-width:calc(11.1111111111% - var(--grid-col-gap));--repeat-width:calc(100% / 9)}:host(.nano-grid-9) .grid{grid-template-columns:repeat(9, minmax(var(--col-width), 1fr))}:host(.nano-grid-10){--current-grid-size:"grid size: 10";--col-width:calc(10% - var(--grid-col-gap));--repeat-width:calc(100% / 10)}:host(.nano-grid-10) .grid{grid-template-columns:repeat(10, minmax(var(--col-width), 1fr))}';const a=["col-span","col-start","row-span","row-start"];const d=class{constructor(r){i(this,r);this.nanoBpChange=t(this,"nanoBpChange",7);this.generalClasses=[""];this.gridClass=null;this.isSizes=[null];this.ready=false;this.isSmall=false;this.isMedium=false;this.isLarge=false;this.isXL=false;this.isXXL=false;this.sSize=300;this.mSize=550;this.lSize=800;this.xlSize=1e3;this.sCols=undefined;this.mCols=undefined;this.lCols=undefined;this.xlCols=undefined;this.xxlCols=undefined;this.showHelper=false;this.contentPanel=false;this.fullHeight=false;this.stateChange=e(this.stateChange.bind(this),100)}propChanged(){this.applySizeClasses()}applySizeClasses(){const i=this.currentWidth;this.isSmall=false;this.isMedium=false;this.isLarge=false;this.isXL=false;this.isXXL=false;this.generalClasses=[];this.gridClass=null;this.isSizes=[null];this.isSmall=true;this.generalClasses.push("is-small");if(this.sCols)this.gridClass=`nano-grid-${this.sCols}`;this.isSizes.push({size:"s",active:true});if(i>this.sSize){this.isMedium=true;this.generalClasses.push("is-medium");if(this.mCols)this.gridClass=`nano-grid-${this.mCols}`;this.isSizes.push({size:"m",active:true})}if(i>this.mSize){this.isLarge=true;this.generalClasses.push("is-large");if(this.lCols)this.gridClass=`nano-grid-${this.lCols}`;this.isSizes.push({size:"l",active:true})}if(i>this.lSize){this.isXL=true;this.generalClasses.push("is-xl");if(this.xlCols)this.gridClass=`nano-grid-${this.xlCols}`;this.isSizes.push({size:"xl",active:true})}if(i>this.xlSize){this.isXXL=true;this.generalClasses.push("is-xxl");if(this.xxlCols)this.gridClass=`nano-grid-${this.xxlCols}`;this.isSizes.push({size:"xxl",active:true})}this.el.style.setProperty("--current-grid-size",`'grid size: ${this.isSizes.slice().pop().size}'`);this.applyChildrenClasses();setTimeout((()=>this.ready=true),0)}stateChange(){this.nanoBpChange.emit(this.generalClasses)}applyChildrenClasses(){const i=this.el.querySelectorAll("nano-grid-item");if(i.length){i.forEach((i=>{i.changeBP(this.isSizes)}));return}let t=[""];let r="";let s;let n;const e=this.el;[].map.call(e.children,(i=>{if(!i.hasAttribute("grid-states"))return;n=i.className.split(" ").filter((i=>!i.startsWith("nano-grid-")));i.className=n.join(" ").trim();const e=i.getAttribute("grid-states").split(" ");a.forEach((o=>{s=false;this.isSizes.slice().reverse().forEach((function(a){if(s||!a)return;s=e.find((i=>i.indexOf(`${a.size}-${o}`)===0));if(s){n=i.className.split(" ").filter((i=>!i.includes("nano-grid-${stateOpt}")));i.className=n.join(" ").trim();t=s.split("-");t.shift();r=t.join("-");i.classList.add(`nano-grid-${r}`)}}))}))}))}componentWillLoad(){const i=this.el;[].map.call(i.children,(i=>i.classList.add("nano-griditem")))}componentDidLoad(){if(!window["ResizeObserver"])return;this.ro=new ResizeObserver((i=>{for(const t of i){if(!t.contentRect.width)return;this.currentWidth=t.contentRect.width;this.applySizeClasses()}}));this.ro.observe(this.el)}disconnectedCallback(){if(this.ro)this.ro.disconnect()}render(){return r(s,{class:{[this.generalClasses.join(" ")]:true,"has-grid":!!this.gridClass,ready:this.ready,[this.gridClass]:true}},r("div",{class:{grid:true}},r("slot",null)))}get el(){return n(this)}static get watchers(){return{sSize:["propChanged"],mSize:["propChanged"],lSize:["propChanged"],xlSize:["propChanged"],sCols:["propChanged"],mCols:["propChanged"],lCols:["propChanged"],xlCols:["propChanged"],xxlCols:["propChanged"],isSmall:["stateChange"],isMedium:["stateChange"],isLarge:["stateChange"],isXL:["stateChange"],isXXL:["stateChange"]}}};d.style=o;const h=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:inline-block}";const g=["col-span","col-start","row-span","row-start"];const l=class{constructor(t){i(this,t);this.currGridSizes=[null];this.gridStates=""}updateGridClasses(){this.applyChildrenClasses()}async changeBP(i){if(this.currGridSizes===i)return;this.currGridSizes=i;if(!this.gridStates.length)return;this.applyChildrenClasses()}applyChildrenClasses(){let i=[""];let t="";let r;let s;s=this.el.className.split(" ").filter((i=>!i.startsWith("nano-grid-")));this.el.className=s.join(" ").trim();const n=this.gridStates.split(" ");g.forEach((e=>{r=false;this.currGridSizes.slice().reverse().forEach((o=>{if(r||!o)return;r=n.find((i=>i.indexOf(`${o.size}-${e}`)===0));if(r){s=this.el.className.split(" ").filter((i=>!i.includes("nano-grid-${stateOpt}")));this.el.className=s.join(" ").trim();i=r.split("-");i.shift();t=i.join("-");this.el.classList.add(`nano-grid-${t}`)}}))}))}render(){return r("slot",null)}get el(){return n(this)}static get watchers(){return{gridStates:["updateGridClasses"]}}};l.style=h;const c=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding:0;display:inline-block;object-fit:cover;object-position:center;background-size:cover;background-position:center}:host *{border-radius:inherit}:host([background]:not([background=false])){display:block}.img{position:relative;object-fit:inherit;object-position:inherit;background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit;flex:1 1 100%;display:flex;flex-direction:column;min-block-size:inherit;max-block-size:inherit;max-inline-size:inherit;min-height:inherit;min-width:inherit;block-size:inherit;inline-size:inherit;height:inherit;width:inherit;max-height:inherit;max-width:inherit;aspect-ratio:inherit}.img__loader,.img__observer{position:absolute;inset:0;block-size:100%;inline-size:100%;z-index:-1}.img__image,.img__bg{border-radius:inherit;display:block;opacity:0;transition:0.5s ease opacity, 0.3s ease filter 0.4s;filter:blur(5px);flex:1}.img__image.loaded,.img__bg.loaded{opacity:1;filter:blur(0)}@media not all and (min-resolution: 0.001dpcm){@supports (-webkit-appearance: none){.img__image.loaded,.img__bg.loaded{filter:blur(0)}}}.img__image{object-fit:inherit;object-position:inherit;max-inline-size:100%;min-block-size:inherit;max-block-size:inherit;min-height:inherit;min-width:inherit;block-size:auto;inline-size:inherit;height:inherit;width:inherit;max-height:inherit;max-width:inherit;aspect-ratio:inherit}.img__image.hide{visibility:hidden}.img__image.hide.no-height{block-size:1px;position:absolute;z-index:-1}.img__bg{background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit;overflow:auto;padding:var(--padding)}.img__bg.no-height{position:absolute;inset:0}";const p=class{constructor(r){i(this,r);this.nanoImgWillLoad=t(this,"nanoImgWillLoad",7);this.nanoImgDidLoad=t(this,"nanoImgDidLoad",7);this.nanoImgError=t(this,"nanoImgError",7);this._srcSet={};this.onLoad=()=>{this.nanoImgDidLoad.emit();setTimeout((()=>this.hasLoaded=true),50)};this.onError=()=>{this.nanoImgError.emit()};this.onResize=i=>{Object.entries(i.detail).forEach((([i,t])=>{this._srcSet[i].active=t}));const t=[];Object.keys(this._srcSet).sort().forEach((i=>{if(this._srcSet[i].active)t.push(this._srcSet[i].src)}));if(t.length)this._src=t.slice(-1)[0];else this._src=this.src};this.loadSrc=undefined;this.loadError=undefined;this.hasLoaded=false;this.imgStates=null;this._src=undefined;this.alt=undefined;this.src=undefined;this.srcSet=undefined;this.lazy=true;this.background=undefined;this.autoHeight="content"}_srcChanged(){this.hasLoaded=false;this.addIO()}srcChanged(){this._src=this.src}srcSetChanged(){if(!this.srcSet)return;delete this._srcSet;this._srcSet={};this.imgStates=this.srcSet.split(",").map((i=>{const[t,r]=i.split(" ").filter((i=>i.length));this._srcSet[t]={src:r,active:false};return t})).join(", ")}lazyChanged(){if(!this.lazy)this.load()}addIO(){if(!this._src||this.hasLoaded)return;if(!this.lazy){this.load();return}if(typeof window!=="undefined"&&"IntersectionObserver"in window){this.removeIO();this.io=new IntersectionObserver((i=>{if(i[0].isIntersecting){this.load();this.removeIO()}}));this.io.observe(this.host)}else setTimeout((()=>this.load()),200)}load(){this.loadError=this.onError;this.loadSrc=this._src;this.nanoImgWillLoad.emit()}removeIO(){if(this.io){this.io.disconnect();this.io=undefined}}connectedCallback(){this.srcChanged();this.srcSetChanged();this.lazyChanged()}componentDidLoad(){this.addIO()}disconnectedCallback(){this.removeIO()}render(){const i=!!this.loadSrc?{"background-image":`url(${this.loadSrc})`}:{};return r("div",{class:"img"},r("nano-skeleton",{class:"img__loader"}),!!this.background&&r("div",{class:{loaded:this.hasLoaded,img__bg:true,"no-height":this.autoHeight==="image"},style:i},r("slot",null)),r("img",{class:{img__image:true,loaded:this.hasLoaded,hide:this.background,"no-height":this.autoHeight==="content"},decoding:"async",src:this.loadSrc,loading:undefined,alt:this.alt,onLoad:this.onLoad,onError:this.loadError}),r("nano-resize-observe",{class:"img__observer",onNanoResizeStateChange:this.onResize,states:this.imgStates}))}get host(){return n(this)}static get watchers(){return{_src:["_srcChanged"],src:["srcChanged"],srcSet:["srcSetChanged"],lazy:["lazyChanged"]}}};p.style=c;export{d as nano_grid,l as nano_grid_item,p as nano_img};
+//# sourceMappingURL=p-239d343a.entry.js.map

package/dist/nano-components/{p-d32dafd9.entry.js.map → p-239d343a.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["gridCss","STATEOPTS","Grid","constructor","hostRef","this","generalClasses","gridClass","isSizes","stateChange","debounce","bind","propChanged","applySizeClasses","size","currentWidth","isSmall","isMedium","isLarge","isXL","isXXL","push","sCols","active","sSize","mCols","mSize","lCols","lSize","xlCols","xlSize","xxlCols","el","style","setProperty","slice","pop","applyChildrenClasses","setTimeout","ready","nanoBpChange","emit","gridItems","querySelectorAll","length","forEach","gridItem","changeBP","stateArr","itemState","found","classes","ctx","map","call","children","gItem","hasAttribute","className","split","filter","c","startsWith","join","trim","itemStates","getAttribute","stateOpt","reverse","find","state","indexOf","includes","shift","classList","add","componentWillLoad","ele","componentDidLoad","window","ro","ResizeObserver","entries","entry","contentRect","width","observe","disconnectedCallback","disconnect","render","h","Host","class","grid","gridItemCss","GridItem","currGridSizes","updateGridClasses","async","newGridSizes","gridStates","imgCss","Img","_srcSet","onLoad","nanoImgDidLoad","hasLoaded","onError","nanoImgError","onResize","e","Object","detail","bp","srcOpts","keys","sort","src","_src","_srcChanged","addIO","srcChanged","srcSetChanged","srcSet","imgStates","bpSrc","lazyChanged","lazy","load","removeIO","io","IntersectionObserver","data","isIntersecting","host","loadError","loadSrc","nanoImgWillLoad","undefined","connectedCallback","bgStyle","background","loaded","img__bg","autoHeight","img__image","hide","decoding","loading","alt","onNanoResizeStateChange","states"],"sources":["./src/components/grid/grid.scss?tag=nano-grid&encapsulation=shadow","./src/components/grid/grid.tsx","./src/components/grid/grid-item.scss?tag=nano-grid-item&encapsulation=shadow","./src/components/grid/grid-item.tsx","./src/components/img/img.scss?tag=nano-img&encapsulation=shadow","./src/components/img/img.tsx"],"sourcesContent":["@use 'sass:math';\n\n@import '../../global/style/nano-theme/base';\n\n// ie 11 fixes ... maximum numbers we can place on the grid ... upping this number decreases performance a lot.\n$max-grid-cols: 10;\n\n@mixin grid($size: 1) {\n  @at-root :host(.nano-grid-#{$size}) {\n    --current-grid-size: 'grid size: #{$size}';\n    --col-width: calc(#{math.div(100, $size)}% - var(--grid-col-gap));\n    --repeat-width: calc(100% / #{$size});\n\n    .grid {\n      grid-template-columns: repeat(#{$size}, minmax(var(--col-width), 1fr));\n\n      $current-column: 1;\n      $current-row: 1;\n\n      @for $i from 1 through ($max-grid-cols * 2) {\n        @if $current-column > $size {\n          $current-column: 1;\n          $current-row: $current-row + 1;\n        }\n        $current-column: $current-column + 1;\n      }\n    }\n  }\n}\n\n@mixin grid-spans {\n  @for $i from 1 through $max-grid-cols {\n    ::slotted(.nano-grid-col-start-#{$i}) {\n      grid-column-start: #{$i} !important;\n    }\n\n    ::slotted(.nano-grid-row-start-#{$i}) {\n      grid-row-start: #{$i} !important;\n    }\n\n    ::slotted(.nano-grid-col-span-#{$i}) {\n      grid-column-end: span #{$i} !important;\n    }\n\n    ::slotted(.nano-grid-row-span-#{$i}) {\n      grid-row-end: span #{$i} !important;\n    }\n  }\n}\n\n:host {\n  /**\n  * @prop --grid-col-gap: gap between all columns. Defaults to theme's global padding\n  * @prop --grid-row-gap: gap between all rows. Defaults to theme's global padding\n  */\n\n  --grid-col-gap: #{$spacing-medium};\n  --grid-row-gap: #{$spacing-medium};\n  --current-grid-size: \"'grid size: sm'\";\n\n  display: block;\n  opacity: 0;\n  transition: 0.2s ease opacity;\n  max-width: 100%;\n\n  .grid {\n    /* autoprefixer: ignore next */\n    display: grid;\n\n    /* autoprefixer: ignore next */\n    grid-gap: var(--grid-row-gap) var(--grid-col-gap);\n    block-size: inherit;\n    min-block-size: inherit;\n  }\n}\n\n:host(.ready) {\n  opacity: 1;\n}\n\n:host(.has-grid) {\n  .grid {\n    display: grid;\n\n    @include grid-spans;\n  }\n}\n\n:host([content-panel]:not([content-panel='false'])) {\n  .grid {\n    grid-template-rows: auto 1fr;\n  }\n}\n\n:host([full-height]:not([full-height='false'])) {\n  block-size: 100%;\n\n  .grid {\n    grid-template-rows: 1fr;\n  }\n}\n\n:host([show-helper]:not([show-helper='false'])) {\n  .grid {\n    position: relative;\n\n    &::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      background-image:\n        repeating-linear-gradient(\n          to right,\n          hsl(204deg 80% 72% / 25%),\n          hsl(204deg 80% 72% / 25%) var(--col-width),\n          transparent var(--col-width),\n          transparent var(--repeat-width)\n        );\n      background-size: calc(100% + var(--grid-col-gap)) 100%;\n      z-index: 100;\n    }\n\n    &::before {\n      content: var(--current-grid-size);\n      font-size: 30px;\n      position: absolute;\n      inline-size: 100%;\n      inset-inline-start: 0;\n      text-align: center;\n      inset-block-start: 50%;\n      transform: translateY(-50%);\n      color: rgb(0 0 0 / 20%);\n      text-transform: uppercase;\n      z-index: 99;\n      pointer-events: none;\n    }\n  }\n}\n\n@for $i from 1 through $max-grid-cols {\n  @include grid($i);\n}\n","import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Host,\n  State,\n  Watch,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { debounce } from '../../utils/throttle';\nimport type { GridSizes } from '../../interface';\n\nconst STATEOPTS = ['col-span', 'col-start', 'row-span', 'row-start'];\n\n/**\n * A context-aware CSS grid implementation.\n * Uses it's own width to choose column number - not screen width.\n */\n@Component({\n  tag: 'nano-grid',\n  styleUrl: 'grid.scss',\n  shadow: true,\n})\nexport class Grid {\n  @Element() private el: HTMLNanoGridElement;\n  private ro: ResizeObserver;\n  private generalClasses: Array<string> = [''];\n  private gridClass: string = null;\n  private isSizes: GridSizes[] = [null];\n  private currentWidth: number;\n\n  constructor() {\n    this.stateChange = debounce(this.stateChange.bind(this), 100);\n  }\n\n  @State() ready: boolean = false;\n  @State() isSmall = false;\n  @State() isMedium = false;\n  @State() isLarge = false;\n  @State() isXL = false;\n  @State() isXXL = false;\n\n  /**\n   * the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.\n   */\n  @Prop() sSize: number = 300;\n\n  /**\n   * the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.\n   */\n  @Prop() mSize: number = 550;\n\n  /**\n   * the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.\n   */\n  @Prop() lSize: number = 800;\n\n  /**\n   * the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.\n   */\n  @Prop() xlSize: number = 1000;\n\n  /**\n   * the number of columns the grid has at the small breakpoint.\n   */\n  @Prop() sCols: number;\n\n  /**\n   * the number of columns the grid has at the medium breakpoint.\n   */\n  @Prop() mCols: number;\n\n  /**\n   * the number of columns the grid has at the large breakpoint.\n   */\n  @Prop() lCols: number;\n\n  /**\n   * the number of columns the grid has at the xl breakpoint.\n   */\n  @Prop() xlCols: number;\n\n  /**\n   * the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint)\n   */\n  @Prop() xxlCols: number;\n\n  /**\n   * shows a grid helper to visualise where columns are\n   */\n  @Prop({ reflect: true }) showHelper: boolean = false;\n\n  /**\n   * shortcut for a traditional website like grid (requires more than one row). The second row will auto expand to fill the grid height. The first row and > 2nd row will be the size of their content. e.g. header, body and footer.\n   */\n  @Prop({ reflect: true }) contentPanel: boolean = false;\n\n  /**\n   * Helper to make grid items expand to full height in IE11\n   */\n  @Prop({ reflect: true }) fullHeight: boolean = false;\n\n  /**\n   * Emitted when the `nano-grid` changes breakpoint\n   */\n  @Event() nanoBpChange: EventEmitter<string[]>;\n\n  @Watch('sSize')\n  @Watch('mSize')\n  @Watch('lSize')\n  @Watch('xlSize')\n  @Watch('sCols')\n  @Watch('mCols')\n  @Watch('lCols')\n  @Watch('xlCols')\n  @Watch('xxlCols')\n  propChanged() {\n    this.applySizeClasses();\n  }\n\n  private applySizeClasses() {\n    const size = this.currentWidth;\n\n    this.isSmall = false;\n    this.isMedium = false;\n    this.isLarge = false;\n    this.isXL = false;\n    this.isXXL = false;\n\n    this.generalClasses = [];\n    this.gridClass = null;\n    this.isSizes = [null];\n\n    this.isSmall = true;\n    this.generalClasses.push('is-small');\n    if (this.sCols) this.gridClass = `nano-grid-${this.sCols}`;\n    this.isSizes.push({ size: 's', active: true });\n\n    if (size > this.sSize) {\n      this.isMedium = true;\n      this.generalClasses.push('is-medium');\n      if (this.mCols) this.gridClass = `nano-grid-${this.mCols}`;\n      this.isSizes.push({ size: 'm', active: true });\n    }\n\n    if (size > this.mSize) {\n      this.isLarge = true;\n      this.generalClasses.push('is-large');\n      if (this.lCols) this.gridClass = `nano-grid-${this.lCols}`;\n      this.isSizes.push({ size: 'l', active: true });\n    }\n\n    if (size > this.lSize) {\n      this.isXL = true;\n      this.generalClasses.push('is-xl');\n      if (this.xlCols) this.gridClass = `nano-grid-${this.xlCols}`;\n      this.isSizes.push({ size: 'xl', active: true });\n    }\n\n    if (size > this.xlSize) {\n      this.isXXL = true;\n      this.generalClasses.push('is-xxl');\n      if (this.xxlCols) this.gridClass = `nano-grid-${this.xxlCols}`;\n      this.isSizes.push({ size: 'xxl', active: true });\n    }\n\n    this.el.style.setProperty(\n      '--current-grid-size',\n      `'grid size: ${this.isSizes.slice().pop().size}'`\n    );\n    this.applyChildrenClasses();\n    setTimeout(() => (this.ready = true), 0);\n  }\n\n  @Watch('isSmall')\n  @Watch('isMedium')\n  @Watch('isLarge')\n  @Watch('isXL')\n  @Watch('isXXL')\n  stateChange() {\n    this.nanoBpChange.emit(this.generalClasses);\n  }\n\n  private applyChildrenClasses() {\n    const gridItems = this.el.querySelectorAll('nano-grid-item');\n    if (gridItems.length) {\n      gridItems.forEach((gridItem: HTMLNanoGridItemElement) => {\n        gridItem.changeBP(this.isSizes);\n      });\n      return;\n    }\n\n    // this logic has been put into grid-item. Keep here for legacy for now\n    let stateArr: Array<string> = [''];\n    let itemState: string = '';\n    let found: any;\n    let classes: Array<string>;\n\n    const ctx = this.el;\n\n    // item states come in 4 possible flavours at every breakpoint. E.g.\n    // xl-col-span-2\n    // xl-col-start-2\n    // xl-row-span-2\n    // xl-row-start-2\n\n    // loop through all grid items with states.\n    [].map.call(ctx.children, (gItem: HTMLElement) => {\n      if (!gItem.hasAttribute('grid-states')) return;\n\n      // gridItems.forEach(gItem => {\n\n      // clear all previous grid state classnames\n      classes = gItem.className\n        .split(' ')\n        .filter((c) => !c.startsWith('nano-grid-'));\n      gItem.className = classes.join(' ').trim();\n\n      // get all potential states this element can have\n      const itemStates = gItem.getAttribute('grid-states').split(' ');\n\n      // loop through all potential state options: col & row span & start\n      STATEOPTS.forEach((stateOpt) => {\n        // reset found flag\n        found = false;\n\n        // loop through all the current valid breakpoints / sizes backwards because\n        // we only care about the item's state at the largest current breakpoint.\n        this.isSizes\n          .slice()\n          .reverse()\n          .forEach(function (size) {\n            if (found || !size) return;\n            found = itemStates.find(\n              (state) => state.indexOf(`${size.size}-${stateOpt}`) === 0\n            );\n\n            // found a state at this current size. apply class.\n            if (found) {\n              // clear previous grid state classname\n              classes = gItem.className\n                .split(' ')\n                .filter((c) => !c.includes('nano-grid-${stateOpt}'));\n              gItem.className = classes.join(' ').trim();\n\n              stateArr = found.split('-');\n\n              // remove the size of the state\n              stateArr.shift();\n              itemState = stateArr.join('-');\n\n              // add new class\n              gItem.classList.add(`nano-grid-${itemState}`);\n            }\n          });\n      });\n    });\n  }\n\n  componentWillLoad() {\n    const ctx = this.el;\n    [].map.call(ctx.children, (ele: HTMLElement) =>\n      ele.classList.add('nano-griditem')\n    );\n  }\n\n  componentDidLoad() {\n    if (!window['ResizeObserver']) return;\n\n    this.ro = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        if (!entry.contentRect.width) return;\n        this.currentWidth = entry.contentRect.width;\n        this.applySizeClasses();\n      }\n    });\n    this.ro.observe(this.el);\n  }\n\n  disconnectedCallback() {\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [this.generalClasses.join(' ')]: true,\n          'has-grid': !!this.gridClass,\n          ready: this.ready,\n          [this.gridClass]: true,\n        }}\n      >\n        <div\n          class={{\n            grid: true,\n          }}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  display: inline-block;\n}\n","import { Component, h, Prop, Element, Method, Watch } from '@stencil/core';\nimport type { GridSizes } from '../../interface';\n\nconst STATEOPTS = ['col-span', 'col-start', 'row-span', 'row-start'];\n\n/**\n * Grid items to be used with [grid](/story/nano-components-grid) elements\n */\n@Component({\n  tag: 'nano-grid-item',\n  styleUrl: 'grid-item.scss',\n  shadow: true,\n})\nexport class GridItem {\n  private currGridSizes: GridSizes[] = [null];\n\n  @Element() private el: HTMLNanoGridItemElement;\n  /**\n   * How to position this item within it's parent grid at different break points. Examples:\n   * xl-col-span-2\n   * l-col-start-2\n   * xxl-row-span-2\n   * m-row-start-2\n   */\n  @Prop() gridStates: string = '';\n\n  @Watch('gridStates')\n  updateGridClasses() {\n    this.applyChildrenClasses();\n  }\n\n  /**\n   * Called by parent grid to trigger new classes\n   * @internal\n   */\n  @Method()\n  async changeBP(newGridSizes: GridSizes[]) {\n    if (this.currGridSizes === newGridSizes) return;\n    this.currGridSizes = newGridSizes;\n\n    if (!this.gridStates.length) return;\n    this.applyChildrenClasses();\n  }\n\n  private applyChildrenClasses() {\n    let stateArr: Array<string> = [''];\n    let itemState: string = '';\n    let found: any;\n    let classes: Array<string>;\n\n    // item states come in 4 possible flavours at every breakpoint. E.g.\n    // xl-col-span-2\n    // xl-col-start-2\n    // xl-row-span-2\n    // xl-row-start-2\n\n    // clear all previous grid state classnames\n    classes = this.el.className\n      .split(' ')\n      .filter((c) => !c.startsWith('nano-grid-'));\n    this.el.className = classes.join(' ').trim();\n\n    // get all potential states this element can have\n    const itemStates = this.gridStates.split(' ');\n\n    // loop through all potential state options: col & row span & start\n    STATEOPTS.forEach((stateOpt) => {\n      // reset found flag\n      found = false;\n\n      // loop through all the current valid breakpoints / sizes backwards because\n      // we only care about the item's state at the largest current breakpoint.\n      this.currGridSizes\n        .slice()\n        .reverse()\n        .forEach((size) => {\n          if (found || !size) return;\n          found = itemStates.find(\n            (state) => state.indexOf(`${size.size}-${stateOpt}`) === 0\n          );\n\n          // found a state at this current size. apply class.\n          if (found) {\n            // clear previous grid state classname\n            classes = this.el.className\n              .split(' ')\n              .filter((c) => !c.includes('nano-grid-${stateOpt}'));\n            this.el.className = classes.join(' ').trim();\n\n            stateArr = found.split('-');\n\n            // remove the size of the state\n            stateArr.shift();\n            itemState = stateArr.join('-');\n\n            // add new class\n            this.el.classList.add(`nano-grid-${itemState}`);\n          }\n        });\n    });\n  }\n\n  render() {\n    return <slot />;\n  }\n}\n",":host {\n  /**\n   * @prop --padding: padding around any content. Only relevent on `<nano-img background>`\n  */\n  --padding: 0;\n\n  display: inline-block;\n  object-fit: cover;\n  object-position: center;\n  background-size: cover;\n  background-position: center;\n\n  * {\n    border-radius: inherit;\n  }\n}\n\n:host([background]:not([background='false'])) {\n  display: block;\n}\n\n.img {\n  position: relative;\n  object-fit: inherit;\n  object-position: inherit;\n  background-color: inherit;\n  background-position: inherit;\n  background-size: inherit;\n  background-origin: inherit;\n  background-attachment: inherit;\n  background-repeat: inherit;\n  flex: 1 1 100%;\n  display: flex;\n  flex-direction: column;\n  min-block-size: inherit;\n  max-block-size: inherit;\n  max-inline-size: inherit;\n  min-height: inherit;\n  min-width: inherit;\n  block-size: inherit;\n  inline-size: inherit;\n  height: inherit;\n  width: inherit;\n  max-height: inherit;\n  max-width: inherit;\n  aspect-ratio: inherit;\n}\n\n.img__loader,\n.img__observer {\n  position: absolute;\n  inset: 0;\n  block-size: 100%;\n  inline-size: 100%;\n  z-index: -1;\n}\n\n.img__image,\n.img__bg {\n  border-radius: inherit;\n  display: block;\n  opacity: 0;\n  transition: 0.5s ease opacity, 0.3s ease filter 0.4s;\n  filter: blur(5px);\n  flex: 1;\n\n  &.loaded {\n    opacity: 1;\n    filter: blur(0.1px);\n\n    @media not all and (min-resolution: 0.001dpcm) {\n      @supports (-webkit-appearance: none) {\n        filter: blur(0);\n      }\n    }\n  }\n}\n\n.img__image {\n  object-fit: inherit;\n  object-position: inherit;\n  max-inline-size: 100%;\n  min-block-size: inherit;\n  max-block-size: inherit;\n  min-height: inherit;\n  min-width: inherit;\n  block-size: auto;\n  inline-size: inherit;\n  height: inherit;\n  width: inherit;\n  max-height: inherit;\n  max-width: inherit;\n  aspect-ratio: inherit;\n\n  &.hide {\n    visibility: hidden;\n\n    &.no-height {\n      block-size: 1px;\n      position: absolute;\n      z-index: -1;\n    }\n  }\n}\n\n.img__bg {\n  background-color: inherit;\n  background-position: inherit;\n  background-size: inherit;\n  background-origin: inherit;\n  background-attachment: inherit;\n  background-repeat: inherit;\n  overflow: auto;\n  padding: var(--padding);\n\n  &.no-height {\n    position: absolute;\n    inset: 0;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Prop,\n  Watch,\n  h,\n  ComponentInterface,\n  Build,\n} from '@stencil/core';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\n/**\n * Img with benefits. Lazy loading. Simple `srcSet` solution for both `<img>` and `background-image` varieties.\n * @slot - Main slot. Only relevant with `<nano-img background>`\n */\n@Component({\n  tag: 'nano-img',\n  styleUrl: 'img.scss',\n  shadow: true,\n})\nexport class Img implements ComponentInterface {\n  private io?: IntersectionObserver;\n  private _srcSet: { [key: string]: { src: string; active: boolean } } = {};\n\n  @Element() host!: HTMLNanoImgElement;\n\n  @State() loadSrc?: string;\n  @State() loadError?: () => void;\n  @State() hasLoaded: boolean = false;\n  @State() imgStates: string = null;\n  @State() _src: string;\n  @Watch('_src')\n  _srcChanged() {\n    this.hasLoaded = false;\n    this.addIO();\n  }\n\n  /** This attribute defines the alternative text describing the image.\n   * Users will see this text displayed if the image URL is wrong, or if the image is not yet downloaded. */\n  @Prop() alt?: string;\n\n  /** The image URL. This attribute is mandatory for the `<img>` element. */\n  @Prop() src!: string;\n  @Watch('src')\n  srcChanged() {\n    this._src = this.src;\n  }\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() srcSet?: string;\n  @Watch('srcSet')\n  srcSetChanged() {\n    if (!this.srcSet) return;\n\n    delete this._srcSet;\n    this._srcSet = {};\n\n    this.imgStates = this.srcSet\n      .split(',')\n      .map((bpSrc) => {\n        const [bp, src] = bpSrc.split(' ').filter((bp) => bp.length);\n        this._srcSet[bp] = { src: src, active: false };\n        return bp;\n      })\n      .join(', ');\n  }\n\n  /** Render image lazily, when it comes into the browser viewport **/\n  @Prop() lazy: boolean = true;\n  @Watch('lazy')\n  lazyChanged() {\n    if (!this.lazy) this.load();\n  }\n\n  /** Render the image as a background image **/\n  @Prop() background?: boolean;\n\n  /** When the image is rendered as a background, and there is no preset dimensions of the component,\n   * you can set how the component height will be set. Via image size or via the content **/\n  @Prop() autoHeight: 'content' | 'image' = 'content';\n\n  /** Emitted when the img src has been set */\n  @Event() nanoImgWillLoad!: EventEmitter<void>;\n\n  /** Emitted when the image has finished loading */\n  @Event() nanoImgDidLoad!: EventEmitter<void>;\n\n  /** Emitted when the img fails to load */\n  @Event() nanoImgError!: EventEmitter<void>;\n\n  private addIO() {\n    if (!this._src || this.hasLoaded) return;\n    if (!this.lazy) {\n      this.load();\n      return;\n    }\n    if (\n      typeof (window as any) !== 'undefined' &&\n      'IntersectionObserver' in window\n    ) {\n      this.removeIO();\n      this.io = new IntersectionObserver((data) => {\n        if (data[0].isIntersecting) {\n          this.load();\n          this.removeIO();\n        }\n      });\n\n      this.io.observe(this.host);\n    } else setTimeout(() => this.load(), 200);\n  }\n\n  private load() {\n    this.loadError = this.onError;\n    this.loadSrc = this._src;\n    this.nanoImgWillLoad.emit();\n  }\n\n  private onLoad = () => {\n    this.nanoImgDidLoad.emit();\n    setTimeout(() => (this.hasLoaded = true), 50);\n  };\n\n  private onError = () => {\n    this.nanoImgError.emit();\n  };\n\n  private onResize = (e: { detail: ResizeStateChangeEventDetail }) => {\n    Object.entries(e.detail).forEach(([bp, active]) => {\n      this._srcSet[bp].active = active;\n    });\n\n    // sort and find the highest sized matching image.\n    const srcOpts = [];\n    Object.keys(this._srcSet)\n      .sort()\n      .forEach((bp) => {\n        if (this._srcSet[bp].active) srcOpts.push(this._srcSet[bp].src);\n      });\n\n    if (srcOpts.length) this._src = srcOpts.slice(-1)[0];\n    // no matching image? Set back to default\n    else this._src = this.src;\n  };\n\n  private removeIO() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  connectedCallback() {\n    this.srcChanged();\n    this.srcSetChanged();\n    this.lazyChanged();\n  }\n\n  componentDidLoad() {\n    this.addIO();\n  }\n\n  disconnectedCallback() {\n    this.removeIO();\n  }\n\n  render() {\n    const bgStyle = !!this.loadSrc\n      ? { 'background-image': `url(${this.loadSrc})` }\n      : {};\n\n    return (\n      <div class=\"img\">\n        <nano-skeleton class=\"img__loader\"></nano-skeleton>\n        {!!this.background && (\n          <div\n            class={{\n              loaded: this.hasLoaded,\n              img__bg: true,\n              'no-height': this.autoHeight === 'image',\n            }}\n            style={bgStyle}\n          >\n            <slot />\n          </div>\n        )}\n        <img\n          class={{\n            img__image: true,\n            loaded: this.hasLoaded,\n            hide: this.background,\n            'no-height': this.autoHeight === 'content',\n          }}\n          decoding=\"async\"\n          src={Build.isServer ? this.src : this.loadSrc}\n          loading={Build.isServer && this.lazy ? 'lazy' : undefined}\n          alt={this.alt}\n          onLoad={this.onLoad}\n          onError={this.loadError}\n        />\n        <nano-resize-observe\n          class=\"img__observer\"\n          onNanoResizeStateChange={this.onResize}\n          states={this.imgStates}\n        />\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["gridCss","STATEOPTS","Grid","constructor","hostRef","this","generalClasses","gridClass","isSizes","stateChange","debounce","bind","propChanged","applySizeClasses","size","currentWidth","isSmall","isMedium","isLarge","isXL","isXXL","push","sCols","active","sSize","mCols","mSize","lCols","lSize","xlCols","xlSize","xxlCols","el","style","setProperty","slice","pop","applyChildrenClasses","setTimeout","ready","nanoBpChange","emit","gridItems","querySelectorAll","length","forEach","gridItem","changeBP","stateArr","itemState","found","classes","ctx","map","call","children","gItem","hasAttribute","className","split","filter","c","startsWith","join","trim","itemStates","getAttribute","stateOpt","reverse","find","state","indexOf","includes","shift","classList","add","componentWillLoad","ele","componentDidLoad","window","ro","ResizeObserver","entries","entry","contentRect","width","observe","disconnectedCallback","disconnect","render","h","Host","class","grid","gridItemCss","GridItem","currGridSizes","updateGridClasses","async","newGridSizes","gridStates","imgCss","Img","_srcSet","onLoad","nanoImgDidLoad","hasLoaded","onError","nanoImgError","onResize","e","Object","detail","bp","srcOpts","keys","sort","src","_src","_srcChanged","addIO","srcChanged","srcSetChanged","srcSet","imgStates","bpSrc","lazyChanged","lazy","load","removeIO","io","IntersectionObserver","data","isIntersecting","host","loadError","loadSrc","nanoImgWillLoad","undefined","connectedCallback","bgStyle","background","loaded","img__bg","autoHeight","img__image","hide","decoding","loading","alt","onNanoResizeStateChange","states"],"sources":["./src/components/grid/grid.scss?tag=nano-grid&encapsulation=shadow","./src/components/grid/grid.tsx","./src/components/grid/grid-item.scss?tag=nano-grid-item&encapsulation=shadow","./src/components/grid/grid-item.tsx","./src/components/img/img.scss?tag=nano-img&encapsulation=shadow","./src/components/img/img.tsx"],"sourcesContent":["@use 'sass:math';\n\n@import '../../global/style/nano-theme/base';\n\n// ie 11 fixes ... maximum numbers we can place on the grid ... upping this number decreases performance a lot.\n$max-grid-cols: 10;\n\n@mixin grid($size: 1) {\n  @at-root :host(.nano-grid-#{$size}) {\n    --current-grid-size: 'grid size: #{$size}';\n    --col-width: calc(#{math.div(100, $size)}% - var(--grid-col-gap));\n    --repeat-width: calc(100% / #{$size});\n\n    .grid {\n      grid-template-columns: repeat(#{$size}, minmax(var(--col-width), 1fr));\n\n      $current-column: 1;\n      $current-row: 1;\n\n      @for $i from 1 through ($max-grid-cols * 2) {\n        @if $current-column > $size {\n          $current-column: 1;\n          $current-row: $current-row + 1;\n        }\n        $current-column: $current-column + 1;\n      }\n    }\n  }\n}\n\n@mixin grid-spans {\n  @for $i from 1 through $max-grid-cols {\n    ::slotted(.nano-grid-col-start-#{$i}) {\n      grid-column-start: #{$i} !important;\n    }\n\n    ::slotted(.nano-grid-row-start-#{$i}) {\n      grid-row-start: #{$i} !important;\n    }\n\n    ::slotted(.nano-grid-col-span-#{$i}) {\n      grid-column-end: span #{$i} !important;\n    }\n\n    ::slotted(.nano-grid-row-span-#{$i}) {\n      grid-row-end: span #{$i} !important;\n    }\n  }\n}\n\n:host {\n  /**\n  * @prop --grid-col-gap: gap between all columns. Defaults to theme's global padding\n  * @prop --grid-row-gap: gap between all rows. Defaults to theme's global padding\n  */\n\n  --grid-col-gap: #{$spacing-medium};\n  --grid-row-gap: #{$spacing-medium};\n  --current-grid-size: \"'grid size: sm'\";\n\n  display: block;\n  opacity: 0;\n  transition: 0.2s ease opacity;\n  max-width: 100%;\n\n  .grid {\n    /* autoprefixer: ignore next */\n    display: grid;\n\n    /* autoprefixer: ignore next */\n    grid-gap: var(--grid-row-gap) var(--grid-col-gap);\n    block-size: inherit;\n    min-block-size: inherit;\n  }\n}\n\n:host(.ready) {\n  opacity: 1;\n}\n\n:host(.has-grid) {\n  .grid {\n    display: grid;\n\n    @include grid-spans;\n  }\n}\n\n:host([content-panel]:not([content-panel='false'])) {\n  .grid {\n    grid-template-rows: auto 1fr;\n  }\n}\n\n:host([full-height]:not([full-height='false'])) {\n  block-size: 100%;\n\n  .grid {\n    grid-template-rows: 1fr;\n  }\n}\n\n:host([show-helper]:not([show-helper='false'])) {\n  .grid {\n    position: relative;\n\n    &::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      background-image:\n        repeating-linear-gradient(\n          to right,\n          hsl(204deg 80% 72% / 25%),\n          hsl(204deg 80% 72% / 25%) var(--col-width),\n          transparent var(--col-width),\n          transparent var(--repeat-width)\n        );\n      background-size: calc(100% + var(--grid-col-gap)) 100%;\n      z-index: 100;\n    }\n\n    &::before {\n      content: var(--current-grid-size);\n      font-size: 30px;\n      position: absolute;\n      inline-size: 100%;\n      inset-inline-start: 0;\n      text-align: center;\n      inset-block-start: 50%;\n      transform: translateY(-50%);\n      color: rgb(0 0 0 / 20%);\n      text-transform: uppercase;\n      z-index: 99;\n      pointer-events: none;\n    }\n  }\n}\n\n@for $i from 1 through $max-grid-cols {\n  @include grid($i);\n}\n","import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Host,\n  State,\n  Watch,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { debounce } from '../../utils/throttle';\nimport type { GridSizes } from '../../interface';\n\nconst STATEOPTS = ['col-span', 'col-start', 'row-span', 'row-start'];\n\n/**\n * A context-aware CSS grid implementation.\n * Uses it's own width to choose column number - not screen width.\n */\n@Component({\n  tag: 'nano-grid',\n  styleUrl: 'grid.scss',\n  shadow: true,\n})\nexport class Grid {\n  @Element() private el: HTMLNanoGridElement;\n  private ro: ResizeObserver;\n  private generalClasses: Array<string> = [''];\n  private gridClass: string = null;\n  private isSizes: GridSizes[] = [null];\n  private currentWidth: number;\n\n  constructor() {\n    this.stateChange = debounce(this.stateChange.bind(this), 100);\n  }\n\n  @State() ready: boolean = false;\n  @State() isSmall = false;\n  @State() isMedium = false;\n  @State() isLarge = false;\n  @State() isXL = false;\n  @State() isXXL = false;\n\n  /**\n   * the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.\n   */\n  @Prop() sSize: number = 300;\n\n  /**\n   * the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.\n   */\n  @Prop() mSize: number = 550;\n\n  /**\n   * the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.\n   */\n  @Prop() lSize: number = 800;\n\n  /**\n   * the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.\n   */\n  @Prop() xlSize: number = 1000;\n\n  /**\n   * the number of columns the grid has at the small breakpoint.\n   */\n  @Prop() sCols: number;\n\n  /**\n   * the number of columns the grid has at the medium breakpoint.\n   */\n  @Prop() mCols: number;\n\n  /**\n   * the number of columns the grid has at the large breakpoint.\n   */\n  @Prop() lCols: number;\n\n  /**\n   * the number of columns the grid has at the xl breakpoint.\n   */\n  @Prop() xlCols: number;\n\n  /**\n   * the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint)\n   */\n  @Prop() xxlCols: number;\n\n  /**\n   * shows a grid helper to visualise where columns are\n   */\n  @Prop({ reflect: true }) showHelper: boolean = false;\n\n  /**\n   * shortcut for a traditional website like grid (requires more than one row). The second row will auto expand to fill the grid height. The first row and > 2nd row will be the size of their content. e.g. header, body and footer.\n   */\n  @Prop({ reflect: true }) contentPanel: boolean = false;\n\n  /**\n   * Helper to make grid items expand to full height in IE11\n   */\n  @Prop({ reflect: true }) fullHeight: boolean = false;\n\n  /**\n   * Emitted when the `nano-grid` changes breakpoint\n   */\n  @Event() nanoBpChange: EventEmitter<string[]>;\n\n  @Watch('sSize')\n  @Watch('mSize')\n  @Watch('lSize')\n  @Watch('xlSize')\n  @Watch('sCols')\n  @Watch('mCols')\n  @Watch('lCols')\n  @Watch('xlCols')\n  @Watch('xxlCols')\n  propChanged() {\n    this.applySizeClasses();\n  }\n\n  private applySizeClasses() {\n    const size = this.currentWidth;\n\n    this.isSmall = false;\n    this.isMedium = false;\n    this.isLarge = false;\n    this.isXL = false;\n    this.isXXL = false;\n\n    this.generalClasses = [];\n    this.gridClass = null;\n    this.isSizes = [null];\n\n    this.isSmall = true;\n    this.generalClasses.push('is-small');\n    if (this.sCols) this.gridClass = `nano-grid-${this.sCols}`;\n    this.isSizes.push({ size: 's', active: true });\n\n    if (size > this.sSize) {\n      this.isMedium = true;\n      this.generalClasses.push('is-medium');\n      if (this.mCols) this.gridClass = `nano-grid-${this.mCols}`;\n      this.isSizes.push({ size: 'm', active: true });\n    }\n\n    if (size > this.mSize) {\n      this.isLarge = true;\n      this.generalClasses.push('is-large');\n      if (this.lCols) this.gridClass = `nano-grid-${this.lCols}`;\n      this.isSizes.push({ size: 'l', active: true });\n    }\n\n    if (size > this.lSize) {\n      this.isXL = true;\n      this.generalClasses.push('is-xl');\n      if (this.xlCols) this.gridClass = `nano-grid-${this.xlCols}`;\n      this.isSizes.push({ size: 'xl', active: true });\n    }\n\n    if (size > this.xlSize) {\n      this.isXXL = true;\n      this.generalClasses.push('is-xxl');\n      if (this.xxlCols) this.gridClass = `nano-grid-${this.xxlCols}`;\n      this.isSizes.push({ size: 'xxl', active: true });\n    }\n\n    this.el.style.setProperty(\n      '--current-grid-size',\n      `'grid size: ${this.isSizes.slice().pop().size}'`\n    );\n    this.applyChildrenClasses();\n    setTimeout(() => (this.ready = true), 0);\n  }\n\n  @Watch('isSmall')\n  @Watch('isMedium')\n  @Watch('isLarge')\n  @Watch('isXL')\n  @Watch('isXXL')\n  stateChange() {\n    this.nanoBpChange.emit(this.generalClasses);\n  }\n\n  private applyChildrenClasses() {\n    const gridItems = this.el.querySelectorAll('nano-grid-item');\n    if (gridItems.length) {\n      gridItems.forEach((gridItem: HTMLNanoGridItemElement) => {\n        gridItem.changeBP(this.isSizes);\n      });\n      return;\n    }\n\n    // this logic has been put into grid-item. Keep here for legacy for now\n    let stateArr: Array<string> = [''];\n    let itemState: string = '';\n    let found: any;\n    let classes: Array<string>;\n\n    const ctx = this.el;\n\n    // item states come in 4 possible flavours at every breakpoint. E.g.\n    // xl-col-span-2\n    // xl-col-start-2\n    // xl-row-span-2\n    // xl-row-start-2\n\n    // loop through all grid items with states.\n    [].map.call(ctx.children, (gItem: HTMLElement) => {\n      if (!gItem.hasAttribute('grid-states')) return;\n\n      // gridItems.forEach(gItem => {\n\n      // clear all previous grid state classnames\n      classes = gItem.className\n        .split(' ')\n        .filter((c) => !c.startsWith('nano-grid-'));\n      gItem.className = classes.join(' ').trim();\n\n      // get all potential states this element can have\n      const itemStates = gItem.getAttribute('grid-states').split(' ');\n\n      // loop through all potential state options: col & row span & start\n      STATEOPTS.forEach((stateOpt) => {\n        // reset found flag\n        found = false;\n\n        // loop through all the current valid breakpoints / sizes backwards because\n        // we only care about the item's state at the largest current breakpoint.\n        this.isSizes\n          .slice()\n          .reverse()\n          .forEach(function (size) {\n            if (found || !size) return;\n            found = itemStates.find(\n              (state) => state.indexOf(`${size.size}-${stateOpt}`) === 0\n            );\n\n            // found a state at this current size. apply class.\n            if (found) {\n              // clear previous grid state classname\n              classes = gItem.className\n                .split(' ')\n                .filter((c) => !c.includes('nano-grid-${stateOpt}'));\n              gItem.className = classes.join(' ').trim();\n\n              stateArr = found.split('-');\n\n              // remove the size of the state\n              stateArr.shift();\n              itemState = stateArr.join('-');\n\n              // add new class\n              gItem.classList.add(`nano-grid-${itemState}`);\n            }\n          });\n      });\n    });\n  }\n\n  componentWillLoad() {\n    const ctx = this.el;\n    [].map.call(ctx.children, (ele: HTMLElement) =>\n      ele.classList.add('nano-griditem')\n    );\n  }\n\n  componentDidLoad() {\n    if (!window['ResizeObserver']) return;\n\n    this.ro = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        if (!entry.contentRect.width) return;\n        this.currentWidth = entry.contentRect.width;\n        this.applySizeClasses();\n      }\n    });\n    this.ro.observe(this.el);\n  }\n\n  disconnectedCallback() {\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [this.generalClasses.join(' ')]: true,\n          'has-grid': !!this.gridClass,\n          ready: this.ready,\n          [this.gridClass]: true,\n        }}\n      >\n        <div\n          class={{\n            grid: true,\n          }}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  display: inline-block;\n}\n","import { Component, h, Prop, Element, Method, Watch } from '@stencil/core';\nimport type { GridSizes } from '../../interface';\n\nconst STATEOPTS = ['col-span', 'col-start', 'row-span', 'row-start'];\n\n/**\n * Grid items to be used with [grid](/story/nano-components-grid) elements\n */\n@Component({\n  tag: 'nano-grid-item',\n  styleUrl: 'grid-item.scss',\n  shadow: true,\n})\nexport class GridItem {\n  private currGridSizes: GridSizes[] = [null];\n\n  @Element() private el: HTMLNanoGridItemElement;\n  /**\n   * How to position this item within it's parent grid at different break points. Examples:\n   * xl-col-span-2\n   * l-col-start-2\n   * xxl-row-span-2\n   * m-row-start-2\n   */\n  @Prop() gridStates: string = '';\n\n  @Watch('gridStates')\n  updateGridClasses() {\n    this.applyChildrenClasses();\n  }\n\n  /**\n   * Called by parent grid to trigger new classes\n   * @internal\n   */\n  @Method()\n  async changeBP(newGridSizes: GridSizes[]) {\n    if (this.currGridSizes === newGridSizes) return;\n    this.currGridSizes = newGridSizes;\n\n    if (!this.gridStates.length) return;\n    this.applyChildrenClasses();\n  }\n\n  private applyChildrenClasses() {\n    let stateArr: Array<string> = [''];\n    let itemState: string = '';\n    let found: any;\n    let classes: Array<string>;\n\n    // item states come in 4 possible flavours at every breakpoint. E.g.\n    // xl-col-span-2\n    // xl-col-start-2\n    // xl-row-span-2\n    // xl-row-start-2\n\n    // clear all previous grid state classnames\n    classes = this.el.className\n      .split(' ')\n      .filter((c) => !c.startsWith('nano-grid-'));\n    this.el.className = classes.join(' ').trim();\n\n    // get all potential states this element can have\n    const itemStates = this.gridStates.split(' ');\n\n    // loop through all potential state options: col & row span & start\n    STATEOPTS.forEach((stateOpt) => {\n      // reset found flag\n      found = false;\n\n      // loop through all the current valid breakpoints / sizes backwards because\n      // we only care about the item's state at the largest current breakpoint.\n      this.currGridSizes\n        .slice()\n        .reverse()\n        .forEach((size) => {\n          if (found || !size) return;\n          found = itemStates.find(\n            (state) => state.indexOf(`${size.size}-${stateOpt}`) === 0\n          );\n\n          // found a state at this current size. apply class.\n          if (found) {\n            // clear previous grid state classname\n            classes = this.el.className\n              .split(' ')\n              .filter((c) => !c.includes('nano-grid-${stateOpt}'));\n            this.el.className = classes.join(' ').trim();\n\n            stateArr = found.split('-');\n\n            // remove the size of the state\n            stateArr.shift();\n            itemState = stateArr.join('-');\n\n            // add new class\n            this.el.classList.add(`nano-grid-${itemState}`);\n          }\n        });\n    });\n  }\n\n  render() {\n    return <slot />;\n  }\n}\n",":host {\n  /**\n   * @prop --padding: padding around any content. Only relevent on `<nano-img background>`\n  */\n  --padding: 0;\n\n  display: inline-block;\n  object-fit: cover;\n  object-position: center;\n  background-size: cover;\n  background-position: center;\n\n  * {\n    border-radius: inherit;\n  }\n}\n\n:host([background]:not([background='false'])) {\n  display: block;\n}\n\n.img {\n  position: relative;\n  object-fit: inherit;\n  object-position: inherit;\n  background-color: inherit;\n  background-position: inherit;\n  background-size: inherit;\n  background-origin: inherit;\n  background-attachment: inherit;\n  background-repeat: inherit;\n  flex: 1 1 100%;\n  display: flex;\n  flex-direction: column;\n  min-block-size: inherit;\n  max-block-size: inherit;\n  max-inline-size: inherit;\n  min-height: inherit;\n  min-width: inherit;\n  block-size: inherit;\n  inline-size: inherit;\n  height: inherit;\n  width: inherit;\n  max-height: inherit;\n  max-width: inherit;\n  aspect-ratio: inherit;\n}\n\n.img__loader,\n.img__observer {\n  position: absolute;\n  inset: 0;\n  block-size: 100%;\n  inline-size: 100%;\n  z-index: -1;\n}\n\n.img__image,\n.img__bg {\n  border-radius: inherit;\n  display: block;\n  opacity: 0;\n  transition: 0.5s ease opacity, 0.3s ease filter 0.4s;\n  filter: blur(5px);\n  flex: 1;\n\n  &.loaded {\n    opacity: 1;\n    filter: blur(0);\n\n    @media not all and (min-resolution: 0.001dpcm) {\n      @supports (-webkit-appearance: none) {\n        filter: blur(0);\n      }\n    }\n  }\n}\n\n.img__image {\n  object-fit: inherit;\n  object-position: inherit;\n  max-inline-size: 100%;\n  min-block-size: inherit;\n  max-block-size: inherit;\n  min-height: inherit;\n  min-width: inherit;\n  block-size: auto;\n  inline-size: inherit;\n  height: inherit;\n  width: inherit;\n  max-height: inherit;\n  max-width: inherit;\n  aspect-ratio: inherit;\n\n  &.hide {\n    visibility: hidden;\n\n    &.no-height {\n      block-size: 1px;\n      position: absolute;\n      z-index: -1;\n    }\n  }\n}\n\n.img__bg {\n  background-color: inherit;\n  background-position: inherit;\n  background-size: inherit;\n  background-origin: inherit;\n  background-attachment: inherit;\n  background-repeat: inherit;\n  overflow: auto;\n  padding: var(--padding);\n\n  &.no-height {\n    position: absolute;\n    inset: 0;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Prop,\n  Watch,\n  h,\n  ComponentInterface,\n  Build,\n} from '@stencil/core';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\n/**\n * Img with benefits. Lazy loading. Simple `srcSet` solution for both `<img>` and `background-image` varieties.\n * @slot - Main slot. Only relevant with `<nano-img background>`\n */\n@Component({\n  tag: 'nano-img',\n  styleUrl: 'img.scss',\n  shadow: true,\n})\nexport class Img implements ComponentInterface {\n  private io?: IntersectionObserver;\n  private _srcSet: { [key: string]: { src: string; active: boolean } } = {};\n\n  @Element() host!: HTMLNanoImgElement;\n\n  @State() loadSrc?: string;\n  @State() loadError?: () => void;\n  @State() hasLoaded: boolean = false;\n  @State() imgStates: string = null;\n  @State() _src: string;\n  @Watch('_src')\n  _srcChanged() {\n    this.hasLoaded = false;\n    this.addIO();\n  }\n\n  /** This attribute defines the alternative text describing the image.\n   * Users will see this text displayed if the image URL is wrong, or if the image is not yet downloaded. */\n  @Prop() alt?: string;\n\n  /** The image URL. This attribute is mandatory for the `<img>` element. */\n  @Prop() src!: string;\n  @Watch('src')\n  srcChanged() {\n    this._src = this.src;\n  }\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() srcSet?: string;\n  @Watch('srcSet')\n  srcSetChanged() {\n    if (!this.srcSet) return;\n\n    delete this._srcSet;\n    this._srcSet = {};\n\n    this.imgStates = this.srcSet\n      .split(',')\n      .map((bpSrc) => {\n        const [bp, src] = bpSrc.split(' ').filter((bp) => bp.length);\n        this._srcSet[bp] = { src: src, active: false };\n        return bp;\n      })\n      .join(', ');\n  }\n\n  /** Render image lazily, when it comes into the browser viewport **/\n  @Prop() lazy: boolean = true;\n  @Watch('lazy')\n  lazyChanged() {\n    if (!this.lazy) this.load();\n  }\n\n  /** Render the image as a background image **/\n  @Prop() background?: boolean;\n\n  /** When the image is rendered as a background, and there is no preset dimensions of the component,\n   * you can set how the component height will be set. Via image size or via the content **/\n  @Prop() autoHeight: 'content' | 'image' = 'content';\n\n  /** Emitted when the img src has been set */\n  @Event() nanoImgWillLoad!: EventEmitter<void>;\n\n  /** Emitted when the image has finished loading */\n  @Event() nanoImgDidLoad!: EventEmitter<void>;\n\n  /** Emitted when the img fails to load */\n  @Event() nanoImgError!: EventEmitter<void>;\n\n  private addIO() {\n    if (!this._src || this.hasLoaded) return;\n    if (!this.lazy) {\n      this.load();\n      return;\n    }\n    if (\n      typeof (window as any) !== 'undefined' &&\n      'IntersectionObserver' in window\n    ) {\n      this.removeIO();\n      this.io = new IntersectionObserver((data) => {\n        if (data[0].isIntersecting) {\n          this.load();\n          this.removeIO();\n        }\n      });\n\n      this.io.observe(this.host);\n    } else setTimeout(() => this.load(), 200);\n  }\n\n  private load() {\n    this.loadError = this.onError;\n    this.loadSrc = this._src;\n    this.nanoImgWillLoad.emit();\n  }\n\n  private onLoad = () => {\n    this.nanoImgDidLoad.emit();\n    setTimeout(() => (this.hasLoaded = true), 50);\n  };\n\n  private onError = () => {\n    this.nanoImgError.emit();\n  };\n\n  private onResize = (e: { detail: ResizeStateChangeEventDetail }) => {\n    Object.entries(e.detail).forEach(([bp, active]) => {\n      this._srcSet[bp].active = active;\n    });\n\n    // sort and find the highest sized matching image.\n    const srcOpts = [];\n    Object.keys(this._srcSet)\n      .sort()\n      .forEach((bp) => {\n        if (this._srcSet[bp].active) srcOpts.push(this._srcSet[bp].src);\n      });\n\n    if (srcOpts.length) this._src = srcOpts.slice(-1)[0];\n    // no matching image? Set back to default\n    else this._src = this.src;\n  };\n\n  private removeIO() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  connectedCallback() {\n    this.srcChanged();\n    this.srcSetChanged();\n    this.lazyChanged();\n  }\n\n  componentDidLoad() {\n    this.addIO();\n  }\n\n  disconnectedCallback() {\n    this.removeIO();\n  }\n\n  render() {\n    const bgStyle = !!this.loadSrc\n      ? { 'background-image': `url(${this.loadSrc})` }\n      : {};\n\n    return (\n      <div class=\"img\">\n        <nano-skeleton class=\"img__loader\"></nano-skeleton>\n        {!!this.background && (\n          <div\n            class={{\n              loaded: this.hasLoaded,\n              img__bg: true,\n              'no-height': this.autoHeight === 'image',\n            }}\n            style={bgStyle}\n          >\n            <slot />\n          </div>\n        )}\n        <img\n          class={{\n            img__image: true,\n            loaded: this.hasLoaded,\n            hide: this.background,\n            'no-height': this.autoHeight === 'content',\n          }}\n          decoding=\"async\"\n          src={Build.isServer ? this.src : this.loadSrc}\n          loading={Build.isServer && this.lazy ? 'lazy' : undefined}\n          alt={this.alt}\n          onLoad={this.onLoad}\n          onError={this.loadError}\n        />\n        <nano-resize-observe\n          class=\"img__observer\"\n          onNanoResizeStateChange={this.onResize}\n          states={this.imgStates}\n        />\n      </div>\n    );\n  }\n}\n"],"mappings":";;;oGAAA,MAAMA,EAAU,qiOCchB,MAAMC,EAAY,CAAC,WAAY,YAAa,WAAY,a,MAW3CC,EAAI,MAQfC,YAAAC,G,qDALQC,KAAAC,eAAgC,CAAC,IACjCD,KAAAE,UAAoB,KACpBF,KAAAG,QAAuB,CAAC,M,WAON,M,aACP,M,cACC,M,aACD,M,UACH,M,WACC,M,WAKO,I,WAKA,I,WAKA,I,YAKC,I,4HA8BsB,M,kBAKE,M,gBAKF,MApE7CH,KAAKI,YAAcC,EAASL,KAAKI,YAAYE,KAAKN,MAAO,I,CAoF3DO,cACEP,KAAKQ,kB,CAGCA,mBACN,MAAMC,EAAOT,KAAKU,aAElBV,KAAKW,QAAU,MACfX,KAAKY,SAAW,MAChBZ,KAAKa,QAAU,MACfb,KAAKc,KAAO,MACZd,KAAKe,MAAQ,MAEbf,KAAKC,eAAiB,GACtBD,KAAKE,UAAY,KACjBF,KAAKG,QAAU,CAAC,MAEhBH,KAAKW,QAAU,KACfX,KAAKC,eAAee,KAAK,YACzB,GAAIhB,KAAKiB,MAAOjB,KAAKE,UAAY,aAAaF,KAAKiB,QACnDjB,KAAKG,QAAQa,KAAK,CAAEP,KAAM,IAAKS,OAAQ,OAEvC,GAAIT,EAAOT,KAAKmB,MAAO,CACrBnB,KAAKY,SAAW,KAChBZ,KAAKC,eAAee,KAAK,aACzB,GAAIhB,KAAKoB,MAAOpB,KAAKE,UAAY,aAAaF,KAAKoB,QACnDpB,KAAKG,QAAQa,KAAK,CAAEP,KAAM,IAAKS,OAAQ,M,CAGzC,GAAIT,EAAOT,KAAKqB,MAAO,CACrBrB,KAAKa,QAAU,KACfb,KAAKC,eAAee,KAAK,YACzB,GAAIhB,KAAKsB,MAAOtB,KAAKE,UAAY,aAAaF,KAAKsB,QACnDtB,KAAKG,QAAQa,KAAK,CAAEP,KAAM,IAAKS,OAAQ,M,CAGzC,GAAIT,EAAOT,KAAKuB,MAAO,CACrBvB,KAAKc,KAAO,KACZd,KAAKC,eAAee,KAAK,SACzB,GAAIhB,KAAKwB,OAAQxB,KAAKE,UAAY,aAAaF,KAAKwB,SACpDxB,KAAKG,QAAQa,KAAK,CAAEP,KAAM,KAAMS,OAAQ,M,CAG1C,GAAIT,EAAOT,KAAKyB,OAAQ,CACtBzB,KAAKe,MAAQ,KACbf,KAAKC,eAAee,KAAK,UACzB,GAAIhB,KAAK0B,QAAS1B,KAAKE,UAAY,aAAaF,KAAK0B,UACrD1B,KAAKG,QAAQa,KAAK,CAAEP,KAAM,MAAOS,OAAQ,M,CAG3ClB,KAAK2B,GAAGC,MAAMC,YACZ,sBACA,eAAe7B,KAAKG,QAAQ2B,QAAQC,MAAMtB,SAE5CT,KAAKgC,uBACLC,YAAW,IAAOjC,KAAKkC,MAAQ,MAAO,E,CAQxC9B,cACEJ,KAAKmC,aAAaC,KAAKpC,KAAKC,e,CAGtB+B,uBACN,MAAMK,EAAYrC,KAAK2B,GAAGW,iBAAiB,kBAC3C,GAAID,EAAUE,OAAQ,CACpBF,EAAUG,SAASC,IACjBA,EAASC,SAAS1C,KAAKG,QAAQ,IAEjC,M,CAIF,IAAIwC,EAA0B,CAAC,IAC/B,IAAIC,EAAoB,GACxB,IAAIC,EACJ,IAAIC,EAEJ,MAAMC,EAAM/C,KAAK2B,GASjB,GAAGqB,IAAIC,KAAKF,EAAIG,UAAWC,IACzB,IAAKA,EAAMC,aAAa,eAAgB,OAKxCN,EAAUK,EAAME,UACbC,MAAM,KACNC,QAAQC,IAAOA,EAAEC,WAAW,gBAC/BN,EAAME,UAAYP,EAAQY,KAAK,KAAKC,OAGpC,MAAMC,EAAaT,EAAMU,aAAa,eAAeP,MAAM,KAG3D1D,EAAU4C,SAASsB,IAEjBjB,EAAQ,MAIR7C,KAAKG,QACF2B,QACAiC,UACAvB,SAAQ,SAAU/B,GACjB,GAAIoC,IAAUpC,EAAM,OACpBoC,EAAQe,EAAWI,MAChBC,GAAUA,EAAMC,QAAQ,GAAGzD,EAAKA,QAAQqD,OAAgB,IAI3D,GAAIjB,EAAO,CAETC,EAAUK,EAAME,UACbC,MAAM,KACNC,QAAQC,IAAOA,EAAEW,SAAS,2BAC7BhB,EAAME,UAAYP,EAAQY,KAAK,KAAKC,OAEpChB,EAAWE,EAAMS,MAAM,KAGvBX,EAASyB,QACTxB,EAAYD,EAASe,KAAK,KAG1BP,EAAMkB,UAAUC,IAAI,aAAa1B,I,IAEnC,GACJ,G,CAIN2B,oBACE,MAAMxB,EAAM/C,KAAK2B,GACjB,GAAGqB,IAAIC,KAAKF,EAAIG,UAAWsB,GACzBA,EAAIH,UAAUC,IAAI,kB,CAItBG,mBACE,IAAKC,OAAO,kBAAmB,OAE/B1E,KAAK2E,GAAK,IAAIC,gBAAgBC,IAC5B,IAAK,MAAMC,KAASD,EAAS,CAC3B,IAAKC,EAAMC,YAAYC,MAAO,OAC9BhF,KAAKU,aAAeoE,EAAMC,YAAYC,MACtChF,KAAKQ,kB,KAGTR,KAAK2E,GAAGM,QAAQjF,KAAK2B,G,CAGvBuD,uBACE,GAAIlF,KAAK2E,GAAI3E,KAAK2E,GAAGQ,Y,CAGvBC,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACL,CAACvF,KAAKC,eAAeyD,KAAK,MAAO,KACjC,aAAc1D,KAAKE,UACnBgC,MAAOlC,KAAKkC,MACZ,CAAClC,KAAKE,WAAY,OAGpBmF,EAAA,OACEE,MAAO,CACLC,KAAM,OAGRH,EAAA,c,iYC5SV,MAAMI,EAAc,sICGpB,MAAM7F,EAAY,CAAC,WAAY,YAAa,WAAY,a,MAU3C8F,EAAQ,M,yBACX1F,KAAA2F,cAA6B,CAAC,M,gBAUT,E,CAG7BC,oBACE5F,KAAKgC,sB,CAQP6D,eAAeC,GACb,GAAI9F,KAAK2F,gBAAkBG,EAAc,OACzC9F,KAAK2F,cAAgBG,EAErB,IAAK9F,KAAK+F,WAAWxD,OAAQ,OAC7BvC,KAAKgC,sB,CAGCA,uBACN,IAAIW,EAA0B,CAAC,IAC/B,IAAIC,EAAoB,GACxB,IAAIC,EACJ,IAAIC,EASJA,EAAU9C,KAAK2B,GAAG0B,UACfC,MAAM,KACNC,QAAQC,IAAOA,EAAEC,WAAW,gBAC/BzD,KAAK2B,GAAG0B,UAAYP,EAAQY,KAAK,KAAKC,OAGtC,MAAMC,EAAa5D,KAAK+F,WAAWzC,MAAM,KAGzC1D,EAAU4C,SAASsB,IAEjBjB,EAAQ,MAIR7C,KAAK2F,cACF7D,QACAiC,UACAvB,SAAS/B,IACR,GAAIoC,IAAUpC,EAAM,OACpBoC,EAAQe,EAAWI,MAChBC,GAAUA,EAAMC,QAAQ,GAAGzD,EAAKA,QAAQqD,OAAgB,IAI3D,GAAIjB,EAAO,CAETC,EAAU9C,KAAK2B,GAAG0B,UACfC,MAAM,KACNC,QAAQC,IAAOA,EAAEW,SAAS,2BAC7BnE,KAAK2B,GAAG0B,UAAYP,EAAQY,KAAK,KAAKC,OAEtChB,EAAWE,EAAMS,MAAM,KAGvBX,EAASyB,QACTxB,EAAYD,EAASe,KAAK,KAG1B1D,KAAK2B,GAAG0C,UAAUC,IAAI,aAAa1B,I,IAErC,G,CAIRwC,SACE,OAAOC,EAAA,Y,oGCvGX,MAAMW,EAAS,i3D,MCuBFC,EAAG,M,oKAENjG,KAAAkG,QAA+D,GAiG/DlG,KAAAmG,OAAS,KACfnG,KAAKoG,eAAehE,OACpBH,YAAW,IAAOjC,KAAKqG,UAAY,MAAO,GAAG,EAGvCrG,KAAAsG,QAAU,KAChBtG,KAAKuG,aAAanE,MAAM,EAGlBpC,KAAAwG,SAAYC,IAClBC,OAAO7B,QAAQ4B,EAAEE,QAAQnE,SAAQ,EAAEoE,EAAI1F,MACrClB,KAAKkG,QAAQU,GAAI1F,OAASA,CAAM,IAIlC,MAAM2F,EAAU,GAChBH,OAAOI,KAAK9G,KAAKkG,SACda,OACAvE,SAASoE,IACR,GAAI5G,KAAKkG,QAAQU,GAAI1F,OAAQ2F,EAAQ7F,KAAKhB,KAAKkG,QAAQU,GAAII,IAAI,IAGnE,GAAIH,EAAQtE,OAAQvC,KAAKiH,KAAOJ,EAAQ/E,OAAO,GAAG,QAE7C9B,KAAKiH,KAAOjH,KAAKgH,GAAG,E,+DAnHG,M,eACD,K,0FAwCL,K,0CAWkB,S,CAhD1CE,cACElH,KAAKqG,UAAY,MACjBrG,KAAKmH,O,CAUPC,aACEpH,KAAKiH,KAAOjH,KAAKgH,G,CAOnBK,gBACE,IAAKrH,KAAKsH,OAAQ,cAEXtH,KAAKkG,QACZlG,KAAKkG,QAAU,GAEflG,KAAKuH,UAAYvH,KAAKsH,OACnBhE,MAAM,KACNN,KAAKwE,IACJ,MAAOZ,EAAII,GAAOQ,EAAMlE,MAAM,KAAKC,QAAQqD,GAAOA,EAAGrE,SACrDvC,KAAKkG,QAAQU,GAAM,CAAEI,IAAKA,EAAK9F,OAAQ,OACvC,OAAO0F,CAAE,IAEVlD,KAAK,K,CAMV+D,cACE,IAAKzH,KAAK0H,KAAM1H,KAAK2H,M,CAmBfR,QACN,IAAKnH,KAAKiH,MAAQjH,KAAKqG,UAAW,OAClC,IAAKrG,KAAK0H,KAAM,CACd1H,KAAK2H,OACL,M,CAEF,UACUjD,SAAmB,aAC3B,yBAA0BA,OAC1B,CACA1E,KAAK4H,WACL5H,KAAK6H,GAAK,IAAIC,sBAAsBC,IAClC,GAAIA,EAAK,GAAGC,eAAgB,CAC1BhI,KAAK2H,OACL3H,KAAK4H,U,KAIT5H,KAAK6H,GAAG5C,QAAQjF,KAAKiI,K,MAChBhG,YAAW,IAAMjC,KAAK2H,QAAQ,I,CAG/BA,OACN3H,KAAKkI,UAAYlI,KAAKsG,QACtBtG,KAAKmI,QAAUnI,KAAKiH,KACpBjH,KAAKoI,gBAAgBhG,M,CA8BfwF,WACN,GAAI5H,KAAK6H,GAAI,CACX7H,KAAK6H,GAAG1C,aACRnF,KAAK6H,GAAKQ,S,EAIdC,oBACEtI,KAAKoH,aACLpH,KAAKqH,gBACLrH,KAAKyH,a,CAGPhD,mBACEzE,KAAKmH,O,CAGPjC,uBACElF,KAAK4H,U,CAGPxC,SACE,MAAMmD,IAAYvI,KAAKmI,QACnB,CAAE,mBAAoB,OAAOnI,KAAKmI,YAClC,GAEJ,OACE9C,EAAA,OAAKE,MAAM,OACTF,EAAA,iBAAeE,MAAM,kBAClBvF,KAAKwI,YACNnD,EAAA,OACEE,MAAO,CACLkD,OAAQzI,KAAKqG,UACbqC,QAAS,KACT,YAAa1I,KAAK2I,aAAe,SAEnC/G,MAAO2G,GAEPlD,EAAA,cAGJA,EAAA,OACEE,MAAO,CACLqD,WAAY,KACZH,OAAQzI,KAAKqG,UACbwC,KAAM7I,KAAKwI,WACX,YAAaxI,KAAK2I,aAAe,WAEnCG,SAAS,QACT9B,IAAiChH,KAAKmI,QACtCY,QAAgDV,UAChDW,IAAKhJ,KAAKgJ,IACV7C,OAAQnG,KAAKmG,OACbG,QAAStG,KAAKkI,YAEhB7C,EAAA,uBACEE,MAAM,gBACN0D,wBAAyBjJ,KAAKwG,SAC9B0C,OAAQlJ,KAAKuH,Y"}

package/dist/nano-components/{p-dab8526f.entry.js → p-288dbe6b.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as s,B as i,d as h,h as e,a as n,g as a}from"./p-6ef53fa1.js";import{S as l,W as r}from"./p-d518b939.js";const d=class{constructor(i){t(this,i);this.nanoPageChanged=s(this,"nanoPageChanged",7);this.nanoTplUpdated=s(this,"nanoTplUpdated",7);this.append=false;this.shouldClear=true;this.currHitNum=0;this.showResults=false;this.tplRenderFn=undefined;this.results=null;this.indexResults=null;this.resultsPage=0;this.changeEvent=l.Init;this.facets=undefined;this.isLoading=true;this.infiniteScroll=false;this.appendPages=false}addContentIndex(){this.shouldPageClear();if(this.shouldClear||this.resultsPage===0)this.currHitNum=0;if(this.indexResults&&this.indexResults.results){this.indexResults.results.map((t=>{t._uIndex=this.currHitNum++}))}}resultsChange(){this.shouldPageClear();this.updateResultContent();this.infiniteScrollChange()}headerFooterChange(){this.updateStartEndContent()}appendChange(){this.append=this.infiniteScroll?true:this.appendPages}infiniteScrollChange(){this.append=this.infiniteScroll?true:this.appendPages;this.infiniteScroll?this.attachIO():this.detachIO()}handlePageChage(){this.infiniteScroll?this.attachIO():this.detachIO()}handleLoading(){if(!this.isLoading)this.infiniteScrollChange()}shouldPageClear(){this.shouldClear=this.changeEvent===l.Page?!this.append:true}nextPage(){this.shouldClear=!this.append;this.nanoPageChanged.emit({page:this.resultsPage+1})}attachIO(){if(!this.infiniteScrollBar||!this.infiniteScroll||this.io||!i.isBrowser||typeof window==="undefined"||!window.IntersectionObserver)return;this.io=new window.IntersectionObserver((async t=>{if(t[0].isIntersecting||t[1]&&t[1].isIntersecting){this.nextPage();this.detachIO()}}),{document,rootMargin:"100px",threshold:1});this.io.observe(this.infiniteScrollBar)}detachIO(){if(this.io){this.io.disconnect();this.io=null}}updateStartEndContent(){if(this.startTpl&&this.startOutputSlot){this.startOutputSlot.innerHTML=this.tplRenderFn(this.startTpl,this.indexResults)}if(this.endOutputSlot&&this.endTpl){this.endOutputSlot.innerHTML=this.tplRenderFn(this.endTpl,this.indexResults)}this.nanoTplUpdated.emit(this.el)}updateResultContent(){this.outputTo=this.outputSlot||this.outputEle;if(!this.resultTpl||!this.indexResults)return;if(this.shouldClear)this.outputTo.innerHTML="";if(!this.tplRenderFn)return;const t=document.createElement("div");t.innerHTML=this.tplRenderFn(this.resultTpl,this.indexResults);Array.from(t.children).forEach((t=>{this.outputTo.appendChild(t)}));this.shouldClear=true;this.nanoTplUpdated.emit(this.el)}connectedCallback(){h((()=>{this.startTplSlot=this.el.querySelector('[slot="start-template"]');this.startOutputSlot=this.el.querySelector('[slot="start-output"]');if(!!this.startTplSlot){this.startTpl=this.startTplSlot.innerHTML;this.startTpl=this.startTpl.replace(/=>/gm,"=>")}this.resultTplSlot=this.el.querySelector('[slot="result-template"]');this.outputSlot=this.el.querySelector('[slot="result-output"]');if(!!this.resultTplSlot){this.resultTpl=this.resultTplSlot.innerHTML;this.resultTpl=this.resultTpl.replace(/=>/gm,"=>")}this.endTplSlot=this.el.querySelector('[slot="end-template"]');this.endOutputSlot=this.el.querySelector('[slot="end-output"]');if(!!this.endTplSlot){this.endTpl=this.endTplSlot.innerHTML;this.endTpl=this.endTpl.replace(/=>/gm,"=>")}if(this.indexResults){this.addContentIndex();this.updateResultContent()}}))}componentDidLoad(){this.updateStartEndContent()}disconnectedCallback(){if(this.io){this.io.disconnect();this.io=undefined}}render(){return e(n,{class:{"show-results":this.showResults}},e("div",{class:"default"},e("slot",null)),e("div",{ref:t=>this.outputEle=t},e("slot",{name:"start-output"}),e("slot",{name:"result-output"}),e("div",{ref:t=>this.infiniteScrollBar=t}),e("slot",{name:"end-output"})))}get el(){return a(this)}static get watchers(){return{results:["addContentIndex","resultsChange"],tplRenderFn:["resultsChange"],facets:["headerFooterChange"],appendPages:["appendChange"],infiniteScroll:["infiniteScrollChange"],resultsPage:["handlePageChage"],isLoading:["handleLoading"]}}};r(d,["indexResults","results","tplRenderFn","resultsPage","changeEvent","facets","isLoading"]);export{d as nano_algolia_results};
-//# sourceMappingURL=p-dab8526f.entry.js.map
+import{r as t,c as s,B as i,d as h,h as e,a as n,g as a}from"./p-f6a8467a.js";import{S as l,W as r}from"./p-60a8c896.js";const o=class{constructor(i){t(this,i);this.nanoPageChanged=s(this,"nanoPageChanged",7);this.nanoTplUpdated=s(this,"nanoTplUpdated",7);this.append=false;this.shouldClear=true;this.currHitNum=0;this.showResults=false;this.tplRenderFn=undefined;this.results=null;this.indexResults=null;this.resultsPage=0;this.changeEvent=l.Init;this.facets=undefined;this.isLoading=true;this.infiniteScroll=false;this.appendPages=false}addContentIndex(){this.shouldPageClear();if(this.shouldClear||this.resultsPage===0)this.currHitNum=0;if(this.indexResults&&this.indexResults.results){this.indexResults.results.map((t=>{t._uIndex=this.currHitNum++}))}}resultsChange(){this.shouldPageClear();this.updateResultContent();this.infiniteScrollChange()}headerFooterChange(){this.updateStartEndContent()}appendChange(){this.append=this.infiniteScroll?true:this.appendPages}infiniteScrollChange(){this.append=this.infiniteScroll?true:this.appendPages;this.infiniteScroll?this.attachIO():this.detachIO()}handlePageChage(){this.infiniteScroll?this.attachIO():this.detachIO()}handleLoading(){if(!this.isLoading)this.infiniteScrollChange()}shouldPageClear(){this.shouldClear=this.changeEvent===l.Page?!this.append:true}nextPage(){this.shouldClear=!this.append;this.nanoPageChanged.emit({page:this.resultsPage+1})}attachIO(){if(!this.infiniteScrollBar||!this.infiniteScroll||this.io||!i.isBrowser||typeof window==="undefined"||!window.IntersectionObserver)return;this.io=new window.IntersectionObserver((async t=>{if(t[0].isIntersecting||t[1]&&t[1].isIntersecting){this.nextPage();this.detachIO()}}),{document,rootMargin:"100px",threshold:1});this.io.observe(this.infiniteScrollBar)}detachIO(){if(this.io){this.io.disconnect();this.io=null}}updateStartEndContent(){if(this.startTpl&&this.startOutputSlot){this.startOutputSlot.innerHTML=this.tplRenderFn(this.startTpl,this.indexResults)}if(this.endOutputSlot&&this.endTpl){this.endOutputSlot.innerHTML=this.tplRenderFn(this.endTpl,this.indexResults)}this.nanoTplUpdated.emit(this.el)}updateResultContent(){this.outputTo=this.outputSlot||this.outputEle;if(!this.resultTpl||!this.indexResults)return;if(this.shouldClear)this.outputTo.innerHTML="";if(!this.tplRenderFn)return;const t=document.createElement("div");t.innerHTML=this.tplRenderFn(this.resultTpl,this.indexResults);Array.from(t.children).forEach((t=>{this.outputTo.appendChild(t)}));this.shouldClear=true;this.nanoTplUpdated.emit(this.el)}connectedCallback(){h((()=>{this.startTplSlot=this.el.querySelector('[slot="start-template"]');this.startOutputSlot=this.el.querySelector('[slot="start-output"]');if(!!this.startTplSlot){this.startTpl=this.startTplSlot.innerHTML;this.startTpl=this.startTpl.replace(/=>/gm,"=>")}this.resultTplSlot=this.el.querySelector('[slot="result-template"]');this.outputSlot=this.el.querySelector('[slot="result-output"]');if(!!this.resultTplSlot){this.resultTpl=this.resultTplSlot.innerHTML;this.resultTpl=this.resultTpl.replace(/=>/gm,"=>")}this.endTplSlot=this.el.querySelector('[slot="end-template"]');this.endOutputSlot=this.el.querySelector('[slot="end-output"]');if(!!this.endTplSlot){this.endTpl=this.endTplSlot.innerHTML;this.endTpl=this.endTpl.replace(/=>/gm,"=>")}if(this.indexResults){this.addContentIndex();this.updateResultContent()}}))}componentDidLoad(){this.updateStartEndContent()}disconnectedCallback(){if(this.io){this.io.disconnect();this.io=undefined}}render(){return e(n,{class:{"show-results":this.showResults}},e("div",{class:"default"},e("slot",null)),e("div",{ref:t=>this.outputEle=t},e("slot",{name:"start-output"}),e("slot",{name:"result-output"}),e("div",{ref:t=>this.infiniteScrollBar=t}),e("slot",{name:"end-output"})))}get el(){return a(this)}static get watchers(){return{results:["addContentIndex","resultsChange"],tplRenderFn:["resultsChange"],facets:["headerFooterChange"],appendPages:["appendChange"],infiniteScroll:["infiniteScrollChange"],resultsPage:["handlePageChage"],isLoading:["handleLoading"]}}};r(o,["indexResults","results","tplRenderFn","resultsPage","changeEvent","facets","isLoading"]);export{o as nano_algolia_results};
+//# sourceMappingURL=p-288dbe6b.entry.js.map