@fluid-topics/ft-table 1.3.45 → 1.3.47

package/build/ftds-table.js

@@ -8,7 +8,7 @@ import { html, nothing } from "lit";
 import { repeat } from "lit/directives/repeat.js";
 import "@fluid-topics/ft-button";
 import "@fluid-topics/ft-typography";
-import { FtTypographyVariants } from "@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 { DesignSystemFamily } from "@fluid-topics/design-system-variables";
@@ -37,11 +37,11 @@ class FtdsTable extends FtLitElement {
     }
     render() {
         var _a;
-        let data = this.sortData(this.data);
+        const data = this.sortData(this.data);
         return html `
             <table class="table"
                    role="table"
-                   aria-label=${(_a = this.ariaLabel) !== null && _a !== void 0 ? _a : nothing}
+                   aria-label="${(_a = this.ariaLabel) !== null && _a !== void 0 ? _a : nothing}"
             >
                 ${this.renderHeaderRow()}
                 <tbody>
@@ -55,11 +55,11 @@ class FtdsTable extends FtLitElement {
         var _a, _b, _c, _d;
         const headerCellClasses = {
             "header-cell": true,
-            "header-cell--sticky": this.stickyHeaders
+            "header-cell--sticky": this.stickyHeaders,
         };
         const columnTitleContainerClasses = {
             "column-title-container": true,
-            ["column-title-container--text-align-" + column.textAlign]: true
+            ["column-title-container--text-align-" + column.textAlign]: true,
         };
         const styles = (_b = (_a = column.styles) === null || _a === void 0 ? void 0 : _a.headerCell) !== null && _b !== void 0 ? _b : {};
         let ariaSort;
@@ -72,15 +72,15 @@ class FtdsTable extends FtLitElement {
             }
         }
         return html `
-            <th class="${classMap(headerCellClasses)}" style="${styleMap(styles)}" role="columnheader" scope="col" aria-sort=${ariaSort !== null && ariaSort !== void 0 ? ariaSort : nothing}
+            <th class="${classMap(headerCellClasses)}" style="${styleMap(styles)}" role="columnheader" scope="col" aria-sort="${ariaSort !== null && ariaSort !== void 0 ? ariaSort : nothing}"
                 part="${this.columnPart("header-cell", index)}">
                 <div class="${classMap(columnTitleContainerClasses)}"
                      part="${this.columnPart("title-container", index)}">
                     <span class="column-title"
                           part="${this.columnPart("title", index)}">
-                        <ft-typography variant="caption-1-semibold">
+                        <ftds-typography variant="${FtdsTypographyVariants.caption1semibold}">
                             ${column.title}
-                        </ft-typography>
+                        </ftds-typography>
                     </span>
                     ${this.renderColumnSort(column, index)}
                 </div>
@@ -94,9 +94,9 @@ class FtdsTable extends FtLitElement {
         };
         return html `
             <thead>
-                <tr class=${classMap(classes)} role="row">
-                    ${repeat(this.columns, (_, index) => "header-cell-" + index, (column, index) => this.renderHeader(column, index))}
-                </tr>
+            <tr class="${classMap(classes)}" role="row">
+                ${repeat(this.columns, (_, index) => "header-cell-" + index, (column, index) => this.renderHeader(column, index))}
+            </tr>
             </thead>
         `;
     }
@@ -105,10 +105,10 @@ class FtdsTable extends FtLitElement {
             "row": true,
             "row--clickable": this.clickableRows,
             "row--active": rowIndex === this.activeRowIndex,
-            "row--highlighted": rowIndex === this.highlightedRowIndex
+            "row--highlighted": rowIndex === this.highlightedRowIndex,
         };
         return html `
-            <tr class="${classMap(classes)}" role="row" tabindex=${this.clickableRows ? "0" : nothing}
+            <tr class="${classMap(classes)}" role="row" tabindex="${this.clickableRows ? "0" : nothing}"
                 part="table-row-${rowIndex}"
                 @keydown=${this.clickableRows ? (e) => this.handleRowKeyDown(e, row) : nothing}
                 @click=${this.clickableRows ? () => this.dispatchRowClickEvent(row) : nothing}
@@ -123,7 +123,7 @@ class FtdsTable extends FtLitElement {
     renderSortButton(sortIcon, label, sort, index) {
         return html `
             <ftds-button
-                family=${DesignSystemFamily.neutral}
+                family="${DesignSystemFamily.neutral}"
                 icon="${sortIcon}"
                 label="${label}"
                 @click=${sort}
