@nanoporetech-digital/components 7.6.0 → 7.7.0

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

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{h as e,a as i,g as t,r as n,c as s}from"./index-3118109b.js";const r=(()=>{try{return!!new CSSStyleSheet}catch(e){return false}})();const o=new WeakMap;function a(n={}){return(s,a)=>{if(!n.cacheKeyProperty){n.cacheKeyProperty=a}const{componentWillLoad:d,render:g,componentWillRender:b}=s;if(!d)console.warn(`ConstructibleStyle requires you to have a \`componentWillLoad\` lifecycle method in \`${s.constructor.name}\`. Failure to add this function may cause ConstructibleStyle to fail due to StencilJS build optimizations.`);if(r){const e=e=>{if(!e[n.cacheKeyProperty]||o.get(e)&&o.get(e)===e[n.cacheKeyProperty])return;o.set(e,e[n.cacheKeyProperty]);const i=t(e);const r=typeof e[a]==="function"?e[a]():e[a];const c=i.shadowRoot||document;c.adoptedStyleSheets=[...c.adoptedStyleSheets||[],l(e,s,r,n)]};s.componentWillLoad=function(){const i=d&&d.call(this);e(this);return i};s.componentWillRender=function(){const i=b&&b.call(this);e(this);return i}}else{s.render=function(){const t=typeof this[a]==="function"?this[a]():this[a];let n=g.call(this);if(h(n)){c(n,s.constructor.name,t)}else{n=e(i,null,n);if(!("attachShadow"in HTMLElement.prototype)){c(n,s.constructor.name,t)}else{if(!s.__constructableStyle){const e=document.createElement("style");e.setAttribute("type","text/css");e.setAttribute("constructible-style",s.constructor.name);e.innerHTML=t;s.__constructableStyle=e;document.head.appendChild(e)}}}return n}}}}function c(i,t,n){(d(i)||[]).push(e("style",{type:"text/css","constructible-style":t},n))}function l(e,i,t,n){if(!i.__constructableStyle){i.__constructableStyle={}}const s=e[n.cacheKeyProperty];if(!i.__constructableStyle[s]){i.__constructableStyle[s]=new CSSStyleSheet;i.__constructableStyle[s].replace(t)}return i.__constructableStyle[s]}function h(e){for(const t in e){if(t in e){if(e[t]===i){return true}}}return false}function d(e){for(const i in e){if(i in e){if(Array.isArray(e[i])){return e[i]}}}}const g=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}: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: s";container-type:inline-size;display:block}:host .grid{display:grid;gap:var(--grid-row-gap) var(--grid-col-gap);block-size:inherit;min-block-size:inherit}:host([show-helper]:not([show-helper=false])){position:relative}:host([show-helper]:not([show-helper=false])) .grid--helper{position:absolute;inset:0;pointer-events:none;display:grid !important;overflow:hidden}:host([show-helper]:not([show-helper=false])) .grid--helper::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([show-helper]:not([show-helper=false])) .grid__helper-item{background:hsla(204, 80%, 72%, 0.25);block-size:100vh}';const b=g;var p=undefined&&undefined.__decorate||function(e,i,t,n){var s=arguments.length,r=s<3?i:n===null?n=Object.getOwnPropertyDescriptor(i,t):n,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(e,i,t,n);else for(var a=e.length-1;a>=0;a--)if(o=e[a])r=(s<3?o(r):s>3?o(i,t,r):o(i,t))||r;return s>3&&r&&Object.defineProperty(i,t,r),r};var f=undefined&&undefined.__metadata||function(e,i){if(typeof Reflect==="object"&&typeof Reflect.metadata==="function")return Reflect.metadata(e,i)};const u=class{constructor(e){n(this,e)}grids=[];cacheKey;sSize=300;mSize=550;lSize=800;xlSize=1e3;sCols;mCols;lCols;xlCols;xxlCols;sTpl;mTpl;lTpl;xlTpl;xxlTpl;showHelper=false;constructSizeArray(){this.grids=[];if(this.sCols)this.grids.push({cols:this.sCols,breakpoint:0,name:"s",template:this.sTpl});if(this.mCols)this.grids.push({cols:this.mCols,breakpoint:this.sSize,name:"m",template:this.mTpl});if(this.lCols)this.grids.push({cols:this.lCols,breakpoint:this.mSize,name:"l",template:this.lTpl});if(this.xlCols)this.grids.push({cols:this.xlCols,breakpoint:this.lSize,name:"xl",template:this.xlTpl});if(this.xxlCols)this.grids.push({cols:this.xxlCols,breakpoint:this.xlSize,name:"xxl",template:this.xxlTpl});this.cacheKey=this.grids.map((e=>`${e.cols}-${e.breakpoint}-${e.template||""}`)).join("")+"-helper-"+this.showHelper}styles=()=>{const e=`\n      ${this.grids.map((e=>`\n          @container (min-width: ${Number(e.breakpoint+1)?Number(e.breakpoint)+1+"px":e.breakpoint}) {\n            [cache-key="${this.cacheKey}"].grid {\n              --current-grid-size: "grid size: ${e.name}";\n              ${e.template?`grid-template: ${e.template};`:`grid-template-columns: repeat(${e.cols}, minmax(calc((100% / ${e.cols}) - var(--grid-col-gap)), 1fr));`}\n            }\n            ${[...Array(e.cols)].map(((i,t)=>{const n=t+1;return`\n                  [cache-key="${this.cacheKey}"].grid > [grid-states~="${e.name}-col-start-${n}"],\n                  ::slotted([grid-states~="${e.name}-col-start-${n}"]) {\n                    grid-column-start: ${n} !important;\n                  }\n                  [cache-key="${this.cacheKey}"].grid > [grid-states~="${e.name}-col-span-${n}"],\n                  ::slotted([grid-states~="${e.name}-col-span-${n}"]) {\n                    grid-column-end: span ${n} !important;\n                  }\n              `})).join("")}\n              ${[...Array(24)].map(((i,t)=>{const n=t+1;return`\n                    [cache-key="${this.cacheKey}"].grid > [grid-states~="${e.name}-row-start-${n}"],\n                    ::slotted([grid-states~="${e.name}-row-start-${n}"]) {\n                      grid-row-start: ${n} !important;\n                    }\n                    [cache-key="${this.cacheKey}"].grid > [grid-states~="${e.name}-row-span-${n}"],\n                    ::slotted([grid-states~="${e.name}-row-span-${n}"]) {\n                      grid-row-end: span ${n} !important;\n                    }\n                `})).join("")}\n            ${this.showHelper?`\n                [cache-key="${this.cacheKey}"].grid--helper :nth-child(-n+${e.cols}) {\n                  display: block !important;\n                }\n              `:""}\n          }\n        `)).join("")}\n    `;return e.replace(/\/\*[\s\S]*?\*\//g,"").replace(/\s{2,}/g," ").replace(/\s*([{}:;,])\s*/g,"$1").replace(/\n/g,"")};componentWillLoad(){this.constructSizeArray()}render(){return e(i,{key:"2eebb69e86c8ba0a00a3e589986514723cc3292b"},e("div",{key:"9cd5af7437da2dc43540cfd7ef63fe3182efe67c",part:"grid",class:"grid","cache-key":this.cacheKey},e("slot",{key:"c078a0403599f3fed6c4f525188f2ea53eb1513d"})),this.showHelper&&e("div",{key:"a429c6a72df606909afcbbdda2fedc59d1767f4f",class:"grid grid--helper",part:"helper","cache-key":this.cacheKey},[...Array(24)].map((()=>e("div",{class:"grid__helper-item"})))))}static get watchers(){return{sTpl:["constructSizeArray"],mTpl:["constructSizeArray"],lTpl:["constructSizeArray"],xlTpl:["constructSizeArray"],xxlTpl:["constructSizeArray"],sSize:["constructSizeArray"],mSize:["constructSizeArray"],lSize:["constructSizeArray"],xlSize:["constructSizeArray"],sCols:["constructSizeArray"],mCols:["constructSizeArray"],lCols:["constructSizeArray"],xlCols:["constructSizeArray"],xxlCols:["constructSizeArray"],showHelper:["constructSizeArray"]}}};p([a({cacheKeyProperty:"cacheKey"}),f("design:type",Object)],u.prototype,"styles",void 0);u.style=b;const m=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}: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;min-inline-size:inherit;block-size:inherit;inline-size:inherit;max-block-size:inherit;max-inline-size: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 (resolution >= 0.001dpcm){@supports (-webkit-appearance: none){.img__image.loaded,.img__bg.loaded{filter:blur(0)}}}.img__image{object-fit:inherit;object-position:inherit;min-block-size:inherit;min-inline-size:inherit;block-size:inherit;inline-size:inherit;max-block-size:inherit;max-inline-size: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 y=m;const z=class{constructor(e){n(this,e);this.nanoImgWillLoad=s(this,"nanoImgWillLoad",7);this.nanoImgDidLoad=s(this,"nanoImgDidLoad",7);this.nanoImgError=s(this,"nanoImgError",7)}io;_srcSet={};get host(){return t(this)}loadSrc;loadError;hasLoaded=false;imgStates=null;_src;_srcChanged(){this.hasLoaded=false;this.addIO()}alt;src;srcChanged(){this._src=this.src}srcSet;srcSetChanged(){if(!this.srcSet)return;delete this._srcSet;this._srcSet={};this.imgStates=this.srcSet.split(",").map((e=>{const[i,t]=e.split(" ").filter((e=>e.length));this._srcSet[i]={src:t,active:false};return i})).join(", ")}lazy=true;lazyChanged(){if(!this.lazy)this.load()}background;autoHeight="content";nanoImgWillLoad;nanoImgDidLoad;nanoImgError;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((e=>{if(e[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()}onLoad=()=>{this.nanoImgDidLoad.emit();setTimeout((()=>this.hasLoaded=true),50)};onError=()=>{this.nanoImgError.emit()};onResize=e=>{Object.entries(e.detail).forEach((([e,i])=>{this._srcSet[e].active=!!i}));const i=[];Object.keys(this._srcSet).sort().forEach((e=>{if(this._srcSet[e].active)i.push(this._srcSet[e].src)}));if(i.length)this._src=i.slice(-1)[0];else this._src=this.src};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 e("div",{key:"cbb3d0ef49c058dbf5767ca7b78c3559068c2446",class:"img"},e("nano-skeleton",{key:"f2e120c2563e4034795c3bab3151a90b2202487a",class:"img__loader"}),!!this.background&&e("div",{key:"3f5fd5a46bc7b92f47b03aa718a1dc10fa582e03",class:{loaded:this.hasLoaded,img__bg:true,"no-height":this.autoHeight==="image"},style:i},e("slot",{key:"f98f9ac3cf5203cba787611159026da6a068a4b0"})),e("img",{key:"e8c77b33922845f24760a075110e81e7e55ab914",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}),e("nano-resize-observe",{key:"5208f5833596d5ed04e5a4dd1f2e8418510ea144",class:"img__observer",onNanoResizeStateChange:this.onResize,states:this.imgStates}))}static get watchers(){return{_src:["_srcChanged"],src:["srcChanged"],srcSet:["srcSetChanged"],lazy:["lazyChanged"]}}};z.style=y;export{u as nano_grid,z as nano_img};
+import{h as e,g as i,a as t,r as n,c as s}from"./index-6cc72cd9.js";import{h as r}from"./renderer-4bc3e2dc.js";const o=(()=>{try{return!!new CSSStyleSheet}catch(e){return false}})();const a=new WeakMap;function c(n={}){return(s,r)=>{if(!n.cacheKeyProperty){n.cacheKeyProperty=r}const{componentWillLoad:c,render:g,componentWillRender:b}=s;if(!c)console.warn(`ConstructibleStyle requires you to have a \`componentWillLoad\` lifecycle method in \`${s.constructor.name}\`. Failure to add this function may cause ConstructibleStyle to fail due to StencilJS build optimizations.`);if(o){const e=e=>{if(!e[n.cacheKeyProperty]||a.get(e)&&a.get(e)===e[n.cacheKeyProperty])return;a.set(e,e[n.cacheKeyProperty]);const t=i(e);const o=typeof e[r]==="function"?e[r]():e[r];const c=t.shadowRoot||document;c.adoptedStyleSheets=[...c.adoptedStyleSheets||[],h(e,s,o,n)]};s.componentWillLoad=function(){const i=c&&c.call(this);e(this);return i};s.componentWillRender=function(){const i=b&&b.call(this);e(this);return i}}else{s.render=function(){const i=typeof this[r]==="function"?this[r]():this[r];let n=g.call(this);if(d(n)){l(n,s.constructor.name,i)}else{n=e(t,null,n);if(!("attachShadow"in HTMLElement.prototype)){l(n,s.constructor.name,i)}else{if(!s.__constructableStyle){const e=document.createElement("style");e.setAttribute("type","text/css");e.setAttribute("constructible-style",s.constructor.name);e.innerHTML=i;s.__constructableStyle=e;document.head.appendChild(e)}}}return n}}}}function l(i,t,n){(g(i)||[]).push(e("style",{type:"text/css","constructible-style":t},n))}function h(e,i,t,n){if(!i.__constructableStyle){i.__constructableStyle={}}const s=e[n.cacheKeyProperty];if(!i.__constructableStyle[s]){i.__constructableStyle[s]=new CSSStyleSheet;i.__constructableStyle[s].replace(t)}return i.__constructableStyle[s]}function d(e){for(const i in e){if(i in e){if(e[i]===t){return true}}}return false}function g(e){for(const i in e){if(i in e){if(Array.isArray(e[i])){return e[i]}}}}const b=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}: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: s";container-type:inline-size;display:block}:host .grid{display:grid;gap:var(--grid-row-gap) var(--grid-col-gap);block-size:inherit;min-block-size:inherit}:host([show-helper]:not([show-helper=false])){position:relative}:host([show-helper]:not([show-helper=false])) .grid--helper{position:absolute;inset:0;pointer-events:none;display:grid !important;overflow:hidden}:host([show-helper]:not([show-helper=false])) .grid--helper::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([show-helper]:not([show-helper=false])) .grid__helper-item{background:hsla(204, 80%, 72%, 0.25);block-size:100vh}';const f=b;var p=undefined&&undefined.__decorate||function(e,i,t,n){var s=arguments.length,r=s<3?i:n===null?n=Object.getOwnPropertyDescriptor(i,t):n,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(e,i,t,n);else for(var a=e.length-1;a>=0;a--)if(o=e[a])r=(s<3?o(r):s>3?o(i,t,r):o(i,t))||r;return s>3&&r&&Object.defineProperty(i,t,r),r};var u=undefined&&undefined.__metadata||function(e,i){if(typeof Reflect==="object"&&typeof Reflect.metadata==="function")return Reflect.metadata(e,i)};const m=class{constructor(e){n(this,e)}grids=[];cacheKey;sSize=300;mSize=550;lSize=800;xlSize=1e3;sCols;mCols;lCols;xlCols;xxlCols;sTpl;mTpl;lTpl;xlTpl;xxlTpl;showHelper=false;constructSizeArray(){this.grids=[];if(this.sCols)this.grids.push({cols:this.sCols,breakpoint:0,name:"s",template:this.sTpl});if(this.mCols)this.grids.push({cols:this.mCols,breakpoint:this.sSize,name:"m",template:this.mTpl});if(this.lCols)this.grids.push({cols:this.lCols,breakpoint:this.mSize,name:"l",template:this.lTpl});if(this.xlCols)this.grids.push({cols:this.xlCols,breakpoint:this.lSize,name:"xl",template:this.xlTpl});if(this.xxlCols)this.grids.push({cols:this.xxlCols,breakpoint:this.xlSize,name:"xxl",template:this.xxlTpl});this.cacheKey=this.grids.map((e=>`${e.cols}-${e.breakpoint}-${e.template||""}`)).join("")+"-helper-"+this.showHelper}styles=()=>{const e=`\n      ${this.grids.map((e=>`\n          @container (min-width: ${Number(e.breakpoint+1)?Number(e.breakpoint)+1+"px":e.breakpoint}) {\n            [cache-key="${this.cacheKey}"].grid {\n              --current-grid-size: "grid size: ${e.name}";\n              ${e.template?`grid-template: ${e.template};`:`grid-template-columns: repeat(${e.cols}, minmax(calc((100% / ${e.cols}) - var(--grid-col-gap)), 1fr));`}\n            }\n            ${[...Array(e.cols)].map(((i,t)=>{const n=t+1;return`\n                  [cache-key="${this.cacheKey}"].grid > [grid-states~="${e.name}-col-start-${n}"],\n                  ::slotted([grid-states~="${e.name}-col-start-${n}"]) {\n                    grid-column-start: ${n} !important;\n                  }\n                  [cache-key="${this.cacheKey}"].grid > [grid-states~="${e.name}-col-span-${n}"],\n                  ::slotted([grid-states~="${e.name}-col-span-${n}"]) {\n                    grid-column-end: span ${n} !important;\n                  }\n              `})).join("")}\n              ${[...Array(24)].map(((i,t)=>{const n=t+1;return`\n                    [cache-key="${this.cacheKey}"].grid > [grid-states~="${e.name}-row-start-${n}"],\n                    ::slotted([grid-states~="${e.name}-row-start-${n}"]) {\n                      grid-row-start: ${n} !important;\n                    }\n                    [cache-key="${this.cacheKey}"].grid > [grid-states~="${e.name}-row-span-${n}"],\n                    ::slotted([grid-states~="${e.name}-row-span-${n}"]) {\n                      grid-row-end: span ${n} !important;\n                    }\n                `})).join("")}\n            ${this.showHelper?`\n                [cache-key="${this.cacheKey}"].grid--helper :nth-child(-n+${e.cols}) {\n                  display: block !important;\n                }\n              `:""}\n          }\n        `)).join("")}\n    `;return e.replace(/\/\*[\s\S]*?\*\//g,"").replace(/\s{2,}/g," ").replace(/\s*([{}:;,])\s*/g,"$1").replace(/\n/g,"")};componentWillLoad(){this.constructSizeArray()}render(){return r(t,{key:"0299504cb77aa4332c7dc2c2d895513938844d10",clas:"nano-grid"},r("div",{key:"ea2a3faf3994483ae290955ba4ba6a6a8afa4a94",part:"grid",class:"grid","cache-key":this.cacheKey},r("slot",{key:"8b0233a9a7b6fece32ddc3ebe7753efcf3d494cd"})),this.showHelper&&r("div",{key:"e2a9d7d2dad1ce5a1b41716a377631123e74ebcd",class:"grid grid--helper",part:"helper","cache-key":this.cacheKey},[...Array(24)].map((()=>r("div",{class:"grid__helper-item"})))))}static get watchers(){return{sTpl:["constructSizeArray"],mTpl:["constructSizeArray"],lTpl:["constructSizeArray"],xlTpl:["constructSizeArray"],xxlTpl:["constructSizeArray"],sSize:["constructSizeArray"],mSize:["constructSizeArray"],lSize:["constructSizeArray"],xlSize:["constructSizeArray"],sCols:["constructSizeArray"],mCols:["constructSizeArray"],lCols:["constructSizeArray"],xlCols:["constructSizeArray"],xxlCols:["constructSizeArray"],showHelper:["constructSizeArray"]}}};p([c({cacheKeyProperty:"cacheKey"}),u("design:type",Object)],m.prototype,"styles",void 0);m.style=f;const y=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}: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;min-inline-size:inherit;block-size:inherit;inline-size:inherit;max-block-size:inherit;max-inline-size: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 (resolution >= 0.001dpcm){@supports (-webkit-appearance: none){.img__image.loaded,.img__bg.loaded{filter:blur(0)}}}.img__image{object-fit:inherit;object-position:inherit;min-block-size:inherit;min-inline-size:inherit;block-size:inherit;inline-size:inherit;max-block-size:inherit;max-inline-size: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 z=y;const k=class{constructor(e){n(this,e);this.nanoImgWillLoad=s(this,"nanoImgWillLoad",7);this.nanoImgDidLoad=s(this,"nanoImgDidLoad",7);this.nanoImgError=s(this,"nanoImgError",7)}io;_srcSet={};get host(){return i(this)}loadSrc;loadError;hasLoaded=false;imgStates=null;_src;_srcChanged(){this.hasLoaded=false;this.addIO()}alt;src;srcChanged(){this._src=this.src}srcSet;srcSetChanged(){if(!this.srcSet)return;delete this._srcSet;this._srcSet={};this.imgStates=this.srcSet.split(",").map((e=>{const[i,t]=e.split(" ").filter((e=>e.length));this._srcSet[i]={src:t,active:false};return i})).join(", ")}lazy=true;lazyChanged(){if(!this.lazy)this.load()}background;autoHeight="content";nanoImgWillLoad;nanoImgDidLoad;nanoImgError;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((e=>{if(e[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()}onLoad=()=>{this.nanoImgDidLoad.emit();setTimeout((()=>this.hasLoaded=true),50)};onError=()=>{this.nanoImgError.emit()};onResize=e=>{Object.entries(e.detail).forEach((([e,i])=>{this._srcSet[e].active=!!i}));const i=[];Object.keys(this._srcSet).sort().forEach((e=>{if(this._srcSet[e].active)i.push(this._srcSet[e].src)}));if(i.length)this._src=i.slice(-1)[0];else this._src=this.src};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 e=this.loadSrc?{"background-image":`url(${this.loadSrc})`}:{};return r(t,{key:"5f56dcb4a2fe386f1bdd130f4ddf48e2f6859f67",class:"nano-img"},r("div",{key:"bf901f23c00d91e988c530b98ea3e72d55a06b25",class:"img"},r("nano-skeleton",{key:"67b01b95235b44ac958f74b9162a1f10f81d5253",class:"img__loader"}),!!this.background&&r("div",{key:"b5f786a707e70b78a183fcd15fb02d0ed1066d9c",class:{loaded:this.hasLoaded,img__bg:true,"no-height":this.autoHeight==="image"},style:e},r("slot",{key:"a56ca90ca3a47eeefe1f54229c2d4cf056dab2fc"})),r("img",{key:"f15763c2522895d76416e38044cc26baff76f74a",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",{key:"4db81fe9e3b7fb99773daa70efe9f89abb2ad362",class:"img__observer",onNanoResizeStateChange:this.onResize,states:this.imgStates})))}static get watchers(){return{_src:["_srcChanged"],src:["srcChanged"],srcSet:["srcSetChanged"],lazy:["lazyChanged"]}}};k.style=z;export{m as nano_grid,k as nano_img};
 //# sourceMappingURL=nano-grid_2.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["supportsConstructibleStylesheets","CSSStyleSheet","_e","cacheKeys","WeakMap","ConstructibleStyle","opts","target","propertyKey","cacheKeyProperty","componentWillLoad","render","componentWillRender","console","warn","constructor","name","addStylesheet","instance","get","set","host","getElement","cssText","root","shadowRoot","document","adoptedStyleSheets","getOrCreateStylesheet","willLoadResult","call","this","willRenderResult","renderedNode","isHost","appendStyleToHost","h","Host","HTMLElement","prototype","__constructableStyle","style","createElement","setAttribute","innerHTML","head","appendChild","node","targetName","getHostChildren","push","type","key","replace","prop","Array","isArray","gridCss","NanoGridStyle0","Grid","grids","cacheKey","sSize","mSize","lSize","xlSize","sCols","mCols","lCols","xlCols","xxlCols","sTpl","mTpl","lTpl","xlTpl","xxlTpl","showHelper","constructSizeArray","cols","breakpoint","template","map","bp","join","styles","css","Number","_","i","gItm","part","class","__decorate","imgCss","NanoImgStyle0","Img","io","_srcSet","loadSrc","loadError","hasLoaded","imgStates","_src","_srcChanged","addIO","alt","src","srcChanged","srcSet","srcSetChanged","split","bpSrc","filter","length","active","lazy","lazyChanged","load","background","autoHeight","nanoImgWillLoad","nanoImgDidLoad","nanoImgError","window","removeIO","IntersectionObserver","data","isIntersecting","observe","setTimeout","onError","emit","onLoad","onResize","e","Object","entries","detail","forEach","srcOpts","keys","sort","slice","disconnect","undefined","connectedCallback","componentDidLoad","disconnectedCallback","bgStyle","loaded","img__bg","img__image","hide","decoding","loading","onNanoResizeStateChange","states"],"sources":["src/utils/constructible-style.tsx","src/components/grid/grid.scss?tag=nano-grid&encapsulation=shadow","src/components/grid/grid.tsx","src/components/img/img.scss?tag=nano-img&encapsulation=shadow","src/components/img/img.tsx"],"sourcesContent":["import { h, Host, getElement, VNode, ComponentInterface } from '@stencil/core';\n// import type { VNode, HTMLStencilElement } from \"@stencil/core\";\n\nconst supportsConstructibleStylesheets = (() => {\n  try {\n    return !!new CSSStyleSheet();\n  } catch (_e) {\n    return false;\n  }\n})();\n\nconst cacheKeys: WeakMap<ComponentInterface, string> = new WeakMap();\n\ndeclare type ConstructibleStyleDecorator = (\n  target: ComponentInterface,\n  propertyKey: string\n) => void;\n\n/**\n * Dynamically create a constructible stylesheet which is applied to the component.\n * The stylesheet is then cached for future instances of the component.\n * @usage\nAs a string:\n```\n@ConstructableStyle() style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;\n```\nAs a function:\n```\n@ConstructableStyle() style = () => `.bg { background: url('assets/${ this.mode }/bg.png'); }`;\n```\n * @param opts - optional `cacheKeyProperty` - in case an instance of a component could produce different styles based on variables.\n * @returns `@ConstructableStyle` decorator\n */\nexport function ConstructibleStyle(\n  opts: ConstructibleStyleOptions = {}\n): ConstructibleStyleDecorator {\n  return (target: ComponentInterface, propertyKey: string) => {\n    if (!opts.cacheKeyProperty) {\n      opts.cacheKeyProperty = propertyKey;\n    }\n\n    const { componentWillLoad, render, componentWillRender } = target;\n    if (!componentWillLoad)\n      console.warn(\n        `ConstructibleStyle requires you to have a \\`componentWillLoad\\` lifecycle method in \\`${target.constructor.name}\\`. Failure to add this function may cause ConstructibleStyle to fail due to StencilJS build optimizations.`\n      );\n\n    if (supportsConstructibleStylesheets) {\n      const addStylesheet = (instance: ComponentInterface) => {\n        if (\n          !instance[opts.cacheKeyProperty] ||\n          (cacheKeys.get(instance) &&\n            cacheKeys.get(instance) === instance[opts.cacheKeyProperty])\n        )\n          return;\n\n        cacheKeys.set(instance, instance[opts.cacheKeyProperty]);\n        const host = getElement(instance);\n        const cssText =\n          typeof instance[propertyKey] === 'function'\n            ? instance[propertyKey]()\n            : instance[propertyKey];\n        const root = (host.shadowRoot || document) as any;\n        root.adoptedStyleSheets = [\n          ...(root.adoptedStyleSheets || []),\n          getOrCreateStylesheet(instance, target, cssText, opts),\n        ];\n      };\n\n      target.componentWillLoad = function () {\n        const willLoadResult =\n          componentWillLoad && componentWillLoad.call(this);\n        addStylesheet(this);\n        return willLoadResult;\n      };\n\n      target.componentWillRender = function () {\n        const willRenderResult =\n          componentWillRender && componentWillRender.call(this);\n        addStylesheet(this);\n        return willRenderResult;\n      };\n    } else {\n      target.render = function () {\n        const cssText =\n          typeof this[propertyKey] === 'function'\n            ? this[propertyKey]()\n            : this[propertyKey];\n        let renderedNode: VNode = render.call(this);\n\n        if (isHost(renderedNode)) {\n          appendStyleToHost(renderedNode, target.constructor.name, cssText);\n        } else {\n          renderedNode = <Host>{renderedNode}</Host>;\n\n          if (!('attachShadow' in HTMLElement.prototype)) {\n            appendStyleToHost(renderedNode, target.constructor.name, cssText);\n          } else {\n            if (!target.__constructableStyle) {\n              const style = document.createElement('style');\n              style.setAttribute('type', 'text/css');\n              style.setAttribute(\n                'constructible-style',\n                target.constructor.name\n              );\n              style.innerHTML = cssText;\n              target.__constructableStyle = style;\n              document.head.appendChild(style);\n            }\n          }\n        }\n\n        return renderedNode;\n      };\n    }\n  };\n}\n\nfunction appendStyleToHost(node, targetName, cssText) {\n  (getHostChildren(node) || []).push(\n    <style type=\"text/css\" constructible-style={targetName}>\n      {cssText}\n    </style>\n  );\n}\n\nfunction getOrCreateStylesheet(\n  instance: ComponentInterface,\n  target: ComponentInterface,\n  cssText: string,\n  opts: ConstructibleStyleOptions\n): CSSStyleSheet {\n  if (!target.__constructableStyle) {\n    target.__constructableStyle = {};\n  }\n\n  const key = instance[opts.cacheKeyProperty];\n\n  if (!target.__constructableStyle[key]) {\n    target.__constructableStyle[key] = new CSSStyleSheet();\n    target.__constructableStyle[key].replace(cssText);\n  }\n\n  return target.__constructableStyle[key];\n}\n\nfunction isHost(node): boolean {\n  for (const prop in node) {\n    if (prop in node) {\n      if (node[prop] === Host) {\n        return true;\n      }\n    }\n  }\n  return false;\n}\n\nfunction getHostChildren(node): Array<VNode> {\n  for (const prop in node) {\n    if (prop in node) {\n      if (Array.isArray(node[prop])) {\n        return node[prop];\n      }\n    }\n  }\n}\n\nexport interface ConstructibleStyleOptions {\n  /**\n   * Set this in case an instance of a component could produce different styles based on variables.\n   * This will ensure that you get new styles for each mode.\n   * @example\n```\n@Prop() mode: string;\n@ConstructableStyle({ cacheKeyProperty: \"mode\" }) style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;\n```\n   */\n  cacheKeyProperty?: string;\n}\n","@use 'sass:math';\n@use '../../global/style/nano-theme/tokens/base';\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: #{base.$spacing-medium};\n  --grid-row-gap: #{base.$spacing-medium};\n  --current-grid-size: \"grid size: s\";\n\n  container-type: inline-size;\n  display: block;\n\n  .grid {\n    display: grid;\n    gap: var(--grid-row-gap) var(--grid-col-gap);\n    block-size: inherit;\n    min-block-size: inherit;\n  }\n}\n\n:host([show-helper]:not([show-helper='false'])) {\n  position: relative;\n\n  .grid--helper {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    display: grid !important;\n    overflow: hidden;\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  .grid__helper-item {\n    background: hsl(204deg 80% 72% / 25%);\n    block-size: 100vh;\n  }\n}\n","import { Component, h, Prop, Host, State, Watch } from '@stencil/core';\nimport { ConstructibleStyle } from '../../utils/constructible-style';\n\n/**\n * A lightweight, context-aware CSS grid implementation.\n *\n * - Define multiple grids templates at different breakpoints\n * - Uses `@container` queries to select the correct grid depending on the current dimensions\n * - Use `grid-states=\"...\"` on direct descendants for `column` / `row` - `start` / `end`\n * - SSR optimised\n\n * @part grid - the main grid element.\n * Use this to set css such as `justify-items|content` / `align-items|content` / `place-content`\n * @part helper - a replica grid showed when `show-helper` is true\n *\n * @slot - default slot. Use this to place grid items. Use `grid-states=\"...\"` attribute to opt-out of auto / sequential placement.\n */\n@Component({\n  tag: 'nano-grid',\n  styleUrl: 'grid.scss',\n  shadow: true,\n})\nexport class Grid {\n  private grids: {\n    cols: number;\n    breakpoint: number | string;\n    name: string;\n    template?: string;\n  }[] = [];\n  @State() cacheKey: string;\n\n  /** the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.\n   * Will default to `px` if no unit supplied e.g. `20rem` */\n  @Prop({ reflect: true }) sSize: number | string = 300;\n\n  /** the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.\n   * Will default to `px` if no unit supplied e.g. `20rem` */\n  @Prop({ reflect: true }) mSize: number | string = 550;\n\n  /** the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.\n   * Will default to `px` if no unit supplied e.g. `20rem` */\n  @Prop({ reflect: true }) lSize: number | string = 800;\n\n  /** the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.\n   * Will default to `px` if no unit supplied e.g. `20rem` */\n  @Prop({ reflect: true }) xlSize: number | string = 1000;\n\n  /** the number of columns the grid has at the small breakpoint. */\n  @Prop({ reflect: true }) sCols: number;\n\n  /** the number of columns the grid has at the medium breakpoint. */\n  @Prop({ reflect: true }) mCols: number;\n\n  /** the number of columns the grid has at the large breakpoint. */\n  @Prop({ reflect: true }) lCols: number;\n\n  /** the number of columns the grid has at the xl breakpoint. */\n  @Prop({ reflect: true }) xlCols: number;\n\n  /** the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint) */\n  @Prop({ reflect: true }) xxlCols: number;\n\n  /** Optional small `grid-template`. *Note* - you must set `sCols` for this to take affect */\n  @Prop() sTpl?: string;\n\n  /** Optional medium `grid-template`. *Note* - you must set `mCols` for this to take affect */\n  @Prop() mTpl?: string;\n\n  /** Optional large `grid-template`. *Note* - you must set `lCols` for this to take affect */\n  @Prop() lTpl?: string;\n\n  /** Optional xl `grid-template`. *Note* - you must set `xlCols` for this to take affect */\n  @Prop() xlTpl?: string;\n\n  /** Optional xxl `grid-template`. *Note* - you must set `xxlCols` for this to take affect */\n  @Prop() xxlTpl?: string;\n\n  /** shows a grid helper to visualise where columns are */\n  @Prop({ reflect: true }) showHelper: boolean = false;\n\n  @Watch('sTpl')\n  @Watch('mTpl')\n  @Watch('lTpl')\n  @Watch('xlTpl')\n  @Watch('xxlTpl')\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  @Watch('showHelper')\n  constructSizeArray() {\n    this.grids = [];\n\n    if (this.sCols)\n      this.grids.push({\n        cols: this.sCols,\n        breakpoint: 0,\n        name: 's',\n        template: this.sTpl,\n      });\n    if (this.mCols)\n      this.grids.push({\n        cols: this.mCols,\n        breakpoint: this.sSize,\n        name: 'm',\n        template: this.mTpl,\n      });\n    if (this.lCols)\n      this.grids.push({\n        cols: this.lCols,\n        breakpoint: this.mSize,\n        name: 'l',\n        template: this.lTpl,\n      });\n    if (this.xlCols)\n      this.grids.push({\n        cols: this.xlCols,\n        breakpoint: this.lSize,\n        name: 'xl',\n        template: this.xlTpl,\n      });\n    if (this.xxlCols)\n      this.grids.push({\n        cols: this.xxlCols,\n        breakpoint: this.xlSize,\n        name: 'xxl',\n        template: this.xxlTpl,\n      });\n\n    this.cacheKey =\n      this.grids\n        .map((bp) => `${bp.cols}-${bp.breakpoint}-${bp.template || ''}`)\n        .join('') +\n      '-helper-' +\n      this.showHelper;\n  }\n\n  @ConstructibleStyle({ cacheKeyProperty: 'cacheKey' }) protected styles =\n    () => {\n      const css = /* css */ `\n      ${this.grids\n        .map(\n          (bp) => /* css */ `\n          @container (min-width: ${\n            Number((bp.breakpoint as number) + 1)\n              ? Number(bp.breakpoint) + 1 + 'px'\n              : bp.breakpoint\n          }) {\n            [cache-key=\"${this.cacheKey}\"].grid {\n              --current-grid-size: \"grid size: ${bp.name}\";\n              ${\n                bp.template\n                  ? `grid-template: ${bp.template};`\n                  : `grid-template-columns: repeat(${bp.cols}, minmax(calc((100% / ${bp.cols}) - var(--grid-col-gap)), 1fr));`\n              }\n            }\n            ${[...Array(bp.cols)]\n              .map((_, i) => {\n                const gItm = i + 1;\n                return /* css */ `\n                  [cache-key=\"${this.cacheKey}\"].grid > [grid-states~=\"${bp.name}-col-start-${gItm}\"],\n                  ::slotted([grid-states~=\"${bp.name}-col-start-${gItm}\"]) {\n                    grid-column-start: ${gItm} !important;\n                  }\n                  [cache-key=\"${this.cacheKey}\"].grid > [grid-states~=\"${bp.name}-col-span-${gItm}\"],\n                  ::slotted([grid-states~=\"${bp.name}-col-span-${gItm}\"]) {\n                    grid-column-end: span ${gItm} !important;\n                  }\n              `;\n              })\n              .join('')}\n              ${[...Array(24)]\n                .map((_, i) => {\n                  const gItm = i + 1;\n                  return /* css */ `\n                    [cache-key=\"${this.cacheKey}\"].grid > [grid-states~=\"${bp.name}-row-start-${gItm}\"],\n                    ::slotted([grid-states~=\"${bp.name}-row-start-${gItm}\"]) {\n                      grid-row-start: ${gItm} !important;\n                    }\n                    [cache-key=\"${this.cacheKey}\"].grid > [grid-states~=\"${bp.name}-row-span-${gItm}\"],\n                    ::slotted([grid-states~=\"${bp.name}-row-span-${gItm}\"]) {\n                      grid-row-end: span ${gItm} !important;\n                    }\n                `;\n                })\n                .join('')}\n            ${\n              this.showHelper\n                ? /* css */ `\n                [cache-key=\"${this.cacheKey}\"].grid--helper :nth-child(-n+${bp.cols}) {\n                  display: block !important;\n                }\n              `\n                : ''\n            }\n          }\n        `\n        )\n        .join('')}\n    `;\n      return css\n        .replace(/\\/\\*[\\s\\S]*?\\*\\//g, '') // Remove comments\n        .replace(/\\s{2,}/g, ' ') // Replace multiple spaces with a single space\n        .replace(/\\s*([{}:;,])\\s*/g, '$1') // Remove spaces around CSS symbols\n        .replace(/\\n/g, ''); // Remove newlines;\n    };\n\n  componentWillLoad() {\n    this.constructSizeArray();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div part=\"grid\" class=\"grid\" cache-key={this.cacheKey}>\n          <slot />\n        </div>\n        {this.showHelper && (\n          <div\n            class=\"grid grid--helper\"\n            part=\"helper\"\n            cache-key={this.cacheKey}\n          >\n            {[...Array(24)].map(() => (\n              <div class=\"grid__helper-item\" />\n            ))}\n          </div>\n        )}\n      </Host>\n    );\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  min-inline-size: inherit;\n  block-size: inherit;\n  inline-size: inherit;\n  max-block-size: inherit;\n  max-inline-size: 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 (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  min-block-size: inherit;\n  min-inline-size: inherit;\n  block-size: inherit;\n  inline-size: inherit;\n  max-block-size: inherit;\n  max-inline-size: 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 { ResizeStateChangeEventDetail } from '../resize-observe/resize-observe-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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","ignoreList":[]}
