@aquera/nile-elements 0.1.71 → 0.1.72-beta-1.0

package/package.json

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

package/src/nile-code-editor/nile-code-editor.ts

@@ -287,12 +287,6 @@ export class NileCodeEditor extends NileElement {
     }
   }
 
-   public closeCompletion() {
-    if (this.view) {
-      closeCompletion(this.view);
-    }
-  }
-
   handleEscapeKey(e: KeyboardEvent) {
     if (e.key === 'Escape' && this.view && completionStatus(this.view.state) !== null) {
       e.stopPropagation();      

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

@@ -43,19 +43,37 @@ export class NileTableBody extends NileElement {
   @queryAssignedNodes({ flatten: true }) _childNodes!: Array<HTMLElement>;
   @property() type: 'primary' | 'secondary' = 'primary';
   @property() bodyStyle: string;
+  @property({ type: Boolean, reflect: true, attribute: true }) expandableRows = false;
+  @property({ type: Boolean, reflect: true, attribute: true }) collapsible = false;
 
   @state() private rows_data: any[] = [];
   @state() private header_rows_data: any[] = [];
   @state() private sort__index: number;
   @state() private search__index: number;
   @state() private hasResizableColumns = false;
+  private expandedRow: HTMLElement | null = null;
 
   public static get styles(): CSSResultArray {
     return [styles];
   }
 
   protected firstUpdated(_changedProperties: PropertyValues): void {
-    this.emit('nile-body-load', { value: this.type, comp:this },true,false)
+    this.emit('nile-body-load', { value: this.type, comp: this }, true, false)
+    
+    if (this.collapsible) {
+      this.addEventListener('nile-change', (e: any) => {
+        const targetRow = e.target as HTMLElement;
+
+        if (e.detail.expanded) {
+          if (this.expandedRow && this.expandedRow !== targetRow) {
+            (this.expandedRow as any).expanded = false;
+          }
+          this.expandedRow = targetRow;
+        } else if (this.expandedRow === targetRow) {
+          this.expandedRow = null;
+        }
+      });
+    }
   }
 
   /* #endregion */
@@ -78,6 +96,14 @@ export class NileTableBody extends NileElement {
     let row_data: any = [];
     this._childNodes.forEach((child: any) => {
       if (child.tagName && child?.tagName?.toLowerCase() === 'nile-table-row') {
+        if (this.expandableRows) {
+          const expandable = child.getAttribute('expandable');
+          if (expandable) {
+            (child as any).expandable = expandable === 'false' || expandable === false ? false : true;
+          } else {
+            (child as any).expandable = true;
+          }
+        }
         let nilerows = this.getChildren(child, 'nile-table-cell-item');
         if (nilerows.length > 0) {
           nilerows.forEach((element: { innerHTML: any }) => {

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

@@ -51,6 +51,11 @@ export const styles = css`
   ${resizableHostStyles}
   ${resizerStyles}
   ${resizableSlotStyles}
+
+  ::slotted([slot="expansionTrigger"]),
+  ::slotted([slot="expansionTrigger"]) {
+    cursor: pointer;
+  }
 `;
 
 export default [styles];

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

@@ -57,6 +57,13 @@ export class NileTableCellItem extends NileElement {
     }
   }
 
+  private handleClick(e: MouseEvent): void {
+    this.dispatchEvent(new CustomEvent('nile-expand-click', {
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
   /**
    * Render method
    * @slot This is a slot test
@@ -66,7 +73,11 @@ export class NileTableCellItem extends NileElement {
       return html`
         <div class="cell__wrapper" part="nile__table-cell">
           ${this.hasSlotController.test('[default]')
-            ? html` <div class="column" part="nile__table-cell"><slot></slot></div>`
+        ? html`
+          <div class="column" part="nile__table-cell">
+            <slot name="expansionTrigger" @click=${this.handleClick} part="expansionTrigger"></slot>
+            <slot></slot>
+          </div>`
             : ''}
           <div class="resizer" @mousedown=${this.handleResizeStart}></div>
         </div>
@@ -74,7 +85,9 @@ export class NileTableCellItem extends NileElement {
     } else {
       return html`
         ${this.hasSlotController.test('[default]')
-          ? html` <slot class="column" part="nile__table-cell"> </slot>`
+        ? html`
+          <slot name="expansionTrigger" @click=${this.handleClick} part="expansionTrigger"></slot>
+          <slot class="column" part="nile__table-cell"> </slot>`
           : ''}
       `;
     }

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

@@ -27,6 +27,58 @@ export const styles = css`
   nile-table-row > slot::slotted(nile-table-cell-item:first-child) {
     color: red;
   }
+
+.row-container {
+  /* display: flex; */
+  /* flex-direction: column; */
+  /* overflow: hidden; */
+  /* contain: layout style; */
+}
+
+.row {
+  cursor: default;
+  position: relative;       
+  display: flex;
+  align-items: center;
+}
+
+.row.expandable {
+  border-bottom: 1px solid var(--nile-table-row-border-color);
+  /* overflow: hidden; */
+  /* contain: layout style; */
+}
+
+.expanded-content {
+  transition: max-height 0.3s ease;
+}
+
+.row.expandable {
+  margin-right: 4px;
+}
+ 
+.row ::slotted(nile-table-cell-item),
+.row ::slotted(nile-table-header-item) {
+  width: 100%;
+  box-sizing: border-box; 
+}
+
+.row ::slotted([slot="expandable-icon"]), slot[name="expandable-icon"] > nile-icon {
+  cursor: pointer;
+  position: absolute;
+  left: 0.40em;            
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  font-size: 1em;
+  line-height: 1;
+  user-select: none;
+  z-index: 2;
+}
+
+:host([expandIconRight]) .row ::slotted([slot="expandable-icon"]), :host([expandIconRight]) slot[name="expandable-icon"] > nile-icon {
+  right: 0.40em;
+  left: auto;
+}
 `;
 
 export default [styles];

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

@@ -10,6 +10,7 @@ import {
   html,
   CSSResultArray,
   TemplateResult,
+  PropertyValues,
 } from 'lit';
 import { customElement, query, property } from 'lit/decorators.js';
 import { styles } from './nile-table-row.css';
@@ -31,6 +32,33 @@ export class NileTableRow extends NileElement {
   public static get styles(): CSSResultArray {
     return [styles];
   }
+  @property({ type: Boolean, reflect: true, attribute: true }) expandable = false;
+
+  @property({ type: Boolean, reflect: true, attribute: true }) expanded = false;
+
+  @property({ type: Boolean, reflect: true, attribute: true }) expansionTriggerMode = false;
+
+  @property({ type: Boolean, reflect: true, attribute: true }) expandIconRight = false;
+
+  @query('slot[name="expanded"]')
+	private _expandedSlot!: HTMLSlotElement;
+	
+	@query('slot[name="expandable-icon"]')
+	private _iconSlot!: HTMLSlotElement;
+
+	private tableBodyHasExpandable: any;
+
+	private _fallbackIcon?: HTMLElement | null;
+
+  private toggleExpand(e: MouseEvent): void {
+    this.expanded = !this.expanded;
+    this.dispatchEvent(new CustomEvent('nile-change', {
+      detail: { expanded: this.expanded },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
 
   /* #endregion */
 
@@ -41,6 +69,18 @@ export class NileTableRow extends NileElement {
    * @slot This is a slot test
    */
 
+	protected firstUpdated(_changedProperties: PropertyValues): void {
+    super.firstUpdated(_changedProperties);
+    this.tableBodyHasExpandable = this.closest('nile-table-body');
+
+    if (this.expansionTriggerMode) {
+      this.addEventListener('nile-expand-click', (e: MouseEvent) => {
+        e.stopPropagation();
+        this.toggleExpand(e);
+      });
+    }
+	}
+
   private handleSortingAlter(event: CustomEvent) {
     const header_items: any = [
       ...this.querySelectorAll('nile-table-header-item'),
@@ -54,15 +94,78 @@ export class NileTableRow extends NileElement {
     }
   }
 
+	protected updated(changedProperties: PropertyValues): void {
+		if (!changedProperties.has('expandable') || !this._iconSlot) return;
+
+		if (!this._fallbackIcon) {
+			this._fallbackIcon = this.shadowRoot?.querySelector('nile-icon') ?? null;
+		}
+
+		const assigned = this._iconSlot.assignedElements();
+		const hasAssigned = assigned.length > 0;
+    const displayValue = this.expandable ? '' : 'none';
+
+		if (hasAssigned) {
+			for (const el of assigned) {
+				(el as HTMLElement).style.display = displayValue;
+			}
+		} else if (this._fallbackIcon) {
+			this._fallbackIcon.style.display = displayValue;
+    }
+    
+    if (this.expansionTriggerMode) {
+      if (hasAssigned) {
+        for (const el of assigned) {
+          (el as HTMLElement).style.display = 'none';
+        }
+      } else if (this._fallbackIcon) {
+        this._fallbackIcon.style.display = 'none';
+      }
+    }
+	}
+
   public render(): TemplateResult {
+		if (!this.expandable && !this.tableBodyHasExpandable?.expandableRows) {
+      return html`
+        <slot
+          part="nile-row"
+          @nile-click-sort="${this.handleSortingAlter}"
+        ></slot>
+      `;
+    }
+  
+ 
     return html`
-      <slot
-        part="nile-row"
-        @nile-click-sort="${this.handleSortingAlter}"
-      ></slot>
+      <div part="row-container" class="row-container">
+        <div
+          part="nile-row"
+          class="row expandable ${this.expanded ? 'expanded' : ''}"
+          @nile-click-sort="${this.handleSortingAlter}"
+        >
+          <slot
+            name="expandable-icon"
+            @click=${this.toggleExpand} 
+            part="expandable-icon"
+          >
+            <nile-icon
+              name="${this.expanded ? 'arrowup' : 'arrowdown'}"
+              role="button"
+              size="10"
+              aria-label="${this.expanded ? 'Collapse row' : 'Expand row'}">
+            </nile-icon>
+          </slot>
+          <slot></slot>
+        </div>
+  
+        ${this.expanded && this.expandable
+          ? html`
+              <div class="expanded-content" part="expanded-content">
+                <slot name="expanded"></slot>
+              </div>`
+          : null}
+      </div>
     `;
   }
-
   /* #endregion */
 }
 

package/vscode-html-custom-data.json

@@ -3681,7 +3681,7 @@
     },
     {
       "name": "nile-table-body",
-      "description": "nile-table-body component.\n\nAttributes:\n\n  * `type` {`\"primary\" | \"secondary\"`} - \n\n  * `bodyStyle` {`string`} - \n\nProperties:\n\n  * `defaultSlot` {`HTMLSlotElement`} - The styles for TableBody\n\n  * `_childNodes` {`HTMLElement[]`} - \n\n  * `type` {`\"primary\" | \"secondary\"`} - \n\n  * `bodyStyle` {`string`} - \n\n  * `rows_data` {`any[]`} - \n\n  * `header_rows_data` {`any[]`} - \n\n  * `sort__index` {`number`} - \n\n  * `search__index` {`number`} - \n\n  * `hasResizableColumns` {`boolean`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "nile-table-body component.\n\nAttributes:\n\n  * `type` {`\"primary\" | \"secondary\"`} - \n\n  * `bodyStyle` {`string`} - \n\n  * `expandableRows` {`boolean`} - \n\n  * `collapsible` {`boolean`} - \n\nProperties:\n\n  * `defaultSlot` {`HTMLSlotElement`} - The styles for TableBody\n\n  * `_childNodes` {`HTMLElement[]`} - \n\n  * `type` {`\"primary\" | \"secondary\"`} - \n\n  * `bodyStyle` {`string`} - \n\n  * `expandableRows` {`boolean`} - \n\n  * `collapsible` {`boolean`} - \n\n  * `rows_data` {`any[]`} - \n\n  * `header_rows_data` {`any[]`} - \n\n  * `sort__index` {`number`} - \n\n  * `search__index` {`number`} - \n\n  * `hasResizableColumns` {`boolean`} - \n\n  * `expandedRow` {`HTMLElement | null`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "type",
@@ -3698,17 +3698,31 @@
         {
           "name": "bodyStyle",
           "description": "`bodyStyle` {`string`} - \n\nProperty: bodyStyle"
+        },
+        {
+          "name": "expandableRows",
+          "description": "`expandableRows` {`boolean`} - \n\nProperty: expandableRows\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "collapsible",
+          "description": "`collapsible` {`boolean`} - \n\nProperty: collapsible\n\nDefault: false",
+          "valueSet": "v"
         }
       ]
     },
     {
       "name": "nile-table-cell-item",
-      "description": "Nile table Cell Item component.\n\nAttributes:\n\n  * `resizable` {`boolean`} - Enables the resize functionality.\n\nProperties:\n\n  * `hasSlotController` - \n\n  * `resizable` {`boolean`} - Enables the resize functionality.\n\n  * `handleResizeStart` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile table Cell Item component.\n\nEvents:\n\n  * `nile-expand-click` {`CustomEvent<unknown>`} - \n\nAttributes:\n\n  * `resizable` {`boolean`} - Enables the resize functionality.\n\nProperties:\n\n  * `hasSlotController` - \n\n  * `resizable` {`boolean`} - Enables the resize functionality.\n\n  * `handleResizeStart` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "resizable",
           "description": "`resizable` {`boolean`} - Enables the resize functionality.\n\nProperty: resizable\n\nDefault: false",
           "valueSet": "v"
+        },
+        {
+          "name": "onnile-expand-click",
+          "description": "`nile-expand-click` {`CustomEvent<unknown>`} - "
         }
       ]
     },
@@ -3739,8 +3753,33 @@
     },
     {
       "name": "nile-table-row",
-      "description": "nile-table-row component.\n\nProperties:\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
-      "attributes": []
+      "description": "nile-table-row component.\n\nEvents:\n\n  * `nile-change` {`CustomEvent<{ expanded: boolean; }>`} - \n\nAttributes:\n\n  * `expandable` {`boolean`} - \n\n  * `expanded` {`boolean`} - \n\n  * `expansionTriggerMode` {`boolean`} - \n\n  * `expandIconRight` {`boolean`} - \n\nProperties:\n\n  * `expandable` {`boolean`} - \n\n  * `expanded` {`boolean`} - \n\n  * `expansionTriggerMode` {`boolean`} - \n\n  * `expandIconRight` {`boolean`} - \n\n  * `_expandedSlot` {`HTMLSlotElement`} - \n\n  * `_iconSlot` {`HTMLSlotElement`} - \n\n  * `tableBodyHasExpandable` - \n\n  * `_fallbackIcon` {`HTMLElement | null | undefined`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "expandable",
+          "description": "`expandable` {`boolean`} - \n\nProperty: expandable\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "expanded",
+          "description": "`expanded` {`boolean`} - \n\nProperty: expanded\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "expansionTriggerMode",
+          "description": "`expansionTriggerMode` {`boolean`} - \n\nProperty: expansionTriggerMode\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "expandIconRight",
+          "description": "`expandIconRight` {`boolean`} - \n\nProperty: expandIconRight\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "onnile-change",
+          "description": "`nile-change` {`CustomEvent<{ expanded: boolean; }>`} - "
+        }
+      ]
     },
     {
       "name": "nile-table",