@ni/nimble-components 20.1.13 → 20.1.15

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

@@ -7,9 +7,10 @@ import { TableColumnTextBase } from '../text-base';
 import { TableColumnSortOperation } from '../base/types';
 import { tableColumnNumberTextGroupHeaderTag } from './group-header-view';
 import { tableColumnNumberTextCellViewTag } from './cell-view';
-import { NumberTextFormat } from './types';
+import { NumberTextAlignment, NumberTextFormat } from './types';
 import { RoundToIntegerFormatter } from './models/round-to-integer-formatter';
 import { DefaultFormatter } from './models/default-formatter';
+import { TextCellViewBaseAlignment } from '../text-base/cell-view/types';
 /**
  * The table column for displaying numbers as text.
  */
@@ -30,9 +31,13 @@ export class TableColumnNumberText extends TableColumnTextBase {
     formatChanged() {
         this.updateColumnConfig();
     }
+    alignmentChanged() {
+        this.updateColumnConfig();
+    }
     updateColumnConfig() {
         const columnConfig = {
-            formatter: this.createFormatter()
+            formatter: this.createFormatter(),
+            alignment: this.determineCellContentAlignment()
         };
         this.columnInternals.columnConfig = columnConfig;
     }
@@ -44,10 +49,26 @@ export class TableColumnNumberText extends TableColumnTextBase {
                 return new DefaultFormatter();
         }
     }
+    determineCellContentAlignment() {
+        if (this.alignment === NumberTextAlignment.left) {
+            return TextCellViewBaseAlignment.left;
+        }
+        if (this.alignment === NumberTextAlignment.right) {
+            return TextCellViewBaseAlignment.right;
+        }
+        // Look at format to determine the default alignment
+        if (this.format === NumberTextFormat.roundToInteger) {
+            return TextCellViewBaseAlignment.right;
+        }
+        return TextCellViewBaseAlignment.left;
+    }
 }
 __decorate([
     attr
 ], TableColumnNumberText.prototype, "format", void 0);
