@ni/nimble-components 24.1.14 → 25.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/README.md +7 -0
  2. package/dist/all-components-bundle.js +236 -180
  3. package/dist/all-components-bundle.js.map +1 -1
  4. package/dist/all-components-bundle.min.js +446 -421
  5. package/dist/all-components-bundle.min.js.map +1 -1
  6. package/dist/esm/mapping/icon/index.d.ts +1 -0
  7. package/dist/esm/mapping/icon/index.js +7 -0
  8. package/dist/esm/mapping/icon/index.js.map +1 -1
  9. package/dist/esm/mapping/spinner/index.d.ts +1 -0
  10. package/dist/esm/mapping/spinner/index.js +7 -0
  11. package/dist/esm/mapping/spinner/index.js.map +1 -1
  12. package/dist/esm/src/mapping/icon/index.d.ts +1 -0
  13. package/dist/esm/src/mapping/spinner/index.d.ts +1 -0
  14. package/dist/esm/src/table/testing/table.pageobject.d.ts +4 -4
  15. package/dist/esm/src/table-column/enum-base/models/mapping-icon-config.d.ts +3 -1
  16. package/dist/esm/src/table-column/enum-base/models/mapping-spinner-config.d.ts +8 -1
  17. package/dist/esm/src/table-column/icon/cell-view/index.d.ts +6 -3
  18. package/dist/esm/src/table-column/icon/cell-view/styles.d.ts +1 -0
  19. package/dist/esm/src/table-column/icon/group-header-view/index.d.ts +4 -3
  20. package/dist/esm/src/table-column/icon/testing/table-column-icon.pageobject.d.ts +23 -0
  21. package/dist/esm/table/testing/table.pageobject.d.ts +4 -4
  22. package/dist/esm/table/testing/table.pageobject.js +15 -37
  23. package/dist/esm/table/testing/table.pageobject.js.map +1 -1
  24. package/dist/esm/table-column/enum-base/models/mapping-icon-config.d.ts +3 -1
  25. package/dist/esm/table-column/enum-base/models/mapping-icon-config.js +4 -3
  26. package/dist/esm/table-column/enum-base/models/mapping-icon-config.js.map +1 -1
  27. package/dist/esm/table-column/enum-base/models/mapping-spinner-config.d.ts +8 -1
  28. package/dist/esm/table-column/enum-base/models/mapping-spinner-config.js +13 -1
  29. package/dist/esm/table-column/enum-base/models/mapping-spinner-config.js.map +1 -1
  30. package/dist/esm/table-column/icon/cell-view/index.d.ts +6 -3
  31. package/dist/esm/table-column/icon/cell-view/index.js +19 -7
  32. package/dist/esm/table-column/icon/cell-view/index.js.map +1 -1
  33. package/dist/esm/table-column/icon/cell-view/styles.d.ts +1 -0
  34. package/dist/esm/table-column/icon/cell-view/styles.js +27 -0
  35. package/dist/esm/table-column/icon/cell-view/styles.js.map +1 -0
  36. package/dist/esm/table-column/icon/cell-view/template.js +15 -8
  37. package/dist/esm/table-column/icon/cell-view/template.js.map +1 -1
  38. package/dist/esm/table-column/icon/group-header-view/index.d.ts +4 -3
  39. package/dist/esm/table-column/icon/group-header-view/index.js +8 -8
  40. package/dist/esm/table-column/icon/group-header-view/index.js.map +1 -1
  41. package/dist/esm/table-column/icon/group-header-view/styles.js +5 -3
  42. package/dist/esm/table-column/icon/group-header-view/styles.js.map +1 -1
  43. package/dist/esm/table-column/icon/group-header-view/template.js +10 -24
  44. package/dist/esm/table-column/icon/group-header-view/template.js.map +1 -1
  45. package/dist/esm/table-column/icon/index.js +2 -2
  46. package/dist/esm/table-column/icon/index.js.map +1 -1
  47. package/dist/esm/table-column/icon/testing/table-column-icon.pageobject.d.ts +23 -0
  48. package/dist/esm/table-column/icon/testing/table-column-icon.pageobject.js +79 -0
  49. package/dist/esm/table-column/icon/testing/table-column-icon.pageobject.js.map +1 -0
  50. package/package.json +1 -1
@@ -4,12 +4,14 @@ import { MappingConfig } from './mapping-config';
4
4
  export interface IconView {
5
5
  severity: IconSeverity;
6
6
  text?: string;
7
+ textHidden: boolean;
7
8
  }
8
9
  /**
9
10
  * Mapping configuration corresponding to a icon mapping
10
11
  */
11
12
  export declare class MappingIconConfig extends MappingConfig {
12
13
  readonly severity: IconSeverity;
14
+ readonly textHidden: boolean;
13
15
  readonly iconTemplate: ViewTemplate<IconView>;
14
- constructor(resolvedIcon: string | undefined, severity: IconSeverity, text: string | undefined);
16
+ constructor(resolvedIcon: string | undefined, severity: IconSeverity, text: string | undefined, textHidden: boolean);
15
17
  }
@@ -10,11 +10,11 @@ const createIconTemplate = (icon) => {
10
10
  }
11
11
  return html `
12
12
  <${icon}
13
- title="${x => x.text}"
13
+ title="${x => (x.textHidden ? x.text : '')}"
14
14
  role="img"
15
15
  aria-label="${x => x.text}"
16
+ aria-hidden="${x => (x.textHidden ? 'false' : 'true')}"
16
17
  severity="${x => x.severity}"
17
- class="no-shrink"
18
18
  >
19
19
  </${icon}>
20
20
  `;
