@ixfx/components 0.11.4 → 0.11.6

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 (113) hide show
  1. package/bundle/index.d.ts +451 -120
  2. package/bundle/index.d.ts.map +1 -1
  3. package/bundle/index.js +2267 -540
  4. package/bundle/index.js.map +1 -1
  5. package/dist/ac-text.d.ts +1 -1
  6. package/dist/{ac-token-TCLAZeVg.d.ts → ac-token--_vCHXWw.d.ts} +2 -2
  7. package/dist/{ac-token-TCLAZeVg.d.ts.map → ac-token--_vCHXWw.d.ts.map} +1 -1
  8. package/dist/ac-token.d.ts +1 -1
  9. package/dist/{button-CTL45aBl.d.ts → button-BYuf72aR.d.ts} +2 -2
  10. package/dist/{button-CTL45aBl.d.ts.map → button-BYuf72aR.d.ts.map} +1 -1
  11. package/dist/button.d.ts +1 -1
  12. package/dist/colour-picker.d.ts +1 -1
  13. package/dist/crumbs.d.ts +3 -3
  14. package/dist/crumbs.js +1 -1
  15. package/dist/{data-grid-CfiaBqTA.d.ts → data-grid-C6EjCe5O.d.ts} +48 -6
  16. package/dist/data-grid-C6EjCe5O.d.ts.map +1 -0
  17. package/dist/data-grid.d.ts +3 -3
  18. package/dist/data-grid.js +67 -3
  19. package/dist/data-grid.js.map +1 -1
  20. package/dist/{detail-list-DxQZkK-C.d.ts → detail-list-CmdCxddo.d.ts} +22 -5
  21. package/dist/detail-list-CmdCxddo.d.ts.map +1 -0
  22. package/dist/detail-list.d.ts +3 -3
  23. package/dist/detail-list.js +67 -4
  24. package/dist/detail-list.js.map +1 -1
  25. package/dist/{grid-list-k89JpiNy.js → grid-list-3fGhdaFA.js} +92 -7
  26. package/dist/grid-list-3fGhdaFA.js.map +1 -0
  27. package/dist/{grid-list-ChgYpUUq.d.ts → grid-list-D6AfWfwn.d.ts} +27 -4
  28. package/dist/grid-list-D6AfWfwn.d.ts.map +1 -0
  29. package/dist/grid-list.d.ts +2 -2
  30. package/dist/grid-list.js +1 -1
  31. package/dist/{grouped-item-lister-Bhyo-dkH.d.ts → grouped-item-lister-DETte0Dh.d.ts} +2 -2
  32. package/dist/{grouped-item-lister-Bhyo-dkH.d.ts.map → grouped-item-lister-DETte0Dh.d.ts.map} +1 -1
  33. package/dist/grouped-item-lister.d.ts +1 -1
  34. package/dist/{icon-DR_3rSyZ.d.ts → icon-CDGprSdE.d.ts} +2 -2
  35. package/dist/icon-CDGprSdE.d.ts.map +1 -0
  36. package/dist/icons.d.ts +2 -2
  37. package/dist/incr-search.d.ts +1 -1
  38. package/dist/{index-CHbuPyLL.d.ts → index-CMsmZ6Or.d.ts} +4 -4
  39. package/dist/{index-CHbuPyLL.d.ts.map → index-CMsmZ6Or.d.ts.map} +1 -1
  40. package/dist/{index-garxxqgV.d.ts → index-CYndvTWH.d.ts} +2 -2
  41. package/dist/{index-garxxqgV.d.ts.map → index-CYndvTWH.d.ts.map} +1 -1
  42. package/dist/{index-BUB5SICW.d.ts → index-CoqtMSd9.d.ts} +2 -2
  43. package/dist/{index-BUB5SICW.d.ts.map → index-CoqtMSd9.d.ts.map} +1 -1
  44. package/dist/{index-CDllxjVG.d.ts → index-DyTSt9OK.d.ts} +4 -4
  45. package/dist/{index-CDllxjVG.d.ts.map → index-DyTSt9OK.d.ts.map} +1 -1
  46. package/dist/{index-CJ5fshD3.d.ts → index-UvnoZUAo.d.ts} +2 -2
  47. package/dist/{index-CJ5fshD3.d.ts.map → index-UvnoZUAo.d.ts.map} +1 -1
  48. package/dist/{index-BOUaDIW-.d.ts → index-tq6f8007.d.ts} +2 -2
  49. package/dist/{index-BOUaDIW-.d.ts.map → index-tq6f8007.d.ts.map} +1 -1
  50. package/dist/index.d.ts +337 -140
  51. package/dist/index.d.ts.map +1 -1
  52. package/dist/index.js +2038 -646
  53. package/dist/index.js.map +1 -1
  54. package/dist/item-appearance-BjcMyauw.js +31 -0
  55. package/dist/item-appearance-BjcMyauw.js.map +1 -0
  56. package/dist/{labelled-input-base-Dp_9KP0G.d.ts → labelled-input-base-DiTme1JO.d.ts} +2 -2
  57. package/dist/{labelled-input-base-Dp_9KP0G.d.ts.map → labelled-input-base-DiTme1JO.d.ts.map} +1 -1
  58. package/dist/labelled-radial-input.d.ts +2 -2
  59. package/dist/labelled-radial-input.d.ts.map +1 -1
  60. package/dist/labelled-range-input.d.ts +1 -1
  61. package/dist/labelled-slider-input.d.ts +1 -1
  62. package/dist/{list-native-drag-controller-B9reY4uM.d.ts → list-native-drag-controller-CllsHLxw.d.ts} +2 -2
  63. package/dist/{list-native-drag-controller-B9reY4uM.d.ts.map → list-native-drag-controller-CllsHLxw.d.ts.map} +1 -1
  64. package/dist/{menu-BHT6HRND.js → menu-CsBUyUuS.js} +2 -2
  65. package/dist/{menu-BHT6HRND.js.map → menu-CsBUyUuS.js.map} +1 -1
  66. package/dist/{menu-item-DlxAb0Xr.d.ts → menu-item-BbgdcwBX.d.ts} +11 -2
  67. package/dist/menu-item-BbgdcwBX.d.ts.map +1 -0
  68. package/dist/{menu-item-JcpHCyF0.js → menu-item-CfndBGO8.js} +38 -3
  69. package/dist/menu-item-CfndBGO8.js.map +1 -0
  70. package/dist/menu.d.ts +2 -2
  71. package/dist/menu.js +2 -2
  72. package/dist/miller.d.ts +3 -3
  73. package/dist/miller.d.ts.map +1 -1
  74. package/dist/miller.js +18 -2
  75. package/dist/miller.js.map +1 -1
  76. package/dist/panel.d.ts +1 -1
  77. package/dist/{split-layout-C5SYbDrq.d.ts → split-layout-JK3xWVX2.d.ts} +2 -2
  78. package/dist/{split-layout-C5SYbDrq.d.ts.map → split-layout-JK3xWVX2.d.ts.map} +1 -1
  79. package/dist/split-layout.d.ts +1 -1
  80. package/dist/{tab-list-v8mKX7Fu.d.ts → tab-list-pqfKaVAE.d.ts} +2 -2
  81. package/dist/{tab-list-v8mKX7Fu.d.ts.map → tab-list-pqfKaVAE.d.ts.map} +1 -1
  82. package/dist/tabs.d.ts +1 -1
  83. package/dist/{titlebar-B5zSTZnF.d.ts → titlebar-Tqu-VvMU.d.ts} +2 -2
  84. package/dist/{titlebar-B5zSTZnF.d.ts.map → titlebar-Tqu-VvMU.d.ts.map} +1 -1
  85. package/dist/titlebar.d.ts +1 -1
  86. package/dist/{tree-component-CMGeqyjZ.d.ts → tree-component-DukLqesg.d.ts} +2 -2
  87. package/dist/{tree-component-CMGeqyjZ.d.ts.map → tree-component-DukLqesg.d.ts.map} +1 -1
  88. package/dist/tree.d.ts +4 -4
  89. package/dist/{types-3Jfcaxvo.d.ts → types-D-kYF16b.d.ts} +21 -1
  90. package/dist/types-D-kYF16b.d.ts.map +1 -0
  91. package/dist/{vertical-list-R25WqAVO.d.ts → vertical-list-DTp-UIUE.d.ts} +26 -3
  92. package/dist/vertical-list-DTp-UIUE.d.ts.map +1 -0
  93. package/dist/vertical-list.d.ts +2 -2
  94. package/dist/vertical-list.js +53 -4
  95. package/dist/vertical-list.js.map +1 -1
  96. package/docs-user/data-grid.md +51 -1
  97. package/docs-user/detail-list.md +46 -0
  98. package/docs-user/grid-list.md +49 -2
  99. package/docs-user/hyperbolic-tree.md +98 -18
  100. package/docs-user/index.json +2 -2
  101. package/docs-user/menu.md +30 -9
  102. package/docs-user/miller.md +52 -7
  103. package/docs-user/vertical-list.md +63 -0
  104. package/package.json +1 -1
  105. package/dist/data-grid-CfiaBqTA.d.ts.map +0 -1
  106. package/dist/detail-list-DxQZkK-C.d.ts.map +0 -1
  107. package/dist/grid-list-ChgYpUUq.d.ts.map +0 -1
  108. package/dist/grid-list-k89JpiNy.js.map +0 -1
  109. package/dist/icon-DR_3rSyZ.d.ts.map +0 -1
  110. package/dist/menu-item-DlxAb0Xr.d.ts.map +0 -1
  111. package/dist/menu-item-JcpHCyF0.js.map +0 -1
  112. package/dist/types-3Jfcaxvo.d.ts.map +0 -1
  113. package/dist/vertical-list-R25WqAVO.d.ts.map +0 -1
