@ni/nimble-components 18.6.2 → 18.6.4

package/dist/esm/table/template.js

@@ -6,7 +6,13 @@ import { TableColumnSortDirection } from './types';
 // prettier-ignore
 export const template = html `
     <template role="table" ${children({ property: 'childItems', filter: elements() })}>
-        <div class="table-container">
+        <div class="table-container" style="
+            --ni-private-table-scroll-x: -${x => x.scrollX}px;
+            --ni-private-table-header-scrollbar-spacer-width: ${x => x.virtualizer.headerContainerMarginRight}px;
+            --ni-private-table-scroll-height: ${x => x.virtualizer.allRowsHeight}px;
+            --ni-private-table-row-container-top: ${x => x.virtualizer.rowContainerYOffset}px; 
+            --ni-private-table-row-grid-columns: ${x => x.rowGridColumns ?? ''}
+            ">
             <div role="rowgroup" class="header-container">
                 <div class="header-row" role="row">
                     ${repeat(x => x.columns, html `
@@ -20,12 +26,13 @@ export const template = html `
                             </${DesignSystem.tagFor(TableHeader)}>
                         `)}
                     `)}
-                    <div class="header-scrollbar-spacer" style="width: ${x => x.virtualizer.headerContainerMarginRight}px;"></div>
+                    <div class="header-scrollbar-spacer"></div>
                 </div>
             </div>
             <div class="table-viewport" ${ref('viewport')}>
-                <div class="table-scroll" style="height: ${x => x.virtualizer.allRowsHeight}px;"></div>
-                <div class="table-row-container" role="rowgroup" style="top: ${x => `${x.virtualizer.rowContainerYOffset}px;`}">
+                <div class="table-scroll"></div>
+                <div class="table-row-container" 
+                     role="rowgroup">
                     ${when(x => x.columns.length > 0 && x.canRenderRows, html `
                         ${repeat(x => x.virtualizer.visibleItems, html `
                             <${DesignSystem.tagFor(TableRow)}
@@ -35,7 +42,6 @@ export const template = html `
                                 :columns="${(_, c) => c.parent.columns}"
                                 @row-action-menu-beforetoggle="${(_, c) => c.parent.onRowActionMenuBeforeToggle(c.event)}"
                                 @row-action-menu-toggle="${(_, c) => c.parent.onRowActionMenuToggle(c.event)}"
-                                style="height: ${x => x.size}px;"
                             >
                             ${when((x, c) => c.parent.openActionMenuRecordId === c.parent.tableData[x.index]?.id, html `
                                 ${repeat((_, c) => c.parent.actionMenuSlots, html `

package/dist/esm/table/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/table/template.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/table/template.ts"],"names":[],"mappings":"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"}

package/dist/esm/table-column/base/index.d.ts

@@ -12,6 +12,34 @@ export declare abstract class TableColumn<TCellRecord extends TableCellRecord =
     columnHidden: boolean;
     sortIndex?: number | null;
     sortDirection: TableColumnSortDirection;
+    /**
+     * @internal
+     * Used by the Table in order to give a column a specific pixel width.
+     * When set 'currentFractionalWidth' will be ignored.
+     */
+    currentPixelWidth?: number;
+    /**
+     * @internal
+     * Used by the Table in order to size a column proportionally to the available
+     * width of a row.
+     */
+    currentFractionalWidth: number;
+    /**
+     * @internal
+     * Used by column plugins to set a specific pixel width. Sets currentPixelWidth when changed.
+     */
+    internalPixelWidth?: number;
+    /**
+     * @internal
+     * Used by column plugins to size a column proportionally to the available
+     * width of a row. Sets currentFractionalWidth when changed.
+     */
+    internalFractionalWidth: number;
+    /**
+     * @internal
+     * The minimum size in pixels according to the design doc
+     */
+    internalMinPixelWidth: number;
     /**
      * @internal
      *
@@ -67,4 +95,6 @@ export declare abstract class TableColumn<TCellRecord extends TableCellRecord =
      * @internal
      */
     connectedCallback(): void;
+    protected internalFractionalWidthChanged(): void;
+    protected internalPixelWidthChanged(): void;
 }

package/dist/esm/table-column/base/index.js

@@ -3,7 +3,7 @@ import { attr, nullableNumberConverter, observable } from '@microsoft/fast-eleme
 import { FoundationElement } from '@microsoft/fast-foundation';
 import { uniqueId } from '@microsoft/fast-web-utilities';
 import { TableColumnSortDirection } from '../../table/types';
-import { TableColumnSortOperation } from './types';
+import { defaultFractionalWidth, defaultMinPixelWidth, TableColumnSortOperation } from './types';
 /**
  * The base class for table columns
  */
@@ -12,6 +12,23 @@ export class TableColumn extends FoundationElement {
         super();
         this.columnHidden = false;
         this.sortDirection = TableColumnSortDirection.none;
+        /**
+         * @internal
+         * Used by the Table in order to size a column proportionally to the available
+         * width of a row.
+         */
+        this.currentFractionalWidth = defaultFractionalWidth;
+        /**
+         * @internal
+         * Used by column plugins to size a column proportionally to the available
+         * width of a row. Sets currentFractionalWidth when changed.
+         */
+        this.internalFractionalWidth = defaultFractionalWidth;
+        /**
+         * @internal
+         * The minimum size in pixels according to the design doc
+         */
+        this.internalMinPixelWidth = defaultMinPixelWidth;
         /**
          * @internal
          *
@@ -34,6 +51,12 @@ export class TableColumn extends FoundationElement {
         super.connectedCallback();
         this.setAttribute('slot', this.internalUniqueId);
     }
+    internalFractionalWidthChanged() {
+        this.currentFractionalWidth = this.internalFractionalWidth;
+    }
+    internalPixelWidthChanged() {
+        this.currentPixelWidth = this.internalPixelWidth;
+    }
 }
 __decorate([
     attr({ attribute: 'column-id' })
@@ -53,6 +76,21 @@ __decorate([
 __decorate([
     attr({ attribute: 'sort-direction' })
 ], TableColumn.prototype, "sortDirection", void 0);
+__decorate([
+    observable
+], TableColumn.prototype, "currentPixelWidth", void 0);
+__decorate([
+    observable
+], TableColumn.prototype, "currentFractionalWidth", void 0);
+__decorate([
+    observable
+], TableColumn.prototype, "internalPixelWidth", void 0);
+__decorate([
+    observable
+], TableColumn.prototype, "internalFractionalWidth", void 0);
+__decorate([
+    observable
+], TableColumn.prototype, "internalMinPixelWidth", void 0);
 __decorate([
     observable
 ], TableColumn.prototype, "dataRecordFieldNames", void 0);

package/dist/esm/table-column/base/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/base/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,IAAI,EAEJ,uBAAuB,EACvB,UAAU,EAEb,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,wBAAwB,EAAkB,MAAM,mBAAmB,CAAC;AAC7E,OAAO,EAGH,wBAAwB,EAC3B,MAAM,SAAS,CAAC;AAEjB;;GAEG;AACH,MAAM,OAAgB,WAGpB,SAAQ,iBAAiB;IAkFvB;QACI,KAAK,EAAE,CAAC;QAxEL,iBAAY,GAAG,KAAK,CAAC;QAMrB,kBAAa,GAA6B,wBAAwB,CAAC,IAAI,CAAC;QAyB/E;;;;;WAKG;QAEI,yBAAoB,GAA4C,EAAE,CAAC;QAkB1E;;;;WAIG;QAEI,kBAAa,GAA6B,wBAAwB,CAAC,KAAK,CAAC;QAW5E,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC,mBAAmB,CAAC,CAAC;IAC1D,CAAC;IAED;;OAEG;IACa,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACrD,CAAC;CACJ;AA7FG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;6CACR;AAGzB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;mDACT;AAG/B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;oDACT;AAGhC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;iDAC1B;AAG5B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;8CACrC;AAGjC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;kDACyC;AAgC/E;IADC,UAAU;yDAC+D;AAQ1E;IADC,UAAU;iDACyB;AAQpC;IADC,UAAU;+DACwC;AAQnD;IADC,UAAU;kDACqE"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/base/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,IAAI,EAEJ,uBAAuB,EACvB,UAAU,EAEb,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,wBAAwB,EAAkB,MAAM,mBAAmB,CAAC;AAC7E,OAAO,EACH,sBAAsB,EACtB,oBAAoB,EAGpB,wBAAwB,EAC3B,MAAM,SAAS,CAAC;AAEjB;;GAEG;AACH,MAAM,OAAgB,WAGpB,SAAQ,iBAAiB;IAwHvB;QACI,KAAK,EAAE,CAAC;QA9GL,iBAAY,GAAG,KAAK,CAAC;QAMrB,kBAAa,GAA6B,wBAAwB,CAAC,IAAI,CAAC;QAU/E;;;;WAIG;QAEI,2BAAsB,GAAG,sBAAsB,CAAC;QASvD;;;;WAIG;QAEI,4BAAuB,GAAG,sBAAsB,CAAC;QAExD;;;WAGG;QAEI,0BAAqB,GAAG,oBAAoB,CAAC;QAyBpD;;;;;WAKG;QAEI,yBAAoB,GAA4C,EAAE,CAAC;QAkB1E;;;;WAIG;QAEI,kBAAa,GAA6B,wBAAwB,CAAC,KAAK,CAAC;QAW5E,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC,mBAAmB,CAAC,CAAC;IAC1D,CAAC;IAED;;OAEG;IACa,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACrD,CAAC;IAES,8BAA8B;QACpC,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,uBAAuB,CAAC;IAC/D,CAAC;IAES,yBAAyB;QAC/B,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,kBAAkB,CAAC;IACrD,CAAC;CACJ;AA3IG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;6CACR;AAGzB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;mDACT;AAG/B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;oDACT;AAGhC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;iDAC1B;AAG5B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;8CACrC;AAGjC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;kDACyC;AAQ/E;IADC,UAAU;sDACuB;AAQlC;IADC,UAAU;2DAC4C;AAOvD;IADC,UAAU;uDACwB;AAQnC;IADC,UAAU;4DAC6C;AAOxD;IADC,UAAU;0DACyC;AAgCpD;IADC,UAAU;yDAC+D;AAQ1E;IADC,UAAU;iDACyB;AAQpC;IADC,UAAU;+DACwC;AAQnD;IADC,UAAU;kDACqE"}

package/dist/esm/table-column/base/styles.js

@@ -3,5 +3,11 @@ export const styles = css `
     :host {
         display: contents;
     }
+
+    .header-content {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/esm/table-column/base/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/table-column/base/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;CAIxB,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/table-column/base/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;CAUxB,CAAC"}

package/dist/esm/table-column/base/template.js

@@ -1,7 +1,9 @@
 import { html } from '@microsoft/fast-element';
 export const template = html `
     <template>
-        <slot></slot>
+        <span class="header-content">
+            <slot></slot>
+        </span>
     </template>
 `;
 //# sourceMappingURL=template.js.map

package/dist/esm/table-column/base/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/table-column/base/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAA;;;;CAI3B,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/table-column/base/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAA;;;;;;CAM3B,CAAC"}

package/dist/esm/table-column/base/types.d.ts

@@ -24,3 +24,5 @@ export declare const TableColumnSortOperation: {
     readonly localeAwareCaseSensitive: "localeAwareCaseSensitive";
 };
 export declare type TableColumnSortOperation = (typeof TableColumnSortOperation)[keyof typeof TableColumnSortOperation];
+export declare const defaultMinPixelWidth = 88;
+export declare const defaultFractionalWidth = 1;

package/dist/esm/table-column/base/types.js

@@ -12,4 +12,6 @@ export const TableColumnSortOperation = {
      */
     localeAwareCaseSensitive: 'localeAwareCaseSensitive'
 };
+export const defaultMinPixelWidth = 88;
+export const defaultFractionalWidth = 1;
 //# sourceMappingURL=types.js.map

package/dist/esm/table-column/base/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/table-column/base/types.ts"],"names":[],"mappings":"AAiBA;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACpC;;OAEG;IACH,KAAK,EAAE,OAAO;IACd;;;OAGG;IACH,wBAAwB,EAAE,0BAA0B;CAC9C,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/table-column/base/types.ts"],"names":[],"mappings":"AAiBA;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACpC;;OAEG;IACH,KAAK,EAAE,OAAO;IACd;;;OAGG;IACH,wBAAwB,EAAE,0BAA0B;CAC9C,CAAC;AAIX,MAAM,CAAC,MAAM,oBAAoB,GAAG,EAAE,CAAC;AAEvC,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,CAAC"}

package/dist/esm/table-column/mixins/fractional-width-column.d.ts

@@ -0,0 +1,12 @@
+import type { TableColumn } from '../base';
+declare type SizedTableColumn = Pick<TableColumn, 'internalFractionalWidth' | 'internalMinPixelWidth'>;
+declare type SizedTableColumnConstructor = abstract new (...args: any[]) => SizedTableColumn;
+export declare function mixinFractionalWidthColumnAPI<TBase extends SizedTableColumnConstructor>(base: TBase): (abstract new (...args: any[]) => {
+    fractionalWidth?: number | null | undefined;
+    minPixelWidth?: number | null | undefined;
+    fractionalWidthChanged(): void;
+    minPixelWidthChanged(): void;
+    internalFractionalWidth: number;
+    internalMinPixelWidth: number;
+}) & TBase;
+export {};

package/dist/esm/table-column/mixins/fractional-width-column.js

@@ -0,0 +1,41 @@
+import { attr, nullableNumberConverter } from '@microsoft/fast-element';
+import { defaultMinPixelWidth, defaultFractionalWidth } from '../base/types';
+// As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
+export function mixinFractionalWidthColumnAPI(base) {
+    /**
+     * The Mixin that provides a concrete column with the API to support being resized
+     * proportionally within a Table.
+     */
+    class FractionalWidthColumn extends base {
+        constructor() {
+            super(...arguments);
+            this.fractionalWidth = defaultFractionalWidth;
+            this.minPixelWidth = defaultMinPixelWidth;
+        }
+        fractionalWidthChanged() {
+            if (typeof this.fractionalWidth === 'number') {
+                this.internalFractionalWidth = this.fractionalWidth;
+            }
+            else {
+                this.internalFractionalWidth = defaultFractionalWidth;
+            }
+        }
+        minPixelWidthChanged() {
+            if (typeof this.minPixelWidth === 'number') {
+                this.internalMinPixelWidth = this.minPixelWidth;
+            }
+            else {
+                this.internalMinPixelWidth = defaultMinPixelWidth;
+            }
+        }
+    }
+    attr({ attribute: 'fractional-width', converter: nullableNumberConverter })(
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    FractionalWidthColumn.prototype, 'fractionalWidth');
+    attr({ attribute: 'min-pixel-width', converter: nullableNumberConverter })(
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    FractionalWidthColumn.prototype, 'minPixelWidth');
+    return FractionalWidthColumn;
+}
+//# sourceMappingURL=fractional-width-column.js.map

package/dist/esm/table-column/mixins/fractional-width-column.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fractional-width-column.js","sourceRoot":"","sources":["../../../../src/table-column/mixins/fractional-width-column.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAExE,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAW7E,4HAA4H;AAC5H,+HAA+H;AAC/H,MAAM,UAAU,6BAA6B,CAE3C,IAAW;IACT;;;OAGG;IACH,MAAe,qBAAsB,SAAQ,IAAI;QAAjD;;YACW,oBAAe,GAAmB,sBAAsB,CAAC;YAEzD,kBAAa,GAAmB,oBAAoB,CAAC;QAiBhE,CAAC;QAfU,sBAAsB;YACzB,IAAI,OAAO,IAAI,CAAC,eAAe,KAAK,QAAQ,EAAE;gBAC1C,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,eAAe,CAAC;aACvD;iBAAM;gBACH,IAAI,CAAC,uBAAuB,GAAG,sBAAsB,CAAC;aACzD;QACL,CAAC;QAEM,oBAAoB;YACvB,IAAI,OAAO,IAAI,CAAC,aAAa,KAAK,QAAQ,EAAE;gBACxC,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,aAAa,CAAC;aACnD;iBAAM;gBACH,IAAI,CAAC,qBAAqB,GAAG,oBAAoB,CAAC;aACrD;QACL,CAAC;KACJ;IAED,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;IACvE,iEAAiE;IACjE,qBAAqB,CAAC,SAAS,EAC/B,iBAAiB,CACpB,CAAC;IACF,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;IACtE,iEAAiE;IACjE,qBAAqB,CAAC,SAAS,EAC/B,eAAe,CAClB,CAAC;IACF,OAAO,qBAAqB,CAAC;AACjC,CAAC"}

package/dist/esm/table-column/text/index.d.ts

@@ -10,9 +10,9 @@ declare global {
     }
 }
 /**
- * The table column for displaying strings.
+ * The base class for a table column for displaying strings.
  */
-export declare class TableColumnText extends TableColumn<TableColumnTextCellRecord, TableColumnTextColumnConfig> {
+declare class TableColumnTextBase extends TableColumn<TableColumnTextCellRecord, TableColumnTextColumnConfig> {
     cellRecordFieldNames: readonly ["value"];
     fieldName?: string;
     placeholder?: string;
@@ -22,4 +22,18 @@ export declare class TableColumnText extends TableColumn<TableColumnTextCellReco
     protected fieldNameChanged(): void;
     protected placeholderChanged(): void;
 }
+declare const TableColumnText_base: (abstract new (...args: any[]) => {
+    fractionalWidth?: number | null | undefined;
+    minPixelWidth?: number | null | undefined;
+    fractionalWidthChanged(): void;
+    minPixelWidthChanged(): void;
+    internalFractionalWidth: number;
+    internalMinPixelWidth: number;
+}) & typeof TableColumnTextBase;
+/**
+ * The table column for displaying strings.
+ */
+export declare class TableColumnText extends TableColumnText_base {
+}
 export declare const tableColumnTextTag: string;
+export {};

package/dist/esm/table-column/text/index.js

@@ -1,16 +1,18 @@
 import { __decorate } from "tslib";
-import { attr } from '@microsoft/fast-element';
+/* eslint-disable max-classes-per-file */
 import { DesignSystem } from '@microsoft/fast-foundation';
-import { TableColumnSortOperation } from '../base/types';
-import { TableColumn } from '../base';
+import { attr } from '@microsoft/fast-element';
 import { styles } from '../base/styles';
 import { template } from '../base/template';
+import { mixinFractionalWidthColumnAPI } from '../mixins/fractional-width-column';
+import { TableColumn } from '../base';
+import { TableColumnSortOperation } from '../base/types';
 import { cellStyles } from './styles';
 import { cellTemplate } from './template';
 /**
- * The table column for displaying strings.
+ * The base class for a table column for displaying strings.
  */
-export class TableColumnText extends TableColumn {
+class TableColumnTextBase extends TableColumn {
     constructor() {
         super();
         this.cellRecordFieldNames = ['value'];
@@ -28,10 +30,15 @@ export class TableColumnText extends TableColumn {
 }
 __decorate([
     attr({ attribute: 'field-name' })
-], TableColumnText.prototype, "fieldName", void 0);
+], TableColumnTextBase.prototype, "fieldName", void 0);
 __decorate([
     attr
-], TableColumnText.prototype, "placeholder", void 0);
+], TableColumnTextBase.prototype, "placeholder", void 0);
+/**
+ * The table column for displaying strings.
+ */
+export class TableColumnText extends mixinFractionalWidthColumnAPI(TableColumnTextBase) {
+}
 const nimbleTableColumnText = TableColumnText.compose({
     baseName: 'table-column-text',
     template,

package/dist/esm/table-column/text/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/text/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAa1C;;GAEG;AACH,MAAM,OAAO,eAAgB,SAAQ,WAGpC;IAaG;QACI,KAAK,EAAE,CAAC;QAbL,yBAAoB,GAAG,CAAC,OAAO,CAAU,CAAC;QAQjC,eAAU,GAAG,UAAU,CAAC;QAExB,iBAAY,GAAG,YAAY,CAAC;QAIxC,IAAI,CAAC,aAAa,GAAG,wBAAwB,CAAC,wBAAwB,CAAC;IAC3E,CAAC;IAES,gBAAgB;QACtB,IAAI,CAAC,oBAAoB,GAAG,CAAC,IAAI,CAAC,SAAS,CAAU,CAAC;QACtD,IAAI,CAAC,0BAA0B,GAAG,IAAI,CAAC,SAAS,CAAC;IACrD,CAAC;IAES,kBAAkB;QACxB,IAAI,CAAC,YAAY,GAAG,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,IAAI,EAAE,EAAE,CAAC;IAChE,CAAC;CACJ;AAtBG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;kDACR;AAG1B;IADC,IAAI;oDACuB;AAqBhC,MAAM,qBAAqB,GAAG,eAAe,CAAC,OAAO,CAAC;IAClD,QAAQ,EAAE,mBAAmB;IAC7B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,qBAAqB,EAAE,CAAC,CAAC;AACvC,MAAM,CAAC,MAAM,kBAAkB,GAAG,YAAY,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/text/index.ts"],"names":[],"mappings":";AAAA,yCAAyC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,6BAA6B,EAAE,MAAM,mCAAmC,CAAC;AAElF,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAa1C;;GAEG;AACH,MAAM,mBAAoB,SAAQ,WAGjC;IAaG;QACI,KAAK,EAAE,CAAC;QAbL,yBAAoB,GAAG,CAAC,OAAO,CAAU,CAAC;QAQjC,eAAU,GAAG,UAAU,CAAC;QAExB,iBAAY,GAAG,YAAY,CAAC;QAIxC,IAAI,CAAC,aAAa,GAAG,wBAAwB,CAAC,wBAAwB,CAAC;IAC3E,CAAC;IAES,gBAAgB;QACtB,IAAI,CAAC,oBAAoB,GAAG,CAAC,IAAI,CAAC,SAAS,CAAU,CAAC;QACtD,IAAI,CAAC,0BAA0B,GAAG,IAAI,CAAC,SAAS,CAAC;IACrD,CAAC;IAES,kBAAkB;QACxB,IAAI,CAAC,YAAY,GAAG,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,IAAI,EAAE,EAAE,CAAC;IAChE,CAAC;CACJ;AAtBG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;sDACR;AAG1B;IADC,IAAI;wDACuB;AAqBhC;;GAEG;AACH,MAAM,OAAO,eAAgB,SAAQ,6BAA6B,CAC9D,mBAAmB,CACtB;CAAG;AAEJ,MAAM,qBAAqB,GAAG,eAAe,CAAC,OAAO,CAAC;IAClD,QAAQ,EAAE,mBAAmB;IAC7B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,qBAAqB,EAAE,CAAC,CAAC;AACvC,MAAM,CAAC,MAAM,kBAAkB,GAAG,YAAY,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "18.6.2",
+  "version": "18.6.4",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",