@nanoporetech-digital/components 5.8.1 → 5.8.3

package/hydrate/index.js

@@ -12165,37 +12165,39 @@ class Demo {
  * - OnHide remove show class, listen for transition end, then display: none on finish
  * - OnShow, display block on start then add a show class
  * @param el
- * @param className
- * @param show
+ * @param options
  * @returns a promise of resolving as either 'show' or 'hidden'
  */
-const displayTransition = (el, className, show = true, showDisplay = 'block') => {
+const displayTransition = (el, options) => {
+  const opts = Object.assign({ className: '', show: true, showDisplay: 'block' }, options);
   return new Promise((resolve) => {
-    if (show) {
-      el.addEventListener('transitionend', (e) => {
-        if (e.target === el ||
-          e.composedPath().some((el) => el === e.target)) {
-          resolve('shown');
-        }
-      }, { once: true });
-      el.style.display = showDisplay;
+    const showCb = (e) => {
+      if (e.target === el || e.composedPath().some((el) => el === e.target)) {
+        resolve('shown');
+        el.removeEventListener('transitionend', showCb);
+      }
+    };
+    const hideCb = (e) => {
+      if (e.target === el || e.composedPath().some((el) => el === e.target)) {
+        el.style.display = 'none';
+        resolve('hidden');
+        el.removeEventListener('transitionend', hideCb);
+      }
+    };
+    if (opts.show) {
+      el.addEventListener('transitionend', showCb);
+      el.style.display = opts.showDisplay;
       el.dataset.displayTransition = 'true';
-      setTimeout(() => el.classList.add(className), 20);
+      setTimeout(() => el.classList.add(opts.className), 20);
     }
     else {
-      el.addEventListener('transitionend', (e) => {
-        if (e.target === el ||
-          e.composedPath().some((el) => el === e.target)) {
-          el.style.display = 'none';
-          resolve('hidden');
-        }
-      }, { once: true });
-      el.classList.remove(className);
+      el.addEventListener('transitionend', hideCb);
+      el.classList.remove(opts.className);
     }
   });
 };
 
-const detailsCss = "/*!@:host*/.sc-nano-details-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-details,*.sc-nano-details::before,*.sc-nano-details::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-details{display:none !important}/*!@:host*/.sc-nano-details-h{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;--padding:1em;--btn-padding:var(--padding);--btn-bg-color:var(--nano-color-contrast, #dad6d3);--btn-bg-color--open:var(--nano-color-base, #dad6d3);--btn-bg-color--hover:var(--nano-color-tint, #f9f9fb);--btn-text-color:var(--nano-color-base, #455556);--btn-text-color--open:var(--nano-color-contrast, var(--btn-text-color));--btn-text-color--hover:var(--nano-color-contrast, var(--btn-text-color));--content-transition:height 0.2s ease-out;--border-width:none;--border-color:none;--border-style:none;--border-radius:none;--box-shadow:none;--focus-style:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:block;border-style:var(--border-style);border-width:var(--border-width-dims);border-color:var(--border-color);border-radius:var(--border-radius-dims);box-shadow:var(--box-shadow)}/*!@:host([disabled])*/[disabled].sc-nano-details-h{opacity:0.5}/*!@:host(:last-of-type)*/.sc-nano-details-h:last-of-type{--border-width-dims:0 var(--border-width) var(--border-width);--border-radius-dims:0 0 var(--border-radius) var(--border-radius)}/*!@:host(:last-of-type) .open .content*/.sc-nano-details-h:last-of-type .open.sc-nano-details .content.sc-nano-details{border-radius:0 0 var(--border-radius) var(--border-radius)}/*!@:host(:first-of-type)*/.sc-nano-details-h:first-of-type{--border-radius-dims:var(--border-radius) var(--border-radius) 0 0;--border-width-dims:var(--border-width)}/*!@:host(:first-of-type:last-of-type)*/.sc-nano-details-h:first-of-type:last-of-type{--border-radius-dims:var(--border-radius);--border-width-dims:var(--border-width)}/*!@:host(:not(:last-of-type):not(:first-of-type))*/.sc-nano-details-h:not(:last-of-type):not(:first-of-type){--border-width-dims:0 var(--border-width) var(--border-width)}/*!@.header*/.header.sc-nano-details{height:auto;padding:var(--btn-padding);text-align:inherit;position:relative;font-size:1em;line-height:1;margin:0;transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;display:flex;align-items:center;background:var(--btn-bg-color);color:var(--btn-text-color);border-radius:var(--border-radius-dims);cursor:pointer}/*!@.header::-webkit-details-marker*/.header.sc-nano-details::-webkit-details-marker{display:none}/*!@.header:focus*/.header.sc-nano-details:focus{outline:none}/*!@.header:focus-visible*/.header.sc-nano-details:focus-visible{box-shadow:var(--focus-style);outline:none;position:relative;z-index:1}/*!@.header:hover*/.header.sc-nano-details:hover{background:var(--btn-bg-color--hover);color:var(--btn-text-color--hover)}/*!@.open .header*/.open.sc-nano-details .header.sc-nano-details{background:var(--btn-bg-color--open);color:var(--btn-text-color--open);border-end-end-radius:0;border-end-start-radius:0}/*!@.disabled .header*/.disabled.sc-nano-details .header.sc-nano-details{cursor:not-allowed}/*!@.header .label*/.header.sc-nano-details .label.sc-nano-details{width:100%;max-width:100%;max-height:100%;flex:1;display:inline-block}/*!@.header .icon*/.header.sc-nano-details .icon.sc-nano-details{line-height:0;flex-direction:column;justify-content:center;display:inline-block;color:currentcolor;transition:0.3s ease transform;transform-origin:center}/*!@.header .icon--start*/.header.sc-nano-details .icon--start.sc-nano-details{margin-inline:0 var(--padding);margin-block:0}/*!@.header .icon--end*/.header.sc-nano-details .icon--end.sc-nano-details{margin-inline:var(--padding) 0;margin-block:0}/*!@.header .icon ::slotted(nano-icon)*/.header .icon .sc-nano-details-s>nano-icon{--color:currentcolor}/*!@.body*/.body.sc-nano-details{overflow:hidden;transition:var(--content-transition), 0.2s ease border-radius;outline:none}/*!@.body > **/.body.sc-nano-details>*.sc-nano-details{opacity:0;transition:opacity 0.2s ease-out}/*!@.open .body > **/.open.sc-nano-details .body.sc-nano-details>*.sc-nano-details{opacity:1}/*!@.content*/.content.sc-nano-details{padding:var(--padding)}";
+const detailsCss = "/*!@:host*/.sc-nano-details-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-details,*.sc-nano-details::before,*.sc-nano-details::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-details{display:none !important}/*!@:host*/.sc-nano-details-h{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;--padding:1em;--btn-padding:var(--padding);--content-padding:var(--padding);--btn-bg-color:var(--nano-color-contrast, #dad6d3);--btn-bg-color--open:var(--nano-color-base, #dad6d3);--btn-bg-color--hover:var(--nano-color-tint, #f9f9fb);--btn-text-color:var(--nano-color-base, #455556);--btn-text-color--open:var(--nano-color-contrast, var(--btn-text-color));--btn-text-color--hover:var(--nano-color-contrast, var(--btn-text-color));--transition-duration:0.2s;--border-width:none;--border-color:none;--border-style:none;--border-radius:none;--box-shadow:none;--focus-style:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:block;border-style:var(--border-style);border-width:var(--border-width-dims);border-color:var(--border-color);border-radius:var(--border-radius-dims);box-shadow:var(--box-shadow)}/*!@:host([disabled])*/[disabled].sc-nano-details-h{opacity:0.5}/*!@:host(:last-of-type)*/.sc-nano-details-h:last-of-type{--border-width-dims:0 var(--border-width) var(--border-width);--border-radius-dims:0 0 var(--border-radius) var(--border-radius)}/*!@:host(:last-of-type) .open .content*/.sc-nano-details-h:last-of-type .open.sc-nano-details .content.sc-nano-details{border-radius:0 0 var(--border-radius) var(--border-radius)}/*!@:host(:first-of-type)*/.sc-nano-details-h:first-of-type{--border-radius-dims:var(--border-radius) var(--border-radius) 0 0;--border-width-dims:var(--border-width)}/*!@:host(:first-of-type:last-of-type)*/.sc-nano-details-h:first-of-type:last-of-type{--border-radius-dims:var(--border-radius);--border-width-dims:var(--border-width)}/*!@:host(:not(:last-of-type):not(:first-of-type))*/.sc-nano-details-h:not(:last-of-type):not(:first-of-type){--border-width-dims:0 var(--border-width) var(--border-width)}/*!@.header*/.header.sc-nano-details{height:auto;padding:var(--btn-padding);text-align:inherit;position:relative;font-size:1em;line-height:1;margin:0;transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;display:flex;align-items:center;background:var(--btn-bg-color);color:var(--btn-text-color);border-radius:var(--border-radius-dims);cursor:pointer}/*!@.header::-webkit-details-marker*/.header.sc-nano-details::-webkit-details-marker{display:none}/*!@.header:focus*/.header.sc-nano-details:focus{outline:none}/*!@.header:focus-visible*/.header.sc-nano-details:focus-visible{box-shadow:var(--focus-style);outline:none;position:relative;z-index:1}/*!@.header:hover*/.header.sc-nano-details:hover{background:var(--btn-bg-color--hover);color:var(--btn-text-color--hover)}/*!@.open .header*/.open.sc-nano-details .header.sc-nano-details{background:var(--btn-bg-color--open);color:var(--btn-text-color--open);border-end-end-radius:0;border-end-start-radius:0}/*!@.disabled .header*/.disabled.sc-nano-details .header.sc-nano-details{cursor:not-allowed}/*!@.header .label*/.header.sc-nano-details .label.sc-nano-details{width:100%;max-width:100%;max-height:100%;flex:1;display:inline-block}/*!@.header .icon*/.header.sc-nano-details .icon.sc-nano-details{line-height:0;flex-direction:column;justify-content:center;display:inline-block;color:currentcolor;transition:0.3s ease transform;transform-origin:center}/*!@.header .icon--start*/.header.sc-nano-details .icon--start.sc-nano-details{margin-inline:0 var(--btn-padding);margin-block:0}/*!@.header .icon--end*/.header.sc-nano-details .icon--end.sc-nano-details{margin-inline:var(--btn-padding) 0;margin-block:0}/*!@.header .icon ::slotted(nano-icon)*/.header .icon .sc-nano-details-s>nano-icon{--color:currentcolor}/*!@.body*/.body.sc-nano-details{overflow:hidden;transition:height var(--transition-duration, 0.3s) ease-out, 0.2s ease border-radius;outline:none}/*!@.is-hidden .body > **/.is-hidden.sc-nano-details .body.sc-nano-details>*.sc-nano-details{animation:fade 0.1s ease reverse}/*!@.open .body > **/.open.sc-nano-details .body.sc-nano-details>*.sc-nano-details{animation:fade var(--transition-duration, 0.3s) ease forwards}/*!@.content*/.content.sc-nano-details{padding:var(--content-padding)}@keyframes fade{from{opacity:0}to{opacity:1}}";
 
 /**
  * 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.
@@ -12269,9 +12271,14 @@ class Details {
     }
     this.cacheHeight = this.contentEl.scrollHeight;
     this.bodyEl.style.height = this.cacheHeight + 'px';
-    displayTransition(this.bodyEl, 'is-shown', false).then(() => {
+    displayTransition(this.bodyEl, {
+      className: 'is-shown',
+      show: false,
+      transitionProp: 'height',
+    }).then(() => {
       this.stateChanging = false;
       this.detailsEl.open = false;
+      this.bodyEl.classList.add('is-hidden');
     });
     requestAnimationFrame(() => {
       this.bodyEl.style.height = '0px';
@@ -12285,7 +12292,11 @@ class Details {
       this.detailsEl.open = false;
       return;
     }
-    displayTransition(this.bodyEl, 'is-shown', true).then(() => {
+    displayTransition(this.bodyEl, {
+      className: 'is-shown',
+      show: true,
+      transitionProp: 'height',
+    }).then(() => {
       this.stateChanging = false;
       this.bodyEl.style.height = 'auto';
     });
@@ -17111,7 +17122,10 @@ class GlobalNav {
     }
   }
   async handleUserMenu() {
-    await displayTransition(this.userLinkPanel, 'show', this.userMenuOpen);
+    await displayTransition(this.userLinkPanel, {
+      className: 'show',
+      show: this.userMenuOpen,
+    });
     if (this.userMenuOpen) {
       this.userLinkPanel.focus();
       this.userLinkPanel.addEventListener('focusout', this.onUserMenuBlur);
@@ -18336,7 +18350,6 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
   if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
     return Reflect.metadata(k, v);
 };
-let gridId = 0;
 /**
  * A lightweight, context-aware CSS grid implementation.
  *
@@ -18355,15 +18368,14 @@ class Grid {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.grids = [];
-    this.gridId = 'nano-grid-' + gridId++;
     this.styles = () => {
       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 + 1)
+        ? Number(bp.breakpoint) + 1 + 'px'
         : bp.breakpoint}) {
-            #${this.gridId}.grid {
+            [cache-key="${this.cacheKey}"].grid {
               --current-grid-size: "grid size: ${bp.name}";
               ${bp.template
         ? `grid-template: ${bp.template};`
@@ -18373,11 +18385,11 @@ class Grid {
         .map((_, i) => {
         const gItm = i + 1;
         return /* css */ `
-                  #${this.gridId}.grid > [grid-states~="${bp.name}-col-start-${gItm}"],
+                  [cache-key="${this.cacheKey}"].grid > [grid-states~="${bp.name}-col-start-${gItm}"],
                   ::slotted([grid-states~="${bp.name}-col-start-${gItm}"]) {
                     grid-column-start: ${gItm} !important;
                   }
-                  #${this.gridId}.grid > [grid-states~="${bp.name}-col-span-${gItm}"],
+                  [cache-key="${this.cacheKey}"].grid > [grid-states~="${bp.name}-col-span-${gItm}"],
                   ::slotted([grid-states~="${bp.name}-col-span-${gItm}"]) {
                     grid-column-end: span ${gItm} !important;
                   }
@@ -18388,23 +18400,24 @@ class Grid {
         .map((_, i) => {
         const gItm = i + 1;
         return /* css */ `
-                    #${this.gridId}.grid > [grid-states~="${bp.name}-row-start-${gItm}"],
+                    [cache-key="${this.cacheKey}"].grid > [grid-states~="${bp.name}-row-start-${gItm}"],
                     ::slotted([grid-states~="${bp.name}-row-start-${gItm}"]) {
                       grid-row-start: ${gItm} !important;
                     }
-                    #${this.gridId}.grid > [grid-states~="${bp.name}-row-span-${gItm}"],
+                    [cache-key="${this.cacheKey}"].grid > [grid-states~="${bp.name}-row-span-${gItm}"],
                     ::slotted([grid-states~="${bp.name}-row-span-${gItm}"]) {
                       grid-row-end: span ${gItm} !important;
                     }
                 `;
       })
         .join('')}
-            ${this.showHelper &&
-        /* css */ `
-              #${this.gridId} .grid--helper :nth-child(-n+${bp.cols}) {
-                display: block !important;
-              }
-            `}
+            ${this.showHelper
+        ? /* css */ `
+                [cache-key="${this.cacheKey}"] .grid--helper :nth-child(-n+${bp.cols}) {
+                  display: block !important;
+                }
+              `
+        : ''}
           }
         `)
         .join('')}
