@3mo/data-grid 0.5.16 → 0.6.0-rc.0

package/dist/columns/date-time/DataGridColumnDateTimeBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridColumnDateTimeBase.d.ts","sourceRoot":"","sources":["../../../columns/date-time/DataGridColumnDateTimeBase.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,OAAO,EAAoB,MAAM,WAAW,CAAA;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAErD;;;GAGG;AACH,8BAAsB,0BAA0B,CAAC,KAAK,EAAE,KAAK,SAAS;IAAE,MAAM,CAAC,GAAG,OAAO,EAAE,GAAG,EAAE,GAAG,MAAM,CAAA;CAAE,CAAE,SAAQ,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC;IAChJ,MAAM,CAAC,oBAAoB,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAA;IACxD,QAAQ,CAAC,QAAQ,CAAC,QAAQ,EAAE,UAAU,CAAC,OAAO,OAAO,CAAC,CAAA;IAE1B,aAAa,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAA;IACzC,YAAY,UAAQ;IAEjD,SAAS,KAAK,kBAAkB,2CAE/B;IAED,sBAAsB,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK;CAY5D"}
+{"version":3,"file":"DataGridColumnDateTimeBase.d.ts","sourceRoot":"","sources":["../../../columns/date-time/DataGridColumnDateTimeBase.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,OAAO,EAAoB,MAAM,WAAW,CAAA;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAErD;;;GAGG;AACH,8BAAsB,0BAA0B,CAAC,KAAK,EAAE,KAAK,SAAS;IAAE,MAAM,CAAC,GAAG,OAAO,EAAE,GAAG,EAAE,GAAG,MAAM,CAAA;CAAE,CAAE,SAAQ,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC;IAChJ,MAAM,CAAC,oBAAoB,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAA;IACxD,QAAQ,CAAC,QAAQ,CAAC,QAAQ,EAAE,UAAU,CAAC,OAAO,OAAO,CAAC,CAAA;IAE1B,aAAa,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAA;IACzC,YAAY,UAAQ;IAEjD,SAAS,KAAK,kBAAkB,2CAE/B;IAED,sBAAsB,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK;CAY5D"}

package/dist/columns/number/DataGridColumnCurrency.d.ts

@@ -4,11 +4,14 @@ import { DataGridColumnNumberBase } from './DataGridColumnNumberBase.js';
  * @element mo-data-grid-column-currency
  *
  * @attr currency - The currency of the values.
+ * @attr currencyDataSelector - The key path to the currency of the values.
 */
 export declare class DataGridColumnCurrency<TData> extends DataGridColumnNumberBase<TData> {
     static defaultCurrency?: Currency;
-    currency: Currency | undefined;
-    getContentTemplate(value: number | undefined, _data: TData): import("lit-html").HTMLTemplateResult;
+    currency?: Currency;
+    currencyDataSelector?: KeyPathOf<TData>;
+    private getCurrency;
+    getContentTemplate(value: number | undefined, data: TData): import("lit-html").HTMLTemplateResult;
     getEditContentTemplate(value: number | undefined, data: TData): import("lit-html").HTMLTemplateResult;
     getSumTemplate(sum: number): import("lit-html").HTMLTemplateResult;
 }

package/dist/columns/number/DataGridColumnCurrency.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridColumnCurrency.d.ts","sourceRoot":"","sources":["../../../columns/number/DataGridColumnCurrency.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAA;AAExE;;;;EAIE;AACF,qBACa,sBAAsB,CAAC,KAAK,CAAE,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACjF,MAAM,CAAC,eAAe,CAAC,EAAE,QAAQ,CAAA;IAEuC,QAAQ,uBAAyC;IAGzH,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,KAAK;IAI1D,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK;IAW7D,cAAc,CAAC,GAAG,EAAE,MAAM;CAK1B;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,8BAA8B,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAA;KAC/D;CACD"}
+{"version":3,"file":"DataGridColumnCurrency.d.ts","sourceRoot":"","sources":["../../../columns/number/DataGridColumnCurrency.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAqB,MAAM,mBAAmB,CAAA;AAE/D,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAA;AAExE;;;;;EAKE;AACF,qBACa,sBAAsB,CAAC,KAAK,CAAE,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACjF,MAAM,CAAC,eAAe,CAAC,EAAE,QAAQ,CAAA;IAEuC,QAAQ,CAAC,EAAE,QAAQ,CAAA;IAC/E,oBAAoB,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAA;IAEnD,OAAO,CAAC,WAAW;IAMnB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK;IAIzD,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK;IAW7D,cAAc,CAAC,GAAG,EAAE,MAAM;CAK1B;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,8BAA8B,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAA;KAC/D;CACD"}

package/dist/columns/number/DataGridColumnCurrency.js

@@ -1,26 +1,28 @@
 var DataGridColumnCurrency_1;
 import { __decorate } from "tslib";
 import { component, html, ifDefined, property } from '@a11d/lit';
+import { Currency } from '@3mo/localization';
 import { FieldCurrency } from '@3mo/number-fields';
 import { DataGridColumnNumberBase } from './DataGridColumnNumberBase.js';
 /**
  * @element mo-data-grid-column-currency
  *
  * @attr currency - The currency of the values.
+ * @attr currencyDataSelector - The key path to the currency of the values.
 */
 let DataGridColumnCurrency = DataGridColumnCurrency_1 = class DataGridColumnCurrency extends DataGridColumnNumberBase {
-    constructor() {
-        super(...arguments);
-        this.currency = DataGridColumnCurrency_1.defaultCurrency;
+    getCurrency(data) {
+        return (this.currencyDataSelector ? Currency[getValueByKeyPath(data, this.currencyDataSelector)] : undefined)
+            ?? this.currency
+            ?? DataGridColumnCurrency_1.defaultCurrency;
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    getContentTemplate(value, _data) {
-        return html `${this.getNumber(value)?.formatAsCurrency(this.currency) ?? html.nothing}`;
+    getContentTemplate(value, data) {
+        return html `${this.getNumber(value)?.formatAsCurrency(this.getCurrency(data)) ?? html.nothing}`;
     }
     getEditContentTemplate(value, data) {
         return html `
 			<mo-field-currency dense autofocus
-				.currency=${this.currency}
+				.currency=${this.getCurrency(data)}
 				label=${this.heading}
 				value=${ifDefined(value)}
 				@change=${(e) => this.handleEdit(e.detail, data)}
@@ -36,6 +38,9 @@ let DataGridColumnCurrency = DataGridColumnCurrency_1 = class DataGridColumnCurr
 __decorate([
     property({ type: Object, converter: FieldCurrency.currencyConverter })
 ], DataGridColumnCurrency.prototype, "currency", void 0);
+__decorate([
+    property()
+], DataGridColumnCurrency.prototype, "currencyDataSelector", void 0);
 DataGridColumnCurrency = DataGridColumnCurrency_1 = __decorate([
     component('mo-data-grid-column-currency')
 ], DataGridColumnCurrency);

package/dist/columns/number/DataGridColumnNumberBase.d.ts

@@ -1,4 +1,4 @@
-import { HTMLTemplateResult } from '@a11d/lit';
+import { type HTMLTemplateResult } from '@a11d/lit';
 import { DataGridColumn } from '../DataGridColumn.js';
 export declare abstract class DataGridColumnNumberBase<TData> extends DataGridColumn<TData, number> {
     sumHeading: string | undefined;

package/dist/columns/number/DataGridColumnNumberBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridColumnNumberBase.d.ts","sourceRoot":"","sources":["../../../columns/number/DataGridColumnNumberBase.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAY,MAAM,WAAW,CAAA;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAErD,8BAAsB,wBAAwB,CAAC,KAAK,CAAE,SAAQ,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC;IAC9E,UAAU,EAAE,MAAM,GAAG,SAAS,CAAY;IACjC,SAAS,SAAQ;IAEtC,IAAa,UAAU;;;;;;;;;;;;;;MAMtB;IAED,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS;IAI7C,QAAQ,CAAC,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,kBAAkB;CACxD"}
+{"version":3,"file":"DataGridColumnNumberBase.d.ts","sourceRoot":"","sources":["../../../columns/number/DataGridColumnNumberBase.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,kBAAkB,EAAY,MAAM,WAAW,CAAA;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAErD,8BAAsB,wBAAwB,CAAC,KAAK,CAAE,SAAQ,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC;IAC9E,UAAU,EAAE,MAAM,GAAG,SAAS,CAAY;IACjC,SAAS,SAAQ;IAEtC,IAAa,UAAU;;;;;;;;;;;;;;MAMtB;IAED,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS;IAI7C,QAAQ,CAAC,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,kBAAkB;CACxD"}

package/dist/columns/number/DataGridFooterSum.js

@@ -13,29 +13,29 @@ let DataGridFooterSum = class DataGridFooterSum extends Component {
         this.heading = '';
     }
     static get styles() {
-        return css `
-			:host {
-				display: flex;
-				flex-direction: column;
-				position: relative;
-				max-height: 100%;
-				line-height: 1em;
-				user-select: all;
-				align-items: flex-end;
-			}
-
-			div {
-				color: var(--mo-color-gray);
-				font-size: 0.75rem;
-			}
+        return css `
+			:host {
+				display: flex;
+				flex-direction: column;
+				position: relative;
+				max-height: 100%;
+				line-height: 1em;
+				user-select: all;
+				align-items: flex-end;
+			}
+
+			div {
+				color: var(--mo-color-gray);
+				font-size: 0.75rem;
+			}
 		`;
     }
     get template() {
-        return html `
-			<div>${this.heading}</div>
-			<mo-flex direction='horizontal' justifyContent='center'>
-				<slot></slot>
-			</mo-flex>
+        return html `
+			<div>${this.heading}</div>
+			<mo-flex direction='horizontal' justifyContent='center'>
+				<slot></slot>
+			</mo-flex>
 		`;
     }
 };

package/dist/custom-elements.json

@@ -812,15 +812,6 @@
 				}
 			],
 			"properties": [
-				{
-					"name": "disableResizing",
-					"type": "boolean",
-					"default": "false"
-				},
-				{
-					"name": "columnUpdate",
-					"type": "EventDispatcher<void>"
-				},
 				{
 					"name": "dataGrid",
 					"attribute": "dataGrid",
@@ -831,12 +822,6 @@
 					"attribute": "column",
 					"type": "ColumnDefinition<unknown>"
 				}
-			],
-			"events": [
-				{
-					"name": "columnUpdate",
-					"type": "CustomEvent<void>"
-				}
 			]
 		},
 		{
@@ -964,10 +949,6 @@
 					"type": "boolean",
 					"default": "false"
 				},
-				{
-					"name": "menuAlignment",
-					"type": "PopoverAlignment | undefined"
-				},
 				{
 					"name": "open",
 					"type": "boolean",
@@ -1007,6 +988,16 @@
 					"description": "The selected index.",
 					"type": "Index"
 				},
+				{
+					"name": "menuAlignment",
+					"description": "Menu popover alignment",
+					"type": "PopoverAlignment | undefined"
+				},
+				{
+					"name": "menuPlacement",
+					"description": "Menu popover placement",
+					"type": "PopoverPlacement | undefined"
+				},
 				{
 					"name": "value",
 					"description": "The selected value.",
@@ -1035,10 +1026,6 @@
 					"description": "Whether the field is required",
 					"type": "boolean",
 					"default": "false"
-				},
-				{
-					"name": "alignment",
-					"description": "Popover alignment"
 				}
 			],
 			"properties": [
@@ -1061,11 +1048,6 @@
 					"type": "boolean",
 					"default": "false"
 				},
-				{
-					"name": "menuAlignment",
-					"attribute": "menuAlignment",
-					"type": "PopoverAlignment | undefined"
-				},
 				{
 					"name": "open",
 					"attribute": "open",
@@ -1140,6 +1122,18 @@
 					"description": "The selected index.",
 					"type": "Index"
 				},
+				{
+					"name": "menuAlignment",
+					"attribute": "menuAlignment",
+					"description": "Menu popover alignment",
+					"type": "PopoverAlignment | undefined"
+				},
+				{
+					"name": "menuPlacement",
+					"attribute": "menuPlacement",
+					"description": "Menu popover placement",
+					"type": "PopoverPlacement | undefined"
+				},
 				{
 					"name": "change",
 					"type": "EventDispatcher<T | undefined>"
@@ -2585,8 +2579,12 @@
 				{
 					"name": "currency",
 					"description": "The currency of the values.",
-					"type": "Currency | undefined",
-					"default": "\"defaultCurrency\""
+					"type": "Currency | undefined"
+				},
+				{
+					"name": "currencyDataSelector",
+					"description": "The key path to the currency of the values.",
+					"type": "KeyPathOf<TData>"
 				},
 				{
 					"name": "sumHeading",
@@ -2658,8 +2656,13 @@
 					"name": "currency",
 					"attribute": "currency",
 					"description": "The currency of the values.",
-					"type": "Currency | undefined",
-					"default": "\"defaultCurrency\""
+					"type": "Currency | undefined"
+				},
+				{
+					"name": "currencyDataSelector",
+					"attribute": "currencyDataSelector",
+					"description": "The key path to the currency of the values.",
+					"type": "(object extends TData ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | SubKeyPathOf<TData, Extract<keyof TData, `${number}`>, 1> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined"
 				},
 				{
 					"name": "sumHeading",
@@ -3704,7 +3707,8 @@
 			],
 			"properties": [
 				{
-					"name": "dataGrid"
+					"name": "dataGrid",
+					"type": "DataGrid<TData, TDetailsElement>"
 				},
 				{
 					"name": "data",
@@ -3791,14 +3795,6 @@
 			"name": "mo-data-grid-header-separator",
 			"path": ".\\packages\\DataGrid\\dist\\DataGridHeaderSeparator.d.ts",
 			"properties": [
-				{
-					"name": "disableResizing",
-					"type": "boolean"
-				},
-				{
-					"name": "columnUpdate",
-					"type": "EventDispatcher<void>"
-				},
 				{
 					"name": "dataGrid",
 					"type": "DataGrid<unknown, undefined>"
@@ -3807,12 +3803,6 @@
 					"name": "column",
 					"type": "ColumnDefinition<unknown>"
 				}
-			],
-			"events": [
-				{
-					"name": "columnUpdate",
-					"type": "CustomEvent<void>"
-				}
 			]
 		},
 		{
@@ -3936,10 +3926,6 @@
 					"type": "boolean",
 					"default": "false"
 				},
-				{
-					"name": "menuAlignment",
-					"type": "PopoverAlignment | undefined"
-				},
 				{
 					"name": "open",
 					"type": "boolean",
@@ -3979,6 +3965,16 @@
 					"description": "The selected index.",
 					"type": "Index"
 				},
+				{
+					"name": "menuAlignment",
+					"description": "Menu popover alignment",
+					"type": "PopoverAlignment | undefined"
+				},
+				{
+					"name": "menuPlacement",
+					"description": "Menu popover placement",
+					"type": "PopoverPlacement | undefined"
+				},
 				{
 					"name": "value",
 					"description": "The selected value.",
@@ -4007,10 +4003,6 @@
 					"description": "Whether the field is required",
 					"type": "boolean",
 					"default": "false"
-				},
-				{
-					"name": "alignment",
-					"description": "Popover alignment"
 				}
 			],
 			"properties": [
@@ -4032,11 +4024,6 @@
 					"type": "boolean",
 					"default": "false"
 				},
-				{
-					"name": "menuAlignment",
-					"attribute": "menuAlignment",
-					"type": "PopoverAlignment | undefined"
-				},
 				{
 					"name": "open",
 					"attribute": "open",
@@ -4111,6 +4098,18 @@
 					"description": "The selected index.",
 					"type": "Index"
 				},
+				{
+					"name": "menuAlignment",
+					"attribute": "menuAlignment",
+					"description": "Menu popover alignment",
+					"type": "PopoverAlignment | undefined"
+				},
+				{
+					"name": "menuPlacement",
+					"attribute": "menuPlacement",
+					"description": "Menu popover placement",
+					"type": "PopoverPlacement | undefined"
+				},
 				{
 					"name": "change",
 					"type": "EventDispatcher<T | undefined>"
@@ -5382,6 +5381,11 @@
 					"description": "The currency of the values.",
 					"type": "Currency | undefined"
 				},
+				{
+					"name": "currencyDataSelector",
+					"description": "The key path to the currency of the values.",
+					"type": "KeyPathOf<TData>"
+				},
 				{
 					"name": "width",
 					"description": "The width of the column",
@@ -5439,6 +5443,12 @@
 					"description": "The currency of the values.",
 					"type": "Currency | undefined"
 				},
+				{
+					"name": "currencyDataSelector",
+					"attribute": "currencyDataSelector",
+					"description": "The key path to the currency of the values.",
+					"type": "(object extends TData ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | SubKeyPathOf<TData, Extract<keyof TData, `${number}`>, 1> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined"
+				},
 				{
 					"name": "sumHeading",
 					"type": "string | undefined"

package/dist/excel.svg.js

@@ -1,48 +1,48 @@
-export default `<?xml version="1.0" encoding="utf-8"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
-	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
-	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
-	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
-	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
-	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
-	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
-	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
-	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
-]>
-<svg version="1.1" id="Livello_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
-	 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"
-	 enable-background="new 0 0 2289.75 2130" xml:space="preserve">
-<metadata>
-	<sfw  xmlns="&ns_sfw;">
-		<slices></slices>
-		<sliceSourceBounds  bottomLeftOrigin="true" height="2130" width="2289.75" x="-1147.5" y="-1041"></sliceSourceBounds>
-	</sfw>
-</metadata>
-<path fill="#185C37" d="M1437.75,1011.75L532.5,852v1180.393c0,53.907,43.7,97.607,97.607,97.607l0,0h1562.036
-	c53.907,0,97.607-43.7,97.607-97.607l0,0V1597.5L1437.75,1011.75z"/>
-<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
-	L2289.75,1065V532.5L1437.75,0z"/>
-<path fill="#107C41" d="M532.5,532.5h905.25V1065H532.5V532.5z"/>
-<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
-	V523.607C1277.825,469.773,1234.227,426.175,1180.393,426z"/>
-<path opacity="0.2" enable-background="new    " d="M1127.143,479.25H532.5V1810.5h594.643
-	c53.834-0.175,97.432-43.773,97.607-97.607V576.857C1224.575,523.023,1180.977,479.425,1127.143,479.25z"/>
-<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
-	V576.857C1224.575,523.023,1180.977,479.425,1127.143,479.25z"/>
-<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
-	V576.857C1171.325,523.023,1127.727,479.425,1073.893,479.25z"/>
-<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)">
-	<stop  offset="0" style="stop-color:#18884F"/>
-	<stop  offset="0.5" style="stop-color:#117E43"/>
-	<stop  offset="1" style="stop-color:#0B6631"/>
-</linearGradient>
-<path fill="url(#SVGID_1_)" d="M97.607,479.25h976.285c53.907,0,97.607,43.7,97.607,97.607v976.285
-	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"/>
-<path fill="#FFFFFF" d="M302.3,1382.264l205.332-318.169L319.5,747.683h151.336l102.666,202.35
-	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
-	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
-	l-122.102,223.011H302.3z"/>
-<path fill="#33C481" d="M2192.143,0H1437.75v532.5h852V97.607C2289.75,43.7,2246.05,0,2192.143,0L2192.143,0z"/>
-<path fill="#107C41" d="M1437.75,1065h852v532.5h-852V1065z"/>
-</svg>
+export default `<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Livello_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 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"
+	 enable-background="new 0 0 2289.75 2130" xml:space="preserve">
+<metadata>
+	<sfw  xmlns="&ns_sfw;">
+		<slices></slices>
+		<sliceSourceBounds  bottomLeftOrigin="true" height="2130" width="2289.75" x="-1147.5" y="-1041"></sliceSourceBounds>
+	</sfw>
+</metadata>
+<path fill="#185C37" d="M1437.75,1011.75L532.5,852v1180.393c0,53.907,43.7,97.607,97.607,97.607l0,0h1562.036
+	c53.907,0,97.607-43.7,97.607-97.607l0,0V1597.5L1437.75,1011.75z"/>
+<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
+	L2289.75,1065V532.5L1437.75,0z"/>
+<path fill="#107C41" d="M532.5,532.5h905.25V1065H532.5V532.5z"/>
+<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
+	V523.607C1277.825,469.773,1234.227,426.175,1180.393,426z"/>
+<path opacity="0.2" enable-background="new    " d="M1127.143,479.25H532.5V1810.5h594.643
+	c53.834-0.175,97.432-43.773,97.607-97.607V576.857C1224.575,523.023,1180.977,479.425,1127.143,479.25z"/>
+<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
+	V576.857C1224.575,523.023,1180.977,479.425,1127.143,479.25z"/>
+<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
+	V576.857C1171.325,523.023,1127.727,479.425,1073.893,479.25z"/>
+<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)">
+	<stop  offset="0" style="stop-color:#18884F"/>
+	<stop  offset="0.5" style="stop-color:#117E43"/>
+	<stop  offset="1" style="stop-color:#0B6631"/>
+</linearGradient>
+<path fill="url(#SVGID_1_)" d="M97.607,479.25h976.285c53.907,0,97.607,43.7,97.607,97.607v976.285
+	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"/>
+<path fill="#FFFFFF" d="M302.3,1382.264l205.332-318.169L319.5,747.683h151.336l102.666,202.35
+	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
+	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
+	l-122.102,223.011H302.3z"/>
+<path fill="#33C481" d="M2192.143,0H1437.75v532.5h852V97.607C2289.75,43.7,2246.05,0,2192.143,0L2192.143,0z"/>
+<path fill="#107C41" d="M1437.75,1065h852v532.5h-852V1065z"/>
+</svg>
 `;

package/dist/rows/DataGridDefaultRow.d.ts.map

@@ -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,kCA4CzB;IAEQ,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,SAAS,CAAC,CAAC;IAQ1F,cAAuB,WAAW,0CAOjC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,0BAA0B,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;KAChD;CACD"}
+{"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,kCAmDzB;IAEQ,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,SAAS,CAAC,CAAC;IAQ1F,cAAuB,WAAW,0CAOjC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,0BAA0B,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;KAChD;CACD"}

package/dist/rows/DataGridDefaultRow.js

@@ -6,10 +6,8 @@ let DataGridDefaultRow = class DataGridDefaultRow extends DataGridRow {
         return css `
 			${super.styles}
 
-			mo-grid {
-				height: var(--mo-data-grid-row-height);
-				grid-template-columns: var(--mo-data-grid-columns);
-				column-gap: var(--mo-data-grid-columns-gap);
+			:host {
+				min-height: var(--mo-data-grid-row-height);
 			}
 
 			mo-flex {
@@ -22,6 +20,15 @@ let DataGridDefaultRow = class DataGridDefaultRow extends DataGridRow {
 				height: var(--mo-data-grid-row-height);
 			}
 
+			#detailsContainer {
+				grid-column: -1 / 1;
+			}
+
+			:host([has-sub-data]) #detailsContainer {
+				display: grid;
+				grid-template-columns: subgrid;
+			}
+
 			#detailsContainer [instanceof*=mo-data-grid] {
 				--mo-data-grid-header-background: color-mix(in srgb, var(--mo-color-foreground), transparent 96%);
 				--mo-data-grid-alternating-background: transparent;

package/dist/rows/DataGridRow.d.ts

@@ -1,6 +1,6 @@
-import { Component, HTMLTemplateResult } from '@a11d/lit';
-import { ColumnDefinition } from '../ColumnDefinition.js';
-import { DataGrid, DataGridCell } from '../index.js';
+import { Component, type HTMLTemplateResult } from '@a11d/lit';
+import { type ColumnDefinition } from '../ColumnDefinition.js';
+import { type DataGrid, type DataGridCell } from '../index.js';
 /**
  * @attr dataGrid
  * @attr data
@@ -37,7 +37,7 @@ export declare abstract class DataGridRow<TData, TDetailsElement extends Element
     protected handleContentDoubleClick(): Promise<void>;
     protected handleContentMiddleClick(): Promise<void>;
     private clickOnPrimaryContextMenuItemIfApplicable;
-    openContextMenu(mouseEvent?: MouseEvent): Promise<void>;
+    openContextMenu(event?: PointerEvent): Promise<void>;
     private get contextMenuData();
     private get contextMenuTemplate();
     closeContextMenu(): Promise<void>;

package/dist/rows/DataGridRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridRow.d.ts","sourceRoot":"","sources":["../../rows/DataGridRow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAyB,kBAAkB,EAAqB,MAAM,WAAW,CAAA;AAElH,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAyD,MAAM,aAAa,CAAA;AAE3G;;;;;;;;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;IAOnB,KAAK,SAAI;IAEgC,SAAS,CAAC,eAAe,UAAQ;IAE7E,IAAI,cAAc,gCAEjB;cAEkB,WAAW;IAIrB,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAShE,SAAS,KAAK,UAAU,YAEvB;IAED,WAAoB,MAAM,kCA4FzB;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,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAUlG,SAAS,KAAK,6BAA6B,uBAS1C;IAED,SAAS,KAAK,eAAe,uBAoB5B;IAED,OAAO,CAAC,YAAY;IAIpB,SAAS,CAAC,kBAAkB;cAYZ,wBAAwB;cAKxB,wBAAwB;YAK1B,yCAAyC;IAQjD,eAAe,CAAC,UAAU,CAAC,EAAE,UAAU;IAwB7C,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"}
+{"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,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAC9D,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;IAOnB,KAAK,SAAI;IAEgC,SAAS,CAAC,eAAe,UAAQ;IAE7E,IAAI,cAAc,gCAEjB;cAEkB,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,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,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAUlG,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,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

@@ -39,7 +39,9 @@ export class DataGridRow extends Component {
     static get styles() {
         return css `
 			:host {
-				display: block;
+				display: grid;
+				grid-template-columns: subgrid;
+				grid-column: -1 / 1;
 				position: relative;
 				height: auto;
 				width: 100%;
@@ -65,6 +67,8 @@ export class DataGridRow extends Component {
 			}
 
 			#contentContainer {
+				grid-column: -1 / 1;
+				grid-template-columns: subgrid;
 				cursor: pointer;
 				transition: 250ms;
 			}
@@ -120,7 +124,7 @@ export class DataGridRow extends Component {
 				display: none;
 			}
 
-			#detailsContainer > :first-child {
+			:host(:not([has-sub-data])) #detailsContainer > :first-child {
 				padding: 8px 0;
 			}
 
@@ -184,11 +188,11 @@ export class DataGridRow extends Component {
     }
     get contextMenuIconButtonTemplate() {
         return this.dataGrid.hasContextMenu === false ? html.nothing : html `
-			<mo-flex justifyContent='center' alignItems='center'
-				@click=${this.openContextMenu}
-				@dblclick=${(e) => e.stopPropagation()}
-			>
-				<mo-icon-button id='contextMenuIconButton' icon='more_vert'></mo-icon-button>
+			<mo-flex justifyContent='center' ${style({ height: '100%', placeSelf: 'end', position: 'sticky', insetInlineEnd: '0px', zIndex: '3', background: 'var(--mo-data-grid-sticky-part-color)' })}>
+				<mo-icon-button id='contextMenuIconButton' icon='more_vert' dense
+					@click=${this.openContextMenu}
+					@dblclick=${(e) => e.stopPropagation()}
+				></mo-icon-button>
 			</mo-flex>
 		`;
     }
@@ -200,11 +204,10 @@ export class DataGridRow extends Component {
             return this.dataGrid.getRowDetailsTemplate(this.data);
         }
         const subData = this.dataGrid.getSubData(this.data);
+        this.toggleAttribute('has-sub-data', !!subData);
         if (subData) {
             return html `
-				<mo-flex style='width: 100%; padding: 0px'>
-					${subData.map(data => this.dataGrid.getRowTemplate(data, undefined, this.level + 1))}
-				</mo-flex>
+				${subData.map(data => this.dataGrid.getRowTemplate(data, undefined, this.level + 1))}
 			`;
         }
         return html.nothing;
@@ -236,15 +239,15 @@ export class DataGridRow extends Component {
             this.contextMenuOpen = false;
         }
     }
-    async openContextMenu(mouseEvent) {
+    async openContextMenu(event) {
         if (!this.dataGrid.hasContextMenu) {
             return;
         }
-        mouseEvent?.stopPropagation();
+        event?.stopPropagation();
         if (this.dataGrid.selectedData.includes(this.data) === false) {
             this.dataGrid.select(this.dataGrid.selectionMode !== DataGridSelectionMode.None ? [this.data] : []);
         }
-        const contextMenu = ContextMenu.open(mouseEvent || [0, 0], this.contextMenuTemplate);
+        const contextMenu = ContextMenu.open(event || [0, 0], this.contextMenuTemplate);
         this.contextMenuOpen = true;
         const handler = (open) => {
             this.contextMenuOpen = open;