@3mo/data-grid 0.16.0-preview.0 → 0.16.1

package/dist/custom-elements.json

@@ -738,6 +738,11 @@
 					"type": "boolean",
 					"default": "false"
 				},
+				{
+					"name": "resizeController",
+					"type": "ResizeController<Promise<void>>",
+					"default": "\"new ResizeController(this, {\\n\\t\\tcallback: async ([entry]) => {\\n\\t\\t\\t// It is necessary to defer the callback to avoid\\n\\t\\t\\t// this resize-observer triggering other resize-observers in a loop\\n\\t\\t\\tawait new Promise(r => requestIdleCallback(r))\\n\\t\\t\\tthis.column.widthInPixels = entry?.contentRect.width ?? 0\\n\\t\\t}\\n\\t})\""
+				},
 				{
 					"name": "template",
 					"description": "The template rendered into renderRoot. Invoked on each update to perform rendering tasks.",
@@ -844,16 +849,17 @@
 					"type": "boolean",
 					"default": "false"
 				},
-				{
-					"name": "icon",
-					"type": "MaterialIcon | undefined"
-				},
 				{
 					"name": "disabled",
 					"description": "Whether the list item is disabled",
 					"type": "boolean",
 					"default": "false"
 				},
+				{
+					"name": "icon",
+					"description": "Icon to be displayed in the list item",
+					"type": "MaterialIcon | undefined"
+				},
 				{
 					"name": "preventClickOnSpace",
 					"description": "Whether the list item should prevent click on space",
@@ -877,11 +883,6 @@
 					"type": "SlotController",
 					"default": "\"new SlotController(this)\""
 				},
-				{
-					"name": "icon",
-					"attribute": "icon",
-					"type": "MaterialIcon | undefined"
-				},
 				{
 					"name": "role",
 					"type": "\"menuitem\"",
@@ -899,6 +900,12 @@
 					"type": "boolean",
 					"default": "false"
 				},
+				{
+					"name": "icon",
+					"attribute": "icon",
+					"description": "Icon to be displayed in the list item",
+					"type": "MaterialIcon | undefined"
+				},
 				{
 					"name": "preventClickOnSpace",
 					"attribute": "preventClickOnSpace",
@@ -915,11 +922,6 @@
 					"name": "",
 					"description": "Default slot for content"
 				}
-			],
-			"cssParts": [
-				{
-					"name": "icon"
-				}
 			]
 		},
 		{
@@ -3697,6 +3699,10 @@
 					"name": "menuOpen",
 					"type": "boolean"
 				},
+				{
+					"name": "resizeController",
+					"type": "ResizeController<Promise<void>>"
+				},
 				{
 					"name": "template",
 					"description": "The template rendered into renderRoot. Invoked on each update to perform rendering tasks.",
@@ -3775,16 +3781,17 @@
 					"type": "boolean",
 					"default": "false"
 				},
-				{
-					"name": "icon",
-					"type": "MaterialIcon | undefined"
-				},
 				{
 					"name": "disabled",
 					"description": "Whether the list item is disabled",
 					"type": "boolean",
 					"default": "false"
 				},
+				{
+					"name": "icon",
+					"description": "Icon to be displayed in the list item",
+					"type": "MaterialIcon | undefined"
+				},
 				{
 					"name": "preventClickOnSpace",
 					"description": "Whether the list item should prevent click on space",
@@ -3808,11 +3815,6 @@
 					"type": "SlotController",
 					"default": "\"new SlotController(this)\""
 				},
-				{
-					"name": "icon",
-					"attribute": "icon",
-					"type": "MaterialIcon | undefined"
-				},
 				{
 					"name": "role",
 					"type": "\"menuitem\"",
@@ -3830,6 +3832,12 @@
 					"type": "boolean",
 					"default": "false"
 				},
+				{
+					"name": "icon",
+					"attribute": "icon",
+					"description": "Icon to be displayed in the list item",
+					"type": "MaterialIcon | undefined"
+				},
 				{
 					"name": "preventClickOnSpace",
 					"attribute": "preventClickOnSpace",
@@ -3846,11 +3854,6 @@
 					"name": "",
 					"description": "Default slot for content"
 				}
