@fluid-topics/ft-filterable-table 0.3.11 → 0.3.13

package/build/ft-filterable-table.css.d.ts

@@ -0,0 +1,12 @@
+export declare const FtFilterableTableCssVariables: {
+    headerBackground: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    oddRowBackground: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    evenRowBackground: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    rowHoverBackground: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    stickyHeaderZIndex: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorOnSurfaceHigh: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    titleFont: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    contentFont: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+};
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=ft-filterable-table.css.d.ts.map

package/build/ft-filterable-table.css.js

@@ -0,0 +1,124 @@
+import { css } from "lit";
+import { designSystemVariables, FtCssVariableFactory, setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtButtonCssVariables } from "@fluid-topics/ft-button/build/ft-button.css";
+export const FtFilterableTableCssVariables = {
+    headerBackground: FtCssVariableFactory.create("--ft-filterable-table-header-background", "COLOR", "whitesmoke"),
+    oddRowBackground: FtCssVariableFactory.create("--ft-filterable-table-odd-row-background", "COLOR", "#FFFFFF"),
+    evenRowBackground: FtCssVariableFactory.create("--ft-filterable-table-even-row-background", "COLOR", "#fdfdfd"),
+    rowHoverBackground: FtCssVariableFactory.create("--ft-filterable-table-row-hover-background", "COLOR", "#fafafa"),
+    stickyHeaderZIndex: FtCssVariableFactory.create("--ft-filterable-table-sticky-header-zindex", "NUMBER", "100"),
+    colorOnSurfaceHigh: FtCssVariableFactory.external(designSystemVariables.colorOnSurfaceHigh, "Design system"),
+    titleFont: FtCssVariableFactory.external(designSystemVariables.titleFont, "Design system"),
+    contentFont: FtCssVariableFactory.external(designSystemVariables.contentFont, "Design system"),
+};
+//language=css
+export const styles = css `
+    :host {
+        display: block;
+    }
+
+    .table {
+        display: grid;
+    }
+
+    .header, .row {
+        display: contents;
+    }
+
+    .header-cell {
+        display: flex;
+        flex-direction: column;
+        background: ${FtFilterableTableCssVariables.headerBackground};
+        color: ${FtFilterableTableCssVariables.colorOnSurfaceHigh};
+        padding: .5rem 1rem;
+        font-family: ${FtFilterableTableCssVariables.titleFont};
+    }
+
+    .header-cell--sticky {
+        top: 0;
+        z-index: ${FtFilterableTableCssVariables.stickyHeaderZIndex};
+        position: sticky;
+    }
+
+    .header-cell:first-of-type {
+        border-radius: .5rem 0 0 0;
+    }
+
+    .header-cell:last-of-type {
+        border-radius: 0 .5rem 0 0;
+    }
+
+    .column-title-container {
+        display: flex;
+        align-items: center;
+    }
+
+    .column-title-container ft-button {
+        ${setVariable(FtButtonCssVariables.backgroundColor, FtFilterableTableCssVariables.headerBackground)};
+        ${setVariable(FtButtonCssVariables.color, FtFilterableTableCssVariables.colorOnSurfaceHigh)};
+    }
+
+    .column-title {
+        white-space: nowrap;
+        text-transform: uppercase;
+        margin-right: .5rem;
+        font-weight: normal;
+        letter-spacing: 1.5px;
+        font-size: 0.8em;
+    }
+
+    .column-filter {
+        flex-grow: 1;
+        flex-shrink: 0;
+    }
+
+    .column-filter:not(:empty) {
+        padding-top: .5rem;
+    }
+
+    .column-filter ft-text-field,
+    .column-filter ft-select {
+        width: 150px;
+        min-width: 100%;
+    }
+
+    .cell {
+        padding: 1rem;
+        border-left: 1px solid ${FtFilterableTableCssVariables.headerBackground};
+        border-bottom: 1px solid ${FtFilterableTableCssVariables.headerBackground};
+        overflow-x: auto;
+        display: flex;
+        align-items: center;
+        font-family: ${FtFilterableTableCssVariables.contentFont};
+    }
+
+    /* Even is 2n+1 and odd is 2n because of the header */
+    .row:nth-child(2n) > .cell {
+        background: ${FtFilterableTableCssVariables.oddRowBackground};
+    }
+
+    .row:nth-child(2n + 1) > .cell {
+        background: ${FtFilterableTableCssVariables.evenRowBackground};
+    }
+
+    .row:hover > .cell {
+        background: ${FtFilterableTableCssVariables.rowHoverBackground};
+    }
+
+    .cell:last-of-type {
+        border-right: 1px solid ${FtFilterableTableCssVariables.headerBackground};
+    }
+
+    .row:last-of-type .cell:first-of-type {
+        border-radius: 0 0 0 .5rem;
+    }
+
+    .row:last-of-type .cell:last-of-type {
+        border-radius: 0 0 .5rem 0;
+    }
+
+    .hidden {
+        visibility: hidden;
+    }
+`;
+//# sourceMappingURL=ft-filterable-table.css.js.map