@@ -18476,7 +18489,7 @@ class Grid {
     this.constructSizeArray();
   }
   render() {
-    return (hAsync(Host, null, hAsync("div", { part: "grid", class: "grid", id: this.gridId }, hAsync("slot", null)), this.showHelper && (hAsync("div", { class: "grid grid--helper", part: "helper" }, [...Array(24)].map(() => (hAsync("div", { class: "grid__helper-item" })))))));
+    return (hAsync(Host, null, hAsync("div", { part: "grid", class: "grid", "cache-key": this.cacheKey }, hAsync("slot", null)), this.showHelper && (hAsync("div", { class: "grid grid--helper", part: "helper" }, [...Array(24)].map(() => (hAsync("div", { class: "grid__helper-item" })))))));
   }
   static get watchers() { return {
     "sTpl": ["constructSizeArray"],
@@ -20038,7 +20051,10 @@ class NavItem {
       if (!this.hasSecondarySlot || !this.didOpen)
         return;
       this.open = false;
-      await displayTransition(this.secondaryDiv, 'open', false);
+      await displayTransition(this.secondaryDiv, {
+        className: 'open',
+        show: false,
+      });
       this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });
       this.didOpen = false;
     };
@@ -20050,7 +20066,10 @@ class NavItem {
       if (!this.hasSecondarySlot || this.didOpen)
         return;
       this.open = true;
-      await displayTransition(this.secondaryDiv, 'open', true);
+      await displayTransition(this.secondaryDiv, {
+        className: 'open',
+        show: true,
+      });
       this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });
       this.didOpen = true;
     };
