@fluid-topics/ft-table 2.0.25 → 2.0.27

package/build/ftds-table.d.ts

@@ -1,6 +1,7 @@
 import { nothing, PropertyValues, TemplateResult } from "lit";
 import "@fluid-topics/ft-button";
 import "@fluid-topics/ft-typography";
+import { FtdsTypographyVariants } from "@fluid-topics/ft-typography";
 import { ColumnConfiguration, EmptyStateConfiguration, FtdsTableProperties, Sort } 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> {
@@ -21,7 +22,7 @@ export declare class FtdsTable<T extends Record<string, any>> extends FtLitEleme
     static DEFAULT_COMPARATOR: (a: any, b: any) => number;
     focusRow(rowIndex: number): void;
     protected render(): TemplateResult<1>;
-    protected optWrapWithFtTypography(toRender: TemplateResult | string): TemplateResult;
+    protected optWrapWithFtTypography(toRender: TemplateResult | string, variant: FtdsTypographyVariants): TemplateResult;
     protected renderHeader(column: ColumnConfiguration<T>, index: number): TemplateResult<1>;
     protected renderHeaderRow(): TemplateResult<1>;
     protected renderRow(row: T, rowIndex: number): TemplateResult<1>;

package/build/ftds-table.js

@@ -4,19 +4,19 @@ 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 { html, nothing } from "lit";
+import { html, nothing, } from "lit";
 import { repeat } from "lit/directives/repeat.js";
 import "@fluid-topics/ft-button";
 import "@fluid-topics/ft-typography";
 import { FtdsTypographyVariants } from "@fluid-topics/ft-typography";
-import { FtdsTableChangeEvent, RowClickEvent } from "./ftds-table.properties";
-import { property, queryAll, state } from "lit/decorators.js";
+import { FtdsTableChangeEvent, RowClickEvent, } from "./ftds-table.properties";
+import { property, queryAll, state, } from "lit/decorators.js";
 import { DesignSystemFamily } from "@fluid-topics/design-system-variables";
 import { designSystemStyles } from "./ftds-table.styles";
 import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { FtLitElement, jsonProperty } from "@fluid-topics/ft-wc-utils";
+import { FtLitElement, jsonProperty, numberProperty, } from "@fluid-topics/ft-wc-utils";
 import { cactusSvg } from "@fluid-topics/ft-assets";
 export class FtdsTable extends FtLitElement {
     constructor() {
@@ -51,10 +51,10 @@ export class FtdsTable extends FtLitElement {
             </table>
         `;
     }
-    optWrapWithFtTypography(toRender) {
+    optWrapWithFtTypography(toRender, variant) {
         if (typeof toRender === "string") {
             return html `
-                <ftds-typography variant="${FtdsTypographyVariants.caption1semibold}">
+                <ftds-typography variant="${variant}">
                     ${toRender}
                 </ftds-typography>
             `;
@@ -88,7 +88,7 @@ export class FtdsTable extends FtLitElement {
                      part="${this.columnPart("title-container", index)}">
                     <span class="column-title"
                           part="${this.columnPart("title", index)}">
-                          ${this.optWrapWithFtTypography(column.title)}
+                          ${this.optWrapWithFtTypography(column.title, FtdsTypographyVariants.caption1semibold)}
                     </span>
                     ${this.renderColumnSort(column, index)}
                 </div>
@@ -153,7 +153,7 @@ export class FtdsTable extends FtLitElement {
         return html `
             <td class="${classMap(classes)}" role="cell"
                 part="${this.columnPart("cell", columnIndex)} cell-row-${rowIndex} cell-column-${columnIndex}-row-${rowIndex}">
-                <ftds-typography variant="${FtdsTypographyVariants.caption1medium}">${render(this.getValue(column, row))}</ftds-typography>
+                ${render(this.getValue(column, row))}
             </td>
         `;
     }
@@ -245,7 +245,11 @@ export class FtdsTable extends FtLitElement {
     }
 }
 FtdsTable.styles = designSystemStyles;
-FtdsTable.DEFAULT_RENDER = (v) => html `${v}`;
+FtdsTable.DEFAULT_RENDER = (v) => html `
+        <ftds-typography variant="${FtdsTypographyVariants.caption1medium}">
+            ${v}
+        </ftds-typography>
+    `;
 FtdsTable.DEFAULT_COMPARATOR = (a, b) => a - b;
 __decorate([
     jsonProperty([])
@@ -275,10 +279,10 @@ __decorate([
     property({ type: Boolean })
 ], FtdsTable.prototype, "clickableRows", void 0);
 __decorate([
-    property({ type: Number })
+    numberProperty()
 ], FtdsTable.prototype, "highlightedRowIndex", void 0);
 __decorate([
-    property({ type: Number })
+    numberProperty()
 ], FtdsTable.prototype, "activeRowIndex", void 0);
 __decorate([
     queryAll("tbody .row")

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-table",
-    "version": "2.0.25",
+    "version": "2.0.27",
     "description": "A dynamic table",
     "keywords": [
         "Lit"
@@ -23,11 +23,11 @@
     },
     "dependencies": {
         "@fluid-topics/design-system-variables": "3.2.8",
-        "@fluid-topics/ft-assets": "2.0.25",
-        "@fluid-topics/ft-button": "2.0.25",
-        "@fluid-topics/ft-typography": "2.0.25",
-        "@fluid-topics/ft-wc-utils": "2.0.25",
+        "@fluid-topics/ft-assets": "2.0.27",
+        "@fluid-topics/ft-button": "2.0.27",
+        "@fluid-topics/ft-typography": "2.0.27",
+        "@fluid-topics/ft-wc-utils": "2.0.27",
         "lit": "3.1.0"
     },
-    "gitHead": "f7582c9f28ac8fb59807834b4cbdcf09144478cf"
+    "gitHead": "b4f188d0ab565bdf8a3fab98c358d0b533e8f611"
 }