package/build/ft-filterable-table.d.ts

@@ -1,46 +1,9 @@
-import { PropertyValues, TemplateResult } from "lit";
+import { PropertyValues } from "lit";
 import { FtLitElement } from "@fluid-topics/ft-wc-utils";
 import "@fluid-topics/ft-select";
 import "@fluid-topics/ft-text-field";
 import "@fluid-topics/ft-button";
-export declare 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;
-    comparator?: (a: any, b: any) => number;
-    filter?: "text" | "select" | "date" | "none";
-    stringify?: (value: any, index: number) => string;
-}
-export interface Sort {
-    column: number;
-    order: "asc" | "desc";
-}
-interface Filter {
-    value?: string;
-    rangeStart?: Date;
-    rangeEnd?: Date;
-}
-export declare class RowClickEvent<T> extends CustomEvent<T> {
-    constructor(data: T);
-}
-export interface FtFilterableTableProperties<T extends Record<string, any>> {
-    data: Array<T>;
-    columns: Array<ColumnConfiguration<T>>;
-    sort?: Sort;
-    stickyHeaders: boolean;
-}
-export declare const FtFilterableTableCssVariables: {
-    headerBackground: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    oddRowBackground: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    evenRowBackground: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    rowHoverBackground: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    stickyHeaderZIndex: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    colorOnSurfaceHigh: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    titleFont: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    contentFont: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-};
+import { ColumnConfiguration, Filter, FtFilterableTableProperties, Sort } from "./ft-filterable-table.properties";
 export declare class FtFilterableTable<T extends Record<string, any>> extends FtLitElement implements FtFilterableTableProperties<T> {
     data: Array<T>;
     columns: Array<ColumnConfiguration<T>>;
@@ -51,7 +14,7 @@ export declare class FtFilterableTable<T extends Record<string, any>> extends Ft
     selectData: Array<Array<string>>;
     static styles: import("lit").CSSResult;
     init(data: Array<T>, columns: Array<ColumnConfiguration<T>>, sort?: Sort): void;
-    protected render(): TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
     private filterData;
     private sortData;
     protected update(props: PropertyValues): void;
@@ -63,5 +26,4 @@ export declare class FtFilterableTable<T extends Record<string, any>> extends Ft
     private getValue;
     private getValueAsString;
 }
-export {};
 //# sourceMappingURL=ft-filterable-table.d.ts.map

package/build/ft-filterable-table.js

@@ -4,31 +4,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { css, html } from "lit";
+import { html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { designSystemVariables, FtCssVariableFactory, FtLitElement, setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtLitElement } from "@fluid-topics/ft-wc-utils";
 import "@fluid-topics/ft-select";
 import "@fluid-topics/ft-text-field";
 import "@fluid-topics/ft-button";
-import { FtButtonCssVariables } from "@fluid-topics/ft-button";
 import { classMap } from "lit/directives/class-map.js";
-export class RowClickEvent extends CustomEvent {
-    constructor(data) {
-        super("row-click", { detail: data });
-    }
-}
-export const FtFilterableTableCssVariables = {
-    headerBackground: FtCssVariableFactory.create("--ft-filterable-table-header-background", "COLOR", "whitesmoke"),
-    oddRowBackground: FtCssVariableFactory.create("--ft-filterable-table-odd-row-background", "COLOR", "#FFFFFF"),
-    evenRowBackground: FtCssVariableFactory.create("--ft-filterable-table-even-row-background", "COLOR", "#fdfdfd"),
-    rowHoverBackground: FtCssVariableFactory.create("--ft-filterable-table-row-hover-background", "COLOR", "#fafafa"),
-    stickyHeaderZIndex: FtCssVariableFactory.create("--ft-filterable-table-sticky-header-zindex", "NUMBER", "100"),
-    colorOnSurfaceHigh: FtCssVariableFactory.external(designSystemVariables.colorOnSurfaceHigh, "Design system"),
-    titleFont: FtCssVariableFactory.external(designSystemVariables.titleFont, "Design system"),
-    contentFont: FtCssVariableFactory.external(designSystemVariables.contentFont, "Design system"),
-};
+import { RowClickEvent } from "./ft-filterable-table.properties";
+import { styles } from "./ft-filterable-table.css";
 const DEFAULT_RENDER = (v) => html `${v}`;
 const DEFAULT_COMPARATOR = (a, b) => a - b;
 const DEFAULT_STRINGIFY = (v) => "" + v;
@@ -225,115 +211,7 @@ export class FtFilterableTable extends FtLitElement {
     }
 }
 //language=css
