@nanoporetech-digital/components 5.8.0 → 5.8.2

package/dist/nano-components/{p-20086faa.entry.js → p-cfcf5242.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{h as i,g as t,a as e,r as n,c as s}from"./p-d6a04b3a.js";const r=(()=>{try{return!!new CSSStyleSheet}catch(i){return false}})();const o=new WeakMap;function h(n={}){return(s,h)=>{if(!n.cacheKeyProperty){n.cacheKeyProperty=h}const{componentWillLoad:d,render:u,componentWillRender:g}=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 i=i=>{if(!i[n.cacheKeyProperty]||o.get(i)&&o.get(i)===i[n.cacheKeyProperty])return;o.set(i,i[n.cacheKeyProperty]);const e=t(i);const r=typeof i[h]==="function"?i[h]():i[h];const a=e.shadowRoot||document;a.adoptedStyleSheets=[...a.adoptedStyleSheets||[],c(i,s,r,n)]};s.componentWillLoad=function(){const t=d&&d.call(this);i(this);return t};s.componentWillRender=function(){const t=g&&g.call(this);i(this);return t}}else{s.render=function(){const t=typeof this[h]==="function"?this[h]():this[h];let n=u.call(this);if(l(n)){a(n,s.constructor.name,t)}else{n=i(e,null,n);if(!("attachShadow"in HTMLElement.prototype)){a(n,s.constructor.name,t)}else{if(!s.__constructableStyle){const i=document.createElement("style");i.setAttribute("type","text/css");i.setAttribute("constructible-style",s.constructor.name);i.innerHTML=t;s.__constructableStyle=i;document.head.appendChild(i)}}}return n}}}}function a(t,e,n){(d(t)||[]).push(i("style",{type:"text/css","constructible-style":e},n))}function c(i,t,e,n){if(!t.__constructableStyle){t.__constructableStyle={}}const s=i[n.cacheKeyProperty];if(!t.__constructableStyle[s]){t.__constructableStyle[s]=new CSSStyleSheet;t.__constructableStyle[s].replace(e)}return t.__constructableStyle[s]}function l(i){for(const t in i){if(i.hasOwnProperty(t)){if(i[t]===e){return true}}}return false}function d(i){for(const t in i){if(i.hasOwnProperty(t)){if(Array.isArray(i[t])){return i[t]}}}}const u=':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:rgba(126, 195, 241, 0.25)}';var g=undefined&&undefined.__decorate||function(i,t,e,n){var s=arguments.length,r=s<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,e):n,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(i,t,e,n);else for(var h=i.length-1;h>=0;h--)if(o=i[h])r=(s<3?o(r):s>3?o(t,e,r):o(t,e))||r;return s>3&&r&&Object.defineProperty(t,e,r),r};var p=undefined&&undefined.__metadata||function(i,t){if(typeof Reflect==="object"&&typeof Reflect.metadata==="function")return Reflect.metadata(i,t)};let f=0;const m=class{constructor(i){n(this,i);this.grids=[];this.gridId="nano-grid-"+f++;this.styles=()=>{const i=`\n      ${this.grids.map((i=>`\n          @container (min-width: ${typeof i.breakpoint==="number"?i.breakpoint+1+"px":i.breakpoint}) {\n            #${this.gridId}.grid {\n              --current-grid-size: "grid size: ${i.name}";\n              ${i.template?`grid-template: ${i.template};`:`grid-template-columns: repeat(${i.cols}, minmax(calc((100% / ${i.cols}) - var(--grid-col-gap)), 1fr));`}\n            }\n            ${[...Array(i.cols)].map(((t,e)=>{const n=e+1;return`\n                  #${this.gridId}.grid > [grid-states~="${i.name}-col-start-${n}"],\n                  ::slotted([grid-states~="${i.name}-col-start-${n}"]) {\n                    grid-column-start: ${n} !important;\n                  }\n                  #${this.gridId}.grid > [grid-states~="${i.name}-col-span-${n}"],\n                  ::slotted([grid-states~="${i.name}-col-span-${n}"]) {\n                    grid-column-end: span ${n} !important;\n                  }\n              `})).join("")}\n              ${[...Array(24)].map(((t,e)=>{const n=e+1;return`\n                    #${this.gridId}.grid > [grid-states~="${i.name}-row-start-${n}"],\n                    ::slotted([grid-states~="${i.name}-row-start-${n}"]) {\n                      grid-row-start: ${n} !important;\n                    }\n                    #${this.gridId}.grid > [grid-states~="${i.name}-row-span-${n}"],\n                    ::slotted([grid-states~="${i.name}-row-span-${n}"]) {\n                      grid-row-end: span ${n} !important;\n                    }\n                `})).join("")}\n            ${this.showHelper&&`\n              #${this.gridId} .grid--helper :nth-child(-n+${i.cols}) {\n                display: block !important;\n              }\n            `}\n          }\n        `)).join("")}\n    `;return i};this.cacheKey=undefined;this.sSize=300;this.mSize=550;this.lSize=800;this.xlSize=1e3;this.sCols=undefined;this.mCols=undefined;this.lCols=undefined;this.xlCols=undefined;this.xxlCols=undefined;this.sTpl=undefined;this.mTpl=undefined;this.lTpl=undefined;this.xlTpl=undefined;this.xxlTpl=undefined;this.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((i=>`${i.cols}-${i.breakpoint}-${i.template||""}`)).join("")+"-helper-"+this.showHelper}componentWillLoad(){this.constructSizeArray()}render(){return i(e,null,i("div",{part:"grid",class:"grid",id:this.gridId},i("slot",null)),this.showHelper&&i("div",{class:"grid grid--helper",part:"helper"},[...Array(24)].map((()=>i("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"]}}};g([h({cacheKeyProperty:"cacheKey"}),p("design:type",Object)],m.prototype,"styles",void 0);m.style=u;const b=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding:0;display:inline-block;object-fit:cover;object-position:center;background-size:cover;background-position:center}:host *{border-radius:inherit}:host([background]:not([background=false])){display:block}.img{position:relative;object-fit:inherit;object-position:inherit;background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit;flex:1 1 100%;display:flex;flex-direction:column;min-block-size:inherit;max-block-size:inherit;max-inline-size:inherit;min-height:inherit;min-width:inherit;block-size:inherit;inline-size:inherit;height:inherit;width:inherit;max-height:inherit;max-width:inherit;aspect-ratio:inherit}.img__loader,.img__observer{position:absolute;inset:0;block-size:100%;inline-size:100%;z-index:-1}.img__image,.img__bg{border-radius:inherit;display:block;opacity:0;transition:0.5s ease opacity, 0.3s ease filter 0.4s;filter:blur(5px);flex:1}.img__image.loaded,.img__bg.loaded{opacity:1;filter:blur(0)}@media not all and (min-resolution: 0.001dpcm){@supports (-webkit-appearance: none){.img__image.loaded,.img__bg.loaded{filter:blur(0)}}}.img__image{object-fit:inherit;object-position:inherit;max-inline-size:100%;min-block-size:inherit;max-block-size:inherit;min-height:inherit;min-width:inherit;block-size:auto;inline-size:inherit;height:inherit;width:inherit;max-height:inherit;max-width:inherit;aspect-ratio:inherit}.img__image.hide{visibility:hidden}.img__image.hide.no-height{block-size:1px;position:absolute;z-index:-1}.img__bg{background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit;overflow:auto;padding:var(--padding)}.img__bg.no-height{position:absolute;inset:0}";const y=class{constructor(i){n(this,i);this.nanoImgWillLoad=s(this,"nanoImgWillLoad",7);this.nanoImgDidLoad=s(this,"nanoImgDidLoad",7);this.nanoImgError=s(this,"nanoImgError",7);this._srcSet={};this.onLoad=()=>{this.nanoImgDidLoad.emit();setTimeout((()=>this.hasLoaded=true),50)};this.onError=()=>{this.nanoImgError.emit()};this.onResize=i=>{Object.entries(i.detail).forEach((([i,t])=>{this._srcSet[i].active=t}));const t=[];Object.keys(this._srcSet).sort().forEach((i=>{if(this._srcSet[i].active)t.push(this._srcSet[i].src)}));if(t.length)this._src=t.slice(-1)[0];else this._src=this.src};this.loadSrc=undefined;this.loadError=undefined;this.hasLoaded=false;this.imgStates=null;this._src=undefined;this.alt=undefined;this.src=undefined;this.srcSet=undefined;this.lazy=true;this.background=undefined;this.autoHeight="content"}_srcChanged(){this.hasLoaded=false;this.addIO()}srcChanged(){this._src=this.src}srcSetChanged(){if(!this.srcSet)return;delete this._srcSet;this._srcSet={};this.imgStates=this.srcSet.split(",").map((i=>{const[t,e]=i.split(" ").filter((i=>i.length));this._srcSet[t]={src:e,active:false};return t})).join(", ")}lazyChanged(){if(!this.lazy)this.load()}addIO(){if(!this._src||this.hasLoaded)return;if(!this.lazy){this.load();return}if(typeof window!=="undefined"&&"IntersectionObserver"in window){this.removeIO();this.io=new IntersectionObserver((i=>{if(i[0].isIntersecting){this.load();this.removeIO()}}));this.io.observe(this.host)}else setTimeout((()=>this.load()),200)}load(){this.loadError=this.onError;this.loadSrc=this._src;this.nanoImgWillLoad.emit()}removeIO(){if(this.io){this.io.disconnect();this.io=undefined}}connectedCallback(){this.srcChanged();this.srcSetChanged();this.lazyChanged()}componentDidLoad(){this.addIO()}disconnectedCallback(){this.removeIO()}render(){const t=!!this.loadSrc?{"background-image":`url(${this.loadSrc})`}:{};return i("div",{class:"img"},i("nano-skeleton",{class:"img__loader"}),!!this.background&&i("div",{class:{loaded:this.hasLoaded,img__bg:true,"no-height":this.autoHeight==="image"},style:t},i("slot",null)),i("img",{class:{img__image:true,loaded:this.hasLoaded,hide:this.background,"no-height":this.autoHeight==="content"},decoding:"async",src:this.loadSrc,loading:undefined,alt:this.alt,onLoad:this.onLoad,onError:this.loadError}),i("nano-resize-observe",{class:"img__observer",onNanoResizeStateChange:this.onResize,states:this.imgStates}))}get host(){return t(this)}static get watchers(){return{_src:["_srcChanged"],src:["srcChanged"],srcSet:["srcSetChanged"],lazy:["lazyChanged"]}}};y.style=b;export{m as nano_grid,y as nano_img};
-//# sourceMappingURL=p-20086faa.entry.js.map
+import{h as i,g as t,a as e,r as n,c as s}from"./p-d6a04b3a.js";const r=(()=>{try{return!!new CSSStyleSheet}catch(i){return false}})();const o=new WeakMap;function h(n={}){return(s,h)=>{if(!n.cacheKeyProperty){n.cacheKeyProperty=h}const{componentWillLoad:d,render:u,componentWillRender:g}=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 i=i=>{if(!i[n.cacheKeyProperty]||o.get(i)&&o.get(i)===i[n.cacheKeyProperty])return;o.set(i,i[n.cacheKeyProperty]);const e=t(i);const r=typeof i[h]==="function"?i[h]():i[h];const a=e.shadowRoot||document;a.adoptedStyleSheets=[...a.adoptedStyleSheets||[],c(i,s,r,n)]};s.componentWillLoad=function(){const t=d&&d.call(this);i(this);return t};s.componentWillRender=function(){const t=g&&g.call(this);i(this);return t}}else{s.render=function(){const t=typeof this[h]==="function"?this[h]():this[h];let n=u.call(this);if(l(n)){a(n,s.constructor.name,t)}else{n=i(e,null,n);if(!("attachShadow"in HTMLElement.prototype)){a(n,s.constructor.name,t)}else{if(!s.__constructableStyle){const i=document.createElement("style");i.setAttribute("type","text/css");i.setAttribute("constructible-style",s.constructor.name);i.innerHTML=t;s.__constructableStyle=i;document.head.appendChild(i)}}}return n}}}}function a(t,e,n){(d(t)||[]).push(i("style",{type:"text/css","constructible-style":e},n))}function c(i,t,e,n){if(!t.__constructableStyle){t.__constructableStyle={}}const s=i[n.cacheKeyProperty];if(!t.__constructableStyle[s]){t.__constructableStyle[s]=new CSSStyleSheet;t.__constructableStyle[s].replace(e)}return t.__constructableStyle[s]}function l(i){for(const t in i){if(i.hasOwnProperty(t)){if(i[t]===e){return true}}}return false}function d(i){for(const t in i){if(i.hasOwnProperty(t)){if(Array.isArray(i[t])){return i[t]}}}}const u=':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:rgba(126, 195, 241, 0.25)}';var g=undefined&&undefined.__decorate||function(i,t,e,n){var s=arguments.length,r=s<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,e):n,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(i,t,e,n);else for(var h=i.length-1;h>=0;h--)if(o=i[h])r=(s<3?o(r):s>3?o(t,e,r):o(t,e))||r;return s>3&&r&&Object.defineProperty(t,e,r),r};var p=undefined&&undefined.__metadata||function(i,t){if(typeof Reflect==="object"&&typeof Reflect.metadata==="function")return Reflect.metadata(i,t)};let f=0;const m=class{constructor(i){n(this,i);this.grids=[];this.gridId="nano-grid-"+f++;this.styles=()=>{const i=`\n      ${this.grids.map((i=>`\n          @container (min-width: ${!!Number(i.breakpoint)?Number(i.breakpoint)+1+"px":i.breakpoint}) {\n            #${this.gridId}.grid {\n              --current-grid-size: "grid size: ${i.name}";\n              ${i.template?`grid-template: ${i.template};`:`grid-template-columns: repeat(${i.cols}, minmax(calc((100% / ${i.cols}) - var(--grid-col-gap)), 1fr));`}\n            }\n            ${[...Array(i.cols)].map(((t,e)=>{const n=e+1;return`\n                  #${this.gridId}.grid > [grid-states~="${i.name}-col-start-${n}"],\n                  ::slotted([grid-states~="${i.name}-col-start-${n}"]) {\n                    grid-column-start: ${n} !important;\n                  }\n                  #${this.gridId}.grid > [grid-states~="${i.name}-col-span-${n}"],\n                  ::slotted([grid-states~="${i.name}-col-span-${n}"]) {\n                    grid-column-end: span ${n} !important;\n                  }\n              `})).join("")}\n              ${[...Array(24)].map(((t,e)=>{const n=e+1;return`\n                    #${this.gridId}.grid > [grid-states~="${i.name}-row-start-${n}"],\n                    ::slotted([grid-states~="${i.name}-row-start-${n}"]) {\n                      grid-row-start: ${n} !important;\n                    }\n                    #${this.gridId}.grid > [grid-states~="${i.name}-row-span-${n}"],\n                    ::slotted([grid-states~="${i.name}-row-span-${n}"]) {\n                      grid-row-end: span ${n} !important;\n                    }\n                `})).join("")}\n            ${this.showHelper&&`\n              #${this.gridId} .grid--helper :nth-child(-n+${i.cols}) {\n                display: block !important;\n              }\n            `}\n          }\n        `)).join("")}\n    `;return i};this.cacheKey=undefined;this.sSize=300;this.mSize=550;this.lSize=800;this.xlSize=1e3;this.sCols=undefined;this.mCols=undefined;this.lCols=undefined;this.xlCols=undefined;this.xxlCols=undefined;this.sTpl=undefined;this.mTpl=undefined;this.lTpl=undefined;this.xlTpl=undefined;this.xxlTpl=undefined;this.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((i=>`${i.cols}-${i.breakpoint}-${i.template||""}`)).join("")+"-helper-"+this.showHelper}componentWillLoad(){this.constructSizeArray()}render(){return i(e,null,i("div",{part:"grid",class:"grid",id:this.gridId},i("slot",null)),this.showHelper&&i("div",{class:"grid grid--helper",part:"helper"},[...Array(24)].map((()=>i("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"]}}};g([h({cacheKeyProperty:"cacheKey"}),p("design:type",Object)],m.prototype,"styles",void 0);m.style=u;const b=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding:0;display:inline-block;object-fit:cover;object-position:center;background-size:cover;background-position:center}:host *{border-radius:inherit}:host([background]:not([background=false])){display:block}.img{position:relative;object-fit:inherit;object-position:inherit;background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit;flex:1 1 100%;display:flex;flex-direction:column;min-block-size:inherit;max-block-size:inherit;max-inline-size:inherit;min-height:inherit;min-width:inherit;block-size:inherit;inline-size:inherit;height:inherit;width:inherit;max-height:inherit;max-width:inherit;aspect-ratio:inherit}.img__loader,.img__observer{position:absolute;inset:0;block-size:100%;inline-size:100%;z-index:-1}.img__image,.img__bg{border-radius:inherit;display:block;opacity:0;transition:0.5s ease opacity, 0.3s ease filter 0.4s;filter:blur(5px);flex:1}.img__image.loaded,.img__bg.loaded{opacity:1;filter:blur(0)}@media not all and (min-resolution: 0.001dpcm){@supports (-webkit-appearance: none){.img__image.loaded,.img__bg.loaded{filter:blur(0)}}}.img__image{object-fit:inherit;object-position:inherit;max-inline-size:100%;min-block-size:inherit;max-block-size:inherit;min-height:inherit;min-width:inherit;block-size:auto;inline-size:inherit;height:inherit;width:inherit;max-height:inherit;max-width:inherit;aspect-ratio:inherit}.img__image.hide{visibility:hidden}.img__image.hide.no-height{block-size:1px;position:absolute;z-index:-1}.img__bg{background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit;overflow:auto;padding:var(--padding)}.img__bg.no-height{position:absolute;inset:0}";const y=class{constructor(i){n(this,i);this.nanoImgWillLoad=s(this,"nanoImgWillLoad",7);this.nanoImgDidLoad=s(this,"nanoImgDidLoad",7);this.nanoImgError=s(this,"nanoImgError",7);this._srcSet={};this.onLoad=()=>{this.nanoImgDidLoad.emit();setTimeout((()=>this.hasLoaded=true),50)};this.onError=()=>{this.nanoImgError.emit()};this.onResize=i=>{Object.entries(i.detail).forEach((([i,t])=>{this._srcSet[i].active=t}));const t=[];Object.keys(this._srcSet).sort().forEach((i=>{if(this._srcSet[i].active)t.push(this._srcSet[i].src)}));if(t.length)this._src=t.slice(-1)[0];else this._src=this.src};this.loadSrc=undefined;this.loadError=undefined;this.hasLoaded=false;this.imgStates=null;this._src=undefined;this.alt=undefined;this.src=undefined;this.srcSet=undefined;this.lazy=true;this.background=undefined;this.autoHeight="content"}_srcChanged(){this.hasLoaded=false;this.addIO()}srcChanged(){this._src=this.src}srcSetChanged(){if(!this.srcSet)return;delete this._srcSet;this._srcSet={};this.imgStates=this.srcSet.split(",").map((i=>{const[t,e]=i.split(" ").filter((i=>i.length));this._srcSet[t]={src:e,active:false};return t})).join(", ")}lazyChanged(){if(!this.lazy)this.load()}addIO(){if(!this._src||this.hasLoaded)return;if(!this.lazy){this.load();return}if(typeof window!=="undefined"&&"IntersectionObserver"in window){this.removeIO();this.io=new IntersectionObserver((i=>{if(i[0].isIntersecting){this.load();this.removeIO()}}));this.io.observe(this.host)}else setTimeout((()=>this.load()),200)}load(){this.loadError=this.onError;this.loadSrc=this._src;this.nanoImgWillLoad.emit()}removeIO(){if(this.io){this.io.disconnect();this.io=undefined}}connectedCallback(){this.srcChanged();this.srcSetChanged();this.lazyChanged()}componentDidLoad(){this.addIO()}disconnectedCallback(){this.removeIO()}render(){const t=!!this.loadSrc?{"background-image":`url(${this.loadSrc})`}:{};return i("div",{class:"img"},i("nano-skeleton",{class:"img__loader"}),!!this.background&&i("div",{class:{loaded:this.hasLoaded,img__bg:true,"no-height":this.autoHeight==="image"},style:t},i("slot",null)),i("img",{class:{img__image:true,loaded:this.hasLoaded,hide:this.background,"no-height":this.autoHeight==="content"},decoding:"async",src:this.loadSrc,loading:undefined,alt:this.alt,onLoad:this.onLoad,onError:this.loadError}),i("nano-resize-observe",{class:"img__observer",onNanoResizeStateChange:this.onResize,states:this.imgStates}))}get host(){return t(this)}static get watchers(){return{_src:["_srcChanged"],src:["srcChanged"],srcSet:["srcSetChanged"],lazy:["lazyChanged"]}}};y.style=b;export{m as nano_grid,y as nano_img};
+//# sourceMappingURL=p-cfcf5242.entry.js.map

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

@@ -0,0 +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","hasOwnProperty","Array","isArray","gridCss","gridId","Grid","grids","styles","css","map","bp","Number","breakpoint","template","cols","_","i","gItm","join","showHelper","constructSizeArray","sCols","sTpl","mCols","sSize","mTpl","lCols","mSize","lTpl","xlCols","lSize","xlTpl","xxlCols","xlSize","xxlTpl","cacheKey","part","class","id","__decorate","imgCss","Img","_srcSet","onLoad","nanoImgDidLoad","emit","setTimeout","hasLoaded","onError","nanoImgError","onResize","Object","entries","detail","forEach","active","srcOpts","keys","sort","src","length","_src","slice","_srcChanged","addIO","srcChanged","srcSetChanged","srcSet","imgStates","split","bpSrc","filter","lazyChanged","lazy","load","window","removeIO","io","IntersectionObserver","data","isIntersecting","observe","loadError","loadSrc","nanoImgWillLoad","disconnect","undefined","connectedCallback","componentDidLoad","disconnectedCallback","bgStyle","background","loaded","img__bg","autoHeight","img__image","hide","decoding","loading","alt","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 (node.hasOwnProperty(prop)) {\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 (node.hasOwnProperty(prop)) {\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\n@import '../../global/style/nano-theme/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: #{$spacing-medium};\n  --grid-row-gap: #{$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\nlet gridId = 0;\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  private gridId = 'nano-grid-' + gridId++;\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)\n              ? Number(bp.breakpoint) + 1 + 'px'\n              : bp.breakpoint\n          }) {\n            #${this.gridId}.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                  #${this.gridId}.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                  #${this.gridId}.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                    #${this.gridId}.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                    #${this.gridId}.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              #${this.gridId} .grid--helper :nth-child(-n+${bp.cols}) {\n                display: block !important;\n              }\n            `\n            }\n          }\n        `\n        )\n        .join('')}\n    `;\n      return css;\n    };\n\n  componentWillLoad() {\n    this.constructSizeArray();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div part=\"grid\" class=\"grid\" id={this.gridId}>\n          <slot />\n        </div>\n        {this.showHelper && (\n          <div class=\"grid grid--helper\" part=\"helper\">\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  max-block-size: inherit;\n  max-inline-size: inherit;\n  min-height: inherit;\n  min-width: inherit;\n  block-size: inherit;\n  inline-size: inherit;\n  height: inherit;\n  width: inherit;\n  max-height: inherit;\n  max-width: inherit;\n  aspect-ratio: inherit;\n}\n\n.img__loader,\n.img__observer {\n  position: absolute;\n  inset: 0;\n  block-size: 100%;\n  inline-size: 100%;\n  z-index: -1;\n}\n\n.img__image,\n.img__bg {\n  border-radius: inherit;\n  display: block;\n  opacity: 0;\n  transition: 0.5s ease opacity, 0.3s ease filter 0.4s;\n  filter: blur(5px);\n  flex: 1;\n\n  &.loaded {\n    opacity: 1;\n    filter: blur(0);\n\n    @media not all and (min-resolution: 0.001dpcm) {\n      @supports (-webkit-appearance: none) {\n        filter: blur(0);\n      }\n    }\n  }\n}\n\n.img__image {\n  object-fit: inherit;\n  object-position: inherit;\n  max-inline-size: 100%;\n  min-block-size: inherit;\n  max-block-size: inherit;\n  min-height: inherit;\n  min-width: inherit;\n  block-size: auto;\n  inline-size: inherit;\n  height: inherit;\n  width: inherit;\n  max-height: inherit;\n  max-width: inherit;\n  aspect-ratio: inherit;\n\n  &.hide {\n    visibility: hidden;\n\n    &.no-height {\n      block-size: 1px;\n      position: absolute;\n      z-index: -1;\n    }\n  }\n}\n\n.img__bg {\n  background-color: inherit;\n  background-position: inherit;\n  background-size: inherit;\n  background-origin: inherit;\n  background-attachment: inherit;\n  background-repeat: inherit;\n  overflow: auto;\n  padding: var(--padding);\n\n  &.no-height {\n    position: absolute;\n    inset: 0;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Prop,\n  Watch,\n  h,\n  ComponentInterface,\n  Build,\n} from '@stencil/core';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\n/**\n * Img with benefits. Lazy loading. Simple `srcSet` solution for both `<img>` and `background-image` varieties.\n * @slot - Main slot. Only relevant with `<nano-img background>`\n */\n@Component({\n  tag: 'nano-img',\n  styleUrl: 'img.scss',\n  shadow: true,\n})\nexport class Img implements ComponentInterface {\n  private io?: IntersectionObserver;\n  private _srcSet: { [key: string]: { src: string; active: boolean } } = {};\n\n  @Element() host!: HTMLNanoImgElement;\n\n  @State() loadSrc?: string;\n  @State() loadError?: () => void;\n  @State() hasLoaded: boolean = false;\n  @State() imgStates: string = null;\n  @State() _src: string;\n  @Watch('_src')\n  _srcChanged() {\n    this.hasLoaded = false;\n    this.addIO();\n  }\n\n  /** This attribute defines the alternative text describing the image.\n   * Users will see this text displayed if the image URL is wrong, or if the image is not yet downloaded. */\n  @Prop() alt?: string;\n\n  /** The image URL. This attribute is mandatory for the `<img>` element. */\n  @Prop() src!: string;\n  @Watch('src')\n  srcChanged() {\n    this._src = this.src;\n  }\n\n  /** Optional list string providing media sizes with corresponding image srcs.\n   * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` */\n  @Prop() srcSet?: string;\n  @Watch('srcSet')\n  srcSetChanged() {\n    if (!this.srcSet) return;\n\n    delete this._srcSet;\n    this._srcSet = {};\n\n    this.imgStates = this.srcSet\n      .split(',')\n      .map((bpSrc) => {\n        const [bp, src] = bpSrc.split(' ').filter((bp) => bp.length);\n        this._srcSet[bp] = { src: src, active: false };\n        return bp;\n      })\n      .join(', ');\n  }\n\n  /** Render image lazily, when it comes into the browser viewport **/\n  @Prop() lazy: boolean = true;\n  @Watch('lazy')\n  lazyChanged() {\n    if (!this.lazy) this.load();\n  }\n\n  /** Render the image as a background image **/\n  @Prop() background?: boolean;\n\n  /** When the image is rendered as a background, and there is no preset dimensions of the component,\n   * you can set how the component height will be set. Via image size or via the content **/\n  @Prop() autoHeight: 'content' | 'image' = 'content';\n\n  /** Emitted when the img src has been set */\n  @Event() nanoImgWillLoad!: EventEmitter<void>;\n\n  /** Emitted when the image has finished loading */\n  @Event() nanoImgDidLoad!: EventEmitter<void>;\n\n  /** Emitted when the img fails to load */\n  @Event() nanoImgError!: EventEmitter<void>;\n\n  private addIO() {\n    if (!this._src || this.hasLoaded) return;\n    if (!this.lazy) {\n      this.load();\n      return;\n    }\n    if (\n      typeof (window as any) !== 'undefined' &&\n      'IntersectionObserver' in window\n    ) {\n      this.removeIO();\n      this.io = new IntersectionObserver((data) => {\n        if (data[0].isIntersecting) {\n          this.load();\n          this.removeIO();\n        }\n      });\n\n      this.io.observe(this.host);\n    } else setTimeout(() => this.load(), 200);\n  }\n\n  private load() {\n    this.loadError = this.onError;\n    this.loadSrc = this._src;\n    this.nanoImgWillLoad.emit();\n  }\n\n  private onLoad = () => {\n    this.nanoImgDidLoad.emit();\n    setTimeout(() => (this.hasLoaded = true), 50);\n  };\n\n  private onError = () => {\n    this.nanoImgError.emit();\n  };\n\n  private onResize = (e: { detail: ResizeStateChangeEventDetail }) => {\n    Object.entries(e.detail).forEach(([bp, active]) => {\n      this._srcSet[bp].active = active;\n    });\n\n    // sort and find the highest sized matching image.\n    const srcOpts = [];\n    Object.keys(this._srcSet)\n      .sort()\n      .forEach((bp) => {\n        if (this._srcSet[bp].active) srcOpts.push(this._srcSet[bp].src);\n      });\n\n    if (srcOpts.length) this._src = srcOpts.slice(-1)[0];\n    // no matching image? Set back to default\n    else this._src = this.src;\n  };\n\n  private removeIO() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  connectedCallback() {\n    this.srcChanged();\n    this.srcSetChanged();\n    this.lazyChanged();\n  }\n\n  componentDidLoad() {\n    this.addIO();\n  }\n\n  disconnectedCallback() {\n    this.removeIO();\n  }\n\n  render() {\n    const bgStyle = !!this.loadSrc\n      ? { 'background-image': `url(${this.loadSrc})` }\n      : {};\n\n    return (\n      <div class=\"img\">\n        <nano-skeleton class=\"img__loader\"></nano-skeleton>\n        {!!this.background && (\n          <div\n            class={{\n              loaded: this.hasLoaded,\n              img__bg: true,\n              'no-height': this.autoHeight === 'image',\n            }}\n            style={bgStyle}\n          >\n            <slot />\n          </div>\n        )}\n        <img\n          class={{\n            img__image: true,\n            loaded: this.hasLoaded,\n            hide: this.background,\n            'no-height': this.autoHeight === 'content',\n          }}\n          decoding=\"async\"\n          src={Build.isServer ? this.src : this.loadSrc}\n          loading={Build.isServer && this.lazy ? 'lazy' : undefined}\n          alt={this.alt}\n          onLoad={this.onLoad}\n          onError={this.loadError}\n        />\n        <nano-resize-observe\n          class=\"img__observer\"\n          onNanoResizeStateChange={this.onResize}\n          states={this.imgStates}\n        />\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/nano-components/p-ee4bb8bc.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{c as t}from"./p-7024e2d0.js";import"./p-d6a04b3a.js";import"./p-ee045579.js";import"./p-7bff5224.js";import"./p-70747f20.js";const o="table.worker";const p="stencil.table.worker";const s=new URL("p-f258383d.js",import.meta.url).href;const r=new Blob(['importScripts("'+s+'")'],{type:"text/javascript"});const e=URL.createObjectURL(r);const c=t(e,o,p);URL.revokeObjectURL(e);export{c as worker,p as workerMsgId,o as workerName,s as workerPath};
+//# sourceMappingURL=p-ee4bb8bc.js.map

package/dist/types/components/details/details.d.ts

@@ -25,6 +25,7 @@ export declare class Details {
   private detailsEl;
   private headerEl;
   private contentEl;
+  private cacheHeight;
   private host;
   /** Summary / handle text. Use the `label` slot for HTML markup */
   label: string;
@@ -36,6 +37,10 @@ export declare class Details {
   noHandle: boolean;
   /** Icon slot rotation amount (degrees) on open */
   iconRotation: number;
+  /**
+   * Sometimes, nested content will resize within the details component which results in choppy show/hide animations.
+   * Set `useCacheHeight` to `true` try to keep animations smooth. */
+  useCacheHeight: boolean;
   /**
    * Emitted when the component opens.
    * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.

package/dist/types/components.d.ts

@@ -674,6 +674,10 @@ export namespace Components {
           * Should item be open on load
          */
         "open": boolean;
+        /**
+          * Sometimes, nested content will resize within the details component which results in choppy show/hide animations. Set `useCacheHeight` to `true` try to keep animations smooth.
+         */
+        "useCacheHeight": boolean;
     }
     /**
      * Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
@@ -3988,6 +3992,10 @@ declare namespace LocalJSX {
           * Should item be open on load
          */
         "open"?: boolean;
+        /**
+          * Sometimes, nested content will resize within the details component which results in choppy show/hide animations. Set `useCacheHeight` to `true` try to keep animations smooth.
+         */
+        "useCacheHeight"?: boolean;
     }
     /**
      * Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-10-11T14:08:27",
+  "timestamp": "2023-10-13T10:28:48",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.23.1",
@@ -4169,6 +4169,25 @@
           "required": false,
           "getter": false,
           "setter": false
+        },
+        {
+          "name": "useCacheHeight",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "use-cache-height",
+          "reflectToAttr": false,
+          "docs": "Sometimes, nested content will resize within the details component which results in choppy show/hide animations.\nSet `useCacheHeight` to `true` try to keep animations smooth.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
         }
       ],
       "methods": [],

package/docs-vscode.json

@@ -832,6 +832,10 @@
         {
           "name": "open",
           "description": "Should item be open on load"
+        },
+        {
+          "name": "use-cache-height",
+          "description": "Sometimes, nested content will resize within the details component which results in choppy show/hide animations.\nSet `useCacheHeight` to `true` try to keep animations smooth."
         }
       ]
     },

package/hydrate/index.js

@@ -12251,6 +12251,7 @@ class Details {
     this.disabled = false;
     this.noHandle = false;
     this.iconRotation = 90;
+    this.useCacheHeight = false;
   }
   toggleClick() {
     this.stateChanging = true;
@@ -12266,7 +12267,8 @@ class Details {
       this.detailsEl.open = true;
       return;
     }
-    this.bodyEl.style.height = this.contentEl.scrollHeight + 'px';
+    this.cacheHeight = this.contentEl.scrollHeight;
+    this.bodyEl.style.height = this.cacheHeight + 'px';
     displayTransition(this.bodyEl, 'is-shown', false).then(() => {
       this.stateChanging = false;
       this.detailsEl.open = false;
@@ -12287,7 +12289,9 @@ class Details {
       this.stateChanging = false;
       this.bodyEl.style.height = 'auto';
     });
-    this.bodyEl.style.height = this.contentEl.scrollHeight + 'px';
+    this.bodyEl.style.height =
+      (this.useCacheHeight ? this.cacheHeight : this.contentEl.scrollHeight) +
+        'px';
   }
   attachMo() {
     if (this.mo || !this.detailsEl || !Build.isBrowser)
@@ -12346,7 +12350,8 @@ class Details {
       "open": [1540],
       "disabled": [1540],
       "noHandle": [4, "no-handle"],
-      "iconRotation": [2, "icon-rotation"]
+      "iconRotation": [2, "icon-rotation"],
+      "useCacheHeight": [4, "use-cache-height"]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -18355,8 +18360,8 @@ class Grid {
       const css = /* css */ `
       ${this.grids
         .map((bp) => /* css */ `
-          @container (min-width: ${typeof bp.breakpoint === 'number'
-        ? bp.breakpoint + 1 + 'px'
+          @container (min-width: ${!!Number(bp.breakpoint)
+        ? Number(bp.breakpoint) + 1 + 'px'
         : bp.breakpoint}) {
             #${this.gridId}.grid {
               --current-grid-size: "grid size: ${bp.name}";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "5.8.0",
+  "version": "5.8.2",
   "repository": {
     "type": "git",
     "url": "https://git.oxfordnanolabs.local/Digital/nano-components"
@@ -131,7 +131,7 @@
     "nanopore",
     "digital"
   ],
-  "gitHead": "3561b3fd583125bb874ecc8bb961c2ae3e892049",
+  "gitHead": "ba9d867659878990105c5342ca206be2b09cd493",
   "volta": {
     "node": "14.18.1",
     "npm": "8.6.0"

package/dist/cjs/table.worker-31839f14.js.map

@@ -1 +0,0 @@
-{"file":"table.worker-31839f14.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/esm/table.worker-66324663.js.map

@@ -1 +0,0 @@
-{"file":"table.worker-66324663.js","mappings":";;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/nano-components/p-20086faa.entry.js.map

@@ -1 +0,0 @@
-{"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","hasOwnProperty","Array","isArray","gridCss","gridId","Grid","grids","styles","css","map","bp","breakpoint","template","cols","_","i","gItm","join","showHelper","constructSizeArray","sCols","sTpl","mCols","sSize","mTpl","lCols","mSize","lTpl","xlCols","lSize","xlTpl","xxlCols","xlSize","xxlTpl","cacheKey","part","class","id","__decorate","imgCss","Img","_srcSet","onLoad","nanoImgDidLoad","emit","setTimeout","hasLoaded","onError","nanoImgError","onResize","Object","entries","detail","forEach","active","srcOpts","keys","sort","src","length","_src","slice","_srcChanged","addIO","srcChanged","srcSetChanged","srcSet","imgStates","split","bpSrc","filter","lazyChanged","lazy","load","window","removeIO","io","IntersectionObserver","data","isIntersecting","observe","loadError","loadSrc","nanoImgWillLoad","disconnect","undefined","connectedCallback","componentDidLoad","disconnectedCallback","bgStyle","background","loaded","img__bg","autoHeight","img__image","hide","decoding","loading","alt","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 (node.hasOwnProperty(prop)) {\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 (node.hasOwnProperty(prop)) {\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\n@import '../../global/style/nano-theme/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: #{$spacing-medium};\n  --grid-row-gap: #{$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\nlet gridId = 0;\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  private gridId = 'nano-grid-' + gridId++;\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            typeof bp.breakpoint === 'number'\n              ? bp.breakpoint + 1 + 'px'\n              : bp.breakpoint\n          }) {\n            #${this.gridId}.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                  #${this.gridId}.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                  #${this.gridId}.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                    #${this.gridId}.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                    #${this.gridId}.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              #${this.gridId} .grid--helper :nth-child(-n+${bp.cols}) {\n                display: block !important;\n              }\n            `\n            }\n          }\n        `\n        )\n        .join('')}\n    `;\n      return css;\n    };\n\n  componentWillLoad() {\n    this.constructSizeArray();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div part=\"grid\" class=\"grid\" id={this.gridId}>\n          <slot />\n        </div>\n        {this.showHelper && (\n          <div class=\"grid grid--helper\" part=\"helper\">\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  max-block-size: inherit;\n  max-inline-size: inherit;\n  min-height: inherit;\n  min-width: inherit;\n  block-size: inherit;\n  inline-size: inherit;\n  height: inherit;\n  width: inherit;\n  max-height: inherit;\n  max-width: inherit;\n  aspect-ratio: inherit;\n}\n\n.img__loader,\n.img__observer {\n  position: absolute;\n  inset: 0;\n  block-size: 100%;\n  inline-size: 100%;\n  z-index: -1;\n}\n\n.img__image,\n.img__bg {\n  border-radius: inherit;\n  display: block;\n  opacity: 0;\n  transition: 0.5s ease opacity, 0.3s ease filter 0.4s;\n  filter: blur(5px);\n  flex: 1;\n\n  &.loaded {\n    opacity: 1;\n    filter: blur(0);\n\n    @media not all and (min-resolution: 0.001dpcm) {\n      @supports (-webkit-appearance: none) {\n        filter: blur(0);\n      }\n    }\n  }\n}\n\n.img__image {\n  object-fit: inherit;\n  object-position: inherit;\n  max-inline-size: 100%;\n  min-block-size: inherit;\n  max-block-size: inherit;\n  min-height: inherit;\n  min-width: inherit;\n  block-size: auto;\n  inline-size: inherit;\n  height: inherit;\n  width: inherit;\n  max-height: inherit;\n  max-width: inherit;\n  aspect-ratio: inherit;\n\n  &.hide {\n    visibility: hidden;\n\n    &.no-height {\n      block-size: 1px;\n      position: absolute;\n      z-index: -1;\n    }\n  }\n}\n\n.img__bg {\n  background-color: inherit;\n  background-position: inherit;\n  background-size: inherit;\n  background-origin: inherit;\n  background-attachment: inherit;\n  background-repeat: inherit;\n  overflow: auto;\n  padding: var(--padding);\n\n  &.no-height {\n    position: absolute;\n    inset: 0;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Prop,\n  Watch,\n  h,\n  ComponentInterface,\n  Build,\n} from '@stencil/core';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\n/**\n * Img with benefits. Lazy loading. Simple `srcSet` solution for both `<img>` and `background-image` varieties.\n * @slot - Main slot. Only relevant with `<nano-img background>`\n */\n@Component({\n  tag: 'nano-img',\n  styleUrl: 'img.scss',\n  shadow: true,\n})\nexport class Img implements ComponentInterface {\n  private io?: IntersectionObserver;\n  private _srcSet: { [key: string]: { src: string; active: boolean } } = {};\n\n  @Element() host!: HTMLNanoImgElement;\n\n  @State() loadSrc?: string;\n  @State() loadError?: () => void;\n  @State() hasLoaded: boolean = false;\n  @State() imgStates: string = null;\n  @State() _src: string;\n  @Watch('_src')\n  _srcChanged() {\n    this.hasLoaded = false;\n    this.addIO();\n  }\n\n  /** This attribute defines the alternative text describing the image.\n   * Users will see this text displayed if the image URL is wrong, or if the image is not yet downloaded. */\n  @Prop() alt?: string;\n\n  /** The image URL. This attribute is mandatory for the `<img>` element. */\n  @Prop() src!: string;\n  @Watch('src')\n  srcChanged() {\n    this._src = this.src;\n  }\n\n  /** Optional list string providing media sizes with corresponding image srcs.\n   * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` */\n  @Prop() srcSet?: string;\n  @Watch('srcSet')\n  srcSetChanged() {\n    if (!this.srcSet) return;\n\n    delete this._srcSet;\n    this._srcSet = {};\n\n    this.imgStates = this.srcSet\n      .split(',')\n      .map((bpSrc) => {\n        const [bp, src] = bpSrc.split(' ').filter((bp) => bp.length);\n        this._srcSet[bp] = { src: src, active: false };\n        return bp;\n      })\n      .join(', ');\n  }\n\n  /** Render image lazily, when it comes into the browser viewport **/\n  @Prop() lazy: boolean = true;\n  @Watch('lazy')\n  lazyChanged() {\n    if (!this.lazy) this.load();\n  }\n\n  /** Render the image as a background image **/\n  @Prop() background?: boolean;\n\n  /** When the image is rendered as a background, and there is no preset dimensions of the component,\n   * you can set how the component height will be set. Via image size or via the content **/\n  @Prop() autoHeight: 'content' | 'image' = 'content';\n\n  /** Emitted when the img src has been set */\n  @Event() nanoImgWillLoad!: EventEmitter<void>;\n\n  /** Emitted when the image has finished loading */\n  @Event() nanoImgDidLoad!: EventEmitter<void>;\n\n  /** Emitted when the img fails to load */\n  @Event() nanoImgError!: EventEmitter<void>;\n\n  private addIO() {\n    if (!this._src || this.hasLoaded) return;\n    if (!this.lazy) {\n      this.load();\n      return;\n    }\n    if (\n      typeof (window as any) !== 'undefined' &&\n      'IntersectionObserver' in window\n    ) {\n      this.removeIO();\n      this.io = new IntersectionObserver((data) => {\n        if (data[0].isIntersecting) {\n          this.load();\n          this.removeIO();\n        }\n      });\n\n      this.io.observe(this.host);\n    } else setTimeout(() => this.load(), 200);\n  }\n\n  private load() {\n    this.loadError = this.onError;\n    this.loadSrc = this._src;\n    this.nanoImgWillLoad.emit();\n  }\n\n  private onLoad = () => {\n    this.nanoImgDidLoad.emit();\n    setTimeout(() => (this.hasLoaded = true), 50);\n  };\n\n  private onError = () => {\n    this.nanoImgError.emit();\n  };\n\n  private onResize = (e: { detail: ResizeStateChangeEventDetail }) => {\n    Object.entries(e.detail).forEach(([bp, active]) => {\n      this._srcSet[bp].active = active;\n    });\n\n    // sort and find the highest sized matching image.\n    const srcOpts = [];\n    Object.keys(this._srcSet)\n      .sort()\n      .forEach((bp) => {\n        if (this._srcSet[bp].active) srcOpts.push(this._srcSet[bp].src);\n      });\n\n    if (srcOpts.length) this._src = srcOpts.slice(-1)[0];\n    // no matching image? Set back to default\n    else this._src = this.src;\n  };\n\n  private removeIO() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  connectedCallback() {\n    this.srcChanged();\n    this.srcSetChanged();\n    this.lazyChanged();\n  }\n\n  componentDidLoad() {\n    this.addIO();\n  }\n\n  disconnectedCallback() {\n    this.removeIO();\n  }\n\n  render() {\n    const bgStyle = !!this.loadSrc\n      ? { 'background-image': `url(${this.loadSrc})` }\n      : {};\n\n    return (\n      <div class=\"img\">\n        <nano-skeleton class=\"img__loader\"></nano-skeleton>\n        {!!this.background && (\n          <div\n            class={{\n              loaded: this.hasLoaded,\n              img__bg: true,\n              'no-height': this.autoHeight === 'image',\n            }}\n            style={bgStyle}\n          >\n            <slot />\n          </div>\n        )}\n        <img\n          class={{\n            img__image: true,\n            loaded: this.hasLoaded,\n            hide: this.background,\n            'no-height': this.autoHeight === 'content',\n          }}\n          decoding=\"async\"\n          src={Build.isServer ? this.src : this.loadSrc}\n          loading={Build.isServer && this.lazy ? 'lazy' : undefined}\n          alt={this.alt}\n          onLoad={this.onLoad}\n          onError={this.loadError}\n        />\n        <nano-resize-observe\n          class=\"img__observer\"\n          onNanoResizeStateChange={this.onResize}\n          states={this.imgStates}\n        />\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/nano-components/p-2cc0faeb.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{c as t}from"./p-7c0c892a.js";import"./p-d6a04b3a.js";import"./p-ee045579.js";import"./p-7bff5224.js";import"./p-70747f20.js";const o="table.worker";const p="stencil.table.worker";const s=new URL("p-f258383d.js",import.meta.url).href;const r=new Blob(['importScripts("'+s+'")'],{type:"text/javascript"});const c=URL.createObjectURL(r);const e=t(c,o,p);URL.revokeObjectURL(c);export{e as worker,p as workerMsgId,o as workerName,s as workerPath};
-//# sourceMappingURL=p-2cc0faeb.js.map

package/dist/nano-components/p-512194c4.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["detailsCss","Details","this","stateChanging","onKeyDown","e","disabled","key","preventDefault","open","onMouseDown","headerEl","focus","toggleClick","show","hide","nanoClose","nanoClosed","emit","defaultPrevented","detailsEl","bodyEl","style","height","contentEl","scrollHeight","displayTransition","then","requestAnimationFrame","nanoOpen","nanoOpened","attachMo","mo","Build","isBrowser","MutationObserver","changes","change","type","attributeName","observe","attributes","componentWillLoad","hasStartSlot","host","querySelector","hasEndSlot","componentDidLoad","setAttribute","connectedCallback","disconnectedCallback","disconnect","undefined","render","h","part","ref","d","class","details","tabindex","display","noHandle","id","role","s","onClick","transform","iconRotation","name","label","div"],"sources":["./src/components/details/details.scss?tag=nano-details&encapsulation=shadow","./src/components/details/details.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n    * @prop --padding: Default to 1em;\n\n    * @prop --btn-padding: Defaults to var(--padding);\n    * @prop --btn-bg-color: Defaults to var(--nano-color-contrast, #dad6d3);\n    * @prop --btn-bg-color--open: Defaults to var(--nano-color-base, #dad6d3);\n    * @prop --btn-bg-color--hover: Defaults to var(--nano-color-tint, #{map.get($colors, offwhite)});\n\n    * @prop --btn-text-color: Defaults to var(--nano-color-base, #455556);\n    * @prop --btn-text-color--open: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n    * @prop --btn-text-color--hover: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n\n    * @prop --content-transition: Defaults to height .2s ease-out;\n\n    * @prop --border-width: Defaults to none;\n    * @prop --border-color: Defaults to none;\n    * @prop --border-style: Defaults to none;\n    * @prop --border-radius: Defaults to none;\n    * @prop --box-shadow: Defaults to none;\n    * @prop --focus-style: Defaults to #{$control-focus-style}\n  */\n\n  @include text-inherit();\n\n  --padding: 1em;\n  --btn-padding: var(--padding);\n  --btn-bg-color: var(--nano-color-contrast, #dad6d3);\n  --btn-bg-color--open: var(--nano-color-base, #dad6d3);\n  --btn-bg-color--hover: var(--nano-color-tint, #{map.get($colors, offwhite)});\n  --btn-text-color: var(--nano-color-base, #455556);\n  --btn-text-color--open: var(--nano-color-contrast, var(--btn-text-color));\n  --btn-text-color--hover: var(--nano-color-contrast, var(--btn-text-color));\n  --content-transition: height 0.2s ease-out;\n  --border-width: none;\n  --border-color: none;\n  --border-style: none;\n  --border-radius: none;\n  --box-shadow: none;\n  --focus-style: #{$control-focus-style};\n\n  display: block;\n  border-style: var(--border-style);\n  border-width: var(--border-width-dims);\n  border-color: var(--border-color);\n  border-radius: var(--border-radius-dims);\n  box-shadow: var(--box-shadow);\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n}\n\n:host(:last-of-type) {\n  --border-width-dims: 0 var(--border-width) var(--border-width);\n  --border-radius-dims: 0 0 var(--border-radius) var(--border-radius);\n\n  .open .content {\n    border-radius: 0 0 var(--border-radius) var(--border-radius);\n  }\n}\n\n:host(:first-of-type) {\n  --border-radius-dims: var(--border-radius) var(--border-radius) 0 0;\n  --border-width-dims: var(--border-width);\n}\n\n:host(:first-of-type:last-of-type) {\n  --border-radius-dims: var(--border-radius);\n  --border-width-dims: var(--border-width);\n}\n\n:host(:not(:last-of-type):not(:first-of-type)) {\n  --border-width-dims: 0 var(--border-width) var(--border-width);\n}\n\n.header {\n  height: auto;\n  padding: var(--btn-padding);\n  text-align: inherit;\n  position: relative;\n  font-size: 1em;\n  line-height: 1;\n  margin: 0;\n  transition: 0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;\n  display: flex;\n  align-items: center;\n  background: var(--btn-bg-color);\n  color: var(--btn-text-color);\n  border-radius: var(--border-radius-dims);\n  cursor: pointer;\n\n  &::-webkit-details-marker {\n    display: none;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    box-shadow: var(--focus-style);\n    outline: none;\n    position: relative;\n    z-index: 1;\n  }\n\n  &:hover {\n    background: var(--btn-bg-color--hover);\n    color: var(--btn-text-color--hover);\n  }\n\n  .open & {\n    background: var(--btn-bg-color--open);\n    color: var(--btn-text-color--open);\n    border-end-end-radius: 0;\n    border-end-start-radius: 0;\n  }\n\n  .disabled & {\n    cursor: not-allowed;\n  }\n\n  .label {\n    width: 100%;\n    max-width: 100%;\n    max-height: 100%;\n    flex: 1;\n    display: inline-block;\n  }\n\n  .icon {\n    line-height: 0;\n    flex-direction: column;\n    justify-content: center;\n    display: inline-block;\n    color: currentcolor;\n    transition: 0.3s ease transform;\n    transform-origin: center;\n\n    &--start {\n      margin-inline: 0 var(--padding);\n      margin-block: 0;\n    }\n\n    &--end {\n      margin-inline: var(--padding) 0;\n      margin-block: 0;\n    }\n\n    ::slotted(nano-icon) {\n      --color: currentcolor;\n    }\n  }\n}\n\n.body {\n  overflow: hidden;\n  transition: var(--content-transition), 0.2s ease border-radius;\n  outline: none;\n\n  > * {\n    opacity: 0;\n    transition: opacity 0.2s ease-out;\n\n    .open & {\n      opacity: 1;\n    }\n  }\n}\n\n.content {\n  padding: var(--padding);\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  Prop,\n  h,\n  Element,\n  Watch,\n  Build,\n} from '@stencil/core';\nimport { displayTransition } from '../../utils/transitions';\n\n/**\n * A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.\n */\n/**\n * @slot - content that will be hidden / revealed\n * @slot icon-start - used for icons at the start of the handle\n * @slot label - can be used when you wish to insert complex label markup\n * @slot icon-end - used for icons at the end of the handle\n *\n * @part base - the root `details` element\n * @part header - the main `summary` ui control\n * @part label - the text wrapper of the ui control\n * @part icon--start - the icon wrapper at the start of the ui control\n * @part icon--end - the icon wrapper at the end of the ui control\n * @part body - the wrapper around content\n * @part content - the main content wrapper\n */\n@Component({\n  tag: 'nano-details',\n  styleUrl: 'details.scss',\n  shadow: true,\n})\nexport class Details {\n  private hasStartSlot: boolean;\n  private hasEndSlot: boolean;\n  private mo?: MutationObserver;\n  private stateChanging: boolean = false;\n  private bodyEl: HTMLElement;\n  private detailsEl: HTMLDetailsElement;\n  private headerEl: HTMLElement;\n  private contentEl: HTMLDivElement;\n\n  @Element() private host: HTMLNanoDetailsElement;\n\n  /** Summary / handle text. Use the `label` slot for HTML markup */\n  @Prop() label: string = '';\n\n  /** Should item be open on load */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Disables the details so it can't be toggled. */\n  @Prop({ mutable: true, reflect: true }) disabled: boolean = false;\n\n  /** Hide the handle. (You will need to control the hiding / showing of content with script) */\n  @Prop() noHandle: boolean = false;\n\n  /** Icon slot rotation amount (degrees) on open */\n  @Prop() iconRotation: number = 90;\n\n  /**\n   * Emitted when the component opens.\n   * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n   */\n  @Event() nanoOpened: EventEmitter;\n\n  /**\n   * Emitted when the component closes.\n   * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n   */\n  @Event() nanoClosed: EventEmitter;\n\n  @Watch('open')\n  toggleClick() {\n    this.stateChanging = true;\n    if (this.open) this.show();\n    else this.hide();\n  }\n\n  private onKeyDown = (e: KeyboardEvent) => {\n    if (this.stateChanging || this.disabled) return;\n\n    switch (e.key) {\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        this.open = !this.open;\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        this.open = false;\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        this.open = true;\n        break;\n    }\n  };\n\n  private onMouseDown = (e: MouseEvent) => {\n    e.preventDefault();\n    this.headerEl.focus();\n\n    if (this.stateChanging || this.disabled) return;\n    this.open = !this.open;\n  };\n\n  private hide() {\n    const nanoClose = this.nanoClosed.emit(this.open);\n\n    if (nanoClose.defaultPrevented) {\n      this.open = true;\n      this.detailsEl.open = true;\n      return;\n    }\n\n    this.bodyEl.style.height = this.contentEl.scrollHeight + 'px';\n\n    displayTransition(this.bodyEl, 'is-shown', false).then(() => {\n      this.stateChanging = false;\n      this.detailsEl.open = false;\n    });\n\n    requestAnimationFrame(() => {\n      this.bodyEl.style.height = '0px';\n    });\n  }\n\n  private show() {\n    const nanoOpen = this.nanoOpened.emit();\n    this.detailsEl.open = true;\n\n    if (nanoOpen.defaultPrevented) {\n      this.open = false;\n      this.detailsEl.open = false;\n      return;\n    }\n\n    displayTransition(this.bodyEl, 'is-shown', true).then(() => {\n      this.stateChanging = false;\n      this.bodyEl.style.height = 'auto';\n    });\n    this.bodyEl.style.height = this.contentEl.scrollHeight + 'px';\n  }\n\n  private attachMo() {\n    if (this.mo || !this.detailsEl || !Build.isBrowser) return;\n\n    this.mo = new MutationObserver((changes) => {\n      if (this.stateChanging) return;\n\n      for (const change of changes) {\n        if (change.type === 'attributes' && change.attributeName === 'open') {\n          this.open = this.detailsEl.open;\n        }\n      }\n    });\n    this.mo.observe(this.detailsEl, { attributes: true });\n  }\n\n  componentWillLoad() {\n    this.hasStartSlot = !!this.host.querySelector('[slot=\"icon-start\"]');\n    this.hasEndSlot = !!this.host.querySelector('[slot=\"icon-end\"]');\n  }\n\n  componentDidLoad() {\n    this.bodyEl.style.height = this.open ? 'auto' : '0';\n    if (this.open) this.detailsEl.setAttribute('open', 'true');\n    this.attachMo();\n  }\n\n  connectedCallback() {\n    this.attachMo();\n  }\n\n  disconnectedCallback() {\n    if (this.mo) {\n      this.mo.disconnect();\n      this.mo = undefined;\n    }\n  }\n\n  render() {\n    return (\n      <details\n        part=\"base\"\n        ref={(d: HTMLDetailsElement) => (this.detailsEl = d)}\n        class={{\n          details: true,\n          open: this.open,\n          disabled: this.disabled,\n        }}\n      >\n        <summary\n          part=\"header\"\n          aria-controls=\"content\"\n          aria-expanded={this.open ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          tabindex={this.disabled ? '-1' : '0'}\n          style={{ display: this.noHandle ? 'none' : '' }}\n          id=\"header\"\n          role=\"button\"\n          class=\"header\"\n          ref={(s) => (this.headerEl = s)}\n          onKeyDown={this.onKeyDown}\n          onClick={this.onMouseDown}\n        >\n          {this.hasStartSlot ? (\n            <span\n              part=\"icon--start\"\n              class=\"icon icon--start\"\n              style={{\n                transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n              }}\n            >\n              <slot name=\"icon-start\" />\n            </span>\n          ) : (\n            ''\n          )}\n          <div part=\"label\" class=\"label\">\n            {this.label ? this.label : <slot name=\"label\" />}\n          </div>\n          {this.hasEndSlot ? (\n            <span\n              part=\"icon--end\"\n              class=\"icon icon--end\"\n              style={{\n                transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n              }}\n            >\n              <slot name=\"icon-end\" />\n            </span>\n          ) : (\n            ''\n          )}\n        </summary>\n        <div\n          part=\"body\"\n          class=\"body\"\n          ref={(div) => (this.bodyEl = div)}\n          tabindex=\"-1\"\n          role=\"region\"\n          aria-labelledby=\"header\"\n        >\n          <div\n            part=\"content\"\n            ref={(div) => (this.contentEl = div)}\n            class=\"content\"\n            id=\"content\"\n          >\n            <slot />\n          </div>\n        </div>\n      </details>\n    );\n  }\n}\n"],"mappings":"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"}