package/dist/ac-text.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import "./icon-DR_3rSyZ.js";
1
+ import "./icon-CDGprSdE.js";
2
2
  import { LitElement, PropertyValues } from "lit";
3
3
  //#region src/ac-text/ac-text.d.ts
4
4
  type AcTextItem = {
@@ -1,4 +1,4 @@
1
- import "./icon-DR_3rSyZ.js";
1
+ import "./icon-CDGprSdE.js";
2
2
  import { r as IDataProvider } from "./data-provider-BAn_-oR1.js";
3
3
  import { LitElement, PropertyValues } from "lit";
4
4
  //#region src/ac-token/types.d.ts
@@ -104,4 +104,4 @@ interface AcTokenElement {
104
104
  }
105
105
  //#endregion
106
106
  export { AcTokenItem as a, AcTokenizerFn as c, AcTokenElementEventMap as i, AcTokensChangeDetail as l, AcTokenAddDetail as n, AcTokenRemoveDetail as o, AcTokenAddEvent as r, AcTokenRemoveEvent as s, AcTokenElement as t, AcTokensChangeEvent as u };
107
- //# sourceMappingURL=ac-token-TCLAZeVg.d.ts.map
107
+ //# sourceMappingURL=ac-token--_vCHXWw.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ac-token-TCLAZeVg.d.ts","names":[],"sources":["../src/ac-token/types.ts","../src/ac-token/ac-token.ts"],"mappings":";;;;KAAY;WACD;WACA;WACA;WACA;WACA;WACA,YAAY;;KAGX,iBAAiB;KAEjB;WACD,iBAAiB;;KAEhB,sBAAsB,YAAY;KAElC;WACD,MAAM;WACN;;KAEC,kBAAkB,YAAY;KAE9B;WACD,MAAM;WACN;;KAEC,qBAAqB,YAAY;UAE5B;EACf,mBAAmB;EACnB,gBAAgB;EAChB,mBAAmB;;;;;;;;;;;;;;;;;;;;cCgDR,uBAAuB;;;EAGlC,oBAAoB,sBAAsB;;EAI1C,WAAW;;EAIX;;EAIA;;EAIA;;;;;EAOA;;;;;;EAQA;UAEiB;UACA;UACA;UACA;UAET;;MAqBJ,mBAAmB;MAInB,OAAO,gBAAgB;;;;;;;EAW3B,UAAU,gBAAgB;;MAKtB;EAMK;EAKA;YASU,QAAQ,cAAc;YA6btB,wBAAM;SA+BT,sBAAM;;QAkLhB;YACI;IACR,iBAAiB;;;UAIJ;EACf,oBAAoB,gBAAgB,wBAClC,MAAM,GACN,WAAW,MAAM,gBAAgB,OAAO,uBAAuB,aAC/D,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB"}
1
+ {"version":3,"file":"ac-token--_vCHXWw.d.ts","names":[],"sources":["../src/ac-token/types.ts","../src/ac-token/ac-token.ts"],"mappings":";;;;KAAY;WACD;WACA;WACA;WACA;WACA;WACA,YAAY;;KAGX,iBAAiB;KAEjB;WACD,iBAAiB;;KAEhB,sBAAsB,YAAY;KAElC;WACD,MAAM;WACN;;KAEC,kBAAkB,YAAY;KAE9B;WACD,MAAM;WACN;;KAEC,qBAAqB,YAAY;UAE5B;EACf,mBAAmB;EACnB,gBAAgB;EAChB,mBAAmB;;;;;;;;;;;;;;;;;;;;cCgDR,uBAAuB;;;EAGlC,oBAAoB,sBAAsB;;EAI1C,WAAW;;EAIX;;EAIA;;EAIA;;;;;EAOA;;;;;;EAQA;UAEiB;UACA;UACA;UACA;UAET;;MAqBJ,mBAAmB;MAInB,OAAO,gBAAgB;;;;;;;EAW3B,UAAU,gBAAgB;;MAKtB;EAMK;EAKA;YASU,QAAQ,cAAc;YA6btB,wBAAM;SA+BT,sBAAM;;QAkLhB;YACI;IACR,iBAAiB;;;UAIJ;EACf,oBAAoB,gBAAgB,wBAClC,MAAM,GACN,WAAW,MAAM,gBAAgB,OAAO,uBAAuB,aAC/D,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB"}
@@ -1,2 +1,2 @@
1
- import { a as AcTokenItem, c as AcTokenizerFn, i as AcTokenElementEventMap, l as AcTokensChangeDetail, n as AcTokenAddDetail, o as AcTokenRemoveDetail, r as AcTokenAddEvent, s as AcTokenRemoveEvent, t as AcTokenElement, u as AcTokensChangeEvent } from "./ac-token-TCLAZeVg.js";
1
+ import { a as AcTokenItem, c as AcTokenizerFn, i as AcTokenElementEventMap, l as AcTokensChangeDetail, n as AcTokenAddDetail, o as AcTokenRemoveDetail, r as AcTokenAddEvent, s as AcTokenRemoveEvent, t as AcTokenElement, u as AcTokensChangeEvent } from "./ac-token--_vCHXWw.js";
2
2
  export { type AcTokenAddDetail, type AcTokenAddEvent, AcTokenElement, type AcTokenElementEventMap, type AcTokenItem, type AcTokenRemoveDetail, type AcTokenRemoveEvent, type AcTokenizerFn, type AcTokensChangeDetail, type AcTokensChangeEvent };
@@ -43,7 +43,7 @@ declare class ButtonElement extends LitElement {
43
43
  * attribute).
44
44
  */
45
45
  value: boolean;
46
- protected _renderIcon(): import("lit").TemplateResult<1> | typeof nothing;
46
+ protected _renderIcon(): typeof nothing | import("lit").TemplateResult<1>;
47
47
  protected render(): import("lit").TemplateResult<1>;
48
48
  static styles: import("lit").CSSResult[];
49
49
  }