-FtFilterableTable.styles = css `
-        :host {
-            display: block;
-        }
-
-        .table {
-            display: grid;
-        }
-
-        .header, .row {
-            display: contents;
-        }
-
-        .header-cell {
-            display: flex;
-            flex-direction: column;
-            background: ${FtFilterableTableCssVariables.headerBackground};
-            color: ${FtFilterableTableCssVariables.colorOnSurfaceHigh};
-            padding: .5rem 1rem;
-            font-family: ${FtFilterableTableCssVariables.titleFont};
-        }
-
-        .header-cell--sticky {
-            top: 0;
-            z-index: ${FtFilterableTableCssVariables.stickyHeaderZIndex};
-            position: sticky;
-        }
-
-        .header-cell:first-of-type {
-            border-radius: .5rem 0 0 0;
-        }
-
-        .header-cell:last-of-type {
-            border-radius: 0 .5rem 0 0;
-        }
-
-        .column-title-container {
-            display: flex;
-            align-items: center;
-        }
-
-        .column-title-container ft-button {
-            ${setVariable(FtButtonCssVariables.backgroundColor, FtFilterableTableCssVariables.headerBackground)};
-            ${setVariable(FtButtonCssVariables.color, FtFilterableTableCssVariables.colorOnSurfaceHigh)};
-        }
-
-        .column-title {
-            white-space: nowrap;
-            text-transform: uppercase;
-            margin-right: .5rem;
-            font-weight: normal;
-            letter-spacing: 1.5px;
-            font-size: 0.8em;
-        }
-
-        .column-filter {
-            flex-grow: 1;
-            flex-shrink: 0;
-        }
-
-        .column-filter:not(:empty) {
-            padding-top: .5rem;
-        }
-
-        .column-filter ft-text-field,
-        .column-filter ft-select {
-            width: 150px;
-            min-width: 100%;
-        }
-
-        .cell {
-            padding: 1rem;
-            border-left: 1px solid ${FtFilterableTableCssVariables.headerBackground};
-            border-bottom: 1px solid ${FtFilterableTableCssVariables.headerBackground};
-            overflow-x: auto;
-            display: flex;
-            align-items: center;
-            font-family: ${FtFilterableTableCssVariables.contentFont};
-        }
-
-        /* Even is 2n+1 and odd is 2n because of the header */
-        .row:nth-child(2n) > .cell {
-            background: ${FtFilterableTableCssVariables.oddRowBackground};
-        }
-
-        .row:nth-child(2n + 1) > .cell {
-            background: ${FtFilterableTableCssVariables.evenRowBackground};
-        }
-
-        .row:hover > .cell {
-            background: ${FtFilterableTableCssVariables.rowHoverBackground};
-        }
-
-        .cell:last-of-type {
-            border-right: 1px solid ${FtFilterableTableCssVariables.headerBackground};
-        }
-
-        .row:last-of-type .cell:first-of-type {
-            border-radius: 0 0 0 .5rem;
-        }
-
-        .row:last-of-type .cell:last-of-type {
-            border-radius: 0 0 .5rem 0;
-        }
-
-        .hidden {
-            visibility: hidden;
-        }
-    `;
+FtFilterableTable.styles = styles;
 __decorate([
     property({ attribute: false })
 ], FtFilterableTable.prototype, "data", void 0);