@nanoporetech-digital/components 7.4.4 → 7.5.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,g as i,a as t,r as n,c as s}from"./index-815d3f98.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:p}=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 t=i(e);const r=typeof e[a]==="function"?e[a]():e[a];const c=t.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=p&&p.call(this);e(this);return i}}else{s.render=function(){const i=typeof this[a]==="function"?this[a]():this[a];let n=g.call(this);if(h(n)){c(n,s.constructor.name,i)}else{n=e(t,null,n);if(!("attachShadow"in HTMLElement.prototype)){c(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 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 i in e){if(i in e){if(e[i]===t){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}: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{display:none;background:hsla(204, 80%, 72%, 0.25)}';const p=g;var b=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(t,{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"]}}};b([a({cacheKeyProperty:"cacheKey"}),f("design:type",Object)],u.prototype,"styles",void 0);u.style=p;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 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 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,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};
 //# 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\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    display: none;\n    background: hsl(204deg 80% 72% / 25%);\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":";;;oEAGA,MAAMA,EAAmC,MACvC,IACE,QAAS,IAAIC,a,CACb,MAAOC,GACP,OAAO,K,CAEV,EANwC,GAQzC,MAAMC,EAAiD,IAAIC,Q,SAsB3CC,EACdC,EAAkC,IAElC,MAAO,CAACC,EAA4BC,KAClC,IAAKF,EAAKG,iBAAkB,CAC1BH,EAAKG,iBAAmBD,C,CAG1B,MAAME,kBAAEA,EAAiBC,OAAEA,EAAMC,oBAAEA,GAAwBL,EAC3D,IAAKG,EACHG,QAAQC,KACN,yFAAyFP,EAAOQ,YAAYC,mHAGhH,GAAIhB,EAAkC,CACpC,MAAMiB,EAAiBC,IACrB,IACGA,EAASZ,EAAKG,mBACdN,EAAUgB,IAAID,IACbf,EAAUgB,IAAID,KAAcA,EAASZ,EAAKG,kBAE5C,OAEFN,EAAUiB,IAAIF,EAAUA,EAASZ,EAAKG,mBACtC,MAAMY,EAAOC,EAAWJ,GACxB,MAAMK,SACGL,EAASV,KAAiB,WAC7BU,EAASV,KACTU,EAASV,GACf,MAAMgB,EAAQH,EAAKI,YAAcC,SACjCF,EAAKG,mBAAqB,IACpBH,EAAKG,oBAAsB,GAC/BC,EAAsBV,EAAUX,EAAQgB,EAASjB,GAClD,EAGHC,EAAOG,kBAAoB,WACzB,MAAMmB,EACJnB,GAAqBA,EAAkBoB,KAAKC,MAC9Cd,EAAcc,MACd,OAAOF,C,EAGTtB,EAAOK,oBAAsB,WAC3B,MAAMoB,EACJpB,GAAuBA,EAAoBkB,KAAKC,MAClDd,EAAcc,MACd,OAAOC,C,MAEJ,CACLzB,EAAOI,OAAS,WACd,MAAMY,SACGQ,KAAKvB,KAAiB,WACzBuB,KAAKvB,KACLuB,KAAKvB,GACX,IAAIyB,EAAsBtB,EAAOmB,KAAKC,MAEtC,GAAIG,EAAOD,GAAe,CACxBE,EAAkBF,EAAc1B,EAAOQ,YAAYC,KAAMO,E,KACpD,CACLU,EAAeG,EAACC,EAAI,KAAEJ,GAEtB,KAAM,iBAAkBK,YAAYC,WAAY,CAC9CJ,EAAkBF,EAAc1B,EAAOQ,YAAYC,KAAMO,E,KACpD,CACL,IAAKhB,EAAOiC,qBAAsB,CAChC,MAAMC,EAAQf,SAASgB,cAAc,SACrCD,EAAME,aAAa,OAAQ,YAC3BF,EAAME,aACJ,sBACApC,EAAOQ,YAAYC,MAErByB,EAAMG,UAAYrB,EAClBhB,EAAOiC,qBAAuBC,EAC9Bf,SAASmB,KAAKC,YAAYL,E,GAKhC,OAAOR,C,GAIf,CAEA,SAASE,EAAkBY,EAAMC,EAAYzB,IAC1C0B,EAAgBF,IAAS,IAAIG,KAC5Bd,EAAA,SAAOe,KAAK,WAAU,sBAAsBH,GACzCzB,GAGP,CAEA,SAASK,EACPV,EACAX,EACAgB,EACAjB,GAEA,IAAKC,EAAOiC,qBAAsB,CAChCjC,EAAOiC,qBAAuB,E,CAGhC,MAAMY,EAAMlC,EAASZ,EAAKG,kBAE1B,IAAKF,EAAOiC,qBAAqBY,GAAM,CACrC7C,EAAOiC,qBAAqBY,GAAO,IAAInD,cACvCM,EAAOiC,qBAAqBY,GAAKC,QAAQ9B,E,CAG3C,OAAOhB,EAAOiC,qBAAqBY,EACrC,CAEA,SAASlB,EAAOa,GACd,IAAK,MAAMO,KAAQP,EAAM,CACvB,GAAIO,KAAQP,EAAM,CAChB,GAAIA,EAAKO,KAAUjB,EAAM,CACvB,OAAO,I,GAIb,OAAO,KACT,CAEA,SAASY,EAAgBF,GACvB,IAAK,MAAMO,KAAQP,EAAM,CACvB,GAAIO,KAAQP,EAAM,CAChB,GAAIQ,MAAMC,QAAQT,EAAKO,IAAQ,CAC7B,OAAOP,EAAKO,E,GAIpB,CCrKA,MAAMG,EAAU,ilCAChB,MAAAC,EAAeD,E,ugBCqBFE,EAAI,M,yBACPC,MAKF,GACGC,SAIgBC,MAAyB,IAIzBC,MAAyB,IAIzBC,MAAyB,IAIzBC,OAA0B,IAG1BC,MAGAC,MAGAC,MAGAC,OAGAC,QAGjBC,KAGAC,KAGAC,KAGAC,MAGAC,OAGiBC,WAAsB,MAiB/C,kBAAAC,GACE9C,KAAK6B,MAAQ,GAEb,GAAI7B,KAAKmC,MACPnC,KAAK6B,MAAMV,KAAK,CACd4B,KAAM/C,KAAKmC,MACXa,WAAY,EACZ/D,KAAM,IACNgE,SAAUjD,KAAKwC,OAEnB,GAAIxC,KAAKoC,MACPpC,KAAK6B,MAAMV,KAAK,CACd4B,KAAM/C,KAAKoC,MACXY,WAAYhD,KAAK+B,MACjB9C,KAAM,IACNgE,SAAUjD,KAAKyC,OAEnB,GAAIzC,KAAKqC,MACPrC,KAAK6B,MAAMV,KAAK,CACd4B,KAAM/C,KAAKqC,MACXW,WAAYhD,KAAKgC,MACjB/C,KAAM,IACNgE,SAAUjD,KAAK0C,OAEnB,GAAI1C,KAAKsC,OACPtC,KAAK6B,MAAMV,KAAK,CACd4B,KAAM/C,KAAKsC,OACXU,WAAYhD,KAAKiC,MACjBhD,KAAM,KACNgE,SAAUjD,KAAK2C,QAEnB,GAAI3C,KAAKuC,QACPvC,KAAK6B,MAAMV,KAAK,CACd4B,KAAM/C,KAAKuC,QACXS,WAAYhD,KAAKkC,OACjBjD,KAAM,MACNgE,SAAUjD,KAAK4C,SAGnB5C,KAAK8B,SACH9B,KAAK6B,MACFqB,KAAKC,GAAO,GAAGA,EAAGJ,QAAQI,EAAGH,cAAcG,EAAGF,UAAY,OAC1DG,KAAK,IACR,WACApD,KAAK6C,U,CAGuDQ,OAC9D,KACE,MAAMC,EAAgB,WACpBtD,KAAK6B,MACJqB,KACEC,GAAiB,sCAEhBI,OAAQJ,EAAGH,WAAwB,GAC/BO,OAAOJ,EAAGH,YAAc,EAAI,KAC5BG,EAAGH,0CAEOhD,KAAK8B,qEACkBqB,EAAGlE,yBAEpCkE,EAAGF,SACC,kBAAkBE,EAAGF,YACrB,iCAAiCE,EAAGJ,6BAA6BI,EAAGJ,sEAG1E,IAAIvB,MAAM2B,EAAGJ,OACZG,KAAI,CAACM,EAAGC,KACP,MAAMC,EAAOD,EAAI,EACjB,MAAiB,mCACDzD,KAAK8B,oCAAoCqB,EAAGlE,kBAAkByE,oDACjDP,EAAGlE,kBAAkByE,kDACzBA,qEAET1D,KAAK8B,oCAAoCqB,EAAGlE,iBAAiByE,oDAChDP,EAAGlE,iBAAiByE,qDACrBA,oDAE7B,IAEAN,KAAK,sBACJ,IAAI5B,MAAM,KACT0B,KAAI,CAACM,EAAGC,KACP,MAAMC,EAAOD,EAAI,EACjB,MAAiB,qCACDzD,KAAK8B,oCAAoCqB,EAAGlE,kBAAkByE,sDACjDP,EAAGlE,kBAAkByE,iDAC5BA,yEAEN1D,KAAK8B,oCAAoCqB,EAAGlE,iBAAiByE,sDAChDP,EAAGlE,iBAAiByE,oDACxBA,wDAE1B,IAEAN,KAAK,oBAERpD,KAAK6C,WACS,iCACE7C,KAAK8B,yCAAyCqB,EAAGJ,2FAI7D,8BAKTK,KAAK,YAER,OAAOE,EACJhC,QAAQ,oBAAqB,IAC7BA,QAAQ,UAAW,KACnBA,QAAQ,mBAAoB,MAC5BA,QAAQ,MAAO,GAAG,EAGzB,iBAAA3C,GACEqB,KAAK8C,oB,CAGP,MAAAlE,GACE,OACEyB,EAACC,EAAI,CAAAe,IAAA,4CACHhB,EAAA,OAAAgB,IAAA,2CAAKsC,KAAK,OAAOC,MAAM,OAAM,YAAY5D,KAAK8B,UAC5CzB,EAAA,QAAAgB,IAAA,8CAEDrB,KAAK6C,YACJxC,EAAA,OAAAgB,IAAA,2CACEuC,MAAM,oBACND,KAAK,SAAQ,YACF3D,KAAK8B,UAEf,IAAIN,MAAM,KAAK0B,KAAI,IAClB7C,EAAA,OAAKuD,MAAM,yB,2dAvFyCC,EAAA,CAA/DvF,EAAmB,CAAEI,iBAAkB,a,gEC9I1C,MAAMoF,EAAS,+zDACf,MAAAC,EAAeD,E,MCsBFE,EAAG,M,oKACNC,GACAC,QAA+D,G,0BAI9DC,QACAC,UACAC,UAAqB,MACrBC,UAAoB,KACpBC,KAET,WAAAC,GACExE,KAAKqE,UAAY,MACjBrE,KAAKyE,O,CAKCC,IAGAC,IAER,UAAAC,GACE5E,KAAKuE,KAAOvE,KAAK2E,G,CAKXE,OAER,aAAAC,GACE,IAAK9E,KAAK6E,OAAQ,cAEX7E,KAAKkE,QACZlE,KAAKkE,QAAU,GAEflE,KAAKsE,UAAYtE,KAAK6E,OACnBE,MAAM,KACN7B,KAAK8B,IACJ,MAAO7B,EAAIwB,GAAOK,EAAMD,MAAM,KAAKE,QAAQ9B,GAAOA,EAAG+B,SACrDlF,KAAKkE,QAAQf,GAAM,CAAEwB,IAAKA,EAAKQ,OAAQ,OACvC,OAAOhC,CAAE,IAEVC,KAAK,K,CAIFgC,KAAgB,KAExB,WAAAC,GACE,IAAKrF,KAAKoF,KAAMpF,KAAKsF,M,CAIfC,WAIAC,WAAkC,UAGjCC,gBAGAC,eAGAC,aAED,KAAAlB,GACN,IAAKzE,KAAKuE,MAAQvE,KAAKqE,UAAW,OAClC,IAAKrE,KAAKoF,KAAM,CACdpF,KAAKsF,OACL,M,CAEF,UACUM,SAAmB,aAC3B,yBAA0BA,OAC1B,CACA5F,KAAK6F,WACL7F,KAAKiE,GAAK,IAAI6B,sBAAsBC,IAClC,GAAIA,EAAK,GAAGC,eAAgB,CAC1BhG,KAAKsF,OACLtF,KAAK6F,U,KAIT7F,KAAKiE,GAAGgC,QAAQjG,KAAKV,K,MAChB4G,YAAW,IAAMlG,KAAKsF,QAAQ,I,CAG/B,IAAAA,GACNtF,KAAKoE,UAAYpE,KAAKmG,QACtBnG,KAAKmE,QAAUnE,KAAKuE,KACpBvE,KAAKyF,gBAAgBW,M,CAGfC,OAAS,KACfrG,KAAK0F,eAAeU,OACpBF,YAAW,IAAOlG,KAAKqE,UAAY,MAAO,GAAG,EAGvC8B,QAAU,KAChBnG,KAAK2F,aAAaS,MAAM,EAGlBE,SAAYC,IAClBC,OAAOC,QAAQF,EAAEG,QAAQC,SAAQ,EAAExD,EAAIgC,MACrCnF,KAAKkE,QAAQf,GAAIgC,SAAWA,CAAM,IAIpC,MAAMyB,EAAU,GAChBJ,OAAOK,KAAK7G,KAAKkE,SACd4C,OACAH,SAASxD,IACR,GAAInD,KAAKkE,QAAQf,GAAIgC,OAAQyB,EAAQzF,KAAKnB,KAAKkE,QAAQf,GAAIwB,IAAI,IAGnE,GAAIiC,EAAQ1B,OAAQlF,KAAKuE,KAAOqC,EAAQG,OAAO,GAAG,QAE7C/G,KAAKuE,KAAOvE,KAAK2E,GAAG,EAGnB,QAAAkB,GACN,GAAI7F,KAAKiE,GAAI,CACXjE,KAAKiE,GAAG+C,aACRhH,KAAKiE,GAAKgD,S,EAId,iBAAAC,GACElH,KAAK4E,aACL5E,KAAK8E,gBACL9E,KAAKqF,a,CAGP,gBAAA8B,GACEnH,KAAKyE,O,CAGP,oBAAA2C,GACEpH,KAAK6F,U,CAGP,MAAAjH,GACE,MAAMyI,EAAUrH,KAAKmE,QACjB,CAAE,mBAAoB,OAAOnE,KAAKmE,YAClC,GAEJ,OACE9D,EAAA,OAAAgB,IAAA,2CAAKuC,MAAM,OACTvD,EAAA,iBAAAgB,IAAA,2CAAeuC,MAAM,kBAClB5D,KAAKuF,YACNlF,EAAA,OAAAgB,IAAA,2CACEuC,MAAO,CACL0D,OAAQtH,KAAKqE,UACbkD,QAAS,KACT,YAAavH,KAAKwF,aAAe,SAEnC9E,MAAO2G,GAEPhH,EAAA,QAAAgB,IAAA,8CAGJhB,EAAA,OAAAgB,IAAA,2CACEuC,MAAO,CACL4D,WAAY,KACZF,OAAQtH,KAAKqE,UACboD,KAAMzH,KAAKuF,WACX,YAAavF,KAAKwF,aAAe,WAEnCkC,SAAS,QACT/C,IAAiC3E,KAAKmE,QACtCwD,QAAgDV,UAChDvC,IAAK1E,KAAK0E,IACV2B,OAAQrG,KAAKqG,OACbF,QAASnG,KAAKoE,YAEhB/D,EAAA,uBAAAgB,IAAA,2CACEuC,MAAM,gBACNgE,wBAAyB5H,KAAKsG,SAC9BuB,OAAQ7H,KAAKsE,Y","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","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":[]}

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-815d3f98.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,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};
 //# sourceMappingURL=nano-hero.entry.js.map

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-815d3f98.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-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};
 //# sourceMappingURL=nano-icon-button_2.entry.js.map

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

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{i,r as n,g as o,h as t,a as r}from"./index-815d3f98.js";import{c as s}from"./theme-d553c17a.js";let e;const a=()=>{if(!e){const i=window;i.Nanoicons=i.Nanoicons||{};e=i.Nanoicons.map=i.Nanoicons.map||new Map}return e};const c=i=>{let n=h(i.src);if(n){return n}n=f(i.name,i.icon);if(n){return l(n)}if(i.icon){n=h(i.icon);if(n){return n}}return null};const l=n=>{const o=a().get(n);if(o){return o}return i(`../nano-assets/fontawesome-pro/svgs/${n}.svg`)};const f=(i,n)=>{if(!i&&n&&!d(n)){i=n}if(u(i)){i=p(i)}if(!u(i)||i.trim()===""){return null}const o=i.replace(/[a-z]|-|\/|\d/gi,"");if(o!==""){console.warn("invalid characters in icon name "+i);return null}return i};const h=i=>{if(u(i)){i=i.trim();if(d(i)){return i}}return null};const d=i=>i.length>0&&/(\/|\.)/.test(i);const u=i=>typeof i==="string";const p=i=>i.toLowerCase();const m=i=>{if(i){const n=document.createElement("div");n.innerHTML=i;for(let i=n.childNodes.length-1;i>=0;i--){if(n.childNodes[i].nodeName.toLowerCase()!=="svg"){n.removeChild(n.childNodes[i])}}const o=n.firstElementChild;if(o&&o.nodeName.toLowerCase()==="svg"){const i=o.getAttribute("class")||"";o.setAttribute("class",(i+" sc-nano-icon s-nano-icon svg").trim());if(b(o)){return n.innerHTML}}}return""};const b=i=>{if(i.nodeType===1){if(i.nodeName.toLowerCase()==="script"){return false}for(let n=0;n<i.attributes.length;n++){const o=i.attributes[n].value;if(u(o)&&o.toLowerCase().indexOf("on")===0){return false}}for(let n=0;n<i.childNodes.length;n++){if(!b(i.childNodes[n])){return false}}}return true};const g=new Map;const v=new Map;const y=i=>{let n=v.get(i);if(!n){n=fetch(i).then((n=>{if(n.ok){return n.text().then((n=>{g.set(i,m(n))}))}g.set(i,"")}));v.set(i,n)}return n};const w=":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{--color:var(--nano-color-base, currentcolor);--primary-color:var(--nano-color-tint, currentcolor);--secondary-color:var(--nano-color-shade, currentcolor);--stroke-width:32px;--primary-opacity:0.8;--secondary-opacity:1;--icon-size:var(--nano-icon-size, 1em);--icon-margin-top:var(--nano-icon-margin-top, 0);--icon-margin-end:var(--nano-icon-margin-end, 0);--icon-margin-bottom:var(--nano-icon-margin-bottom, 0);--icon-margin-start:var(--nano-icon-margin-start, 0);display:inline-block;inline-size:var(--icon-size);block-size:var(--icon-size);min-inline-size:var(--icon-size);min-block-size:var(--icon-size);contain:strict;fill:currentcolor;box-sizing:content-box !important;transition:opacity 0.3s ease;color:var(--color);margin-inline:var(--icon-margin-start) var(--icon-margin-end);margin-block:var(--icon-margin-top) var(--icon-margin-bottom)}:host .nanoicon{stroke:currentcolor}.nanoicon-fill-none{fill:none}.nanoicon-stroke-width{stroke-width:32px;stroke-width:var(--stroke-width)}.icon-inner,.nanoicon,svg,.svg{display:block;block-size:100%;inline-size:100%;overflow:visible}:host(.loading){opacity:0}.fa-primary{color:var(--primary-color);opacity:var(--primary-opacity, 1)}.fa-secondary{color:var(--secondary-color);opacity:var(--secondary-opacity) !important}:host(.flip-rtl) .icon-inner{transform:scaleX(-1)}:host(.icon-small){font-size:18px !important}:host(.icon-large){font-size:32px !important}";const z=w;const x=class{constructor(i){n(this,i)}io;get el(){return o(this)}svgContent;isVisible=false;isLoading=true;color;role;ariaLabel;flipRtl;name;src;icon;size;lazy=true;udpateRole(){if(this.ariaLabel)this.role="img";else if(!this.ariaLabel)this.role="presentation"}setAriaLabel(){if(!this.ariaLabel&&!this.el.ariaLabel){if(!this.role||this.role!=="presentation"){const i=f(this.name,this.icon);if(i){this.ariaLabel=i.split("/").slice(-1)[0].replace(/-/g," ")}}}else if(this.role==="presentation"){this.ariaLabel=undefined}}connectedCallback(){this.waitUntilVisible(this.el,"50px",(()=>{this.isVisible=true;this.loadIcon()}))}disconnectedCallback(){if(this.io){this.io.disconnect();this.io=undefined}}componentWillLoad(){this.udpateRole();this.setAriaLabel()}waitUntilVisible(i,n,o){if(this.lazy&&typeof window!=="undefined"&&window.IntersectionObserver){const t=this.io=new window.IntersectionObserver((i=>{if(i[0].isIntersecting||i[1]&&i[1].isIntersecting){t.disconnect();this.io=undefined;o()}}),{rootMargin:n});t.observe(i)}else{o()}}loadIcon(){if(this.isVisible){const i=c(this);if(i){if(g.has(i)){this.svgContent=g.get(i);requestAnimationFrame((()=>this.isLoading=false))}else{y(i).then((()=>{this.svgContent=g.get(i);requestAnimationFrame((()=>this.isLoading=false));this.setAriaLabel()}))}}}}isRtl(){if(this.el.ownerDocument?.dir==="rtl")return true;if(this.el.closest('[dir="rtl"]'))return true;const i=this.el.getRootNode();const n=i.host;if(n&&n.closest('[dir="rtl"]'))return true;return false}render(){const i=this.flipRtl||this.name&&(this.name.indexOf("arrow")>-1||this.name.indexOf("chevron")>-1)&&this.isRtl()&&this.flipRtl!==false;return t(r,{key:"2f552d1b452a5c6a2b3aba09d5eba30e22ba756c",class:{...s(this.color),loading:this.isLoading,[`icon-${this.size}`]:!!this.size,"flip-rtl":!!i}},this.svgContent?t("div",{class:"icon-inner",innerHTML:this.svgContent}):t("div",{class:"icon-inner"}))}static get watchers(){return{ariaLabel:["udpateRole"],role:["setAriaLabel"],name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"]}}};x.style=z;export{x as nano_icon};
+import{i,r as n,g as o,h as t,a as r}from"./index-3118109b.js";import{c as s}from"./theme-d553c17a.js";let e;const a=()=>{if(!e){const i=window;i.Nanoicons=i.Nanoicons||{};e=i.Nanoicons.map=i.Nanoicons.map||new Map}return e};const c=i=>{let n=h(i.src);if(n){return n}n=f(i.name,i.icon);if(n){return l(n)}if(i.icon){n=h(i.icon);if(n){return n}}return null};const l=n=>{const o=a().get(n);if(o){return o}return i(`../nano-assets/fontawesome-pro/svgs/${n}.svg`)};const f=(i,n)=>{if(!i&&n&&!d(n)){i=n}if(u(i)){i=p(i)}if(!u(i)||i.trim()===""){return null}const o=i.replace(/[a-z]|-|\/|\d/gi,"");if(o!==""){console.warn("invalid characters in icon name "+i);return null}return i};const h=i=>{if(u(i)){i=i.trim();if(d(i)){return i}}return null};const d=i=>i.length>0&&/(\/|\.)/.test(i);const u=i=>typeof i==="string";const p=i=>i.toLowerCase();const m=i=>{if(i){const n=document.createElement("div");n.innerHTML=i;for(let i=n.childNodes.length-1;i>=0;i--){if(n.childNodes[i].nodeName.toLowerCase()!=="svg"){n.removeChild(n.childNodes[i])}}const o=n.firstElementChild;if(o&&o.nodeName.toLowerCase()==="svg"){const i=o.getAttribute("class")||"";o.setAttribute("class",(i+" sc-nano-icon s-nano-icon svg").trim());if(b(o)){return n.innerHTML}}}return""};const b=i=>{if(i.nodeType===1){if(i.nodeName.toLowerCase()==="script"){return false}for(let n=0;n<i.attributes.length;n++){const o=i.attributes[n].value;if(u(o)&&o.toLowerCase().indexOf("on")===0){return false}}for(let n=0;n<i.childNodes.length;n++){if(!b(i.childNodes[n])){return false}}}return true};const g=new Map;const v=new Map;const y=i=>{let n=v.get(i);if(!n){n=fetch(i).then((n=>{if(n.ok){return n.text().then((n=>{g.set(i,m(n))}))}g.set(i,"")}));v.set(i,n)}return n};const w=":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{--color:var(--nano-color-base, currentcolor);--primary-color:var(--nano-color-tint, currentcolor);--secondary-color:var(--nano-color-shade, currentcolor);--stroke-width:32px;--primary-opacity:0.8;--secondary-opacity:1;--icon-size:var(--nano-icon-size, 1em);--icon-margin-top:var(--nano-icon-margin-top, 0);--icon-margin-end:var(--nano-icon-margin-end, 0);--icon-margin-bottom:var(--nano-icon-margin-bottom, 0);--icon-margin-start:var(--nano-icon-margin-start, 0);display:inline-block;inline-size:var(--icon-size);block-size:var(--icon-size);min-inline-size:var(--icon-size);min-block-size:var(--icon-size);contain:strict;fill:currentcolor;box-sizing:content-box !important;transition:opacity 0.3s ease;color:var(--color);margin-inline:var(--icon-margin-start) var(--icon-margin-end);margin-block:var(--icon-margin-top) var(--icon-margin-bottom)}:host .nanoicon{stroke:currentcolor}.nanoicon-fill-none{fill:none}.nanoicon-stroke-width{stroke-width:32px;stroke-width:var(--stroke-width)}.icon-inner,.nanoicon,svg,.svg{display:block;block-size:100%;inline-size:100%;overflow:visible}:host(.loading){opacity:0}.fa-primary{color:var(--primary-color);opacity:var(--primary-opacity, 1)}.fa-secondary{color:var(--secondary-color);opacity:var(--secondary-opacity) !important}:host(.flip-rtl) .icon-inner{transform:scaleX(-1)}:host(.icon-small){font-size:18px !important}:host(.icon-large){font-size:32px !important}";const z=w;const x=class{constructor(i){n(this,i)}io;get el(){return o(this)}svgContent;isVisible=false;isLoading=true;color;role;ariaLabel;flipRtl;name;src;icon;size;lazy=true;udpateRole(){if(this.ariaLabel)this.role="img";else if(!this.ariaLabel)this.role="presentation"}setAriaLabel(){if(!this.ariaLabel&&!this.el.ariaLabel){if(!this.role||this.role!=="presentation"){const i=f(this.name,this.icon);if(i){this.ariaLabel=i.split("/").slice(-1)[0].replace(/-/g," ")}}}else if(this.role==="presentation"){this.ariaLabel=undefined}}connectedCallback(){this.waitUntilVisible(this.el,"50px",(()=>{this.isVisible=true;this.loadIcon()}))}disconnectedCallback(){if(this.io){this.io.disconnect();this.io=undefined}}componentWillLoad(){this.udpateRole();this.setAriaLabel()}waitUntilVisible(i,n,o){if(this.lazy&&typeof window!=="undefined"&&window.IntersectionObserver){const t=this.io=new window.IntersectionObserver((i=>{if(i[0].isIntersecting||i[1]&&i[1].isIntersecting){t.disconnect();this.io=undefined;o()}}),{rootMargin:n});t.observe(i)}else{o()}}loadIcon(){if(this.isVisible){const i=c(this);if(i){if(g.has(i)){this.svgContent=g.get(i);requestAnimationFrame((()=>this.isLoading=false))}else{y(i).then((()=>{this.svgContent=g.get(i);requestAnimationFrame((()=>this.isLoading=false));this.setAriaLabel()}))}}}}isRtl(){if(this.el.ownerDocument?.dir==="rtl")return true;if(this.el.closest('[dir="rtl"]'))return true;const i=this.el.getRootNode();const n=i.host;if(n&&n.closest('[dir="rtl"]'))return true;return false}render(){const i=this.flipRtl||this.name&&(this.name.indexOf("arrow")>-1||this.name.indexOf("chevron")>-1)&&this.isRtl()&&this.flipRtl!==false;return t(r,{key:"2f552d1b452a5c6a2b3aba09d5eba30e22ba756c",class:{...s(this.color),loading:this.isLoading,[`icon-${this.size}`]:!!this.size,"flip-rtl":!!i}},this.svgContent?t("div",{class:"icon-inner",innerHTML:this.svgContent}):t("div",{class:"icon-inner"}))}static get watchers(){return{ariaLabel:["udpateRole"],role:["setAriaLabel"],name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"]}}};x.style=z;export{x as nano_icon};
 //# sourceMappingURL=nano-icon.entry.js.map

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

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as n,c as t,g as i,h as a,a as o}from"./index-815d3f98.js";import{c as e}from"./dom-3db2202b.js";import{c as r}from"./theme-d553c17a.js";import{d as s,a as l}from"./throttle-df960210.js";import{F as c,a as p}from"./form-control-53135184.js";const u='.sc-nano-input-h {\n  box-sizing: border-box;\n}\n\n*.sc-nano-input, *.sc-nano-input::before, *.sc-nano-input::after {\n  box-sizing: border-box;\n}\n[hidden].sc-nano-input {\n  display: none !important;\n}\n.sc-nano-input-h {\n  box-sizing: border-box;\n}\n\n*.sc-nano-input, *.sc-nano-input::before, *.sc-nano-input::after {\n  box-sizing: border-box;\n}\n[hidden].sc-nano-input {\n  display: none !important;\n}\n[disabled].sc-nano-input-h:not([disabled=false]) {\n  opacity: 0.5;\n}\n\n.form-ctrl.sc-nano-input {\n  min-inline-size: 100%;\n  display: block;\n}\n.form-ctrl.has-helper-end.sc-nano-input {\n  display: flex;\n  gap: 1rem;\n  container-type: inline-size;\n}\n.form-ctrl.has-helper-end.sc-nano-input .form-ctrl__wrapper.sc-nano-input {\n  flex: 1 1 100%;\n}\n.form-ctrl.has-helper-end.sc-nano-input .form-ctrl__helper-end.sc-nano-input {\n  display: none;\n}\n@container (min-width: 350px) {\n  .form-ctrl.has-helper-end .form-ctrl__helper-end {\n    display: block !important;\n  }\n  .form-ctrl.has-helper-end .form-ctrl__helper {\n    display: none !important;\n  }\n}\n\n.form-ctrl__wrapper.sc-nano-input {\n  display: block;\n}\n\nlabel.sc-nano-input, .form-ctrl__more.sc-nano-input, .form-ctrl__error.sc-nano-input, .form-ctrl__helper.sc-nano-input {\n  display: block;\n  inline-size: 100%;\n  overflow: clip;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\nlabel.visually-hide.sc-nano-input, .form-ctrl__more.visually-hide.sc-nano-input, .form-ctrl__error.visually-hide.sc-nano-input, .form-ctrl__helper.visually-hide.sc-nano-input {\n  clip: rect(1px, 1px, 1px, 1px);\n  clip-path: inset(50%);\n  block-size: 1px;\n  inline-size: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n}\n\n.form-ctrl__float-label.sc-nano-input {\n  padding-block: 0;\n  padding-inline: var(--padding-start) 0;\n  color: var(--label-color);\n  position: absolute;\n  font-size: 1.15em;\n  transform: translateY(-50%);\n  transform-origin: top left;\n  inset-block-start: 50%;\n  transition: all 0.125s ease-in;\n  opacity: 1;\n}\n.has-focus.sc-nano-input-h .form-ctrl__float-label.sc-nano-input, .has-value.sc-nano-input-h .form-ctrl__float-label.sc-nano-input {\n  transform: translateY(-110%);\n  font-size: 0.8em;\n  opacity: 0.7;\n}\n.form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-input-h .form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input, .has-value.sc-nano-input-h .form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input {\n  opacity: 1;\n}\n.form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input {\n  inset-block-start: 50%;\n}\n.has-focus.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input {\n  inset-block-start: 0;\n  transform: translateY(38%);\n}\n.has-value.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input {\n  inset-block-start: 0;\n  transform: translateY(38%);\n}\n\n.form-ctrl__label.sc-nano-input {\n  color: var(--label-color);\n  font-size: var(--label-font-size);\n  padding-block-end: var(--padding-bottom);\n  line-height: 1;\n  display: flex;\n}\n.form-ctrl__label.sc-nano-input .form-ctrl__label-wrap.sc-nano-input {\n  flex: 1;\n  overflow-x: clip;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input {\n  margin-block: unset;\n  margin-inline: 0 5px;\n  opacity: 0;\n  appearance: none;\n  transition: 0.3s ease opacity;\n  font-size: 0.9em;\n}\n.form-ctrl__label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input {\n  margin-block: unset;\n  margin-inline: auto 0;\n  font-size: 0.9em;\n  opacity: 0.5;\n}\n.has-value.sc-nano-input-h .form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input {\n  opacity: 0.5;\n}\n.has-focus.sc-nano-input-h .form-ctrl__label.sc-nano-input {\n  color: var(--label-color--focus);\n}\n.is-invalid.sc-nano-input-h:not([disabled]) .form-ctrl__label.sc-nano-input {\n  color: var(--label-color--invalid);\n}\n\n.has-float-label.sc-nano-input .select__multi-input.sc-nano-input, .has-float-label.sc-nano-input .select__native-input.sc-nano-input, .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input, .has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input, .has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input, .has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input, .has-focus.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input, .has-value.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input {\n  opacity: 1;\n}\n\n.form-ctrl__more.sc-nano-input {\n  block-size: 1em;\n  position: relative;\n  margin-block: 4px var(--padding-bottom);\n  margin-inline: 3px 0;\n}\n\n.form-ctrl__helper.sc-nano-input, .form-ctrl__error.sc-nano-input {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  position: absolute;\n  font-size: var(--invalid-msg-font-size);\n  line-height: 1.2;\n  transition: 0.3s ease-out opacity;\n}\n\n.form-ctrl__helper.sc-nano-input {\n  font-style: italic;\n  color: var(--help-msg-color);\n}\n[show-inline-error].sc-nano-input-h:not([show-inline-error=false]):not([disabled]).is-invalid .form-ctrl__helper.sc-nano-input {\n  opacity: 0;\n}\n\n.form-ctrl__helper-end.sc-nano-input {\n  flex: 1 1 30%;\n  min-inline-size: 150px;\n  font-size: var(--invalid-msg-font-size);\n  color: var(--help-msg-color);\n  font-style: italic;\n}\n\n.form-ctrl__error.sc-nano-input {\n  opacity: 0;\n  color: var(--invalid-msg-color);\n}\n.is-invalid.sc-nano-input-h:not([disabled]) .form-ctrl__error.sc-nano-input {\n  opacity: 1;\n}\n\n.form-ctrl__input.sc-nano-input {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  border-radius: var(--input-border-radius);\n  inline-size: 100%;\n  padding: 0 !important;\n  position: relative;\n  flex: 1 0 auto;\n  display: flex;\n  background: var(--input-bg-color);\n  border: var(--input-border-style);\n  border-width: var(--input-border-width);\n  font-size: var(--input-font-size);\n  padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.has-focus.sc-nano-input-h .form-ctrl__input.sc-nano-input {\n  background: var(--input-bg-color--focus);\n  border: var(--input-border-style--focus);\n  border-width: var(--input-border-width);\n  padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.is-invalid.sc-nano-input-h:not([disabled]) .form-ctrl__input.sc-nano-input {\n  background: var(--input-bg-color--invalid);\n  border: var(--input-border-style--invalid);\n  border-width: var(--input-border-width);\n  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n.is-invalid.has-focus.sc-nano-input-h:not([disabled]) .form-ctrl__input.sc-nano-input {\n  background: var(--input-bg-color--invalid);\n  border: var(--input-border-style--invalid-focus);\n  border-width: var(--input-border-width);\n  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n\n.form-ctrl__input-wrap.sc-nano-input {\n  display: flex;\n  align-items: stretch;\n  flex: 1;\n  max-inline-size: 100%;\n}\n\n.form-ctrl__clear-btn.sc-nano-input, .form-ctrl__slot-end.sc-nano-input, .form-ctrl__slot-start.sc-nano-input, .form-ctrl__slot-value-end.sc-nano-input {\n  --nano-icon-size: 1.4em;\n  margin-block: 0;\n  margin-inline: 0;\n  font-size: 1em;\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  display: flex;\n  align-items: stretch;\n  inline-size: auto;\n}\n\n.has-float-label.sc-nano-input .form-ctrl__slot-start.sc-nano-input {\n  display: none;\n}\n\n.form-ctrl__slot-start.sc-nano-input-s > *, .form-ctrl__slot-start.sc-nano-input-s > *, .form-ctrl__slot-start .sc-nano-input-s > *, .form-ctrl__slot-end.sc-nano-input-s > *, .form-ctrl__slot-end.sc-nano-input-s > *, .form-ctrl__slot-end .sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end .sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input {\n  --nano-icon-size: 1.4em;\n  padding-inline: unset;\n  padding-inline: var(--padding-start) var(--padding-end);\n  font-size: 1em;\n  align-items: center;\n  display: flex;\n  block-size: 100%;\n  z-index: 1;\n}\n.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-input-s > *, .form-ctrl__slot-start .sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-input-s > *, .form-ctrl__slot-end .sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end .sc-nano-input-s > *, [disabled].sc-nano-input-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input {\n  pointer-events: none;\n}\n\n.form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end .sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input {\n  pointer-events: none;\n}\n\n.form-ctrl__clear-btn.sc-nano-input {\n  color: var(--clear-btn-color);\n  padding: 0;\n  opacity: 0;\n  inline-size: 0;\n  appearance: none;\n  align-items: center;\n  overflow: hidden;\n}\n.is-invalid.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input {\n  color: var(--clear-btn-color--invalid);\n}\n.has-value.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input {\n  padding-block: 0;\n  padding-inline: var(--padding-start) var(--padding-end);\n  opacity: 1;\n  inline-size: auto;\n}\n.form-ctrl__clear-btn.sc-nano-input:hover {\n  color: var(--clear-btn-color--hover);\n}\n\n.sc-nano-input-h {\n  \n  --placeholder-color: var(--nano-input-placeholder-color, initial);\n  --placeholder-font-style: var(--nano-input-placeholder-style, initial);\n  --placeholder-font-weight: var(--nano-input-placeholder-weight, initial);\n  --placeholder-opacity: var(--nano-input-placeholder-opacity, 0.5);\n  --padding-top: var(--nano-input-padding-top, var(--nano-input-padding, 8px));\n  --padding-end: var(--nano-input-padding-end, var(--nano-input-padding, 8px));\n  --padding-bottom: var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));\n  --padding-start: var(--nano-input-padding-start, var(--nano-input-padding, 8px));\n  --color-invalid: nano-color(danger, base, , true);\n  --color--focus-rgb:\n    var(\n      --nano-color-base-rgb,\n      nano-color(primary, base, , true)\n    );\n  --input-font-size: var(--nano-input-font-size, 0.87em);\n  --input-text-color: var(--nano-input-text-color, #4a4a4a);\n  --input-border-width: var(--nano-input-border-width, 1px);\n  --input-border-hint-width: 3px;\n  --input-border-color: var(--nano-input-border-color, #e4e6e8);\n  --input-border-radius: var(--nano-input-border-radius, 0);\n  --input-border-style: var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);\n  --input-border-style--focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);\n  --input-border-style--invalid: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);\n  --input-border-style--invalid-focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);\n  --input-bg-color: var(--nano-input-background-color, #fff);\n  --input-bg-color--focus: var(--input-bg-color);\n  --input-bg-color--invalid: var(--nano-input-background-color, white);\n  --invalid-msg-color: rgb(var(--color-invalid) / 100%);\n  --invalid-msg-font-size: var(--nano-input-help-font-size, 0.75em);\n  --help-msg-color: var(--nano-input-help-color, #616d6e);\n  --clear-btn-color: var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));\n  --clear-btn-color--hover: rgb(var(--color--focus-rgb) / 100%);\n  --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);\n  --label-color: var(--nano-input-label-color, "currentcolor");\n  --label-color--focus: var(--label-color);\n  --label-color--invalid: var(--nano-input-label-color-invalid, "currentcolor");\n  --label-font-size: var(--nano-input-label-color, 1em);\n  --multi-input-value-bg: var(--nano-input-tag-bg, 186 220 240);\n  --multi-input-value-text-color: var(--nano-input-tag-color, #455556);\n  --multi-input-value-border: var(--nano-input-tag-color, #badcf0);\n  position: relative;\n  inline-size: 100%;\n  padding: 0 !important;\n  color: currentcolor;\n  display: block;\n}\n\n.nano-color.sc-nano-input-h {\n  color: var(--nano-color-base);\n  --input-border-style--focus:\n    var(--nano-input-border-style, solid) var(\n      --nano-color-tint,\n      var(--nano-color-primary-tint, #2689a5)\n    );\n}\n\n.input__native-ctrl.sc-nano-input {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding-block: 0;\n  padding-inline: var(--padding-start) var(--padding-end);\n  border-radius: var(--input-border-radius);\n  text-overflow: ellipsis;\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  inline-size: 100%;\n  max-inline-size: 100%;\n  max-block-size: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  appearance: none;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  line-height: 2.5em;\n  \n}\n.has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input {\n  line-height: 2.1em;\n  min-block-size: 2.1em;\n  padding-block-start: 1.4em;\n}\n.input__native-ctrl.sc-nano-input::placeholder {\n  color: var(--placeholder-color);\n  font-family: inherit;\n  font-style: var(--placeholder-font-style);\n  font-weight: var(--placeholder-font-weight);\n  opacity: var(--placeholder-opacity);\n  line-height: inherit;\n  min-block-size: initial;\n}\n.input__native-ctrl.sc-nano-input::-moz-placeholder {\n  line-height: 2.8em;\n  text-overflow: ellipsis;\n}\n.input__native-ctrl.sc-nano-input:-webkit-autofill {\n  background-color: transparent;\n}\n.input__native-ctrl.sc-nano-input::-webkit-search-decoration, .input__native-ctrl.sc-nano-input::-webkit-search-cancel-button, .input__native-ctrl.sc-nano-input::-webkit-search-results-button, .input__native-ctrl.sc-nano-input::-webkit-search-results-decoration {\n  appearance: none;\n}\n.input__native-ctrl.sc-nano-input:invalid {\n  box-shadow: none;\n}\n.input__native-ctrl.sc-nano-input::-ms-clear, .input__native-ctrl.sc-nano-input::-ms-reveal {\n  display: none;\n}\n.input__native-ctrl.input__resizable.sc-nano-input {\n  resize: vertical;\n  overflow: auto;\n}\n.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input {\n  line-height: 1.5em;\n  padding-block: var(--padding-top) 0.25em;\n  white-space: pre-wrap;\n}\n.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::placeholder {\n  line-height: 1.5em;\n}\n.has-float-label.sc-nano-input .form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input {\n  padding-block-start: 1.75em;\n}\n[readonly].sc-nano-input-h:not([readonly=false]) .input__native-ctrl.sc-nano-input {\n  -webkit-user-select: none;\n          user-select: none;\n}';const d=u;let h=0;const f=class{nativeInput;inputId=`nano-input-${h++}`;didBlurAfterEdit=false;rtl=false;mo;charCount=0;hasRendered=false;_nativeInputWrap;get nativeInputWrap(){return this._nativeInputWrap}set nativeInputWrap(n){if(this._nativeInputWrap===n)return;this._nativeInputWrap=n;this.setDataListOpts()}constructor(i){n(this,i);this.nanoInput=t(this,"nanoInput",7);this.nanoChange=t(this,"nanoChange",7);this.nanoBlur=t(this,"nanoBlur",7);this.nanoFocus=t(this,"nanoFocus",7);this.nanoDidLoad=t(this,"nanoDidLoad",7);this.nanoDidUnload=t(this,"nanoDidUnload",7);this.nanoValidate=t(this,"nanoValidate",7);this.validate=s(this.validate,50);this.handleBlur=this.handleBlur.bind(this)}hasFocus=false;hasLabelSlot=false;hasHelperSlot=false;hasHelperEndSlot=false;errorMessage="";datalist=null;setDataListOpts(){if(!this.datalist)return;const n=this.datalist.dropDownConfig||{};this.datalist.dropDownConfig={...n,skidding:-1,tetherTo:this.nativeInputWrap}}get el(){return i(this)}get invalid(){return this._invalid}_invalid=false;get validityMessage(){if(!this.nativeInput)return"";return this.nativeInput.validationMessage}color;accept;autocapitalise="none";autocomplete="off";autocorrect="off";autofocus=false;clearInput=false;clearOnEdit;debounce=0;disabled=false;inputmode;validateOn="submitThenDirty";showInlineError=true;label;hideLabel=false;floatLabel=false;max;maxlength;min;minlength;multiple;name=this.inputId;pattern;placeholder;readonly=false;required=false;spellcheck=false;step;size;type="text";form;value="";resize="auto";rows=2;showCharCount=false;shouldValidate(){if(!this.hasRendered)return;requestAnimationFrame((()=>{if(this.validateOn==="dirty")this.validate()}))}valueChanged(){this.nanoChange.emit({value:this.value});this.charCount=this.value?.length||0;if(this.type==="textarea"&&this.resize==="auto"){this.nativeInput.style.height="auto";if(this.value?.length)this.nativeInput.style.height=this.nativeInput.scrollHeight+"px"}requestAnimationFrame((()=>{if(this.validateOn==="dirty")this.validate()}))}debounceChanged(){this.nanoChange=l(this.nanoChange,this.debounce)}nanoInput;nanoChange;nanoBlur;nanoFocus;nanoDidLoad;nanoDidUnload;nanoValidate;async reportValidity(n){return new Promise((t=>{if(n)this.validate();setTimeout((()=>{t({isValid:!this._invalid,errorMessage:this.nativeInput.validationMessage})}),50)}))}async setFocus(){if(this.nativeInput){this.nativeInput.focus();this.nativeInput.click()}}async select(){if(this.nativeInput){this.nativeInput.select()}}getInputElement(){return Promise.resolve(this.nativeInput)}async showError(n){if(this.nativeInput){this.nativeInput.setCustomValidity(n);this.validate()}}onReset(n){const t=this.form?document.querySelector("#"+this.form):this.el.closest("form");if(!t||n.target!==this.el.closest("form"))return;this.value=""}handleBlur(n){if(!this.hasFocus)return;const t=n;let i;requestAnimationFrame((()=>{if(n instanceof KeyboardEvent&&t.key){if(t.key!=="Tab")return;i=document.activeElement}else if(n instanceof FocusEvent){i=document.activeElement}else i=n.target;if(e(this.el.tagName.toLowerCase(),i)!==this.el){this.onBlur()}}))}shouldClearOnEdit(){const{type:n,clearOnEdit:t}=this;return t===undefined?n==="password":t}getValue(){return this.value||""}validate=n=>{if(this.validateOn==="submitThenDirty")this.validateOn="dirty";if(!this.nativeInput.validity.valid){if(this.showInlineError){if(n)n.preventDefault();this.errorMessage=this.nativeInput.validationMessage}this._invalid=true}else this._invalid=false;this.nanoValidate.emit({isValid:!this._invalid,errorMessage:this.nativeInput.validationMessage,originalEvent:n})};onInput=n=>{const t=n.target;this.value=t?.value||"";this.nanoInput.emit(n)};onBlur=()=>{this.hasFocus=false;this.focusChanged();if(this.validateOn==="dirty")this.validate();this.nanoBlur.emit()};onFocus=()=>{this.hasFocus=true;this.focusChanged();this.nanoFocus.emit()};onKeydown=()=>{if(this.shouldClearOnEdit()){if(this.didBlurAfterEdit&&this.hasValue()){this.clearTextInput()}this.didBlurAfterEdit=false}};clearTextInput=n=>{if(this.clearInput&&!this.readonly&&!this.disabled&&n){n.preventDefault();n.stopPropagation()}this.value="";this.nativeInput.value="";const t=new window.Event("change");this.nativeInput.dispatchEvent(t)};focusChanged(){if(!this.hasFocus&&this.shouldClearOnEdit()&&this.hasValue()){this.didBlurAfterEdit=true}}hasValue(){return this.getValue().length>0}slotChangeObserver(){if(this.mo)this.mo.disconnect();const n=this.mo=new MutationObserver((()=>this.processSlottedContent()));n.observe(this.el,{childList:true,subtree:true})}processSlottedContent(){this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]');this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]');this.hasHelperEndSlot=!!this.el.querySelector('[slot="helper-end"]');this.datalist=this.el.querySelector("nano-datalist:not([slot])");if(this.el.querySelector('[slot="inline-button"]')){console.warn("The `inline-button` slot was renamed to `end` in v2 - please update your code",this.el)}}connectedCallback(){this.debounceChanged();{this.el.dispatchEvent(new CustomEvent("nanoDidLoad",{detail:this.el}))}}disconnectedCallback(){{document.dispatchEvent(new CustomEvent("nanoDidUnload",{detail:this.el}))}if(this.mo)this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver();this.hasRendered=true;if(this.autofocus)setTimeout((n=>this.setFocus()),300)}componentWillLoad(){this.processSlottedContent()}render(){const n=this.getValue();const t=this.inputId+"-lbl";const i=this.showInlineError||this.hasHelperSlot?this.inputId+"-more":"";const e=this.hasHelperEndSlot?this.inputId+"-helper":"";this.rtl=this.el.ownerDocument.dir==="rtl";const s=(({el:n,floatLabel:t,label:i,errorMessage:a,type:o,showInlineError:e,hasHelperSlot:r,hasLabelSlot:s,hideLabel:l,placeholder:c,maxlength:p,charCount:u,showCharCount:d,rtl:h,hasHelperEndSlot:f})=>({el:n,floatLabel:t,label:i,errorMessage:a,type:o,showInlineError:e,hasHelperSlot:r,hasLabelSlot:s,hideLabel:l,placeholder:c,maxlength:p,charCount:u,showCharCount:d,rtl:h,hasHelperEndSlot:f}))(this);const l={...s,labelId:t,moreId:i,helperEndId:e,hasValue:this.hasValue(),controlId:this.inputId};const u=(({clearInput:n,readonly:t,disabled:i})=>({clearInput:n,readonly:t,disabled:i,clearControl:this.clearInput}))(this);return a(o,{key:"d3ba5aeef1a8b0dc6d8184a5baf858a80525c907","aria-disabled":this.disabled?"true":null,dir:this.rtl?"rtl":null,class:{...r(this.color),"has-value":this.hasValue(),"has-focus":this.hasFocus,"is-invalid":this._invalid}},a("div",{key:"d8c8488f37aa9474f946d165aa2f91c55886f74f",style:{width:"100%"}},a(c,{key:"50dc939d11a2704aacc6f967670e2945fd063b89",...l},a(p,{key:"fbe48f48485af685c0787dcfdc67a198b9904bd2",...u,onClearText:this.clearTextInput,control:this.el,ref:n=>this.nativeInputWrap=n},this.type!=="textarea"&&a("input",{key:"9851de702e37a25a86ccf1935372ec0b3992e127",id:this.inputId,class:"input__native-ctrl",ref:n=>this.nativeInput=n,"aria-labelledby":t+" "+i+" "+e,disabled:this.disabled,accept:this.accept,autoCapitalize:this.autocapitalise,autoComplete:this.autocomplete,autoCorrect:this.autocorrect,autoFocus:this.autofocus,inputMode:this.inputmode,form:this.form,min:this.min,max:this.max,minLength:this.minlength,maxLength:this.maxlength,multiple:this.multiple,name:this.name,pattern:this.pattern,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,step:this.step,size:this.size,type:this.type,value:n,onInput:this.onInput,onChange:this.onInput,onFocus:this.onFocus,onBlur:this.handleBlur,onKeyDown:this.onKeydown,onInvalid:this.validate}),this.type==="textarea"&&a("textarea",{key:"b0e639724c3458e45854b31dd17e26839737479d",rows:this.floatLabel?1:this.rows,id:this.inputId,class:{"input__native-ctrl":true,input__resizable:this.resize==="true"},ref:n=>this.nativeInput=n,"aria-labelledby":t+" "+i+" "+e,disabled:this.disabled,autoCapitalize:this.autocapitalise,autoCorrect:this.autocorrect,autoFocus:this.autofocus,inputMode:this.inputmode,form:this.form,minLength:this.minlength,maxLength:this.maxlength,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,value:n,onInput:this.onInput,onChange:this.onInput,onFocus:this.onFocus,onKeyDown:this.onKeydown,onInvalid:this.validate,onBlur:this.handleBlur}))),a("slot",{key:"3d2663183a74f118a092ae196855922ab336f43b"})))}static get watchers(){return{datalist:["setDataListOpts"],minlength:["shouldValidate"],maxlength:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],required:["shouldValidate"],disabled:["shouldValidate"],readonly:["shouldValidate"],pattern:["shouldValidate"],inputmode:["shouldValidate"],value:["valueChanged"],debounce:["debounceChanged"]}}};f.style=d;export{f as nano_input};
+import{r as n,c as t,g as i,h as a,a as o}from"./index-3118109b.js";import{c as e}from"./dom-d7f9f24c.js";import{c as r}from"./theme-d553c17a.js";import{d as s,a as l}from"./throttle-df960210.js";import{F as c,a as p}from"./form-control-812999d0.js";const u='.sc-nano-input-h {\n  box-sizing: border-box;\n}\n\n*.sc-nano-input, *.sc-nano-input::before, *.sc-nano-input::after {\n  box-sizing: border-box;\n}\n[hidden].sc-nano-input {\n  display: none !important;\n}\n.sc-nano-input-h {\n  box-sizing: border-box;\n}\n\n*.sc-nano-input, *.sc-nano-input::before, *.sc-nano-input::after {\n  box-sizing: border-box;\n}\n[hidden].sc-nano-input {\n  display: none !important;\n}\n[disabled].sc-nano-input-h:not([disabled=false]) {\n  opacity: 0.5;\n}\n\n.form-ctrl.sc-nano-input {\n  min-inline-size: 100%;\n  display: block;\n}\n.form-ctrl.has-helper-end.sc-nano-input {\n  display: flex;\n  gap: 1rem;\n  container-type: inline-size;\n}\n.form-ctrl.has-helper-end.sc-nano-input .form-ctrl__wrapper.sc-nano-input {\n  flex: 1 1 100%;\n}\n.form-ctrl.has-helper-end.sc-nano-input .form-ctrl__helper-end.sc-nano-input {\n  display: none;\n}\n@container (min-width: 350px) {\n  .form-ctrl.has-helper-end .form-ctrl__helper-end {\n    display: block !important;\n  }\n  .form-ctrl.has-helper-end .form-ctrl__helper {\n    display: none !important;\n  }\n}\n\n.form-ctrl__wrapper.sc-nano-input {\n  display: block;\n}\n\nlabel.sc-nano-input, .form-ctrl__more.sc-nano-input, .form-ctrl__error.sc-nano-input, .form-ctrl__helper.sc-nano-input {\n  display: block;\n  inline-size: 100%;\n  overflow: clip;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\nlabel.visually-hide.sc-nano-input, .form-ctrl__more.visually-hide.sc-nano-input, .form-ctrl__error.visually-hide.sc-nano-input, .form-ctrl__helper.visually-hide.sc-nano-input {\n  clip: rect(1px, 1px, 1px, 1px);\n  clip-path: inset(50%);\n  block-size: 1px;\n  inline-size: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n}\n\n.form-ctrl__float-label.sc-nano-input {\n  padding-block: 0;\n  padding-inline: var(--padding-start) 0;\n  color: var(--label-color);\n  position: absolute;\n  font-size: 1.15em;\n  transform: translateY(-50%);\n  transform-origin: top left;\n  inset-block-start: 50%;\n  transition: all 0.125s ease-in;\n  opacity: 1;\n}\n.has-focus.sc-nano-input-h .form-ctrl__float-label.sc-nano-input, .has-value.sc-nano-input-h .form-ctrl__float-label.sc-nano-input {\n  transform: translateY(-110%);\n  font-size: 0.8em;\n  opacity: 0.7;\n}\n.form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-input-h .form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input, .has-value.sc-nano-input-h .form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input {\n  opacity: 1;\n}\n.form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input {\n  inset-block-start: 50%;\n}\n.has-focus.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input {\n  inset-block-start: 0;\n  transform: translateY(38%);\n}\n.has-value.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input {\n  inset-block-start: 0;\n  transform: translateY(38%);\n}\n\n.form-ctrl__label.sc-nano-input {\n  color: var(--label-color);\n  font-size: var(--label-font-size);\n  padding-block-end: var(--padding-bottom);\n  line-height: 1;\n  display: flex;\n}\n.form-ctrl__label.sc-nano-input .form-ctrl__label-wrap.sc-nano-input {\n  flex: 1;\n  overflow-x: clip;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input {\n  margin-block: unset;\n  margin-inline: 0 5px;\n  opacity: 0;\n  appearance: none;\n  transition: 0.3s ease opacity;\n  font-size: 0.85em;\n}\n.form-ctrl__label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input {\n  margin-block: unset;\n  margin-inline: auto 0;\n  font-size: 0.9em;\n  opacity: 0.5;\n}\n.has-value.sc-nano-input-h .form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input {\n  opacity: 0.5;\n}\n.has-focus.sc-nano-input-h .form-ctrl__label.sc-nano-input {\n  color: var(--label-color--focus);\n}\n.is-invalid.sc-nano-input-h:not([disabled]) .form-ctrl__label.sc-nano-input {\n  color: var(--label-color--invalid);\n}\n\n.has-float-label.sc-nano-input .select__multi-input.sc-nano-input, .has-float-label.sc-nano-input .select__native-input.sc-nano-input, .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input, .has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input, .has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input, .has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input, .has-focus.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input, .has-value.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input {\n  opacity: 1;\n}\n\n.form-ctrl__more.sc-nano-input {\n  block-size: 1em;\n  position: relative;\n  margin-block: 4px var(--padding-bottom);\n  margin-inline: 3px 0;\n}\n\n.form-ctrl__helper.sc-nano-input, .form-ctrl__error.sc-nano-input {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  position: absolute;\n  font-size: var(--invalid-msg-font-size);\n  line-height: 1.2;\n  transition: 0.3s ease-out opacity;\n}\n\n.form-ctrl__helper.sc-nano-input {\n  font-style: italic;\n  color: var(--help-msg-color);\n}\n[show-inline-error].sc-nano-input-h:not([show-inline-error=false]):not([disabled]).is-invalid .form-ctrl__helper.sc-nano-input {\n  opacity: 0;\n}\n\n.form-ctrl__helper-end.sc-nano-input {\n  flex: 1 1 30%;\n  min-inline-size: 150px;\n  font-size: var(--invalid-msg-font-size);\n  color: var(--help-msg-color);\n  font-style: italic;\n}\n\n.form-ctrl__error.sc-nano-input {\n  opacity: 0;\n  color: var(--invalid-msg-color);\n}\n.is-invalid.sc-nano-input-h:not([disabled]) .form-ctrl__error.sc-nano-input {\n  opacity: 1;\n}\n\n.form-ctrl__input.sc-nano-input {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  border-radius: var(--input-border-radius);\n  inline-size: 100%;\n  padding: 0 !important;\n  position: relative;\n  flex: 1 0 auto;\n  display: flex;\n  background: var(--input-bg-color);\n  border: var(--input-border-style);\n  border-width: var(--input-border-width);\n  font-size: var(--input-font-size);\n  padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.has-focus.sc-nano-input-h .form-ctrl__input.sc-nano-input {\n  background: var(--input-bg-color--focus);\n  border: var(--input-border-style--focus);\n  border-width: var(--input-border-width);\n  padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.is-invalid.sc-nano-input-h:not([disabled]) .form-ctrl__input.sc-nano-input {\n  background: var(--input-bg-color--invalid);\n  border: var(--input-border-style--invalid);\n  border-width: var(--input-border-width);\n  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n.is-invalid.has-focus.sc-nano-input-h:not([disabled]) .form-ctrl__input.sc-nano-input {\n  background: var(--input-bg-color--invalid);\n  border: var(--input-border-style--invalid-focus);\n  border-width: var(--input-border-width);\n  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n\n.form-ctrl__input-wrap.sc-nano-input {\n  display: flex;\n  align-items: stretch;\n  flex: 1;\n  max-inline-size: 100%;\n}\n\n.form-ctrl__clear-btn.sc-nano-input, .form-ctrl__slot-end.sc-nano-input, .form-ctrl__slot-start.sc-nano-input, .form-ctrl__slot-value-end.sc-nano-input {\n  --nano-icon-size: 1.4em;\n  margin-block: 0;\n  margin-inline: 0;\n  font-size: 1em;\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  display: flex;\n  align-items: stretch;\n  inline-size: auto;\n}\n\n.has-float-label.sc-nano-input .form-ctrl__slot-start.sc-nano-input {\n  display: none;\n}\n\n.form-ctrl__slot-start.sc-nano-input-s > *, .form-ctrl__slot-start.sc-nano-input-s > *, .form-ctrl__slot-start .sc-nano-input-s > *, .form-ctrl__slot-end.sc-nano-input-s > *, .form-ctrl__slot-end.sc-nano-input-s > *, .form-ctrl__slot-end .sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end .sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input {\n  --nano-icon-size: 1.4em;\n  padding-inline: unset;\n  padding-inline: var(--padding-start) var(--padding-end);\n  font-size: 1em;\n  align-items: center;\n  display: flex;\n  block-size: 100%;\n  z-index: 1;\n}\n.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-input-s > *, .form-ctrl__slot-start .sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-input-s > *, .form-ctrl__slot-end .sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end .sc-nano-input-s > *, [disabled].sc-nano-input-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input {\n  pointer-events: none;\n}\n\n.form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end .sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input {\n  pointer-events: none;\n}\n\n.form-ctrl__clear-btn.sc-nano-input {\n  color: var(--clear-btn-color);\n  padding: 0;\n  opacity: 0;\n  inline-size: 0;\n  appearance: none;\n  align-items: center;\n  overflow: hidden;\n}\n.is-invalid.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input {\n  color: var(--clear-btn-color--invalid);\n}\n.has-value.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input {\n  padding-block: 0;\n  padding-inline: var(--padding-start) var(--padding-end);\n  opacity: 1;\n  inline-size: auto;\n}\n.form-ctrl__clear-btn.sc-nano-input:hover {\n  color: var(--clear-btn-color--hover);\n}\n\n.sc-nano-input-h {\n  \n  --placeholder-color: var(--nano-input-placeholder-color, initial);\n  --placeholder-font-style: var(--nano-input-placeholder-style, initial);\n  --placeholder-font-weight: var(--nano-input-placeholder-weight, initial);\n  --placeholder-opacity: var(--nano-input-placeholder-opacity, 0.5);\n  --padding-top: var(--nano-input-padding-top, var(--nano-input-padding, 8px));\n  --padding-end: var(--nano-input-padding-end, var(--nano-input-padding, 8px));\n  --padding-bottom: var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));\n  --padding-start: var(--nano-input-padding-start, var(--nano-input-padding, 8px));\n  --color-invalid: nano-color(danger, base, , true);\n  --color--focus-rgb:\n    var(\n      --nano-color-base-rgb,\n      nano-color(primary, base, , true)\n    );\n  --input-font-size: var(--nano-input-font-size, 0.87em);\n  --input-text-color: var(--nano-input-text-color, #4a4a4a);\n  --input-border-width: var(--nano-input-border-width, 1px);\n  --input-border-hint-width: 3px;\n  --input-border-color: var(--nano-input-border-color, #e4e6e8);\n  --input-border-radius: var(--nano-input-border-radius, 0);\n  --input-border-style: var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);\n  --input-border-style--focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);\n  --input-border-style--invalid: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);\n  --input-border-style--invalid-focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);\n  --input-bg-color: var(--nano-input-background-color, #fff);\n  --input-bg-color--focus: var(--input-bg-color);\n  --input-bg-color--invalid: var(--nano-input-background-color, white);\n  --invalid-msg-color: rgb(var(--color-invalid) / 100%);\n  --invalid-msg-font-size: var(--nano-input-help-font-size, 0.75em);\n  --help-msg-color: var(--nano-input-help-color, #616d6e);\n  --clear-btn-color: var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));\n  --clear-btn-color--hover: rgb(var(--color--focus-rgb) / 100%);\n  --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);\n  --label-color: var(--nano-input-label-color, "currentcolor");\n  --label-color--focus: var(--label-color);\n  --label-color--invalid: var(--nano-input-label-color-invalid, "currentcolor");\n  --label-font-size: var(--nano-input-label-color, 1em);\n  --multi-input-value-bg: var(--nano-input-tag-bg, 186 220 240);\n  --multi-input-value-text-color: var(--nano-input-tag-color, #455556);\n  --multi-input-value-border: var(--nano-input-tag-color, #badcf0);\n  position: relative;\n  inline-size: 100%;\n  padding: 0 !important;\n  color: currentcolor;\n  display: block;\n}\n\n.nano-color.sc-nano-input-h {\n  color: var(--nano-color-base);\n  --input-border-style--focus:\n    var(--nano-input-border-style, solid) var(\n      --nano-color-tint,\n      var(--nano-color-primary-tint, #2689a5)\n    );\n}\n\n.input__native-ctrl.sc-nano-input {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding-block: 0;\n  padding-inline: var(--padding-start) var(--padding-end);\n  border-radius: var(--input-border-radius);\n  text-overflow: ellipsis;\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  inline-size: 100%;\n  max-inline-size: 100%;\n  max-block-size: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  appearance: none;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  line-height: 2.5em;\n  \n}\n.has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input {\n  line-height: 2.1em;\n  min-block-size: 2.1em;\n  padding-block-start: 1.4em;\n}\n.input__native-ctrl.sc-nano-input::placeholder {\n  color: var(--placeholder-color);\n  font-family: inherit;\n  font-style: var(--placeholder-font-style);\n  font-weight: var(--placeholder-font-weight);\n  opacity: var(--placeholder-opacity);\n  line-height: inherit;\n  min-block-size: initial;\n}\n.input__native-ctrl.sc-nano-input::-moz-placeholder {\n  line-height: 2.8em;\n  text-overflow: ellipsis;\n}\n.input__native-ctrl.sc-nano-input:-webkit-autofill {\n  background-color: transparent;\n}\n.input__native-ctrl.sc-nano-input::-webkit-search-decoration, .input__native-ctrl.sc-nano-input::-webkit-search-cancel-button, .input__native-ctrl.sc-nano-input::-webkit-search-results-button, .input__native-ctrl.sc-nano-input::-webkit-search-results-decoration {\n  appearance: none;\n}\n.input__native-ctrl.sc-nano-input:invalid {\n  box-shadow: none;\n}\n.input__native-ctrl.sc-nano-input::-ms-clear, .input__native-ctrl.sc-nano-input::-ms-reveal {\n  display: none;\n}\n.input__native-ctrl.input__resizable.sc-nano-input {\n  resize: vertical;\n  overflow: auto;\n}\n.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input {\n  line-height: 1.5em;\n  padding-block: var(--padding-top) 0.25em;\n  white-space: pre-wrap;\n}\n.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::placeholder {\n  line-height: 1.5em;\n}\n.has-float-label.sc-nano-input .form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input {\n  padding-block-start: 1.75em;\n}\n[readonly].sc-nano-input-h:not([readonly=false]) .input__native-ctrl.sc-nano-input {\n  -webkit-user-select: none;\n          user-select: none;\n}';const d=u;let h=0;const f=class{nativeInput;inputId=`nano-input-${h++}`;didBlurAfterEdit=false;rtl=false;mo;charCount=0;hasRendered=false;_nativeInputWrap;get nativeInputWrap(){return this._nativeInputWrap}set nativeInputWrap(n){if(this._nativeInputWrap===n)return;this._nativeInputWrap=n;this.setDataListOpts()}constructor(i){n(this,i);this.nanoInput=t(this,"nanoInput",7);this.nanoChange=t(this,"nanoChange",7);this.nanoBlur=t(this,"nanoBlur",7);this.nanoFocus=t(this,"nanoFocus",7);this.nanoDidLoad=t(this,"nanoDidLoad",7);this.nanoDidUnload=t(this,"nanoDidUnload",7);this.nanoValidate=t(this,"nanoValidate",7);this.validate=s(this.validate,50);this.handleBlur=this.handleBlur.bind(this)}hasFocus=false;hasLabelSlot=false;hasHelperSlot=false;hasHelperEndSlot=false;errorMessage="";datalist=null;setDataListOpts(){if(!this.datalist)return;const n=this.datalist.dropDownConfig||{};this.datalist.dropDownConfig={...n,skidding:-1,tetherTo:this.nativeInputWrap}}get el(){return i(this)}get invalid(){return this._invalid}_invalid=false;get validityMessage(){if(!this.nativeInput)return"";return this.nativeInput.validationMessage}color;accept;autocapitalise="none";autocomplete="off";autocorrect="off";autofocus=false;clearInput=false;clearOnEdit;debounce=0;disabled=false;inputmode;validateOn="submitThenDirty";showInlineError=true;label;hideLabel=false;floatLabel=false;max;maxlength;min;minlength;multiple;name=this.inputId;pattern;placeholder;readonly=false;required=false;spellcheck=false;step;size;type="text";form;value="";resize="auto";rows=2;showCharCount=false;shouldValidate(){if(!this.hasRendered)return;requestAnimationFrame((()=>{if(this.validateOn==="dirty")this.validate()}))}valueChanged(){this.nanoChange.emit({value:this.value});this.charCount=this.value?.length||0;if(this.type==="textarea"&&this.resize==="auto"){this.nativeInput.style.height="auto";if(this.value?.length)this.nativeInput.style.height=this.nativeInput.scrollHeight+"px"}requestAnimationFrame((()=>{if(this.validateOn==="dirty")this.validate()}))}debounceChanged(){this.nanoChange=l(this.nanoChange,this.debounce)}nanoInput;nanoChange;nanoBlur;nanoFocus;nanoDidLoad;nanoDidUnload;nanoValidate;async reportValidity(n){return new Promise((t=>{if(n)this.validate();setTimeout((()=>{t({isValid:!this._invalid,errorMessage:this.nativeInput.validationMessage})}),50)}))}async setFocus(){if(this.nativeInput){this.nativeInput.focus();this.nativeInput.click()}}async select(){if(this.nativeInput){this.nativeInput.select()}}getInputElement(){return Promise.resolve(this.nativeInput)}async showError(n){if(this.nativeInput){this.nativeInput.setCustomValidity(n);this.validate()}}onReset(n){const t=this.form?document.querySelector("#"+this.form):this.el.closest("form");if(!t||n.target!==this.el.closest("form"))return;this.value=""}handleBlur(n){if(!this.hasFocus)return;const t=n;let i;requestAnimationFrame((()=>{if(n instanceof KeyboardEvent&&t.key){if(t.key!=="Tab")return;i=document.activeElement}else if(n instanceof FocusEvent){i=document.activeElement}else i=n.target;if(e(this.el.tagName.toLowerCase(),i)!==this.el){this.onBlur()}}))}shouldClearOnEdit(){const{type:n,clearOnEdit:t}=this;return t===undefined?n==="password":t}getValue(){return this.value||""}validate=n=>{if(this.validateOn==="submitThenDirty")this.validateOn="dirty";if(!this.nativeInput.validity.valid){if(this.showInlineError){if(n)n.preventDefault();this.errorMessage=this.nativeInput.validationMessage}this._invalid=true}else this._invalid=false;this.nanoValidate.emit({isValid:!this._invalid,errorMessage:this.nativeInput.validationMessage,originalEvent:n})};onInput=n=>{const t=n.target;this.value=t?.value||"";this.nanoInput.emit(n)};onBlur=()=>{this.hasFocus=false;this.focusChanged();if(this.validateOn==="dirty")this.validate();this.nanoBlur.emit()};onFocus=()=>{this.hasFocus=true;this.focusChanged();this.nanoFocus.emit()};onKeydown=()=>{if(this.shouldClearOnEdit()){if(this.didBlurAfterEdit&&this.hasValue()){this.clearTextInput()}this.didBlurAfterEdit=false}};clearTextInput=n=>{if(this.clearInput&&!this.readonly&&!this.disabled&&n){n.preventDefault();n.stopPropagation()}this.value="";this.nativeInput.value="";const t=new window.Event("change");this.nativeInput.dispatchEvent(t)};focusChanged(){if(!this.hasFocus&&this.shouldClearOnEdit()&&this.hasValue()){this.didBlurAfterEdit=true}}hasValue(){return this.getValue().length>0}slotChangeObserver(){if(this.mo)this.mo.disconnect();const n=this.mo=new MutationObserver((()=>this.processSlottedContent()));n.observe(this.el,{childList:true,subtree:true})}processSlottedContent(){this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]');this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]');this.hasHelperEndSlot=!!this.el.querySelector('[slot="helper-end"]');this.datalist=this.el.querySelector("nano-datalist:not([slot])");if(this.el.querySelector('[slot="inline-button"]')){console.warn("The `inline-button` slot was renamed to `end` in v2 - please update your code",this.el)}}connectedCallback(){this.debounceChanged();{this.el.dispatchEvent(new CustomEvent("nanoDidLoad",{detail:this.el}))}}disconnectedCallback(){{document.dispatchEvent(new CustomEvent("nanoDidUnload",{detail:this.el}))}if(this.mo)this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver();this.hasRendered=true;if(this.autofocus)setTimeout((n=>this.setFocus()),300)}componentWillLoad(){this.processSlottedContent()}render(){const n=this.getValue();const t=this.inputId+"-lbl";const i=this.showInlineError||this.hasHelperSlot?this.inputId+"-more":"";const e=this.hasHelperEndSlot?this.inputId+"-helper":"";this.rtl=this.el.ownerDocument.dir==="rtl";const s=(({el:n,floatLabel:t,label:i,errorMessage:a,type:o,showInlineError:e,hasHelperSlot:r,hasLabelSlot:s,hideLabel:l,placeholder:c,maxlength:p,charCount:u,showCharCount:d,rtl:h,hasHelperEndSlot:f})=>({el:n,floatLabel:t,label:i,errorMessage:a,type:o,showInlineError:e,hasHelperSlot:r,hasLabelSlot:s,hideLabel:l,placeholder:c,maxlength:p,charCount:u,showCharCount:d,rtl:h,hasHelperEndSlot:f}))(this);const l={...s,labelId:t,moreId:i,helperEndId:e,hasValue:this.hasValue(),controlId:this.inputId};const u=(({clearInput:n,readonly:t,disabled:i})=>({clearInput:n,readonly:t,disabled:i,clearControl:this.clearInput}))(this);return a(o,{key:"d3ba5aeef1a8b0dc6d8184a5baf858a80525c907","aria-disabled":this.disabled?"true":null,dir:this.rtl?"rtl":null,class:{...r(this.color),"has-value":this.hasValue(),"has-focus":this.hasFocus,"is-invalid":this._invalid}},a("div",{key:"d8c8488f37aa9474f946d165aa2f91c55886f74f",style:{width:"100%"}},a(c,{key:"50dc939d11a2704aacc6f967670e2945fd063b89",...l},a(p,{key:"fbe48f48485af685c0787dcfdc67a198b9904bd2",...u,onClearText:this.clearTextInput,control:this.el,ref:n=>this.nativeInputWrap=n},this.type!=="textarea"&&a("input",{key:"9851de702e37a25a86ccf1935372ec0b3992e127",id:this.inputId,class:"input__native-ctrl",ref:n=>this.nativeInput=n,"aria-labelledby":t+" "+i+" "+e,disabled:this.disabled,accept:this.accept,autoCapitalize:this.autocapitalise,autoComplete:this.autocomplete,autoCorrect:this.autocorrect,autoFocus:this.autofocus,inputMode:this.inputmode,form:this.form,min:this.min,max:this.max,minLength:this.minlength,maxLength:this.maxlength,multiple:this.multiple,name:this.name,pattern:this.pattern,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,step:this.step,size:this.size,type:this.type,value:n,onInput:this.onInput,onChange:this.onInput,onFocus:this.onFocus,onBlur:this.handleBlur,onKeyDown:this.onKeydown,onInvalid:this.validate}),this.type==="textarea"&&a("textarea",{key:"b0e639724c3458e45854b31dd17e26839737479d",rows:this.floatLabel?1:this.rows,id:this.inputId,class:{"input__native-ctrl":true,input__resizable:this.resize==="true"},ref:n=>this.nativeInput=n,"aria-labelledby":t+" "+i+" "+e,disabled:this.disabled,autoCapitalize:this.autocapitalise,autoCorrect:this.autocorrect,autoFocus:this.autofocus,inputMode:this.inputmode,form:this.form,minLength:this.minlength,maxLength:this.maxlength,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,value:n,onInput:this.onInput,onChange:this.onInput,onFocus:this.onFocus,onKeyDown:this.onKeydown,onInvalid:this.validate,onBlur:this.handleBlur}))),a("slot",{key:"3d2663183a74f118a092ae196855922ab336f43b"})))}static get watchers(){return{datalist:["setDataListOpts"],minlength:["shouldValidate"],maxlength:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],required:["shouldValidate"],disabled:["shouldValidate"],readonly:["shouldValidate"],pattern:["shouldValidate"],inputmode:["shouldValidate"],value:["valueChanged"],debounce:["debounceChanged"]}}};f.style=d;export{f as nano_input};
 //# sourceMappingURL=nano-input.entry.js.map