@3mo/data-grid 0.8.7-rc.0 → 0.8.7

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 (27) hide show
  1. package/dist/DataGrid.d.ts +1 -2
  2. package/dist/DataGrid.d.ts.map +1 -1
  3. package/dist/DataGrid.js +71 -101
  4. package/dist/DataGridCell.d.ts.map +1 -1
  5. package/dist/DataGridCell.js +4 -10
  6. package/dist/DataGridFooter.js +2 -2
  7. package/dist/DataGridHeader.d.ts +0 -2
  8. package/dist/DataGridHeader.d.ts.map +1 -1
  9. package/dist/DataGridHeader.js +53 -97
  10. package/dist/DataGridHeaderSeparator.d.ts.map +1 -1
  11. package/dist/DataGridHeaderSeparator.js +2 -13
  12. package/dist/DataGridPrimaryContextMenuItem.js +5 -5
  13. package/dist/columns/DataGridColumnComponent.d.ts.map +1 -1
  14. package/dist/columns/DataGridColumnComponent.js +2 -8
  15. package/dist/columns/number/DataGridFooterSum.js +20 -20
  16. package/dist/custom-elements.json +5054 -12
  17. package/dist/excel.svg.js +47 -47
  18. package/dist/index.d.ts +1 -0
  19. package/dist/index.d.ts.map +1 -1
  20. package/dist/index.js +1 -0
  21. package/dist/rows/DataGridDefaultRow.d.ts.map +1 -1
  22. package/dist/rows/DataGridDefaultRow.js +10 -18
  23. package/dist/rows/DataGridRow.d.ts +2 -4
  24. package/dist/rows/DataGridRow.d.ts.map +1 -1
  25. package/dist/rows/DataGridRow.js +28 -83
  26. package/dist/tsconfig.tsbuildinfo +1 -1
  27. package/package.json +2 -1