@@ -28662,12 +28681,18 @@ class TabGroup {
   hideRightBtn() {
     if (!this.rightBtn)
       return;
-    displayTransition(this.rightBtn, 'is-shown', !this.hideControlRight);
+    displayTransition(this.rightBtn, {
+      className: 'is-shown',
+      show: !this.hideControlRight,
+    });
   }
   hideLeftBtn() {
     if (!this.leftBtn)
       return;
-    displayTransition(this.leftBtn, 'is-shown', !this.hideControlLeft);
+    displayTransition(this.leftBtn, {
+      className: 'is-shown',
+      show: !this.hideControlLeft,
+    });
   }
   watchScrollControls() {
     if (this.hasScrollControls)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "5.8.1",
+  "version": "5.8.3",
   "repository": {
     "type": "git",
     "url": "https://git.oxfordnanolabs.local/Digital/nano-components"
@@ -131,7 +131,7 @@
     "nanopore",
     "digital"
   ],
-  "gitHead": "fed5a165db8918f46d56956446b279a735c3e546",
+  "gitHead": "7b65fb267760ce988dad75e884a2b372737d085b",
   "volta": {
     "node": "14.18.1",
     "npm": "8.6.0"

package/dist/cjs/table.worker-ba6685a0.js.map

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

package/dist/cjs/transitions-1205f12b.js

@@ -1,48 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-'use strict';
-
-/**
- * Quality of life for transition handling.
- * Adds / removes transitionend events. Resolves on complete
- */
-/**
- * handles hiding and showing elements properly (with display),
- * along with transitions, so they are no longer viewable in the dom.
- * - OnHide remove show class, listen for transition end, then display: none on finish
- * - OnShow, display block on start then add a show class
- * @param el
- * @param className
- * @param show
- * @returns a promise of resolving as either 'show' or 'hidden'
- */
-const displayTransition = (el, className, show = true, showDisplay = 'block') => {
-  return new Promise((resolve) => {
-    if (show) {
-      el.addEventListener('transitionend', (e) => {
-        if (e.target === el ||
-          e.composedPath().some((el) => el === e.target)) {
-          resolve('shown');
-        }
-      }, { once: true });
-      el.style.display = showDisplay;
-      el.dataset.displayTransition = 'true';
-      setTimeout(() => el.classList.add(className), 20);
-    }
-    else {
-      el.addEventListener('transitionend', (e) => {
-        if (e.target === el ||
-          e.composedPath().some((el) => el === e.target)) {
-          el.style.display = 'none';
-          resolve('hidden');
-        }
-      }, { once: true });
-      el.classList.remove(className);
-    }
-  });
-};
-
-exports.displayTransition = displayTransition;
-
-//# sourceMappingURL=transitions-1205f12b.js.map

package/dist/cjs/transitions-1205f12b.js.map

@@ -1 +0,0 @@
-{"file":"transitions-1205f12b.js","mappings":";;;;;AAAA;;;;AAiBA;;;;;;;;;;MAUa,iBAAiB,GAAG,CAC/B,EAAe,EACf,SAAiB,EACjB,OAAgB,IAAI,EACpB,cAAsB,OAAO;EAE7B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO;IACzB,IAAI,IAAI,EAAE;MACR,EAAE,CAAC,gBAAgB,CACjB,eAAe,EACf,CAAC,CAAQ;QACP,IACE,CAAC,CAAC,MAAM,KAAK,EAAE;UACf,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,EAC9C;UACA,OAAO,CAAC,OAAO,CAAC,CAAC;SAClB;OACF,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;MACF,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,WAAW,CAAC;MAC/B,EAAE,CAAC,OAAO,CAAC,iBAAiB,GAAG,MAAM,CAAC;MACtC,UAAU,CAAC,MAAM,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAC;KACnD;SAAM;MACL,EAAE,CAAC,gBAAgB,CACjB,eAAe,EACf,CAAC,CAAQ;QACP,IACE,CAAC,CAAC,MAAM,KAAK,EAAE;UACf,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,EAC9C;UACA,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;UAC1B,OAAO,CAAC,QAAQ,CAAC,CAAC;SACnB;OACF,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;MACF,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;KAChC;GACF,CAAC,CAAC;AACL;;;;","names":[],"sources":["./src/utils/transitions.ts"],"sourcesContent":["/**\n * Quality of life for transition handling.\n * Adds / removes transitionend events. Resolves on complete\n */\nexport const transitionDone = (\n  el: HTMLElement\n): Promise<'shown' | 'hidden'> => {\n  return new Promise((resolve) => {\n    const callback = () => {\n      el.removeEventListener('transitionend', callback);\n      resolve;\n    };\n    el.addEventListener('transitionend', callback);\n    // ??\n  });\n};\n\n/**\n * handles hiding and showing elements properly (with display),\n * along with transitions, so they are no longer viewable in the dom.\n * - OnHide remove show class, listen for transition end, then display: none on finish\n * - OnShow, display block on start then add a show class\n * @param el\n * @param className\n * @param show\n * @returns a promise of resolving as either 'show' or 'hidden'\n */\nexport const displayTransition = (\n  el: HTMLElement,\n  className: string,\n  show: boolean = true,\n  showDisplay: string = 'block'\n): Promise<'shown' | 'hidden'> => {\n  return new Promise((resolve) => {\n    if (show) {\n      el.addEventListener(\n        'transitionend',\n        (e: Event) => {\n          if (\n            e.target === el ||\n            e.composedPath().some((el) => el === e.target)\n          ) {\n            resolve('shown');\n          }\n        },\n        { once: true }\n      );\n      el.style.display = showDisplay;\n      el.dataset.displayTransition = 'true';\n      setTimeout(() => el.classList.add(className), 20);\n    } else {\n      el.addEventListener(\n        'transitionend',\n        (e: Event) => {\n          if (\n            e.target === el ||\n            e.composedPath().some((el) => el === e.target)\n          ) {\n            el.style.display = 'none';\n            resolve('hidden');\n          }\n        },\n        { once: true }\n      );\n      el.classList.remove(className);\n    }\n  });\n};\n"],"version":3}

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

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

package/dist/esm/transitions-686c5fec.js

@@ -1,46 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-/**
- * Quality of life for transition handling.
- * Adds / removes transitionend events. Resolves on complete
- */
-/**
- * handles hiding and showing elements properly (with display),
- * along with transitions, so they are no longer viewable in the dom.
- * - OnHide remove show class, listen for transition end, then display: none on finish
- * - OnShow, display block on start then add a show class
- * @param el
- * @param className
- * @param show
- * @returns a promise of resolving as either 'show' or 'hidden'
- */
-const displayTransition = (el, className, show = true, showDisplay = 'block') => {
-  return new Promise((resolve) => {
-    if (show) {
-      el.addEventListener('transitionend', (e) => {
-        if (e.target === el ||
-          e.composedPath().some((el) => el === e.target)) {
-          resolve('shown');
-        }
-      }, { once: true });
-      el.style.display = showDisplay;
-      el.dataset.displayTransition = 'true';
-      setTimeout(() => el.classList.add(className), 20);
-    }
-    else {
-      el.addEventListener('transitionend', (e) => {
-        if (e.target === el ||
-          e.composedPath().some((el) => el === e.target)) {
-          el.style.display = 'none';
-          resolve('hidden');
-        }
-      }, { once: true });
-      el.classList.remove(className);
-    }
-  });
-};
-
-export { displayTransition as d };
-
-//# sourceMappingURL=transitions-686c5fec.js.map

package/dist/esm/transitions-686c5fec.js.map

@@ -1 +0,0 @@
-{"file":"transitions-686c5fec.js","mappings":";;;AAAA;;;;AAiBA;;;;;;;;;;MAUa,iBAAiB,GAAG,CAC/B,EAAe,EACf,SAAiB,EACjB,OAAgB,IAAI,EACpB,cAAsB,OAAO;EAE7B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO;IACzB,IAAI,IAAI,EAAE;MACR,EAAE,CAAC,gBAAgB,CACjB,eAAe,EACf,CAAC,CAAQ;QACP,IACE,CAAC,CAAC,MAAM,KAAK,EAAE;UACf,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,EAC9C;UACA,OAAO,CAAC,OAAO,CAAC,CAAC;SAClB;OACF,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;MACF,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,WAAW,CAAC;MAC/B,EAAE,CAAC,OAAO,CAAC,iBAAiB,GAAG,MAAM,CAAC;MACtC,UAAU,CAAC,MAAM,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAC;KACnD;SAAM;MACL,EAAE,CAAC,gBAAgB,CACjB,eAAe,EACf,CAAC,CAAQ;QACP,IACE,CAAC,CAAC,MAAM,KAAK,EAAE;UACf,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,EAC9C;UACA,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;UAC1B,OAAO,CAAC,QAAQ,CAAC,CAAC;SACnB;OACF,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;MACF,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;KAChC;GACF,CAAC,CAAC;AACL;;;;","names":[],"sources":["./src/utils/transitions.ts"],"sourcesContent":["/**\n * Quality of life for transition handling.\n * Adds / removes transitionend events. Resolves on complete\n */\nexport const transitionDone = (\n  el: HTMLElement\n): Promise<'shown' | 'hidden'> => {\n  return new Promise((resolve) => {\n    const callback = () => {\n      el.removeEventListener('transitionend', callback);\n      resolve;\n    };\n    el.addEventListener('transitionend', callback);\n    // ??\n  });\n};\n\n/**\n * handles hiding and showing elements properly (with display),\n * along with transitions, so they are no longer viewable in the dom.\n * - OnHide remove show class, listen for transition end, then display: none on finish\n * - OnShow, display block on start then add a show class\n * @param el\n * @param className\n * @param show\n * @returns a promise of resolving as either 'show' or 'hidden'\n */\nexport const displayTransition = (\n  el: HTMLElement,\n  className: string,\n  show: boolean = true,\n  showDisplay: string = 'block'\n): Promise<'shown' | 'hidden'> => {\n  return new Promise((resolve) => {\n    if (show) {\n      el.addEventListener(\n        'transitionend',\n        (e: Event) => {\n          if (\n            e.target === el ||\n            e.composedPath().some((el) => el === e.target)\n          ) {\n            resolve('shown');\n          }\n        },\n        { once: true }\n      );\n      el.style.display = showDisplay;\n      el.dataset.displayTransition = 'true';\n      setTimeout(() => el.classList.add(className), 20);\n    } else {\n      el.addEventListener(\n        'transitionend',\n        (e: Event) => {\n          if (\n            e.target === el ||\n            e.composedPath().some((el) => el === e.target)\n          ) {\n            el.style.display = 'none';\n            resolve('hidden');\n          }\n        },\n        { once: true }\n      );\n      el.classList.remove(className);\n    }\n  });\n};\n"],"version":3}

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

@@ -1,5 +0,0 @@
-/*!
- * 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

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-5ca9275c.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as t,c as r,B as e,h as o,g as i}from"./p-d6a04b3a.js";import{d as s}from"./p-f6de2d5d.js";const a=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;--padding:1em;--btn-padding:var(--padding);--btn-bg-color:var(--nano-color-contrast, #dad6d3);--btn-bg-color--open:var(--nano-color-base, #dad6d3);--btn-bg-color--hover:var(--nano-color-tint, #f9f9fb);--btn-text-color:var(--nano-color-base, #455556);--btn-text-color--open:var(--nano-color-contrast, var(--btn-text-color));--btn-text-color--hover:var(--nano-color-contrast, var(--btn-text-color));--content-transition:height 0.2s ease-out;--border-width:none;--border-color:none;--border-style:none;--border-radius:none;--box-shadow:none;--focus-style:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:block;border-style:var(--border-style);border-width:var(--border-width-dims);border-color:var(--border-color);border-radius:var(--border-radius-dims);box-shadow:var(--box-shadow)}:host([disabled]){opacity:0.5}:host(:last-of-type){--border-width-dims:0 var(--border-width) var(--border-width);--border-radius-dims:0 0 var(--border-radius) var(--border-radius)}:host(:last-of-type) .open .content{border-radius:0 0 var(--border-radius) var(--border-radius)}:host(:first-of-type){--border-radius-dims:var(--border-radius) var(--border-radius) 0 0;--border-width-dims:var(--border-width)}:host(:first-of-type:last-of-type){--border-radius-dims:var(--border-radius);--border-width-dims:var(--border-width)}:host(:not(:last-of-type):not(:first-of-type)){--border-width-dims:0 var(--border-width) var(--border-width)}.header{height:auto;padding:var(--btn-padding);text-align:inherit;position:relative;font-size:1em;line-height:1;margin:0;transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;display:flex;align-items:center;background:var(--btn-bg-color);color:var(--btn-text-color);border-radius:var(--border-radius-dims);cursor:pointer}.header::-webkit-details-marker{display:none}.header:focus{outline:none}.header:focus-visible{box-shadow:var(--focus-style);outline:none;position:relative;z-index:1}.header:hover{background:var(--btn-bg-color--hover);color:var(--btn-text-color--hover)}.open .header{background:var(--btn-bg-color--open);color:var(--btn-text-color--open);border-end-end-radius:0;border-end-start-radius:0}.disabled .header{cursor:not-allowed}.header .label{width:100%;max-width:100%;max-height:100%;flex:1;display:inline-block}.header .icon{line-height:0;flex-direction:column;justify-content:center;display:inline-block;color:currentcolor;transition:0.3s ease transform;transform-origin:center}.header .icon--start{margin-inline:0 var(--padding);margin-block:0}.header .icon--end{margin-inline:var(--padding) 0;margin-block:0}.header .icon ::slotted(nano-icon){--color:currentcolor}.body{overflow:hidden;transition:var(--content-transition), 0.2s ease border-radius;outline:none}.body>*{opacity:0;transition:opacity 0.2s ease-out}.open .body>*{opacity:1}.content{padding:var(--padding)}";const n=class{constructor(e){t(this,e);this.nanoOpened=r(this,"nanoOpened",7);this.nanoClosed=r(this,"nanoClosed",7);this.stateChanging=false;this.onKeyDown=t=>{if(this.stateChanging||this.disabled)return;switch(t.key){case"Enter":case" ":t.preventDefault();this.open=!this.open;break;case"ArrowUp":t.preventDefault();this.open=false;break;case"ArrowDown":t.preventDefault();this.open=true;break}};this.onMouseDown=t=>{t.preventDefault();this.headerEl.focus();if(this.stateChanging||this.disabled)return;this.open=!this.open};this.label="";this.open=false;this.disabled=false;this.noHandle=false;this.iconRotation=90;this.useCacheHeight=false}toggleClick(){this.stateChanging=true;if(this.open)this.show();else this.hide()}hide(){const t=this.nanoClosed.emit(this.open);if(t.defaultPrevented){this.open=true;this.detailsEl.open=true;return}this.cacheHeight=this.contentEl.scrollHeight;this.bodyEl.style.height=this.cacheHeight+"px";s(this.bodyEl,"is-shown",false).then((()=>{this.stateChanging=false;this.detailsEl.open=false}));requestAnimationFrame((()=>{this.bodyEl.style.height="0px"}))}show(){const t=this.nanoOpened.emit();this.detailsEl.open=true;if(t.defaultPrevented){this.open=false;this.detailsEl.open=false;return}s(this.bodyEl,"is-shown",true).then((()=>{this.stateChanging=false;this.bodyEl.style.height="auto"}));this.bodyEl.style.height=(this.useCacheHeight?this.cacheHeight:this.contentEl.scrollHeight)+"px"}attachMo(){if(this.mo||!this.detailsEl||!e.isBrowser)return;this.mo=new MutationObserver((t=>{if(this.stateChanging)return;for(const r of t){if(r.type==="attributes"&&r.attributeName==="open"){this.open=this.detailsEl.open}}}));this.mo.observe(this.detailsEl,{attributes:true})}componentWillLoad(){this.hasStartSlot=!!this.host.querySelector('[slot="icon-start"]');this.hasEndSlot=!!this.host.querySelector('[slot="icon-end"]')}componentDidLoad(){this.bodyEl.style.height=this.open?"auto":"0";if(this.open)this.detailsEl.setAttribute("open","true");this.attachMo()}connectedCallback(){this.attachMo()}disconnectedCallback(){if(this.mo){this.mo.disconnect();this.mo=undefined}}render(){return o("details",{part:"base",ref:t=>this.detailsEl=t,class:{details:true,open:this.open,disabled:this.disabled}},o("summary",{part:"header","aria-controls":"content","aria-expanded":this.open?"true":"false","aria-disabled":this.disabled?"true":"false",tabindex:this.disabled?"-1":"0",style:{display:this.noHandle?"none":""},id:"header",role:"button",class:"header",ref:t=>this.headerEl=t,onKeyDown:this.onKeyDown,onClick:this.onMouseDown},this.hasStartSlot?o("span",{part:"icon--start",class:"icon icon--start",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},o("slot",{name:"icon-start"})):"",o("div",{part:"label",class:"label"},this.label?this.label:o("slot",{name:"label"})),this.hasEndSlot?o("span",{part:"icon--end",class:"icon icon--end",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},o("slot",{name:"icon-end"})):""),o("div",{part:"body",class:"body",ref:t=>this.bodyEl=t,tabindex:"-1",role:"region","aria-labelledby":"header"},o("div",{part:"content",ref:t=>this.contentEl=t,class:"content",id:"content"},o("slot",null))))}get host(){return i(this)}static get watchers(){return{open:["toggleClick"]}}};n.style=a;export{n as nano_details};
-//# sourceMappingURL=p-5ca9275c.entry.js.map

package/dist/nano-components/p-5ca9275c.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","cacheHeight","contentEl","scrollHeight","bodyEl","style","height","displayTransition","then","requestAnimationFrame","nanoOpen","nanoOpened","useCacheHeight","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  private cacheHeight: number;\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   * Sometimes, nested content will resize within the details component which results in choppy show/hide animations.\n   * Set `useCacheHeight` to `true` try to keep animations smooth. */\n  @Prop() useCacheHeight = false;\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.cacheHeight = this.contentEl.scrollHeight;\n    this.bodyEl.style.height = this.cacheHeight + '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\n    this.bodyEl.style.height =\n      (this.useCacheHeight ? this.cacheHeight : this.contentEl.scrollHeight) +\n      '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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"}