@@ -60,4 +60,4 @@ interface ButtonElement {
60
60
  }
61
61
  //#endregion
62
62
  export { ItemsProvider as a, SplitButtonSelectEvent as c, ButtonToggleEvent as i, SwitcherItem as l, ButtonElementEventMap as n, PopupItem as o, ButtonToggleDetail as r, SplitButtonSelectDetail as s, ButtonElement as t };
63
- //# sourceMappingURL=button-CTL45aBl.d.ts.map
63
+ //# sourceMappingURL=button-BYuf72aR.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"button-CTL45aBl.d.ts","names":[],"sources":["../src/button/types.ts","../src/button/button.ts"],"mappings":";;KAAY;WACD;WACA;;KAGC,yBAAyB,YAAY;KAErC;WACD;WACA;WACA;;KAGC;WACD;WACA;WACA;WACA;;KAGC,sBAAsB,cAAc,QAAQ;KAE5C;WACD;;KAGC,oBAAoB,YAAY;;;cCf/B,sBAAsB;;EAEjC;EAGA;EAGA;EAGA;EAGA;EAGA;;;;;;EAQA;;;;;;EAQA;YAaU,6BAAW,2BAAA;YAcX,wBAAM;SAQT,sBAAM;;QAMP;YACI;IACR,eAAe;;;UAIF;EACf,QAAQ;;UAGO;EACf,oBAAoB,gBAAgB,uBAClC,MAAM,GACN,WAAW,MAAM,eAAe,OAAO,sBAAsB,aAC7D,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB"}
1
+ {"version":3,"file":"button-BYuf72aR.d.ts","names":[],"sources":["../src/button/types.ts","../src/button/button.ts"],"mappings":";;KAAY;WACD;WACA;;KAGC,yBAAyB,YAAY;KAErC;WACD;WACA;WACA;;KAGC;WACD;WACA;WACA;WACA;;KAGC,sBAAsB,cAAc,QAAQ;KAE5C;WACD;;KAGC,oBAAoB,YAAY;;;cCf/B,sBAAsB;;EAEjC;EAGA;EAGA;EAGA;EAGA;EAGA;;;;;;EAQA;;;;;;EAQA;YAaU,sBAAW,wBAAA;YAcX,wBAAM;SAQT,sBAAM;;QAMP;YACI;IACR,eAAe;;;UAIF;EACf,QAAQ;;UAGO;EACf,oBAAoB,gBAAgB,uBAClC,MAAM,GACN,WAAW,MAAM,eAAe,OAAO,sBAAsB,aAC7D,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB"}
package/dist/button.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { n as ButtonElementEventMap, t as ButtonElement } from "./button-CTL45aBl.js";
1
+ import { n as ButtonElementEventMap, t as ButtonElement } from "./button-BYuf72aR.js";
2
2
  export { ButtonElement, ButtonElementEventMap };
