@fluid-topics/ftds-table 2.1.0

package/README.md

@@ -0,0 +1,19 @@
+The design system table component
+
+## Install
+
+```shell
+npm install @fluid-topics/ftds-table
+yarn add @fluid-topics/ftds-table
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ftds-table"
+
+function render() {
+    return html` <ftds-table foo="bar"></ftds-table> `
+}
+```

package/build/define.d.ts

@@ -0,0 +1 @@
+export {};

package/build/define.js

@@ -0,0 +1,3 @@
+import { customElements } from "@fluid-topics/ft-wc-utils";
+import definitions from "./definitions";
+customElements(definitions);

package/build/definitions.d.ts

@@ -0,0 +1,5 @@
+import { FtdsTable } from "./ftds-table";
+declare const _default: {
+    "ftds-table": typeof FtdsTable;
+};
+export default _default;

package/build/definitions.js

@@ -0,0 +1,4 @@
+import { FtdsTable } from "./ftds-table";
+export default {
+    "ftds-table": FtdsTable,
+};

package/build/ftds-table.d.ts

@@ -0,0 +1,46 @@
+import { nothing, PropertyValues, TemplateResult } from "lit";
+import "@fluid-topics/ftds-button";
+import "@fluid-topics/ftds-typography";
+import { FtdsTypographyVariants } from "@fluid-topics/ftds-typography";
+import { ColumnConfiguration, EmptyStateConfiguration, FtdsTableProperties, Sort } from "./ftds-table.properties";
+import { FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtdsIcons } from "@fluid-topics/ftds-icon";
+export declare class FtdsTable<T extends Record<string, any>> extends FtLitElement implements FtdsTableProperties<T> {
+    static styles: import("lit").CSSResult;
+    data: Array<T>;
+    columns: Array<ColumnConfiguration<T>>;
+    sort?: Sort;
+    emptyState?: EmptyStateConfiguration;
+    stickyHeaders: boolean;
+    disableDataManipulation: boolean;
+    currentSort?: Sort;
+    ariaLabel: string | null;
+    clickableRows: boolean;
+    highlightedRowIndex: number;
+    private activeRowIndex;
+    private rows?;
+    static DEFAULT_RENDER: (v: any) => TemplateResult<1>;
+    static DEFAULT_COMPARATOR: (a: any, b: any) => number;
+    focusRow(rowIndex: number): void;
+    protected render(): TemplateResult<1>;
+    protected optWrapWithFtTypography(toRender: TemplateResult | string, variant: FtdsTypographyVariants): TemplateResult;
+    protected renderHeader(column: ColumnConfiguration<T>, index: number): TemplateResult<1>;
+    protected renderHeaderRow(): TemplateResult<1>;
+    protected renderRow(row: T, rowIndex: number): TemplateResult<1>;
+    protected renderSortButton(sortIcon: FtdsIcons, label: string, sort: () => void, index: number): TemplateResult<1>;
+    protected renderCell(column: ColumnConfiguration<T>, columnIndex: number, row: T, rowIndex: number): TemplateResult<1>;
+    protected renderColumnSort(column: ColumnConfiguration<T>, index: number): typeof nothing | TemplateResult<1>;
+    private renderEmptyStateTable;
+    protected getSortIcon(isSorted: boolean | undefined): FtdsIcons;
+    protected update(props: PropertyValues): void;
+    protected columnPart(prefix: string, index: number): string;
+    protected getValue(column: ColumnConfiguration<T>, row: T): any;
+    private sortData;
+    private getOppositeSortOrder;
+    private getSortOrderText;
+    private dispatchChangeEvent;
+    private handleRowKeyDown;
+    private dispatchRowClickEvent;
+    private handleRowMouseDown;
+    private handleRowMouseUp;
+}

package/build/ftds-table.js