package/dist/excel.svg.js CHANGED
@@ -1,48 +1,48 @@
1
- export default `<?xml version="1.0" encoding="utf-8"?>
2
- <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
3
- <!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
4
- <!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
5
- <!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
6
- <!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
7
- <!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
8
- <!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
9
- <!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
10
- <!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
11
- ]>
12
- <svg version="1.1" id="Livello_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
13
- xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2289.75 2130"
14
- enable-background="new 0 0 2289.75 2130" xml:space="preserve">
15
- <metadata>
16
- <sfw xmlns="&ns_sfw;">
17
- <slices></slices>
18
- <sliceSourceBounds bottomLeftOrigin="true" height="2130" width="2289.75" x="-1147.5" y="-1041"></sliceSourceBounds>
19
- </sfw>
20
- </metadata>
21
- <path fill="#185C37" d="M1437.75,1011.75L532.5,852v1180.393c0,53.907,43.7,97.607,97.607,97.607l0,0h1562.036
22
- c53.907,0,97.607-43.7,97.607-97.607l0,0V1597.5L1437.75,1011.75z"/>
23
- <path fill="#21A366" d="M1437.75,0H630.107C576.2,0,532.5,43.7,532.5,97.607c0,0,0,0,0,0V532.5l905.25,532.5L1917,1224.75
24
- L2289.75,1065V532.5L1437.75,0z"/>
25
- <path fill="#107C41" d="M532.5,532.5h905.25V1065H532.5V532.5z"/>
26
- <path opacity="0.1" enable-background="new " d="M1180.393,426H532.5v1331.25h647.893c53.834-0.175,97.432-43.773,97.607-97.607
27
- V523.607C1277.825,469.773,1234.227,426.175,1180.393,426z"/>
28
- <path opacity="0.2" enable-background="new " d="M1127.143,479.25H532.5V1810.5h594.643
29
- c53.834-0.175,97.432-43.773,97.607-97.607V576.857C1224.575,523.023,1180.977,479.425,1127.143,479.25z"/>
30
- <path opacity="0.2" enable-background="new " d="M1127.143,479.25H532.5V1704h594.643c53.834-0.175,97.432-43.773,97.607-97.607
31
- V576.857C1224.575,523.023,1180.977,479.425,1127.143,479.25z"/>
32
- <path opacity="0.2" enable-background="new " d="M1073.893,479.25H532.5V1704h541.393c53.834-0.175,97.432-43.773,97.607-97.607
33
- V576.857C1171.325,523.023,1127.727,479.425,1073.893,479.25z"/>
34
- <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="203.5132" y1="1729.0183" x2="967.9868" y2="404.9817" gradientTransform="matrix(1 0 0 -1 0 2132)">
35
- <stop offset="0" style="stop-color:#18884F"/>
36
- <stop offset="0.5" style="stop-color:#117E43"/>
37
- <stop offset="1" style="stop-color:#0B6631"/>
38
- </linearGradient>
39
- <path fill="url(#SVGID_1_)" d="M97.607,479.25h976.285c53.907,0,97.607,43.7,97.607,97.607v976.285
40
- c0,53.907-43.7,97.607-97.607,97.607H97.607C43.7,1650.75,0,1607.05,0,1553.143V576.857C0,522.95,43.7,479.25,97.607,479.25z"/>
41
- <path fill="#FFFFFF" d="M302.3,1382.264l205.332-318.169L319.5,747.683h151.336l102.666,202.35
42
- c9.479,19.223,15.975,33.494,19.49,42.919h1.331c6.745-15.336,13.845-30.228,21.3-44.677L725.371,747.79h138.929l-192.925,314.548
43
- L869.2,1382.263H721.378L602.79,1160.158c-5.586-9.45-10.326-19.376-14.164-29.66h-1.757c-3.474,10.075-8.083,19.722-13.739,28.755
44
- l-122.102,223.011H302.3z"/>
45
- <path fill="#33C481" d="M2192.143,0H1437.75v532.5h852V97.607C2289.75,43.7,2246.05,0,2192.143,0L2192.143,0z"/>
46
- <path fill="#107C41" d="M1437.75,1065h852v532.5h-852V1065z"/>
47
- </svg>
1
+ export default `<?xml version="1.0" encoding="utf-8"?>
2
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
3
+ <!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
4
+ <!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
5
+ <!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
6
+ <!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
7
+ <!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
8
+ <!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
9
+ <!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
10
+ <!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
11
+ ]>
12
+ <svg version="1.1" id="Livello_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
13
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2289.75 2130"
14
+ enable-background="new 0 0 2289.75 2130" xml:space="preserve">
15
+ <metadata>
16
+ <sfw xmlns="&ns_sfw;">
17
+ <slices></slices>
18
+ <sliceSourceBounds bottomLeftOrigin="true" height="2130" width="2289.75" x="-1147.5" y="-1041"></sliceSourceBounds>
19
+ </sfw>
20
+ </metadata>
21
+ <path fill="#185C37" d="M1437.75,1011.75L532.5,852v1180.393c0,53.907,43.7,97.607,97.607,97.607l0,0h1562.036
22
+ c53.907,0,97.607-43.7,97.607-97.607l0,0V1597.5L1437.75,1011.75z"/>
23
+ <path fill="#21A366" d="M1437.75,0H630.107C576.2,0,532.5,43.7,532.5,97.607c0,0,0,0,0,0V532.5l905.25,532.5L1917,1224.75
24
+ L2289.75,1065V532.5L1437.75,0z"/>
25
+ <path fill="#107C41" d="M532.5,532.5h905.25V1065H532.5V532.5z"/>
26
+ <path opacity="0.1" enable-background="new " d="M1180.393,426H532.5v1331.25h647.893c53.834-0.175,97.432-43.773,97.607-97.607
27
+ V523.607C1277.825,469.773,1234.227,426.175,1180.393,426z"/>
28
+ <path opacity="0.2" enable-background="new " d="M1127.143,479.25H532.5V1810.5h594.643
29
+ c53.834-0.175,97.432-43.773,97.607-97.607V576.857C1224.575,523.023,1180.977,479.425,1127.143,479.25z"/>
30
+ <path opacity="0.2" enable-background="new " d="M1127.143,479.25H532.5V1704h594.643c53.834-0.175,97.432-43.773,97.607-97.607
31
+ V576.857C1224.575,523.023,1180.977,479.425,1127.143,479.25z"/>
32
+ <path opacity="0.2" enable-background="new " d="M1073.893,479.25H532.5V1704h541.393c53.834-0.175,97.432-43.773,97.607-97.607
33
+ V576.857C1171.325,523.023,1127.727,479.425,1073.893,479.25z"/>
34
+ <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="203.5132" y1="1729.0183" x2="967.9868" y2="404.9817" gradientTransform="matrix(1 0 0 -1 0 2132)">
35
+ <stop offset="0" style="stop-color:#18884F"/>
36
+ <stop offset="0.5" style="stop-color:#117E43"/>
37
+ <stop offset="1" style="stop-color:#0B6631"/>
38
+ </linearGradient>
39
+ <path fill="url(#SVGID_1_)" d="M97.607,479.25h976.285c53.907,0,97.607,43.7,97.607,97.607v976.285
40
+ c0,53.907-43.7,97.607-97.607,97.607H97.607C43.7,1650.75,0,1607.05,0,1553.143V576.857C0,522.95,43.7,479.25,97.607,479.25z"/>
41
+ <path fill="#FFFFFF" d="M302.3,1382.264l205.332-318.169L319.5,747.683h151.336l102.666,202.35
42
+ c9.479,19.223,15.975,33.494,19.49,42.919h1.331c6.745-15.336,13.845-30.228,21.3-44.677L725.371,747.79h138.929l-192.925,314.548
43
+ L869.2,1382.263H721.378L602.79,1160.158c-5.586-9.45-10.326-19.376-14.164-29.66h-1.757c-3.474,10.075-8.083,19.722-13.739,28.755
44
+ l-122.102,223.011H302.3z"/>
45
+ <path fill="#33C481" d="M2192.143,0H1437.75v532.5h852V97.607C2289.75,43.7,2246.05,0,2192.143,0L2192.143,0z"/>
46
+ <path fill="#107C41" d="M1437.75,1065h852v532.5h-852V1065z"/>
47
+ </svg>
48
48
  `;
package/dist/index.d.ts CHANGED
@@ -14,6 +14,7 @@ import '@3mo/empty-state';
14
14
  import '@3mo/section';
15
15
  import '@3mo/tab';
16
16
  import '@3mo/slider';
17
+ import '@3mo/focus-ring';
17
18
  import '@3mo/virtualized-scroller';
18
19
  import './types.js';
19
20
  export * from './DataGridColumn.js';
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAA;AAClB,OAAO,WAAW,CAAA;AAClB,OAAO,gBAAgB,CAAA;AACvB,OAAO,WAAW,CAAA;AAClB,OAAO,kBAAkB,CAAA;AACzB,OAAO,eAAe,CAAA;AACtB,OAAO,oBAAoB,CAAA;AAC3B,OAAO,kBAAkB,CAAA;AACzB,OAAO,uBAAuB,CAAA;AAC9B,OAAO,mBAAmB,CAAA;AAC1B,OAAO,cAAc,CAAA;AACrB,OAAO,eAAe,CAAA;AACtB,OAAO,kBAAkB,CAAA;AACzB,OAAO,cAAc,CAAA;AACrB,OAAO,UAAU,CAAA;AACjB,OAAO,aAAa,CAAA;AACpB,OAAO,2BAA2B,CAAA;AAClC,OAAO,YAAY,CAAA;AACnB,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,kCAAkC,CAAA;AAChD,cAAc,qCAAqC,CAAA;AACnD,cAAc,mBAAmB,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAA;AAClB,OAAO,WAAW,CAAA;AAClB,OAAO,gBAAgB,CAAA;AACvB,OAAO,WAAW,CAAA;AAClB,OAAO,kBAAkB,CAAA;AACzB,OAAO,eAAe,CAAA;AACtB,OAAO,oBAAoB,CAAA;AAC3B,OAAO,kBAAkB,CAAA;AACzB,OAAO,uBAAuB,CAAA;AAC9B,OAAO,mBAAmB,CAAA;AAC1B,OAAO,cAAc,CAAA;AACrB,OAAO,eAAe,CAAA;AACtB,OAAO,kBAAkB,CAAA;AACzB,OAAO,cAAc,CAAA;AACrB,OAAO,UAAU,CAAA;AACjB,OAAO,aAAa,CAAA;AACpB,OAAO,iBAAiB,CAAA;AACxB,OAAO,2BAA2B,CAAA;AAClC,OAAO,YAAY,CAAA;AACnB,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,kCAAkC,CAAA;AAChD,cAAc,qCAAqC,CAAA;AACnD,cAAc,mBAAmB,CAAA"}
package/dist/index.js CHANGED
@@ -14,6 +14,7 @@ import '@3mo/empty-state';
14
14
  import '@3mo/section';
15
15
  import '@3mo/tab';
16
16
  import '@3mo/slider';
17
+ import '@3mo/focus-ring';
17
18
  import '@3mo/virtualized-scroller';
18
19
  import './types.js';
19
20
  export * from './DataGridColumn.js';
package/dist/rows/DataGridDefaultRow.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DataGridDefaultRow.d.ts","sourceRoot":"","sources":["../../rows/DataGridDefaultRow.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAG9C,qBACa,kBAAkB,CAAC,KAAK,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC;IAC1I,WAAoB,MAAM,kCA8DzB;IAEQ,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,SAAS,CAAC,CAAC;IAQ1F,cAAuB,WAAW,0CAQjC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,0BAA0B,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;KAChD;CACD"}
1
+ {"version":3,"file":"DataGridDefaultRow.d.ts","sourceRoot":"","sources":["../../rows/DataGridDefaultRow.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAG9C,qBACa,kBAAkB,CAAC,KAAK,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC;IAC1I,WAAoB,MAAM,kCAsDzB;IAEQ,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,SAAS,CAAC,CAAC;IAQ1F,cAAuB,WAAW,0CAQjC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,0BAA0B,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;KAChD;CACD"}
package/dist/rows/DataGridDefaultRow.js CHANGED
@@ -6,28 +6,11 @@ let DataGridDefaultRow = class DataGridDefaultRow extends DataGridRow {
6
6
  return css `