@@ -1,2 +1,2 @@
1
- import { a as ColourPickerInputEvent, i as ColourPickerEventDetail, n as ColourPicker, o as OklchValue, r as ColourPickerChangeEvent, t as ColourPickerPopup } from "./index-BOUaDIW-.js";
1
+ import { a as ColourPickerInputEvent, i as ColourPickerEventDetail, n as ColourPicker, o as OklchValue, r as ColourPickerChangeEvent, t as ColourPickerPopup } from "./index-tq6f8007.js";
2
2
  export { ColourPicker, type ColourPickerChangeEvent, type ColourPickerEventDetail, type ColourPickerInputEvent, ColourPickerPopup, type OklchValue };
package/dist/crumbs.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- import { E as TreeSelectEvent, O as TreeTickleEvent, a as TreeComponent, k as TreeDataModel, n as TreeActivateEvent, o as TreeComponentEventMap, x as TreeItemClickEvent, y as TreeExpandEvent } from "./tree-component-CMGeqyjZ.js";
2
- import { n as TreeExclusivity, o as TreeNode, r as TreeFilterPredicate, s as TreeSelectionFilter, t as LoadChildrenCallback } from "./types-3Jfcaxvo.js";
3
- import "./menu-item-DlxAb0Xr.js";
1
+ import { E as TreeSelectEvent, O as TreeTickleEvent, a as TreeComponent, k as TreeDataModel, n as TreeActivateEvent, o as TreeComponentEventMap, x as TreeItemClickEvent, y as TreeExpandEvent } from "./tree-component-DukLqesg.js";
2
+ import { n as TreeExclusivity, o as TreeNode, r as TreeFilterPredicate, s as TreeSelectionFilter, t as LoadChildrenCallback } from "./types-D-kYF16b.js";
3
+ import "./menu-item-BbgdcwBX.js";
4
4
  import "./narrowed-text.js";
5
5
  import { LitElement, PropertyValues } from "lit";
6
6
  //#region src/crumbs/crumb-navigation.d.ts
package/dist/crumbs.js CHANGED
@@ -3,7 +3,7 @@ import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrA
3
3
  import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
4
4
  import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
5
5
  import "./interaction-BskmlA9t.js";
6
- import "./menu-item-JcpHCyF0.js";
6
+ import "./menu-item-CfndBGO8.js";
7
7
  import { t as collectDataResult } from "./data-provider-35TyWclX.js";
8
8
  import { t as scrollFadeStyles } from "./scroll-fade-BrNUIYnm.js";
9
9
  import "./narrowed-text.js";
@@ -1,8 +1,8 @@
1
- import "./icon-DR_3rSyZ.js";
2
- import { F as ListDragPreviewSourceResolver, P as ListDragPreviewRenderer, R as ListNativeDragStartEvent } from "./tree-component-CMGeqyjZ.js";
1
+ import "./icon-CDGprSdE.js";
2
+ import { F as ListDragPreviewSourceResolver, P as ListDragPreviewRenderer, R as ListNativeDragStartEvent } from "./tree-component-DukLqesg.js";
3
3
  import { n as ListViewportChangeEvent, t as ListViewportChangeDetail } from "./list-viewport-types-BRZsLcvp.js";
