@aquera/nile-elements 0.1.32-beta-1.0 → 0.1.32-beta-1.1

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.32-beta-1.0",
+  "version": "0.1.32-beta-1.1",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-table/nile-table.css.ts

@@ -12,7 +12,8 @@ import {css} from 'lit';
  */
 export const styles = css`
 	:host {
-
+		display:block;
+		width:100%;
 	}
 `;
 

package/src/nile-table/nile-table.ts

@@ -25,6 +25,7 @@ export class NileTable extends NileElement {
   @query('slot') defaultSlot: HTMLSlotElement;
 	private rows:Array<NileTableBody>=[];
 	private primaryRowWidths:Array<number>=[]
+	private resizeObserver:ResizeObserver ;
 
 
 	/**
@@ -41,7 +42,7 @@ export class NileTable extends NileElement {
 
 	protected firstUpdated(_changedProperties: PropertyValues): void {
 		this.updateComplete.then(()=>{
-			this.handleBodyCssUpdate();
+			this.handleResizeObserver();
 		})
 	}
 
@@ -70,8 +71,8 @@ export class NileTable extends NileElement {
 	}
 
 	handleBodyCssUpdate(){
+    if (this.rows.length<2) return;
     const tableBodies = this.rows;
-    if (!tableBodies.length) return;
 		const firstEl=tableBodies[0].shadowRoot?.querySelector<HTMLDivElement>('div.base')
 		if(firstEl) {
 			firstEl.style.borderTopRightRadius="var(--nile-radius-radius-xl)";
@@ -108,6 +109,7 @@ export class NileTable extends NileElement {
 	}
 	
 	realignStructure(){
+    if (this.rows.length<2) return;
 		const primaryRowWidths=this.getPrimaryColumnWidths();
 		const secondaryRows=this.rows.filter(tb=>tb.type!='primary');
 		secondaryRows.forEach((row)=>{
@@ -125,6 +127,21 @@ export class NileTable extends NileElement {
 			.shadowRoot?.querySelector<HTMLSlotElement>('slot')?.
 			assignedElements()!
 	}
+
+	handleResizeObserver(){
+		const onResize = (entries:ResizeObserverEntry[]): void=> {
+			for (let entry of entries) {
+				this.realignStructure();
+			}
+		};
+		this.resizeObserver=new ResizeObserver(onResize)
+		this.resizeObserver.observe(this);
+	}
+
+	disconnectedCallback(): void {
+		this.resizeObserver.disconnect()
+		super.disconnectedCallback()
+	}
 	/* #endregion */
 }
 

package/vscode-html-custom-data.json

@@ -3332,7 +3332,7 @@
     },
     {
       "name": "nile-table",
-      "description": "Nile table component.\n\nProperties:\n\n  * `defaultSlot` {`HTMLSlotElement`} - \n\n  * `rows` {`NileTableBody[]`} - \n\n  * `primaryRowWidths` {`number[]`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile table component.\n\nProperties:\n\n  * `defaultSlot` {`HTMLSlotElement`} - \n\n  * `rows` {`NileTableBody[]`} - \n\n  * `primaryRowWidths` {`number[]`} - \n\n  * `resizeObserver` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": []
     },
     {