7
7
  ${super.styles}
8
8
 
9
- :host([subgrid]) {
9
+ :host {
10
10
  display: grid;
11
11
  grid-template-columns: subgrid;
12
12
  grid-column: -1 / 1;
13
13
  min-height: var(--mo-data-grid-row-height);
14
-
15
- #detailsContainer {
16
- grid-column: -1 / 1;
17
- }
18
-
19
- :host([has-sub-data]) #detailsContainer {
20
- display: grid;
21
- grid-template-columns: subgrid;
22
- }
23
- }
24
-
25
- :host(:not([subgrid])) {
26
- mo-grid {
27
- height: var(--mo-data-grid-row-height);
28
- grid-template-columns: var(--mo-data-grid-columns);
29
- column-gap: var(--mo-data-grid-columns-gap, 2px);
30
- }
31
14
  }
32
15
 
33
16
  mo-flex {
@@ -40,6 +23,15 @@ let DataGridDefaultRow = class DataGridDefaultRow extends DataGridRow {
40
23
  height: var(--mo-data-grid-row-height);
41
24
  }
42
25
 
26
+ #detailsContainer {
27
+ grid-column: -1 / 1;
28
+ }
29
+
30
+ :host([has-sub-data]) #detailsContainer {
31
+ display: grid;
32
+ grid-template-columns: subgrid;
33
+ }
34
+
43
35
  #detailsContainer [instanceof*=mo-data-grid] {
