@fluid-topics/ft-filterable-table 0.1.17 → 0.2.1

package/build/ft-filterable-table.js

@@ -8,7 +8,7 @@ import { css, 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 { customElement, designSystemVariables, FtCssVariable, FtLitElement, setVariable } from "@fluid-topics/ft-wc-utils";
+import { designSystemVariables, FtCssVariable, FtLitElement, setVariable } from "@fluid-topics/ft-wc-utils";
 import "@fluid-topics/ft-select";
 import "@fluid-topics/ft-text-field";
 import "@fluid-topics/ft-button";
@@ -30,7 +30,7 @@ export const FtFilterableTableCssVariables = {
 const DEFAULT_RENDER = (v) => html `${v}`;
 const DEFAULT_COMPARATOR = (a, b) => a - b;
 const DEFAULT_STRINGIFY = (v) => "" + v;
-let FtFilterableTable = class FtFilterableTable extends FtLitElement {
+export class FtFilterableTable extends FtLitElement {
     constructor() {
         // Don't scope components here or web components cannot be used in columns render method
         // static elementDefinitions: ElementDefinitionsMap = {}
@@ -40,118 +40,19 @@ let FtFilterableTable = class FtFilterableTable extends FtLitElement {
         this.filters = [];
         this.selectData = [];
     }
-    //language=css
-    getStyles() {
-        return css `
-            :host {
-                display: block;
-            }
-
-            .table {
-                display: grid;
-                grid-template-columns: repeat(${this.columns.length}, minmax(min-content, auto));
-            }
-
-            .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: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;
-            }
-
-            .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;
-            }
-        `;
-    }
     init(data, columns, sort) {
         this.data = data;
         this.columns = columns;
         this.sort = sort;
     }
-    getTemplate() {
+    render() {
         let data = this.sortData(this.filterData());
         return html `
+            <style>
+                .table {
+                    grid-template-columns: repeat(${this.columns.length}, minmax(min-content, auto));
+                }
+            </style>
             <div class="table">
                 <div class="header">
                     ${repeat(this.columns, (_, index) => "header-cell-" + index, (column, index) => this.renderHeader(column, index))}
@@ -314,7 +215,108 @@ let FtFilterableTable = class FtFilterableTable extends FtLitElement {
         const value = this.getValue(column, row);
         return typeof column.stringify === "function" ? column.stringify(value, index) : DEFAULT_STRINGIFY(value);
     }
-};
+}
+//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: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;
+        }
+
+        .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;
+        }
+    `;
 __decorate([
     property({ attribute: false })
 ], FtFilterableTable.prototype, "data", void 0);
@@ -327,8 +329,4 @@ __decorate([
 __decorate([
     state()
 ], FtFilterableTable.prototype, "currentSort", void 0);
-FtFilterableTable = __decorate([
-    customElement("ft-filterable-table")
-], FtFilterableTable);
-export { FtFilterableTable };
 //# sourceMappingURL=ft-filterable-table.js.map