@@ -0,0 +1,291 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing, } from "lit";
+import { repeat } from "lit/directives/repeat.js";
+import "@fluid-topics/ftds-button";
+import "@fluid-topics/ftds-typography";
+import { FtdsTypographyVariants } from "@fluid-topics/ftds-typography";
+import { FtdsTableChangeEvent, RowClickEvent, } from "./ftds-table.properties";
+import { property, queryAll, state, } from "lit/decorators.js";
+import { DesignSystemFamily } from "@fluid-topics/design-system-variables";
+import { designSystemStyles } from "./ftds-table.styles";
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { FtLitElement, jsonProperty, numberProperty, } from "@fluid-topics/ft-wc-utils";
+import { cactusSvg } from "@fluid-topics/ft-assets";
+import { FtdsIcons, FtdsIconVariants, } from "@fluid-topics/ftds-icon";
+export class FtdsTable extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.data = [];
+        this.columns = [];
+        this.stickyHeaders = false;
+        this.disableDataManipulation = false;
+        this.ariaLabel = null;
+        this.clickableRows = false;
+        this.highlightedRowIndex = -1;
+        this.activeRowIndex = -1;
+    }
+    focusRow(rowIndex) {
+        if (this.rows) {
+            this.rows[rowIndex].focus();
+        }
+    }
+    render() {
+        var _a;
+        const data = this.sortData(this.data);
+        return html `
+            <table class="table"
+                   role="table"
+                   aria-label="${(_a = this.ariaLabel) !== null && _a !== void 0 ? _a : nothing}"
+            >
+                ${this.renderHeaderRow()}
+                <tbody>
+                ${data.length > 0 ? html `
+                    ${repeat(data, (_, rowIndex) => "row-" + rowIndex, (row, rowIndex) => this.renderRow(row, rowIndex))}` : this.renderEmptyStateTable()}
+                </tbody>
+            </table>
+        `;
+    }
+    optWrapWithFtTypography(toRender, variant) {
+        if (typeof toRender === "string") {
+            return html `
+                <ftds-typography variant="${variant}">
+                    ${toRender}
+                </ftds-typography>
+            `;
+        }
+        return toRender;
+    }
+    renderHeader(column, index) {
+        var _a, _b, _c, _d;
+        const headerCellClasses = {
+            "header-cell": true,
+            "header-cell--sticky": this.stickyHeaders,
+        };
+        const columnTitleContainerClasses = {
+            "column-title-container": true,
+            ["column-title-container--text-align-" + column.textAlign]: true,
+        };
+        const styles = (_b = (_a = column.styles) === null || _a === void 0 ? void 0 : _a.headerCell) !== null && _b !== void 0 ? _b : {};
+        let ariaSort;
+        if ((_c = column.sortable) !== null && _c !== void 0 ? _c : true) {
+            if (((_d = this.currentSort) === null || _d === void 0 ? void 0 : _d.column) === index) {
+                ariaSort = this.currentSort.order === "asc" ? "ascending" : "descending";
+            }
+            else {
+                ariaSort = "none";
+            }
+        }
+        return html `
+            <th class="${classMap(headerCellClasses)}" style="${styleMap(styles)}" role="columnheader" scope="col" aria-sort="${ariaSort !== null && ariaSort !== void 0 ? ariaSort : nothing}"
+                part="${this.columnPart("header-cell", index)}">
+                <div class="${classMap(columnTitleContainerClasses)}"
+                     part="${this.columnPart("title-container", index)}">
+                    <span class="column-title"
+                          part="${this.columnPart("title", index)}">
+                          ${this.optWrapWithFtTypography(column.title, FtdsTypographyVariants.caption1semibold)}
+                    </span>
+                    ${this.renderColumnSort(column, index)}
+                </div>
+            </th>
+        `;
+    }
+    renderHeaderRow() {
+        const classes = {
+            "header": true,
+            "header--sticky": this.stickyHeaders,
+        };
+        return html `
+            <thead>
+            <tr class="${classMap(classes)}" role="row">
+                ${repeat(this.columns, (_, index) => "header-cell-" + index, (column, index) => this.renderHeader(column, index))}
+            </tr>
+            </thead>
+        `;
+    }
+    renderRow(row, rowIndex) {
+        const classes = {
+            "row": true,
+            "row--clickable": this.clickableRows,
+            "row--active": rowIndex === this.activeRowIndex,
+            "row--highlighted": rowIndex === this.highlightedRowIndex,
+        };
+        return html `
+            <tr class="${classMap(classes)}" role="row" tabindex="${this.clickableRows ? "0" : nothing}"
+                part="table-row-${rowIndex}"
+                @keydown=${this.clickableRows ? (e) => this.handleRowKeyDown(e, row) : nothing}
+                @click=${this.clickableRows ? () => this.dispatchRowClickEvent(row) : nothing}
+                @mousedown=${this.clickableRows ? () => this.handleRowMouseDown(rowIndex) : nothing}
+                @mouseup=${this.clickableRows ? this.handleRowMouseUp : nothing}
+                @mouseleave=${this.clickableRows ? this.handleRowMouseUp : nothing}
+            >
+                ${repeat(this.columns, (_, columnIndex) => "cell-" + columnIndex + "-" + rowIndex, (column, columnIndex) => this.renderCell(column, columnIndex, row, rowIndex))}
+            </tr>
+        `;
+    }
+    renderSortButton(sortIcon, label, sort, index) {
+        return html `
+            <ftds-button
+                family="${DesignSystemFamily.neutral}"
+                icon="${sortIcon}"
+                iconVariant="${FtdsIconVariants.solid}"
+                label="${label}"
+                @click=${sort}
+                part="${this.columnPart("sort-button", index)}"
+            ></ftds-button>
+        `;
+    }
+    renderCell(column, columnIndex, row, rowIndex) {
+        var _a;
+        const classes = {
+            "cell": true,
+            ["cell--text-align-" + column.textAlign]: true,
+        };
+        const renderer = (_a = column.render) !== null && _a !== void 0 ? _a : FtdsTable.DEFAULT_RENDER;
+        const render = (value) => {
+            const rendered = renderer(value, rowIndex);
+            return typeof rendered === "string" ? unsafeHTML(rendered) : rendered;
+        };
+        return html `
+            <td class="${classMap(classes)}" role="cell"
+                part="${this.columnPart("cell", columnIndex)} cell-row-${rowIndex} cell-column-${columnIndex}-row-${rowIndex}">
+                ${render(this.getValue(column, row))}
+            </td>
+        `;
+    }
+    renderColumnSort(column, index) {
+        var _a, _b, _c;
+        const isSorted = ((_a = this.currentSort) === null || _a === void 0 ? void 0 : _a.column) === index;
+        const sortIcon = this.getSortIcon(isSorted);
+        const sort = () => {
+            var _a, _b;
+            const defaultSort = (_a = column.defaultSortOrder) !== null && _a !== void 0 ? _a : "asc";
+            this.currentSort = {
+                column: index,
+                order: isSorted && ((_b = this.currentSort) === null || _b === void 0 ? void 0 : _b.order) === defaultSort ? this.getOppositeSortOrder(defaultSort) : defaultSort,
+            };
+            this.dispatchChangeEvent();
+        };
+        const sortOrderText = this.getSortOrderText(isSorted, column);
+        const titleText = (_b = column.titleText) !== null && _b !== void 0 ? _b : column.title;
+        const label = `Sort ${titleText} in ${sortOrderText} order`;
+        return ((_c = column.sortable) !== null && _c !== void 0 ? _c : true) ? this.renderSortButton(sortIcon, label, sort, index) : nothing;
+    }
+    renderEmptyStateTable() {
+        var _a, _b;
+        return html `
+            <tr class="row" role="row">
+                <td colspan="${this.columns.length}" class="cell no-content" role="cell">
+                    ${((_a = this.emptyState) === null || _a === void 0 ? void 0 : _a.noImage) ? nothing : cactusSvg}
+                    <ftds-typography variant="${FtdsTypographyVariants.body2medium}">
+                        ${(_b = this.emptyState) === null || _b === void 0 ? void 0 : _b.content}
+                    </ftds-typography>
+                </td>
+            </tr>
+        `;
+    }
+    getSortIcon(isSorted) {
+        return isSorted ? (this.currentSort.order === "asc" ? FtdsIcons.SORT_UP : FtdsIcons.SORT_DOWN) : FtdsIcons.SORT;
+    }
+    update(props) {
+        super.update(props);
+        if (props.has("sort")) {
+            this.currentSort = this.sort;
+        }
+    }
+    columnPart(prefix, index) {
+        return `${prefix} ${prefix}-column-${index}`;
+    }
+    getValue(column, row) {
+        return typeof column.getter === "string" ? row[column.getter] : column.getter(row);
+    }
+    sortData(data) {
+        var _a;
+        if (this.currentSort && !this.disableDataManipulation) {
+            const column = this.columns[this.currentSort.column];
+            const ascComparator = (_a = column.comparator) !== null && _a !== void 0 ? _a : FtdsTable.DEFAULT_COMPARATOR;
+            const comparator = this.currentSort.order === "asc" ? ascComparator : (a, b) => -ascComparator(a, b);
+            return [...data].sort((a, b) => comparator(this.getValue(column, a), this.getValue(column, b)));
+        }
+        return data;
+    }
+    getOppositeSortOrder(sortOrder) {
+        return sortOrder === "asc" ? "desc" : "asc";
+    }
+    getSortOrderText(isSorted, column) {
+        if (isSorted) {
+            return this.currentSort.order === "asc" ? "descending" : "ascending";
+        }
+        else {
+            return column.defaultSortOrder === "desc" ? "descending" : "ascending";
+        }
+    }
+    dispatchChangeEvent() {
+        this.dispatchEvent(new FtdsTableChangeEvent({
+            sort: this.currentSort,
+        }));
+    }
+    handleRowKeyDown(e, row) {
+        if (e.key === "Enter" || e.key === " ") {
+            this.dispatchRowClickEvent(row);
+        }
+    }
+    dispatchRowClickEvent(row) {
+        this.dispatchEvent(new RowClickEvent(row));
+    }
+    handleRowMouseDown(rowIndex) {
+        this.activeRowIndex = rowIndex;
+    }
+    handleRowMouseUp() {
+        this.activeRowIndex = -1;
+    }
+}
+FtdsTable.styles = designSystemStyles;
+FtdsTable.DEFAULT_RENDER = (v) => html `
+        <ftds-typography variant="${FtdsTypographyVariants.caption1medium}">
+            ${v}
+        </ftds-typography>
+    `;
+FtdsTable.DEFAULT_COMPARATOR = (a, b) => a - b;
+__decorate([
+    jsonProperty([])
+], FtdsTable.prototype, "data", void 0);
+__decorate([
+    jsonProperty([])
+], FtdsTable.prototype, "columns", void 0);
+__decorate([
+    jsonProperty(undefined)
+], FtdsTable.prototype, "sort", void 0);
+__decorate([
+    jsonProperty([])
+], FtdsTable.prototype, "emptyState", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsTable.prototype, "stickyHeaders", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsTable.prototype, "disableDataManipulation", void 0);
+__decorate([
+    state()
+], FtdsTable.prototype, "currentSort", void 0);
+__decorate([
+    property({ attribute: "aria-label" })
+], FtdsTable.prototype, "ariaLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsTable.prototype, "clickableRows", void 0);
+__decorate([
+    numberProperty()
+], FtdsTable.prototype, "highlightedRowIndex", void 0);
+__decorate([
+    numberProperty()
+], FtdsTable.prototype, "activeRowIndex", void 0);
+__decorate([
+    queryAll("tbody .row")
+], FtdsTable.prototype, "rows", void 0);