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

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.1",
+  "version": "0.1.32-beta-1.2",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

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

@@ -26,6 +26,7 @@ export class NileTable extends NileElement {
 	private rows:Array<NileTableBody>=[];
 	private primaryRowWidths:Array<number>=[]
 	private resizeObserver:ResizeObserver ;
+	private debounceTimeout:any
 
 
 	/**
@@ -131,7 +132,13 @@ export class NileTable extends NileElement {
 	handleResizeObserver(){
 		const onResize = (entries:ResizeObserverEntry[]): void=> {
 			for (let entry of entries) {
-				this.realignStructure();
+				if(this.debounceTimeout){
+					clearTimeout(this.debounceTimeout);
+				}
+				this.debounceTimeout=setTimeout(() => {
+					this.realignStructure();
+					this.debounceTimeout=null;
+				}, 500);
 			}
 		};
 		this.resizeObserver=new ResizeObserver(onResize)

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

@@ -12,6 +12,7 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
+    --min-cell-width:auto;
     --cell-width:auto;
     --min--height: 52px;
     --max--cell-width: auto;
@@ -24,7 +25,8 @@ export const styles = css`
   }
 
   .column {
-    min-width:var(--cell-width);
+    min-width:var(--min-cell-width);
+    width:var(--cell-width);
     height: 100%;
     color: var(--nile-colors-gray-light-mode-600);
     font-family: var(--nile-font-family-serif);

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

@@ -12,13 +12,15 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
-    --cell-width:auto;
+    --cell-min-width: auto;
+    --cell-width: auto;
     display: table-cell;
     box-sizing: border-box;
   }
   
   .header__item__wrapper{
-    min-width:var(--cell-width);
+    min-width:var(--cell-min-width);
+    width:var(--cell-width);
     display:flex;
     align-items:center;
     box-sizing: border-box;
@@ -28,6 +30,7 @@ export const styles = css`
   }
 
   .headers {
+    overflow:hidden;
     display: flex;
     align-items: center;
     height: auto;

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

@@ -69,7 +69,7 @@ export class NileTableHeaderItem extends NileElement {
   public render(): TemplateResult {
     return html` ${this.hasSlotController.test('[default]')
       ? html`
-      <div class="header__item__wrapper">
+      <div class="header__item__wrapper" part="nile__table-header-cell">
         <div class="headers">
           <slot> </slot>
           ${this.havesort && this.sorting_ct % 3 === 0

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  * `resizeObserver` - \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  * `debounceTimeout` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": []
     },
     {