@fluid-topics/ft-table 1.2.30

package/build/ftds-table.d.ts

@@ -0,0 +1,44 @@
+import { nothing, PropertyValues, TemplateResult } from "lit";
+import "@fluid-topics/ft-select";
+import "@fluid-topics/ft-text-field";
+import "@fluid-topics/ft-button";
+import "@fluid-topics/ft-typography";
+import { FtdsTableProperties, Sort } from "./ftds-table.properties";
+import { ColumnConfiguration } from "./ftds-table.properties";
+import { FtLitElement } from "@fluid-topics/ft-wc-utils";
+export declare class FtdsTable<T extends Record<string, any>> extends FtLitElement implements FtdsTableProperties<T> {
+    static DEFAULT_RENDER: (v: any) => TemplateResult<1>;
+    static DEFAULT_COMPARATOR: (a: any, b: any) => number;
+    data: Array<T>;
+    columns: Array<ColumnConfiguration<T>>;
+    sort?: Sort;
+    stickyHeaders: boolean;
+    disableDataManipulation: boolean;
+    currentSort?: Sort;
+    ariaLabel: string | null;
+    clickableRows: boolean;
+    private activeRowIndex;
+    private rows?;
+    static styles: import("lit").CSSResult;
+    protected render(): TemplateResult<1>;
+    protected renderHeader(column: ColumnConfiguration<T>, index: number): TemplateResult<1>;
+    protected renderHeaderRow(): TemplateResult<1>;
+    protected renderRow(row: T, rowIndex: number): TemplateResult<1>;
+    protected renderTable(data: T[]): TemplateResult<1>;
+    protected renderSortButton(sortIcon: string, 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>;
+    protected getSortIcon(isSorted: boolean | undefined): string;
+    private sortData;
+    protected update(props: PropertyValues): void;
+    private getOppositeSortOrder;
+    private getSortOrderText;
+    private dispatchChangeEvent;
+    protected columnPart(prefix: string, index: number): string;
+    protected getValue(column: ColumnConfiguration<T>, row: T): any;
+    private handleRowKeyDown;
+    private dispatchRowClickEvent;
+    private handleRowMouseDown;
+    private handleRowMouseUp;
+    focusRow(rowIndex: number): void;
+}

package/build/ftds-table.js

@@ -0,0 +1,257 @@
+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/ft-select";
+import "@fluid-topics/ft-text-field";
+import "@fluid-topics/ft-button";
+import "@fluid-topics/ft-typography";
+import { FtdsTableChangeEvent } from "./ftds-table.properties";
+import { property } from "lit/decorators.js";
+import { RowClickEvent } from "./ftds-table.properties";
+import { DesignSystemFamily } from "@fluid-topics/design-system-variables";
+import { designSystemStyles } from "./ftds-table.styles";
+import { classMap } from "lit/directives/class-map.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { FtLitElement, jsonProperty } from "@fluid-topics/ft-wc-utils";
+import { queryAll, state } from "lit/decorators.js";
+class FtdsTable extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.data = [];
+        this.columns = [];
+        this.stickyHeaders = false;
+        this.disableDataManipulation = false;
+        this.ariaLabel = null;
+        this.clickableRows = false;
+        this.activeRowIndex = -1;
+    }
+    render() {
+        let data = this.sortData(this.data);
+        return html `
+            <style>
+                .table {
+                    grid-template-columns: ${this.columns.map(column => { var _a; return (_a = column.gridTemplateColumn) !== null && _a !== void 0 ? _a : "minmax(min-content, auto)"; }).join(" ")};
+                }
+            </style>
+            ${this.renderTable(data)}
+        `;
+    }
+    renderHeader(column, index) {
+        var _a, _b;
+        const classes = {
+            "header-cell": true,
+            "header-cell--sticky": this.stickyHeaders
+        };
+        let ariaSort;
+        if ((_a = column.sortable) !== null && _a !== void 0 ? _a : true) {
+            if (((_b = this.currentSort) === null || _b === void 0 ? void 0 : _b.column) === index) {
+                ariaSort = this.currentSort.order === "asc" ? "ascending" : "descending";
+            }
+            else {
+                ariaSort = "none";
+            }
+        }
+        return html `
+            <th class="${classMap(classes)}" role="columnheader" scope="col" aria-sort=${ariaSort !== null && ariaSort !== void 0 ? ariaSort : nothing}
+                 part="${this.columnPart("header-cell", index)}">
+                <div class="column-title-container"
+                 part="${this.columnPart("title-container", index)}">
+                    <span class="column-title"
+                          part="${this.columnPart("title", index)}">
+                        <ft-typography variant="body-2-semibold">
+                            ${column.title}
+                        </ft-typography>
+                    </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
+        };
+        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.handleRowMouseDown(rowIndex)}
+                @mouseup=${this.handleRowMouseUp}
+                @mouseleave=${this.handleRowMouseUp}
+            >
+                ${repeat(this.columns, (_, columnIndex) => "cell-" + columnIndex + "-" + rowIndex, (column, columnIndex) => this.renderCell(column, columnIndex, row, rowIndex))}
+            </tr>
+        `;
+    }
+    renderTable(data) {
+        var _a;
+        return html `
+            <table class="table"
+                 role="table"
+                 aria-label=${(_a = this.ariaLabel) !== null && _a !== void 0 ? _a : nothing}
+            >
+                ${this.renderHeaderRow()}
+                <tbody>
+                    ${repeat(data, (_, rowIndex) => "row-" + rowIndex, (row, rowIndex) => this.renderRow(row, rowIndex))}
+                </tbody>
+            </table>
+        `;
+    }
+    renderSortButton(sortIcon, label, sort, index) {
+        return html `
+            <ftds-button
+                family=${DesignSystemFamily.neutral}
+                icon="${sortIcon}"
+                label="${label}"
+                @click=${sort}
+                part="${this.columnPart("sort-button", index)}"
+            ></ftds-button>
+        `;
+    }
+    renderCell(column, columnIndex, row, rowIndex) {
+        var _a;
+        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="cell" role="cell"
+                 part="${this.columnPart("cell", columnIndex)} cell-row-${rowIndex} cell-column-${columnIndex}-row-${rowIndex}">
+                <ft-typography variant="caption-2-medium">${render(this.getValue(column, row))}</ft-typography>
+            </td>
+        `;
+    }
+    renderColumnSort(column, index) {
+        var _a, _b;
+        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 label = `Sort ${column.title} in ${sortOrderText} order`;
+        return ((_b = column.sortable) !== null && _b !== void 0 ? _b : true) ? this.renderSortButton(sortIcon, label, sort, index) : nothing;
+    }
+    getSortIcon(isSorted) {
+        return isSorted ? (this.currentSort.order === "asc" ? "sort_up" : "sort_down") : "sort_unsorted";
+    }
+    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;
+    }
+    update(props) {
+        super.update(props);
+        if (props.has("sort")) {
+            this.currentSort = this.sort;
+        }
+    }
+    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
+        }));
+    }
+    columnPart(prefix, index) {
+        return `${prefix} ${prefix}-column-${index}`;
+    }
+    getValue(column, row) {
+        return typeof column.getter === "string" ? row[column.getter] : column.getter(row);
+    }
+    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;
+    }
+    focusRow(rowIndex) {
+        if (this.rows) {
+            this.rows[rowIndex].focus();
+        }
+    }
+}
+FtdsTable.DEFAULT_RENDER = (v) => html `${v}`;
+FtdsTable.DEFAULT_COMPARATOR = (a, b) => a - b;
+FtdsTable.styles = designSystemStyles;
+__decorate([
+    jsonProperty([])
+], FtdsTable.prototype, "data", void 0);
+__decorate([
+    jsonProperty([])
+], FtdsTable.prototype, "columns", void 0);
+__decorate([
+    jsonProperty(undefined)
+], FtdsTable.prototype, "sort", 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([
+    property({ type: Number })
+], FtdsTable.prototype, "activeRowIndex", void 0);
+__decorate([
+    queryAll("tbody .row")
+], FtdsTable.prototype, "rows", void 0);
+export { FtdsTable };

package/build/ftds-table.properties.d.ts

@@ -0,0 +1,33 @@
+import { TemplateResult } from "lit";
+export type Getter<T> = (o: T) => any;
+export interface ColumnConfiguration<T> {
+    title: string | TemplateResult;
+    getter: string | Getter<T>;
+    render?: (value: any, index: number) => string | TemplateResult;
+    sortable?: boolean;
+    defaultSortOrder?: "asc" | "desc";
+    comparator?: (a: any, b: any) => number;
+    gridTemplateColumn?: string;
+}
+export interface Sort {
+    column: number;
+    order: "asc" | "desc";
+}
+export declare class RowClickEvent<T> extends CustomEvent<T> {
+    constructor(data: T);
+}
+export interface FtdsTableChangeEventDetail {
+    sort?: Sort;
+}
+export declare class FtdsTableChangeEvent extends CustomEvent<FtdsTableChangeEventDetail> {
+    constructor(detail: FtdsTableChangeEventDetail);
+}
+export interface FtdsTableProperties<T extends Record<string, any>> {
+    data: Array<T>;
+    columns: Array<ColumnConfiguration<T>>;
+    sort?: Sort;
+    stickyHeaders: boolean;
+    disableDataManipulation: boolean;
+    clickableRows: boolean;
+    ariaLabel: string | null;
+}

package/build/ftds-table.properties.js

@@ -0,0 +1,10 @@
+export class RowClickEvent extends CustomEvent {
+    constructor(data) {
+        super("row-click", { detail: data });
+    }
+}
+export class FtdsTableChangeEvent extends CustomEvent {
+    constructor(detail) {
+        super("change", { detail: detail });
+    }
+}

package/build/ftds-table.styles.d.ts

@@ -0,0 +1,2 @@
+export { table as FtdsTableCssVariables } from "@fluid-topics/design-system-variables";
+export declare const designSystemStyles: import("lit").CSSResult;

package/build/ftds-table.styles.js

@@ -0,0 +1,121 @@
+import { css } from "lit";
+import { table } from "@fluid-topics/design-system-variables";
+export { table as FtdsTableCssVariables } from "@fluid-topics/design-system-variables";
+//language=css
+export const designSystemStyles = css `
+    :host {
+        display: block;
+    }
+
+    .table {
+        border-collapse: separate;
+        border-spacing: 0;
+        width: 100%;
+    }
+
+    .header {
+        color: ${table.headerRowColor};
+    }
+
+    .row {
+        color: ${table.dataRowColor};
+        position: relative;
+        background-color: ${table.dataRowBackgroundColor};
+        border-bottom: ${table.dataRowBorderWidth} solid ${table.dataRowBorderColor};
+        border-left: ${table.dataRowBorderWidth} solid ${table.dataRowBorderColor};
+        border-right: ${table.dataRowBorderWidth} solid ${table.dataRowBorderColor};
+    }
+
+    .row:hover {
+        background-color: ${table.dataRowDefaultHoverBackgroundColor};
+    }
+
+    .row.row--clickable:hover {
+        background-color: ${table.dataRowClickableHoverBackgroundColor};
+    }
+
+    .row.row--clickable:focus-within {
+        background-color: ${table.dataRowClickableFocusBackgroundColor};
+        outline: 1px solid ${table.dataRowClickableFocusBorderColor};
+        z-index: 15;
+    }
+
+    .row.row--clickable.row--active {
+        background-color: ${table.dataRowClickableActiveBackgroundColor};
+    }
+
+    .header {
+        background-color: ${table.headerRowBackgroundColor};
+    }
+
+    .header--sticky {
+        top: 0;
+        z-index: 2;
+        position: sticky;
+    }
+
+    .header-cell {
+        gap: ${table.headerCellHorizontalGap};
+        padding: ${table.headerCellVerticalPadding} ${table.headerCellHorizontalPadding};
+        vertical-align: baseline;
+    }
+
+    .header-cell--sticky {
+        top: 0;
+        z-index: 10;
+        position: sticky;
+
+        &:focus-within {
+            z-index: 11;
+        }
+
+        &:hover {
+            z-index: 12;
+        }
+    }
+
+    .header > .header-cell {
+        border-top: ${table.headerRowBorderWidth} solid ${table.headerRowBorderColor};
+        border-bottom: ${table.headerRowBorderWidth} solid ${table.headerRowBorderColor};
+    }
+
+    .header > .header-cell:first-of-type {
+        border-left: ${table.headerRowBorderWidth} solid ${table.headerRowBorderColor};
+    }
+
+    .header > .header-cell:last-of-type {
+        border-right: ${table.headerRowBorderWidth} solid ${table.headerRowBorderColor};
+    }
+
+    .column-title-container {
+        display: flex;
+        align-items: baseline;
+    }
+
+    .column-title {
+        white-space: normal;
+        margin: 0 .5rem 0 0;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        text-align: start;
+    }
+
+    .cell {
+        padding: ${table.dataCellVerticalPadding} ${table.dataCellHorizontalPadding};
+        overflow-x: auto;
+        position: relative;
+    }
+
+    .row > .cell {
+        border-bottom: ${table.dataRowBorderWidth} solid ${table.dataRowBorderColor};
+    }
+
+    .row > .cell:first-of-type {
+        border-left: ${table.dataRowBorderWidth} solid ${table.dataRowBorderColor};
+    }
+
+    .row > .cell:last-of-type {
+        border-right: ${table.dataRowBorderWidth} solid ${table.dataRowBorderColor};
+    }
+`;

package/build/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ftds-table.properties";
+export * from "./ftds-table.styles";
+export * from "./ftds-table";

package/build/index.js

@@ -0,0 +1,6 @@
+import { customElement } from "@fluid-topics/ft-wc-utils";
+import { FtdsTable } from "./ftds-table";
+export * from "./ftds-table.properties";
+export * from "./ftds-table.styles";
+export * from "./ftds-table";
+customElement("ftds-table")(FtdsTable);

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@fluid-topics/ft-table",
+  "version": "1.2.30",
+  "description": "A dynamic table",
+  "keywords": [
+    "Lit"
+  ],
+  "author": "Fluid Topics <devtopics@antidot.net>",
+  "license": "ISC",
+  "main": "build/index.js",
+  "web": "build/ft-filterable-table.min.js",
+  "typings": "build/index",
+  "files": [
+    "build/**/*.ts",
+    "build/**/*.js"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  },
+  "dependencies": {
+    "@fluid-topics/design-system-variables": "0.1.91",
+    "@fluid-topics/ft-button": "1.2.30",
+    "@fluid-topics/ft-typography": "1.2.30",
+    "@fluid-topics/ft-wc-utils": "1.2.30",
+    "lit": "3.1.0"
+  },
+  "gitHead": "ac166f46dbdc65614893826ca64bbfc51e2e2b94"
+}