@@ -23,9 +23,10 @@ const createIconTemplate = (icon) => {
23
23
  * Mapping configuration corresponding to a icon mapping
24
24
  */
25
25
  export class MappingIconConfig extends MappingConfig {
26
- constructor(resolvedIcon, severity, text) {
26
+ constructor(resolvedIcon, severity, text, textHidden) {
27
27
  super(text);
28
28
  this.severity = severity;
29
+ this.textHidden = textHidden;
29
30
  this.iconTemplate = createIconTemplate(resolvedIcon);
30
31
  }
31
32
  }
@@ -1 +1 @@
1
- {"version":3,"file":"mapping-icon-config.js","sourceRoot":"","sources":["../../../../../src/table-column/enum-base/models/mapping-icon-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAqB,MAAM,yBAAyB,CAAC;AAElE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAOjD,mFAAmF;AACnF,uDAAuD;AACvD,kBAAkB;AAClB,MAAM,aAAa,GAAG,IAAI,CAAU,GAAG,CAAC;AAExC,MAAM,kBAAkB,GAAG,CACvB,IAAwB,EACF,EAAE;IACxB,IAAI,IAAI,KAAK,SAAS,EAAE;QACpB,OAAO,aAAa,CAAC;KACxB;IAED,OAAO,IAAI,CAAA;WACJ,IAAI;qBACM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;;0BAEN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;wBACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;;YAG3B,IAAI;KACX,CAAC;AACN,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,aAAa;IAEhD,YACI,YAAgC,EAChB,QAAsB,EACtC,IAAwB;QAExB,KAAK,CAAC,IAAI,CAAC,CAAC;QAHI,aAAQ,GAAR,QAAQ,CAAc;QAItC,IAAI,CAAC,YAAY,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IACzD,CAAC;CACJ","sourcesContent":["import { html, type ViewTemplate } from '@microsoft/fast-element';\nimport type { IconSeverity } from '../../../icon-base/types';\nimport { MappingConfig } from './mapping-config';\n\nexport interface IconView {\n severity: IconSeverity;\n text?: string;\n}\n\n// Create an empty template containing only a space because creating a ViewTemplate\n// with an empty string throws an exception at runtime.\n// prettier-ignore\nconst emptyTemplate = html<IconView>` `;\n\nconst createIconTemplate = (\n icon: string | undefined\n): ViewTemplate<IconView> => {\n if (icon === undefined) {\n return emptyTemplate;\n }\n\n return html`\n <${icon}\n title=\"${x => x.text}\"\n role=\"img\"\n aria-label=\"${x => x.text}\"\n severity=\"${x => x.severity}\"\n class=\"no-shrink\"\n >\n </${icon}>\n `;\n};\n\n/**\n * Mapping configuration corresponding to a icon mapping\n */\nexport class MappingIconConfig extends MappingConfig {\n public readonly iconTemplate: ViewTemplate<IconView>;\n public constructor(\n resolvedIcon: string | undefined,\n public readonly severity: IconSeverity,\n text: string | undefined\n ) {\n super(text);\n this.iconTemplate = createIconTemplate(resolvedIcon);\n }\n}\n"]}
1
+ {"version":3,"file":"mapping-icon-config.js","sourceRoot":"","sources":["../../../../../src/table-column/enum-base/models/mapping-icon-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAqB,MAAM,yBAAyB,CAAC;AAElE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAQjD,mFAAmF;AACnF,uDAAuD;AACvD,kBAAkB;AAClB,MAAM,aAAa,GAAG,IAAI,CAAU,GAAG,CAAC;AAExC,MAAM,kBAAkB,GAAG,CACvB,IAAwB,EACF,EAAE;IACxB,IAAI,IAAI,KAAK,SAAS,EAAE;QACpB,OAAO,aAAa,CAAC;KACxB;IAED,OAAO,IAAI,CAAA;WACJ,IAAI;qBACM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;;0BAE5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;2BACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;wBACzC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;YAE3B,IAAI;KACX,CAAC;AACN,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,aAAa;IAGhD,YACI,YAAgC,EAChB,QAAsB,EACtC,IAAwB,EACR,UAAmB;QAEnC,KAAK,CAAC,IAAI,CAAC,CAAC;QAJI,aAAQ,GAAR,QAAQ,CAAc;QAEtB,eAAU,GAAV,UAAU,CAAS;QAGnC,IAAI,CAAC,YAAY,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IACzD,CAAC;CACJ","sourcesContent":["import { html, type ViewTemplate } from '@microsoft/fast-element';\nimport type { IconSeverity } from '../../../icon-base/types';\nimport { MappingConfig } from './mapping-config';\n\nexport interface IconView {\n severity: IconSeverity;\n text?: string;\n textHidden: boolean;\n}\n\n// Create an empty template containing only a space because creating a ViewTemplate\n// with an empty string throws an exception at runtime.\n// prettier-ignore\nconst emptyTemplate = html<IconView>` `;\n\nconst createIconTemplate = (\n icon: string | undefined\n): ViewTemplate<IconView> => {\n if (icon === undefined) {\n return emptyTemplate;\n }\n\n return html`\n <${icon}\n title=\"${x => (x.textHidden ? x.text : '')}\"\n role=\"img\"\n aria-label=\"${x => x.text}\"\n aria-hidden=\"${x => (x.textHidden ? 'false' : 'true')}\"\n severity=\"${x => x.severity}\"\n >\n </${icon}>\n `;\n};\n\n/**\n * Mapping configuration corresponding to a icon mapping\n */\nexport class MappingIconConfig extends MappingConfig {\n public readonly iconTemplate: ViewTemplate<IconView>;\n\n public constructor(\n resolvedIcon: string | undefined,\n public readonly severity: IconSeverity,\n text: string | undefined,\n public readonly textHidden: boolean\n ) {\n super(text);\n this.iconTemplate = createIconTemplate(resolvedIcon);\n }\n}\n"]}
@@ -1,7 +1,14 @@
1
+ import { type ViewTemplate } from '@microsoft/fast-element';
1
2
  import { MappingConfig } from './mapping-config';
3
+ export interface SpinnerView {
4
+ text?: string;
5
+ textHidden: boolean;
6
+ }
2
7
  /**
3
8
  * Mapping configuration corresponding to a spinner mapping
4
9
  */
5
10
  export declare class MappingSpinnerConfig extends MappingConfig {
6
- constructor(text: string | undefined);
11
+ readonly textHidden: boolean;
12
+ readonly spinnerTemplate: ViewTemplate<SpinnerView>;
13
+ constructor(text: string | undefined, textHidden: boolean);
7
14
  }
@@ -1,10 +1,22 @@
1
+ import { html } from '@microsoft/fast-element';
1
2
  import { MappingConfig } from './mapping-config';
3
+ import { spinnerTag } from '../../../spinner';
4
+ const spinnerTemplate = html `
5
+ <${spinnerTag}
6
+ title="${x => (x.textHidden ? x.text : '')}"
7
+ aria-label="${x => x.text}"
8
+ aria-hidden="${x => (x.textHidden ? 'false' : 'true')}"
9
+ >
10
+ </${spinnerTag}>
11
+ `;
2
12
  /**
3
13
  * Mapping configuration corresponding to a spinner mapping
4
14
  */
5
15
  export class MappingSpinnerConfig extends MappingConfig {
6
- constructor(text) {
16
+ constructor(text, textHidden) {
7
17
  super(text);
18
+ this.textHidden = textHidden;
19
+ this.spinnerTemplate = spinnerTemplate;
8
20
  }
9
21
  }
10
22
  //# sourceMappingURL=mapping-spinner-config.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"mapping-spinner-config.js","sourceRoot":"","sources":["../../../../../src/table-column/enum-base/models/mapping-spinner-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD;;GAEG;AACH,MAAM,OAAO,oBAAqB,SAAQ,aAAa;IACnD,YAAmB,IAAwB;QACvC,KAAK,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC;CACJ","sourcesContent":["import { MappingConfig } from './mapping-config';\n\n/**\n * Mapping configuration corresponding to a spinner mapping\n */\nexport class MappingSpinnerConfig extends MappingConfig {\n public constructor(text: string | undefined) {\n super(text);\n }\n}\n"]}
1
+ {"version":3,"file":"mapping-spinner-config.js","sourceRoot":"","sources":["../../../../../src/table-column/enum-base/models/mapping-spinner-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAO9C,MAAM,eAAe,GAA8B,IAAI,CAAA;OAChD,UAAU;iBACA,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;sBAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;uBACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;;QAErD,UAAU;CACjB,CAAC;AAEF;;GAEG;AACH,MAAM,OAAO,oBAAqB,SAAQ,aAAa;IAGnD,YACI,IAAwB,EACR,UAAmB;QAEnC,KAAK,CAAC,IAAI,CAAC,CAAC;QAFI,eAAU,GAAV,UAAU,CAAS;QAGnC,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC;IAC3C,CAAC;CACJ","sourcesContent":["import { type ViewTemplate, html } from '@microsoft/fast-element';\nimport { MappingConfig } from './mapping-config';\nimport { spinnerTag } from '../../../spinner';\n\nexport interface SpinnerView {\n text?: string;\n textHidden: boolean;\n}\n\nconst spinnerTemplate: ViewTemplate<SpinnerView> = html`\n <${spinnerTag}\n title=\"${x => (x.textHidden ? x.text : '')}\"\n aria-label=\"${x => x.text}\"\n aria-hidden=\"${x => (x.textHidden ? 'false' : 'true')}\"\n >\n </${spinnerTag}>\n`;\n\n/**\n * Mapping configuration corresponding to a spinner mapping\n */\nexport class MappingSpinnerConfig extends MappingConfig {\n public readonly spinnerTemplate: ViewTemplate<SpinnerView>;\n\n public constructor(\n text: string | undefined,\n public readonly textHidden: boolean\n ) {\n super(text);\n this.spinnerTemplate = spinnerTemplate;\n }\n}\n"]}
@@ -3,6 +3,7 @@ import { TableCellView } from '../../base/cell-view';
3
3
  import type { TableColumnEnumCellRecord, TableColumnEnumColumnConfig } from '../../enum-base';
4
4
  import { IconView } from '../../enum-base/models/mapping-icon-config';
5
5
  import type { IconSeverity } from '../../../icon-base/types';
6
+ import { SpinnerView } from '../../enum-base/models/mapping-spinner-config';
6
7
  declare global {
7
8
  interface HTMLElementTagNameMap {
8
9
  'nimble-table-column-icon-cell-view': TableColumnIconCellView;
@@ -11,11 +12,13 @@ declare global {
11
12
  /**
12
13
  * The cell view for the icon column
13
14
  */
14
- export declare class TableColumnIconCellView extends TableCellView<TableColumnEnumCellRecord, TableColumnEnumColumnConfig> implements IconView {
15
+ export declare class TableColumnIconCellView extends TableCellView<TableColumnEnumCellRecord, TableColumnEnumColumnConfig> implements IconView, SpinnerView {
15
16
  severity: IconSeverity;
16
17
  text?: string;
17
- iconTemplate?: ViewTemplate<IconView>;
18
- visual?: 'spinner' | 'icon';
18
+ visualizationTemplate?: ViewTemplate<IconView> | ViewTemplate<SpinnerView>;
19
+ textHidden: boolean;
20
+ /** @internal */
21
+ hasOverflow: boolean;
19
22
  private columnConfigChanged;
20
23
  private cellRecordChanged;
21
24
  private updateState;
@@ -2,6 +2,7 @@ import { __decorate } from "tslib";
2
2
  import { DesignSystem } from '@microsoft/fast-foundation';
3
3
  import { observable } from '@microsoft/fast-element';
4
4
  import { TableCellView } from '../../base/cell-view';
5
+ import { styles } from './styles';
5
6
  import { template } from './template';
6
7
  import { MappingIconConfig } from '../../enum-base/models/mapping-icon-config';
7
8
  import { MappingSpinnerConfig } from '../../enum-base/models/mapping-spinner-config';
@@ -9,6 +10,12 @@ import { MappingSpinnerConfig } from '../../enum-base/models/mapping-spinner-con
9
10
  * The cell view for the icon column
10
11
  */
11
12
  export class TableColumnIconCellView extends TableCellView {
13
+ constructor() {
14
+ super(...arguments);
15
+ this.textHidden = false;
16
+ /** @internal */
17
+ this.hasOverflow = false;
18
+ }
12
19
  columnConfigChanged() {
13
20
  this.updateState();
14
21
  }
@@ -16,7 +23,7 @@ export class TableColumnIconCellView extends TableCellView {
16
23
  this.updateState();
17
24
  }
18
25
  updateState() {
19
- this.visual = undefined;
26
+ this.visualizationTemplate = undefined;
20
27
  if (!this.columnConfig || !this.cellRecord) {
21
28
  return;
22
29
  }
@@ -26,14 +33,15 @@ export class TableColumnIconCellView extends TableCellView {
26
33
  }
27
34
  const mappingConfig = this.columnConfig.mappingConfigs.get(value);
28
35
  if (mappingConfig instanceof MappingIconConfig) {
29
- this.visual = 'icon';
30
36
  this.severity = mappingConfig.severity;
31
37
  this.text = mappingConfig.text;
32
- this.iconTemplate = mappingConfig.iconTemplate;
38
+ this.visualizationTemplate = mappingConfig.iconTemplate;
39
+ this.textHidden = mappingConfig.textHidden;
33
40
  }
34
41
  else if (mappingConfig instanceof MappingSpinnerConfig) {
35
- this.visual = 'spinner';
36
42
  this.text = mappingConfig.text;
43
+ this.visualizationTemplate = mappingConfig.spinnerTemplate;
44
+ this.textHidden = mappingConfig.textHidden;
37
45
  }
38
46
  }
39
47
  }
@@ -45,13 +53,17 @@ __decorate([
45
53
  ], TableColumnIconCellView.prototype, "text", void 0);
46
54
  __decorate([
47
55
  observable
48
- ], TableColumnIconCellView.prototype, "iconTemplate", void 0);
56
+ ], TableColumnIconCellView.prototype, "visualizationTemplate", void 0);
57
+ __decorate([
58
+ observable
59
+ ], TableColumnIconCellView.prototype, "textHidden", void 0);
49
60
  __decorate([
50
61
  observable
51
- ], TableColumnIconCellView.prototype, "visual", void 0);
62
+ ], TableColumnIconCellView.prototype, "hasOverflow", void 0);
52
63
  const iconCellView = TableColumnIconCellView.compose({
53
64
  baseName: 'table-column-icon-cell-view',
54
- template
65
+ template,
66
+ styles
55
67
  });
56
68
  DesignSystem.getOrCreate().withPrefix('nimble').register(iconCellView());
57
69
  export const tableColumnIconCellViewTag = 'nimble-table-column-icon-cell-view';
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/icon/cell-view/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAgB,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAKtC,OAAO,EAEH,iBAAiB,EACpB,MAAM,4CAA4C,CAAC;AAEpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,+CAA+C,CAAC;AAQrF;;GAEG;AACH,MAAM,OAAO,uBACT,SAAQ,aAGP;IAcO,mBAAmB;QACvB,IAAI,CAAC,WAAW,EAAE,CAAC;IACvB,CAAC;IAEO,iBAAiB;QACrB,IAAI,CAAC,WAAW,EAAE,CAAC;IACvB,CAAC;IAEO,WAAW;QACf,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;QACxB,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACxC,OAAO;SACV;QACD,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;QACpC,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,EAAE;YACvC,OAAO;SACV;QACD,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAClE,IAAI,aAAa,YAAY,iBAAiB,EAAE;YAC5C,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;YACrB,IAAI,CAAC,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC;YACvC,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC;YAC/B,IAAI,CAAC,YAAY,GAAG,aAAa,CAAC,YAAY,CAAC;SAClD;aAAM,IAAI,aAAa,YAAY,oBAAoB,EAAE;YACtD,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;YACxB,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC;SAClC;IACL,CAAC;CACJ;AAvCU;IADN,UAAU;yDACmB;AAGvB;IADN,UAAU;qDACU;AAGd;IADN,UAAU;6DACkC;AAGtC;IADN,UAAU;uDACwB;AAgCvC,MAAM,YAAY,GAAG,uBAAuB,CAAC,OAAO,CAAC;IACjD,QAAQ,EAAE,6BAA6B;IACvC,QAAQ;CACX,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC;AACzE,MAAM,CAAC,MAAM,0BAA0B,GAAG,oCAAoC,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { ViewTemplate, observable } from '@microsoft/fast-element';\nimport { TableCellView } from '../../base/cell-view';\nimport { template } from './template';\nimport type {\n TableColumnEnumCellRecord,\n TableColumnEnumColumnConfig\n} from '../../enum-base';\nimport {\n IconView,\n MappingIconConfig\n} from '../../enum-base/models/mapping-icon-config';\nimport type { IconSeverity } from '../../../icon-base/types';\nimport { MappingSpinnerConfig } from '../../enum-base/models/mapping-spinner-config';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-table-column-icon-cell-view': TableColumnIconCellView;\n }\n}\n\n/**\n * The cell view for the icon column\n */\nexport class TableColumnIconCellView\n extends TableCellView<\n TableColumnEnumCellRecord,\n TableColumnEnumColumnConfig\n >\n implements IconView {\n @observable\n public severity: IconSeverity;\n\n @observable\n public text?: string;\n\n @observable\n public iconTemplate?: ViewTemplate<IconView>;\n\n @observable\n public visual?: 'spinner' | 'icon';\n\n private columnConfigChanged(): void {\n this.updateState();\n }\n\n private cellRecordChanged(): void {\n this.updateState();\n }\n\n private updateState(): void {\n this.visual = undefined;\n if (!this.columnConfig || !this.cellRecord) {\n return;\n }\n const value = this.cellRecord.value;\n if (value === undefined || value === null) {\n return;\n }\n const mappingConfig = this.columnConfig.mappingConfigs.get(value);\n if (mappingConfig instanceof MappingIconConfig) {\n this.visual = 'icon';\n this.severity = mappingConfig.severity;\n this.text = mappingConfig.text;\n this.iconTemplate = mappingConfig.iconTemplate;\n } else if (mappingConfig instanceof MappingSpinnerConfig) {\n this.visual = 'spinner';\n this.text = mappingConfig.text;\n }\n }\n}\n\nconst iconCellView = TableColumnIconCellView.compose({\n baseName: 'table-column-icon-cell-view',\n template\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(iconCellView());\nexport const tableColumnIconCellViewTag = 'nimble-table-column-icon-cell-view';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/icon/cell-view/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAgB,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAKtC,OAAO,EAEH,iBAAiB,EACpB,MAAM,4CAA4C,CAAC;AAEpD,OAAO,EACH,oBAAoB,EAEvB,MAAM,+CAA+C,CAAC;AAQvD;;GAEG;AACH,MAAM,OAAO,uBACT,SAAQ,aAGP;IAJL;;QAkBW,eAAU,GAAG,KAAK,CAAC;QAE1B,gBAAgB;QAET,gBAAW,GAAG,KAAK,CAAC;IA+B/B,CAAC;IA7BW,mBAAmB;QACvB,IAAI,CAAC,WAAW,EAAE,CAAC;IACvB,CAAC;IAEO,iBAAiB;QACrB,IAAI,CAAC,WAAW,EAAE,CAAC;IACvB,CAAC;IAEO,WAAW;QACf,IAAI,CAAC,qBAAqB,GAAG,SAAS,CAAC;QACvC,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACxC,OAAO;SACV;QACD,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;QACpC,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,EAAE;YACvC,OAAO;SACV;QACD,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAClE,IAAI,aAAa,YAAY,iBAAiB,EAAE;YAC5C,IAAI,CAAC,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC;YACvC,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC;YAC/B,IAAI,CAAC,qBAAqB,GAAG,aAAa,CAAC,YAAY,CAAC;YACxD,IAAI,CAAC,UAAU,GAAG,aAAa,CAAC,UAAU,CAAC;SAC9C;aAAM,IAAI,aAAa,YAAY,oBAAoB,EAAE;YACtD,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC;YAC/B,IAAI,CAAC,qBAAqB,GAAG,aAAa,CAAC,eAAe,CAAC;YAC3D,IAAI,CAAC,UAAU,GAAG,aAAa,CAAC,UAAU,CAAC;SAC9C;IACL,CAAC;CACJ;AA9CU;IADN,UAAU;yDACmB;AAGvB;IADN,UAAU;qDACU;AAGd;IADN,UAAU;sEAGiB;AAGrB;IADN,UAAU;2DACe;AAInB;IADN,UAAU;4DACgB;AAiC/B,MAAM,YAAY,GAAG,uBAAuB,CAAC,OAAO,CAAC;IACjD,QAAQ,EAAE,6BAA6B;IACvC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC;AACzE,MAAM,CAAC,MAAM,0BAA0B,GAAG,oCAAoC,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { ViewTemplate, observable } from '@microsoft/fast-element';\nimport { TableCellView } from '../../base/cell-view';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type {\n TableColumnEnumCellRecord,\n TableColumnEnumColumnConfig\n} from '../../enum-base';\nimport {\n IconView,\n MappingIconConfig\n} from '../../enum-base/models/mapping-icon-config';\nimport type { IconSeverity } from '../../../icon-base/types';\nimport {\n MappingSpinnerConfig,\n SpinnerView\n} from '../../enum-base/models/mapping-spinner-config';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-table-column-icon-cell-view': TableColumnIconCellView;\n }\n}\n\n/**\n * The cell view for the icon column\n */\nexport class TableColumnIconCellView\n extends TableCellView<\n TableColumnEnumCellRecord,\n TableColumnEnumColumnConfig\n >\n implements IconView, SpinnerView {\n @observable\n public severity: IconSeverity;\n\n @observable\n public text?: string;\n\n @observable\n public visualizationTemplate?:\n | ViewTemplate<IconView>\n | ViewTemplate<SpinnerView>;\n\n @observable\n public textHidden = false;\n\n /** @internal */\n @observable\n public hasOverflow = false;\n\n private columnConfigChanged(): void {\n this.updateState();\n }\n\n private cellRecordChanged(): void {\n this.updateState();\n }\n\n private updateState(): void {\n this.visualizationTemplate = undefined;\n if (!this.columnConfig || !this.cellRecord) {\n return;\n }\n const value = this.cellRecord.value;\n if (value === undefined || value === null) {\n return;\n }\n const mappingConfig = this.columnConfig.mappingConfigs.get(value);\n if (mappingConfig instanceof MappingIconConfig) {\n this.severity = mappingConfig.severity;\n this.text = mappingConfig.text;\n this.visualizationTemplate = mappingConfig.iconTemplate;\n this.textHidden = mappingConfig.textHidden;\n } else if (mappingConfig instanceof MappingSpinnerConfig) {\n this.text = mappingConfig.text;\n this.visualizationTemplate = mappingConfig.spinnerTemplate;\n this.textHidden = mappingConfig.textHidden;\n }\n }\n}\n\nconst iconCellView = TableColumnIconCellView.compose({\n baseName: 'table-column-icon-cell-view',\n template,\n styles\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(iconCellView());\nexport const tableColumnIconCellViewTag = 'nimble-table-column-icon-cell-view';\n"]}
@@ -0,0 +1 @@
1
+ export declare const styles: import("@microsoft/fast-element").ElementStyles;
@@ -0,0 +1,27 @@
1
+ import { css } from '@microsoft/fast-element';
2
+ import { display } from '@microsoft/fast-foundation';
3
+ import { bodyFont, bodyFontColor, iconSize, smallPadding } from '../../../theme-provider/design-tokens';
4
+ export const styles = css `
5
+ ${display('inline-flex')}
6
+
7
+ :host {
8
+ gap: ${smallPadding};
9
+ align-items: center;
10
+ }
11
+
12
+ .reserve-icon-size {
13
+ flex-shrink: 0;
14
+ width: ${iconSize};
15
+ height: ${iconSize};
16
+ }
17
+
18
+ .text {
19
+ flex-shrink: 1;
20
+ font: ${bodyFont};
21
+ color: ${bodyFontColor};
22
+ white-space: nowrap;
23
+ overflow: hidden;
24
+ text-overflow: ellipsis;
25
+ }
26
+ `;
27
+ //# sourceMappingURL=styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table-column/icon/cell-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,YAAY,EACf,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;eAGb,YAAY;;;;;;iBAMV,QAAQ;kBACP,QAAQ;;;;;gBAKV,QAAQ;iBACP,aAAa;;;;;CAK7B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n bodyFont,\n bodyFontColor,\n iconSize,\n smallPadding\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n ${display('inline-flex')}\n\n :host {\n gap: ${smallPadding};\n align-items: center;\n }\n\n .reserve-icon-size {\n flex-shrink: 0;\n width: ${iconSize};\n height: ${iconSize};\n }\n\n .text {\n flex-shrink: 1;\n font: ${bodyFont};\n color: ${bodyFontColor};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n`;\n"]}
@@ -1,13 +1,20 @@
1
1
  import { html, when } from '@microsoft/fast-element';
2
- import { spinnerTag } from '../../../spinner';
2
+ import { overflow } from '../../../utilities/directive/overflow';
3
+ // prettier-ignore
3
4
  export const template = html `
4
- ${when(x => x.visual === 'icon', x => x.iconTemplate)}
5
- ${when(x => x.visual === 'spinner', html `
6
- <${spinnerTag}
7
- title="${x => x.text}"
8
- aria-label="${x => x.text}"
9
- class="no-shrink">
10
- </${spinnerTag}>
5
+ ${when(x => x.visualizationTemplate, html `
6
+ <span class="reserve-icon-size">
7
+ ${x => x.visualizationTemplate}
8
+ </span>
9
+ `)}
10
+ ${when(x => !x.textHidden, html `
11
+ <span
12
+ ${overflow('hasOverflow')}
13
+ title=${x => (x.hasOverflow && x.text ? x.text : null)}
14
+ class="text"
15
+ >
16
+ ${x => x.text}
17
+ </span>
11
18
  `)}
12
19
  `;
13
20
  //# sourceMappingURL=template.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table-column/icon/cell-view/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAErD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAyB;MAC/C,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,KAAK,MAAM,EACxB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAa,CACvB;MACC,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,KAAK,SAAS,EAC3B,IAAI,CAAyB;WAC1B,UAAU;qBACA,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;0BACN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;;YAEzB,UAAU;KACjB,CACA;CACJ,CAAC","sourcesContent":["import { html, when } from '@microsoft/fast-element';\nimport type { TableColumnIconCellView } from '.';\nimport { spinnerTag } from '../../../spinner';\n\nexport const template = html<TableColumnIconCellView>`\n ${when(\n x => x.visual === 'icon',\n x => x.iconTemplate!\n )}\n ${when(\n x => x.visual === 'spinner',\n html<TableColumnIconCellView>`\n <${spinnerTag}\n title=\"${x => x.text}\"\n aria-label=\"${x => x.text}\"\n class=\"no-shrink\">\n </${spinnerTag}>\n `\n )}\n`;\n"]}
1
+ {"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table-column/icon/cell-view/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAErD,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AAEjE,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAyB;MAC/C,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,qBAAqB,EAC5B,IAAI,CAAyB;;kBAEnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,qBAAqB;;SAErC,CACJ;MACC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,EAAE,IAAI,CAAyB;;cAE9C,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;;;cAGpD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;;KAEpB,CAAC;CACL,CAAC","sourcesContent":["import { html, when } from '@microsoft/fast-element';\nimport type { TableColumnIconCellView } from '.';\nimport { overflow } from '../../../utilities/directive/overflow';\n\n// prettier-ignore\nexport const template = html<TableColumnIconCellView>`\n ${when(\n x => x.visualizationTemplate,\n html<TableColumnIconCellView>`\n <span class=\"reserve-icon-size\">\n ${x => x.visualizationTemplate}\n </span>\n `\n )}\n ${when(x => !x.textHidden, html<TableColumnIconCellView>`\n <span\n ${overflow('hasOverflow')}\n title=${x => (x.hasOverflow && x.text ? x.text : null)}\n class=\"text\"\n >\n ${x => x.text}\n </span>\n `)}\n`;\n"]}
@@ -4,6 +4,7 @@ import type { TableFieldValue } from '../../../table/types';
4
4
  import { TableColumnTextGroupHeaderViewBase } from '../../text-base/group-header-view';
5
5
  import type { IconSeverity } from '../../../icon-base/types';
6
6
  import { type IconView } from '../../enum-base/models/mapping-icon-config';
7
+ import { SpinnerView } from '../../enum-base/models/mapping-spinner-config';
7
8
  declare global {
8
9
  interface HTMLElementTagNameMap {
9
10
  'nimble-table-column-icon-group-header-view': TableColumnIconGroupHeaderView;
@@ -12,10 +13,10 @@ declare global {
12
13
  /**
13
14
  * The group header view for the icon column
14
15
  */
15
- export declare class TableColumnIconGroupHeaderView extends TableColumnTextGroupHeaderViewBase<TableFieldValue, TableColumnEnumColumnConfig> implements IconView {
16
+ export declare class TableColumnIconGroupHeaderView extends TableColumnTextGroupHeaderViewBase<TableFieldValue, TableColumnEnumColumnConfig> implements IconView, SpinnerView {
16
17
  severity: IconSeverity;
17
- iconTemplate?: ViewTemplate<IconView>;
18
- visual?: 'spinner' | 'icon';
18
+ visualizationTemplate?: ViewTemplate<IconView> | ViewTemplate<SpinnerView>;
19
+ readonly textHidden = false;
19
20
  protected updateText(): void;
20
21
  }
21
22
  export declare const tableColumnIconGroupHeaderViewTag = "nimble-table-column-icon-group-header-view";
@@ -10,8 +10,12 @@ import { MappingSpinnerConfig } from '../../enum-base/models/mapping-spinner-con
10
10
  * The group header view for the icon column
11
11
  */
12
12
  export class TableColumnIconGroupHeaderView extends TableColumnTextGroupHeaderViewBase {
13
+ constructor() {
14
+ super(...arguments);
15
+ this.textHidden = false;
16
+ }
13
17
  updateText() {
14
- this.visual = undefined;
18
+ this.visualizationTemplate = undefined;
15
19
  if (!this.columnConfig) {
16
20
  this.text = '';
17
21
  return;
@@ -19,14 +23,13 @@ export class TableColumnIconGroupHeaderView extends TableColumnTextGroupHeaderVi
19
23
  const value = this.groupHeaderValue;
20
24
  const mappingConfig = this.columnConfig.mappingConfigs.get(value);
21
25
  if (mappingConfig instanceof MappingIconConfig) {
22
- this.visual = 'icon';
23
26
  this.severity = mappingConfig.severity;
24
27
  this.text = mappingConfig.text ?? '';
25
- this.iconTemplate = mappingConfig.iconTemplate;
28
+ this.visualizationTemplate = mappingConfig.iconTemplate;
26
29
  }
27
30
  else if (mappingConfig instanceof MappingSpinnerConfig) {
28
- this.visual = 'spinner';
29
31
  this.text = mappingConfig.text ?? '';
32
+ this.visualizationTemplate = mappingConfig.spinnerTemplate;
30
33
  }
31
34
  }
32
35
  }
@@ -35,10 +38,7 @@ __decorate([
35
38
  ], TableColumnIconGroupHeaderView.prototype, "severity", void 0);
36
39
  __decorate([
37
40
  observable
38
- ], TableColumnIconGroupHeaderView.prototype, "iconTemplate", void 0);
39
- __decorate([
40
- observable
41
- ], TableColumnIconGroupHeaderView.prototype, "visual", void 0);
41
+ ], TableColumnIconGroupHeaderView.prototype, "visualizationTemplate", void 0);
42
42
  const iconGroupHeaderView = TableColumnIconGroupHeaderView.compose({
43
43
  baseName: 'table-column-icon-group-header-view',
44
44
  template,
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/icon/group-header-view/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAgB,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,OAAO,EAAE,kCAAkC,EAAE,MAAM,mCAAmC,CAAC;AAEvF,OAAO,EACH,iBAAiB,EAEpB,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,+CAA+C,CAAC;AAQrF;;GAEG;AACH,MAAM,OAAO,8BACT,SAAQ,kCAGP;IAWS,UAAU;QAChB,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;QACxB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACpB,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;YACf,OAAO;SACV;QACD,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC;QACpC,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,GAAG,CAAC,KAAM,CAAC,CAAC;QACnE,IAAI,aAAa,YAAY,iBAAiB,EAAE;YAC5C,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;YACrB,IAAI,CAAC,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC;YACvC,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,IAAI,IAAI,EAAE,CAAC;YACrC,IAAI,CAAC,YAAY,GAAG,aAAa,CAAC,YAAY,CAAC;SAClD;aAAM,IAAI,aAAa,YAAY,oBAAoB,EAAE;YACtD,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;YACxB,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,IAAI,IAAI,EAAE,CAAC;SACxC;IACL,CAAC;CACJ;AA1BU;IADN,UAAU;gEACmB;AAGvB;IADN,UAAU;oEACkC;AAGtC;IADN,UAAU;8DACwB;AAsBvC,MAAM,mBAAmB,GAAG,8BAA8B,CAAC,OAAO,CAAC;IAC/D,QAAQ,EAAE,qCAAqC;IAC/C,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,mBAAmB,EAAE,CAAC,CAAC;AAChF,MAAM,CAAC,MAAM,iCAAiC,GAAG,4CAA4C,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { ViewTemplate, observable } from '@microsoft/fast-element';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { TableColumnEnumColumnConfig } from '../../enum-base';\nimport type { TableFieldValue } from '../../../table/types';\nimport { TableColumnTextGroupHeaderViewBase } from '../../text-base/group-header-view';\nimport type { IconSeverity } from '../../../icon-base/types';\nimport {\n MappingIconConfig,\n type IconView\n} from '../../enum-base/models/mapping-icon-config';\nimport { MappingSpinnerConfig } from '../../enum-base/models/mapping-spinner-config';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-table-column-icon-group-header-view': TableColumnIconGroupHeaderView;\n }\n}\n\n/**\n * The group header view for the icon column\n */\nexport class TableColumnIconGroupHeaderView\n extends TableColumnTextGroupHeaderViewBase<\n TableFieldValue,\n TableColumnEnumColumnConfig\n >\n implements IconView {\n @observable\n public severity: IconSeverity;\n\n @observable\n public iconTemplate?: ViewTemplate<IconView>;\n\n @observable\n public visual?: 'spinner' | 'icon';\n\n protected updateText(): void {\n this.visual = undefined;\n if (!this.columnConfig) {\n this.text = '';\n return;\n }\n const value = this.groupHeaderValue;\n const mappingConfig = this.columnConfig.mappingConfigs.get(value!);\n if (mappingConfig instanceof MappingIconConfig) {\n this.visual = 'icon';\n this.severity = mappingConfig.severity;\n this.text = mappingConfig.text ?? '';\n this.iconTemplate = mappingConfig.iconTemplate;\n } else if (mappingConfig instanceof MappingSpinnerConfig) {\n this.visual = 'spinner';\n this.text = mappingConfig.text ?? '';\n }\n }\n}\n\nconst iconGroupHeaderView = TableColumnIconGroupHeaderView.compose({\n baseName: 'table-column-icon-group-header-view',\n template,\n styles\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(iconGroupHeaderView());\nexport const tableColumnIconGroupHeaderViewTag = 'nimble-table-column-icon-group-header-view';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/icon/group-header-view/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAgB,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,OAAO,EAAE,kCAAkC,EAAE,MAAM,mCAAmC,CAAC;AAEvF,OAAO,EACH,iBAAiB,EAEpB,MAAM,4CAA4C,CAAC;AACpD,OAAO,EACH,oBAAoB,EAEvB,MAAM,+CAA+C,CAAC;AAQvD;;GAEG;AACH,MAAM,OAAO,8BACT,SAAQ,kCAGP;IAJL;;QAcoB,eAAU,GAAG,KAAK,CAAC;IAmBvC,CAAC;IAjBa,UAAU;QAChB,IAAI,CAAC,qBAAqB,GAAG,SAAS,CAAC;QACvC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACpB,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;YACf,OAAO;SACV;QACD,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC;QACpC,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,GAAG,CAAC,KAAM,CAAC,CAAC;QACnE,IAAI,aAAa,YAAY,iBAAiB,EAAE;YAC5C,IAAI,CAAC,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC;YACvC,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,IAAI,IAAI,EAAE,CAAC;YACrC,IAAI,CAAC,qBAAqB,GAAG,aAAa,CAAC,YAAY,CAAC;SAC3D;aAAM,IAAI,aAAa,YAAY,oBAAoB,EAAE;YACtD,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,IAAI,IAAI,EAAE,CAAC;YACrC,IAAI,CAAC,qBAAqB,GAAG,aAAa,CAAC,eAAe,CAAC;SAC9D;IACL,CAAC;CACJ;AA1BU;IADN,UAAU;gEACmB;AAGvB;IADN,UAAU;6EAGiB;AAuBhC,MAAM,mBAAmB,GAAG,8BAA8B,CAAC,OAAO,CAAC;IAC/D,QAAQ,EAAE,qCAAqC;IAC/C,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,mBAAmB,EAAE,CAAC,CAAC;AAChF,MAAM,CAAC,MAAM,iCAAiC,GAAG,4CAA4C,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { ViewTemplate, observable } from '@microsoft/fast-element';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { TableColumnEnumColumnConfig } from '../../enum-base';\nimport type { TableFieldValue } from '../../../table/types';\nimport { TableColumnTextGroupHeaderViewBase } from '../../text-base/group-header-view';\nimport type { IconSeverity } from '../../../icon-base/types';\nimport {\n MappingIconConfig,\n type IconView\n} from '../../enum-base/models/mapping-icon-config';\nimport {\n MappingSpinnerConfig,\n SpinnerView\n} from '../../enum-base/models/mapping-spinner-config';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-table-column-icon-group-header-view': TableColumnIconGroupHeaderView;\n }\n}\n\n/**\n * The group header view for the icon column\n */\nexport class TableColumnIconGroupHeaderView\n extends TableColumnTextGroupHeaderViewBase<\n TableFieldValue,\n TableColumnEnumColumnConfig\n >\n implements IconView, SpinnerView {\n @observable\n public severity: IconSeverity;\n\n @observable\n public visualizationTemplate?:\n | ViewTemplate<IconView>\n | ViewTemplate<SpinnerView>;\n\n public readonly textHidden = false;\n\n protected updateText(): void {\n this.visualizationTemplate = undefined;\n if (!this.columnConfig) {\n this.text = '';\n return;\n }\n const value = this.groupHeaderValue;\n const mappingConfig = this.columnConfig.mappingConfigs.get(value!);\n if (mappingConfig instanceof MappingIconConfig) {\n this.severity = mappingConfig.severity;\n this.text = mappingConfig.text ?? '';\n this.visualizationTemplate = mappingConfig.iconTemplate;\n } else if (mappingConfig instanceof MappingSpinnerConfig) {\n this.text = mappingConfig.text ?? '';\n this.visualizationTemplate = mappingConfig.spinnerTemplate;\n }\n }\n}\n\nconst iconGroupHeaderView = TableColumnIconGroupHeaderView.compose({\n baseName: 'table-column-icon-group-header-view',\n template,\n styles\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(iconGroupHeaderView());\nexport const tableColumnIconGroupHeaderViewTag = 'nimble-table-column-icon-group-header-view';\n"]}
@@ -1,6 +1,6 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  import { display } from '@microsoft/fast-foundation';
3
- import { bodyFont, bodyFontColor, smallPadding } from '../../../theme-provider/design-tokens';
3
+ import { bodyFont, bodyFontColor, iconSize, smallPadding } from '../../../theme-provider/design-tokens';
4
4
  export const styles = css `
5
5
  ${display('inline-flex')}
6
6
 
@@ -9,11 +9,13 @@ export const styles = css `
9
9
  align-items: center;
10
10
  }
11
11
 
12
- .no-shrink {
12
+ .reserve-icon-size {
13
13
  flex-shrink: 0;
14
+ width: ${iconSize};
15
+ height: ${iconSize};
14
16
  }
15
17
 
16
- span {
18
+ .text {
17
19
  flex-shrink: 1;
18
20
  font: ${bodyFont};
19
21
  color: ${bodyFontColor};
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table-column/icon/group-header-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,aAAa,EACb,YAAY,EACf,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;eAGb,YAAY;;;;;;;;;;gBAUX,QAAQ;iBACP,aAAa;;;;;CAK7B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n bodyFont,\n bodyFontColor,\n smallPadding\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n ${display('inline-flex')}\n\n :host {\n gap: ${smallPadding};\n align-items: center;\n }\n\n .no-shrink {\n flex-shrink: 0;\n }\n\n span {\n flex-shrink: 1;\n font: ${bodyFont};\n color: ${bodyFontColor};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n`;\n"]}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table-column/icon/group-header-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,YAAY,EACf,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;eAGb,YAAY;;;;;;iBAMV,QAAQ;kBACP,QAAQ;;;;;gBAKV,QAAQ;iBACP,aAAa;;;;;CAK7B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n bodyFont,\n bodyFontColor,\n iconSize,\n smallPadding\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n ${display('inline-flex')}\n\n :host {\n gap: ${smallPadding};\n align-items: center;\n }\n\n .reserve-icon-size {\n flex-shrink: 0;\n width: ${iconSize};\n height: ${iconSize};\n }\n\n .text {\n flex-shrink: 1;\n font: ${bodyFont};\n color: ${bodyFontColor};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n`;\n"]}
@@ -1,30 +1,16 @@
1
1
  import { html, when } from '@microsoft/fast-element';
2
- import { spinnerTag } from '../../../spinner';
3
2
  import { overflow } from '../../../utilities/directive/overflow';
4
3
  // prettier-ignore
5
4
  export const template = html `
6
- ${when(x => x.visual === 'icon', html `
7
- ${x => x.iconTemplate}
8
- <span
9
- ${overflow('hasOverflow')}
10
- title="${x => (x.hasOverflow && x.text ? x.text : null)}"
11
- >${x => x.text}</span>`)}
12
- ${when(x => x.visual === 'spinner', html `
13
- <${spinnerTag}
14
- title="${x => x.text}"
15
- aria-label="${x => x.text}"
16
- class="no-shrink">
17
- </${spinnerTag}>
18
- <span
19
- ${overflow('hasOverflow')}
20
- title="${x => (x.hasOverflow && x.text ? x.text : null)}"
21
- >${x => x.text}</span>
22
- `)}
23
- ${when(x => x.visual === undefined, html `
24
- <span
25
- ${overflow('hasOverflow')}
26
- title="${x => (x.hasOverflow && x.text ? x.text : null)}"
27
- >${x => x.text}</span>
28
- `)}
5
+ ${when(x => x.visualizationTemplate, html `
6
+ <span class="reserve-icon-size">
7
+ ${x => x.visualizationTemplate}
8
+ </span>
9
+ `)}
10
+ <span
11
+ ${overflow('hasOverflow')}
12
+ title="${x => (x.hasOverflow && x.text ? x.text : null)}"
13
+ class="text"
14
+ >${x => x.text}</span>
29
15
  `;
30
16
  //# sourceMappingURL=template.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table-column/icon/group-header-view/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGrD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AAEjE,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAgC;MACtD,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,KAAK,MAAM,EACxB,IAAI,CAAgC;cAC9B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAa;;kBAEhB,QAAQ,CAAC,aAAa,CAAC;yBAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;eACxD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,SAAS,CAC9B;MACC,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,KAAK,SAAS,EAC3B,IAAI,CAAgC;WACjC,UAAU;qBACA,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;0BACN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;;YAEzB,UAAU;;cAER,QAAQ,CAAC,aAAa,CAAC;qBAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;WACxD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;KACjB,CACA;MACC,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,KAAK,SAAS,EAC3B,IAAI,CAAgC;;cAE9B,QAAQ,CAAC,aAAa,CAAC;qBAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;WACxD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;KACjB,CACA;CACJ,CAAC","sourcesContent":["import { html, when } from '@microsoft/fast-element';\n\nimport type { TableColumnIconGroupHeaderView } from '.';\nimport { spinnerTag } from '../../../spinner';\nimport { overflow } from '../../../utilities/directive/overflow';\n\n// prettier-ignore\nexport const template = html<TableColumnIconGroupHeaderView>`\n ${when(\n x => x.visual === 'icon',\n html<TableColumnIconGroupHeaderView>`\n ${x => x.iconTemplate!}\n <span \n ${overflow('hasOverflow')}\n title=\"${x => (x.hasOverflow && x.text ? x.text : null)}\"\n >${x => x.text}</span>`\n )}\n ${when(\n x => x.visual === 'spinner',\n html<TableColumnIconGroupHeaderView>`\n <${spinnerTag}\n title=\"${x => x.text}\"\n aria-label=\"${x => x.text}\"\n class=\"no-shrink\">\n </${spinnerTag}>\n <span \n ${overflow('hasOverflow')}\n title=\"${x => (x.hasOverflow && x.text ? x.text : null)}\"\n >${x => x.text}</span>\n `\n )}\n ${when(\n x => x.visual === undefined,\n html<TableColumnIconGroupHeaderView>`\n <span \n ${overflow('hasOverflow')}\n title=\"${x => (x.hasOverflow && x.text ? x.text : null)}\"\n >${x => x.text}</span>\n `\n )}\n`;\n"]}
1
+ {"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table-column/icon/group-header-view/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGrD,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AAEjE,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAgC;MACtD,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,qBAAqB,EAC5B,IAAI,CAAgC;;kBAE1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,qBAAqB;;SAErC,CACJ;;UAEK,QAAQ,CAAC,aAAa,CAAC;iBAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;;OAExD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;CACjB,CAAC","sourcesContent":["import { html, when } from '@microsoft/fast-element';\n\nimport type { TableColumnIconGroupHeaderView } from '.';\nimport { overflow } from '../../../utilities/directive/overflow';\n\n// prettier-ignore\nexport const template = html<TableColumnIconGroupHeaderView>`\n ${when(\n x => x.visualizationTemplate,\n html<TableColumnIconGroupHeaderView>`\n <span class=\"reserve-icon-size\">\n ${x => x.visualizationTemplate}\n </span>\n `\n )}\n <span\n ${overflow('hasOverflow')}\n title=\"${x => (x.hasOverflow && x.text ? x.text : null)}\"\n class=\"text\"\n >${x => x.text}</span>\n`;\n"]}
@@ -33,10 +33,10 @@ export class TableColumnIcon extends mixinGroupableColumnAPI(mixinFractionalWidt
33
33
  }
34
34
  createMappingConfig(mapping) {
35
35
  if (mapping instanceof MappingIcon) {
36
- return new MappingIconConfig(mapping.resolvedIcon, mapping.severity, mapping.text);
36
+ return new MappingIconConfig(mapping.resolvedIcon, mapping.severity, mapping.text, mapping.textHidden);
37
37
  }
38
38
  if (mapping instanceof MappingSpinner) {
39
- return new MappingSpinnerConfig(mapping.text);
39
+ return new MappingSpinnerConfig(mapping.text, mapping.textHidden);
40
40
  }
41
41
  // Getting here would indicate a programming error, b/c validation will prevent
42
42
  // this function from running when there is an unsupported mapping.
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAEH,mBAAmB,EAEtB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,EAAE,6BAA6B,EAAE,MAAM,mCAAmC,CAAC;AAClF,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AAEhF,OAAO,EAAE,iCAAiC,EAAE,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AAGzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAC5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,4CAA4C,CAAC;AAQlF;;GAEG;AACH,MAAM,OAAO,eAAgB,SAAQ,uBAAuB,CACxD,6BAA6B,CACzB,CAAA,mBAGC,CAAA,CACJ,CACJ;IACsB,yBAAyB;QACxC,OAAO;YACH,oBAAoB,EAAE,CAAC,OAAO,CAAC;YAC/B,WAAW,EAAE,0BAA0B;YACvC,kBAAkB,EAAE,iCAAiC;YACrD,eAAe,EAAE,EAAE;YACnB,aAAa,EAAE,wBAAwB,CAAC,KAAK;YAC7C,SAAS,EAAE,IAAI,wBAAwB,EAAE;SAC5C,CAAC;IACN,CAAC;IAEkB,kBAAkB,CACjC,cAA8B;QAE9B,OAAO;YACH,cAAc;SACjB,CAAC;IACN,CAAC;IAES,mBAAmB,CAAC,OAAyB;QACnD,IAAI,OAAO,YAAY,WAAW,EAAE;YAChC,OAAO,IAAI,iBAAiB,CACxB,OAAO,CAAC,YAAY,EACpB,OAAO,CAAC,QAAQ,EAChB,OAAO,CAAC,IAAI,CACf,CAAC;SACL;QACD,IAAI,OAAO,YAAY,cAAc,EAAE;YACnC,OAAO,IAAI,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;SACjD;QACD,+EAA+E;QAC/E,mEAAmE;QACnE,MAAM,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAC;IAC3C,CAAC;CACJ;AAED,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,0BAA0B,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport {\n MappingConfigs,\n TableColumnEnumBase,\n TableColumnEnumColumnConfig\n} from '../enum-base';\nimport { styles } from '../enum-base/styles';\nimport { template } from '../enum-base/template';\nimport { TableColumnSortOperation } from '../base/types';\nimport { mixinGroupableColumnAPI } from '../mixins/groupable-column';\nimport { mixinFractionalWidthColumnAPI } from '../mixins/fractional-width-column';\nimport { MappingSpinner } from '../../mapping/spinner';\nimport { MappingIcon } from '../../mapping/icon';\nimport { TableColumnIconValidator } from './models/table-column-icon-validator';\nimport type { ColumnInternalsOptions } from '../base/models/column-internals';\nimport { tableColumnIconGroupHeaderViewTag } from './group-header-view';\nimport { tableColumnIconCellViewTag } from './cell-view';\nimport type { Mapping } from '../../mapping/base';\nimport type { MappingConfig } from '../enum-base/models/mapping-config';\nimport { MappingIconConfig } from '../enum-base/models/mapping-icon-config';\nimport { MappingSpinnerConfig } from '../enum-base/models/mapping-spinner-config';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-table-column-icon': TableColumnIcon;\n }\n}\n\n/**\n * Table column that maps values to icons / spinners\n */\nexport class TableColumnIcon extends mixinGroupableColumnAPI(\n mixinFractionalWidthColumnAPI(\n TableColumnEnumBase<\n TableColumnEnumColumnConfig,\n TableColumnIconValidator\n >\n )\n) {\n protected override getColumnInternalsOptions(): ColumnInternalsOptions<TableColumnIconValidator> {\n return {\n cellRecordFieldNames: ['value'],\n cellViewTag: tableColumnIconCellViewTag,\n groupHeaderViewTag: tableColumnIconGroupHeaderViewTag,\n delegatedEvents: [],\n sortOperation: TableColumnSortOperation.basic,\n validator: new TableColumnIconValidator()\n };\n }\n\n protected override createColumnConfig(\n mappingConfigs: MappingConfigs\n ): TableColumnEnumColumnConfig {\n return {\n mappingConfigs\n };\n }\n\n protected createMappingConfig(mapping: Mapping<unknown>): MappingConfig {\n if (mapping instanceof MappingIcon) {\n return new MappingIconConfig(\n mapping.resolvedIcon,\n mapping.severity,\n mapping.text\n );\n }\n if (mapping instanceof MappingSpinner) {\n return new MappingSpinnerConfig(mapping.text);\n }\n // Getting here would indicate a programming error, b/c validation will prevent\n // this function from running when there is an unsupported mapping.\n throw new Error('Unsupported mapping');\n }\n}\n\nconst nimbleTableColumnIcon = TableColumnIcon.compose({\n baseName: 'table-column-icon',\n template,\n styles\n});\n\nDesignSystem.getOrCreate()\n .withPrefix('nimble')\n .register(nimbleTableColumnIcon());\nexport const tableColumnIconTag = 'nimble-table-column-icon';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAEH,mBAAmB,EAEtB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,EAAE,6BAA6B,EAAE,MAAM,mCAAmC,CAAC;AAClF,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AAEhF,OAAO,EAAE,iCAAiC,EAAE,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AAGzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAC5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,4CAA4C,CAAC;AAQlF;;GAEG;AACH,MAAM,OAAO,eAAgB,SAAQ,uBAAuB,CACxD,6BAA6B,CACzB,CAAA,mBAGC,CAAA,CACJ,CACJ;IACsB,yBAAyB;QACxC,OAAO;YACH,oBAAoB,EAAE,CAAC,OAAO,CAAC;YAC/B,WAAW,EAAE,0BAA0B;YACvC,kBAAkB,EAAE,iCAAiC;YACrD,eAAe,EAAE,EAAE;YACnB,aAAa,EAAE,wBAAwB,CAAC,KAAK;YAC7C,SAAS,EAAE,IAAI,wBAAwB,EAAE;SAC5C,CAAC;IACN,CAAC;IAEkB,kBAAkB,CACjC,cAA8B;QAE9B,OAAO;YACH,cAAc;SACjB,CAAC;IACN,CAAC;IAES,mBAAmB,CAAC,OAAyB;QACnD,IAAI,OAAO,YAAY,WAAW,EAAE;YAChC,OAAO,IAAI,iBAAiB,CACxB,OAAO,CAAC,YAAY,EACpB,OAAO,CAAC,QAAQ,EAChB,OAAO,CAAC,IAAI,EACZ,OAAO,CAAC,UAAU,CACrB,CAAC;SACL;QACD,IAAI,OAAO,YAAY,cAAc,EAAE;YACnC,OAAO,IAAI,oBAAoB,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;SACrE;QACD,+EAA+E;QAC/E,mEAAmE;QACnE,MAAM,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAC;IAC3C,CAAC;CACJ;AAED,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,0BAA0B,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport {\n MappingConfigs,\n TableColumnEnumBase,\n TableColumnEnumColumnConfig\n} from '../enum-base';\nimport { styles } from '../enum-base/styles';\nimport { template } from '../enum-base/template';\nimport { TableColumnSortOperation } from '../base/types';\nimport { mixinGroupableColumnAPI } from '../mixins/groupable-column';\nimport { mixinFractionalWidthColumnAPI } from '../mixins/fractional-width-column';\nimport { MappingSpinner } from '../../mapping/spinner';\nimport { MappingIcon } from '../../mapping/icon';\nimport { TableColumnIconValidator } from './models/table-column-icon-validator';\nimport type { ColumnInternalsOptions } from '../base/models/column-internals';\nimport { tableColumnIconGroupHeaderViewTag } from './group-header-view';\nimport { tableColumnIconCellViewTag } from './cell-view';\nimport type { Mapping } from '../../mapping/base';\nimport type { MappingConfig } from '../enum-base/models/mapping-config';\nimport { MappingIconConfig } from '../enum-base/models/mapping-icon-config';\nimport { MappingSpinnerConfig } from '../enum-base/models/mapping-spinner-config';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-table-column-icon': TableColumnIcon;\n }\n}\n\n/**\n * Table column that maps values to icons / spinners\n */\nexport class TableColumnIcon extends mixinGroupableColumnAPI(\n mixinFractionalWidthColumnAPI(\n TableColumnEnumBase<\n TableColumnEnumColumnConfig,\n TableColumnIconValidator\n >\n )\n) {\n protected override getColumnInternalsOptions(): ColumnInternalsOptions<TableColumnIconValidator> {\n return {\n cellRecordFieldNames: ['value'],\n cellViewTag: tableColumnIconCellViewTag,\n groupHeaderViewTag: tableColumnIconGroupHeaderViewTag,\n delegatedEvents: [],\n sortOperation: TableColumnSortOperation.basic,\n validator: new TableColumnIconValidator()\n };\n }\n\n protected override createColumnConfig(\n mappingConfigs: MappingConfigs\n ): TableColumnEnumColumnConfig {\n return {\n mappingConfigs\n };\n }\n\n protected createMappingConfig(mapping: Mapping<unknown>): MappingConfig {\n if (mapping instanceof MappingIcon) {\n return new MappingIconConfig(\n mapping.resolvedIcon,\n mapping.severity,\n mapping.text,\n mapping.textHidden\n );\n }\n if (mapping instanceof MappingSpinner) {\n return new MappingSpinnerConfig(mapping.text, mapping.textHidden);\n }\n // Getting here would indicate a programming error, b/c validation will prevent\n // this function from running when there is an unsupported mapping.\n throw new Error('Unsupported mapping');\n }\n}\n\nconst nimbleTableColumnIcon = TableColumnIcon.compose({\n baseName: 'table-column-icon',\n template,\n styles\n});\n\nDesignSystem.getOrCreate()\n .withPrefix('nimble')\n .register(nimbleTableColumnIcon());\nexport const tableColumnIconTag = 'nimble-table-column-icon';\n"]}
@@ -0,0 +1,23 @@
1
+ import type { TablePageObject } from '../../../table/testing/table.pageobject';
2
+ import type { TableRecord } from '../../../table/types';
3
+ /**
4
+ * Page object for `nimble-table-column-icon`.
5
+ */
6
+ export declare class TableColumnIconPageObject<T extends TableRecord> {
7
+ private readonly tablePageObject;
8
+ constructor(tablePageObject: TablePageObject<T>);
9
+ getRenderedCellIconSeverity(rowIndex: number, columnIndex: number): string;
10
+ getRenderedCellIconAriaLabel(rowIndex: number, columnIndex: number): string;
11
+ getRenderedCellIconAriaHidden(rowIndex: number, columnIndex: number): string;
12
+ getRenderedGroupHeaderIconAriaHidden(groupRowIndex: number): string;
13
+ getRenderedCellIconTitle(rowIndex: number, columnIndex: number): string;
14
+ getRenderedGroupHeaderIconTagName(groupRowIndex: number): string;
15
+ getRenderedCellTextTitle(rowIndex: number, columnIndex: number): string;
16
+ getRenderedGroupHeaderTextTitle(groupRowIndex: number): string;
17
+ getRenderedCellText(rowIndex: number, columnIndex: number): string;
18
+ getRenderedGroupHeaderText(groupRowIndex: number): string;
19
+ dispatchEventToCellText(rowIndex: number, columnIndex: number, event: Event): boolean | undefined;
20
+ dispatchEventToGroupHeaderText(groupRowIndex: number, event: Event): boolean | undefined;
21
+ private getRenderedIconOrSpinner;
22
+ private getRenderedTextElement;
23
+ }