44
36
  --mo-data-grid-header-background: color-mix(in srgb, var(--mo-color-foreground), transparent 96%);
45
37
  --mo-data-grid-alternating-background: transparent;
package/dist/rows/DataGridRow.d.ts CHANGED
@@ -5,7 +5,6 @@ import { type DataGrid, type DataGridCell } from '../index.js';
5
5
  * @attr dataGrid
6
6
  * @attr data
7
7
  * @attr selected
8
- * @attr contextMenuOpen
9
8
  * @attr detailsOpen
10
9
  *
11
10
  * @fires detailsOpenChange - Dispatched when the details open state changes
@@ -14,19 +13,18 @@ export declare abstract class DataGridRow<TData, TDetailsElement extends Element
14
13
  readonly detailsOpenChange: EventDispatcher<boolean>;
15
14
  readonly cells: Array<DataGridCell<any, TData, TDetailsElement>>;
16
15
  readonly subRows: Array<DataGridRow<TData, TDetailsElement>>;
16
+ readonly content: HTMLElement;
17
17
  dataGrid: DataGrid<TData, TDetailsElement>;
18
18
  data: TData;
19
19
  selected: boolean;
20
20
  detailsOpen: boolean;
21
21
  level: number;
22
- protected contextMenuOpen: boolean;
23
22
  get detailsElement(): TDetailsElement | undefined;
