@nanoporetech-digital/components 3.0.0 → 3.1.0

package/dist/collection/components/nav-item/nav-item.css

@@ -270,7 +270,6 @@
       -ms-flex-align: center;
           align-items: center;
   cursor: pointer;
-  font-stretch: expanded;
 }
 :host(.nano-global-nav-bar) .text {
   -webkit-box-flex: 1;
@@ -288,14 +287,13 @@
 
 :host(.nano-global-nav-bar.has-secondary) button {
   position: relative;
-  font-stretch: expanded;
 }
 :host(.nano-global-nav-bar.has-secondary) button::before {
   content: "";
-  background: #86bee2;
-  height: 3px;
+  background-color: #0c5a71;
+  height: 9px;
   inset-inline: 0 5px;
-  inset-block-end: -14px;
+  inset-block-end: -24px;
   position: absolute;
   -webkit-transform: translateZ(0) scaleX(0);
           transform: translateZ(0) scaleX(0);
@@ -310,7 +308,7 @@
           transform: translateZ(0) scaleX(1);
 }
 :host(.nano-global-nav-bar.has-secondary) .secondary-open button::before {
-  opacity: 0.5;
+  opacity: 0.7;
 }
 :host(.nano-global-nav-bar.has-secondary) .secondary-menu {
   display: none;

package/dist/collection/components/progress-bar/progress-bar.css

@@ -0,0 +1,84 @@
+:host {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+[hidden] {
+  display: none !important;
+}
+/**
+ * @prop --height: The progress bar's height. Default 1em
+ * @prop --track-color: The track color. Default rgba(var(--nano-track-rgb, 228, 230, 232), 1);
+ * @prop --indicator-color: The indicator color. Default rgba(var(--nano-indicator-rgb, 84, 140, 175), 1);
+ * @prop --label-color: The label color. Default var(--nano-color-white, white);
+ */
+:host {
+  --height: 1em;
+  --track-color: rgba(var(--nano-track-rgb, 228, 230, 232), 1);
+  --indicator-color: rgba(var(--nano-indicator-rgb, 84, 140, 175), 1);
+  --label-color: var(--nano-color-white, white);
+  display: block;
+}
+
+.progress-bar {
+  position: relative;
+  background-color: var(--track-color);
+  height: var(--height);
+  border-radius: var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));
+  overflow: hidden;
+}
+
+.progress-bar__indicator {
+  height: 100%;
+  font-size: 0.75em;
+  background-color: var(--indicator-color);
+  color: var(--label-color);
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  -webkit-transition: 0.4s width, 0.4s background-color;
+  transition: 0.4s width, 0.4s background-color;
+  -webkit-transform: translateZ(0);
+          transform: translateZ(0);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  -webkit-transform-origin: left;
+          transform-origin: left;
+}
+
+.progress-bar--indeterminate .progress-bar__indicator {
+  -webkit-animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
+          animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
+}
+
+@-webkit-keyframes indeterminate {
+  0% {
+    scale: 1 1;
+    -webkit-transform: translateX(-100%) translateZ(0);
+            transform: translateX(-100%) translateZ(0);
+  }
+  75%, 100% {
+    scale: 1 1;
+    -webkit-transform: translateX(100%) translateZ(0);
+            transform: translateX(100%) translateZ(0);
+  }
+}
+
+@keyframes indeterminate {
+  0% {
+    scale: 1 1;
+    -webkit-transform: translateX(-100%) translateZ(0);
+            transform: translateX(-100%) translateZ(0);
+  }
+  75%, 100% {
+    scale: 1 1;
+    -webkit-transform: translateX(100%) translateZ(0);
+            transform: translateX(100%) translateZ(0);
+  }
+}

package/dist/collection/components/progress-bar/progress-bar.js

@@ -0,0 +1,106 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { h } from '@stencil/core';
+/**
+ * Used to show the status of an ongoing operation.
+ *
+ * @slot - A label to show inside the indicator.
+ *
+ * @part base - The component's base wrapper.
+ * @part indicator - The progress bar indicator.
+ * @part label - The progress bar label.
+ */
+export class ProgressBar {
+  constructor() {
+    this.value = 0;
+    this.indeterminate = false;
+    this.showPercent = false;
+  }
+  render() {
+    return (h("div", { part: "base", class: {
+        'progress-bar': true,
+        'progress-bar--indeterminate': this.indeterminate,
+      }, role: "progressbar", title: this.host.title || undefined, "aria-label": "Progress", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.value }, h("div", { part: "indicator", class: "progress-bar__indicator", style: {
+        width: `${this.value}%`,
+      } }, h("span", { part: "label", class: "progress-bar__label" }, h("slot", null, !this.indeterminate && this.showPercent ? `${this.value}%` : '')))));
+  }
+  static get is() { return "nano-progress-bar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["progress-bar.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["progress-bar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The progress bar's percentage, 0 to 100."
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "indeterminate": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state."
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "indeterminate",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "showPercent": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot."
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "show-percent",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=progress-bar.js.map

package/dist/collection/components/progress-bar/progress-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE5D;;;;;;;;GAQG;AAOH,MAAM,OAAO,WAAW;;iBAIN,CAAC;yBAGO,KAAK;uBAGP,KAAK;;EAE3B,MAAM;IACJ,OAAO,CACL,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,6BAA6B,EAAE,IAAI,CAAC,aAAa;OAClD,EACD,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,gBACxB,UAAU,mBACP,GAAG,mBACH,KAAK,mBACJ,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;MAErD,WACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE;UACL,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG;SACxB;QAED,YAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB;UAC5C,gBACG,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,CAC3D,CACF,CACH,CACF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Element } from '@stencil/core';\n\n/**\n * Used to show the status of an ongoing operation.\n *\n * @slot - A label to show inside the indicator.\n *\n * @part base - The component's base wrapper.\n * @part indicator - The progress bar indicator.\n * @part label - The progress bar label.\n */\n\n@Component({\n  tag: 'nano-progress-bar',\n  styleUrl: 'progress-bar.scss',\n  shadow: true,\n})\nexport class ProgressBar {\n  @Element() host: HTMLNanoProgressBarElement;\n\n  /** The progress bar's percentage, 0 to 100. */\n  @Prop() value = 0;\n\n  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */\n  @Prop() indeterminate = false;\n\n  /** Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.  */\n  @Prop() showPercent = false;\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        class={{\n          'progress-bar': true,\n          'progress-bar--indeterminate': this.indeterminate,\n        }}\n        role=\"progressbar\"\n        title={this.host.title || undefined}\n        aria-label=\"Progress\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow={this.indeterminate ? null : this.value}\n      >\n        <div\n          part=\"indicator\"\n          class=\"progress-bar__indicator\"\n          style={{\n            width: `${this.value}%`,\n          }}\n        >\n          <span part=\"label\" class=\"progress-bar__label\">\n            <slot>\n              {!this.indeterminate && this.showPercent ? `${this.value}%` : ''}\n            </slot>\n          </span>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/skeleton/skeleton.css

@@ -12,26 +12,28 @@
 }
 :host {
   /**
-   * @prop --base-color-rgb: default var(--nano-skeleton-base-rgb, 228, 230, 232);
+   * @prop --base-color-rgb: default var(--nano-skeleton-rgb, 228, 230, 232);
    * @prop --color: default var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));
    * @prop --tint: default var(--nano-skeleton-tint, rgba(var(--base-color-rgb), .3));
    */
-  --base-color-rgb: var(--nano-skeleton-base-rgb, 228, 230, 232);
+  --base-color-rgb: var(--nano-skeleton-rgb, 228, 230, 232);
   --color: var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));
   --tint: var(--nano-skeleton-tint, rgba(var(--base-color-rgb), 0.5));
   display: block;
   position: relative;
   border-radius: 0.25rem;
-  block-size: 1em;
+  min-block-size: 1em;
+  line-height: inherit;
 }
 
 .skeleton {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  inline-size: 100%;
-  block-size: 100%;
+  min-inline-size: 100%;
+  min-block-size: 100%;
   border-radius: inherit;
+  line-height: inherit;
 }
 
 .skeleton__indicator {
@@ -40,6 +42,7 @@
           flex: 1 1 auto;
   background: var(--color);
   border-radius: inherit;
+  line-height: inherit;
 }
 
 .skeleton.animate .skeleton__indicator {

package/dist/collection/components/skeleton/skeleton.js

@@ -15,7 +15,7 @@ export class Skeleton {
     return (h("div", { class: {
         skeleton: true,
         animate: this.animated,
-      } }, h("div", { class: "skeleton__indicator" })));
+      } }, h("div", { class: "skeleton__indicator" }, "\u00A0")));
   }
   static get is() { return "nano-skeleton"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAsB,MAAM,eAAe,CAAC;AAEvE;;;;GAIG;AAMH,MAAM,OAAO,QAAQ;;oBAEA,IAAI;;EAEvB,MAAM;IACJ,OAAO,CACL,WACE,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI;QACd,OAAO,EAAE,IAAI,CAAC,QAAQ;OACvB;MAED,WAAK,KAAK,EAAC,qBAAqB,GAAG,CAC/B,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, ComponentInterface } from '@stencil/core';\n\n/**\n * Skeletons are used to show where content will eventually be drawn.\n * Simple containers for scaffolding layouts that mimic what users will see when content has finished loading.\n * Prevents large areas of empty space during asynchronous operations.\n */\n@Component({\n  tag: 'nano-skeleton',\n  styleUrl: 'skeleton.scss',\n  shadow: true,\n})\nexport class Skeleton implements ComponentInterface {\n  /** When `true`, the skeleton will animate. */\n  @Prop() animated = true;\n\n  render() {\n    return (\n      <div\n        class={{\n          skeleton: true,\n          animate: this.animated,\n        }}\n      >\n        <div class=\"skeleton__indicator\" />\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAsB,MAAM,eAAe,CAAC;AAEvE;;;;GAIG;AAMH,MAAM,OAAO,QAAQ;;oBAEA,IAAI;;EAEvB,MAAM;IACJ,OAAO,CACL,WACE,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI;QACd,OAAO,EAAE,IAAI,CAAC,QAAQ;OACvB;MAED,WAAK,KAAK,EAAC,qBAAqB,aAAa,CACzC,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, ComponentInterface } from '@stencil/core';\n\n/**\n * Skeletons are used to show where content will eventually be drawn.\n * Simple containers for scaffolding layouts that mimic what users will see when content has finished loading.\n * Prevents large areas of empty space during asynchronous operations.\n */\n@Component({\n  tag: 'nano-skeleton',\n  styleUrl: 'skeleton.scss',\n  shadow: true,\n})\nexport class Skeleton implements ComponentInterface {\n  /** When `true`, the skeleton will animate. */\n  @Prop() animated = true;\n\n  render() {\n    return (\n      <div\n        class={{\n          skeleton: true,\n          animate: this.animated,\n        }}\n      >\n        <div class=\"skeleton__indicator\">&nbsp;</div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/spinner/spinner.css

@@ -12,19 +12,15 @@
 }
 :host {
   /**
-   * @prop --base-color-rgb: default var(--nano-spinner-base-rgb, 0, 116, 149)
-   * @prop --indicator-color: default var(--nano-spinner-indicator-color, rgba(var(--base-color-rgb), 1))
-   * @prop --track-color: default var(--nano-track-color, rgba(var(--base-color-rgb), .2))
+   * @prop --base-color-rgb: default var(--nano-indicator-rgb, 84, 140, 175)
+   * @prop --indicator-color: default var(--nano-indicator-color, rgba(var(--base-color-rgb), 1));
+   * @prop --track-color: default var(--nano-track-color, rgba(var(--base-color-rgb), 0.2));
    * @prop --spinner-scale: optional scaling of the spinner. default contextual font-size
    * @prop --overlay-color: var(--nano-layer-overlay-light, rgba(255, 255, 255, .7));
    */
   display: inline-block;
-  --base-color-rgb: var(--nano-spinner-base-rgb, 0, 116, 149);
-  --indicator-color:
-    var(
-      --nano-spinner-indicator-color,
-      rgba(var(--base-color-rgb), 1)
-    );
+  --base-color-rgb: var(--nano-indicator-rgb, 84, 140, 175);
+  --indicator-color: var(--nano-indicator-color, rgba(var(--base-color-rgb), 1));
   --track-color: var(--nano-track-color, rgba(var(--base-color-rgb), 0.2));
   --overlay-color: var(--nano-layer-overlay-light, rgba(255, 255, 255, .7));
 }

package/dist/collection/components/table/table.children.js

@@ -3,7 +3,7 @@
  */
 import { Fragment, h } from '@stencil/core';
 import { CSSNAMESPACE } from './table.constants';
-import { cellRender, colheadRender, fetchStores, mergeCellProperties, mergeProperties, rowDataModel, } from './table.service';
+import { cellRender, colheadFootRender, fetchStores, mergeCellProperties, mergeProperties, rowDataModel, } from './table.service';
 function baseClasses(type, vPinned, toString = false) {
   const classes = {
     [`${CSSNAMESPACE}__${type}`]: true,
@@ -26,33 +26,56 @@ const stickyVIOs = new WeakMap();
 function addHObserver(el, pos, cb) {
   if (stickyHIOs.get(el))
     return;
+  const store = fetchStores();
+  const root = store.general.state.scrollParent;
+  const host = store.general.state.host;
   const observer = new IntersectionObserver(([e]) => {
     const positions = {};
-    if (pos === 'start')
-      positions.start = e.boundingClientRect.x < 0 && !e.isIntersecting;
-    if (pos === 'end')
+    if (pos === 'start') {
+      positions.start =
+        e.boundingClientRect.x -
+          (host.getBoundingClientRect().x + root.scrollLeft) <
+          0 && !e.isIntersecting;
+    }
+    if (pos === 'end') {
+      // TODO - sort these out for RtL
       positions.end =
-        e.boundingClientRect.width > e.intersectionRect.width &&
+        e.boundingClientRect.right > e.boundingClientRect.width &&
           !e.isIntersecting;
+    }
     cb(positions);
-  }, { threshold: [1], rootMargin: '1px 0px 1px 0px' });
+  }, {
+    threshold: [1],
+    rootMargin: '1px 0px 1px 0px',
+    root: root === document.scrollingElement ? null : root,
+  });
   stickyHIOs.set(el, observer);
   requestAnimationFrame(() => observer.observe(el));
 }
 function addVObserver(el, pos, cb) {
   if (stickyVIOs.get(el))
     return;
+  const store = fetchStores();
+  const root = store.general.state.scrollParent;
+  const host = store.general.state.host;
   const observer = new IntersectionObserver(([e]) => {
-    console.log(e);
     const positions = {};
-    if (pos === 'top')
-      positions.top = e.boundingClientRect.y < 0 && !e.isIntersecting;
+    if (pos === 'top') {
+      positions.top =
+        e.boundingClientRect.y -
+          (host.getBoundingClientRect().y + root.scrollTop) <
+          0 && !e.isIntersecting;
+    }
     if (pos === 'bottom')
       positions.bottom =
         e.boundingClientRect.height > e.intersectionRect.height &&
           !e.isIntersecting;
     cb(positions);
-  }, { threshold: [0.99], rootMargin: '0px 100px 0px 100px' });
+  }, {
+    threshold: [0.99],
+    rootMargin: '0px 100px 0px 100px',
+    root: root === document.scrollingElement ? null : root,
+  });
   stickyVIOs.set(el, observer);
   requestAnimationFrame(() => observer.observe(el));
 }