@@ -135,7 +135,7 @@ class FtdsTable extends FtLitElement {
         var _a;
         const classes = {
             "cell": true,
-            ["cell--text-align-" + column.textAlign]: true
+            ["cell--text-align-" + column.textAlign]: true,
         };
         const renderer = (_a = column.render) !== null && _a !== void 0 ? _a : FtdsTable.DEFAULT_RENDER;
         const render = (value) => {
@@ -145,7 +145,7 @@ 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}">
-                <ft-typography variant="caption-1-medium">${render(this.getValue(column, row))}</ft-typography>
+                <ftds-typography variant="${FtdsTypographyVariants.caption1medium}">${render(this.getValue(column, row))}</ftds-typography>
             </td>
         `;
     }
@@ -158,7 +158,7 @@ class FtdsTable extends FtLitElement {
             const defaultSort = (_a = column.defaultSortOrder) !== null && _a !== void 0 ? _a : "asc";
             this.currentSort = {
                 column: index,
-                order: isSorted && ((_b = this.currentSort) === null || _b === void 0 ? void 0 : _b.order) === defaultSort ? this.getOppositeSortOrder(defaultSort) : defaultSort
+                order: isSorted && ((_b = this.currentSort) === null || _b === void 0 ? void 0 : _b.order) === defaultSort ? this.getOppositeSortOrder(defaultSort) : defaultSort,
             };
             this.dispatchChangeEvent();
         };
@@ -171,11 +171,11 @@ class FtdsTable extends FtLitElement {
         var _a, _b;
         return html `
             <tr class="row" role="row">
-                <td colspan=${this.columns.length} class="cell no-content" role="cell">
+                <td colspan="${this.columns.length}" class="cell no-content" role="cell">
                     ${((_a = this.emptyState) === null || _a === void 0 ? void 0 : _a.noImage) ? nothing : cactusSvg}
-                    <ft-typography variant="${FtTypographyVariants.body2medium}">
+                    <ftds-typography variant="${FtdsTypographyVariants.body2medium}">
                         ${(_b = this.emptyState) === null || _b === void 0 ? void 0 : _b.content}
-                    </ft-typography>
+                    </ftds-typography>
                 </td>
             </tr>
         `;
@@ -200,7 +200,7 @@ class FtdsTable extends FtLitElement {
         if (this.currentSort && !this.disableDataManipulation) {
             const column = this.columns[this.currentSort.column];
             const ascComparator = (_a = column.comparator) !== null && _a !== void 0 ? _a : FtdsTable.DEFAULT_COMPARATOR;
-            const comparator = this.currentSort.order === "asc" ? ascComparator : ((a, b) => -ascComparator(a, b));
+            const comparator = this.currentSort.order === "asc" ? ascComparator : (a, b) => -ascComparator(a, b);
             return [...data].sort((a, b) => comparator(this.getValue(column, a), this.getValue(column, b)));
         }
         return data;
@@ -218,7 +218,7 @@ class FtdsTable extends FtLitElement {
     }
     dispatchChangeEvent() {
         this.dispatchEvent(new FtdsTableChangeEvent({
-            sort: this.currentSort
+            sort: this.currentSort,
         }));
     }
     handleRowKeyDown(e, row) {

package/build/ftds-table.styles.js

@@ -1,7 +1,7 @@
 import { css } from "lit";
 import { table } from "@fluid-topics/design-system-variables";
 export { table as FtdsTableCssVariables } from "@fluid-topics/design-system-variables";
-//language=css
+// language=css
 export const designSystemStyles = css `
     :host {
         display: block;
@@ -118,17 +118,17 @@ export const designSystemStyles = css `
         position: relative;
     }
 
-    .cell:not(.no-content) ft-typography {
+    .cell:not(.no-content) ftds-typography {
         display: flex;
         flex-wrap: wrap;
         column-gap: ${table.dataCellVerticalGap};
     }
 
-    .cell--text-align-right ft-typography {
+    .cell--text-align-right ftds-typography {
         justify-content: flex-end;
     }
 
-    .cell--text-align-center ft-typography {
+    .cell--text-align-center ftds-typography {
         justify-content: center;
     }
 
@@ -154,7 +154,7 @@ export const designSystemStyles = css `
         padding: 24px;
     }
 
-    td.no-content > ft-typography {
+    td.no-content > ftds-typography {
         display: flex;
         justify-content: center;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-table",
-  "version": "1.3.45",
+  "version": "1.3.47",
   "description": "A dynamic table",
   "keywords": [
     "Lit"
@@ -23,11 +23,11 @@
   },
   "dependencies": {
     "@fluid-topics/design-system-variables": "2.53.1",
-    "@fluid-topics/ft-assets": "1.3.45",
-    "@fluid-topics/ft-button": "1.3.45",
-    "@fluid-topics/ft-typography": "1.3.45",
-    "@fluid-topics/ft-wc-utils": "1.3.45",
+    "@fluid-topics/ft-assets": "1.3.47",
+    "@fluid-topics/ft-button": "1.3.47",
+    "@fluid-topics/ft-typography": "1.3.47",
+    "@fluid-topics/ft-wc-utils": "1.3.47",
     "lit": "3.1.0"
   },
-  "gitHead": "3fd3d1375535575f012653afcbcb81dc3c25b7c7"
+  "gitHead": "16ac56d62f3a88a3b03cbc92bcd04dd91951a015"
 }