4
- import { S as ListSearchController } from "./index-CHbuPyLL.js";
5
- import "./index-CDllxjVG.js";
4
+ import { S as ListSearchController } from "./index-CMsmZ6Or.js";
5
+ import "./index-DyTSt9OK.js";
6
6
  import "./pan-text-CoYmt2qd.js";
7
7
  import { LitElement } from "lit";
8
8
  import { CommandId, CommandRegistry } from "@clinth/ui-commands";
@@ -51,6 +51,27 @@ type DataGridColumn<R = unknown> = {
51
51
  formatter?: (value: unknown, row: R, col: DataGridColumn<R>) => unknown;
52
52
  };
53
53
  type GlobalFormatter = (value: unknown, columnName: string, row: unknown) => unknown;
54
+ /**
55
+ * Optional appearance fields a row may carry, honoured only in the column
56
+ * nominated by the matching grid property (`textColorColumn`, `iconColumn`,
57
+ * `badgeColumn`). Read off the *row*, not off the nominated column's own
58
+ * value, so one row can tint just one of its cells:
59
+ *
60
+ * ```ts
61
+ * grid.textColorColumn = 'status';
62
+ * grid.rows = [{ status: 'failed', statusTextColor: 'crimson' }];
63
+ * ```
64
+ */
65
+ type DataGridRowLook = {
66
+ /** CSS colour applied to the cell nominated by `textColorColumn`. */
67
+ textColor?: string;
68
+ /** Icon content for the cell nominated by `iconColumn` — anything Lit can render. */
69
+ icon?: unknown;
70
+ /** CSS colour tinting the row's `icon`. */
71
+ iconColor?: string;
72
+ /** Finder-style badge for the cell nominated by `badgeColumn` — anything Lit can render. */
73
+ badge?: unknown;
74
+ };
54
75
  type DataGridEditability = `disabled` | `manual` | `user` | `immediate`;
55
76
  /**
56
77
  * How cell text that's too long for its column width is handled.
@@ -164,6 +185,20 @@ declare class DataGridElement extends LitElement {
164
185
  */
165
186
  columnMenu: DataGridColumnMenu;
166
187
  globalFormatter?: GlobalFormatter;
188
+ /**
189
+ * Key of the column whose cell text takes the row's `textColor` — e.g. a
190
+ * status column that renders a red "Failed" only on some rows.
191
+ */
192
+ textColorColumn: string;
193
+ /**
194
+ * Key of the column that renders the row's `icon` (tinted by `iconColor`).
195
+ */
196
+ iconColumn: string;
197
+ /**
198
+ * Key of the column that renders the row's `badge`, right-justified in the
199
+ * cell after the cell's own value.
200
+ */
201
+ badgeColumn: string;
167
202
  /**
168
203
  * Predicate used by incremental filter-search (and callable directly). Rows
169
204
  * for which it returns `false` are dropped from the flat list — hidden from
@@ -291,6 +326,13 @@ declare class DataGridElement extends LitElement {
291
326
  stopEdit(): void;
292
327
  setColumnFormatter(columnKey: string, formatter: ((value: unknown) => unknown) | BuiltInFormatterName | null, options?: BuiltInFormatterOptions): void;
293
328
  private _formatValue;
329
+ /**
330
+ * Resolve the per-row appearance for the cell at `colKey`, honouring the
331
+ * nominated columns. Additive — `col.renderer` / `col.formatter` still own
332
+ * the cell's value; this only decorates it. Returns all-`undefined` for
333
+ * every cell when nothing is nominated (the common case).
334
+ */
335
+ private _cellLook;
294
336
  private _handleCellSecondClick;
295
337
  private _commitEdit;
296
338
  private _suppressBlurCommit;
@@ -337,5 +379,5 @@ interface DataGridElement {
337
379
  removeEventListener: (<K extends keyof DataGridElementEventMap>(type: K, listener: (this: DataGridElement, event: DataGridElementEventMap[K]) => void, options?: boolean | EventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions) => void);
338
380
  }
339
381
  //#endregion
