@nanoporetech-digital/components 3.4.0 → 3.5.0

package/dist/collection/components/demo/demo.js

@@ -0,0 +1,284 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { Fragment, h, Host, } from '@stencil/core';
+function capitalise(value) {
+  if (!value)
+    return '';
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+function mediumDate(date) {
+  if (!date)
+    return undefined;
+  return new Date(date).toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  });
+}
+function currency(amount = 0, currencyCode = 'USD') {
+  currencyCode = currencyCode?.toLocaleUpperCase() || 'USD';
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: currencyCode,
+  }).format(amount);
+}
+export class Demo {
+  constructor() {
+    this.order = {
+      checks: [
+        {
+          name: 'Compliance',
+          external_id: 'CO',
+          status: 'complete',
+          account_info: {
+            name: 'Jeongmin Song',
+            email: 'js2957@cornell.edu',
+            address_line_1: '930 Campus Road',
+            address_line_2: 'Veterinary Medical Center C4 109',
+            address_postcode: '14853',
+            address_city: 'Ithaca',
+            address_region: 'New York',
+            address_country: 'US',
+          },
+          individual_name_compliance_information: {
+            table: {
+              names: [],
+              addresses: [],
+              match: false,
+              false_positive: null,
+            },
+          },
+          organization_compliance_information: {
+            table: {
+              names: [],
+              addresses: [],
+              match: false,
+              false_positive: null,
+            },
+          },
+          checks: [
+            {
+              label: 'Compliance check',
+              external_id: 'compliance_check',
+              item_type: 'pass/fail/escalate',
+              answer: 'pass',
+            },
+          ],
+          further_information: [],
+          attachments: [],
+          notes: [],
+        },
+      ],
+      orderId: '00886434',
+      createdAt: '2022-12-09T15:57:50',
+      updatedAt: '2022-12-09T16:02:29',
+      status: 'Processing',
+      subStatus: null,
+      currency: 'USD',
+      customerPaymentMethod: 'CC-USD',
+      paymentPlatform: 'Shop',
+      dataAreaId: 'OXUS',
+      defaultShippingWarehouse: null,
+      deliveryContact: 'Jeongmin Song',
+      deliveryMode: null,
+      deliveryName: 'Cornell University',
+      deliveryTerms: null,
+      invoiceAccountNumber: 'C038330',
+      orderAccountNumber: 'C038330',
+      orderAccountName: 'Cornell University',
+      originalLeadTime: null,
+      salesDate: '2022-12-09T15:57:50',
+      salesName: 'Cornell University',
+      salesOrigin: 'Shop',
+      salesOriginName: 'Main USD Store View',
+      customerReference: '',
+      purchaseOrder: null,
+      additionalDocuments: [],
+      total: 860,
+      shippingAmount: 50,
+      taxAmount: 0,
+      projectId: null,
+      deliveryPhoneNumber: '+16072533722',
+      invoicePhoneNumber: '+16072533722',
+      quoteNumber: null,
+      customerType: 'N/A',
+      invoiceAccountEmail: 'js2957@cornell.edu',
+      partnerReference: null,
+      sentToD365: false,
+      sentToD365Status: 'unsent',
+      orderAccountEmail: 'js2957@cornell.edu',
+      controllingAccountNumber: 'C038330',
+      controllingAccountEmail: 'js2957@cornell.edu',
+      deliveryAddress: {
+        street: ['930 Campus Road, Veterinary Medical Center C4 109'],
+        city: 'Ithaca',
+        postcode: '14853',
+        region: 'New York',
+        regionCode: 'NY',
+        countryCode: 'US',
+      },
+      invoiceAddress: {
+        street: ['930 Campus Road, Veterinary Medical Center C4 109'],
+        city: 'Ithaca',
+        postcode: '14853',
+        region: 'New York',
+        regionCode: 'NY',
+        countryCode: 'US',
+      },
+      shopOrderLines: [
+        {
+          name: 'Flongle Flow Cell (R9.4.1)',
+          sku: 'FLO-FLG001',
+          quantity: 1,
+          price: 810,
+          total: 810,
+          createdAt: '2022-12-09T15:57:50',
+          updatedAt: '2022-12-09T15:57:50',
+          maskSku: 'FLO-FLG001',
+          productType: 'bundle',
+          salesTag: 'FLGExpSP',
+          requestedShippingDate: null,
+          discount: 0,
+          discountPercentage: 0,
+          get finalSku() {
+            return this.maskSku || this.sku;
+          },
+          includedItems: [
+            {
+              name: 'Flongle Flow Cell (R9.4.1)',
+              sku: 'FLO-FLG001D',
+              quantity: 12,
+              price: 66,
+              total: 792,
+              createdAt: '2022-12-09T15:57:50',
+              updatedAt: '2022-12-09T15:57:50',
+              maskSku: 'FLO-FLG001',
+              productType: 'simple',
+              salesTag: 'FLGExpSP',
+              requestedShippingDate: '2022-12-27T00:00:00',
+              discount: 0,
+              discountPercentage: 0,
+            },
+            {
+              name: 'Flongle Flow Cell Priming Kit',
+              sku: 'EXP-FSE001',
+              quantity: 1,
+              price: 18,
+              total: 18,
+              createdAt: '2022-12-09T15:57:50',
+              updatedAt: '2022-12-09T15:57:50',
+              maskSku: '',
+              productType: 'simple',
+              salesTag: 'FLGExpSP',
+              requestedShippingDate: '2022-12-27T00:00:00',
+              discount: 0,
+              discountPercentage: 0,
+            },
+          ],
+        },
+        {
+          name: 'Carriage - Device shipment',
+          sku: 'FREIGHT',
+          quantity: 1,
+          price: 50,
+          total: 50,
+          createdAt: '2022-12-09T15:57:50',
+          updatedAt: '2022-12-09T15:57:50',
+          maskSku: '',
+          productType: 'virtual',
+          salesTag: null,
+          requestedShippingDate: '2022-12-27T00:00:00',
+          discount: 0,
+          discountPercentage: 0,
+          get finalSku() {
+            return this.maskSku || this.sku;
+          },
+        },
+      ],
+      orderLines: [],
+      pickedItems: [],
+      packedItems: [],
+      trackingNumbers: [],
+      trackingUpdates: [],
+      ecoOrder: false,
+      revenueOrder: false,
+    };
+  }
+  lineItemTotal(order) {
+    if (!order || !order.shopOrderLines?.length)
+      return;
+    let total = 0;
+    order.shopOrderLines.forEach((itm) => {
+      if (itm.status !== 'cancelled')
+        total += itm.total;
+    });
+    return total;
+  }
+  render() {
+    return (h(Host, null, h("nano-table", { rowRender: {
+        template: (_, c, TableCell) => [
+          c.renderedRow,
+          c.row.includedItems?.length ? (c.row.includedItems?.map((item) => {
+            return (h("tr", { class: "child-row" }, h(TableCell, { header: true }, item.name), h(TableCell, null, capitalise(c.row.status || this.order.status)), h(TableCell, null, capitalise(item.sku)), h(TableCell, null, capitalise(item.salesTag)), h(TableCell, null, mediumDate(item.requestedShippingDate))));
+          })) : (h(Fragment, null)),
+        ].flat(1),
+      }, columns: [
+        {
+          title: 'Name',
+          prop: 'name',
+          pinned: 'start',
+          rowHeader: true,
+        },
+        {
+          title: 'Status',
+          prop: 'status',
+          cellTemplate: (_, c) => capitalise(c.cellModel || this.order.status),
+        },
+        {
+          title: 'SKU',
+          prop: 'finalSku',
+        },
+        {
+          title: 'Sales tag',
+          prop: 'salesTag',
+          cellTemplate: (_, c) => c.cellModel || 'None',
+        },
+        {
+          title: 'Requested ship date',
+          prop: 'requestedShippingDate',
+          cellTemplate: (_, c) => mediumDate(c.cellModel) || 'N/A',
+        },
+        {
+          title: 'Quantity',
+          prop: 'quantity',
+        },
+        {
+          title: 'Unit price',
+          prop: 'price',
+          cellTemplate: (_, c) => currency(c.cellModel, this.order.currency),
+        },
+        {
+          title: 'Discount %',
+          prop: 'discountPercentage',
+          cellTemplate: (_, c) => c.cellModel || 0,
+        },
+        {
+          title: 'Line value',
+          prop: 'total',
+          cellTemplate: (_, c) => currency(c.cellModel, this.order.currency),
+        },
+      ], rows: this.order.shopOrderLines, caption: `List of order line items found within order ${this.order.orderId}`, showFooter: true, footRender: {
+        pinned: 'bottom',
+        template: () => [
+          h("tr", null, h("td", { colSpan: 6 }, "\u00A0"), h("th", { scope: "row", class: "tbl__pin nano-tbl__pin--end", colSpan: 3 }, h("div", { class: "nano-tbl__cell-content order-lines__total" }, h("span", { class: "order-lines__total--label" }, "Sub total:"), h("span", { class: "order-lines__total--num" }, currency(this.lineItemTotal(this.order), this.order.currency))))),
+          h("tr", null, h("td", { colSpan: 6 }, "\u00A0"), h("th", { scope: "row", class: "tbl__pin nano-tbl__pin--end", colSpan: 3 }, h("div", { class: "nano-tbl__cell-content order-lines__total" }, h("span", { class: "order-lines__total--label" }, "Total order tax:"), h("span", { class: "order-lines__total--num" }, currency(this.order.taxAmount, this.order.currency))))),
+          h("tr", null, h("td", { colSpan: 6 }, "\u00A0"), h("th", { scope: "row", class: "tbl__pin nano-tbl__pin--end", colSpan: 3 }, h("div", { class: "nano-tbl__cell-content order-lines__total" }, h("span", { class: "order-lines__total--label" }, "Total on order placement:"), h("span", { class: "order-lines__total--num" }, currency(this.order.total, this.order.currency))))),
+        ],
+      } })));
+  }
+  static get is() { return "nano-demo"; }
+  static get encapsulation() { return "shadow"; }
+  static get styles() { return ":host {display: block}\n    .child-row {\n      opacity: .8;\n      font-style: italic;\n    }"; }
+}
+//# sourceMappingURL=demo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"demo.js","sourceRoot":"","sources":["../../../src/components/demo/demo.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  ComponentInterface,\n  Fragment,\n  h,\n  Host,\n} from '@stencil/core';\n\nfunction capitalise(value: string) {\n  if (!value) return '';\n  return value.charAt(0).toUpperCase() + value.slice(1);\n}\n\nfunction mediumDate(date: Date) {\n  if (!date) return undefined;\n  return new Date(date).toLocaleDateString(undefined, {\n    year: 'numeric',\n    month: 'short',\n    day: 'numeric',\n  });\n}\n\nfunction currency(amount: number = 0, currencyCode: string = 'USD') {\n  currencyCode = currencyCode?.toLocaleUpperCase() || 'USD';\n  return new Intl.NumberFormat('en-US', {\n    style: 'currency',\n    currency: currencyCode,\n  }).format(amount);\n}\n\n@Component({\n  tag: 'nano-demo',\n  shadow: true,\n  styles: /* css */ `\n    :host {display: block}\n    .child-row {\n      opacity: .8;\n      font-style: italic;\n    }\n  `,\n})\nexport class Demo implements ComponentInterface {\n  private order = {\n    checks: [\n      {\n        name: 'Compliance',\n        external_id: 'CO',\n        status: 'complete',\n        account_info: {\n          name: 'Jeongmin Song',\n          email: 'js2957@cornell.edu',\n          address_line_1: '930 Campus Road',\n          address_line_2: 'Veterinary Medical Center C4 109',\n          address_postcode: '14853',\n          address_city: 'Ithaca',\n          address_region: 'New York',\n          address_country: 'US',\n        },\n        individual_name_compliance_information: {\n          table: {\n            names: [],\n            addresses: [],\n            match: false,\n            false_positive: null,\n          },\n        },\n        organization_compliance_information: {\n          table: {\n            names: [],\n            addresses: [],\n            match: false,\n            false_positive: null,\n          },\n        },\n        checks: [\n          {\n            label: 'Compliance check',\n            external_id: 'compliance_check',\n            item_type: 'pass/fail/escalate',\n            answer: 'pass',\n          },\n        ],\n        further_information: [],\n        attachments: [],\n        notes: [],\n      },\n    ],\n    orderId: '00886434',\n    createdAt: '2022-12-09T15:57:50',\n    updatedAt: '2022-12-09T16:02:29',\n    status: 'Processing',\n    subStatus: null,\n    currency: 'USD',\n    customerPaymentMethod: 'CC-USD',\n    paymentPlatform: 'Shop',\n    dataAreaId: 'OXUS',\n    defaultShippingWarehouse: null,\n    deliveryContact: 'Jeongmin Song',\n    deliveryMode: null,\n    deliveryName: 'Cornell University',\n    deliveryTerms: null,\n    invoiceAccountNumber: 'C038330',\n    orderAccountNumber: 'C038330',\n    orderAccountName: 'Cornell University',\n    originalLeadTime: null,\n    salesDate: '2022-12-09T15:57:50',\n    salesName: 'Cornell University',\n    salesOrigin: 'Shop',\n    salesOriginName: 'Main USD Store View',\n    customerReference: '',\n    purchaseOrder: null,\n    additionalDocuments: [],\n    total: 860,\n    shippingAmount: 50,\n    taxAmount: 0,\n    projectId: null,\n    deliveryPhoneNumber: '+16072533722',\n    invoicePhoneNumber: '+16072533722',\n    quoteNumber: null,\n    customerType: 'N/A',\n    invoiceAccountEmail: 'js2957@cornell.edu',\n    partnerReference: null,\n    sentToD365: false,\n    sentToD365Status: 'unsent',\n    orderAccountEmail: 'js2957@cornell.edu',\n    controllingAccountNumber: 'C038330',\n    controllingAccountEmail: 'js2957@cornell.edu',\n    deliveryAddress: {\n      street: ['930 Campus Road, Veterinary Medical Center C4 109'],\n      city: 'Ithaca',\n      postcode: '14853',\n      region: 'New York',\n      regionCode: 'NY',\n      countryCode: 'US',\n    },\n    invoiceAddress: {\n      street: ['930 Campus Road, Veterinary Medical Center C4 109'],\n      city: 'Ithaca',\n      postcode: '14853',\n      region: 'New York',\n      regionCode: 'NY',\n      countryCode: 'US',\n    },\n    shopOrderLines: [\n      {\n        name: 'Flongle Flow Cell (R9.4.1)',\n        sku: 'FLO-FLG001',\n        quantity: 1,\n        price: 810,\n        total: 810,\n        createdAt: '2022-12-09T15:57:50',\n        updatedAt: '2022-12-09T15:57:50',\n        maskSku: 'FLO-FLG001',\n        productType: 'bundle',\n        salesTag: 'FLGExpSP',\n        requestedShippingDate: null,\n        discount: 0,\n        discountPercentage: 0,\n        get finalSku() {\n          return this.maskSku || this.sku;\n        },\n        includedItems: [\n          {\n            name: 'Flongle Flow Cell (R9.4.1)',\n            sku: 'FLO-FLG001D',\n            quantity: 12,\n            price: 66,\n            total: 792,\n            createdAt: '2022-12-09T15:57:50',\n            updatedAt: '2022-12-09T15:57:50',\n            maskSku: 'FLO-FLG001',\n            productType: 'simple',\n            salesTag: 'FLGExpSP',\n            requestedShippingDate: '2022-12-27T00:00:00',\n            discount: 0,\n            discountPercentage: 0,\n          },\n          {\n            name: 'Flongle Flow Cell Priming Kit',\n            sku: 'EXP-FSE001',\n            quantity: 1,\n            price: 18,\n            total: 18,\n            createdAt: '2022-12-09T15:57:50',\n            updatedAt: '2022-12-09T15:57:50',\n            maskSku: '',\n            productType: 'simple',\n            salesTag: 'FLGExpSP',\n            requestedShippingDate: '2022-12-27T00:00:00',\n            discount: 0,\n            discountPercentage: 0,\n          },\n        ],\n      },\n      {\n        name: 'Carriage - Device shipment',\n        sku: 'FREIGHT',\n        quantity: 1,\n        price: 50,\n        total: 50,\n        createdAt: '2022-12-09T15:57:50',\n        updatedAt: '2022-12-09T15:57:50',\n        maskSku: '',\n        productType: 'virtual',\n        salesTag: null,\n        requestedShippingDate: '2022-12-27T00:00:00',\n        discount: 0,\n        discountPercentage: 0,\n        get finalSku() {\n          return this.maskSku || this.sku;\n        },\n      },\n    ],\n    orderLines: [],\n    pickedItems: [],\n    packedItems: [],\n    trackingNumbers: [],\n    trackingUpdates: [],\n    ecoOrder: false,\n    revenueOrder: false,\n  };\n\n  private lineItemTotal(order) {\n    if (!order || !order.shopOrderLines?.length) return;\n    let total = 0;\n    order.shopOrderLines.forEach((itm) => {\n      if (itm.status !== 'cancelled') total += itm.total;\n    });\n    return total;\n  }\n\n  render() {\n    return (\n      <Host>\n        <nano-table\n          rowRender={{\n            template: (_, c, TableCell) =>\n              [\n                c.renderedRow,\n                c.row.includedItems?.length ? (\n                  c.row.includedItems?.map((item) => {\n                    return (\n                      <tr class=\"child-row\">\n                        <TableCell header={true}>{item.name}</TableCell>\n                        <TableCell>\n                          {capitalise(c.row.status || this.order.status)}\n                        </TableCell>\n                        <TableCell>{capitalise(item.sku)}</TableCell>\n                        <TableCell>{capitalise(item.salesTag)}</TableCell>\n                        <TableCell>\n                          {mediumDate(item.requestedShippingDate)}\n                        </TableCell>\n                      </tr>\n                    );\n                  })\n                ) : (\n                  <Fragment />\n                ),\n              ].flat(1),\n          }}\n          columns={[\n            {\n              title: 'Name',\n              prop: 'name',\n              pinned: 'start',\n              rowHeader: true,\n            },\n            {\n              title: 'Status',\n              prop: 'status',\n              cellTemplate: (_, c) =>\n                capitalise(c.cellModel || this.order.status),\n            },\n            {\n              title: 'SKU',\n              prop: 'finalSku',\n            },\n            {\n              title: 'Sales tag',\n              prop: 'salesTag',\n              cellTemplate: (_, c) => c.cellModel || 'None',\n            },\n            {\n              title: 'Requested ship date',\n              prop: 'requestedShippingDate',\n              cellTemplate: (_, c) => mediumDate(c.cellModel) || 'N/A',\n            },\n            {\n              title: 'Quantity',\n              prop: 'quantity',\n            },\n            {\n              title: 'Unit price',\n              prop: 'price',\n              cellTemplate: (_, c) =>\n                currency(c.cellModel, this.order.currency),\n            },\n            {\n              title: 'Discount %',\n              prop: 'discountPercentage',\n              cellTemplate: (_, c) => c.cellModel || 0,\n            },\n            {\n              title: 'Line value',\n              prop: 'total',\n              cellTemplate: (_, c) =>\n                currency(c.cellModel, this.order.currency),\n            },\n          ]}\n          rows={this.order.shopOrderLines}\n          caption={`List of order line items found within order ${this.order.orderId}`}\n          showFooter={true}\n          footRender={{\n            pinned: 'bottom',\n            template: () => [\n              <tr>\n                <td colSpan={6}>&nbsp;</td>\n                <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n                  <div class=\"nano-tbl__cell-content order-lines__total\">\n                    <span class=\"order-lines__total--label\">Sub total:</span>\n                    <span class=\"order-lines__total--num\">\n                      {currency(\n                        this.lineItemTotal(this.order),\n                        this.order.currency\n                      )}\n                    </span>\n                  </div>\n                </th>\n              </tr>,\n              <tr>\n                <td colSpan={6}>&nbsp;</td>\n                <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n                  <div class=\"nano-tbl__cell-content order-lines__total\">\n                    <span class=\"order-lines__total--label\">\n                      Total order tax:\n                    </span>\n                    <span class=\"order-lines__total--num\">\n                      {currency(this.order.taxAmount, this.order.currency)}\n                    </span>\n                  </div>\n                </th>\n              </tr>,\n              <tr>\n                <td colSpan={6}>&nbsp;</td>\n                <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n                  <div class=\"nano-tbl__cell-content order-lines__total\">\n                    <span class=\"order-lines__total--label\">\n                      Total on order placement:\n                    </span>\n                    <span class=\"order-lines__total--num\">\n                      {currency(this.order.total, this.order.currency)}\n                    </span>\n                  </div>\n                </th>\n              </tr>,\n            ],\n          }}\n        />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/dialog/dialog.helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.helpers.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.helpers.ts"],"names":[],"mappings":"AAMA;;;;;;GAMG;AACH,MAAM,UAAU,gBAAgB,CAC9B,IAAY,EACZ,UAAqE,EAAE,EACvE,aAAuC;EAEvC,MAAM,IAAI,GAA4B;IACpC,aAAa,EAAE,KAAK;IACpB,KAAK,EAAE,QAAQ;IACf,GAAG,aAAa;GACjB,CAAC;EACF,MAAM,MAAM,GAA0B,MAAM,CAAC,MAAM,CACjD,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,EACrC;IACE,GAAG,IAAI;IACP,IAAI,EAAE,KAAK;IACX,SAAS,EAAE;QACT,IAAI;QAEJ,OAAO,CAAC,MAAM;MACZ,CAAC,CAAC,OAAO;SACJ,GAAG,CACF,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CACT,qBAAqB,CAAC,mBAAmB,GAAG,CAAC,OAAO,mBAAmB,GAAG,CAAC,OAAO,WAAW,CAChG;SACA,IAAI,CAAC,EAAE,CAAC;MACb,CAAC,CAAC,EACN,EAAE;GACH,CACF,CAAC;EAEF,IAAI,OAAO,CAAC,MAAM,EAAE;IAClB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC,CAAC,GAAG,CAC9D,CAAC,GAAgB,EAAE,EAAE;MACnB,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAC3B,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC,QAAQ,EAAE,CAC7C,CAAC;MACF,IAAI,QAAQ,IAAI,QAAQ,CAAC,OAAO,EAAE;QAChC,GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;OACjD;IACH,CAAC,CACF,CAAC;GACH;EAED,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;EAClC,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["interface ImperativeDialogOptions {\n  noUserDismiss: boolean;\n  noHeader?: boolean;\n  noFooter?: boolean;\n  label: string;\n}\n/**\n * `nano-dialog` helper to create dialog modals imperatively.\n * @param body - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param buttons - { classes: string; content: string; handler: () => {} }[]\n * @param dialogOptions - { noUserDismiss: boolean, noHeader?: boolean, noFooter?: boolean, label: string }\n * @returns `Promise<void>`\n */\nexport function nanoCreateDialog(\n  body: string,\n  buttons: { classes: string; content: string; handler: () => {} }[] = [],\n  dialogOptions?: ImperativeDialogOptions\n) {\n  const opts: ImperativeDialogOptions = {\n    noUserDismiss: false,\n    label: 'Dialog',\n    ...dialogOptions,\n  };\n  const dialog: HTMLNanoDialogElement = Object.assign(\n    document.createElement('nano-dialog'),\n    {\n      ...opts,\n      open: false,\n      innerHTML: `\n      ${body}\n      ${\n        buttons.length\n          ? buttons\n              .map(\n                (btn, i) =>\n                  `<button data-btn=\"${i}\" class=\"button ${btn.classes}\" slot=\"footer\">${btn.content}</button>`\n              )\n              .join('')\n          : ''\n      }`,\n    }\n  );\n\n  if (buttons.length) {\n    Array.from(dialog.querySelectorAll('button[slot=\"footer\"]')).map(\n      (btn: HTMLElement) => {\n        const foundBtn = buttons.find(\n          (_fb, i) => btn.dataset.btn === i.toString()\n        );\n        if (foundBtn && foundBtn.handler) {\n          btn.addEventListener('click', foundBtn.handler);\n        }\n      }\n    );\n  }\n\n  document.body.appendChild(dialog);\n  return dialog;\n}\n"]}
+{"version":3,"file":"dialog.helpers.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.helpers.ts"],"names":[],"mappings":"AAMA;;;;;;GAMG;AACH,MAAM,UAAU,gBAAgB,CAC9B,IAAY,EACZ,UAAuE,EAAE,EACzE,aAAuC;EAEvC,MAAM,IAAI,GAA4B;IACpC,aAAa,EAAE,KAAK;IACpB,KAAK,EAAE,QAAQ;IACf,GAAG,aAAa;GACjB,CAAC;EACF,MAAM,MAAM,GAA0B,MAAM,CAAC,MAAM,CACjD,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,EACrC;IACE,GAAG,IAAI;IACP,IAAI,EAAE,KAAK;IACX,SAAS,EAAE;QACT,IAAI;QAEJ,OAAO,CAAC,MAAM;MACZ,CAAC,CAAC,OAAO;SACJ,GAAG,CACF,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CACT,qBAAqB,CAAC,mBAAmB,GAAG,CAAC,OAAO,mBAAmB,GAAG,CAAC,OAAO,WAAW,CAChG;SACA,IAAI,CAAC,EAAE,CAAC;MACb,CAAC,CAAC,EACN,EAAE;GACH,CACF,CAAC;EAEF,IAAI,OAAO,CAAC,MAAM,EAAE;IAClB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC,CAAC,GAAG,CAC9D,CAAC,GAAgB,EAAE,EAAE;MACnB,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAC3B,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC,QAAQ,EAAE,CAC7C,CAAC;MACF,IAAI,QAAQ,IAAI,QAAQ,CAAC,OAAO,EAAE;QAChC,GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;OACjD;IACH,CAAC,CACF,CAAC;GACH;EAED,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;EAClC,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["interface ImperativeDialogOptions {\n  noUserDismiss: boolean;\n  noHeader?: boolean;\n  noFooter?: boolean;\n  label: string;\n}\n/**\n * `nano-dialog` helper to create dialog modals imperatively.\n * @param body - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param buttons - { classes: string; content: string; handler: () => {} }[]\n * @param dialogOptions - { noUserDismiss: boolean, noHeader?: boolean, noFooter?: boolean, label: string }\n * @returns `Promise<void>`\n */\nexport function nanoCreateDialog(\n  body: string,\n  buttons: { classes: string; content: string; handler: () => void }[] = [],\n  dialogOptions?: ImperativeDialogOptions\n) {\n  const opts: ImperativeDialogOptions = {\n    noUserDismiss: false,\n    label: 'Dialog',\n    ...dialogOptions,\n  };\n  const dialog: HTMLNanoDialogElement = Object.assign(\n    document.createElement('nano-dialog'),\n    {\n      ...opts,\n      open: false,\n      innerHTML: `\n      ${body}\n      ${\n        buttons.length\n          ? buttons\n              .map(\n                (btn, i) =>\n                  `<button data-btn=\"${i}\" class=\"button ${btn.classes}\" slot=\"footer\">${btn.content}</button>`\n              )\n              .join('')\n          : ''\n      }`,\n    }\n  );\n\n  if (buttons.length) {\n    Array.from(dialog.querySelectorAll('button[slot=\"footer\"]')).map(\n      (btn: HTMLElement) => {\n        const foundBtn = buttons.find(\n          (_fb, i) => btn.dataset.btn === i.toString()\n        );\n        if (foundBtn && foundBtn.handler) {\n          btn.addEventListener('click', foundBtn.handler);\n        }\n      }\n    );\n  }\n\n  document.body.appendChild(dialog);\n  return dialog;\n}\n"]}

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 { VNode } 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  /** Potential column ordering options */\n  type Order = 'asc' | 'desc' | undefined;\n\n  /** Column filtering */\n  interface Filter {\n    prop: TableTypes.Prop;\n    filter: 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 row or column */\n  interface EleProps {\n    style?: { [key: string]: string | undefined };\n    class?: { [key: string]: boolean } | string;\n    [attr: string]: string | number | object | boolean | undefined;\n  }\n\n  /** data model passed to cell rendering functions */\n  interface ColumnDataSchemaModel {\n    /** The column property being iterated over */\n    prop: ColumnProp;\n    /** The data for this cell */\n    cellModel: any;\n    /** The column config object */\n    column: ColumnConfig;\n    /** The row index currently being iterated over */\n    rowIndex: number;\n    /** The row model currently being iterated over  */\n    rowModel: any;\n  }\n\n  /** data model passed to row rendering functions */\n  interface RowDataSchemaModel {\n    /** the current data row model being iterated over */\n    row?: RowData;\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   * 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   * 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> = (\n    createElement: HFunc<T>,\n    props?: RowDataSchemaModel\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> = (\n    createElement: HFunc<T>,\n    props: ColumnDataSchemaModel\n  ) => T | string | undefined;\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> = (\n    createElement: HFunc<T>,\n    col: ColumnConfig\n  ) => T | string | undefined;\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 = (\n    props: ColumnDataSchemaModel\n  ) => EleProps | void | undefined;\n\n  /** A function which can be used to apply any html attribute/s onto a table head `th` */\n  type ColPropertiesFunc = (props: ColumnConfig) => EleProps | void | undefined;\n\n  /** A function which can be used to apply any html attribute/s onto a table row `tr` */\n  type RowPropertiesFunc = (\n    props: RowDataSchemaModel\n  ) => EleProps | void | undefined;\n\n  /** An individual table cell's data */\n  type RowData = {\n    [key: string | number]: any;\n    __uuid?: string | number;\n    __index?: number;\n  };\n\n  /** A data property */\n  type Prop = keyof TableTypes.RowData;\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 available\n     * filter operations. Will be derived automatically by default */\n    type?: 'text' | 'string' | 'number' | 'date';\n    /** Whether this column is horizontally pinned to viewport */\n    pinned?: Position;\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 ordered. 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;\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<VNode | VNode[]>;\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    colTemplate?: ColumnTemplateFunc<VNode | VNode[]>;\n    /** A function which can be used to apply any html attribute/s onto a table head `th` */\n    columnProperties?: ColPropertiesFunc;\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 {\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[]>;\n    /** A function which can be used to apply any html attribute/s onto a table row `tr` */\n    rowProperties?: RowPropertiesFunc;\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 {\n    /** Function to decide whether the row is vertically pinned. Defaults to `start` for the header and `end` 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\n     **/\n    template?: RowTemplateFunc<VNode | VNode[]>;\n    /** A function which can be used to apply any html attribute/s onto a table row `tr` */\n    rowProperties?: () => EleProps | void | undefined;\n  }\n\n  type TBody = {\n    rows: TableTypes.NanoTable['rows'];\n    __uuid: string | number;\n  };\n\n  class NanoTable<T = RowData> {\n    rows: T[];\n    columns: ColumnConfig<T>[];\n  }\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 = (positions: { [key in Position]?: boolean }) => 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;\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 ColumnDataSchemaModel {\n    /** The column property being iterated over */\n    prop: ColumnProp;\n    /** The data for this cell */\n    cellModel: any;\n    /** The column config object */\n    column: ColumnConfig;\n    /** The row index currently being iterated over */\n    rowIndex: number;\n    /** The row model currently being iterated over  */\n    rowModel: any;\n  }\n\n  /** data model passed to row rendering functions */\n  interface RowDataSchemaModel {\n    /** the current data row model being iterated over */\n    row?: RowData;\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   * 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> = (\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,\n    /** a helper template to minimise boilerplate.\n     * A shortcut for `<td><div class=\"nano-tbl__cell-content\"></div></td>` */\n    TableCell: FunctionalComponent<{ header?: boolean }>\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> = (\n    createElement: HFunc<T>,\n    props: ColumnDataSchemaModel\n  ) => T | string | undefined;\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> = (\n    createElement: HFunc<T>,\n    col: ColumnConfig\n  ) => T | string | undefined;\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 = (\n    props: ColumnDataSchemaModel\n  ) => 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 = (\n    props: ColumnConfig\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 = (\n    props: RowDataSchemaModel\n  ) => RowProps | void | undefined;\n\n  /** An individual table cell's data */\n  type RowData = {\n    [key: string | number]: any;\n    __uuid?: string | number;\n    __index?: number;\n  };\n\n  /** A data property */\n  type Prop = keyof TableTypes.RowData;\n\n  /** Valid column data types */\n  type ColumnType = 'text' | 'string' | 'number' | 'date' | 'unknown';\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    /** 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;\n    /** Whether this column can be dragged to change column order */\n    draggable?: boolean;\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<VNode | VNode[]>;\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    colTemplate?: ColumnTemplateFunc<VNode | VNode[]>;\n    /** A function which can be used to apply any html attribute/s onto a table head `th` */\n    columnProperties?: ColPropertiesFunc;\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 {\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[]>;\n    /** A function which can be used to apply any html attribute/s onto a table row `tr` */\n    rowProperties?: RowPropertiesFunc;\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 {\n    /** Function to decide whether the row is vertically pinned. Defaults to `start` for the header and `end` 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[]>;\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 = RowData> {\n    rows: T[];\n    columns: ColumnConfig<T>[];\n  }\n}\n"]}

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

@@ -0,0 +1,65 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { Fragment, h } from '@stencil/core';
+import { CSSNAMESPACE } from './table.constants';
+import { classListToStr, colDataModel, fetchStores, mergeCellProperties, } from './table.utils';
+// TABLE CELL
+// (tbody > tr > td, tbody > tr > th)
+/**
+ * Renders a cell using a custom renderer if set.
+ * @param rowIndex - the current row index being rendered
+ * @param colIndex - the current column index being rendered
+ * @returns - a JSX node
+ */
+export function cellRender(rowIndex, colIndex) {
+  const store = fetchStores();
+  const columns = store.config.state.columns;
+  const tpl = columns[colIndex]?.cellTemplate;
+  const model = colDataModel(rowIndex, colIndex);
+  if (!!model.cellModel && columns[colIndex].type === 'date') {
+    const d = new Date(model.cellModel);
+    if (d instanceof Date && !isNaN(d)) {
+      model.cellModel = !tpl
+        ? `${new Date(model.cellModel).toLocaleDateString()} ${new Date(model.cellModel).toLocaleTimeString()}`
+        : d;
+    }
+  }
+  return tpl ? (tpl(h, model)) : (h(Fragment, null, model.cellModel?.toString()));
+}
+export const baseCellClasses = (colIndex, toString = false) => {
+  const store = fetchStores();
+  const column = store.config.state.columns[colIndex];
+  const classes = {
+    [`${CSSNAMESPACE}__td`]: true,
+    [`${CSSNAMESPACE}__ordered`]: !!column.order,
+    [`${CSSNAMESPACE}__pin`]: !!column.pinned,
+    [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start',
+    [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end',
+  };
+  if (toString)
+    return classListToStr(classes);
+  return classes;
+};
+export const TableCell = ({ rowIndex, colIndex, nestedContent, }) => {
+  const content = nestedContent || cellRender(rowIndex, colIndex);
+  if (!content)
+    return h(Fragment, null);
+  let CellType = 'td';
+  const store = fetchStores();
+  const column = store.config.state.columns[colIndex];
+  let props = mergeCellProperties(rowIndex, colIndex, {
+    class: baseCellClasses(colIndex),
+  });
+  if (column.rowHeader) {
+    props =
+      Number(props.rowSpan) > 1
+        ? { ...props, scope: 'rowgroup' }
+        : { ...props, scope: 'row' };
+    CellType = 'th';
+  }
+  return (h(CellType
+  // role="gridcell"
+  , { ...props }, h("div", { class: `${CSSNAMESPACE}__cell-content` }, content)));
+};
+//# sourceMappingURL=table.cell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table.cell.js","sourceRoot":"","sources":["../../../src/components/table/table.cell.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Fragment, FunctionalComponent, h, VNode } from '@stencil/core';\nimport { CSSNAMESPACE } from './table.constants';\nimport {\n  classListToStr,\n  colDataModel,\n  fetchStores,\n  mergeCellProperties,\n} from './table.utils';\nimport type { TableTypes } from '../../interface';\n\n// TABLE CELL\n// (tbody > tr > td, tbody > tr > th)\n\n/**\n * Renders a cell using a custom renderer if set.\n * @param rowIndex - the current row index being rendered\n * @param colIndex - the current column index being rendered\n * @returns - a JSX node\n */\nexport function cellRender(rowIndex: number, colIndex: number): VNode {\n  const store = fetchStores();\n  const columns = store.config.state.columns;\n  const tpl = columns[colIndex]?.cellTemplate;\n  const model = colDataModel(rowIndex, colIndex);\n\n  if (!!model.cellModel && columns[colIndex].type === 'date') {\n    const d = new Date(model.cellModel);\n    if (d instanceof Date && !isNaN(d as any)) {\n      model.cellModel = !tpl\n        ? `${new Date(model.cellModel).toLocaleDateString()} ${new Date(\n            model.cellModel\n          ).toLocaleTimeString()}`\n        : d;\n    }\n  }\n\n  return tpl ? (\n    tpl(h as unknown as TableTypes.HFunc<VNode>, model)\n  ) : (\n    <Fragment>{model.cellModel?.toString()}</Fragment>\n  );\n}\n\nexport const baseCellClasses = (\n  colIndex: number,\n  toString: boolean = false\n) => {\n  const store = fetchStores();\n  const column = store.config.state.columns[colIndex];\n\n  const classes = {\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  if (toString) return classListToStr(classes);\n  return classes;\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  let CellType = 'td';\n  const store = fetchStores();\n  const column = store.config.state.columns[colIndex];\n  let props = mergeCellProperties(rowIndex, colIndex, {\n    class: baseCellClasses(colIndex),\n  });\n\n  if (column.rowHeader) {\n    props =\n      Number((props as TableTypes.CellProps).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"]}