@@ -125,7 +148,7 @@ export const TableColHead = ({ column, headRenderer, onColumnOrderClick, onColum
       default:
         order = 'asc';
     }
-    onColumnOrderClick(order, column.prop, e.target.parentElement);
+    onColumnOrderClick(order, column.prop, e.target.closest('th'));
   }
   let extraProps = {};
   if (column.columnProperties) {
@@ -141,7 +164,7 @@ export const TableColHead = ({ column, headRenderer, onColumnOrderClick, onColum
     },
   };
   let props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
-  const content = colheadRender(column);
+  const content = colheadFootRender(column);
   if (!content)
     return h(Fragment, null);
   props =
@@ -158,7 +181,10 @@ export const TableColHead = ({ column, headRenderer, onColumnOrderClick, onColum
           addHObserver(th, column.pinned, onColumnPinned);
         if (['top', 'bottom'].includes(headRenderer.pinned))
           addVObserver(th, headRenderer.pinned, onColumnPinned);
-      } }, h("button", { class: `${CSSNAMESPACE}__order-btn`, onClick: handleColumnOrderClick }, colheadRender(column), !!column.filter && h("nano-icon", { name: "light/filter" }), !!column.order &&
+      } }, h("button", { class: {
+        [`${CSSNAMESPACE}__order-btn`]: true,
+        [`${CSSNAMESPACE}__cell-content`]: true,
+      }, onClick: handleColumnOrderClick }, colheadFootRender(column), !!column.filter && h("nano-icon", { name: "light/filter" }), !!column.order &&
       (column.order === 'desc' ? (h("nano-icon", { name: "solid/long-arrow-down" })) : (h("nano-icon", { name: "solid/long-arrow-up" }))), h("div", { class: `${CSSNAMESPACE}__status-icons` }, h("nano-icon", { name: "light/chevron-down" })))));
   }
   return (h("th", { ...props, ref: (th) => {
@@ -166,10 +192,10 @@ export const TableColHead = ({ column, headRenderer, onColumnOrderClick, onColum
         addHObserver(th, column.pinned, onColumnPinned);
       if (['top', 'bottom'].includes(headRenderer.pinned))
         addVObserver(th, headRenderer.pinned, onColumnPinned);
-    } }, colheadRender(column), !!column.filter && h("nano-icon", { name: "light/bars-filter" })));
+    } }, h("div", { class: `${CSSNAMESPACE}__cell-content` }, colheadFootRender(column), !!column.filter && h("nano-icon", { name: "light/bars-filter" }))));
 };
