@fluid-topics/ft-table 1.2.30 → 1.2.32

package/build/ftds-table.d.ts

@@ -1,6 +1,4 @@
 import { nothing, PropertyValues, TemplateResult } from "lit";
-import "@fluid-topics/ft-select";
-import "@fluid-topics/ft-text-field";
 import "@fluid-topics/ft-button";
 import "@fluid-topics/ft-typography";
 import { FtdsTableProperties, Sort } from "./ftds-table.properties";

package/build/ftds-table.js

@@ -6,8 +6,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, nothing } from "lit";
 import { repeat } from "lit/directives/repeat.js";
-import "@fluid-topics/ft-select";
-import "@fluid-topics/ft-text-field";
 import "@fluid-topics/ft-button";
 import "@fluid-topics/ft-typography";
 import { FtdsTableChangeEvent } from "./ftds-table.properties";
@@ -43,10 +41,14 @@ class FtdsTable extends FtLitElement {
     }
     renderHeader(column, index) {
         var _a, _b;
-        const classes = {
+        const headerCellClasses = {
             "header-cell": true,
             "header-cell--sticky": this.stickyHeaders
         };
+        const columnTitleContainerClasses = {
+            "column-title-container": true,
+            ["column-title-container--text-align-" + column.textAlign]: true
+        };
         let ariaSort;
         if ((_a = column.sortable) !== null && _a !== void 0 ? _a : true) {
             if (((_b = this.currentSort) === null || _b === void 0 ? void 0 : _b.column) === index) {
@@ -57,13 +59,13 @@ class FtdsTable extends FtLitElement {
             }
         }
         return html `
-            <th class="${classMap(classes)}" role="columnheader" scope="col" aria-sort=${ariaSort !== null && ariaSort !== void 0 ? ariaSort : nothing}
+            <th class="${classMap(headerCellClasses)}" role="columnheader" scope="col" aria-sort=${ariaSort !== null && ariaSort !== void 0 ? ariaSort : nothing}
                  part="${this.columnPart("header-cell", index)}">
-                <div class="column-title-container"
+                <div class="${classMap(columnTitleContainerClasses)}"
                  part="${this.columnPart("title-container", index)}">
                     <span class="column-title"
                           part="${this.columnPart("title", index)}">
-                        <ft-typography variant="body-2-semibold">
+                        <ft-typography variant="caption-1-semibold">
                             ${column.title}
                         </ft-typography>
                     </span>
@@ -131,15 +133,19 @@ class FtdsTable extends FtLitElement {
     }
     renderCell(column, columnIndex, row, rowIndex) {
         var _a;
+        const classes = {
+            "cell": true,
+            ["cell--text-align-" + column.textAlign]: true
+        };
         const renderer = (_a = column.render) !== null && _a !== void 0 ? _a : FtdsTable.DEFAULT_RENDER;
         const render = (value) => {
             const rendered = renderer(value, rowIndex);
             return typeof rendered === "string" ? unsafeHTML(rendered) : rendered;
         };
         return html `
-            <td class="cell" role="cell"
+            <td class="${classMap(classes)}" role="cell"
                  part="${this.columnPart("cell", columnIndex)} cell-row-${rowIndex} cell-column-${columnIndex}-row-${rowIndex}">
-                <ft-typography variant="caption-2-medium">${render(this.getValue(column, row))}</ft-typography>
+                <ft-typography variant="caption-1-medium">${render(this.getValue(column, row))}</ft-typography>
             </td>
         `;
     }

package/build/ftds-table.properties.d.ts

@@ -1,5 +1,10 @@
 import { TemplateResult } from "lit";
 export type Getter<T> = (o: T) => any;
+export declare enum FtColumnAlignment {
+    left = "left",
+    center = "center",
+    right = "right"
+}
 export interface ColumnConfiguration<T> {
     title: string | TemplateResult;
     getter: string | Getter<T>;
@@ -8,6 +13,7 @@ export interface ColumnConfiguration<T> {
     defaultSortOrder?: "asc" | "desc";
     comparator?: (a: any, b: any) => number;
     gridTemplateColumn?: string;
+    textAlign?: FtColumnAlignment;
 }
 export interface Sort {
     column: number;

package/build/ftds-table.properties.js

@@ -1,3 +1,9 @@
+export var FtColumnAlignment;
+(function (FtColumnAlignment) {
+    FtColumnAlignment["left"] = "left";
+    FtColumnAlignment["center"] = "center";
+    FtColumnAlignment["right"] = "right";
+})(FtColumnAlignment || (FtColumnAlignment = {}));
 export class RowClickEvent extends CustomEvent {
     constructor(data) {
         super("row-click", { detail: data });

package/build/ftds-table.styles.js

@@ -55,7 +55,6 @@ export const designSystemStyles = css `
     }
 
     .header-cell {
-        gap: ${table.headerCellHorizontalGap};
         padding: ${table.headerCellVerticalPadding} ${table.headerCellHorizontalPadding};
         vertical-align: baseline;
     }
@@ -89,9 +88,19 @@ export const designSystemStyles = css `
 
     .column-title-container {
         display: flex;
+        row-gap: ${table.headerCellHorizontalGap};
         align-items: baseline;
     }
 
+    .column-title-container--text-align-right {
+        justify-content: flex-end;
+        margin-right: -.5rem;
+    }
+
+    .column-title-container--text-align-center {
+        justify-content: center;
+    }
+
     .column-title {
         white-space: normal;
         margin: 0 .5rem 0 0;
@@ -107,6 +116,19 @@ export const designSystemStyles = css `
         position: relative;
     }
 
+    .cell ft-typography {
+        display: flex;
+        column-gap: ${table.dataCellVerticalGap};
+    }
+
+    .cell--text-align-right ft-typography {
+        justify-content: flex-end;
+    }
+
+    .cell--text-align-center ft-typography {
+        justify-content: center;
+    }
+
     .row > .cell {
         border-bottom: ${table.dataRowBorderWidth} solid ${table.dataRowBorderColor};
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-table",
-  "version": "1.2.30",
+  "version": "1.2.32",
   "description": "A dynamic table",
   "keywords": [
     "Lit"
@@ -8,7 +8,7 @@
   "author": "Fluid Topics <devtopics@antidot.net>",
   "license": "ISC",
   "main": "build/index.js",
-  "web": "build/ft-filterable-table.min.js",
+  "web": "build/ftds-table.min.js",
   "typings": "build/index",
   "files": [
     "build/**/*.ts",
@@ -22,11 +22,11 @@
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "dependencies": {
-    "@fluid-topics/design-system-variables": "0.1.91",
-    "@fluid-topics/ft-button": "1.2.30",
-    "@fluid-topics/ft-typography": "1.2.30",
-    "@fluid-topics/ft-wc-utils": "1.2.30",
+    "@fluid-topics/design-system-variables": "0.1.92",
+    "@fluid-topics/ft-button": "1.2.32",
+    "@fluid-topics/ft-typography": "1.2.32",
+    "@fluid-topics/ft-wc-utils": "1.2.32",
     "lit": "3.1.0"
   },
-  "gitHead": "ac166f46dbdc65614893826ca64bbfc51e2e2b94"
+  "gitHead": "c769ac81850509ca28719724fc6721be863ba415"
 }