24
23
  getCell(column: DataGridColumn<TData, any>): DataGridCell<any, TData, TDetailsElement> | undefined;
25
24
  protected initialized(): void;
26
25
  updated(...parameters: Parameters<Component['updated']>): void;
27
26
  protected get hasDetails(): boolean;
28
27
  static get styles(): import("@a11d/lit").CSSResult;
29
- private get columnsWidths();
30
28
  protected get template(): HTMLTemplateResult;
31
29
  protected abstract get rowTemplate(): HTMLTemplateResult;
32
30
  protected get detailsExpanderTemplate(): HTMLTemplateResult;
@@ -44,7 +42,7 @@ export declare abstract class DataGridRow<TData, TDetailsElement extends Element
44
42
  private get contextMenuData();
45
43
  private get contextMenuTemplate();
46
44
  closeContextMenu(): Promise<void>;
47
- toggleDetails(): void;
45
+ protected toggleDetails(): void;
48
46
  protected setDetailsOpen(value: boolean): void;
49
47
  }
50
48
  declare global {
package/dist/rows/DataGridRow.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DataGridRow.d.ts","sourceRoot":"","sources":["../../rows/DataGridRow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAyB,KAAK,kBAAkB,EAAqB,MAAM,WAAW,CAAA;AAEvH,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,YAAY,EAAyD,MAAM,aAAa,CAAA;AAErH;;;;;;;;GAQG;AACH,8BAAsB,WAAW,CAAC,KAAK,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IACzG,QAAQ,CAAC,iBAAiB,EAAG,eAAe,CAAC,OAAO,CAAC,CAAA;IAE/B,QAAQ,CAAC,KAAK,EAAG,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAChE,QAAQ,CAAC,OAAO,EAAG,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAEjE,QAAQ,EAAG,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;IAC3C,IAAI,EAAG,KAAK,CAAA;IACI,QAAQ,UAAQ;IAazD,WAAW,UAAQ;IAQnB,KAAK,SAAI;IAEgC,SAAS,CAAC,eAAe,UAAQ;IAE7E,IAAI,cAAc,gCAEjB;IAED,OAAO,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC;cAIvB,WAAW;IAMrB,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAShE,SAAS,KAAK,UAAU,YAEvB;IAED,WAAoB,MAAM,kCA0IzB;IAED,OAAO,KAAK,aAAa,GAOxB;IAED,cAAuB,QAAQ,uBAY9B;IAED,SAAS,CAAC,QAAQ,KAAK,WAAW,IAAI,kBAAkB,CAAA;IAExD,SAAS,KAAK,uBAAuB,uBAepC;IAED,SAAS,KAAK,iBAAiB,uBAc9B;IAED,SAAS,CAAC,eAAe,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAUhG,SAAS,KAAK,cAAc,uBAE3B;IAED,SAAS,KAAK,6BAA6B,uBAS1C;IAED,SAAS,KAAK,eAAe,uBAmB5B;IAED,OAAO,CAAC,YAAY;IAIpB,SAAS,CAAC,kBAAkB;cAYZ,wBAAwB;cAKxB,wBAAwB;YAK1B,yCAAyC;IAQjD,eAAe,CAAC,KAAK,CAAC,EAAE,YAAY;IAwB1C,OAAO,KAAK,eAAe,GAI1B;IAED,OAAO,KAAK,mBAAmB,GAE9B;IAEK,gBAAgB;IAKtB,aAAa;IAIb,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,OAAO;CAIvC;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;KACxC;CACD"}
1
+ {"version":3,"file":"DataGridRow.d.ts","sourceRoot":"","sources":["../../rows/DataGridRow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAgC,KAAK,kBAAkB,EAAqB,MAAM,WAAW,CAAA;AAG9H,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,YAAY,EAAyD,MAAM,aAAa,CAAA;AAErH;;;;;;;GAOG;AACH,8BAAsB,WAAW,CAAC,KAAK,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IACzG,QAAQ,CAAC,iBAAiB,EAAG,eAAe,CAAC,OAAO,CAAC,CAAA;IAE/B,QAAQ,CAAC,KAAK,EAAG,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAChE,QAAQ,CAAC,OAAO,EAAG,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IACjE,QAAQ,CAAC,OAAO,EAAG,WAAW,CAAA;IAE9B,QAAQ,EAAG,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;IAC3C,IAAI,EAAG,KAAK,CAAA;IACI,QAAQ,UAAQ;IAazD,WAAW,UAAQ;IAOnB,KAAK,SAAI;IAEZ,IAAI,cAAc,gCAEjB;IAED,OAAO,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC;cAIvB,WAAW;IAIrB,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAShE,SAAS,KAAK,UAAU,YAEvB;IAED,WAAoB,MAAM,kCAgGzB;IAED,cAAuB,QAAQ,uBAgB9B;IAED,SAAS,CAAC,QAAQ,KAAK,WAAW,IAAI,kBAAkB,CAAA;IAExD,SAAS,KAAK,uBAAuB,uBAgBpC;IAED,SAAS,KAAK,iBAAiB,uBAe9B;IAED,SAAS,CAAC,eAAe,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAUhG,SAAS,KAAK,cAAc,uBAE3B;IAED,SAAS,KAAK,6BAA6B,uBAS1C;IAED,SAAS,KAAK,eAAe,uBAmB5B;IAED,OAAO,CAAC,YAAY;IAIpB,SAAS,CAAC,kBAAkB;cAYZ,wBAAwB;cAKxB,wBAAwB;YAK1B,yCAAyC;IAQjD,eAAe,CAAC,KAAK,CAAC,EAAE,YAAY;IAgB1C,OAAO,KAAK,eAAe,GAI1B;IAED,OAAO,KAAK,mBAAmB,GAE9B;IAEK,gBAAgB;IAKtB,SAAS,CAAC,aAAa;IAIvB,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,OAAO;CAIvC;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;KACxC;CACD"}
package/dist/rows/DataGridRow.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import { __decorate } from "tslib";
2
- import { css, property, Component, html, queryAll, style, LitElement, event } from '@a11d/lit';
2
+ import { css, property, Component, html, query, queryAll, style, LitElement, event } from '@a11d/lit';
3
+ import { popover } from '@3mo/popover';
3
4
  import { ContextMenu } from '@3mo/context-menu';
4
5
  import { DataGridPrimaryContextMenuItem, DataGridSelectionMode } from '../index.js';
5
6
  /**
6
7
  * @attr dataGrid
7
8
  * @attr data
8
9
  * @attr selected
9
- * @attr contextMenuOpen
10
10
  * @attr detailsOpen
11
11
  *
12
12
  * @fires detailsOpenChange - Dispatched when the details open state changes
@@ -17,7 +17,6 @@ export class DataGridRow extends Component {
17
17
  this.selected = false;
18
18
  this.detailsOpen = false;
19
19
  this.level = 0;
20
- this.contextMenuOpen = false;
21
20
  }
22
21
  get detailsElement() {
23
22
  return this.renderRoot.querySelector('#detailsContainer')?.firstElementChild;
@@ -27,8 +26,6 @@ export class DataGridRow extends Component {
27
26
  }
28
27
  initialized() {
29
28
  this.toggleAttribute('mo-data-grid-row', true);
30
- this.toggleAttribute('subgrid', this.dataGrid.isUsingSubgrid);
31
- this.toggleAttribute('details', this.dataGrid.hasDetails);
32
29
  }
33
30
  updated(...parameters) {
34
31
  this.cells.forEach(cell => cell.requestUpdate());
@@ -70,15 +67,11 @@ export class DataGridRow extends Component {
70
67
  }
71
68
 
72
69
  #contentContainer {
70
+ grid-column: -1 / 1;
73
71
  cursor: pointer;
74
72
  transition: 250ms;
75
73
  }
76
74
 
77
- :host([selected]) #contentContainer, :host([contextMenuOpen]) #contentContainer {
78
- background: var(--mo-data-grid-selection-background) !important;
79
- --mo-data-grid-sticky-part-color: color-mix(in srgb, var(--mo-color-surface), var(--mo-color-accent));
80
- }
81
-
82
75
  :host([selected]:not(:last-of-type)) #contentContainer:after {
83
76
  content: '';
84
77
  position: absolute;
@@ -94,54 +87,16 @@ export class DataGridRow extends Component {
94
87
  color: var(--mo-color-gray);
95
88
  }
96
89
 
97
- :host(:not([subgrid])) #contextMenu {
98
- align-items: center;
99
- grid-column: -1;
100
- }
101
-
102
- :host([subgrid]) {
90
+ :host([selected]), :host([data-context-menu-open]) {
103
91
  #contentContainer {
104
- grid-column: -1 / 1;
105
- }
106
-
107
- [data-sticky] {
108
- position: sticky;
109
- z-index: 3;
110
- background: var(--mo-data-grid-sticky-part-color);
92
+ background: var(--mo-data-grid-selection-background) !important;
93
+ --mo-data-grid-sticky-part-color: color-mix(in srgb, var(--mo-color-surface), var(--mo-color-accent));
111
94
  }
112
95
 
113
- #contextMenu {
114
- height: 100%;
115
- place-self: end;
116
- inset-inline-end: 0;
96
+ #contextMenuIconButton {
97
+ color: var(--mo-color-foreground);
98
+ opacity: 1;
117
99
  }
118
-
119
- #detailsExpander {
120
- inset-inline-start: 0;
121
- background-color: var(--mo-data-grid-sticky-expander-part-color, var(--mo-data-grid-sticky-part-color));
122
- z-index: 5;
123
- }
124
-
125
- #selection {
126
- width: var(--mo-data-grid-column-selection-width);
127
- align-items: unset;
128
- left: 0;
129
- }
130
- }
131
-
132
-
133
- :host([subgrid]:not([details])) #selectionContainer {
134
- inset-inline-start: 0;
135
- }
136
-
137
- :host([subgrid][details]) #selectionContainer {
138
- inset-inline-start: 20px;
139
- padding: 1px 0;
140
- }
141
-
142
- :host([selected]) #contextMenuIconButton, :host([contextMenuOpen]) #contextMenuIconButton {
143
- color: var(--mo-color-foreground);
144
- opacity: 1;
145
100
  }
146
101
 
147
102
  #contentContainer:hover #contextMenuIconButton {
@@ -180,21 +135,17 @@ export class DataGridRow extends Component {
180
135
  }
181
136
  `;
182
137
  }
183
- get columnsWidths() {
184
- return [
185
- this.dataGrid.detailsColumnWidth,
186
- this.dataGrid.selectionColumnWidth,
187
- this.dataGrid.dataColumnsWidths,
188
- this.dataGrid.moreColumnWidth,
189
- ].flat().filter(Boolean).join(' ');
190
- }
191
138
  get template() {
192
139
  return html `
193
- <mo-grid id='contentContainer' columns=${this.dataGrid.isUsingSubgrid ? 'subgrid' : this.columnsWidths}
140
+ <mo-grid id='contentContainer' columns='subgrid'
194
141
  @click=${() => this.handleContentClick()}
195
142
  @dblclick=${() => this.handleContentDoubleClick()}
196
143
  @auxclick=${(e) => e.button !== 1 ? void 0 : this.handleContentMiddleClick()}
197
- @contextmenu=${(e) => this.openContextMenu(e)}
144
+ ${popover(() => html `
145
+ <mo-context-menu @openChange=${(e) => this.toggleAttribute('data-context-menu-open', e.detail)}>
146
+ ${this.contextMenuTemplate}
147
+ </mo-context-menu>
148
+ `)}
198
149
  >
199
150
  ${this.rowTemplate}
200
151
  </mo-grid>
@@ -202,8 +153,9 @@ export class DataGridRow extends Component {
202
153
  `;
203
154
  }
204
155
  get detailsExpanderTemplate() {
205
- return !this.dataGrid.hasDetails ? html.nothing : html `
206
- <mo-flex justifyContent='center' alignItems='center' id='detailsExpander' data-sticky
156
+ return this.dataGrid.hasDetails === false ? html.nothing : html `
157
+ <mo-flex justifyContent='center' alignItems='center'
158
+ ${style({ position: 'sticky', zIndex: '2', insetInlineStart: '0px', background: 'var(--mo-data-grid-sticky-expander-part-color, var(--mo-data-grid-sticky-part-color))' })}
207
159
  @click=${(e) => e.stopPropagation()}
208
160
  @dblclick=${(e) => e.stopPropagation()}
209
161
  >
@@ -219,7 +171,8 @@ export class DataGridRow extends Component {
219
171
  }
220
172
  get selectionTemplate() {
221
173
  return this.dataGrid.hasSelection === false || this.dataGrid.selectionCheckboxesHidden ? html.nothing : html `
222
- <mo-flex id='selectionContainer' justifyContent='center' alignItems='center' id='selection' data-sticky
174
+ <mo-flex id='selectionContainer' justifyContent='center' alignItems='center'
175
+ ${style({ width: 'var(--mo-data-grid-column-selection-width)', position: 'sticky', zIndex: '2', insetInlineStart: this.dataGrid.hasDetails ? '20px' : '0px', padding: this.dataGrid.hasDetails ? '1px 0' : undefined, background: 'var(--mo-data-grid-sticky-part-color)' })}
223
176
  @click=${(e) => e.stopPropagation()}
224
177
  @dblclick=${(e) => e.stopPropagation()}
225
178
  >
@@ -245,8 +198,8 @@ export class DataGridRow extends Component {
245
198
  return html `<span></span>`;
246
199
  }
247
200
  get contextMenuIconButtonTemplate() {
248
- return !this.dataGrid.hasContextMenu || !this.dataGrid.isUsingSubgrid ? html.nothing : html `
249
- <mo-flex id='contextMenu' data-sticky justifyContent='center'>
201
+ return this.dataGrid.hasContextMenu === false ? html.nothing : html `
202
+ <mo-flex justifyContent='center' ${style({ height: '100%', placeSelf: 'end', position: 'sticky', insetInlineEnd: '0px', zIndex: '3', background: 'var(--mo-data-grid-sticky-part-color)' })}>
250
203
  <mo-icon-button id='contextMenuIconButton' icon='more_vert' dense
251
204
  @click=${this.openContextMenu}
252
205
  @dblclick=${(e) => e.stopPropagation()}
@@ -294,7 +247,7 @@ export class DataGridRow extends Component {
294
247
  if (this.dataGrid.hasContextMenu === true && this.dataGrid.primaryContextMenuItemOnDoubleClick === true) {
295
248
  await this.openContextMenu();
296
249
  ContextMenu.openInstance?.items.find(item => item instanceof DataGridPrimaryContextMenuItem)?.click();
297
- this.contextMenuOpen = false;
250
+ await this.closeContextMenu();
298
251
  }
299
252
  }
300
253
  async openContextMenu(event) {
@@ -305,16 +258,8 @@ export class DataGridRow extends Component {
305
258
  if (this.dataGrid.selectedData.includes(this.data) === false) {
306
259
  this.dataGrid.select(this.dataGrid.selectionMode !== DataGridSelectionMode.None ? [this.data] : []);
307
260
  }
308
- const contextMenu = ContextMenu.open(event || [0, 0], this.contextMenuTemplate);
309
- this.contextMenuOpen = true;
310
- const handler = (open) => {
311
- this.contextMenuOpen = open;
312
- if (open === false) {
313
- contextMenu.openChange.unsubscribe(handler);
314
- }
315
- };
316
- contextMenu.openChange.subscribe(handler);
317
261
  await this.updateComplete;
262
+ this.content?.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true, composed: true, ...(event ?? {}) }));
318
263
  }
319
264
  get contextMenuData() {
320
265
  return this.dataGrid.selectionMode === DataGridSelectionMode.None || this.dataGrid.selectedData.length === 0
@@ -325,7 +270,7 @@ export class DataGridRow extends Component {
325
270
  return this.dataGrid.getRowContextMenuTemplate?.(this.contextMenuData) ?? html.nothing;
326
271
  }
327
272
  async closeContextMenu() {
328
- this.contextMenuOpen = false;
273
+ ContextMenu.openInstance?.close();
329
274
  await this.updateComplete;
330
275
  }
331
276
  toggleDetails() {
@@ -345,6 +290,9 @@ __decorate([
345
290
  __decorate([
346
291
  queryAll('[mo-data-grid-row]')
347
292
  ], DataGridRow.prototype, "subRows", void 0);
293
+ __decorate([
294
+ query('#contentContainer')
295
+ ], DataGridRow.prototype, "content", void 0);
348
296
  __decorate([
349
297
  property({ type: Object })
350
298
  ], DataGridRow.prototype, "dataGrid", void 0);
@@ -378,6 +326,3 @@ __decorate([
378
326
  }
379
327
  })
380
328
  ], DataGridRow.prototype, "level", void 0);
381
- __decorate([
382
- property({ type: Boolean, reflect: true })
383
- ], DataGridRow.prototype, "contextMenuOpen", void 0);