+{"version":3,"names":["supportsConstructibleStylesheets","CSSStyleSheet","_e","cacheKeys","WeakMap","ConstructibleStyle","opts","target","propertyKey","cacheKeyProperty","componentWillLoad","render","componentWillRender","console","warn","constructor","name","addStylesheet","instance","get","set","host","getElement","cssText","root","shadowRoot","document","adoptedStyleSheets","getOrCreateStylesheet","willLoadResult","call","this","willRenderResult","renderedNode","isHost","appendStyleToHost","h","Host","HTMLElement","prototype","__constructableStyle","style","createElement","setAttribute","innerHTML","head","appendChild","node","targetName","getHostChildren","push","type","key","replace","prop","Array","isArray","gridCss","NanoGridStyle0","Grid","grids","cacheKey","sSize","mSize","lSize","xlSize","sCols","mCols","lCols","xlCols","xxlCols","sTpl","mTpl","lTpl","xlTpl","xxlTpl","showHelper","constructSizeArray","cols","breakpoint","template","map","bp","join","styles","css","Number","_","i","gItm","clas","part","class","__decorate","imgCss","NanoImgStyle0","Img","io","_srcSet","loadSrc","loadError","hasLoaded","imgStates","_src","_srcChanged","addIO","alt","src","srcChanged","srcSet","srcSetChanged","split","bpSrc","filter","length","active","lazy","lazyChanged","load","background","autoHeight","nanoImgWillLoad","nanoImgDidLoad","nanoImgError","window","removeIO","IntersectionObserver","data","isIntersecting","observe","setTimeout","onError","emit","onLoad","onResize","e","Object","entries","detail","forEach","srcOpts","keys","sort","slice","disconnect","undefined","connectedCallback","componentDidLoad","disconnectedCallback","bgStyle","loaded","img__bg","img__image","hide","decoding","loading","onNanoResizeStateChange","states"],"sources":["src/utils/constructible-style.tsx","src/components/grid/grid.scss?tag=nano-grid&encapsulation=shadow","src/components/grid/grid.tsx","src/components/img/img.scss?tag=nano-img&encapsulation=shadow","src/components/img/img.tsx"],"sourcesContent":["import { h, Host, getElement, VNode, ComponentInterface } from '@stencil/core';\n// import type { VNode, HTMLStencilElement } from \"@stencil/core\";\n\nconst supportsConstructibleStylesheets = (() => {\n  try {\n    return !!new CSSStyleSheet();\n  } catch (_e) {\n    return false;\n  }\n})();\n\nconst cacheKeys: WeakMap<ComponentInterface, string> = new WeakMap();\n\ndeclare type ConstructibleStyleDecorator = (\n  target: ComponentInterface,\n  propertyKey: string\n) => void;\n\n/**\n * Dynamically create a constructible stylesheet which is applied to the component.\n * The stylesheet is then cached for future instances of the component.\n * @usage\nAs a string:\n```\n@ConstructableStyle() style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;\n```\nAs a function:\n```\n@ConstructableStyle() style = () => `.bg { background: url('assets/${ this.mode }/bg.png'); }`;\n```\n * @param opts - optional `cacheKeyProperty` - in case an instance of a component could produce different styles based on variables.\n * @returns `@ConstructableStyle` decorator\n */\nexport function ConstructibleStyle(\n  opts: ConstructibleStyleOptions = {}\n): ConstructibleStyleDecorator {\n  return (target: ComponentInterface, propertyKey: string) => {\n    if (!opts.cacheKeyProperty) {\n      opts.cacheKeyProperty = propertyKey;\n    }\n\n    const { componentWillLoad, render, componentWillRender } = target;\n    if (!componentWillLoad)\n      console.warn(\n        `ConstructibleStyle requires you to have a \\`componentWillLoad\\` lifecycle method in \\`${target.constructor.name}\\`. Failure to add this function may cause ConstructibleStyle to fail due to StencilJS build optimizations.`\n      );\n\n    if (supportsConstructibleStylesheets) {\n      const addStylesheet = (instance: ComponentInterface) => {\n        if (\n          !instance[opts.cacheKeyProperty] ||\n          (cacheKeys.get(instance) &&\n            cacheKeys.get(instance) === instance[opts.cacheKeyProperty])\n        )\n          return;\n\n        cacheKeys.set(instance, instance[opts.cacheKeyProperty]);\n        const host = getElement(instance);\n        const cssText =\n          typeof instance[propertyKey] === 'function'\n            ? instance[propertyKey]()\n            : instance[propertyKey];\n        const root = (host.shadowRoot || document) as any;\n        root.adoptedStyleSheets = [\n          ...(root.adoptedStyleSheets || []),\n          getOrCreateStylesheet(instance, target, cssText, opts),\n        ];\n      };\n\n      target.componentWillLoad = function () {\n        const willLoadResult =\n          componentWillLoad && componentWillLoad.call(this);\n        addStylesheet(this);\n        return willLoadResult;\n      };\n\n      target.componentWillRender = function () {\n        const willRenderResult =\n          componentWillRender && componentWillRender.call(this);\n        addStylesheet(this);\n        return willRenderResult;\n      };\n    } else {\n      target.render = function () {\n        const cssText =\n          typeof this[propertyKey] === 'function'\n            ? this[propertyKey]()\n            : this[propertyKey];\n        let renderedNode: VNode = render.call(this);\n\n        if (isHost(renderedNode)) {\n          appendStyleToHost(renderedNode, target.constructor.name, cssText);\n        } else {\n          renderedNode = <Host>{renderedNode}</Host>;\n\n          if (!('attachShadow' in HTMLElement.prototype)) {\n            appendStyleToHost(renderedNode, target.constructor.name, cssText);\n          } else {\n            if (!target.__constructableStyle) {\n              const style = document.createElement('style');\n              style.setAttribute('type', 'text/css');\n              style.setAttribute(\n                'constructible-style',\n                target.constructor.name\n              );\n              style.innerHTML = cssText;\n              target.__constructableStyle = style;\n              document.head.appendChild(style);\n            }\n          }\n        }\n\n        return renderedNode;\n      };\n    }\n  };\n}\n\nfunction appendStyleToHost(node, targetName, cssText) {\n  (getHostChildren(node) || []).push(\n    <style type=\"text/css\" constructible-style={targetName}>\n      {cssText}\n    </style>\n  );\n}\n\nfunction getOrCreateStylesheet(\n  instance: ComponentInterface,\n  target: ComponentInterface,\n  cssText: string,\n  opts: ConstructibleStyleOptions\n): CSSStyleSheet {\n  if (!target.__constructableStyle) {\n    target.__constructableStyle = {};\n  }\n\n  const key = instance[opts.cacheKeyProperty];\n\n  if (!target.__constructableStyle[key]) {\n    target.__constructableStyle[key] = new CSSStyleSheet();\n    target.__constructableStyle[key].replace(cssText);\n  }\n\n  return target.__constructableStyle[key];\n}\n\nfunction isHost(node): boolean {\n  for (const prop in node) {\n    if (prop in node) {\n      if (node[prop] === Host) {\n        return true;\n      }\n    }\n  }\n  return false;\n}\n\nfunction getHostChildren(node): Array<VNode> {\n  for (const prop in node) {\n    if (prop in node) {\n      if (Array.isArray(node[prop])) {\n        return node[prop];\n      }\n    }\n  }\n}\n\nexport interface ConstructibleStyleOptions {\n  /**\n   * Set this in case an instance of a component could produce different styles based on variables.\n   * This will ensure that you get new styles for each mode.\n   * @example\n```\n@Prop() mode: string;\n@ConstructableStyle({ cacheKeyProperty: \"mode\" }) style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;\n```\n   */\n  cacheKeyProperty?: string;\n}\n","@use 'sass:math';\n@use '../../global/style/nano-theme/tokens/base';\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: #{base.$spacing-medium};\n  --grid-row-gap: #{base.$spacing-medium};\n  --current-grid-size: \"grid size: s\";\n\n  container-type: inline-size;\n  display: block;\n\n  .grid {\n    display: grid;\n    gap: var(--grid-row-gap) var(--grid-col-gap);\n    block-size: inherit;\n    min-block-size: inherit;\n  }\n}\n\n:host([show-helper]:not([show-helper='false'])) {\n  position: relative;\n\n  .grid--helper {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    display: grid !important;\n    overflow: hidden;\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  .grid__helper-item {\n    background: hsl(204deg 80% 72% / 25%);\n    block-size: 100vh;\n  }\n}\n","import { Component, Prop, Host, State, Watch } from '@stencil/core';\nimport { ConstructibleStyle } from '../../utils/constructible-style';\nimport { h } from '../../utils/renderer';\n\n/**\n * A lightweight, context-aware CSS grid implementation.\n *\n * - Define multiple grids templates at different breakpoints\n * - Uses `@container` queries to select the correct grid depending on the current dimensions\n * - Use `grid-states=\"...\"` on direct descendants for `column` / `row` - `start` / `end`\n * - SSR optimised\n\n * @part grid - the main grid element.\n * Use this to set css such as `justify-items|content` / `align-items|content` / `place-content`\n * @part helper - a replica grid showed when `show-helper` is true\n *\n * @slot - default slot. Use this to place grid items. Use `grid-states=\"...\"` attribute to opt-out of auto / sequential placement.\n */\n@Component({\n  tag: 'nano-grid',\n  styleUrl: 'grid.scss',\n  shadow: true,\n})\nexport class Grid {\n  private grids: {\n    cols: number;\n    breakpoint: number | string;\n    name: string;\n    template?: string;\n  }[] = [];\n  @State() cacheKey: string;\n\n  /** the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.\n   * Will default to `px` if no unit supplied e.g. `20rem` */\n  @Prop({ reflect: true }) sSize: number | string = 300;\n\n  /** the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.\n   * Will default to `px` if no unit supplied e.g. `20rem` */\n  @Prop({ reflect: true }) mSize: number | string = 550;\n\n  /** the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.\n   * Will default to `px` if no unit supplied e.g. `20rem` */\n  @Prop({ reflect: true }) lSize: number | string = 800;\n\n  /** the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.\n   * Will default to `px` if no unit supplied e.g. `20rem` */\n  @Prop({ reflect: true }) xlSize: number | string = 1000;\n\n  /** the number of columns the grid has at the small breakpoint. */\n  @Prop({ reflect: true }) sCols: number;\n\n  /** the number of columns the grid has at the medium breakpoint. */\n  @Prop({ reflect: true }) mCols: number;\n\n  /** the number of columns the grid has at the large breakpoint. */\n  @Prop({ reflect: true }) lCols: number;\n\n  /** the number of columns the grid has at the xl breakpoint. */\n  @Prop({ reflect: true }) xlCols: number;\n\n  /** the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint) */\n  @Prop({ reflect: true }) xxlCols: number;\n\n  /** Optional small `grid-template`. *Note* - you must set `sCols` for this to take affect */\n  @Prop() sTpl?: string;\n\n  /** Optional medium `grid-template`. *Note* - you must set `mCols` for this to take affect */\n  @Prop() mTpl?: string;\n\n  /** Optional large `grid-template`. *Note* - you must set `lCols` for this to take affect */\n  @Prop() lTpl?: string;\n\n  /** Optional xl `grid-template`. *Note* - you must set `xlCols` for this to take affect */\n  @Prop() xlTpl?: string;\n\n  /** Optional xxl `grid-template`. *Note* - you must set `xxlCols` for this to take affect */\n  @Prop() xxlTpl?: string;\n\n  /** shows a grid helper to visualise where columns are */\n  @Prop({ reflect: true }) showHelper: boolean = false;\n\n  @Watch('sTpl')\n  @Watch('mTpl')\n  @Watch('lTpl')\n  @Watch('xlTpl')\n  @Watch('xxlTpl')\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  @Watch('showHelper')\n  constructSizeArray() {\n    this.grids = [];\n\n    if (this.sCols)\n      this.grids.push({\n        cols: this.sCols,\n        breakpoint: 0,\n        name: 's',\n        template: this.sTpl,\n      });\n    if (this.mCols)\n      this.grids.push({\n        cols: this.mCols,\n        breakpoint: this.sSize,\n        name: 'm',\n        template: this.mTpl,\n      });\n    if (this.lCols)\n      this.grids.push({\n        cols: this.lCols,\n        breakpoint: this.mSize,\n        name: 'l',\n        template: this.lTpl,\n      });\n    if (this.xlCols)\n      this.grids.push({\n        cols: this.xlCols,\n        breakpoint: this.lSize,\n        name: 'xl',\n        template: this.xlTpl,\n      });\n    if (this.xxlCols)\n      this.grids.push({\n        cols: this.xxlCols,\n        breakpoint: this.xlSize,\n        name: 'xxl',\n        template: this.xxlTpl,\n      });\n\n    this.cacheKey =\n      this.grids\n        .map((bp) => `${bp.cols}-${bp.breakpoint}-${bp.template || ''}`)\n        .join('') +\n      '-helper-' +\n      this.showHelper;\n  }\n\n  @ConstructibleStyle({ cacheKeyProperty: 'cacheKey' }) protected styles =\n    () => {\n      const css = /* css */ `\n      ${this.grids\n        .map(\n          (bp) => /* css */ `\n          @container (min-width: ${\n            Number((bp.breakpoint as number) + 1)\n              ? Number(bp.breakpoint) + 1 + 'px'\n              : bp.breakpoint\n          }) {\n            [cache-key=\"${this.cacheKey}\"].grid {\n              --current-grid-size: \"grid size: ${bp.name}\";\n              ${\n                bp.template\n                  ? `grid-template: ${bp.template};`\n                  : `grid-template-columns: repeat(${bp.cols}, minmax(calc((100% / ${bp.cols}) - var(--grid-col-gap)), 1fr));`\n              }\n            }\n            ${[...Array(bp.cols)]\n              .map((_, i) => {\n                const gItm = i + 1;\n                return /* css */ `\n                  [cache-key=\"${this.cacheKey}\"].grid > [grid-states~=\"${bp.name}-col-start-${gItm}\"],\n                  ::slotted([grid-states~=\"${bp.name}-col-start-${gItm}\"]) {\n                    grid-column-start: ${gItm} !important;\n                  }\n                  [cache-key=\"${this.cacheKey}\"].grid > [grid-states~=\"${bp.name}-col-span-${gItm}\"],\n                  ::slotted([grid-states~=\"${bp.name}-col-span-${gItm}\"]) {\n                    grid-column-end: span ${gItm} !important;\n                  }\n              `;\n              })\n              .join('')}\n              ${[...Array(24)]\n                .map((_, i) => {\n                  const gItm = i + 1;\n                  return /* css */ `\n                    [cache-key=\"${this.cacheKey}\"].grid > [grid-states~=\"${bp.name}-row-start-${gItm}\"],\n                    ::slotted([grid-states~=\"${bp.name}-row-start-${gItm}\"]) {\n                      grid-row-start: ${gItm} !important;\n                    }\n                    [cache-key=\"${this.cacheKey}\"].grid > [grid-states~=\"${bp.name}-row-span-${gItm}\"],\n                    ::slotted([grid-states~=\"${bp.name}-row-span-${gItm}\"]) {\n                      grid-row-end: span ${gItm} !important;\n                    }\n                `;\n                })\n                .join('')}\n            ${\n              this.showHelper\n                ? /* css */ `\n                [cache-key=\"${this.cacheKey}\"].grid--helper :nth-child(-n+${bp.cols}) {\n                  display: block !important;\n                }\n              `\n                : ''\n            }\n          }\n        `\n        )\n        .join('')}\n    `;\n      return css\n        .replace(/\\/\\*[\\s\\S]*?\\*\\//g, '') // Remove comments\n        .replace(/\\s{2,}/g, ' ') // Replace multiple spaces with a single space\n        .replace(/\\s*([{}:;,])\\s*/g, '$1') // Remove spaces around CSS symbols\n        .replace(/\\n/g, ''); // Remove newlines;\n    };\n\n  componentWillLoad() {\n    this.constructSizeArray();\n  }\n\n  render() {\n    return (\n      <Host clas=\"nano-grid\">\n        <div part=\"grid\" class=\"grid\" cache-key={this.cacheKey}>\n          <slot />\n        </div>\n        {this.showHelper && (\n          <div\n            class=\"grid grid--helper\"\n            part=\"helper\"\n            cache-key={this.cacheKey}\n          >\n            {[...Array(24)].map(() => (\n              <div class=\"grid__helper-item\" />\n            ))}\n          </div>\n        )}\n      </Host>\n    );\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  min-inline-size: inherit;\n  block-size: inherit;\n  inline-size: inherit;\n  max-block-size: inherit;\n  max-inline-size: 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 (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  min-block-size: inherit;\n  min-inline-size: inherit;\n  block-size: inherit;\n  inline-size: inherit;\n  max-block-size: inherit;\n  max-inline-size: 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  ComponentInterface,\n  Build,\n  Host,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { ResizeStateChangeEventDetail } from '../resize-observe/resize-observe-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      <Host class=\"nano-img\">\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      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as n,g as o,h as e,a as t}from"./index-3118109b.js";const i=":host {\n  box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n: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:host {\n  /**\n   * @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n   * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n   * @prop --theme-color: Text color. Default depends on theme;\n   * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #90c6e7;\n   * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n   * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n   * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n   * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n   * @prop --quote-size: Font size of the quote. Defaults to 1.3em and grows to 3rem on the xl breakpoint;\n  */\n  --nano-loader-base: #4a4a4a;\n  --nano-loader-tint: #7d7d7d;\n  --theme-color: #fff;\n  --theme-tint-color: #90c6e7;\n  --scrim-color: 0 0 0;\n  --scrim-direction: 90deg;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 0.7;\n  --padding: 0;\n  --quote-size: 1.3rem;\n  color: var(--theme-color);\n  display: block;\n  container-type: inline-size;\n}\n\n:host([theme=light]) {\n  --nano-loader-base: #fff;\n  --nano-loader-tint: white;\n  --theme-color: #4a4a4a;\n  --scrim-color: 255 255 255;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 1;\n  --scrim-direction: 270deg;\n  color: var(--theme-color);\n}\n:host([theme=light]) .hero__primary-content {\n  --color: #4a4a4a;\n}\n\n.hero {\n  position: relative;\n}\n@container (min-width: 800px) {\n  .hero {\n    --quote-size: 3rem;\n  }\n}\n.hero--rtl {\n  --scrim-direction: 270deg;\n}\n.hero--secondary:not(.hero--iconbox) {\n  --scrim-direction: 0deg;\n}\n.hero__bg-wrap {\n  overflow: hidden;\n}\n.hero__bg-slot {\n  position: absolute;\n  inset: 0;\n}\n.hero__ctas {\n  display: flex;\n  justify-content: flex-end;\n  padding-block: 32px 0;\n  padding-inline: 32px;\n  margin-block-end: -64px;\n  position: relative;\n  z-index: 1;\n}\n@media (width <= 52em) {\n  .hero__ctas {\n    display: none;\n  }\n}\n@media (width <= 58em) {\n  .hero__ctas {\n    margin-block-end: -48px;\n  }\n}\n.hero__ctas ::slotted(a.button[slot=secondary-ctas]) {\n  padding-inline: 0.5rem !important;\n  font-size: 0.875rem !important;\n  margin-block: 0 !important;\n  margin-inline: 0.25rem !important;\n}\n.hero__img {\n  display: block;\n  --padding: inherit;\n}\n.hero__breadcrumbs {\n  display: none;\n  margin-block: 20px 0;\n  margin-inline: 14px;\n  line-height: 14px;\n}\n.hero--breadcrumb .hero__breadcrumbs {\n  display: block;\n}\n@container (min-width: 800px) {\n  .hero__breadcrumbs {\n    margin-block: 0;\n    margin-inline: 50px;\n    max-inline-size: 50%;\n  }\n}\n@container (min-width: 900px) {\n  .hero__breadcrumbs {\n    margin-block: 0;\n    margin-inline: 83px;\n  }\n}\n.hero__breadcrumbs ::slotted(*[slot=breadcrumb]) {\n  font-size: 0.85rem;\n  text-transform: uppercase;\n  letter-spacing: 1.5px;\n  font-weight: 600;\n  font-stretch: 125%;\n  display: inline-block;\n  margin-block-end: 16px;\n  position: relative;\n  z-index: 2;\n}\n.hero--hasbg .hero__breadcrumbs ::slotted(*[slot=breadcrumb]) {\n  text-shadow: 1px 1px rgba(0, 0, 0, 0.15);\n}\n.hero__breadcrumbs ::slotted(a[slot=breadcrumb]) {\n  color: var(--theme-tint-color) !important;\n  cursor: pointer;\n}\n.hero__breadcrumbs ::slotted(.slash[slot=breadcrumb]) {\n  color: var(--theme-color);\n  position: relative;\n  margin-block: 0;\n  margin-inline: 0.5rem;\n  display: inline-block;\n}\n.hero__scrim {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  background: linear-gradient(var(--scrim-direction), rgb(var(--scrim-color)/var(--scrim-opacity-from)) 0%, rgb(var(--scrim-color)/var(--scrim-opacity-to)) 100%);\n}\n.hero--scrim .hero__scrim {\n  background: none;\n}\n.hero__content {\n  max-inline-size: 1440px;\n  display: block;\n  --grid-row-gap: 0;\n  margin-block: 0;\n  margin-inline: auto;\n  position: relative;\n}\n@container (min-width: 800px) {\n  .hero__content {\n    margin-block: 50px 0 !important;\n    max-inline-size: 1540px !important;\n  }\n}\n@container (min-width: 900px) {\n  .hero__content {\n    margin-block: 83px 0 !important;\n    max-inline-size: 1606px !important;\n  }\n}\n.hero__primary {\n  margin: 16px;\n}\n.hero--breadcrumb .hero__primary {\n  margin-block: 0;\n  margin-inline: 16px;\n}\n.hero--backbtn .hero__primary {\n  margin-inline-start: 0;\n}\n.hero__primary ::slotted(nano-icon-button[slot=back-btn]) {\n  font-size: 2rem;\n}\n@container (min-width: 800px) {\n  .hero__primary {\n    margin-block: 0 50px !important;\n    margin-inline: 50px 0 !important;\n  }\n  .hero__primary ::slotted(nano-icon-button[slot=back-btn]) {\n    margin-block: 0 !important;\n    margin-inline: -3rem 0 !important;\n  }\n}\n@container (min-width: 900px) {\n  .hero__primary {\n    margin-block: 0 83px !important;\n    margin-inline: 83px 0 !important;\n  }\n}\n.hero__primary-content {\n  max-inline-size: 45rem;\n  --color: #fff;\n  display: flex;\n}\n.hero--backbtn .hero__primary-content > div {\n  padding-block: 10px 0;\n  padding-inline: 0;\n}\n.hero__primary-content ::slotted(h1[slot=primary-content]) {\n  line-height: 26px !important;\n  margin-block: 0 18px !important;\n  font-size: 2rem !important;\n}\n@container (min-width: 800px) {\n  .hero__primary-content ::slotted(h1[slot=primary-content]) {\n    line-height: 31px !important;\n    margin-block-end: 30px !important;\n  }\n  .hero__primary-content ::slotted(.button[slot=primary-content]) {\n    margin-block-start: 20px !important;\n  }\n}\n.hero__secondary {\n  display: none;\n  block-size: 100%;\n  padding-block: 0 20px;\n  padding-inline: 14px;\n}\n.hero--secondary .hero__secondary {\n  display: flex;\n  align-items: center;\n}\n@container (min-width: 800px) {\n  .hero__secondary {\n    padding-block: 0 50px;\n    padding-inline: 50px;\n    justify-content: flex-end;\n  }\n}\n@container (min-width: 900px) {\n  .hero__secondary {\n    padding-block: 0 83px;\n    padding-inline: 83px;\n  }\n}\n.hero__icon-box {\n  background: rgba(0, 0, 0, 0.7);\n  padding: 24px;\n  inline-size: 100%;\n  margin-block-end: auto;\n  display: flex;\n  flex-direction: column;\n  color: white;\n}\n@container (min-width: 800px) {\n  .hero__icon-box {\n    max-inline-size: 410px;\n    flex: 0 1 410px;\n  }\n}\n.hero__icon-box ::slotted([slot=icon-box-item]) {\n  --nano-color-base: var(--theme-tint-color);\n  --nano-icon-size: 32px;\n  --nano-icon-margin-end: 20px;\n  display: flex;\n  align-items: center;\n  font-size: 0.8125rem;\n  margin-block-end: 20px;\n}\n.hero__icon-box ::slotted(.last[slot=icon-box-item]) {\n  margin-block-end: 0;\n}\n.hero__quote-content {\n  margin-block-start: auto;\n  text-align: center;\n  inline-size: 100%;\n}\n@container (min-width: 800px) {\n  .hero__quote-content {\n    max-inline-size: 500px;\n    flex: 0 1 500px;\n    text-align: initial;\n  }\n}\n.hero__quote::before, .hero__quote::after {\n  content: '\"';\n  font-size: var(--quote-size);\n  font-weight: 600;\n  font-style: italic;\n  line-height: 0;\n  color: #abb6b8;\n  display: inline;\n  position: relative;\n}\n.hero__quote ::slotted([slot=quote]) {\n  font-size: var(--quote-size);\n  font-weight: 200;\n  display: inline;\n}\n.hero__quote-author {\n  text-align: end;\n  font-size: 1rem;\n  opacity: 0.8;\n}\n@container (min-width: 800px) {\n  .hero--sub .hero__content {\n    margin-block-start: 40px;\n  }\n  .hero--sub .hero__content .hero__primary {\n    margin-block: 0 40px;\n    margin-inline: 50px 0;\n  }\n  .hero--sub .hero__content .hero__secondary {\n    padding-block: 0 50px;\n    padding-inline: 40px 50px;\n  }\n  .hero--sub .hero__content ::slotted(.button[slot=primary-content]) {\n    margin-block-start: 8px !important;\n  }\n  .hero--sub .hero__content ::slotted(h1[slot=primary-content]) {\n    margin-block-end: 18px !important;\n  }\n}\n@container (min-width: 900px) {\n  .hero--sub .hero__content .hero__primary {\n    margin-block: 0 40px;\n    margin-inline: 83px 0;\n  }\n  .hero--sub .hero__content .hero__secondary {\n    padding-block: 0 83px;\n    padding-inline: 40px 83px;\n  }\n}";const r=i;const a=class{constructor(o){n(this,o)}mo;get host(){return o(this)}hasIconBox;hasScrim;hasSecondaryContent;hasQuote;hasBg;hasBackBtn;hasCtas;breadCrumbs;breadCrumbChange(){this.breadCrumbs.filter((n=>n.tagName==="A"&&!n.nextElementSibling.classList.contains("slash"))).forEach((n=>{n.insertAdjacentHTML("afterend",'<span slot="breadcrumb" class="slash">/</span>')}))}iconBoxItems;iconBoxItemChange(){this.iconBoxItems.forEach((n=>n.classList.remove("last")));if(this.iconBoxItems[this.iconBoxItems.length-1]&&this.iconBoxItems[this.iconBoxItems.length-1].classList)this.iconBoxItems[this.iconBoxItems.length-1].classList.add("last")}imgSrc;imgSrcSet=null;largeScreenBP=900;theme="dark";level="top";slotChangeObserver(){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()}HeroContent=()=>[!this.hasIconBox&&this.hasCtas?e("div",{class:"hero__ctas"},e("slot",{name:"secondary-ctas"})):"",e("div",{class:"hero__scrim"},e("slot",{name:"scrim"})),e("nano-grid",{class:"hero__content",xlCols:2,xlSize:this.largeScreenBP},e("div",{"grid-states":"xl-col-span-2"},e("div",{class:"hero__breadcrumbs"},e("slot",{name:"breadcrumb"}))),e("div",{"grid-states":this.hasSecondaryContent?"xl-col-span-1 xl-col-start-1 xl-row-start-2":"xl-col-span-2 xl-col-start-1 xl-row-start-2"},e("div",{class:"hero__primary"},e("div",{class:"hero__primary-content"},e("slot",{name:"back-btn"}),e("div",null,e("slot",{name:"primary-content"}))))),this.hasSecondaryContent&&e("div",{"grid-states":"xl-col-span-1 xl-col-start-2 xl-row-start-2"},e("div",{class:"hero__secondary"},e("slot",{name:"secondary-content"}),this.hasIconBox&&e("div",{class:"hero__icon-box"},e("slot",{name:"icon-box"}),e("slot",{name:"icon-box-item"})),this.hasQuote&&e("div",{class:"hero__quote-content"},e("span",{class:"hero__quote"},e("slot",{name:"quote"})),e("div",{class:"hero__quote-author"},e("slot",{name:"quote-author"}))))))];render(){const n=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";return e(t,{key:"50eee29214f21f5278267bcc742170347e7cf397"},e("div",{key:"8a2ab272547fd2a3627c039e9666a24b6de223c9",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"}},e("div",{key:"8c17aac8b8653355e4ce97fa119d86e0cce518ae",class:"hero__bg-wrap"},!!this.imgSrc&&e("nano-img",{key:"89df34f9d693a35df5f2092ef3232772caa860a1",class:"hero__img",lazy:false,background:true,srcSet:this.imgSrcSet,src:this.imgSrc},e(this.HeroContent,{key:"dc4d9b0027cfc96f13ff7757e175da523b3eb100"})),!this.imgSrc&&[e("div",{key:"1e760a079ebcaab5272a10fdb7b70aa3622ce0db",class:"hero__bg-slot"},e("slot",{key:"3a73a260e528956adc797cdd39bb521c54db7b96",name:"background"})),e(this.HeroContent,{key:"dd458de1ca33a34131445390b95bf63bb27dfeba"})])))}static get watchers(){return{breadCrumbs:["breadCrumbChange"],iconBoxItems:["iconBoxItemChange"]}}};a.style=r;export{a as nano_hero};
+import{r as n,g as o,a as e}from"./index-6cc72cd9.js";import{h as t}from"./renderer-4bc3e2dc.js";const i=":host {\n  box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n: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:host {\n  /**\n   * @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n   * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n   * @prop --theme-color: Text color. Default depends on theme;\n   * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #90c6e7;\n   * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n   * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n   * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n   * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n   * @prop --quote-size: Font size of the quote. Defaults to 1.3em and grows to 3rem on the xl breakpoint;\n  */\n  --nano-loader-base: #4a4a4a;\n  --nano-loader-tint: #7d7d7d;\n  --theme-color: #fff;\n  --theme-tint-color: #90c6e7;\n  --scrim-color: 0 0 0;\n  --scrim-direction: 90deg;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 0.7;\n  --padding: 0;\n  --quote-size: 1.3rem;\n  color: var(--theme-color);\n  display: block;\n  container-type: inline-size;\n}\n\n:host([theme=light]) {\n  --nano-loader-base: #fff;\n  --nano-loader-tint: white;\n  --theme-color: #4a4a4a;\n  --scrim-color: 255 255 255;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 1;\n  --scrim-direction: 270deg;\n  color: var(--theme-color);\n}\n:host([theme=light]) .hero__primary-content {\n  --color: #4a4a4a;\n}\n\n.hero {\n  position: relative;\n}\n@container (min-width: 800px) {\n  .hero {\n    --quote-size: 3rem;\n  }\n}\n.hero--rtl {\n  --scrim-direction: 270deg;\n}\n.hero--secondary:not(.hero--iconbox) {\n  --scrim-direction: 0deg;\n}\n.hero__bg-wrap {\n  overflow: hidden;\n}\n.hero__bg-slot {\n  position: absolute;\n  inset: 0;\n}\n.hero__ctas {\n  display: flex;\n  justify-content: flex-end;\n  padding-block: 32px 0;\n  padding-inline: 32px;\n  margin-block-end: -64px;\n  position: relative;\n  z-index: 1;\n}\n@media (width <= 52em) {\n  .hero__ctas {\n    display: none;\n  }\n}\n@media (width <= 58em) {\n  .hero__ctas {\n    margin-block-end: -48px;\n  }\n}\n.hero__ctas ::slotted(a.button[slot=secondary-ctas]) {\n  padding-inline: 0.5rem !important;\n  font-size: 0.875rem !important;\n  margin-block: 0 !important;\n  margin-inline: 0.25rem !important;\n}\n.hero__img {\n  display: block;\n  --padding: inherit;\n}\n.hero__breadcrumbs {\n  display: none;\n  margin-block: 20px 0;\n  margin-inline: 14px;\n  line-height: 14px;\n}\n.hero--breadcrumb .hero__breadcrumbs {\n  display: block;\n}\n@container (min-width: 800px) {\n  .hero__breadcrumbs {\n    margin-block: 0;\n    margin-inline: 50px;\n    max-inline-size: 50%;\n  }\n}\n@container (min-width: 900px) {\n  .hero__breadcrumbs {\n    margin-block: 0;\n    margin-inline: 83px;\n  }\n}\n.hero__breadcrumbs ::slotted(*[slot=breadcrumb]) {\n  font-size: 0.85rem;\n  text-transform: uppercase;\n  letter-spacing: 1.5px;\n  font-weight: 600;\n  font-stretch: 125%;\n  display: inline-block;\n  margin-block-end: 16px;\n  position: relative;\n  z-index: 2;\n}\n.hero--hasbg .hero__breadcrumbs ::slotted(*[slot=breadcrumb]) {\n  text-shadow: 1px 1px rgba(0, 0, 0, 0.15);\n}\n.hero__breadcrumbs ::slotted(a[slot=breadcrumb]) {\n  color: var(--theme-tint-color) !important;\n  cursor: pointer;\n}\n.hero__breadcrumbs ::slotted(.slash[slot=breadcrumb]) {\n  color: var(--theme-color);\n  position: relative;\n  margin-block: 0;\n  margin-inline: 0.5rem;\n  display: inline-block;\n}\n.hero__scrim {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  background: linear-gradient(var(--scrim-direction), rgb(var(--scrim-color)/var(--scrim-opacity-from)) 0%, rgb(var(--scrim-color)/var(--scrim-opacity-to)) 100%);\n}\n.hero--scrim .hero__scrim {\n  background: none;\n}\n.hero__content {\n  max-inline-size: 1440px;\n  display: block;\n  --grid-row-gap: 0;\n  margin-block: 0;\n  margin-inline: auto;\n  position: relative;\n}\n@container (min-width: 800px) {\n  .hero__content {\n    margin-block: 50px 0 !important;\n    max-inline-size: 1540px !important;\n  }\n}\n@container (min-width: 900px) {\n  .hero__content {\n    margin-block: 83px 0 !important;\n    max-inline-size: 1606px !important;\n  }\n}\n.hero__primary {\n  margin: 16px;\n}\n.hero--breadcrumb .hero__primary {\n  margin-block: 0;\n  margin-inline: 16px;\n}\n.hero--backbtn .hero__primary {\n  margin-inline-start: 0;\n}\n.hero__primary ::slotted(.nano-icon-button[slot=back-btn]) {\n  font-size: 2rem;\n}\n@container (min-width: 800px) {\n  .hero__primary {\n    margin-block: 0 50px !important;\n    margin-inline: 50px 0 !important;\n  }\n  .hero__primary ::slotted(.nano-icon-button[slot=back-btn]) {\n    margin-block: 0 !important;\n    margin-inline: -3rem 0 !important;\n  }\n}\n@container (min-width: 900px) {\n  .hero__primary {\n    margin-block: 0 83px !important;\n    margin-inline: 83px 0 !important;\n  }\n}\n.hero__primary-content {\n  max-inline-size: 45rem;\n  --color: #fff;\n  display: flex;\n}\n.hero--backbtn .hero__primary-content > div {\n  padding-block: 10px 0;\n  padding-inline: 0;\n}\n.hero__primary-content ::slotted(h1[slot=primary-content]) {\n  line-height: 26px !important;\n  margin-block: 0 18px !important;\n  font-size: 2rem !important;\n}\n@container (min-width: 800px) {\n  .hero__primary-content ::slotted(h1[slot=primary-content]) {\n    line-height: 31px !important;\n    margin-block-end: 30px !important;\n  }\n  .hero__primary-content ::slotted(.button[slot=primary-content]) {\n    margin-block-start: 20px !important;\n  }\n}\n.hero__secondary {\n  display: none;\n  block-size: 100%;\n  padding-block: 0 20px;\n  padding-inline: 14px;\n}\n.hero--secondary .hero__secondary {\n  display: flex;\n  align-items: center;\n}\n@container (min-width: 800px) {\n  .hero__secondary {\n    padding-block: 0 50px;\n    padding-inline: 50px;\n    justify-content: flex-end;\n  }\n}\n@container (min-width: 900px) {\n  .hero__secondary {\n    padding-block: 0 83px;\n    padding-inline: 83px;\n  }\n}\n.hero__icon-box {\n  background: rgba(0, 0, 0, 0.7);\n  padding: 24px;\n  inline-size: 100%;\n  margin-block-end: auto;\n  display: flex;\n  flex-direction: column;\n  color: white;\n}\n@container (min-width: 800px) {\n  .hero__icon-box {\n    max-inline-size: 410px;\n    flex: 0 1 410px;\n  }\n}\n.hero__icon-box ::slotted([slot=icon-box-item]) {\n  --nano-color-base: var(--theme-tint-color);\n  --nano-icon-size: 32px;\n  --nano-icon-margin-end: 20px;\n  display: flex;\n  align-items: center;\n  font-size: 0.8125rem;\n  margin-block-end: 20px;\n}\n.hero__icon-box ::slotted(.last[slot=icon-box-item]) {\n  margin-block-end: 0;\n}\n.hero__quote-content {\n  margin-block-start: auto;\n  text-align: center;\n  inline-size: 100%;\n}\n@container (min-width: 800px) {\n  .hero__quote-content {\n    max-inline-size: 500px;\n    flex: 0 1 500px;\n    text-align: initial;\n  }\n}\n.hero__quote::before, .hero__quote::after {\n  content: '\"';\n  font-size: var(--quote-size);\n  font-weight: 600;\n  font-style: italic;\n  line-height: 0;\n  color: #abb6b8;\n  display: inline;\n  position: relative;\n}\n.hero__quote ::slotted([slot=quote]) {\n  font-size: var(--quote-size);\n  font-weight: 200;\n  display: inline;\n}\n.hero__quote-author {\n  text-align: end;\n  font-size: 1rem;\n  opacity: 0.8;\n}\n@container (min-width: 800px) {\n  .hero--sub .hero__content {\n    margin-block-start: 40px;\n  }\n  .hero--sub .hero__content .hero__primary {\n    margin-block: 0 40px;\n    margin-inline: 50px 0;\n  }\n  .hero--sub .hero__content .hero__secondary {\n    padding-block: 0 50px;\n    padding-inline: 40px 50px;\n  }\n  .hero--sub .hero__content ::slotted(.button[slot=primary-content]) {\n    margin-block-start: 8px !important;\n  }\n  .hero--sub .hero__content ::slotted(h1[slot=primary-content]) {\n    margin-block-end: 18px !important;\n  }\n}\n@container (min-width: 900px) {\n  .hero--sub .hero__content .hero__primary {\n    margin-block: 0 40px;\n    margin-inline: 83px 0;\n  }\n  .hero--sub .hero__content .hero__secondary {\n    padding-block: 0 83px;\n    padding-inline: 40px 83px;\n  }\n}";const r=i;const a=class{constructor(o){n(this,o)}mo;get host(){return o(this)}hasIconBox;hasScrim;hasSecondaryContent;hasQuote;hasBg;hasBackBtn;hasCtas;breadCrumbs;breadCrumbChange(){this.breadCrumbs.filter((n=>n.tagName==="A"&&!n.nextElementSibling.classList.contains("slash"))).forEach((n=>{n.insertAdjacentHTML("afterend",'<span slot="breadcrumb" class="slash">/</span>')}))}iconBoxItems;iconBoxItemChange(){this.iconBoxItems.forEach((n=>n.classList.remove("last")));if(this.iconBoxItems[this.iconBoxItems.length-1]&&this.iconBoxItems[this.iconBoxItems.length-1].classList)this.iconBoxItems[this.iconBoxItems.length-1].classList.add("last")}imgSrc;imgSrcSet=null;largeScreenBP=900;theme="dark";level="top";slotChangeObserver(){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()}HeroContent=()=>[!this.hasIconBox&&this.hasCtas?t("div",{class:"hero__ctas"},t("slot",{name:"secondary-ctas"})):"",t("div",{class:"hero__scrim"},t("slot",{name:"scrim"})),t("nano-grid",{class:"hero__content",xlCols:2,xlSize:this.largeScreenBP},t("div",{"grid-states":"xl-col-span-2"},t("div",{class:"hero__breadcrumbs"},t("slot",{name:"breadcrumb"}))),t("div",{"grid-states":this.hasSecondaryContent?"xl-col-span-1 xl-col-start-1 xl-row-start-2":"xl-col-span-2 xl-col-start-1 xl-row-start-2"},t("div",{class:"hero__primary"},t("div",{class:"hero__primary-content"},t("slot",{name:"back-btn"}),t("div",null,t("slot",{name:"primary-content"}))))),this.hasSecondaryContent&&t("div",{"grid-states":"xl-col-span-1 xl-col-start-2 xl-row-start-2"},t("div",{class:"hero__secondary"},t("slot",{name:"secondary-content"}),this.hasIconBox&&t("div",{class:"hero__icon-box"},t("slot",{name:"icon-box"}),t("slot",{name:"icon-box-item"})),this.hasQuote&&t("div",{class:"hero__quote-content"},t("span",{class:"hero__quote"},t("slot",{name:"quote"})),t("div",{class:"hero__quote-author"},t("slot",{name:"quote-author"}))))))];render(){const n=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";return t(e,{key:"3ea826a0e3c29d25595e2ed95b36398980193ade",class:"nano-hero"},t("div",{key:"09b08515b8bd244eef354df64e76814ec7fbda6d",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",{key:"46b5daff7c9c768c5354b54a1dd9f8ca8b9fc100",class:"hero__bg-wrap"},!!this.imgSrc&&t("nano-img",{key:"0bc5e85862297cbd10bb4953c545eaccfde46d34",class:"hero__img",lazy:false,background:true,srcSet:this.imgSrcSet,src:this.imgSrc},t(this.HeroContent,{key:"96a6199bb1c851b70cbc146b25d722f3c7c7cfbb"})),!this.imgSrc&&[t("div",{key:"b34f8983859f55762fddd7ebadd95b2db6d96f7a",class:"hero__bg-slot"},t("slot",{key:"df7263acd2610a142fe492555b77e6d24bd382a4",name:"background"})),t(this.HeroContent,{key:"c02cbdf49f60dc755c3103f84df6e1de82b3a7ce"})])))}static get watchers(){return{breadCrumbs:["breadCrumbChange"],iconBoxItems:["iconBoxItemChange"]}}};a.style=r;export{a as nano_hero};
 //# sourceMappingURL=nano-hero.entry.js.map

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

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

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

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,g as o,h as i,a as n,c as e}from"./index-3118109b.js";import{f as r}from"./focus-visible-e5f02c46.js";import{P as s}from"./popover-30ce6cac.js";const a=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-border-radius-medium, 4px);--active-color:#005c75;--hover-color:#007495;--nano-color-base:var(--color, #687576);--background:transparent;--padding:var(--nano-spacing-small, 8px);--box-shadow:none;--button-bg:var(--background);border-radius:var(--border-radius);display:inline-block}.icon-button{flex:0 0 auto;display:flex;align-items:center;border:none;border-radius:inherit;background:var(--button-bg);font-size:inherit;color:var(--color);padding:var(--padding);cursor:pointer;appearance:none;transition:box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;box-shadow:var(--box-shadow)}.icon-button:hover:not(.icon-button--disabled),.icon-button:focus:not(.icon-button--disabled){color:var(--hover-color);--nano-color-base:var(--hover-color)}.icon-button:active:not(.icon-button--disabled){color:var(--active-color);--nano-color-base:var(--active-color)}.icon-button:focus{outline:none}.icon-button__label{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.icon-button--disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.focus-visible.icon-button:focus{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";const l=a;const p=class{constructor(o){t(this,o)}button;get host(){return o(this)}iconName;iconSrc;type="button";name;value;label;showTooltip=false;disabled=false;href;rel;target;form;async setFocus(){this.button.focus()}findForm(){const{form:t,host:o}=this;if(!t)return o.closest("form");if(t instanceof HTMLFormElement){return t}if(typeof t==="string"){const o=document.getElementById(t);if(o instanceof HTMLFormElement){return o}}return null}handleClick=t=>{if(this.type==="button")return;const o=this.findForm();if(o){t.preventDefault();const i=document.createElement("button");i.type=this.type;i.style.display="none";o.appendChild(i);i.click();i.remove()}};componentDidLoad(){r.observe(this.button)}connectedCallback(){if(this.button)r.observe(this.button)}disconnectedCallback(){r.unobserve(this.button)}content(){const t=this.href===undefined?"button":"a";return i(t,{onClick:this.handleClick,part:"base",ref:t=>this.button=t,class:{"icon-button":true,"icon-button--disabled":this.disabled},name:this.name,value:this.value,href:this.href||undefined,target:this.href&&this.target?this.target:undefined,rel:this.rel||undefined,type:!this.href&&this.type?this.type:undefined},i("span",{class:"icon-button__label"},this.label),i("nano-icon",{name:this.iconName,src:this.iconSrc,"aria-hidden":"true",lazy:false,part:"icon"}))}render(){if(this.showTooltip){return i(n,{"aria-disabled":this.disabled?"true":null},i("nano-tooltip",{content:this.label},this.content()))}return i(n,{"aria-disabled":this.disabled?"true":null},this.content())}};p.style=l;const d=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--max-width:20rem;--hide-delay:0.125s;--hide-duration:0.125s;--hide-timing-function:ease;--show-delay:0.125s;--show-duration:0.125s;--show-timing-function:ease;--background:var(--nano-tooltip-bg-color, #4a4a4a);--color:var(--nano-tooltip-color, #fff);display:contents}.tooltip{max-inline-size:var(--max-width);border-radius:var(--nano-tooltip-border-radius, var(--nano-border-radius-small, 2px));background-color:var(--background);font-size:var(--nano-fontsize-small, 0.875rem);line-height:1.5;color:var(--color);opacity:0;padding:var(--nano-tooltip-padding, var(--nano-spacing-xsmall, 4px) var(--nano-spacing-small, 8px));transform:translateY(10px) translateZ(0);transform-origin:bottom;transition:opacity, transform var(--hide-duration) var(--hide-timing-function) var(--hide-delay);white-space:normal}.tooltip-arrow{content:"";position:absolute;inline-size:0;block-size:0;color:var(--background);transition:0.2s ease transform}.tooltip-positioner{position:absolute;z-index:var(--nano-layer-index-tooltip, 1000);border:0;background:none;padding:0;overflow:visible;color:unset}.tooltip-positioner::backdrop{display:none}.tooltip-positioner[popover],.tooltip-positioner:popover-open{inset:unset}.tooltip-positioner .tooltip{transition-delay:var(--show-delay);transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.tooltip-positioner[data-popper-placement^=top] .tooltip{transform-origin:bottom;transform:translateY(-10px) translateZ(0)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;transform:none}.tooltip-positioner[data-popper-placement^=bottom] .tooltip-arrow{inset-block-end:100%;inset-inline-start:calc(50% - 5px);border-block-end:5px solid;border-inline-start:5px solid transparent;border-inline-end:5px solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip-arrow{inset-inline-start:5px}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip-arrow{inset-inline:auto 5px}.tooltip-positioner[data-popper-placement^=top] .tooltip-arrow{inset-block-start:100%;inset-inline-start:calc(50% - 5px);border-block-start:5px solid;border-inline-start:5px solid transparent;border-inline-end:5px solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip-arrow{inset-inline-start:5px}.tooltip-positioner[data-popper-placement=top-end] .tooltip-arrow{inset-inline:auto 5px}.tooltip-positioner[data-popper-placement^=left] .tooltip-arrow{inset-block-start:calc(50% - 5px);inset-inline-start:100%;border-inline-start:5px solid;border-block-start:5px solid transparent;border-block-end:5px solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip-arrow{inset-block-start:5px}.tooltip-positioner[data-popper-placement=left-end] .tooltip-arrow{inset-block:auto 5px}.tooltip-positioner[data-popper-placement^=right] .tooltip-arrow{inset-block-start:calc(50% - 5px);inset-inline-end:100%;border-inline-end:5px solid;border-block-start:5px solid transparent;border-block-end:5px solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip-arrow{inset-block-start:5px}.tooltip-positioner[data-popper-placement=right-end] .tooltip-arrow{inset-block:auto 5px}';const c=d;const h=class{constructor(o){t(this,o);this.nanoShow=e(this,"nanoShow",7);this.nanoAfterShow=e(this,"nanoAfterShow",7);this.nanoHide=e(this,"nanoHide",7);this.nanoAfterHide=e(this,"nanoAfterHide",7)}isVisible=false;popover;tooltipPositioner;tooltip;_target;get target(){return this._target}set target(t){if(t!==this._target&&this._target){this._target.removeAttribute("aria-label")}t.setAttribute("aria-label",this.label);this._target=t}label="";get host(){return o(this)}content="";setLabel(){const t=Array.from(this.host.querySelectorAll('[slot="content"]'));const o=t.map((t=>t.textContent)).join(" ").trim();if(!this.target){this.target=this.getTarget();if(!this.target)return}this.label=o||this.content;this.target.setAttribute("aria-label",this.label)}placement="top";disabled=false;distance=10;open=false;skidding=0;hoist=false;trigger="hover focus";handleOpenChange(){if(this.open)this.show();else this.hide()}nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;async show(){if(this.isVisible||this.disabled){return}const t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;return}this.isVisible=true;this.open=true;if(typeof this.tooltipPositioner?.showPopover==="function"){this.hoist=true;this.popover.show();this.tooltipPositioner.showPopover()}else{this.popover.show()}}async hide(){if(!this.isVisible){return}const t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return}this.isVisible=false;this.open=false;this.popover.hide();setTimeout((()=>{if(!this.open&&typeof this.tooltipPositioner?.hidePopover==="function"){this.tooltipPositioner.hidePopover()}}),300)}getTarget(){const t=[...Array.from(this.host.children)].find((t=>t.tagName.toLowerCase()!=="style"&&t.getAttribute("slot")!=="content"));if(!t){throw new Error("Invalid tooltip target: no child element was found.")}return t}hasTrigger(t){const o=this.trigger.split(" ");return o.includes(t)}syncOptions(){this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.tooltip,onAfterHide:()=>this.nanoAfterHide.emit(),onAfterShow:()=>this.nanoAfterShow.emit()})}handleBlur=()=>{if(this.hasTrigger("focus")){this.hide()}};handleClick=()=>{if(this.hasTrigger("click")){if(this.open)this.hide();else this.show()}};handleFocus=()=>{if(this.hasTrigger("focus")){this.show()}};handleKeyDown=t=>{if(this.open&&t.key==="Escape"){t.stopPropagation();this.hide()}};handleMouseOver=()=>{if(this.hasTrigger("hover")){this.show()}};handleMouseOut=()=>{if(this.hasTrigger("hover")){this.hide()}};handleSlotChange=()=>{this.target=this.getTarget()};componentDidLoad(){this.target=this.getTarget();this.popover=new s(this.target,this.tooltipPositioner);this.syncOptions();this.setLabel();this.tooltipPositioner.hidden=!this.open;if(this.open){this.show()}}componentDidUpdate(){this.syncOptions()}disconnectedCallback(){if(this.popover)this.popover.destroy()}render(){return i(n,{key:"24bcb9c2e705abc82a3a3c6f53d1a9ac4c38bd2a",onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onMouseOut:this.handleMouseOut,onBlur:this.handleBlur,onFocus:this.handleFocus,onClick:this.handleClick},i("slot",{key:"50f175c4b6090ec769a4ea9d06cd23be521a01e3",onSlotchange:this.handleSlotChange}),i("div",{key:"6413a83c5416cca23af4c0e856c7dc63b9d0fd6b",ref:t=>this.tooltipPositioner=t,class:"tooltip-positioner",popover:"manual"},i("div",{key:"99cd8748322e5aae2f04160359bbe9521914ca92",part:"base",ref:t=>this.tooltip=t,class:{tooltip:true,"tooltip--open":this.open},role:"tooltip","aria-hidden":this.open?"false":"true"},i("slot",{key:"e7b096bfb90f18f0b7a440c6680e00d5bb547c4a",name:"content",onSlotchange:()=>this.setLabel()},this.content),i("div",{key:"96cc982fde977a2c65bd877a7b1cd894c89e9bad",class:"tooltip-arrow","data-popper-arrow":true}))))}static get watchers(){return{content:["setLabel"],open:["handleOpenChange"]}}};h.style=c;export{p as nano_icon_button,h as nano_tooltip};
+import{r as t,g as o,h as i,a as n,c as e}from"./index-6cc72cd9.js";import{f as r}from"./focus-visible-e5f02c46.js";import{h as s}from"./renderer-4bc3e2dc.js";import{P as a}from"./popover-30ce6cac.js";const l=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-border-radius-medium, 4px);--active-color:#005c75;--hover-color:#007495;--nano-color-base:var(--color, #687576);--background:transparent;--padding:var(--nano-spacing-small, 8px);--box-shadow:none;--button-bg:var(--background);border-radius:var(--border-radius);display:inline-block}.icon-button{flex:0 0 auto;display:flex;align-items:center;border:none;border-radius:inherit;background:var(--button-bg);font-size:inherit;color:var(--color);padding:var(--padding);cursor:pointer;appearance:none;transition:box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;box-shadow:var(--box-shadow)}.icon-button:hover:not(.icon-button--disabled),.icon-button:focus:not(.icon-button--disabled){color:var(--hover-color);--nano-color-base:var(--hover-color)}.icon-button:active:not(.icon-button--disabled){color:var(--active-color);--nano-color-base:var(--active-color)}.icon-button:focus{outline:none}.icon-button__label{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.icon-button--disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.focus-visible.icon-button:focus{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";const p=l;const d=class{constructor(o){t(this,o)}button;get host(){return o(this)}iconName;iconSrc;type="button";name;value;label;showTooltip=false;disabled=false;href;rel;target;form;async setFocus(){this.button.focus()}findForm(){const{form:t,host:o}=this;if(!t)return o.closest("form");if(t instanceof HTMLFormElement){return t}if(typeof t==="string"){const o=document.getElementById(t);if(o instanceof HTMLFormElement){return o}}return null}handleClick=t=>{if(this.type==="button")return;const o=this.findForm();if(o){t.preventDefault();const i=document.createElement("button");i.type=this.type;i.style.display="none";o.appendChild(i);i.click();i.remove()}};componentDidLoad(){r.observe(this.button)}connectedCallback(){if(this.button)r.observe(this.button)}disconnectedCallback(){r.unobserve(this.button)}content(){const t=this.href===undefined?"button":"a";return i(t,{onClick:this.handleClick,part:"base",ref:t=>this.button=t,class:{"icon-button":true,"icon-button--disabled":this.disabled},name:this.name,value:this.value,href:this.href||undefined,target:this.href&&this.target?this.target:undefined,rel:this.rel||undefined,type:!this.href&&this.type?this.type:undefined},i("span",{class:"icon-button__label"},this.label),i("nano-icon",{name:this.iconName,src:this.iconSrc,"aria-hidden":"true",lazy:false,part:"icon"}))}render(){if(this.showTooltip){return i(n,{class:"nano-icon-button","aria-disabled":this.disabled?"true":null},i("nano-tooltip",{content:this.label},this.content()))}return i(n,{class:"nano-icon-button","aria-disabled":this.disabled?"true":null},this.content())}};d.style=p;const c=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--max-width:20rem;--hide-delay:0.125s;--hide-duration:0.125s;--hide-timing-function:ease;--show-delay:0.125s;--show-duration:0.125s;--show-timing-function:ease;--background:var(--nano-tooltip-bg-color, #4a4a4a);--color:var(--nano-tooltip-color, #fff);display:contents}.tooltip{max-inline-size:var(--max-width);border-radius:var(--nano-tooltip-border-radius, var(--nano-border-radius-small, 2px));background-color:var(--background);font-size:var(--nano-fontsize-small, 0.875rem);line-height:1.5;color:var(--color);opacity:0;padding:var(--nano-tooltip-padding, var(--nano-spacing-xsmall, 4px) var(--nano-spacing-small, 8px));transform:translateY(10px) translateZ(0);transform-origin:bottom;transition:opacity, transform var(--hide-duration) var(--hide-timing-function) var(--hide-delay);white-space:normal}.tooltip-arrow{content:"";position:absolute;inline-size:0;block-size:0;color:var(--background);transition:0.2s ease transform}.tooltip-positioner{position:absolute;z-index:var(--nano-layer-index-tooltip, 1000);border:0;background:none;padding:0;overflow:visible;color:unset}.tooltip-positioner::backdrop{display:none}.tooltip-positioner[popover],.tooltip-positioner:popover-open{inset:unset}.tooltip-positioner .tooltip{transition-delay:var(--show-delay);transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.tooltip-positioner[data-popper-placement^=top] .tooltip{transform-origin:bottom;transform:translateY(-10px) translateZ(0)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;transform:none}.tooltip-positioner[data-popper-placement^=bottom] .tooltip-arrow{inset-block-end:100%;inset-inline-start:calc(50% - 5px);border-block-end:5px solid;border-inline-start:5px solid transparent;border-inline-end:5px solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip-arrow{inset-inline-start:5px}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip-arrow{inset-inline:auto 5px}.tooltip-positioner[data-popper-placement^=top] .tooltip-arrow{inset-block-start:100%;inset-inline-start:calc(50% - 5px);border-block-start:5px solid;border-inline-start:5px solid transparent;border-inline-end:5px solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip-arrow{inset-inline-start:5px}.tooltip-positioner[data-popper-placement=top-end] .tooltip-arrow{inset-inline:auto 5px}.tooltip-positioner[data-popper-placement^=left] .tooltip-arrow{inset-block-start:calc(50% - 5px);inset-inline-start:100%;border-inline-start:5px solid;border-block-start:5px solid transparent;border-block-end:5px solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip-arrow{inset-block-start:5px}.tooltip-positioner[data-popper-placement=left-end] .tooltip-arrow{inset-block:auto 5px}.tooltip-positioner[data-popper-placement^=right] .tooltip-arrow{inset-block-start:calc(50% - 5px);inset-inline-end:100%;border-inline-end:5px solid;border-block-start:5px solid transparent;border-block-end:5px solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip-arrow{inset-block-start:5px}.tooltip-positioner[data-popper-placement=right-end] .tooltip-arrow{inset-block:auto 5px}';const h=c;const b=class{constructor(o){t(this,o);this.nanoShow=e(this,"nanoShow",7);this.nanoAfterShow=e(this,"nanoAfterShow",7);this.nanoHide=e(this,"nanoHide",7);this.nanoAfterHide=e(this,"nanoAfterHide",7)}isVisible=false;popover;tooltipPositioner;tooltip;_target;get target(){return this._target}set target(t){if(t!==this._target&&this._target){this._target.removeAttribute("aria-label")}t.setAttribute("aria-label",this.label);this._target=t}label="";get host(){return o(this)}content="";setLabel(){const t=Array.from(this.host.querySelectorAll('[slot="content"]'));const o=t.map((t=>t.textContent)).join(" ").trim();if(!this.target){this.target=this.getTarget();if(!this.target)return}this.label=o||this.content;this.target.setAttribute("aria-label",this.label)}placement="top";disabled=false;distance=10;open=false;skidding=0;hoist=false;trigger="hover focus";handleOpenChange(){if(this.open)this.show();else this.hide()}nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;async show(){if(this.isVisible||this.disabled){return}const t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;return}this.isVisible=true;this.open=true;if(typeof this.tooltipPositioner?.showPopover==="function"){this.hoist=true;this.popover.show();this.tooltipPositioner.showPopover()}else{this.popover.show()}}async hide(){if(!this.isVisible){return}const t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return}this.isVisible=false;this.open=false;this.popover.hide();setTimeout((()=>{if(!this.open&&typeof this.tooltipPositioner?.hidePopover==="function"){this.tooltipPositioner.hidePopover()}}),300)}getTarget(){const t=[...Array.from(this.host.children)].find((t=>t.tagName.toLowerCase()!=="style"&&t.getAttribute("slot")!=="content"));if(!t){throw new Error("Invalid tooltip target: no child element was found.")}return t}hasTrigger(t){const o=this.trigger.split(" ");return o.includes(t)}syncOptions(){this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.tooltip,onAfterHide:()=>this.nanoAfterHide.emit(),onAfterShow:()=>this.nanoAfterShow.emit()})}handleBlur=()=>{if(this.hasTrigger("focus")){this.hide()}};handleClick=()=>{if(this.hasTrigger("click")){if(this.open)this.hide();else this.show()}};handleFocus=()=>{if(this.hasTrigger("focus")){this.show()}};handleKeyDown=t=>{if(this.open&&t.key==="Escape"){t.stopPropagation();this.hide()}};handleMouseOver=()=>{if(this.hasTrigger("hover")){this.show()}};handleMouseOut=()=>{if(this.hasTrigger("hover")){this.hide()}};handleSlotChange=()=>{this.target=this.getTarget()};componentDidLoad(){this.target=this.getTarget();this.popover=new a(this.target,this.tooltipPositioner);this.syncOptions();this.setLabel();this.tooltipPositioner.hidden=!this.open;if(this.open){this.show()}}componentDidUpdate(){this.syncOptions()}disconnectedCallback(){if(this.popover)this.popover.destroy()}render(){return s(n,{key:"aea96e5f6c3a04be33309614166cde8809501bdd",onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onMouseOut:this.handleMouseOut,onBlur:this.handleBlur,onFocus:this.handleFocus,onClick:this.handleClick,class:"nano-tooltip"},s("slot",{key:"1d35074667f546275cd81875cf49b5de5a9a144f",onSlotchange:this.handleSlotChange}),s("div",{key:"694a19141a36749d393e0db08ce48bfc490e7938",ref:t=>this.tooltipPositioner=t,class:"tooltip-positioner",popover:"manual"},s("div",{key:"8b181e183dff1ab3b1a2253f693f6d62f6a504d2",part:"base",ref:t=>this.tooltip=t,class:{tooltip:true,"tooltip--open":this.open},role:"tooltip","aria-hidden":this.open?"false":"true"},s("slot",{key:"ba3d58a1cab421828b90a880019c334ddd15c40a",name:"content",onSlotchange:()=>this.setLabel()},this.content),s("div",{key:"e254be92d3ca7ff1fc592c6f81a6b4de0185434a",class:"tooltip-arrow","data-popper-arrow":true}))))}static get watchers(){return{content:["setLabel"],open:["handleOpenChange"]}}};b.style=h;export{d as nano_icon_button,b as nano_tooltip};
 //# sourceMappingURL=nano-icon-button_2.entry.js.map