-export const TableCell = ({ rowIndex, colIndex, }) => {
-  const content = cellRender(rowIndex, colIndex);
+export const TableCell = ({ rowIndex, colIndex, nestedContent, }) => {
+  const content = nestedContent || cellRender(rowIndex, colIndex);
   if (!content)
     return h(Fragment, null);
   const store = fetchStores();
@@ -193,6 +219,6 @@ export const TableCell = ({ rowIndex, colIndex, }) => {
   }
   return (h(CellType
   // role="gridcell"
-  , { ...props }, cellRender(rowIndex, colIndex)));
+  , { ...props }, h("div", { class: `${CSSNAMESPACE}__cell-content` }, content)));
 };
 //# sourceMappingURL=table.children.js.map

package/dist/collection/components/table/table.children.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.children.js","sourceRoot":"","sources":["../../../src/components/table/table.children.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAuB,CAAC,EAAS,MAAM,eAAe,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EACL,UAAU,EACV,aAAa,EACb,WAAW,EACX,mBAAmB,EACnB,eAAe,EACf,YAAY,GACb,MAAM,iBAAiB,CAAC;AAiBzB,SAAS,WAAW,CAClB,IAAsB,EACtB,OAA6B,EAC7B,QAAQ,GAAG,KAAK;EAEhB,MAAM,OAAO,GAAG;IACd,CAAC,GAAG,YAAY,KAAK,IAAI,EAAE,CAAC,EAAE,IAAI;IAClC,CAAC,GAAG,YAAY,OAAO,CAAC,EAAE,CAAC,CAAC,OAAO;IACnC,CAAC,GAAG,YAAY,YAAY,CAAC,EAAE,OAAO,KAAK,KAAK;IAChD,CAAC,GAAG,YAAY,eAAe,CAAC,EAAE,OAAO,KAAK,QAAQ;GACvD,CAAC;EAEF,IAAI,QAAQ,EAAE;IACZ,IAAI,WAAW,GAAG,EAAE,CAAC;IACrB,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,EAAE,EAAE;MAClD,IAAI,EAAE;QAAE,WAAW,IAAI,SAAS,GAAG,GAAG,CAAC;IACzC,CAAC,CAAC,CAAC;IACH,OAAO,WAAW,CAAC;GACpB;EACD,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,GACd,IAAI,OAAO,EAAE,CAAC;AAChB,MAAM,UAAU,GACd,IAAI,OAAO,EAAE,CAAC;AAEhB,SAAS,YAAY,CACnB,EAAwB,EACxB,GAAwB,EACxB,EAAY;EAEZ,IAAI,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;IAAE,OAAO;EAE/B,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACvC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;IACN,MAAM,SAAS,GAA+C,EAAE,CAAC;IACjE,IAAI,GAAG,KAAK,OAAO;MACjB,SAAS,CAAC,KAAK,GAAG,CAAC,CAAC,kBAAkB,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC;IACpE,IAAI,GAAG,KAAK,KAAK;MACf,SAAS,CAAC,GAAG;QACX,CAAC,CAAC,kBAAkB,CAAC,KAAK,GAAG,CAAC,CAAC,gBAAgB,CAAC,KAAK;UACrD,CAAC,CAAC,CAAC,cAAc,CAAC;IACtB,EAAE,CAAC,SAAS,CAAC,CAAC;EAChB,CAAC,EACD,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,iBAAiB,EAAE,CAClD,CAAC;EACF,UAAU,CAAC,GAAG,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;EAC7B,qBAAqB,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC;AACpD,CAAC;AAED,SAAS,YAAY,CACnB,EAAwB,EACxB,GAAwB,EACxB,EAAY;EAEZ,IAAI,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;IAAE,OAAO;EAE/B,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACvC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;IACN,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACf,MAAM,SAAS,GAA+C,EAAE,CAAC;IACjE,IAAI,GAAG,KAAK,KAAK;MACf,SAAS,CAAC,GAAG,GAAG,CAAC,CAAC,kBAAkB,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC;IAClE,IAAI,GAAG,KAAK,QAAQ;MAClB,SAAS,CAAC,MAAM;QACd,CAAC,CAAC,kBAAkB,CAAC,MAAM,GAAG,CAAC,CAAC,gBAAgB,CAAC,MAAM;UACvD,CAAC,CAAC,CAAC,cAAc,CAAC;IACtB,EAAE,CAAC,SAAS,CAAC,CAAC;EAChB,CAAC,EACD,EAAE,SAAS,EAAE,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,qBAAqB,EAAE,CACzD,CAAC;EACF,UAAU,CAAC,GAAG,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;EAC7B,qBAAqB,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC;AACpD,CAAC;AAQD,MAAM,CAAC,MAAM,QAAQ,GAAuC,CAC1D,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,EAAE,EAC9B,QAAQ,EACR,EAAE;EACF,IAAI,UAAU,GAAG,EAAE,CAAC;EAEpB,IAAI,CAAC,GAAG,EAAE;IACR,MAAM,KAAK,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC;IACrC,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC;GACjB;EAED,IAAI,WAAW,EAAE,aAAa,EAAE;IAC9B,UAAU;MACR,WAAW,CAAC,aAAa,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,IAAI,UAAU,CAAC;GACnE;EAED,IAAI,MAA2B,CAAC;EAChC,IAAI,WAAW,EAAE,MAAM,IAAI,OAAO,WAAW,CAAC,MAAM,KAAK,UAAU,EAAE;IACnE,MAAM,GAAG,WAAW,CAAC,MAAM,EAAE,CAAC;GAC/B;EAED,MAAM,SAAS,GAAG,EAAE,KAAK,EAAE,WAAW,CAAC,IAAI,EAAE,MAAM,CAAC,EAAE,CAAC;EACvD,MAAM,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;EAE9E,OAAO,CACL,aAAQ,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,MAAM,IAC3B,QAAQ,CACN,CACN,CAAC;AACJ,CAAC,CAAC;AAOF,MAAM,CAAC,MAAM,gBAAgB,GAA4C,CACvE,EAAE,WAAW,EAAE,cAAc,EAAE,EAC/B,QAAQ,EACR,KAAK,EACL,EAAE;EACF,IAAI,UAAU,GAAG,EAAE,CAAC;EACpB,IAAI,WAAW,CAAC,aAAa,EAAE;IAC7B,UAAU,GAAG,WAAW,CAAC,aAAa,EAAE,IAAI,EAAE,CAAC;GAChD;EAED,MAAM,MAAM,GAAG,WAAW,CAAC,MAAM,IAAI,IAAI,CAAC;EAC1C,MAAM,SAAS,GAAG,EAAE,KAAK,EAAE,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC;EACrD,MAAM,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;EAC9E,MAAM,GAAG,GAAG,WAAW,EAAE,QAAQ,CAAC;EAElC,IAAI,GAAG,EAAE;IACP,IAAI,QAAQ,GAAG,GAAG,CAAC,CAA4B,EAAE;MAC/C,WAAW,EAAE,aAAQ,KAAK,IAAG,QAAQ,CAAM;KAC5C,CAAC,CAAC;IAEH,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;MAC3B,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE;QACtC,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,EAAE;UACtB,IAAI,CAAC,MAAM,GAAG,eAAe,CAC3B,EAAE,KAAK,EAAE,WAAW,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE,EACxC,IAAI,CAAC,MAAM,CACZ,CAAC;UAEF,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE;YACpB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;cACnD,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE;gBAChD,KAAK,CAAC,MAAM,GAAG,eAAe,CAC5B;kBACE,KAAK,EAAE,WAAW,CAChB,KAAK,CAAC,IAAI,CAAC,QAAQ,EAAsB,EACzC,MAAM,EACN,IAAI,CACL;kBACD,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE;oBACV,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,cAAc,CAAC,CAAC;kBAC3C,CAAC;iBACF,EACD,KAAK,CAAC,MAAM,CACb,CAAC;eACH;cACD,OAAO,KAAK,CAAC;YACf,CAAC,CAAC,CAAC;WACJ;SACF;QACD,OAAO,IAAI,CAAC;MACd,CAAC,CAAC,CAAC;KACJ;IACD,OAAO,QAAQ,CAAC;GACjB;EAED,OAAO,aAAQ,KAAK,IAAG,QAAQ,CAAM,CAAC;AACxC,CAAC,CAAC;AAaF,MAAM,CAAC,MAAM,YAAY,GAA2C,CAAC,EACnE,MAAM,EACN,YAAY,EACZ,kBAAkB,EAClB,cAAc,GACf,EAAE,EAAE;EACH,SAAS,sBAAsB,CAAC,CAAuC;IACrE,IAAI,KAAK,CAAC;IACV,QAAQ,MAAM,CAAC,KAAK,EAAE;MACpB,KAAK,KAAK;QACR,KAAK,GAAG,MAAM,CAAC;QACf,MAAM;MACR,KAAK,MAAM;QACT,KAAK,GAAG,IAAI,CAAC;QACb,MAAM;MACR;QACE,KAAK,GAAG,KAAK,CAAC;KACjB;IACD,kBAAkB,CAAC,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;EACjE,CAAC;EAED,IAAI,UAAU,GAAG,EAAE,CAAC;EACpB,IAAI,MAAM,CAAC,gBAAgB,EAAE;IAC3B,UAAU,GAAG,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC,IAAI,UAAU,CAAC;GAC5D;EAED,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE;MACL,GAAG,WAAW,CAAC,IAAI,EAAE,YAAY,EAAE,MAAM,CAAC;MAC1C,CAAC,GAAG,YAAY,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,KAAK,OAAO;MAC1D,CAAC,GAAG,YAAY,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,KAAK,KAAK;MACtD,CAAC,GAAG,YAAY,WAAW,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK;MAC5C,CAAC,GAAG,YAAY,YAAY,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM;KAC/C;GACF,CAAC;EACF,IAAI,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;EAC5E,MAAM,OAAO,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;EAEtC,IAAI,CAAC,OAAO;IAAE,OAAO,EAAC,QAAQ,OAAY,CAAC;EAE3C,KAAK;IACH,MAAM,CAAE,KAA6B,CAAC,OAAO,CAAC,GAAG,CAAC;MAChD,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE;MACjC,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;EAEjC,IAAI,MAAM,CAAC,QAAQ,KAAK,KAAK,EAAE;IAC7B,OAAO,CACL,aACM,KAAK,eAEP,MAAM,CAAC,KAAK;QACV,CAAC,CAAC,MAAM,CAAC,KAAK,KAAK,KAAK;UACtB,CAAC,CAAC,WAAW;UACb,CAAC,CAAC,YAAY;QAChB,CAAC,CAAC,MAAM,EAEZ,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE;QACV,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC;UAC1C,YAAY,CAAC,EAAE,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;QAClD,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC,MAAM,CAAC;UACjD,YAAY,CAAC,EAAE,EAAE,YAAY,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;MAC1D,CAAC;MAED,cACE,KAAK,EAAE,GAAG,YAAY,aAAa,EACnC,OAAO,EAAE,sBAAsB;QAE9B,aAAa,CAAC,MAAM,CAAC;QACrB,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,iBAAW,IAAI,EAAC,cAAc,GAAG;QACpD,CAAC,CAAC,MAAM,CAAC,KAAK;UACb,CAAC,MAAM,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,CACzB,iBAAW,IAAI,EAAC,uBAAuB,GAAG,CAC3C,CAAC,CAAC,CAAC,CACF,iBAAW,IAAI,EAAC,qBAAqB,GAAG,CACzC,CAAC;QACJ,WAAK,KAAK,EAAE,GAAG,YAAY,gBAAgB;UACzC,iBAAW,IAAI,EAAC,oBAAoB,GAAG,CACnC,CACC,CACN,CACN,CAAC;GACH;EAED,OAAO,CACL,aACM,KAAK,EACT,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE;MACV,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC;QAC1C,YAAY,CAAC,EAAE,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;MAClD,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC,MAAM,CAAC;QACjD,YAAY,CAAC,EAAE,EAAE,YAAY,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAC1D,CAAC;IAEA,aAAa,CAAC,MAAM,CAAC;IACrB,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,iBAAW,IAAI,EAAC,mBAAmB,GAAG,CACvD,CACN,CAAC;AACJ,CAAC,CAAC;AAOF,MAAM,CAAC,MAAM,SAAS,GAAwC,CAAC,EAC7D,QAAQ,EACR,QAAQ,GACT,EAAE,EAAE;EACH,MAAM,OAAO,GAAG,UAAU,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;EAC/C,IAAI,CAAC,OAAO;IAAE,OAAO,EAAC,QAAQ,OAAY,CAAC;EAE3C,MAAM,KAAK,GAAG,WAAW,EAAE,CAAC;EAC5B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;EACpD,IAAI,QAAQ,GAAG,IAAI,CAAC;EACpB,IAAI,KAAK,GAAG,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,EAAE;IAClD,KAAK,EAAE;MACL,CAAC,GAAG,YAAY,MAAM,CAAC,EAAE,IAAI;MAC7B,CAAC,GAAG,YAAY,WAAW,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK;MAC5C,CAAC,GAAG,YAAY,OAAO,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM;MACzC,CAAC,GAAG,YAAY,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,KAAK,OAAO;MAC1D,CAAC,GAAG,YAAY,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,KAAK,KAAK;KACvD;GACF,CAAC,CAAC;EAEH,IAAI,MAAM,CAAC,SAAS,EAAE;IACpB,KAAK;MACH,MAAM,CAAE,KAA6B,CAAC,OAAO,CAAC,GAAG,CAAC;QAChD,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE;QACjC,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;IACjC,QAAQ,GAAG,IAAI,CAAC;GACjB;EAED,OAAO,CACL,EAAC,QAAQ;EACP,kBAAkB;SACd,KAAK,IAER,UAAU,CAAC,QAAQ,EAAE,QAAQ,CAAC,CACtB,CACZ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Fragment, FunctionalComponent, h, VNode } from '@stencil/core';\nimport { CSSNAMESPACE } from './table.constants';\nimport {\n  cellRender,\n  colheadRender,\n  fetchStores,\n  mergeCellProperties,\n  mergeProperties,\n  rowDataModel,\n} from './table.service';\nimport type { TableTypes } from '../../interface';\n\ntype ValidRenderTypes = 'tr' | 'th' | 'td';\n\ntype PinnedCb = (positions: { [key in TableTypes.Position]?: boolean }) => void;\n\nfunction baseClasses(\n  type: ValidRenderTypes,\n  vPinned?: TableTypes.Position,\n  toString?: false\n): { [key: string]: boolean };\nfunction baseClasses(\n  type: ValidRenderTypes,\n  vPinned?: TableTypes.Position,\n  toString?: true\n): string;\nfunction baseClasses(\n  type: ValidRenderTypes,\n  vPinned?: TableTypes.Position,\n  toString = false\n): { [key: string]: boolean } | string {\n  const classes = {\n    [`${CSSNAMESPACE}__${type}`]: true,\n    [`${CSSNAMESPACE}__pin`]: !!vPinned,\n    [`${CSSNAMESPACE}__pin--top`]: vPinned === 'top',\n    [`${CSSNAMESPACE}__pin--bottom`]: vPinned === 'bottom',\n  };\n\n  if (toString) {\n    let classString = '';\n    Object.entries(classes).forEach(([className, on]) => {\n      if (on) classString += className + ' ';\n    });\n    return classString;\n  }\n  return classes;\n}\n\nconst stickyHIOs: WeakMap<HTMLTableCellElement, IntersectionObserver> =\n  new WeakMap();\nconst stickyVIOs: WeakMap<HTMLTableCellElement, IntersectionObserver> =\n  new WeakMap();\n\nfunction addHObserver(\n  el: HTMLTableCellElement,\n  pos: TableTypes.Position,\n  cb: PinnedCb\n) {\n  if (stickyHIOs.get(el)) return;\n\n  const observer = new IntersectionObserver(\n    ([e]) => {\n      const positions: { [key in TableTypes.Position]?: boolean } = {};\n      if (pos === 'start')\n        positions.start = e.boundingClientRect.x < 0 && !e.isIntersecting;\n      if (pos === 'end')\n        positions.end =\n          e.boundingClientRect.width > e.intersectionRect.width &&\n          !e.isIntersecting;\n      cb(positions);\n    },\n    { threshold: [1], rootMargin: '1px 0px 1px 0px' }\n  );\n  stickyHIOs.set(el, observer);\n  requestAnimationFrame(() => observer.observe(el));\n}\n\nfunction addVObserver(\n  el: HTMLTableCellElement,\n  pos: TableTypes.Position,\n  cb: PinnedCb\n) {\n  if (stickyVIOs.get(el)) return;\n\n  const observer = new IntersectionObserver(\n    ([e]) => {\n      console.log(e);\n      const positions: { [key in TableTypes.Position]?: boolean } = {};\n      if (pos === 'top')\n        positions.top = e.boundingClientRect.y < 0 && !e.isIntersecting;\n      if (pos === 'bottom')\n        positions.bottom =\n          e.boundingClientRect.height > e.intersectionRect.height &&\n          !e.isIntersecting;\n      cb(positions);\n    },\n    { threshold: [0.99], rootMargin: '0px 100px 0px 100px' }\n  );\n  stickyVIOs.set(el, observer);\n  requestAnimationFrame(() => observer.observe(el));\n}\n\ntype TableRowProps = {\n  rowRenderer: TableTypes.RowRenderer;\n  rowIndex?: number;\n  row?: TableTypes.RowData;\n};\n\nexport const TableRow: FunctionalComponent<TableRowProps> = (\n  { rowRenderer, rowIndex, row },\n  children\n) => {\n  let extraProps = {};\n\n  if (!row) {\n    const model = rowDataModel(rowIndex);\n    row = model.row;\n  }\n\n  if (rowRenderer?.rowProperties) {\n    extraProps =\n      rowRenderer.rowProperties({ row: row, rowIndex }) || extraProps;\n  }\n\n  let pinned: TableTypes.Position;\n  if (rowRenderer?.pinned && typeof rowRenderer.pinned === 'function') {\n    pinned = rowRenderer.pinned();\n  }\n\n  const baseProps = { class: baseClasses('tr', pinned) };\n  const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;\n\n  return (\n    <tr {...props} key={row.__uuid}>\n      {children}\n    </tr>\n  );\n};\n\ntype TableHeadFootProps = {\n  rowRenderer: TableTypes.HeadFootRenderer;\n  onColumnPinned?: PinnedCb;\n};\n\nexport const TableHeadFootRow: FunctionalComponent<TableHeadFootProps> = (\n  { rowRenderer, onColumnPinned },\n  children,\n  utils\n) => {\n  let extraProps = {};\n  if (rowRenderer.rowProperties) {\n    extraProps = rowRenderer.rowProperties() || {};\n  }\n\n  const pinned = rowRenderer.pinned || null;\n  const baseProps = { class: baseClasses('tr', null) };\n  const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;\n  const tpl = rowRenderer?.template;\n\n  if (tpl) {\n    let toRender = tpl(h as TableTypes.HFunc<VNode>, {\n      renderedRow: <tr {...props}>{children}</tr>,\n    });\n\n    if (Array.isArray(toRender)) {\n      toRender = utils.map(toRender, (node) => {\n        if (node.vtag === 'tr') {\n          node.vattrs = mergeProperties(\n            { class: baseClasses('tr', null, true) },\n            node.vattrs\n          );\n\n          if (!!node.vchildren) {\n            node.vchildren = utils.map(node.vchildren, (cNode) => {\n              if (['td', 'th'].includes(cNode.vtag.toString())) {\n                cNode.vattrs = mergeProperties(\n                  {\n                    class: baseClasses(\n                      cNode.vtag.toString() as ValidRenderTypes,\n                      pinned,\n                      true\n                    ),\n                    ref: (th) => {\n                      addVObserver(th, pinned, onColumnPinned);\n                    },\n                  },\n                  cNode.vattrs\n                );\n              }\n              return cNode;\n            });\n          }\n        }\n        return node;\n      });\n    }\n    return toRender;\n  }\n\n  return <tr {...props}>{children}</tr>;\n};\n\ntype TableColHeadProps = {\n  column: TableTypes.ColumnConfig;\n  headRenderer: TableTypes.HeadFootRenderer;\n  onColumnOrderClick?: (\n    order: TableTypes.Order,\n    column: TableTypes.Prop,\n    el: HTMLElement\n  ) => void;\n  onColumnPinned?: PinnedCb;\n};\n\nexport const TableColHead: FunctionalComponent<TableColHeadProps> = ({\n  column,\n  headRenderer,\n  onColumnOrderClick,\n  onColumnPinned,\n}) => {\n  function handleColumnOrderClick(e: MouseEvent & { target: HTMLElement }) {\n    let order;\n    switch (column.order) {\n      case 'asc':\n        order = 'desc';\n        break;\n      case 'desc':\n        order = null;\n        break;\n      default:\n        order = 'asc';\n    }\n    onColumnOrderClick(order, column.prop, e.target.parentElement);\n  }\n\n  let extraProps = {};\n  if (column.columnProperties) {\n    extraProps = column.columnProperties(column) || extraProps;\n  }\n\n  const baseProps = {\n    class: {\n      ...baseClasses('th', headRenderer?.pinned),\n      [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start',\n      [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end',\n      [`${CSSNAMESPACE}__ordered`]: !!column.order,\n      [`${CSSNAMESPACE}__filtered`]: !!column.filter,\n    },\n  };\n  let props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;\n  const content = colheadRender(column);\n\n  if (!content) return <Fragment></Fragment>;\n\n  props =\n    Number((props as TableTypes.EleProps).colspan) > 1\n      ? { ...props, scope: 'colgroup' }\n      : { ...props, scope: 'col' };\n\n  if (column.sortable !== false) {\n    return (\n      <th\n        {...props}\n        aria-sort={\n          column.order\n            ? column.order === 'asc'\n              ? 'ascending'\n              : 'descending'\n            : 'none'\n        }\n        ref={(th) => {\n          if (['end', 'start'].includes(column.pinned))\n            addHObserver(th, column.pinned, onColumnPinned);\n          if (['top', 'bottom'].includes(headRenderer.pinned))\n            addVObserver(th, headRenderer.pinned, onColumnPinned);\n        }}\n      >\n        <button\n          class={`${CSSNAMESPACE}__order-btn`}\n          onClick={handleColumnOrderClick}\n        >\n          {colheadRender(column)}\n          {!!column.filter && <nano-icon name=\"light/filter\" />}\n          {!!column.order &&\n            (column.order === 'desc' ? (\n              <nano-icon name=\"solid/long-arrow-down\" />\n            ) : (\n              <nano-icon name=\"solid/long-arrow-up\" />\n            ))}\n          <div class={`${CSSNAMESPACE}__status-icons`}>\n            <nano-icon name=\"light/chevron-down\" />\n          </div>\n        </button>\n      </th>\n    );\n  }\n\n  return (\n    <th\n      {...props}\n      ref={(th) => {\n        if (['end', 'start'].includes(column.pinned))\n          addHObserver(th, column.pinned, onColumnPinned);\n        if (['top', 'bottom'].includes(headRenderer.pinned))\n          addVObserver(th, headRenderer.pinned, onColumnPinned);\n      }}\n    >\n      {colheadRender(column)}\n      {!!column.filter && <nano-icon name=\"light/bars-filter\" />}\n    </th>\n  );\n};\n\ntype TableCellProps = {\n  rowIndex: number;\n  colIndex: number;\n};\n\nexport const TableCell: FunctionalComponent<TableCellProps> = ({\n  rowIndex,\n  colIndex,\n}) => {\n  const content = cellRender(rowIndex, colIndex);\n  if (!content) return <Fragment></Fragment>;\n\n  const store = fetchStores();\n  const column = store.config.state.columns[colIndex];\n  let CellType = 'td';\n  let props = mergeCellProperties(rowIndex, colIndex, {\n    class: {\n      [`${CSSNAMESPACE}__td`]: true,\n      [`${CSSNAMESPACE}__ordered`]: !!column.order,\n      [`${CSSNAMESPACE}__pin`]: !!column.pinned,\n      [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start',\n      [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end',\n    },\n  });\n\n  if (column.rowHeader) {\n    props =\n      Number((props as TableTypes.EleProps).rowspan) > 1\n        ? { ...props, scope: 'rowgroup' }\n        : { ...props, scope: 'row' };\n    CellType = 'th';\n  }\n\n  return (\n    <CellType\n      // role=\"gridcell\"\n      {...props}\n    >\n      {cellRender(rowIndex, colIndex)}\n    </CellType>\n  );\n};\n"]}
+{"version":3,"file":"table.children.js","sourceRoot":"","sources":["../../../src/components/table/table.children.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Fragment, FunctionalComponent, h, VNode } from '@stencil/core';\nimport { CSSNAMESPACE } from './table.constants';\nimport {\n  cellRender,\n  colheadFootRender,\n  fetchStores,\n  mergeCellProperties,\n  mergeProperties,\n  rowDataModel,\n} from './table.service';\nimport type { TableTypes } from '../../interface';\n\ntype ValidRenderTypes = 'tr' | 'th' | 'td';\n\ntype PinnedCb = (positions: { [key in TableTypes.Position]?: boolean }) => void;\n\nfunction baseClasses(\n  type: ValidRenderTypes,\n  vPinned?: TableTypes.Position,\n  toString?: false\n): { [key: string]: boolean };\nfunction baseClasses(\n  type: ValidRenderTypes,\n  vPinned?: TableTypes.Position,\n  toString?: true\n): string;\nfunction baseClasses(\n  type: ValidRenderTypes,\n  vPinned?: TableTypes.Position,\n  toString = false\n): { [key: string]: boolean } | string {\n  const classes = {\n    [`${CSSNAMESPACE}__${type}`]: true,\n    [`${CSSNAMESPACE}__pin`]: !!vPinned,\n    [`${CSSNAMESPACE}__pin--top`]: vPinned === 'top',\n    [`${CSSNAMESPACE}__pin--bottom`]: vPinned === 'bottom',\n  };\n\n  if (toString) {\n    let classString = '';\n    Object.entries(classes).forEach(([className, on]) => {\n      if (on) classString += className + ' ';\n    });\n    return classString;\n  }\n  return classes;\n}\n\nconst stickyHIOs: WeakMap<HTMLTableCellElement, IntersectionObserver> =\n  new WeakMap();\nconst stickyVIOs: WeakMap<HTMLTableCellElement, IntersectionObserver> =\n  new WeakMap();\n\nfunction addHObserver(\n  el: HTMLTableCellElement,\n  pos: TableTypes.Position,\n  cb: PinnedCb\n) {\n  if (stickyHIOs.get(el)) return;\n\n  const store = fetchStores();\n  const root = store.general.state.scrollParent;\n  const host = store.general.state.host;\n\n  const observer = new IntersectionObserver(\n    ([e]) => {\n      const positions: { [key in TableTypes.Position]?: boolean } = {};\n      if (pos === 'start') {\n        positions.start =\n          e.boundingClientRect.x -\n            (host.getBoundingClientRect().x + root.scrollLeft) <\n            0 && !e.isIntersecting;\n      }\n      if (pos === 'end') {\n        // TODO - sort these out for RtL\n        positions.end =\n          e.boundingClientRect.right > e.boundingClientRect.width &&\n          !e.isIntersecting;\n      }\n      cb(positions);\n    },\n    {\n      threshold: [1],\n      rootMargin: '1px 0px 1px 0px',\n      root: root === document.scrollingElement ? null : root,\n    }\n  );\n  stickyHIOs.set(el, observer);\n  requestAnimationFrame(() => observer.observe(el));\n}\n\nfunction addVObserver(\n  el: HTMLTableCellElement,\n  pos: TableTypes.Position,\n  cb: PinnedCb\n) {\n  if (stickyVIOs.get(el)) return;\n\n  const store = fetchStores();\n  const root = store.general.state.scrollParent;\n  const host = store.general.state.host;\n\n  const observer = new IntersectionObserver(\n    ([e]) => {\n      const positions: { [key in TableTypes.Position]?: boolean } = {};\n      if (pos === 'top') {\n        positions.top =\n          e.boundingClientRect.y -\n            (host.getBoundingClientRect().y + root.scrollTop) <\n            0 && !e.isIntersecting;\n      }\n      if (pos === 'bottom')\n        positions.bottom =\n          e.boundingClientRect.height > e.intersectionRect.height &&\n          !e.isIntersecting;\n      cb(positions);\n    },\n    {\n      threshold: [0.99],\n      rootMargin: '0px 100px 0px 100px',\n      root: root === document.scrollingElement ? null : root,\n    }\n  );\n  stickyVIOs.set(el, observer);\n  requestAnimationFrame(() => observer.observe(el));\n}\n\ntype TableRowProps = {\n  rowRenderer: TableTypes.RowRenderer;\n  rowIndex?: number;\n  row?: TableTypes.RowData;\n};\n\nexport const TableRow: FunctionalComponent<TableRowProps> = (\n  { rowRenderer, rowIndex, row },\n  children\n) => {\n  let extraProps = {};\n\n  if (!row) {\n    const model = rowDataModel(rowIndex);\n    row = model.row;\n  }\n\n  if (rowRenderer?.rowProperties) {\n    extraProps =\n      rowRenderer.rowProperties({ row: row, rowIndex }) || extraProps;\n  }\n\n  let pinned: TableTypes.Position;\n  if (rowRenderer?.pinned && typeof rowRenderer.pinned === 'function') {\n    pinned = rowRenderer.pinned();\n  }\n\n  const baseProps = { class: baseClasses('tr', pinned) };\n  const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;\n\n  return (\n    <tr {...props} key={row.__uuid}>\n      {children}\n    </tr>\n  );\n};\n\ntype TableHeadFootProps = {\n  rowRenderer: TableTypes.HeadFootRenderer;\n  onColumnPinned?: PinnedCb;\n};\n\nexport const TableHeadFootRow: FunctionalComponent<TableHeadFootProps> = (\n  { rowRenderer, onColumnPinned },\n  children,\n  utils\n) => {\n  let extraProps = {};\n  if (rowRenderer.rowProperties) {\n    extraProps = rowRenderer.rowProperties() || {};\n  }\n\n  const pinned = rowRenderer.pinned || null;\n  const baseProps = { class: baseClasses('tr', null) };\n  const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;\n  const tpl = rowRenderer?.template;\n\n  if (tpl) {\n    let toRender = tpl(h as TableTypes.HFunc<VNode>, {\n      renderedRow: <tr {...props}>{children}</tr>,\n    });\n\n    if (Array.isArray(toRender)) {\n      toRender = utils.map(toRender, (node) => {\n        if (node.vtag === 'tr') {\n          node.vattrs = mergeProperties(\n            { class: baseClasses('tr', null, true) },\n            node.vattrs\n          );\n\n          if (!!node.vchildren) {\n            node.vchildren = utils.map(node.vchildren, (cNode) => {\n              if (['td', 'th'].includes(cNode.vtag.toString())) {\n                cNode.vattrs = mergeProperties(\n                  {\n                    class: baseClasses(\n                      cNode.vtag.toString() as ValidRenderTypes,\n                      pinned,\n                      true\n                    ),\n                    ref: (th) => {\n                      addVObserver(th, pinned, onColumnPinned);\n                    },\n                  },\n                  cNode.vattrs\n                );\n              }\n              return cNode;\n            });\n          }\n        }\n        return node;\n      });\n    }\n    return toRender;\n  }\n\n  return <tr {...props}>{children}</tr>;\n};\n\ntype TableColHeadProps = {\n  column: TableTypes.ColumnConfig;\n  headRenderer: TableTypes.HeadFootRenderer;\n  onColumnOrderClick?: (\n    order: TableTypes.Order,\n    column: TableTypes.Prop,\n    el: HTMLElement\n  ) => void;\n  onColumnPinned?: PinnedCb;\n};\n\nexport const TableColHead: FunctionalComponent<TableColHeadProps> = ({\n  column,\n  headRenderer,\n  onColumnOrderClick,\n  onColumnPinned,\n}) => {\n  function handleColumnOrderClick(e: MouseEvent & { target: HTMLElement }) {\n    let order;\n    switch (column.order) {\n      case 'asc':\n        order = 'desc';\n        break;\n      case 'desc':\n        order = null;\n        break;\n      default:\n        order = 'asc';\n    }\n    onColumnOrderClick(order, column.prop, e.target.closest('th'));\n  }\n\n  let extraProps = {};\n  if (column.columnProperties) {\n    extraProps = column.columnProperties(column) || extraProps;\n  }\n\n  const baseProps = {\n    class: {\n      ...baseClasses('th', headRenderer?.pinned),\n      [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start',\n      [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end',\n      [`${CSSNAMESPACE}__ordered`]: !!column.order,\n      [`${CSSNAMESPACE}__filtered`]: !!column.filter,\n    },\n  };\n  let props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;\n  const content = colheadFootRender(column);\n\n  if (!content) return <Fragment></Fragment>;\n\n  props =\n    Number((props as TableTypes.EleProps).colspan) > 1\n      ? { ...props, scope: 'colgroup' }\n      : { ...props, scope: 'col' };\n\n  if (column.sortable !== false) {\n    return (\n      <th\n        {...props}\n        aria-sort={\n          column.order\n            ? column.order === 'asc'\n              ? 'ascending'\n              : 'descending'\n            : 'none'\n        }\n        ref={(th) => {\n          if (['end', 'start'].includes(column.pinned))\n            addHObserver(th, column.pinned, onColumnPinned);\n          if (['top', 'bottom'].includes(headRenderer.pinned))\n            addVObserver(th, headRenderer.pinned, onColumnPinned);\n        }}\n      >\n        <button\n          class={{\n            [`${CSSNAMESPACE}__order-btn`]: true,\n            [`${CSSNAMESPACE}__cell-content`]: true,\n          }}\n          onClick={handleColumnOrderClick}\n        >\n          {colheadFootRender(column)}\n          {!!column.filter && <nano-icon name=\"light/filter\" />}\n          {!!column.order &&\n            (column.order === 'desc' ? (\n              <nano-icon name=\"solid/long-arrow-down\" />\n            ) : (\n              <nano-icon name=\"solid/long-arrow-up\" />\n            ))}\n          <div class={`${CSSNAMESPACE}__status-icons`}>\n            <nano-icon name=\"light/chevron-down\" />\n          </div>\n        </button>\n      </th>\n    );\n  }\n\n  return (\n    <th\n      {...props}\n      ref={(th) => {\n        if (['end', 'start'].includes(column.pinned))\n          addHObserver(th, column.pinned, onColumnPinned);\n        if (['top', 'bottom'].includes(headRenderer.pinned))\n          addVObserver(th, headRenderer.pinned, onColumnPinned);\n      }}\n    >\n      <div class={`${CSSNAMESPACE}__cell-content`}>\n        {colheadFootRender(column)}\n        {!!column.filter && <nano-icon name=\"light/bars-filter\" />}\n      </div>\n    </th>\n  );\n};\n\ntype TableCellProps = {\n  rowIndex: number;\n  colIndex: number;\n  nestedContent?: VNode;\n};\n\nexport const TableCell: FunctionalComponent<TableCellProps> = ({\n  rowIndex,\n  colIndex,\n  nestedContent,\n}) => {\n  const content = nestedContent || cellRender(rowIndex, colIndex);\n  if (!content) return <Fragment></Fragment>;\n\n  const store = fetchStores();\n  const column = store.config.state.columns[colIndex];\n  let CellType = 'td';\n  let props = mergeCellProperties(rowIndex, colIndex, {\n    class: {\n      [`${CSSNAMESPACE}__td`]: true,\n      [`${CSSNAMESPACE}__ordered`]: !!column.order,\n      [`${CSSNAMESPACE}__pin`]: !!column.pinned,\n      [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start',\n      [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end',\n    },\n  });\n\n  if (column.rowHeader) {\n    props =\n      Number((props as TableTypes.EleProps).rowspan) > 1\n        ? { ...props, scope: 'rowgroup' }\n        : { ...props, scope: 'row' };\n    CellType = 'th';\n  }\n\n  return (\n    <CellType\n      // role=\"gridcell\"\n      {...props}\n    >\n      <div class={`${CSSNAMESPACE}__cell-content`}>{content}</div>\n    </CellType>\n  );\n};\n"]}