+__decorate([
+    attr
+], TableColumnNumberText.prototype, "alignment", void 0);
 const nimbleTableColumnNumberText = TableColumnNumberText.compose({
     baseName: 'table-column-number-text',
     template,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/number-text/index.ts"],"names":[],"mappings":";AAAA,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;AAE5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,mCAAmC,EAAE,MAAM,qBAAqB,CAAC;AAC1E,OAAO,EAAE,gCAAgC,EAAE,MAAM,aAAa,CAAC;AAE/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAa9D;;GAEG;AACH,MAAM,OAAO,qBAAsB,SAAQ,mBAAmB;IAI1C,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC9B,CAAC;IAEkB,yBAAyB;QACxC,OAAO;YACH,oBAAoB,EAAE,CAAC,OAAO,CAAC;YAC/B,WAAW,EAAE,gCAAgC;YAC7C,kBAAkB,EAAE,mCAAmC;YACvD,eAAe,EAAE,EAAE;YACnB,aAAa,EAAE,wBAAwB,CAAC,KAAK;SAChD,CAAC;IACN,CAAC;IAEO,aAAa;QACjB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC9B,CAAC;IAEO,kBAAkB;QACtB,MAAM,YAAY,GAAsC;YACpD,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE;SACpC,CAAC;QACF,IAAI,CAAC,eAAe,CAAC,YAAY,GAAG,YAAY,CAAC;IACrD,CAAC;IAEO,eAAe;QACnB,QAAQ,IAAI,CAAC,MAAM,EAAE;YACjB,KAAK,gBAAgB,CAAC,cAAc;gBAChC,OAAO,IAAI,uBAAuB,EAAE,CAAC;YACzC;gBACI,OAAO,IAAI,gBAAgB,EAAE,CAAC;SACrC;IACL,CAAC;CACJ;AApCG;IADC,IAAI;qDAC2B;AAsCpC,MAAM,2BAA2B,GAAG,qBAAqB,CAAC,OAAO,CAAC;IAC9D,QAAQ,EAAE,0BAA0B;IACpC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,2BAA2B,EAAE,CAAC,CAAC;AAC7C,MAAM,CAAC,MAAM,wBAAwB,GAAG,YAAY,CAAC,MAAM,CACvD,qBAAqB,CACxB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/number-text/index.ts"],"names":[],"mappings":";AAAA,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;AAE5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,mCAAmC,EAAE,MAAM,qBAAqB,CAAC;AAC1E,OAAO,EAAE,gCAAgC,EAAE,MAAM,aAAa,CAAC;AAE/D,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhE,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAczE;;GAEG;AACH,MAAM,OAAO,qBAAsB,SAAQ,mBAAmB;IAO1C,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC9B,CAAC;IAEkB,yBAAyB;QACxC,OAAO;YACH,oBAAoB,EAAE,CAAC,OAAO,CAAC;YAC/B,WAAW,EAAE,gCAAgC;YAC7C,kBAAkB,EAAE,mCAAmC;YACvD,eAAe,EAAE,EAAE;YACnB,aAAa,EAAE,wBAAwB,CAAC,KAAK;SAChD,CAAC;IACN,CAAC;IAEO,aAAa;QACjB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC9B,CAAC;IAEO,gBAAgB;QACpB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC9B,CAAC;IAEO,kBAAkB;QACtB,MAAM,YAAY,GAAsC;YACpD,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE;YACjC,SAAS,EAAE,IAAI,CAAC,6BAA6B,EAAE;SAClD,CAAC;QACF,IAAI,CAAC,eAAe,CAAC,YAAY,GAAG,YAAY,CAAC;IACrD,CAAC;IAEO,eAAe;QACnB,QAAQ,IAAI,CAAC,MAAM,EAAE;YACjB,KAAK,gBAAgB,CAAC,cAAc;gBAChC,OAAO,IAAI,uBAAuB,EAAE,CAAC;YACzC;gBACI,OAAO,IAAI,gBAAgB,EAAE,CAAC;SACrC;IACL,CAAC;IAEO,6BAA6B;QACjC,IAAI,IAAI,CAAC,SAAS,KAAK,mBAAmB,CAAC,IAAI,EAAE;YAC7C,OAAO,yBAAyB,CAAC,IAAI,CAAC;SACzC;QAED,IAAI,IAAI,CAAC,SAAS,KAAK,mBAAmB,CAAC,KAAK,EAAE;YAC9C,OAAO,yBAAyB,CAAC,KAAK,CAAC;SAC1C;QAED,oDAAoD;QACpD,IAAI,IAAI,CAAC,MAAM,KAAK,gBAAgB,CAAC,cAAc,EAAE;YACjD,OAAO,yBAAyB,CAAC,KAAK,CAAC;SAC1C;QACD,OAAO,yBAAyB,CAAC,IAAI,CAAC;IAC1C,CAAC;CACJ;AA5DG;IADC,IAAI;qDAC2B;AAGhC;IADC,IAAI;wDACiC;AA2D1C,MAAM,2BAA2B,GAAG,qBAAqB,CAAC,OAAO,CAAC;IAC9D,QAAQ,EAAE,0BAA0B;IACpC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,2BAA2B,EAAE,CAAC,CAAC;AAC7C,MAAM,CAAC,MAAM,wBAAwB,GAAG,YAAY,CAAC,MAAM,CACvD,qBAAqB,CACxB,CAAC"}

package/dist/esm/table-column/number-text/types.d.ts

@@ -6,3 +6,13 @@ export declare const NumberTextFormat: {
     readonly roundToInteger: "round-to-integer";
 };
 export declare type NumberTextFormat = (typeof NumberTextFormat)[keyof typeof NumberTextFormat];
+/**
+ * The aligment of the value in the number-text table column.
+ * The `default` alignment is determined by the column's `NumberTextFormat`.
+ */
+export declare const NumberTextAlignment: {
+    readonly default: undefined;
+    readonly left: "left";
+    readonly right: "right";
+};
+export declare type NumberTextAlignment = (typeof NumberTextAlignment)[keyof typeof NumberTextAlignment];

package/dist/esm/table-column/number-text/types.js

@@ -5,4 +5,13 @@ export const NumberTextFormat = {
     default: undefined,
     roundToInteger: 'round-to-integer'
 };
+/**
+ * The aligment of the value in the number-text table column.
+ * The `default` alignment is determined by the column's `NumberTextFormat`.
+ */
+export const NumberTextAlignment = {
+    default: undefined,
+    left: 'left',
+    right: 'right'
+};
 //# sourceMappingURL=types.js.map

package/dist/esm/table-column/number-text/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/table-column/number-text/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,OAAO,EAAE,SAAS;IAClB,cAAc,EAAE,kBAAkB;CAC5B,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/table-column/number-text/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,OAAO,EAAE,SAAS;IAClB,cAAc,EAAE,kBAAkB;CAC5B,CAAC;AAIX;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;IAC/B,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;CACR,CAAC"}

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

@@ -1,5 +1,6 @@
 import { TableCellView } from '../../base/cell-view';
 import type { TableCellRecord } from '../../base/types';
+import { TextCellViewBaseAlignment } from './types';
 /**
  * The cell view base class for displaying fields of any type as text.
  */
@@ -10,4 +11,8 @@ export declare abstract class TableColumnTextCellViewBase<TCellRecord extends Ta
      * Text to render in the cell.
      */
     text: string;
+    /**
+     * The alignment of the text within the cell.
+     */
+    alignment: TextCellViewBaseAlignment;
 }

package/dist/esm/table-column/text-base/cell-view/index.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { observable } from '@microsoft/fast-element';
 import { TableCellView } from '../../base/cell-view';
+import { TextCellViewBaseAlignment } from './types';
 /**
  * The cell view base class for displaying fields of any type as text.
  */
@@ -13,6 +14,10 @@ export class TableColumnTextCellViewBase extends TableCellView {
          * Text to render in the cell.
          */
         this.text = '';
+        /**
+         * The alignment of the text within the cell.
+         */
+        this.alignment = TextCellViewBaseAlignment.left;
     }
 }
 __decorate([
@@ -21,4 +26,7 @@ __decorate([
 __decorate([
     observable
 ], TableColumnTextCellViewBase.prototype, "text", void 0);
+__decorate([
+    observable
+], TableColumnTextCellViewBase.prototype, "alignment", void 0);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/text-base/cell-view/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAGrD;;GAEG;AACH,MAAM,OAAgB,2BAGpB,SAAQ,aAAyC;IAHnD;;QAII,gBAAgB;QAET,gBAAW,GAAG,KAAK,CAAC;QAE3B;;WAEG;QAEI,SAAI,GAAG,EAAE,CAAC;IACrB,CAAC;CAAA;AAPG;IADC,UAAU;gEACgB;AAM3B;IADC,UAAU;yDACM"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/text-base/cell-view/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAEpD;;GAEG;AACH,MAAM,OAAgB,2BAGpB,SAAQ,aAAyC;IAHnD;;QAII,gBAAgB;QAET,gBAAW,GAAG,KAAK,CAAC;QAE3B;;WAEG;QAEI,SAAI,GAAG,EAAE,CAAC;QAEjB;;WAEG;QAEI,cAAS,GAA8B,yBAAyB,CAAC,IAAI,CAAC;IACjF,CAAC;CAAA;AAbG;IADC,UAAU;gEACgB;AAM3B;IADC,UAAU;yDACM;AAMjB;IADC,UAAU;8DACkE"}

package/dist/esm/table-column/text-base/cell-view/styles.js

@@ -1,6 +1,10 @@
 import { css } from '@microsoft/fast-element';
 import { bodyFont, bodyFontColor } from '../../../theme-provider/design-tokens';
 export const styles = css `
+    :host(.right-align) {
+        margin-left: auto;
+    }
+
     span {
         font: ${bodyFont};
         color: ${bodyFontColor};

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table-column/text-base/cell-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAEhF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;gBAET,QAAQ;iBACP,aAAa;;;;;CAK7B,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table-column/text-base/cell-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAEhF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;gBAMT,QAAQ;iBACP,aAAa;;;;;CAK7B,CAAC"}

package/dist/esm/table-column/text-base/cell-view/template.js

@@ -1,11 +1,18 @@
 import { html } from '@microsoft/fast-element';
 import { overflow } from '../../../utilities/directive/overflow';
+import { TextCellViewBaseAlignment } from './types';
 export const template = html `
-    <span
-        ${overflow('hasOverflow')}
-        title=${x => (x.hasOverflow && x.text ? x.text : null)}
+    <template
+        class="${x => (x.alignment === TextCellViewBaseAlignment.right
+    ? 'right-align'
+    : '')}"
     >
-        ${x => x.text}
-    </span>
+        <span
+            ${overflow('hasOverflow')}
+            title=${x => (x.hasOverflow && x.text ? x.text : null)}
+        >
+            ${x => x.text}
+        </span>
+    </template>
 `;
 //# sourceMappingURL=template.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table-column/text-base/cell-view/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AAEjE,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAA6B;;UAE/C,QAAQ,CAAC,aAAa,CAAC;gBACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;;UAEpD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;;CAEpB,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table-column/text-base/cell-view/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAEpD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAA6B;;iBAExC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,KAAK,yBAAyB,CAAC,KAAK;IAC9D,CAAC,CAAC,aAAa;IACf,CAAC,CAAC,EAAE,CAAC;;;cAGC,QAAQ,CAAC,aAAa,CAAC;oBACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;;cAEpD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;;;CAGxB,CAAC"}

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

@@ -0,0 +1,8 @@
+/**
+ * The aligment of the value in a TableColumnTextCellViewBase instance.
+ */
+export declare const TextCellViewBaseAlignment: {
+    readonly left: "left";
+    readonly right: "right";
+};
+export declare type TextCellViewBaseAlignment = (typeof TextCellViewBaseAlignment)[keyof typeof TextCellViewBaseAlignment];

package/dist/esm/table-column/text-base/cell-view/types.js

@@ -0,0 +1,8 @@
+/**
+ * The aligment of the value in a TableColumnTextCellViewBase instance.
+ */
+export const TextCellViewBaseAlignment = {
+    left: 'left',
+    right: 'right'
+};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/table-column/text-base/cell-view/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACrC,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;CACR,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "20.1.13",
+  "version": "20.1.15",
   "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",