@fluid-topics/ftds-table 2.1.0

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

@@ -0,0 +1,49 @@
+import { TemplateResult } from "lit";
+export type Getter<T> = (o: T) => any;
+export declare enum FtColumnAlignment {
+    left = "left",
+    center = "center",
+    right = "right"
+}
+export interface ColumnConfiguration<T> {
+    title: string | TemplateResult;
+    titleText?: string;
+    getter: string | Getter<T>;
+    render?: (value: any, index: number) => string | TemplateResult;
+    styles?: FtColumnStyles;
+    sortable?: boolean;
+    defaultSortOrder?: "asc" | "desc";
+    comparator?: (a: any, b: any) => number;
+    textAlign?: FtColumnAlignment;
+}
+export interface FtColumnStyles {
+    headerCell: {
+        [key: string]: any;
+    };
+}
+export interface EmptyStateConfiguration {
+    noImage: boolean;
+    content: string | TemplateResult;
+}
+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,16 @@
+export var FtColumnAlignment;
+(function (FtColumnAlignment) {
+    FtColumnAlignment["left"] = "left";
+    FtColumnAlignment["center"] = "center";
+    FtColumnAlignment["right"] = "right";
+})(FtColumnAlignment || (FtColumnAlignment = {}));
+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,161 @@
+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};
+        cursor: pointer;
+    }
+
+    .row.row--highlighted,
+    .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 {
+        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;
+        row-gap: ${table.headerCellHorizontalGap};
+        align-items: baseline;
+    }
+
+    .column-title-container--text-align-right {
+        justify-content: flex-end;
+        margin-right: -.5rem;
+    }
+
+    .column-title-container--text-align-center {
+        justify-content: center;
+    }
+
+    .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;
+    }
+
+    .cell:not(.no-content) ftds-typography {
+        display: flex;
+        flex-wrap: wrap;
+        column-gap: ${table.dataCellVerticalGap};
+    }
+
+    .cell--text-align-right ftds-typography {
+        justify-content: flex-end;
+    }
+
+    .cell--text-align-center ftds-typography {
+        justify-content: center;
+    }
+
+    .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};
+    }
+
+    .no-content svg {
+        margin-bottom: 24px;
+    }
+
+    .no-content {
+        width: 100%;
+        text-align: center;
+        padding: 24px;
+    }
+
+    td.no-content > ftds-typography {
+        display: flex;
+        justify-content: center;
+    }
+`;

package/build/index.d.ts

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

package/build/index.js

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

package/package.json

@@ -0,0 +1,34 @@
+{
+    "name": "@fluid-topics/ftds-table",
+    "version": "2.1.0",
+    "description": "The design system table component",
+    "keywords": [
+        "Lit"
+    ],
+    "author": "Fluid Topics <devtopics@antidot.net>",
+    "license": "ISC",
+    "main": "build/index.js",
+    "web": "build/ftds-table.min.js",
+    "typings": "build/index",
+    "files": [
+        "build/**/*.js",
+        "build/**/*.ts"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
+    },
+    "dependencies": {
+        "@fluid-topics/design-system-variables": "3.5.0",
+        "@fluid-topics/ft-assets": "2.1.0",
+        "@fluid-topics/ft-wc-utils": "2.1.0",
+        "@fluid-topics/ftds-button": "2.1.0",
+        "@fluid-topics/ftds-icon": "2.1.0",
+        "@fluid-topics/ftds-typography": "2.1.0",
+        "lit": "3.1.0"
+    },
+    "devDependencies": {
+        "@fluid-topics/ft-wc-test-utils": "2.1.0"
+    },
+    "gitHead": "4727cf19d04236ad1d2b2cb43ce1c46298834c7e"
+}