@fluid-topics/ft-filterable-table 0.2.22 → 0.3.0

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

@@ -1,5 +1,5 @@
 import { PropertyValues, TemplateResult } from "lit";
-import { FtCssVariable, FtLitElement } 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";
@@ -32,14 +32,14 @@ export interface FtFilterableTableProperties<T extends Record<string, any>> {
     stickyHeaders: boolean;
 }
 export declare const FtFilterableTableCssVariables: {
-    headerBackground: FtCssVariable;
-    oddRowBackground: FtCssVariable;
-    evenRowBackground: FtCssVariable;
-    rowHoverBackground: FtCssVariable;
-    stickyHeaderZIndex: FtCssVariable;
-    colorOnSurfaceHigh: FtCssVariable;
-    titleFont: FtCssVariable;
-    contentFont: FtCssVariable;
+    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 class FtFilterableTable<T extends Record<string, any>> extends FtLitElement implements FtFilterableTableProperties<T> {
     data: Array<T>;

package/build/ft-filterable-table.js

@@ -8,26 +8,26 @@ 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 { designSystemVariables, FtCssVariable, FtLitElement, setVariable } from "@fluid-topics/ft-wc-utils";
+import { designSystemVariables, FtCssVariableFactory, FtLitElement, setVariable } 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';
+import { classMap } from "lit/directives/class-map.js";
 export class RowClickEvent extends CustomEvent {
     constructor(data) {
         super("row-click", { detail: data });
     }
 }
 export const FtFilterableTableCssVariables = {
-    headerBackground: FtCssVariable.create("--ft-filterable-table-header-background", "COLOR", "whitesmoke"),
-    oddRowBackground: FtCssVariable.create("--ft-filterable-table-odd-row-background", "COLOR", "#FFFFFF"),
-    evenRowBackground: FtCssVariable.create("--ft-filterable-table-even-row-background", "COLOR", "#fdfdfd"),
-    rowHoverBackground: FtCssVariable.create("--ft-filterable-table-row-hover-background", "COLOR", "#fafafa"),
-    stickyHeaderZIndex: FtCssVariable.create("--ft-filterable-table-sticky-header-zindex", "NUMBER", "100"),
-    colorOnSurfaceHigh: FtCssVariable.external(designSystemVariables.colorOnSurfaceHigh, "Design system"),
-    titleFont: FtCssVariable.external(designSystemVariables.titleFont, "Design system"),
-    contentFont: FtCssVariable.external(designSystemVariables.contentFont, "Design system"),
+    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"),
 };
 const DEFAULT_RENDER = (v) => html `${v}`;
 const DEFAULT_COMPARATOR = (a, b) => a - b;
@@ -125,8 +125,8 @@ export class FtFilterableTable extends FtLitElement {
     }
     renderHeader(column, index) {
         const classes = {
-            'header-cell': true,
-            'header-cell--sticky': this.stickyHeaders
+            "header-cell": true,
+            "header-cell--sticky": this.stickyHeaders
         };
         return html `
             <div class="${classMap(classes)}">
@@ -134,10 +134,10 @@ export class FtFilterableTable extends FtLitElement {
                     <span class="column-title">${column.title}</span>
                     ${this.renderColumnSort(column, index)}
                 </div>
-              ${column.filter ? html `
-                <div class="column-filter">
-                    ${this.renderColumnFilter(column, index)}
-                </div>` : null}
+                ${column.filter ? html `
+                    <div class="column-filter">
+                        ${this.renderColumnFilter(column, index)}
+                    </div>` : null}
             </div>
         `;
     }
@@ -246,7 +246,7 @@ FtFilterableTable.styles = css `
             padding: .5rem 1rem;
             font-family: ${FtFilterableTableCssVariables.titleFont};
         }
-        
+
         .header-cell--sticky {
             top: 0;
             z-index: ${FtFilterableTableCssVariables.stickyHeaderZIndex};