-			],
-			"cssParts": [
-				{
-					"name": "icon"
-				}
 			]
 		},
 		{
@@ -5743,7 +5746,7 @@
 				{
 					"name": "isIntersecting",
 					"type": "boolean",
-					"default": "false"
+					"default": "true"
 				},
 				{
 					"name": "dataRecord",
@@ -5767,7 +5770,7 @@
 					"name": "isIntersecting",
 					"attribute": "isIntersecting",
 					"type": "boolean",
-					"default": "false"
+					"default": "true"
 				},
 				{
 					"name": "dataRecord",
@@ -5817,7 +5820,7 @@
 				{
 					"name": "isIntersecting",
 					"type": "boolean",
-					"default": "false"
+					"default": "true"
 				},
 				{
 					"name": "dataRecord",
@@ -5841,7 +5844,7 @@
 					"name": "isIntersecting",
 					"attribute": "isIntersecting",
 					"type": "boolean",
-					"default": "false"
+					"default": "true"
 				},
 				{
 					"name": "dataRecord",

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,EAAgC,KAAK,kBAAkB,EAAoB,MAAM,WAAW,CAAA;AAK7H,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EAAE,KAAK,YAAY,EAAyD,KAAK,UAAU,EAAE,MAAM,aAAa,CAAA;AAEvH,8BAAsB,WAAW,CAAC,KAAK,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IACnF,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;IASvD,cAAc,UAAQ;IAEG,UAAU,EAAG,UAAU,CAAC,KAAK,CAAC,CAAA;IAC1D,IAAI,QAAQ,kDAAsC;IAClD,IAAI,IAAI,UAAkC;IAC1C,IAAI,KAAK,WAAmC;IAC5C,IAAI,KAAK,WAAmC;IAC5C,IAAI,QAAQ,YAAwC;IACpD,IAAI,WAAW,YAAyC;IAExD,IAAI,cAAc,IACkF,eAAe,GAAG,SAAS,CAC9H;IAED,OAAO,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC;IAIjC,SAAS;cAMC,WAAW;cAOX,YAAY;IAItB,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAShE,SAAS,KAAK,UAAU,YAEvB;IAED,WAAoB,MAAM,kCAkHzB;IAED,cAAuB,QAAQ,uBAmB9B;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,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAYlG,OAAO,CAAC,QAAQ,CAAC,cAAc,CAG9B;IAED,SAAS,KAAK,cAAc,uBAE3B;IAED,SAAS,KAAK,6BAA6B,uBAS1C;IAED,SAAS,KAAK,eAAe,uBAY5B;IAED,OAAO,CAAC,YAAY;IAIpB,SAAS,CAAC,kBAAkB;cAYZ,wBAAwB;cAKxB,wBAAwB;YAK1B,yCAAyC;IAQjD,eAAe,CAAC,KAAK,CAAC,EAAE,YAAY;IAY1C,SAAS,CAAC,2BAA2B,CAAC,IAAI,EAAE,OAAO;IAQnD,OAAO,KAAK,eAAe,GAI1B;IAED,OAAO,KAAK,mBAAmB,GAE9B;IAEK,gBAAgB;IAKtB,aAAa;CAQb;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,EAAoB,MAAM,WAAW,CAAA;AAKtH,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EAAE,KAAK,YAAY,EAAyD,KAAK,UAAU,EAAE,MAAM,aAAa,CAAA;AAEvH,8BAAsB,WAAW,CAAC,KAAK,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IACnF,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;IAE7B,cAAc,UAAO;IAEtB,UAAU,EAAG,UAAU,CAAC,KAAK,CAAC,CAAA;IAC1D,IAAI,QAAQ,kDAAsC;IAClD,IAAI,IAAI,UAAkC;IAC1C,IAAI,KAAK,WAAmC;IAC5C,IAAI,KAAK,WAAmC;IAC5C,IAAI,QAAQ,YAAwC;IACpD,IAAI,WAAW,YAAyC;IAExD,IAAI,cAAc,IACkF,eAAe,GAAG,SAAS,CAC9H;IAED,OAAO,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC;IAIjC,SAAS;cAMC,WAAW;cAKX,YAAY;IAItB,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAShE,SAAS,KAAK,UAAU,YAEvB;IAED,WAAoB,MAAM,kCA8IzB;IAED,cAAuB,QAAQ,uBAmB9B;IAED,SAAS,CAAC,QAAQ,KAAK,WAAW,IAAI,kBAAkB,CAAA;IAExD,SAAS,KAAK,uBAAuB,uBAepC;IAED,SAAS,KAAK,iBAAiB,uBAe9B;IAED,SAAS,CAAC,eAAe,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAYlG,OAAO,CAAC,QAAQ,CAAC,cAAc,CAG9B;IAED,SAAS,KAAK,cAAc,uBAE3B;IAED,SAAS,KAAK,6BAA6B,uBAS1C;IAED,SAAS,KAAK,eAAe,uBAY5B;IAED,OAAO,CAAC,YAAY;IAIpB,SAAS,CAAC,kBAAkB;cAYZ,wBAAwB;cAKxB,wBAAwB;YAK1B,yCAAyC;IAQjD,eAAe,CAAC,KAAK,CAAC,EAAE,YAAY;IAY1C,SAAS,CAAC,2BAA2B,CAAC,IAAI,EAAE,OAAO;IAQnD,OAAO,KAAK,eAAe,GAI1B;IAED,OAAO,KAAK,mBAAmB,GAE9B;IAEK,gBAAgB;IAKtB,aAAa;CAQb;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;KACxC;CACD"}

package/dist/rows/DataGridRow.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { css, property, Component, html, query, queryAll, style, LitElement, live } from '@a11d/lit';
+import { css, property, Component, html, query, queryAll, LitElement, live } from '@a11d/lit';
 import { equals } from '@a11d/equals';
 import { DirectionsByLanguage } from '@3mo/localization';
 import { popover } from '@3mo/popover';
@@ -8,7 +8,7 @@ import { DataGridPrimaryContextMenuItem, DataGridSelectability } from '../index.
 export class DataGridRow extends Component {
     constructor() {
         super(...arguments);
-        this.isIntersecting = false;
+        this.isIntersecting = true;
         this.delegateToCell = (method) => (e) => {
             const target = e.target;
             target?.[method]?.(e);
@@ -33,9 +33,7 @@ export class DataGridRow extends Component {
     }
     initialized() {
         this.toggleAttribute('mo-data-grid-row', true);
-        if (this.isIntersecting === false) {
-            this.dataGrid.rowIntersectionObserver?.observe(this);
-        }
+        this.dataGrid.rowIntersectionObserver?.observe(this);
     }
     disconnected() {
         this.dataGrid.rowIntersectionObserver?.unobserve?.(this);
@@ -60,6 +58,25 @@ export class DataGridRow extends Component {
 				width: 100%;
 			}
 
+			#detailsExpanderContainer {
+				position: sticky;
+				z-index: 2;
+				inset-inline-start: 0px;
+				background: var(--mo-data-grid-sticky-expander-part-color, var(--mo-data-grid-sticky-part-color));
+			}
+
+			#selectionContainer {
+				width: var(--mo-data-grid-column-selection-width);
+				position: sticky;
+				z-index: 2;
+				inset-inline-start: 0px;
+				height: 100%;
+				background: var(--mo-data-grid-sticky-part-color);
+				&[data-has-details] {
+					inset-inline-start: 20px;
+				}
+			}
+
 			:host(:hover) {
 				#contentContainer {
 					--mo-data-grid-sticky-part-color: color-mix(in srgb, var(--mo-color-surface), var(--mo-color-accent) 25%) !important;
@@ -93,6 +110,15 @@ export class DataGridRow extends Component {
 				cursor: pointer;
 			}
 
+			#contextMenuIconButtonContainer {
+				height: 100%;
+				place-self: end;
+				position: sticky;
+				inset-inline-end: 0px;
+				z-index: 3;
+				background: var(--mo-data-grid-sticky-part-color);
+			}
+
 			#contextMenuIconButton {
 				opacity: 0.5;
 				color: var(--mo-color-gray);
@@ -188,8 +214,7 @@ export class DataGridRow extends Component {
     }
     get detailsExpanderTemplate() {
         return this.dataGrid.hasDetails === false ? html.nothing : html `
-			<mo-flex justifyContent='center' alignItems='center'
-				${style({ position: 'sticky', zIndex: '2', insetInlineStart: '0px', background: 'var(--mo-data-grid-sticky-expander-part-color, var(--mo-data-grid-sticky-part-color))' })}
+			<mo-flex id='detailsExpanderContainer' justifyContent='center' alignItems='center'
 				@click=${(e) => e.stopPropagation()}
 				@dblclick=${(e) => e.stopPropagation()}
 			>
@@ -206,7 +231,7 @@ export class DataGridRow extends Component {
     get selectionTemplate() {
         return this.dataGrid.hasSelection === false || this.dataGrid.selectionCheckboxesHidden ? html.nothing : html `
 			<mo-flex id='selectionContainer' justifyContent='center' alignItems='center'
-				${style({ width: 'var(--mo-data-grid-column-selection-width)', position: 'sticky', zIndex: '2', insetInlineStart: this.dataGrid.hasDetails ? '20px' : '0px', height: '100%', background: 'var(--mo-data-grid-sticky-part-color)' })}
+				?data-has-details=${this.dataGrid.hasDetails}
 				@click=${(e) => e.stopPropagation()}
 				@dblclick=${(e) => e.stopPropagation()}
 			>
@@ -235,7 +260,7 @@ export class DataGridRow extends Component {
     }
     get contextMenuIconButtonTemplate() {
         return this.dataGrid.hasContextMenu === false ? html.nothing : html `
-			<mo-flex justifyContent='center' ${style({ height: '100%', placeSelf: 'end', position: 'sticky', insetInlineEnd: '0px', zIndex: '3', background: 'var(--mo-data-grid-sticky-part-color)' })}>
+			<mo-flex id='contextMenuIconButtonContainer' justifyContent='center'>
 				<mo-icon-button id='contextMenuIconButton' icon='more_vert' dense
 					@click=${this.openContextMenu}
 					@dblclick=${(e) => e.stopPropagation()}
@@ -328,14 +353,7 @@ __decorate([
     query('#contentContainer')
 ], DataGridRow.prototype, "content", void 0);
 __decorate([
-    property({
-        type: Boolean,
-        updated() {
-            if (this.isIntersecting) {
-                this.dataGrid.rowIntersectionObserver?.unobserve?.(this);
-            }
-        }
-    })
+    property({ type: Boolean })
 ], DataGridRow.prototype, "isIntersecting", void 0);
 __decorate([
     property({ type: Object })