@nanoporetech-digital/components 5.6.0 → 5.8.0

package/dist/collection/components/details/details.js

@@ -1,8 +1,7 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { h, Host, writeTask, readTask, Build, } from '@stencil/core';
-import { createColorClasses } from '../../utils/theme';
+import { h, Build, } from '@stencil/core';
 import { displayTransition } from '../../utils/transitions';
 /**
  * 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.
@@ -13,35 +12,48 @@ import { displayTransition } from '../../utils/transitions';
  * @slot label - can be used when you wish to insert complex label markup
  * @slot icon-end - used for icons at the end of the handle
  *
- * @part button - the main details ui control
+ * @part base - the root `details` element
+ * @part header - the main `summary` ui control
  * @part label - the text wrapper of the ui control
  * @part icon--start - the icon wrapper at the start of the ui control
  * @part icon--end - the icon wrapper at the end of the ui control
+ * @part body - the wrapper around content
  * @part content - the main content wrapper
  */
 export class Details {
   constructor() {
-    this.slideId = `nano-details-${slideIds++}`;
     this.stateChanging = false;
-    this.onKeyDown = (ev) => {
-      switch (ev.key) {
+    this.onKeyDown = (e) => {
+      if (this.stateChanging || this.disabled)
+        return;
+      switch (e.key) {
         case 'Enter':
         case ' ':
+          e.preventDefault();
           this.open = !this.open;
           break;
+        case 'ArrowUp':
+          e.preventDefault();
+          this.open = false;
+          break;
+        case 'ArrowDown':
+          e.preventDefault();
+          this.open = true;
+          break;
       }
     };
-    this.onMouseDown = () => {
-      if (this.stateChanging)
+    this.onMouseDown = (e) => {
+      e.preventDefault();
+      this.headerEl.focus();
+      if (this.stateChanging || this.disabled)
         return;
       this.open = !this.open;
     };
-    this.isLoading = true;
     this.label = '';
     this.open = false;
+    this.disabled = false;
     this.noHandle = false;
     this.iconRotation = 90;
-    this.color = undefined;
   }
   toggleClick() {
     this.stateChanging = true;
@@ -51,76 +63,78 @@ export class Details {
       this.hide();
   }
   hide() {
-    this.nanoClosed.emit(this.open);
-    displayTransition(this.contentEl, 'is-shown', false).then(() => (this.stateChanging = false));
-    this.contentEl.style.height = '0px';
+    const nanoClose = this.nanoClosed.emit(this.open);
+    if (nanoClose.defaultPrevented) {
+      this.open = true;
+      this.detailsEl.open = true;
+      return;
+    }
+    this.bodyEl.style.height = this.contentEl.scrollHeight + 'px';
+    displayTransition(this.bodyEl, 'is-shown', false).then(() => {
+      this.stateChanging = false;
+      this.detailsEl.open = false;
+    });
+    requestAnimationFrame(() => {
+      this.bodyEl.style.height = '0px';
+    });
   }
   show() {
-    this.nanoOpened.emit();
-    displayTransition(this.contentEl, 'is-shown', true).then(() => {
+    const nanoOpen = this.nanoOpened.emit();
+    this.detailsEl.open = true;
+    if (nanoOpen.defaultPrevented) {
+      this.open = false;
+      this.detailsEl.open = false;
+      return;
+    }
+    displayTransition(this.bodyEl, 'is-shown', true).then(() => {
       this.stateChanging = false;
+      this.bodyEl.style.height = 'auto';
     });
-    this.contentEl.style.height = this.contentArea.scrollHeight + 'px';
+    this.bodyEl.style.height = this.contentEl.scrollHeight + 'px';
   }
-  resize() {
-    if (!this.open ||
-      !this.contentArea ||
-      !this.contentEl ||
-      this.stateChanging)
+  attachMo() {
+    if (this.mo || !this.detailsEl || !Build.isBrowser)
       return;
-    readTask(() => {
-      if (this.contentArea.scrollHeight > 0) {
-        writeTask(() => {
-          this.contentEl.style.height = this.contentArea.scrollHeight + 'px';
-        });
+    this.mo = new MutationObserver((changes) => {
+      if (this.stateChanging)
+        return;
+      for (const change of changes) {
+        if (change.type === 'attributes' && change.attributeName === 'open') {
+          this.open = this.detailsEl.open;
+        }
       }
     });
-  }
-  attachRO() {
-    if (this.ro || !this.contentArea)
-      return;
-    const ro = (this.ro = new ResizeObserver(() => this.resize()));
-    ro.observe(this.contentArea);
+    this.mo.observe(this.detailsEl, { attributes: true });
   }
   componentWillLoad() {
-    this.hasStartSlot = !!this.el.querySelector('[slot="icon-start"]');
-    this.hasEndSlot = !!this.el.querySelector('[slot="icon-end"]');
-    setTimeout(() => {
-      this.isLoading = false;
-    }, 100);
+    this.hasStartSlot = !!this.host.querySelector('[slot="icon-start"]');
+    this.hasEndSlot = !!this.host.querySelector('[slot="icon-end"]');
   }
   componentDidLoad() {
-    if (this.open) {
-      // disable animation on start
-      setTimeout(() => {
-        this.show();
-      }, 0);
-    }
-    if (Build.isBrowser)
-      this.attachRO();
+    this.bodyEl.style.height = this.open ? 'auto' : '0';
+    if (this.open)
+      this.detailsEl.setAttribute('open', 'true');
+    this.attachMo();
   }
   connectedCallback() {
-    if (!Build.isBrowser)
-      return;
-    const mo = (this.mo = new MutationObserver(() => this.resize()));
-    mo.observe(this.el, { childList: true, subtree: true, attributes: false });
-    this.attachRO();
+    this.attachMo();
   }
   disconnectedCallback() {
-    if (this.mo)
+    if (this.mo) {
       this.mo.disconnect();
-    if (this.ro)
-      this.ro.disconnect();
+      this.mo = undefined;
+    }
   }
   render() {
-    return (h(Host, { class: Object.assign({}, createColorClasses(this.color)) }, h("div", { class: {
+    return (h("details", { part: "base", ref: (d) => (this.detailsEl = d), class: {
+        details: true,
         open: this.open,
-        loaded: !this.isLoading,
-      } }, h("button", { onKeyDown: this.onKeyDown, onMouseDown: this.onMouseDown, onTouchEnd: this.onMouseDown, "aria-controls": this.slideId, "aria-expanded": this.open ? 'true' : 'false', style: { display: this.noHandle ? 'none' : '' }, part: "button" }, this.hasStartSlot ? (h("span", { part: "icon--start", class: "icon icon--start", style: {
+        disabled: this.disabled,
+      } }, h("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: (s) => (this.headerEl = s), onKeyDown: this.onKeyDown, onClick: this.onMouseDown }, this.hasStartSlot ? (h("span", { part: "icon--start", class: "icon icon--start", style: {
         transform: this.open ? `rotate(${this.iconRotation}deg)` : '',
-      } }, h("slot", { name: "icon-start" }))) : (''), h("div", { class: "label", part: "label" }, this.label ? this.label : h("slot", { name: "label" })), this.hasEndSlot ? (h("span", { part: "icon--end", class: "icon icon--end", style: {
+      } }, h("slot", { name: "icon-start" }))) : (''), h("div", { part: "label", class: "label" }, this.label ? this.label : h("slot", { name: "label" })), this.hasEndSlot ? (h("span", { part: "icon--end", class: "icon icon--end", style: {
         transform: this.open ? `rotate(${this.iconRotation}deg)` : '',
-      } }, h("slot", { name: "icon-end" }))) : ('')), h("div", { class: "content", ref: (div) => (this.contentEl = div), tabindex: "-1", id: this.slideId, part: "content" }, h("div", { ref: (div) => (this.contentArea = div), class: "content__area" }, h("slot", null))))));
+      } }, h("slot", { name: "icon-end" }))) : ('')), h("div", { part: "body", class: "body", ref: (div) => (this.bodyEl = div), tabindex: "-1", role: "region", "aria-labelledby": "header" }, h("div", { part: "content", ref: (div) => (this.contentEl = div), class: "content", id: "content" }, h("slot", null)))));
   }
   static get is() { return "nano-details"; }
   static get encapsulation() { return "shadow"; }
@@ -148,7 +162,7 @@ export class Details {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Button / handle text to be used if no complex markup required.\nOtherwise use label slot."
+          "text": "Summary / handle text. Use the `label` slot for HTML markup"
         },
         "getter": false,
         "setter": false,
@@ -176,6 +190,26 @@ export class Details {
         "reflect": true,
         "defaultValue": "false"
       },
+      "disabled": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables the details so it can't be toggled."
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "noHandle": {
         "type": "boolean",
         "mutable": false,
@@ -188,7 +222,7 @@ export class Details {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Have no handle - you will need to control the hiding / showing of content with script"
+          "text": "Hide the handle. (You will need to control the hiding / showing of content with script)"
         },
         "getter": false,
         "setter": false,
@@ -215,38 +249,9 @@ export class Details {
         "attribute": "icon-rotation",
         "reflect": false,
         "defaultValue": "90"
-      },
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Color",
-          "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\"",
-          "references": {
-            "Color": {
-              "location": "import",
-              "path": "../../interface"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Color to use from your application's color palette."
-        },
-        "getter": false,
-        "setter": false,
-        "attribute": "color",
-        "reflect": false
       }
     };
   }
-  static get states() {
-    return {
-      "isLoading": {}
-    };
-  }
   static get events() {
     return [{
         "method": "nanoOpened",
@@ -280,7 +285,7 @@ export class Details {
         }
       }];
   }
-  static get elementRef() { return "el"; }
+  static get elementRef() { return "host"; }
   static get watchers() {
     return [{
         "propName": "open",
@@ -288,5 +293,4 @@ export class Details {
       }];
   }
 }
-let slideIds = 0;
 //# sourceMappingURL=details.js.map

package/dist/collection/components/details/details.js.map

@@ -1 +1 @@
-{"version":3,"file":"details.js","sourceRoot":"","sources":["../../../src/components/details/details.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,CAAC,EACD,OAAO,EACP,KAAK,EACL,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAG5D;;GAEG;AACH;;;;;;;;;;;GAWG;AAMH,MAAM,OAAO,OAAO;;IAGV,YAAO,GAAG,gBAAgB,QAAQ,EAAE,EAAE,CAAC;IAIvC,kBAAa,GAAY,KAAK,CAAC;IAqD/B,cAAS,GAAG,CAAC,EAAiB,EAAE,EAAE;MACxC,QAAQ,EAAE,CAAC,GAAG,EAAE;QACd,KAAK,OAAO,CAAC;QACb,KAAK,GAAG;UACN,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;UACvB,MAAM;OACT;IACH,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,IAAI,CAAC,aAAa;QAAE,OAAO;MAC/B,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IACzB,CAAC,CAAC;qBA/DmB,IAAI;iBAUD,EAAE;gBAK8B,KAAK;oBAKjC,KAAK;wBAKF,EAAE;;;EAoBjC,WAAW;IACT,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;IAC1B,IAAI,IAAI,CAAC,IAAI;MAAE,IAAI,CAAC,IAAI,EAAE,CAAC;;MACtB,IAAI,CAAC,IAAI,EAAE,CAAC;EACnB,CAAC;EAgBO,IAAI;IACV,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChC,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,IAAI,CACvD,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,CACnC,CAAC;IACF,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;EACtC,CAAC;EAEO,IAAI;IACV,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;IACvB,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE;MAC5D,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC7B,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,YAAY,GAAG,IAAI,CAAC;EACrE,CAAC;EAEO,MAAM;IACZ,IACE,CAAC,IAAI,CAAC,IAAI;MACV,CAAC,IAAI,CAAC,WAAW;MACjB,CAAC,IAAI,CAAC,SAAS;MACf,IAAI,CAAC,aAAa;MAElB,OAAO;IACT,QAAQ,CAAC,GAAG,EAAE;MACZ,IAAI,IAAI,CAAC,WAAW,CAAC,YAAY,GAAG,CAAC,EAAE;QACrC,SAAS,CAAC,GAAG,EAAE;UACb,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,YAAY,GAAG,IAAI,CAAC;QACrE,CAAC,CAAC,CAAC;OACJ;IACH,CAAC,CAAC,CAAC;EACL,CAAC;EAEO,QAAQ;IACd,IAAI,IAAI,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW;MAAE,OAAO;IAEzC,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IAC/D,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;EAC/B,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IACnE,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;IAC/D,UAAU,CAAC,GAAG,EAAE;MACd,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC,EAAE,GAAG,CAAC,CAAC;EACV,CAAC;EAED,gBAAgB;IACd,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,6BAA6B;MAC7B,UAAU,CAAC,GAAG,EAAE;QACd,IAAI,CAAC,IAAI,EAAE,CAAC;MACd,CAAC,EAAE,CAAC,CAAC,CAAC;KACP;IACD,IAAI,KAAK,CAAC,SAAS;MAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;EACvC,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,KAAK,CAAC,SAAS;MAAE,OAAO;IAC7B,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IACjE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,CAAC;IAC3E,IAAI,CAAC,QAAQ,EAAE,CAAC;EAClB,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,EAAE;MAAE,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;IAClC,IAAI,IAAI,CAAC,EAAE;MAAE,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;EACpC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,oBAAO,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC;MAC9C,WACE,KAAK,EAAE;UACL,IAAI,EAAE,IAAI,CAAC,IAAI;UACf,MAAM,EAAE,CAAC,IAAI,CAAC,SAAS;SACxB;QAED,cACE,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,UAAU,EAAE,IAAI,CAAC,WAAW,mBACb,IAAI,CAAC,OAAO,mBACZ,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC3C,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,EAC/C,IAAI,EAAC,QAAQ;UAEZ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACnB,YACE,IAAI,EAAC,aAAa,EAClB,KAAK,EAAC,kBAAkB,EACxB,KAAK,EAAE;cACL,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,YAAY,MAAM,CAAC,CAAC,CAAC,EAAE;aAC9D;YAED,YAAM,IAAI,EAAC,YAAY,GAAG,CACrB,CACR,CAAC,CAAC,CAAC,CACF,EAAE,CACH;UACD,WAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAC5B,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,OAAO,GAAG,CAC5C;UACL,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CACjB,YACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,gBAAgB,EACtB,KAAK,EAAE;cACL,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,YAAY,MAAM,CAAC,CAAC,CAAC,EAAE;aAC9D;YAED,YAAM,IAAI,EAAC,UAAU,GAAG,CACnB,CACR,CAAC,CAAC,CAAC,CACF,EAAE,CACH,CACM;QACT,WACE,KAAK,EAAC,SAAS,EACf,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,EACpC,QAAQ,EAAC,IAAI,EACb,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAC,SAAS;UAEd,WAAK,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC,EAAE,KAAK,EAAC,eAAe;YAChE,eAAQ,CACJ,CACF,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,IAAI,QAAQ,GAAG,CAAC,CAAC","sourcesContent":["import {\n  Component,\n  Event,\n  EventEmitter,\n  Prop,\n  h,\n  Element,\n  Watch,\n  Host,\n  State,\n  writeTask,\n  readTask,\n  Build,\n} from '@stencil/core';\nimport { createColorClasses } from '../../utils/theme';\nimport { displayTransition } from '../../utils/transitions';\nimport type { Color } from '../../interface';\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 button - the main details 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 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 slideId = `nano-details-${slideIds++}`;\n  private mo?: MutationObserver;\n  private ro?: ResizeObserver;\n  private contentArea: HTMLDivElement;\n  private stateChanging: boolean = false;\n\n  @State() isLoading = true;\n\n  @Element() private el: HTMLNanoDetailsElement;\n\n  private contentEl: HTMLElement;\n\n  /**\n   * Button / handle text to be used if no complex markup required.\n   * Otherwise use label slot.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Should item be open on load\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Have no handle - you will need to control the hiding / showing of content with script\n   */\n  @Prop() noHandle: boolean = false;\n\n  /**\n   * Icon slot rotation amount (degrees) on open\n   */\n  @Prop() iconRotation: number = 90;\n\n  /**\n   * Color to use from your application's color palette.\n   */\n  @Prop() color?: Color;\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 = (ev: KeyboardEvent) => {\n    switch (ev.key) {\n      case 'Enter':\n      case ' ':\n        this.open = !this.open;\n        break;\n    }\n  };\n\n  private onMouseDown = () => {\n    if (this.stateChanging) return;\n    this.open = !this.open;\n  };\n\n  private hide() {\n    this.nanoClosed.emit(this.open);\n    displayTransition(this.contentEl, 'is-shown', false).then(\n      () => (this.stateChanging = false)\n    );\n    this.contentEl.style.height = '0px';\n  }\n\n  private show() {\n    this.nanoOpened.emit();\n    displayTransition(this.contentEl, 'is-shown', true).then(() => {\n      this.stateChanging = false;\n    });\n    this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n  }\n\n  private resize() {\n    if (\n      !this.open ||\n      !this.contentArea ||\n      !this.contentEl ||\n      this.stateChanging\n    )\n      return;\n    readTask(() => {\n      if (this.contentArea.scrollHeight > 0) {\n        writeTask(() => {\n          this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n        });\n      }\n    });\n  }\n\n  private attachRO() {\n    if (this.ro || !this.contentArea) return;\n\n    const ro = (this.ro = new ResizeObserver(() => this.resize()));\n    ro.observe(this.contentArea);\n  }\n\n  componentWillLoad() {\n    this.hasStartSlot = !!this.el.querySelector('[slot=\"icon-start\"]');\n    this.hasEndSlot = !!this.el.querySelector('[slot=\"icon-end\"]');\n    setTimeout(() => {\n      this.isLoading = false;\n    }, 100);\n  }\n\n  componentDidLoad() {\n    if (this.open) {\n      // disable animation on start\n      setTimeout(() => {\n        this.show();\n      }, 0);\n    }\n    if (Build.isBrowser) this.attachRO();\n  }\n\n  connectedCallback() {\n    if (!Build.isBrowser) return;\n    const mo = (this.mo = new MutationObserver(() => this.resize()));\n    mo.observe(this.el, { childList: true, subtree: true, attributes: false });\n    this.attachRO();\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host class={{ ...createColorClasses(this.color) }}>\n        <div\n          class={{\n            open: this.open,\n            loaded: !this.isLoading,\n          }}\n        >\n          <button\n            onKeyDown={this.onKeyDown}\n            onMouseDown={this.onMouseDown}\n            onTouchEnd={this.onMouseDown}\n            aria-controls={this.slideId}\n            aria-expanded={this.open ? 'true' : 'false'}\n            style={{ display: this.noHandle ? 'none' : '' }}\n            part=\"button\"\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 class=\"label\" part=\"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          </button>\n          <div\n            class=\"content\"\n            ref={(div) => (this.contentEl = div)}\n            tabindex=\"-1\"\n            id={this.slideId}\n            part=\"content\"\n          >\n            <div ref={(div) => (this.contentArea = div)} class=\"content__area\">\n              <slot />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet slideIds = 0;\n"]}
+{"version":3,"file":"details.js","sourceRoot":"","sources":["../../../src/components/details/details.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,CAAC,EACD,OAAO,EACP,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D;;GAEG;AACH;;;;;;;;;;;;;GAaG;AAMH,MAAM,OAAO,OAAO;;IAIV,kBAAa,GAAY,KAAK,CAAC;IA0C/B,cAAS,GAAG,CAAC,CAAgB,EAAE,EAAE;MACvC,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,QAAQ;QAAE,OAAO;MAEhD,QAAQ,CAAC,CAAC,GAAG,EAAE;QACb,KAAK,OAAO,CAAC;QACb,KAAK,GAAG;UACN,CAAC,CAAC,cAAc,EAAE,CAAC;UACnB,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;UACvB,MAAM;QACR,KAAK,SAAS;UACZ,CAAC,CAAC,cAAc,EAAE,CAAC;UACnB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;UAClB,MAAM;QACR,KAAK,WAAW;UACd,CAAC,CAAC,cAAc,EAAE,CAAC;UACnB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;UACjB,MAAM;OACT;IACH,CAAC,CAAC;IAEM,gBAAW,GAAG,CAAC,CAAa,EAAE,EAAE;MACtC,CAAC,CAAC,cAAc,EAAE,CAAC;MACnB,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;MAEtB,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,QAAQ;QAAE,OAAO;MAChD,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IACzB,CAAC,CAAC;iBA3DsB,EAAE;gBAG8B,KAAK;oBAGD,KAAK;oBAGrC,KAAK;wBAGF,EAAE;;EAejC,WAAW;IACT,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;IAC1B,IAAI,IAAI,CAAC,IAAI;MAAE,IAAI,CAAC,IAAI,EAAE,CAAC;;MACtB,IAAI,CAAC,IAAI,EAAE,CAAC;EACnB,CAAC;EA8BO,IAAI;IACV,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAElD,IAAI,SAAS,CAAC,gBAAgB,EAAE;MAC9B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;MACjB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC;MAC3B,OAAO;KACR;IAED,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC;IAE9D,iBAAiB,CAAC,IAAI,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE;MAC1D,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;MAC3B,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,KAAK,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,qBAAqB,CAAC,GAAG,EAAE;MACzB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;IACnC,CAAC,CAAC,CAAC;EACL,CAAC;EAEO,IAAI;IACV,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;IACxC,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC;IAE3B,IAAI,QAAQ,CAAC,gBAAgB,EAAE;MAC7B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MAClB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,KAAK,CAAC;MAC5B,OAAO;KACR;IAED,iBAAiB,CAAC,IAAI,CAAC,MAAM,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE;MACzD,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;MAC3B,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;IACpC,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC;EAChE,CAAC;EAEO,QAAQ;IACd,IAAI,IAAI,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,KAAK,CAAC,SAAS;MAAE,OAAO;IAE3D,IAAI,CAAC,EAAE,GAAG,IAAI,gBAAgB,CAAC,CAAC,OAAO,EAAE,EAAE;MACzC,IAAI,IAAI,CAAC,aAAa;QAAE,OAAO;MAE/B,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE;QAC5B,IAAI,MAAM,CAAC,IAAI,KAAK,YAAY,IAAI,MAAM,CAAC,aAAa,KAAK,MAAM,EAAE;UACnE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;SACjC;OACF;IACH,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;EACxD,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IACrE,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;EACnE,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC;IACpD,IAAI,IAAI,CAAC,IAAI;MAAE,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3D,IAAI,CAAC,QAAQ,EAAE,CAAC;EAClB,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,QAAQ,EAAE,CAAC;EAClB,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,EAAE,EAAE;MACX,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;MACrB,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC;KACrB;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,eACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,CAAqB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,EACpD,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;QACb,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB;MAED,eACE,IAAI,EAAC,QAAQ,mBACC,SAAS,mBACR,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAC5B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC/C,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EACpC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,EAC/C,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW;QAExB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACnB,YACE,IAAI,EAAC,aAAa,EAClB,KAAK,EAAC,kBAAkB,EACxB,KAAK,EAAE;YACL,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,YAAY,MAAM,CAAC,CAAC,CAAC,EAAE;WAC9D;UAED,YAAM,IAAI,EAAC,YAAY,GAAG,CACrB,CACR,CAAC,CAAC,CAAC,CACF,EAAE,CACH;QACD,WAAK,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,IAC5B,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,OAAO,GAAG,CAC5C;QACL,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CACjB,YACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,gBAAgB,EACtB,KAAK,EAAE;YACL,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,YAAY,MAAM,CAAC,CAAC,CAAC,EAAE;WAC9D;UAED,YAAM,IAAI,EAAC,UAAU,GAAG,CACnB,CACR,CAAC,CAAC,CAAC,CACF,EAAE,CACH,CACO;MACV,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,MAAM,EACZ,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC,EACjC,QAAQ,EAAC,IAAI,EACb,IAAI,EAAC,QAAQ,qBACG,QAAQ;QAExB,WACE,IAAI,EAAC,SAAS,EACd,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,EACpC,KAAK,EAAC,SAAS,EACf,EAAE,EAAC,SAAS;UAEZ,eAAQ,CACJ,CACF,CACE,CACX,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/grid/grid.js

@@ -17,6 +17,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { h, Host } from '@stencil/core';
 import { ConstructibleStyle } from '../../utils/constructible-style';
+let gridId = 0;
 /**
  * A lightweight, context-aware CSS grid implementation.
  *
@@ -34,6 +35,7 @@ import { ConstructibleStyle } from '../../utils/constructible-style';
 export class Grid {
   constructor() {
     this.grids = [];
+    this.gridId = 'nano-grid-' + gridId++;
     this.styles = () => {
       const css = /* css */ `
       ${this.grids
@@ -41,7 +43,7 @@ export class Grid {
           @container (min-width: ${typeof bp.breakpoint === 'number'
         ? bp.breakpoint + 1 + 'px'
         : bp.breakpoint}) {
-            .grid {
+            #${this.gridId}.grid {
               --current-grid-size: "grid size: ${bp.name}";
               ${bp.template
         ? `grid-template: ${bp.template};`
@@ -51,11 +53,11 @@ export class Grid {
         .map((_, i) => {
         const gItm = i + 1;
         return /* css */ `
-                  .grid > [grid-states~="${bp.name}-col-start-${gItm}"],
+                  #${this.gridId}.grid > [grid-states~="${bp.name}-col-start-${gItm}"],
                   ::slotted([grid-states~="${bp.name}-col-start-${gItm}"]) {
                     grid-column-start: ${gItm} !important;
                   }
-                  .grid > [grid-states~="${bp.name}-col-span-${gItm}"],
+                  #${this.gridId}.grid > [grid-states~="${bp.name}-col-span-${gItm}"],
                   ::slotted([grid-states~="${bp.name}-col-span-${gItm}"]) {
                     grid-column-end: span ${gItm} !important;
                   }
@@ -66,11 +68,11 @@ export class Grid {
         .map((_, i) => {
         const gItm = i + 1;
         return /* css */ `
-                    .grid > [grid-states~="${bp.name}-row-start-${gItm}"],
+                    #${this.gridId}.grid > [grid-states~="${bp.name}-row-start-${gItm}"],
                     ::slotted([grid-states~="${bp.name}-row-start-${gItm}"]) {
                       grid-row-start: ${gItm} !important;
                     }
-                    .grid > [grid-states~="${bp.name}-row-span-${gItm}"],
+                    #${this.gridId}.grid > [grid-states~="${bp.name}-row-span-${gItm}"],
                     ::slotted([grid-states~="${bp.name}-row-span-${gItm}"]) {
                       grid-row-end: span ${gItm} !important;
                     }
@@ -79,7 +81,7 @@ export class Grid {
         .join('')}
             ${this.showHelper &&
         /* css */ `
-              .grid--helper :nth-child(-n+${bp.cols}) {
+              #${this.gridId} .grid--helper :nth-child(-n+${bp.cols}) {
                 display: block !important;
               }
             `}
@@ -122,7 +124,7 @@ export class Grid {
         name: 'm',
         template: this.mTpl,
       });
-    if (this.lSize)
+    if (this.lCols)
       this.grids.push({
         cols: this.lCols,
         breakpoint: this.mSize,
@@ -154,7 +156,7 @@ export class Grid {
     this.constructSizeArray();
   }
   render() {
-    return (h(Host, null, h("div", { part: "grid", class: "grid" }, h("slot", null)), this.showHelper && (h("div", { class: "grid grid--helper", part: "helper" }, [...Array(24)].map(() => (h("div", { class: "grid__helper-item" })))))));
+    return (h(Host, null, h("div", { part: "grid", class: "grid", id: this.gridId }, h("slot", null)), this.showHelper && (h("div", { class: "grid grid--helper", part: "helper" }, [...Array(24)].map(() => (h("div", { class: "grid__helper-item" })))))));
   }
   static get is() { return "nano-grid"; }
   static get encapsulation() { return "shadow"; }
@@ -187,7 +189,7 @@ export class Grid {
         "getter": false,
         "setter": false,
         "attribute": "s-size",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "300"
       },
       "mSize": {
@@ -207,7 +209,7 @@ export class Grid {
         "getter": false,
         "setter": false,
         "attribute": "m-size",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "550"
       },
       "lSize": {
@@ -227,7 +229,7 @@ export class Grid {
         "getter": false,
         "setter": false,
         "attribute": "l-size",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "800"
       },
       "xlSize": {
@@ -247,7 +249,7 @@ export class Grid {
         "getter": false,
         "setter": false,
         "attribute": "xl-size",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "1000"
       },
       "sCols": {
@@ -267,7 +269,7 @@ export class Grid {
         "getter": false,
         "setter": false,
         "attribute": "s-cols",
-        "reflect": false
+        "reflect": true
       },
       "mCols": {
         "type": "number",
@@ -286,7 +288,7 @@ export class Grid {
         "getter": false,
         "setter": false,
         "attribute": "m-cols",
-        "reflect": false
+        "reflect": true
       },
       "lCols": {
         "type": "number",
@@ -305,7 +307,7 @@ export class Grid {
         "getter": false,
         "setter": false,
         "attribute": "l-cols",
-        "reflect": false
+        "reflect": true
       },
       "xlCols": {
         "type": "number",
@@ -324,7 +326,7 @@ export class Grid {
         "getter": false,
         "setter": false,
         "attribute": "xl-cols",
-        "reflect": false
+        "reflect": true
       },
       "xxlCols": {
         "type": "number",
@@ -343,7 +345,7 @@ export class Grid {
         "getter": false,
         "setter": false,
         "attribute": "xxl-cols",
-        "reflect": false
+        "reflect": true
       },
       "sTpl": {
         "type": "string",

package/dist/collection/components/grid/grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../src/components/grid/grid.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAErE;;;;;;;;;;;;;GAaG;AAMH,MAAM,OAAO,IAAI;;IACP,UAAK,GAKP,EAAE,CAAC;IAkHuD,WAAM,GACpE,GAAG,EAAE;MACH,MAAM,GAAG,GAAG,SAAS,CAAC;QACpB,IAAI,CAAC,KAAK;SACT,GAAG,CACF,CAAC,EAAE,EAAE,EAAE,CAAC,SAAS,CAAC;mCAEhB,OAAO,EAAE,CAAC,UAAU,KAAK,QAAQ;QAC/B,CAAC,CAAC,EAAE,CAAC,UAAU,GAAG,CAAC,GAAG,IAAI;QAC1B,CAAC,CAAC,EAAE,CAAC,UACT;;iDAEuC,EAAE,CAAC,IAAI;gBAExC,EAAE,CAAC,QAAQ;QACT,CAAC,CAAC,kBAAkB,EAAE,CAAC,QAAQ,GAAG;QAClC,CAAC,CAAC,iCAAiC,EAAE,CAAC,IAAI,yBAAyB,EAAE,CAAC,IAAI,kCAC9E;;cAEA,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;SAClB,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACZ,MAAM,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC;QACnB,OAAO,SAAS,CAAC;2CACU,EAAE,CAAC,IAAI,cAAc,IAAI;6CACvB,EAAE,CAAC,IAAI,cAAc,IAAI;yCAC7B,IAAI;;2CAEF,EAAE,CAAC,IAAI,aAAa,IAAI;6CACtB,EAAE,CAAC,IAAI,aAAa,IAAI;4CACzB,IAAI;;eAEjC,CAAC;MACF,CAAC,CAAC;SACD,IAAI,CAAC,EAAE,CAAC;gBACP,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC;SACb,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACZ,MAAM,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC;QACnB,OAAO,SAAS,CAAC;6CACU,EAAE,CAAC,IAAI,cAAc,IAAI;+CACvB,EAAE,CAAC,IAAI,cAAc,IAAI;wCAChC,IAAI;;6CAEC,EAAE,CAAC,IAAI,aAAa,IAAI;+CACtB,EAAE,CAAC,IAAI,aAAa,IAAI;2CAC5B,IAAI;;iBAE9B,CAAC;MACF,CAAC,CAAC;SACD,IAAI,CAAC,EAAE,CAAC;cAEX,IAAI,CAAC,UAAU;QACf,SAAS,CAAC;4CACoB,EAAE,CAAC,IAAI;;;aAIvC;;SAEH,CACA;SACA,IAAI,CAAC,EAAE,CAAC;KACZ,CAAC;MACA,OAAO,GAAG,CAAC;IACb,CAAC,CAAC;;iBA5K6B,GAAG;iBAIH,GAAG;iBAIH,GAAG;kBAIF,IAAI;;;;;;;;;;;sBAiCS,KAAK;;EAiBpD,kBAAkB;IAChB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;IAEhB,IAAI,IAAI,CAAC,KAAK;MACZ,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QACd,IAAI,EAAE,IAAI,CAAC,KAAK;QAChB,UAAU,EAAE,CAAC;QACb,IAAI,EAAE,GAAG;QACT,QAAQ,EAAE,IAAI,CAAC,IAAI;OACpB,CAAC,CAAC;IACL,IAAI,IAAI,CAAC,KAAK;MACZ,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QACd,IAAI,EAAE,IAAI,CAAC,KAAK;QAChB,UAAU,EAAE,IAAI,CAAC,KAAK;QACtB,IAAI,EAAE,GAAG;QACT,QAAQ,EAAE,IAAI,CAAC,IAAI;OACpB,CAAC,CAAC;IACL,IAAI,IAAI,CAAC,KAAK;MACZ,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QACd,IAAI,EAAE,IAAI,CAAC,KAAK;QAChB,UAAU,EAAE,IAAI,CAAC,KAAK;QACtB,IAAI,EAAE,GAAG;QACT,QAAQ,EAAE,IAAI,CAAC,IAAI;OACpB,CAAC,CAAC;IACL,IAAI,IAAI,CAAC,MAAM;MACb,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QACd,IAAI,EAAE,IAAI,CAAC,MAAM;QACjB,UAAU,EAAE,IAAI,CAAC,KAAK;QACtB,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,IAAI,CAAC,KAAK;OACrB,CAAC,CAAC;IACL,IAAI,IAAI,CAAC,OAAO;MACd,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QACd,IAAI,EAAE,IAAI,CAAC,OAAO;QAClB,UAAU,EAAE,IAAI,CAAC,MAAM;QACvB,IAAI,EAAE,KAAK;QACX,QAAQ,EAAE,IAAI,CAAC,MAAM;OACtB,CAAC,CAAC;IAEL,IAAI,CAAC,QAAQ;MACX,IAAI,CAAC,KAAK;SACP,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,IAAI,IAAI,EAAE,CAAC,UAAU,IAAI,EAAE,CAAC,QAAQ,IAAI,EAAE,EAAE,CAAC;SAC/D,IAAI,CAAC,EAAE,CAAC;QACX,UAAU;QACV,IAAI,CAAC,UAAU,CAAC;EACpB,CAAC;EAmED,iBAAiB;IACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;EAC5B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM;QAC3B,eAAQ,CACJ;MACL,IAAI,CAAC,UAAU,IAAI,CAClB,WAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,QAAQ,IACzC,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CACxB,WAAK,KAAK,EAAC,mBAAmB,GAAG,CAClC,CAAC,CACE,CACP,CACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AArFC;EAAC,kBAAkB,CAAC,EAAE,gBAAgB,EAAE,UAAU,EAAE,CAAC;;oCA+DjD","sourcesContent":["import { Component, h, Prop, Host, State, Watch } from '@stencil/core';\nimport { ConstructibleStyle } from '../../utils/constructible-style';\n\n/**\n * A lightweight, context-aware CSS grid implementation.\n *\n * - Define multiple grids templates at different breakpoints\n * - Uses `@container` queries to select the correct grid depending on the current dimensions\n * - Use `grid-states=\"...\"` on direct descendants for `column` / `row` - `start` / `end`\n * - SSR optimised\n\n * @part grid - the main grid element.\n * Use this to set css such as `justify-items|content` / `align-items|content` / `place-content`\n * @part helper - a replica grid showed when `show-helper` is true\n *\n * @slot - default slot. Use this to place grid items. Use `grid-states=\"...\"` attribute to opt-out of auto / sequential placement.\n */\n@Component({\n  tag: 'nano-grid',\n  styleUrl: 'grid.scss',\n  shadow: true,\n})\nexport class Grid {\n  private grids: {\n    cols: number;\n    breakpoint: number | string;\n    name: string;\n    template?: string;\n  }[] = [];\n  @State() cacheKey: string;\n\n  /** the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.\n   * Will default to `px` if no unit supplied e.g. `20rem` */\n  @Prop() 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() 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() 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() xlSize: number | string = 1000;\n\n  /** the number of columns the grid has at the small breakpoint. */\n  @Prop() sCols: number;\n\n  /** the number of columns the grid has at the medium breakpoint. */\n  @Prop() mCols: number;\n\n  /** the number of columns the grid has at the large breakpoint. */\n  @Prop() lCols: number;\n\n  /** the number of columns the grid has at the xl breakpoint. */\n  @Prop() xlCols: number;\n\n  /** the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint) */\n  @Prop() 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.lSize)\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            .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                  .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                  .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                    .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                    .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              .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\">\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"]}
+{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../src/components/grid/grid.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/slides/slide.css

@@ -27,4 +27,8 @@
 
 :host([ready]) {
   opacity: 1;
+}
+
+:host(:not([ready])) {
+  flex: 1 0 auto;
 }

package/dist/collection/components/slides/slides.css

@@ -51,7 +51,8 @@
   position: relative;
 }
 .slideshow.not-ready {
-  max-width: 98vw;
+  width: 100%;
+  overflow: hidden;
 }
 
 .flickity-container {

package/dist/collection/components/table/table-interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-interface.js","sourceRoot":"","sources":["../../../src/components/table/table-interface.ts"],"names":[],"mappings":"","sourcesContent":["import type { JSXBase } from '@stencil/core/internal';\nimport type { VNode, FunctionalComponent } from '@stencil/core';\n\nexport declare namespace TableTypes {\n  /** The column property */\n  type ColumnProp = string | number;\n\n  /** Possible positions. Horizontally means l/r. Vertically means top/bottom */\n  type Position = 'start' | 'end' | 'top' | 'bottom';\n\n  /** A function to assess whether a rendered row will be pinned to the top or bottom */\n  type PinFunc = (props?: RowDataSchemaModel) => Position;\n\n  /** Function called, via intersection observer, when an element's pinned status changes */\n  type PinnedCb = (\n    positions: { [key in Position]?: boolean },\n    target: Element\n  ) => void;\n\n  /** Potential column ordering options */\n  type Order = 'asc' | 'desc' | undefined;\n\n  /** Column filtering */\n  interface Filter {\n    prop: TableTypes.Prop;\n    filter: string | boolean | string[];\n  }\n\n  /** Column sorting */\n  interface Sort {\n    prop: TableTypes.Prop;\n    order: TableTypes.Order;\n  }\n\n  /** Potential html properties which can be passed to a cell or column */\n  type CellProps = JSXBase.ThHTMLAttributes<HTMLTableCellElement>;\n\n  /** Potential html properties which can be passed to a row */\n  type RowProps = JSXBase.HTMLAttributes<HTMLTableRowElement>;\n\n  /** data model passed to cell rendering functions */\n  interface RenderModel<T = RowGeneric> {\n    /** The column property being iterated over */\n    prop: keyof T;\n    /** The data for this cell */\n    cellModel: any;\n    /** The column config object */\n    column: ColumnConfig<T>;\n    /** The row index currently being iterated over */\n    rowIndex: number;\n    /** The row model currently being iterated over  */\n    rowModel: RowData<T>;\n  }\n\n  /** data model passed to row rendering functions */\n  interface RowDataSchemaModel<T = RowGeneric> {\n    /** the current data row model being iterated over */\n    rowModel?: RowData<T>;\n    /** the current data row index  */\n    rowIndex?: number;\n    /** The row being rendered. You *must* nest this in your render function otherwise it will not be shown */\n    renderedRow?: VNode;\n  }\n\n  /** A JSX `createElement` function passed to rendering functions.\n   * You can use this to create markup outside of JSX environments\n   * e.g. https://reactjs.org/docs/react-without-jsx.html */\n  interface HFunc<T> {\n    (tag: any): T;\n  }\n  interface HFunc<T> {\n    (tag: any, data: any): T;\n  }\n  interface HFunc<T> {\n    (tag: any, text: string): T;\n  }\n  interface HFunc<T> {\n    (sel: any, children: Array<T | undefined | null>): T;\n  }\n  interface HFunc<T> {\n    (sel: any, data: any, text: string): T;\n  }\n  interface HFunc<T> {\n    (sel: any, data: any, children: Array<T | undefined | null>): T;\n  }\n  interface HFunc<T> {\n    (sel: any, data: any, children: T): T;\n  }\n\n  /**\n   * Properties that can be used with the row template `TableCell` jsx partial\n   */\n  type TableRowCellHelperProps = {\n    header?: boolean;\n    wrap?: boolean;\n    cellProps?: CellProps;\n    wrapperProps?: JSXBase.HTMLAttributes<HTMLDivElement>;\n  };\n\n  /**\n   * A row render function, called during a any row's render to the dom.\n   * It can be used to add extra markup around any given table row\n   **/\n  type RowTemplateFunc<T, P> = (\n    /** use this to create markup outside of JSX environments\n     * e.g. https://reactjs.org/docs/react-without-jsx.html */\n    createElement: HFunc<T>,\n    /** data passed to each template */\n    props: RowDataSchemaModel<P>,\n    /** a helper template to minimise boilerplate.\n     * A shortcut for `<td><div class=\"nano-tbl__cell-content\"></div></td>` */\n    TableCell: FunctionalComponent<TableRowCellHelperProps>\n  ) => T | undefined;\n\n  /**\n   * A cell render function, called during any cell's render to the dom.\n   * It can be used to add any markup within a table cell.\n   */\n  type CellTemplateFunc<T, P> = (\n    createElement: HFunc<T>,\n    props: RenderModel<P>\n  ) => TplResult;\n\n  /**\n   * A table header render function, called during any column's render to the dom.\n   * It can be used to add any markup within a table header `th`.\n   */\n  type ColumnTemplateFunc<T, P> = (\n    createElement: HFunc<T>,\n    col: ColumnConfig<P>\n  ) => TplResult;\n\n  /** A function used to assess the order of any given column.\n   * e.g. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort\n   */\n  type ColSortComparator = (\n    prop: keyof RowData,\n    order: Order\n  ) => (a: RowData, b: RowData) => number;\n\n  /** A function which can be used to apply any html attribute/s onto a table cell `td` */\n  type PropertiesFunc = (props: RenderModel) => CellProps | void | undefined;\n\n  /** A function which can be used to apply any html attribute/s onto a table head `th` */\n  type ColPropertiesFunc<T> = (\n    props: ColumnConfig<T>\n  ) => CellProps | void | undefined;\n\n  /** A function which can be used to apply any html attribute/s onto a table row `tr` */\n  type RowPropertiesFunc<T> = (\n    props: RowDataSchemaModel<T>\n  ) => RowProps | void | undefined;\n\n  type RowGeneric = { [key: string | number]: any };\n\n  /** An individual table cell's data */\n  type RowData<T = RowGeneric> = T & {\n    __uuid?: string | number;\n    __index?: number;\n  };\n\n  /** A data property */\n  type Prop = keyof RowData;\n\n  /** Valid column data types */\n  type ColumnType =\n    | 'text'\n    | 'string'\n    | 'number'\n    | 'date'\n    | 'boolean'\n    | 'unknown';\n\n  type LibJSX = { [key: string]: any };\n  type JSXRender = VNode | VNode[] | LibJSX | LibJSX[];\n  type TplResult = JSXRender | string | Element | undefined;\n\n  /**\n   * A table column's configuration\n   */\n  interface ColumnConfig<T = RowData> {\n    /** The title of the column. Displayed in the table header `th` */\n    title?: string;\n    /** The row's data property to retrieve per cell render */\n    prop?: keyof T;\n    /** The type of data. Will affect how it is sorted and the available\n     * filter operations ('text' uses browser locale to compare).\n     * If none supplied, it will be derived by default using the first row of data retrieved. */\n    type?: ColumnType;\n    /** Whether this column is horizontally pinned to viewport */\n    pinned?: Position;\n    /** By default cell content too wide for the cell will not wrap,\n     * but rather be trimmed with '...'.\n     * *Note* 'wrap' is mutually-exclusive from `autoTooltip` */\n    wrap?: boolean;\n    /** Setting this to true, will automatically watch content that\n     * doesn't fit and duplicate it to show in a tooltip.\n     * *Note* 'autoTooltip' is mutually-exclusive from `wrap` */\n    autoTooltip?: boolean;\n    /** Whether this column is a row header; the cell will render a `th` not a `td` */\n    rowHeader?: boolean;\n    /** Whether this column can be sorted. Defaults to true */\n    sortable?: boolean;\n    /** Current order of this column */\n    order?: Order;\n    /** Whether to include this column when doing a general search. Defaults to true */\n    searchable?: boolean;\n    /** Current filters applied to this column  */\n    filter?: string | boolean | string[];\n    /**\n     * A cell render function, called during any cell's render to the dom.\n     * It can be used to add any markup within a table cell.\n     */\n    cellTemplate?: CellTemplateFunc<JSXRender, T>;\n    /** A function which can be used to apply any html attribute/s onto a table cell `td` */\n    cellProperties?: PropertiesFunc;\n    /**\n     * A table header render function, called during any column's render to the dom.\n     * It can be used to add any markup within a table header `th`.\n     */\n    columnTemplate?: ColumnTemplateFunc<JSXRender, T>;\n    /** A function which can be used to apply any html attribute/s onto a table head `th` */\n    columnProperties?: ColPropertiesFunc<T>;\n    /** A custom sorting comparator function - assess the order of any given column.\n     *  e.g. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort */\n    sortCompareFn?: ColSortComparator | string;\n  }\n\n  /**\n   * Row renderer property. Called during the rendering of any table row\n   * controlling it's visual state.\n   */\n  interface RowRenderer<T = RowData> {\n    /** Function to decide whether the row is vertically pinned. */\n    pinned?: PinFunc;\n    /**\n     * A row render function, called during a any row's render to the dom.\n     * It can be used to add extra markup around any given table row\n     **/\n    template?: RowTemplateFunc<VNode | VNode[], T>;\n    /** A function which can be used to apply any html attribute/s onto a table row `tr` */\n    rowProperties?: RowPropertiesFunc<T>;\n  }\n\n  /**\n   * Row renderer property. Called during the rendering of a tables head and foot\n   * controlling their visual state.\n   */\n  interface HeadFootRenderer<T = RowData> {\n    /** Position prop. Defaults to `top` for the header and `bottom` the footer */\n    pinned: Position;\n    /**\n     * A row render function, called during a any row's render to the dom.\n     * It can be used to add extra markup around any given table row.\n     * If used, and you want to see the rendered row, you *must* nest it within your\n     * jsx function e.g. `(h, props) => { return [props.renderedRow, <tr><td>Custom thing</td></tr>]}`\n     **/\n    template?: RowTemplateFunc<VNode | VNode[], T>;\n    /** A function which can be used to apply any html attribute/s onto a table row `tr` */\n    rowProperties?: () => RowProps | void | undefined;\n  }\n\n  type TBody = {\n    rows: TableTypes.NanoTable['rows'];\n    __uuid: string | number;\n  };\n\n  class NanoTable<T = RowGeneric> {\n    rows: T[];\n    columns: ColumnConfig<T>[];\n    rowRender: RowRenderer<T>;\n    headRender: HeadFootRenderer<T>;\n    footRender: HeadFootRenderer<T>;\n  }\n\n  type Falsy = false | 0 | '' | null | undefined;\n}\n"]}
+{"version":3,"file":"table-interface.js","sourceRoot":"","sources":["../../../src/components/table/table-interface.ts"],"names":[],"mappings":"","sourcesContent":["import type { JSXBase } from '@stencil/core/internal';\nimport type { VNode, FunctionalComponent } from '@stencil/core';\n\nexport declare namespace TableTypes {\n  /** The column property */\n  type ColumnProp = string | number;\n\n  /** Possible positions. Horizontally means l/r. Vertically means top/bottom */\n  type Position = 'start' | 'end' | 'top' | 'bottom';\n\n  /** A function to assess whether a rendered row will be pinned to the top or bottom */\n  type PinFunc = (props?: RowDataSchemaModel) => Position;\n\n  /** Function called, via intersection observer, when an element's pinned status changes */\n  type PinnedCb = (\n    positions: { [key in Position]?: boolean },\n    target: Element\n  ) => void;\n\n  /** Potential column ordering options */\n  type Order = 'asc' | 'desc' | undefined;\n\n  /** Column filtering */\n  interface Filter {\n    prop: TableTypes.Prop;\n    filter: string | boolean | string[];\n  }\n\n  /** Column sorting */\n  interface Sort {\n    prop: TableTypes.Prop;\n    order: TableTypes.Order;\n  }\n\n  /** Potential html properties which can be passed to a cell or column */\n  type CellProps = JSXBase.ThHTMLAttributes<HTMLTableCellElement>;\n\n  /** Potential html properties which can be passed to a row */\n  type RowProps = JSXBase.HTMLAttributes<HTMLTableRowElement>;\n\n  /** data model passed to cell rendering functions */\n  interface RenderModel<T = RowGeneric> {\n    /** The column property being iterated over */\n    prop: keyof T;\n    /** The data for this cell */\n    cellModel: any;\n    /** The column config object */\n    column: ColumnConfig<T>;\n    /** The row index currently being iterated over */\n    rowIndex: number;\n    /** The row model currently being iterated over  */\n    rowModel: RowData<T>;\n  }\n\n  /** data model passed to row rendering functions */\n  interface RowDataSchemaModel<T = RowGeneric> {\n    /** the current data row model being iterated over */\n    rowModel?: RowData<T>;\n    /** the current data row index  */\n    rowIndex?: number;\n    /** The row being rendered. You *must* nest this in your render function otherwise it will not be shown */\n    renderedRow?: VNode;\n  }\n\n  /** A JSX `createElement` function passed to rendering functions.\n   * You can use this to create markup outside of JSX environments\n   * e.g. https://reactjs.org/docs/react-without-jsx.html */\n  interface HFunc<T> {\n    (tag: any): T;\n  }\n  interface HFunc<T> {\n    (tag: any, data: any): T;\n  }\n  interface HFunc<T> {\n    (tag: any, text: string): T;\n  }\n  interface HFunc<T> {\n    (sel: any, children: Array<T | undefined | null>): T;\n  }\n  interface HFunc<T> {\n    (sel: any, data: any, text: string): T;\n  }\n  interface HFunc<T> {\n    (sel: any, data: any, children: Array<T | undefined | null>): T;\n  }\n  interface HFunc<T> {\n    (sel: any, data: any, children: T): T;\n  }\n\n  /**\n   * Properties that can be used with the row template `TableCell` jsx partial\n   */\n  type TableRowCellHelperProps = {\n    header?: boolean;\n    wrap?: boolean;\n    cellProps?: CellProps;\n    wrapperProps?: JSXBase.HTMLAttributes<HTMLDivElement>;\n  };\n\n  /**\n   * A row render function, called during a any row's render to the dom.\n   * It can be used to add extra markup around any given table row\n   **/\n  type RowTemplateFunc<T, P> = (\n    /** use this to create markup outside of JSX environments\n     * e.g. https://reactjs.org/docs/react-without-jsx.html */\n    createElement: HFunc<T>,\n    /** data passed to each template */\n    props: RowDataSchemaModel<P>,\n    /** a helper template to minimise boilerplate.\n     * A shortcut for `<td><div class=\"nano-tbl__cell-content\"></div></td>` */\n    TableCell: FunctionalComponent<TableRowCellHelperProps>\n  ) => T | undefined;\n\n  /**\n   * A cell render function, called during any cell's render to the dom.\n   * It can be used to add any markup within a table cell.\n   */\n  type CellTemplateFunc<T, P> = (\n    createElement: HFunc<T>,\n    props: RenderModel<P>\n  ) => TplResult;\n\n  /**\n   * A table header render function, called during any column's render to the dom.\n   * It can be used to add any markup within a table header `th`.\n   */\n  type ColumnTemplateFunc<T, P> = (\n    createElement: HFunc<T>,\n    col: ColumnConfig<P>\n  ) => TplResult;\n\n  /** A function used to assess the order of any given column.\n   * e.g. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort\n   */\n  type ColSortComparator = (\n    prop: keyof RowData,\n    order: Order\n  ) => (a: RowData, b: RowData) => number;\n\n  /** A function which can be used to apply any html attribute/s onto a table cell `td` */\n  type PropertiesFunc = (props: RenderModel) => CellProps | void | undefined;\n\n  /** A function which can be used to apply any html attribute/s onto a table head `th` */\n  type ColPropertiesFunc<T> = (\n    props: ColumnConfig<T>\n  ) => CellProps | void | undefined;\n\n  /** A function which can be used to apply any html attribute/s onto a table row `tr` */\n  type RowPropertiesFunc<T> = (\n    props: RowDataSchemaModel<T>\n  ) => RowProps | void | undefined;\n\n  type RowGeneric = { [key: string | number]: any };\n\n  /** An individual table cell's data */\n  type RowData<T = RowGeneric> = T & {\n    __uuid?: string | number;\n    __index?: number;\n  };\n\n  /** A data property */\n  type Prop = keyof RowData;\n\n  /** Valid column data types */\n  type ColumnType =\n    | 'text'\n    | 'string'\n    | 'number'\n    | 'date'\n    | 'boolean'\n    | 'unknown';\n\n  type LibJSX = { [key: string]: any };\n  type JSXRender = VNode | VNode[] | LibJSX | LibJSX[];\n  type TplReturn = JSXRender | string | Element | undefined;\n  type TplResult = TplReturn | Promise<string>;\n\n  /**\n   * A table column's configuration\n   */\n  interface ColumnConfig<T = RowData> {\n    /** The title of the column. Displayed in the table header `th` */\n    title?: string;\n    /** The row's data property to retrieve per cell render */\n    prop?: keyof T;\n    /** The type of data. Will affect how it is sorted and the available\n     * filter operations ('text' uses browser locale to compare).\n     * If none supplied, it will be derived by default using the first row of data retrieved. */\n    type?: ColumnType;\n    /** Whether this column is horizontally pinned to viewport */\n    pinned?: Position;\n    /** By default cell content too wide for the cell will not wrap,\n     * but rather be trimmed with '...'.\n     * *Note* 'wrap' is mutually-exclusive from `autoTooltip` */\n    wrap?: boolean;\n    /** Setting this to true, will automatically watch content that\n     * doesn't fit and duplicate it to show in a tooltip.\n     * *Note* 'autoTooltip' is mutually-exclusive from `wrap` */\n    autoTooltip?: boolean;\n    /** Whether this column is a row header; the cell will render a `th` not a `td` */\n    rowHeader?: boolean;\n    /** Whether this column can be sorted. Defaults to true */\n    sortable?: boolean;\n    /** Current order of this column */\n    order?: Order;\n    /** Whether to include this column when doing a general search. Defaults to true */\n    searchable?: boolean;\n    /** Current filters applied to this column  */\n    filter?: string | boolean | string[];\n    /**\n     * A cell render function, called during any cell's render to the dom.\n     * It can be used to add any markup within a table cell.\n     */\n    cellTemplate?: CellTemplateFunc<JSXRender, T>;\n    /** A function which can be used to apply any html attribute/s onto a table cell `td` */\n    cellProperties?: PropertiesFunc;\n    /**\n     * A table header render function, called during any column's render to the dom.\n     * It can be used to add any markup within a table header `th`.\n     */\n    columnTemplate?: ColumnTemplateFunc<JSXRender, T>;\n    /** A function which can be used to apply any html attribute/s onto a table head `th` */\n    columnProperties?: ColPropertiesFunc<T>;\n    /** A custom sorting comparator function - assess the order of any given column.\n     *  e.g. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort */\n    sortCompareFn?: ColSortComparator | string;\n  }\n\n  /**\n   * Row renderer property. Called during the rendering of any table row\n   * controlling it's visual state.\n   */\n  interface RowRenderer<T = RowData> {\n    /** Function to decide whether the row is vertically pinned. */\n    pinned?: PinFunc;\n    /**\n     * A row render function, called during a any row's render to the dom.\n     * It can be used to add extra markup around any given table row\n     **/\n    template?: RowTemplateFunc<VNode | VNode[], T>;\n    /** A function which can be used to apply any html attribute/s onto a table row `tr` */\n    rowProperties?: RowPropertiesFunc<T>;\n  }\n\n  /**\n   * Row renderer property. Called during the rendering of a tables head and foot\n   * controlling their visual state.\n   */\n  interface HeadFootRenderer<T = RowData> {\n    /** Position prop. Defaults to `top` for the header and `bottom` the footer */\n    pinned: Position;\n    /**\n     * A row render function, called during a any row's render to the dom.\n     * It can be used to add extra markup around any given table row.\n     * If used, and you want to see the rendered row, you *must* nest it within your\n     * jsx function e.g. `(h, props) => { return [props.renderedRow, <tr><td>Custom thing</td></tr>]}`\n     **/\n    template?: RowTemplateFunc<VNode | VNode[], T>;\n    /** A function which can be used to apply any html attribute/s onto a table row `tr` */\n    rowProperties?: () => RowProps | void | undefined;\n  }\n\n  type TBody = {\n    rows: TableTypes.NanoTable['rows'];\n    __uuid: string | number;\n  };\n\n  class NanoTable<T = RowGeneric> {\n    rows: T[];\n    columns: ColumnConfig<T>[];\n    rowRender: RowRenderer<T>;\n    headRender: HeadFootRenderer<T>;\n    footRender: HeadFootRenderer<T>;\n  }\n\n  type Falsy = false | 0 | '' | null | undefined;\n}\n"]}