@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.1

package/dist/collection/components/cta/cta.js

@@ -0,0 +1,175 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { h } from "@stencil/core";
+/**
+ * CTAs (Call To Actions) invite the user to take action.
+ * They are used to highlight important content and interactions and are often used in conjunction with other components like cards, modals, and forms.
+ *
+ * @status new
+ * @version 8.0.0
+ * @type CSS Only
+ */
+export class NanoCta {
+    host;
+    /** The semantic theme of the button. Defaults to primary / brand blue  */
+    theme;
+    /** Turn on the secondary style. Every theme also has a secondary style */
+    secondary;
+    /** The size of the button. Defaults to large */
+    size;
+    /** Show a loading spinner */
+    loading;
+    /**
+     * A predefined icon to show. Defaults to no icon.
+     * *note* Will be overruled if a `<nano-icon />` or `<svg />` is detected
+     */
+    icon;
+    /** Predefined styles when displaying a number of CTAs together */
+    group;
+    internalButton = false;
+    componentWillLoad() {
+        this.internalButton = !this.host.querySelector('button, a');
+    }
+    render() {
+        if (!this.internalButton)
+            return;
+        return (h("button", { type: "button", class: "nano-internal-cta" }, h("slot", null)));
+    }
+    static get is() { return "nano-cta"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cta.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cta.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "attribute": "theme",
+                "mutable": false,
+                "complexType": {
+                    "original": "Color",
+                    "resolved": "\"danger\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"",
+                    "references": {
+                        "Color": {
+                            "location": "import",
+                            "path": "../../types/shared",
+                            "id": "src/types/shared.ts::Color"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The semantic theme of the button. Defaults to primary / brand blue"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "secondary": {
+                "type": "boolean",
+                "attribute": "secondary",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Turn on the secondary style. Every theme also has a secondary style"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the button. Defaults to large"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "loading": {
+                "type": "string",
+                "attribute": "loading",
+                "mutable": false,
+                "complexType": {
+                    "original": "'true' | 'false'",
+                    "resolved": "\"false\" | \"true\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a loading spinner"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "icon": {
+                "type": "string",
+                "attribute": "icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "| 'false'\n    | 'forward'\n    | 'back'\n    | 'up'\n    | 'down'\n    | 'download'\n    | 'open'",
+                    "resolved": "\"back\" | \"down\" | \"download\" | \"false\" | \"forward\" | \"open\" | \"up\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A predefined icon to show. Defaults to no icon.\n*note* Will be overruled if a `<nano-icon />` or `<svg />` is detected"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "group": {
+                "type": "string",
+                "attribute": "group",
+                "mutable": false,
+                "complexType": {
+                    "original": "'balanced' | 'stacked'",
+                    "resolved": "\"balanced\" | \"stacked\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Predefined styles when displaying a number of CTAs together"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,114 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { Fragment, getRenderingRef, } from "@stencil/core";
+import { h } from "../../utils/renderer";
+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
+ */
+function cellRender(rowIndex, colIndex) {
+    const store = fetchStores();
+    const columns = store.config.state.columns;
+    const tpl = columns[colIndex]?.cellTemplate;
+    const model = colDataModel(rowIndex, colIndex);
+    const tableInstance = getRenderingRef();
+    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;
+        }
+    }
+    // Wrap the h pragma, then we can know if we're using Stencil's
+    // jsx renderer or a different one
+    let hCalled = false;
+    const hWrap = (...args) => {
+        hCalled = true;
+        // @ts-expect-error - h mismatch
+        return h(...args);
+    };
+    let tplResult = tpl ? tpl(hWrap, model) : undefined;
+    if (tplResult &&
+        tableInstance.customRenderer &&
+        tplResult['$attrs$'] === undefined &&
+        !(tplResult instanceof Element) &&
+        typeof tplResult !== 'string' &&
+        !hCalled) {
+        // template result is jsx *not* from Stencil.
+        // Render it now and output it later.
+        const templateEle = document.createElement('template');
+        const result = tableInstance.customRenderer(tplResult, templateEle.content);
+        // custom rendering can render to the templateEle OR return a promise<string>
+        tplResult = result && result['then'] ? result : templateEle;
+    }
+    return tplResult ? (tplResult) : model.cellModel !== undefined && model.cellModel !== null ? (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
+        ? nestedContent()
+        : cellRender(rowIndex, colIndex) || (h("span", { class: "placeholder" }, "\u00A0"));
+    let CellType = 'td';
+    const store = fetchStores();
+    const column = store.config.state.columns[colIndex];
+    if (column.hidden) {
+        return h(Fragment, null);
+    }
+    let props = mergeCellProperties(rowIndex, colIndex, {
+        class: baseCellClasses(colIndex),
+    });
+    if (column.rowHeader) {
+        props =
+            Number(props.rowSpan) > 1
+                ? { ...props, scope: 'rowgroup' }
+                : { ...props, scope: 'row' };
+        CellType = 'th';
+    }
+    const ContentWrap = (props) => {
+        const content = Content();
+        return (h("div", { ref: (d) => {
+                if (!d)
+                    return;
+                if (content instanceof Element) {
+                    // custom rendered an element
+                    d.replaceChildren();
+                    d.append(content['content'] || content);
+                }
+                else if (content['then']) {
+                    // custom rendered a promise. Most likely within SSR.
+                    content.then((res) => (d.innerHTML = res));
+                }
+            }, ...props, class: {
+                [`${CSSNAMESPACE}__cell-content`]: true,
+                [`${CSSNAMESPACE}__cell-content--wrap`]: !!column.wrap,
+            }, innerHTML: typeof content === 'string' && content.includes('<')
+                ? content
+                : undefined }, (typeof content !== 'string' || !content.includes('<')) &&
+            !content['then'] &&
+            !(content instanceof Element) &&
+            content));
+    };
+    return (h(CellType, { ...props }, column.autoTooltip && !column.wrap ? (h("nano-resize-observe", { notifyContentFit: "x", onNanoResizeContentFitChange: (e) => (e.target.firstElementChild.disabled =
+            e.detail.x) }, h("nano-tooltip", { disabled: true, placement: "top", onNanoShow: (e) => (e.target.closest(CellType).style.zIndex = '100'), onNanoHide: (e) => (e.target.closest(CellType).style.zIndex = '') }, h(ContentWrap, null), h("span", { slot: "content" }, h(Content, null))))) : (h(ContentWrap, null))));
+};

package/dist/collection/components/data-table/table.constants.js

@@ -0,0 +1,4 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+export const CSSNAMESPACE = 'nano-tbl';

package/dist/collection/components/data-table/table.css

@@ -0,0 +1,327 @@
+:host,
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+[hidden] {
+  display: none !important;
+}
+@media (prefers-reduced-motion: reduce) {
+    :host,
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }:host,
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+[hidden] {
+  display: none !important;
+}
+@media (prefers-reduced-motion: reduce) {
+    :host,
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }.nano-data-table {
+  /**
+   * @prop --table-padding. The padding of the table cells. Defaults to `var(--table-compact-padding)`
+   * @prop --table-border-color. The border color of the table cells. Defaults to `var(--nano-color-neutral-200)`
+   * @prop --table-border-color-header. The border color of the table header and footer cells. Defaults to `var(--nano-color-primary-1000)`
+   * @prop --table-background. The background color of the table cells. Defaults to `var(--nano-color-base-0)`
+   * @prop --table-max-col-width. The maximum width of the table columns. Defaults to `clamp(200px, 500px, 50vw)`
+   * @prop --table-ordered-bg. The background color of the ordered table rows. Defaults to `var(--nano-color-neutral-100)`
+   * @prop --table-wrapper-max-height: maximum height of the table when table is scrollable. Defaults to 80vh;
+   * @prop --table-wrapper-max-width: maximum width of the table when table is scrollable. Defaults to 100%;
+   */
+  --table-padding: var(--nano-spacing-sm) calc(var(--nano-spacing-md) - (var(--nano-spacing-md) / 3));
+  --table-border-color: var(--nano-color-neutral-200);
+  --table-border-color-header: var(--nano-color-primary-1000);
+  --table-background: var(--nano-color-base-0);
+  --table-max-col-width: clamp(200px, 500px, 50vw);
+  --table-ordered-bg: var(--nano-color-neutral-100);
+  --table-wrapper-max-height: 80vh;
+  --table-wrapper-max-width: 100%;
+  display: block;
+  inline-size: 100%;
+  color: var(--nano-color-neutral-1400);
+  container-type: inline-size;
+  --isLtR: 1;
+}
+.nano-data-table:dir(rtl) {
+  --isLtR: -1;
+}
+.nano-data-table .nano-sortable__dragged {
+  background: var(--nano-color-base-0);
+  opacity: 0.9;
+  box-shadow: var(--nano-shadow-l0);
+  z-index: 10 !important;
+}
+
+.nano-tbl__wrap {
+  display: table;
+  min-inline-size: 100%;
+}
+.nano-data-table:not([scrollable=false]) .nano-tbl__wrap {
+  max-inline-size: var(--table-wrapper-max-width);
+  max-block-size: var(--table-wrapper-max-height);
+  position: relative;
+  display: block;
+}
+.nano-data-table:not([scrollable=false]) .nano-tbl__wrap table {
+  margin-block-end: var(--nano-spacing-l);
+}
+
+.nano-data-table:not([scrollable=false]):has(.nano-tbl__pin--start, .nano-tbl__pin--end) .nano-masked-overflow {
+  --fade-size: 0;
+}
+
+.nano-tbl {
+  text-align: start;
+  inline-size: 100%;
+  border-spacing: 0 0;
+  border-collapse: separate;
+  border-inline-end: 1px solid transparent;
+  border-block-start: 1px solid transparent;
+  position: relative;
+  z-index: 1;
+}
+.nano-tbl__top-anchor {
+  clip-path: inset(50%);
+  block-size: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  inline-size: 1px;
+  position: relative;
+}
+.nano-tbl__ordered {
+  background-color: var(--table-ordered-bg);
+  --table-border-color: var(--nano-color-neutral-300);
+}
+.nano-tbl__order-btn {
+  padding: 0;
+  border: none;
+  outline: none;
+  font: inherit;
+  background: none;
+  appearance: none;
+  color: inherit;
+  display: flex;
+  gap: var(--nano-spacing-sm);
+  align-items: center;
+  inline-size: 100%;
+}
+.nano-tbl__order-btn:focus-visible {
+  outline: var(--nano-focus-ring);
+  outline-offset: var(--nano-focus-ring-offset);
+}
+.nano-tbl__status-icons {
+  margin-inline: auto 10px;
+  display: flex;
+  gap: 10px;
+}
+.nano-tbl__progress-bar {
+  font-size: 0.2rem;
+  position: sticky;
+  inset-block-start: 0;
+  inset-inline: 0;
+  z-index: 10;
+  transition: scale 0.25s;
+  transform: scale(0);
+  inline-size: 100%;
+  block-size: 0;
+}
+.nano-tbl__progress-bar--show {
+  transform: scale(1);
+  block-size: auto;
+}
+.nano-tbl__caption--hide {
+  clip-path: inset(50%);
+  block-size: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  inline-size: 1px;
+}
+.nano-tbl__td, .nano-tbl__th {
+  max-inline-size: var(--table-max-col-width);
+}
+thead .nano-tbl__td .nano-sortable__keyboard-handle, thead .nano-tbl__th .nano-sortable__keyboard-handle {
+  position: absolute;
+  inset-inline-end: 5px;
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+  background: white;
+  z-index: 10;
+}
+.nano-tbl__td.nano-tbl__ordered, .nano-tbl__th.nano-tbl__ordered {
+  background-color: var(--table-ordered-bg) !important;
+  --table-border-color: var(--nano-color-neutral-300);
+}
+.nano-tbl__cell-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.nano-tbl__cell-content--no-result {
+  padding-block: var(--nano-spacing-md);
+}
+.nano-tbl__cell-content--wrap {
+  white-space: normal;
+  overflow: visible;
+}
+.nano-tbl tbody {
+  opacity: 1;
+  transition: 0.1s ease opacity;
+}
+.nano-tbl tbody.nano-tbl__loading {
+  z-index: -1;
+  position: relative;
+}
+.nano-tbl tbody.nano-tbl__inactive {
+  opacity: 0;
+}
+.nano-tbl tbody .nano-tbl__tr:has(~ .nano-tbl__tr--placeholder) {
+  display: none;
+}
+.nano-tbl tbody .nano-tbl__tr--placeholder ~ .nano-tbl__tr {
+  display: none;
+}
+.nano-tbl th[scope=row] {
+  margin: 0;
+}
+.nano-tbl__tr {
+  --base-z: 0;
+}
+.nano-tbl__pin {
+  z-index: var(--z, var(--base-z, 0));
+}
+.nano-tbl__pin .nano-tbl__th, .nano-tbl__pin .nano-tbl__td {
+  z-index: var(--z, var(--base-z, 0));
+}
+.nano-tbl__pin--start {
+  position: sticky;
+  inset-inline-start: var(--pin-start, -1px);
+}
+.nano-tbl__pin--start::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  box-shadow: calc(4px * var(--isLtR)) 0 4px -3px rgb(var(--nano-color-base-rgb-1000)/25%);
+  opacity: var(--pin-start-active, 0);
+  z-index: -1;
+}
+.nano-tbl__pinned--start .nano-tbl__pin--start {
+  --z: calc(var(--base-z) + 3) !important;
+}
+.nano-tbl__pin--end {
+  position: sticky;
+  inset-inline-end: var(--pin-end, -1px);
+  max-inline-size: min(50vw, 200px);
+}
+@container (width <= 500px) {
+  .nano-tbl__pin--start ~ .nano-tbl__pin--end {
+    --z: 0 !important;
+    inset-inline-end: auto !important;
+  }
+  .nano-tbl__pin--start ~ .nano-tbl__pin--end::after {
+    display: none !important;
+  }
+}
+@media (width <= 500px) {
+  .nano-tbl__pin--start ~ .nano-tbl__pin--end {
+    --z: 0 !important;
+    inset-inline-end: auto !important;
+  }
+  .nano-tbl__pin--start ~ .nano-tbl__pin--end::after {
+    display: none !important;
+  }
+}
+.nano-tbl__pin--end::after {
+  display: block;
+  content: "";
+  position: absolute;
+  inset: 0;
+  box-shadow: calc(-4px * var(--isLtR)) 0 4px -3px rgb(var(--nano-color-base-rgb-1000)/25%);
+  opacity: var(--pin-end-active, 0);
+  z-index: -1;
+}
+.nano-tbl__pinned--end .nano-tbl__pin--end {
+  --z: calc(var(--base-z) + 2);
+}
+.nano-tbl__pin--top .nano-tbl__th, .nano-tbl__pin--top .nano-tbl__td {
+  position: sticky;
+  inset-block-start: var(--pin-top, -1px);
+}
+.nano-tbl__pin--top .nano-tbl__pin--end, .nano-tbl__pin--top .nano-tbl__pin--start {
+  --z: calc(var(--base-z) + 1);
+}
+.nano-tbl__pin--top.nano-tbl__pinned--top {
+  --base-z: 4;
+}
+tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__th, tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__td {
+  border-block-end: 1px solid var(--table-border-color-header);
+}
+.nano-tbl__pin--bottom .nano-tbl__th, .nano-tbl__pin--bottom .nano-tbl__td {
+  position: sticky;
+  inset-block-end: var(--pin-bottom, -1px);
+}
+.nano-tbl__pin--bottom .nano-tbl__pin--end, .nano-tbl__pin--bottom .nano-tbl__pin--start {
+  --z: calc(var(--base-z) + 1);
+}
+.nano-tbl__pin--bottom.nano-tbl__pinned--bottom {
+  --base-z: 5;
+}
+.nano-tbl__pin--bottom.nano-tbl__pinned--bottom:has(.nano-tbl__pin--bottom.nano-tbl__pinned--bottom) .nano-tbl__pin {
+  --base-z: 6;
+}
+tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__th, tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__td {
+  border-block-start: 1px solid var(--table-border-color-header);
+}
+.nano-tbl thead tr:last-of-type td,
+.nano-tbl thead tr:last-of-type th {
+  border-block-end: 2px solid var(--table-border-color-header);
+}
+.nano-tbl tfoot tr:first-of-type td,
+.nano-tbl tfoot tr:first-of-type th {
+  border-block-start: none;
+}
+.nano-tbl tfoot tr:last-of-type td,
+.nano-tbl tfoot tr:last-of-type th {
+  border-block-end: 2px solid var(--table-border-color-header);
+  border-block-start: 2px solid var(--table-border-color-header);
+}
+.nano-tbl .unlimited-width {
+  max-inline-size: none;
+}
+.nano-tbl__spinner {
+  font-size: 1.5rem;
+  transition: scale 0.25s;
+  scale: 0;
+  padding: 0.5rem;
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-start: calc(50% - 0.75rem);
+  z-index: 0;
+}
+.nano-tbl__spinner--show {
+  scale: 1;
+  position: sticky;
+}
+.nano-tbl .nano-skeleton {
+  line-height: var(--nano-line-height-normal);
+}

package/dist/collection/components/data-table/table.header.js

@@ -0,0 +1,65 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { Fragment } from "@stencil/core";
+import { h } from "../../utils/renderer";
+import { CSSNAMESPACE } from "./table.constants";
+import { colheadFootRender, headerPinClasses, mergeProperties, } from "./table.utils";
+export const TableColHead = ({ column, onColumnSortClick, defaults, }) => {
+    if (column.hidden) {
+        return h(Fragment, null);
+    }
+    // Sort handling
+    function handleColumnSortClick(e) {
+        let order;
+        switch (column.order) {
+            case 'asc':
+                order = 'desc';
+                break;
+            case 'desc':
+                order = null;
+                break;
+            default:
+                order = 'asc';
+        }
+        onColumnSortClick(order, column.prop, e.target.closest('th'));
+    }
+    function isSortable() {
+        return ((!!defaults.sortable && column.sortable !== false) ||
+            (!defaults.sortable && column.sortable === true));
+    }
+    let extraProps = {};
+    if (column.columnProperties) {
+        extraProps = column.columnProperties(column) || extraProps;
+    }
+    const baseProps = {
+        class: {
+            ...headerPinClasses('th', column.pinned),
+            [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start',
+            [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end',
+            [`${CSSNAMESPACE}__ordered`]: !!column.order,
+            [`${CSSNAMESPACE}__filtered`]: column.filter !== undefined && column.filter !== null,
+        },
+    };
+    let props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
+    const content = colheadFootRender(column);
+    if (!content)
+        return h(Fragment, null);
+    props =
+        Number(props.colSpan) > 1
+            ? { ...props, scope: 'colgroup' }
+            : { ...props, scope: 'col' };
+    if (isSortable()) {
+        const sort = column.order
+            ? column.order === 'asc'
+                ? 'ascending'
+                : 'descending'
+            : 'none';
+        props = { ...props, 'aria-sort': sort };
+    }
+    return (h("th", { ...props, key: column.prop }, isSortable() ? (h("button", { class: {
+            [`${CSSNAMESPACE}__order-btn`]: true,
+            [`${CSSNAMESPACE}__cell-content`]: true,
+        }, onClick: handleColumnSortClick }, colheadFootRender(column), column.filter !== undefined && column.filter !== null && (h("nano-icon", { name: "light/filter" })), !!column.order &&
+        (column.order === 'desc' ? (h("nano-icon", { name: "solid/arrow-down-long" })) : (h("nano-icon", { name: "solid/arrow-up-long" }))), h("div", { class: `${CSSNAMESPACE}__status-icons` }, h("nano-icon", { name: "light/chevron-down" })))) : (h("div", { class: `${CSSNAMESPACE}__cell-content` }, colheadFootRender(column), column.filter !== undefined && column.filter !== null && (h("nano-icon", { name: "light/bars-filter" }))))));
+};