340
- export { DataGridEditorFactory as A, BuiltInFormatterName as C, DataGridDataType as D, DataGridColumnMenu as E, DataGridInteractionMode as F, DataGridSelectionMode as I, DataGridSortDirection as L, DataGridGetRowKey as M, DataGridGroupBy as N, DataGridEditability as O, DataGridGroupLabel as P, DataGridSortState as R, DataGridViewportChangeEvent as S, DataGridColumn as T, DataGridSelectDetail as _, DataGridColumnReorderDetail as a, DataGridSortEvent as b, DataGridColumnResizeEvent as c, DataGridElement as d, DataGridElementEventMap as f, DataGridRowActivateEvent as g, DataGridRowActivateDetail as h, DataGridCellEditEvent as i, DataGridEditorType as j, DataGridEditorContext as k, DataGridColumnVisibilityDetail as l, DataGridGroupChangeEvent as m, DataGridCellClickEvent as n, DataGridColumnReorderEvent as o, DataGridGroupChangeDetail as p, DataGridCellEditDetail as r, DataGridColumnResizeDetail as s, DataGridCellClickDetail as t, DataGridColumnVisibilityEvent as u, DataGridSelectEvent as v, BuiltInFormatterOptions as w, DataGridViewportChangeDetail as x, DataGridSortDetail as y, GlobalFormatter as z };
341
- //# sourceMappingURL=data-grid-CfiaBqTA.d.ts.map
382
+ export { DataGridEditorFactory as A, GlobalFormatter as B, BuiltInFormatterName as C, DataGridDataType as D, DataGridColumnMenu as E, DataGridInteractionMode as F, DataGridRowLook as I, DataGridSelectionMode as L, DataGridGetRowKey as M, DataGridGroupBy as N, DataGridEditability as O, DataGridGroupLabel as P, DataGridSortDirection as R, DataGridViewportChangeEvent as S, DataGridColumn as T, DataGridSelectDetail as _, DataGridColumnReorderDetail as a, DataGridSortEvent as b, DataGridColumnResizeEvent as c, DataGridElement as d, DataGridElementEventMap as f, DataGridRowActivateEvent as g, DataGridRowActivateDetail as h, DataGridCellEditEvent as i, DataGridEditorType as j, DataGridEditorContext as k, DataGridColumnVisibilityDetail as l, DataGridGroupChangeEvent as m, DataGridCellClickEvent as n, DataGridColumnReorderEvent as o, DataGridGroupChangeDetail as p, DataGridCellEditDetail as r, DataGridColumnResizeDetail as s, DataGridCellClickDetail as t, DataGridColumnVisibilityEvent as u, DataGridSelectEvent as v, BuiltInFormatterOptions as w, DataGridViewportChangeDetail as x, DataGridSortDetail as y, DataGridSortState as z };
383
+ //# sourceMappingURL=data-grid-C6EjCe5O.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"data-grid-C6EjCe5O.d.ts","names":[],"sources":["../src/data-grid/types.ts","../src/data-grid/data-grid.ts"],"mappings":"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"}
@@ -1,3 +1,3 @@
1
- import { I as ListDragSource, L as ListNativeDragStartDetail, M as ListDragPreview, N as ListDragPreviewContext, P as ListDragPreviewRenderer, R as ListNativeDragStartEvent, j as ListDragEntry } from "./tree-component-CMGeqyjZ.js";
2
- import { A as DataGridEditorFactory, C as BuiltInFormatterName, D as DataGridDataType, E as DataGridColumnMenu, F as DataGridInteractionMode, I as DataGridSelectionMode, L as DataGridSortDirection, M as DataGridGetRowKey, N as DataGridGroupBy, O as DataGridEditability, P as DataGridGroupLabel, R as DataGridSortState, S as DataGridViewportChangeEvent, T as DataGridColumn, _ as DataGridSelectDetail, a as DataGridColumnReorderDetail, b as DataGridSortEvent, c as DataGridColumnResizeEvent, d as DataGridElement, f as DataGridElementEventMap, g as DataGridRowActivateEvent, h as DataGridRowActivateDetail, i as DataGridCellEditEvent, j as DataGridEditorType, k as DataGridEditorContext, l as DataGridColumnVisibilityDetail, m as DataGridGroupChangeEvent, n as DataGridCellClickEvent, o as DataGridColumnReorderEvent, p as DataGridGroupChangeDetail, r as DataGridCellEditDetail, s as DataGridColumnResizeDetail, t as DataGridCellClickDetail, u as DataGridColumnVisibilityEvent, v as DataGridSelectEvent, w as BuiltInFormatterOptions, x as DataGridViewportChangeDetail, y as DataGridSortDetail, z as GlobalFormatter } from "./data-grid-CfiaBqTA.js";
3
- export { type BuiltInFormatterName, type BuiltInFormatterOptions, DataGridCellClickDetail, DataGridCellClickEvent, DataGridCellEditDetail, DataGridCellEditEvent, type DataGridColumn, type DataGridColumnMenu, DataGridColumnReorderDetail, DataGridColumnReorderEvent, DataGridColumnResizeDetail, DataGridColumnResizeEvent, DataGridColumnVisibilityDetail, DataGridColumnVisibilityEvent, type DataGridDataType, type DataGridEditability, type DataGridEditorContext, type DataGridEditorFactory, type DataGridEditorType, DataGridElement, DataGridElementEventMap, type DataGridGetRowKey, type DataGridGroupBy, DataGridGroupChangeDetail, DataGridGroupChangeEvent, type DataGridGroupLabel, type DataGridInteractionMode, DataGridRowActivateDetail, DataGridRowActivateEvent, DataGridSelectDetail, DataGridSelectEvent, type DataGridSelectionMode, DataGridSortDetail, type DataGridSortDirection, DataGridSortEvent, type DataGridSortState, DataGridViewportChangeDetail, DataGridViewportChangeEvent, type GlobalFormatter, type ListDragEntry, type ListDragPreview, type ListDragPreviewContext, type ListDragPreviewRenderer, type ListDragSource, type ListNativeDragStartDetail, type ListNativeDragStartEvent };
1
+ import { I as ListDragSource, L as ListNativeDragStartDetail, M as ListDragPreview, N as ListDragPreviewContext, P as ListDragPreviewRenderer, R as ListNativeDragStartEvent, j as ListDragEntry } from "./tree-component-DukLqesg.js";
2
+ import { A as DataGridEditorFactory, B as GlobalFormatter, C as BuiltInFormatterName, D as DataGridDataType, E as DataGridColumnMenu, F as DataGridInteractionMode, I as DataGridRowLook, L as DataGridSelectionMode, M as DataGridGetRowKey, N as DataGridGroupBy, O as DataGridEditability, P as DataGridGroupLabel, R as DataGridSortDirection, S as DataGridViewportChangeEvent, T as DataGridColumn, _ as DataGridSelectDetail, a as DataGridColumnReorderDetail, b as DataGridSortEvent, c as DataGridColumnResizeEvent, d as DataGridElement, f as DataGridElementEventMap, g as DataGridRowActivateEvent, h as DataGridRowActivateDetail, i as DataGridCellEditEvent, j as DataGridEditorType, k as DataGridEditorContext, l as DataGridColumnVisibilityDetail, m as DataGridGroupChangeEvent, n as DataGridCellClickEvent, o as DataGridColumnReorderEvent, p as DataGridGroupChangeDetail, r as DataGridCellEditDetail, s as DataGridColumnResizeDetail, t as DataGridCellClickDetail, u as DataGridColumnVisibilityEvent, v as DataGridSelectEvent, w as BuiltInFormatterOptions, x as DataGridViewportChangeDetail, y as DataGridSortDetail, z as DataGridSortState } from "./data-grid-C6EjCe5O.js";
3
+ export { type BuiltInFormatterName, type BuiltInFormatterOptions, DataGridCellClickDetail, DataGridCellClickEvent, DataGridCellEditDetail, DataGridCellEditEvent, type DataGridColumn, type DataGridColumnMenu, DataGridColumnReorderDetail, DataGridColumnReorderEvent, DataGridColumnResizeDetail, DataGridColumnResizeEvent, DataGridColumnVisibilityDetail, DataGridColumnVisibilityEvent, type DataGridDataType, type DataGridEditability, type DataGridEditorContext, type DataGridEditorFactory, type DataGridEditorType, DataGridElement, DataGridElementEventMap, type DataGridGetRowKey, type DataGridGroupBy, DataGridGroupChangeDetail, DataGridGroupChangeEvent, type DataGridGroupLabel, type DataGridInteractionMode, DataGridRowActivateDetail, DataGridRowActivateEvent, type DataGridRowLook, DataGridSelectDetail, DataGridSelectEvent, type DataGridSelectionMode, DataGridSortDetail, type DataGridSortDirection, DataGridSortEvent, type DataGridSortState, DataGridViewportChangeDetail, DataGridViewportChangeEvent, type GlobalFormatter, type ListDragEntry, type ListDragPreview, type ListDragPreviewContext, type ListDragPreviewRenderer, type ListDragSource, type ListNativeDragStartDetail, type ListNativeDragStartEvent };
package/dist/data-grid.js CHANGED
@@ -9,14 +9,21 @@ import { t as ListNativeDragController } from "./list-native-drag-controller-B9x
9
9
  import { i as listItemFadeKeyframes } from "./list-item-animation-BUoEKi5s.js";
10
10
  import "./interaction-BskmlA9t.js";
11
11
  import { t as scrollFadeStyles } from "./scroll-fade-BrNUIYnm.js";
12
+ import { n as appearanceColor, t as appearanceAbsent } from "./item-appearance-BjcMyauw.js";
12
13
  import { t as createDragGhost } from "./drag-ghost-DtSDvjri.js";
13
- import "./menu-BHT6HRND.js";
14
+ import "./menu-CsBUyUuS.js";
14
15
  import "./pan-text-CqtvjPyK.js";
15
16
  import { LitElement, css, html, nothing } from "lit";
16
17
  import { property, query, state } from "lit/decorators.js";
17
18
  import { createCommandRegistry } from "@clinth/ui-commands";
18
19
  import { repeat } from "lit/directives/repeat.js";
19
20
  //#region src/data-grid/data-grid.ts
21
+ const EMPTY_CELL_LOOK = {
22
+ textColor: void 0,
23
+ icon: void 0,
24
+ iconColor: void 0,
25
+ badge: void 0
26
+ };
20
27
  /** Shallow key-array equality, treating `undefined` (never dispatched) as different. */
21
28
  function sameKeys(a, b) {
22
29
  if (a === void 0 || a.length !== b.length) return false;
@@ -41,6 +48,9 @@ let DataGridElement = class DataGridElement extends LitElement {
41
48
  this.allowGrouping = false;
42
49
  this.crossGroupSelection = false;
43
50
  this.columnMenu = `auto`;
51
+ this.textColorColumn = ``;
52
+ this.iconColumn = ``;
53
+ this.badgeColumn = ``;
44
54
  this.itemsDraggable = false;
45
55
  this._columnFormatters = /* @__PURE__ */ new Map();
46
56
  this._resizingColKey = void 0;
@@ -460,6 +470,25 @@ let DataGridElement = class DataGridElement extends LitElement {
460
470
  }
461
471
  .cell.editable-text { cursor: text; }
462
472
  .cell input, .cell select { width: 100%; font: inherit; }
473
+ /* Per-row icon / badge, enabled by nominating iconColumn / badgeColumn.
474
+ The badge self-justifies to the cell's trailing edge; the value text
475
+ keeps its own flex sizing so the cell still ellipsises. */
476
+ .cell-icon {
477
+ flex: none;
478
+ display: inline-flex;
479
+ align-items: center;
480
+ justify-content: center;
481
+ margin-inline-end: var(--data-grid-cell-icon-gap, 6px);
482
+ width: var(--data-grid-cell-icon-size, 1em);
483
+ height: var(--data-grid-cell-icon-size, 1em);
484
+ }
485
+ .cell-badge {
486
+ flex: none;
487
+ display: inline-flex;
488
+ align-items: center;
489
+ margin-inline-start: auto;
490
+ padding-inline-start: var(--data-grid-badge-gap, 6px);
491
+ }
463
492
  .checkbox-col { width: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
464
493
  ixfx-menu-trigger { flex-shrink: 0; border-left: var(--border-subtle); background: var(--data-grid-header-bg); display: flex; align-items: center; --ixfx-button-padding: var(--space-s) var(--space-m); min-width: 44px; min-height: var(--data-grid-header-height); justify-content: center; }
465
494
  .header-cell[drag-source] { opacity: 0.4; }
@@ -1231,6 +1260,27 @@ let DataGridElement = class DataGridElement extends LitElement {
1231
1260
  if (this.globalFormatter) return this.globalFormatter(value, col.key, row);
1232
1261
  return value;
1233
1262
  }
1263
+ /**
1264
+ * Resolve the per-row appearance for the cell at `colKey`, honouring the
1265
+ * nominated columns. Additive — `col.renderer` / `col.formatter` still own
1266
+ * the cell's value; this only decorates it. Returns all-`undefined` for
1267
+ * every cell when nothing is nominated (the common case).
1268
+ */
1269
+ _cellLook(row, colKey) {
1270
+ if (this.textColorColumn === `` && this.iconColumn === `` && this.badgeColumn === ``) return EMPTY_CELL_LOOK;
1271
+ const rec = typeof row === `object` && row !== null ? row : {};
1272
+ const textColor = colKey === this.textColorColumn ? appearanceColor(rec.textColor) : void 0;
1273
+ const icon = colKey === this.iconColumn && !appearanceAbsent(rec.icon) ? rec.icon : void 0;
1274
+ const iconColor = icon === void 0 ? void 0 : appearanceColor(rec.iconColor);
1275
+ const badge = colKey === this.badgeColumn && !appearanceAbsent(rec.badge) ? rec.badge : void 0;
1276
+ if (textColor === void 0 && icon === void 0 && badge === void 0) return EMPTY_CELL_LOOK;
1277
+ return {
1278
+ textColor,
1279
+ icon,
1280
+ iconColor,
1281
+ badge
1282
+ };
1283
+ }
1234
1284
  _handleCellSecondClick(rowKey, col) {
1235
1285
  if (this.editability !== `user`) return;
1236
1286
  const now = Date.now();
@@ -1688,7 +1738,9 @@ let DataGridElement = class DataGridElement extends LitElement {
1688
1738
  const textEditable = this._isEditable(row, col) && this._isTextEditor(col);
1689
1739
  const indent = col.align !== `right` && col.align !== `center` && col.reorderable !== false ? `padding-left:calc(var(--space-s) + var(--data-grid-reorder-handle-width, 10px) + var(--space-xs));` : ``;
1690
1740
  const canPan = this.cellOverflow === `pan-text` && !col.renderer && (selected || tickled);
1691
- return html`<div class="cell ${textEditable ? `editable-text` : ``} ${this._animatingColKeys.has(col.key) ? `width-animating` : ``}" data-col=${col.key} style="width:${col.width ?? 150}px; justify-content:${col.align === `right` ? `flex-end` : col.align === `center` ? `center` : `flex-start`}; ${indent}"
1741
+ const look = this._cellLook(row, col.key);
1742
+ const cellStyle = look.textColor === void 0 ? `` : `color:${look.textColor};`;
1743
+ return html`<div class="cell ${textEditable ? `editable-text` : ``} ${this._animatingColKeys.has(col.key) ? `width-animating` : ``}" data-col=${col.key} style="width:${col.width ?? 150}px; justify-content:${col.align === `right` ? `flex-end` : col.align === `center` ? `center` : `flex-start`}; ${indent} ${cellStyle}"
1692
1744
  @click=${(e) => {
1693
1745
  this._lastClickedCell = {
1694
1746
  rowKey,
@@ -1710,7 +1762,7 @@ let DataGridElement = class DataGridElement extends LitElement {
1710
1762
  composed: true
1711
1763
  }));
1712
1764
  }}
1713
- >${canPan ? html`<ixfx-pan-text mode="loop">${cellContent}</ixfx-pan-text>` : cellContent}</div>`;
1765
+ >${look.icon === void 0 ? nothing : html`<span class="cell-icon" part="icon" style=${look.iconColor === void 0 ? nothing : `color:${look.iconColor}`}>${look.icon}</span>`}${canPan ? html`<ixfx-pan-text mode="loop">${cellContent}</ixfx-pan-text>` : cellContent}${look.badge === void 0 ? nothing : html`<span class="cell-badge" part="badge">${look.badge}</span>`}</div>`;
1714
1766
  })}
1715
1767
  </div>
1716
1768
  `;
@@ -1770,6 +1822,18 @@ __decorate([property({
1770
1822
  attribute: `column-menu`
1771
1823
  })], DataGridElement.prototype, "columnMenu", void 0);
1772
1824
  __decorate([property({ attribute: false })], DataGridElement.prototype, "globalFormatter", void 0);
1825
+ __decorate([property({
1826
+ type: String,
1827
+ attribute: `text-color-column`
1828
+ })], DataGridElement.prototype, "textColorColumn", void 0);
1829
+ __decorate([property({
1830
+ type: String,
1831
+ attribute: `icon-column`
1832
+ })], DataGridElement.prototype, "iconColumn", void 0);
1833
+ __decorate([property({
1834
+ type: String,
1835
+ attribute: `badge-column`
1836
+ })], DataGridElement.prototype, "badgeColumn", void 0);
1773
1837
  __decorate([property({ attribute: false })], DataGridElement.prototype, "filterPredicate", void 0);
1774
1838
  __decorate([property({ attribute: false })], DataGridElement.prototype, "rowSearchText", void 0);
1775
1839
  __decorate([property({