@aquera/nile-elements 0.1.55-beta-2.0 → 0.1.55-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.55-beta-2.0",
+  "version": "0.1.55-beta-1.2",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-error-notification/nile-error-notification.ts

@@ -35,7 +35,6 @@ export class NileErrorNotification extends LitElement {
   @property({ type: String, reflect: true  }) errorMessage: string = '';
 
   @property({ type: String, reflect: true  }) color: string = '';
-  
   protected updated(_changedProperties: PropertyValues): void {
     if(_changedProperties.has('color')){
       this.style.setProperty('--indication-color',this.color)
@@ -52,7 +51,7 @@ export class NileErrorNotification extends LitElement {
    */
   public render(): TemplateResult {
     return html`
-      <div class="nile-error-notification">
+      <div class="nile-error-notification" part="container">
         <nile-icon
           name="info2"
           size="14"
@@ -60,7 +59,9 @@ export class NileErrorNotification extends LitElement {
           part="icon"
           color="var(--indication-color)"
         ></nile-icon>
-        ${this.errorMessage}
+        <span part="message">
+          ${this.errorMessage}
+        </span>
       </div>
     `;
   }

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

@@ -34,7 +34,6 @@ export const styles = css`
     display: table;
     border-collapse: collapse;
     width: 100%;
-    table-layout: fixed;
   }
 
   slot::slotted(nile-table-row:nth-child(odd)) {

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

@@ -19,22 +19,9 @@ export const styles = css`
     box-sizing: border-box;
     display: table-cell;
     vertical-align: middle;
+    max-width: var(--max--cell-width);
     padding: 16px 24px;
     min-height: var(--min--height);
-    position: relative;
-    overflow: hidden;
-    table-layout: fixed;
-  }
-
-  .cell__wrapper {
-    min-width:var(--min-cell-width);
-    width:var(--cell-width);
-    height: 100%;
-    position: relative;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-    width: 100%;
   }
 
   .column {
@@ -49,85 +36,6 @@ export const styles = css`
     /* line-height: var(--nile-type-scale-6); */
     line-height: normal;
     letter-spacing: 0.2px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1;
-    min-width: 0;
-    width: 100%;
-    display: block;
-  }
-
-  .resizer {
-    position: absolute;
-    right: 0;
-    top: -1000px;
-    bottom: -1000px;
-    width: 8px;
-    cursor: col-resize;
-    user-select: none;
-    background-color: var(--nile-colors-neutral-100);
-    transition: background-color 0.2s;
-    z-index: 10;
-    opacity: 0;
-    transition: opacity 0.2s ease;
-    pointer-events: none;
-  }
-
-  :host:hover .resizer {
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  .resizer::before {
-    content: '';
-    position: absolute;
-    right: 3px;
-    top: 0;
-    width: 2px;
-    height: 100%;
-    background-color: var(--nile-colors-neutral-500);
-    opacity: 0.8;
-  }
-
-  .resizer:hover {
-    background-color: var(--nile-colors-neutral-400);
-  }
-
-  .resizer:hover::before {
-    background-color: var(--nile-colors-neutral-700);
-    opacity: 1;
-  }
-
-  .resizer.resizing {
-    background-color: var(--nile-colors-neutral-400);
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  .resizer.resizing::before {
-    background-color: var(--nile-colors-neutral-700);
-    opacity: 1;
-    width: 3px;
-  }
-
-  ::slotted(*) {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 100%;
-    display: block;
-    width: 100%;
-  }
-
-  ::slotted(span),
-  ::slotted(div),
-  ::slotted(p) {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    display: block;
-    width: 100%;
   }
 `;
 

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

@@ -33,80 +33,19 @@ export class NileTableCellItem extends NileElement {
     return [styles];
   }
 
-  /** Enables the resize functionality. */
-  @property({ type: Boolean, reflect: true }) resizable = false;
-
   /* #endregion */
 
   /* #region Methods */
 
-  connectedCallback() {
-    super.connectedCallback();
-    console.log('Table cell item connected, resizable:', this.resizable);
-  }
-
-  private handleResizeStart(e: any) {
-    e.preventDefault();
-    const startX = e.pageX;
-    const startWidth = this.offsetWidth;
-    
-    // Add resizing class for visual feedback
-    const resizer = e.target;
-    resizer.classList.add('resizing');
-
-    const onMouseMove = (e: any) => {
-      const delta = e.pageX - startX;
-      const newWidth = Math.max(50, startWidth + delta);
-
-      // Apply width to this cell
-      this.style.width = newWidth + 'px';
-
-      // Find all cells in the same column and apply width
-      const tableBody = this.closest('nile-table-body');
-      if (tableBody) {
-        const rows = tableBody.querySelectorAll('nile-table-row');
-        const cellIndex = this.getColumnIndex();
-        
-        rows.forEach(row => {
-          const cells = row.querySelectorAll('nile-table-cell-item');
-          if (cells[cellIndex]) {
-            cells[cellIndex].style.width = newWidth + 'px';
-          }
-        });
-      }
-    };
-
-    const onMouseUp = () => {
-      resizer.classList.remove('resizing');
-      document.removeEventListener('mousemove', onMouseMove);
-      document.removeEventListener('mouseup', onMouseUp);
-    };
-
-    document.addEventListener('mousemove', onMouseMove);
-    document.addEventListener('mouseup', onMouseUp);
-  }
-
-  private getColumnIndex(): number {
-    const tableRow = this.closest('nile-table-row');
-    if (tableRow) {
-      const cells = tableRow.querySelectorAll('nile-table-cell-item');
-      return Array.from(cells).indexOf(this);
-    }
-    return 0;
-  }
-
   /**
    * Render method
    * @slot This is a slot test
    */
   public render(): TemplateResult {
     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>`
-          : ''}
-        ${this.resizable ? html`<div class="resizer" @mousedown=${this.handleResizeStart}></div>` : null}
-      </div>
+      ${this.hasSlotController.test('[default]')
+        ? html` <slot class="column" part="nile__table-cell"> </slot>`
+        : ''}
     `;
   }
 

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

@@ -16,8 +16,6 @@ export const styles = css`
     --cell-width: auto;
     display: table-cell;
     box-sizing: border-box;
-    position: relative;
-    border-right: 1px solid var(--nile-colors-gray-light-mode-200);
   }
   
   .header__item__wrapper{
@@ -29,7 +27,6 @@ export const styles = css`
     padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-3xl);
     min-height: 44px;
     height: 44px;
-    position: relative;
   }
 
   .headers {
@@ -70,38 +67,6 @@ export const styles = css`
   .headers:hover .hover__arrow {
     opacity: 0.3;
   }
-
-  .resizer {
-    position: absolute;
-    right: -2px;
-    top: -1000px;
-    bottom: -1000px;
-    width: 8px;
-    cursor: ew-resize;
-    user-select: none;
-    transition: background-color 0.2s;
-    z-index: 10;
-    opacity: 0;
-    transition: opacity 0.2s ease;
-  }
-
-  :host:hover .resizer {
-    opacity: 1;
-  }
-
-  .resizer::before {
-    content: '';
-    position: absolute;
-    height: 100%;
-    opacity: 0.8;
-  }
-
-  .resizer.resizing {
-    border-right: 4px double var(--nile-colors-neutral-400);
-    background-color: transparent;
-    opacity: 1;
-  }
-
 `;
 
 export default [styles];

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

@@ -43,20 +43,12 @@ export class NileTableHeaderItem extends NileElement {
   @property({ type: String, reflect: true, attribute: 'icon-name' }) iconName =
     '';
 
-  /** Enables the resize functionality. */
-  @property({ type: Boolean, reflect: true }) resizable = false;
-
   @state() sorting_ct = 0;
 
   /* #endregion */
 
   /* #region Methods */
 
-  connectedCallback() {
-    super.connectedCallback();
-    console.log('Table header item connected, resizable:', this.resizable);
-  }
-
   /**
    * Render method
    * @slot This is a slot test
@@ -74,55 +66,9 @@ export class NileTableHeaderItem extends NileElement {
     this.emit('nile-search', { value: e.detail.value });
   }
 
-  private handleResizeStart(e: any) {
-    e.preventDefault();
-    const startX = e.pageX;
-    const startWidth = this.offsetWidth;
-    
-    const resizer = e.target;
-    resizer.classList.add('resizing');
-
-    const onMouseMove = (e: any) => {
-      const delta = e.pageX - startX;
-      const newWidth = Math.max(50, startWidth + delta);
-
-      this.style.width = newWidth + 'px';
-
-      const tableBody = this.closest('nile-table-body');
-      if (tableBody) {
-        const rows = tableBody.querySelectorAll('nile-table-row');
-        const headerIndex = this.getColumnIndex();
-        
-        rows.forEach(row => {
-          const cells = row.querySelectorAll('nile-table-cell-item');
-          if (cells[headerIndex]) {
-            cells[headerIndex].style.width = newWidth + 'px';
-          }
-        });
-      }
-    };
-
-    const onMouseUp = () => {
-      resizer.classList.remove('resizing');
-      document.removeEventListener('mousemove', onMouseMove);
-      document.removeEventListener('mouseup', onMouseUp);
-    };
-
-    document.addEventListener('mousemove', onMouseMove);
-    document.addEventListener('mouseup', onMouseUp);
-  }
-
-  private getColumnIndex(): number {
-    const headerRow = this.closest('nile-table-row');
-    if (headerRow) {
-      const headers = headerRow.querySelectorAll('nile-table-header-item');
-      return Array.from(headers).indexOf(this);
-    }
-    return 0;
-  }
-
   public render(): TemplateResult {
-    return html`
+    return html` ${this.hasSlotController.test('[default]')
+      ? html`
       <div class="header__item__wrapper" part="nile__table-header-cell">
         <div class="headers">
           <slot> </slot>
@@ -163,9 +109,10 @@ export class NileTableHeaderItem extends NileElement {
               </nile-popover>`
             : html``}
         </div>
-        ${this.resizable ? html`<div class="resizer" @mousedown=${this.handleResizeStart}></div>` : null}
-      </div>`;
+      </div>`
+      : null}`;
   }
+  /* #endregion */
 }
 
 export default NileTableHeaderItem;

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

@@ -27,6 +27,97 @@ export const styles = css`
   nile-table-row > slot::slotted(nile-table-cell-item:first-child) {
     color: red;
   }
+
+  .row-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.row {
+  cursor: pointer;
+}
+
+.expanded-content {
+  overflow: hidden;
+  /* Optional: smooth height transition */
+  transition: max-height 0.3s ease;
+  max-height: 1000px; /* or set via a CSS variable */
+}
+
+.row-container {
+  display: flex;
+  flex-direction: column; /* keeps expansion content below */
+}
+
+.row {
+  display: flex;          /* turn each row into a flex row */
+  cursor: pointer;        /* keep your expand cursor */
+}
+
+.row.expandable .expand-icon {
+  margin-right: 4px;
+}
+
+/* All direct children of .row (i.e. your cell items & the icon) flex equally */
+.row ::slotted(nile-table-cell-item),
+.row ::slotted(nile-table-header-item) {
+  flex: 1 1 0;            /* grow + shrink equally, zero base-width */
+  box-sizing: border-box; /* so padding/borders stay inside */
+}
+
+/* Make sure the expand-icon doesn’t stretch like a cell: */
+.row ::slotted(.expand-icon) {
+  flex: 0 0 auto;
+}
+
+/* Expansion pane—already in your code: */
+.expanded-content {
+  overflow: hidden;
+  transition: ease-in-out all 10s;
+  max-height: 1000px;     /* or a CSS variable */
+}
+
+ 
+
+ 
+.row-container {
+  display: flex;
+  flex-direction: column;
+}
+
+ 
+.row {
+  position: relative;      /* so the icon can be absolutely positioned */
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--nile-table-row-border-color, #e0e0e0);
+  cursor: default;         /* row itself is inert */
+  background: var(--nile-table-row-background, #fff);
+}
+
+/* Expand/collapse icon */
+.expand-icon {
+  position: absolute;
+  left: 0.40em;            
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  font-size: 1em;
+  line-height: 1;
+  user-select: none;
+  z-index: 1;
+}
+
+
+ 
+ 
+
+
+.expanded-content {
+  overflow: hidden;
+transition: ease-in-out all 10s;
+}
+
 `;
 
 export default [styles];

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

@@ -1,10 +1,3 @@
-/**
- * Copyright Aquera Inc 2023
- *
- * This source code is licensed under the BSD-3-Clause license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
 import {
   LitElement,
   html,
@@ -16,58 +9,87 @@ import { styles } from './nile-table-row.css';
 import NileElement from '../internal/nile-element';
 
 /**
- *nile-table-row component.
+ * `<nile-table-row>` component.
  *
- * @tag nile-table-row
+ * Renders one table row; if `expandable` is true, shows
+ * a toggle icon at top-left that expands/collapses
+ * the `<slot name="expanded">` content.
  *
+ * @slot            Default slot for cell items
+ * @slot expanded   Content to reveal on expand
+ * @attr {boolean} expandable  enable expansion behavior
+ * @attr {boolean} expanded   reflect current expanded state
  */
 @customElement('nile-table-row')
 export class NileTableRow extends NileElement {
-  /**
-   * The styles for TableRow
-   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
-   */
-
+  /** Include our CSS */
   public static get styles(): CSSResultArray {
     return [styles];
   }
 
-  /* #endregion */
+  /** Enable expansion (shows icon) */
+  @property({ type: Boolean, reflect: true }) expandable = false;
 
-  /* #region Methods */
+  /** Current expanded/collapsed state */
+  @property({ type: Boolean, reflect: true }) expanded = false;
 
-  /**
-   * Render method
-   * @slot This is a slot test
-   */
+  @query('slot[name="expanded"]')
+  private _expandedSlot!: HTMLSlotElement;
 
+  /** Icon click toggles expand/collapse */
+  private toggleExpand(e: MouseEvent): void {
+    e.stopPropagation();
+    this.expanded = !this.expanded;
+    this.dispatchEvent(new CustomEvent('nile-row-toggle', {
+      detail: { expanded: this.expanded },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  /** Sorting event pass-through (unchanged) */
   private handleSortingAlter(event: CustomEvent) {
-    const header_items: any = [
-      ...this.querySelectorAll('nile-table-header-item'),
-    ];
-    for (let i = 0; i < header_items.length; i++) {
-      const header = header_items[i];
-      const haveIcon = header.textContent == event.detail.value.curr_sort_string;
-      if (!haveIcon) {
-        header.sorting_ct = 0;
+    const headers = Array.from(this.querySelectorAll('nile-table-header-item'));
+    headers.forEach(header => {
+      if (header.textContent !== event.detail.value.curr_sort_string) {
+        (header as any).sorting_ct = 0;
       }
-    }
+    });
   }
 
   public render(): TemplateResult {
     return html`
-      <slot
-        part="nile-row"
-        @nile-click-sort="${this.handleSortingAlter}"
-      ></slot>
+      <div class="row-container">
+        <div
+          part="nile-row"
+          class="row ${this.expandable ? 'expandable' : ''} ${this.expanded ? 'expanded' : ''}"
+          @nile-click-sort=${this.handleSortingAlter}
+        >
+          ${this.expandable
+            ? html`
+              <nile-icon
+                class="expand-icon"
+                 name="${this.expanded ? 'chevron-up' : 'chevron-down'}"
+                @click=${this.toggleExpand}
+                role="button"
+                size="10"
+                aria-label="${this.expanded ? 'Collapse row' : 'Expand row'}">
+              </nile-icon>`
+            : null}
+          <slot></slot>
+        </div>
+
+        ${this.expandable && this.expanded
+          ? html`
+              <div class="expanded-content">
+                <slot name="expanded"></slot>
+              </div>`
+          : null}
+      </div>
     `;
   }
-
-  /* #endregion */
 }
 
-export default NileTableRow;
-
 declare global {
   interface HTMLElementTagNameMap {
     'nile-table-row': NileTableRow;

package/vscode-html-custom-data.json

@@ -3420,18 +3420,12 @@
     },
     {
       "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  * `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"
-        }
-      ]
+      "description": "Nile table Cell Item component.\n\nProperties:\n\n  * `hasSlotController` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": []
     },
     {
       "name": "nile-table-header-item",
-      "description": "Nile icon component.\n\nAttributes:\n\n  * `havesort` {`boolean`} - Enables the sort functionality.\n\n  * `havefilter` {`boolean`} - Enables the sort functionality.\n\n  * `icon-name` {`string`} - Places the icon .\n\n  * `resizable` {`boolean`} - Enables the resize functionality.\n\nProperties:\n\n  * `hasSlotController` - \n\n  * `havesort` {`boolean`} - Enables the sort functionality.\n\n  * `havefilter` {`boolean`} - Enables the sort functionality.\n\n  * `iconName` {`string`} - Places the icon .\n\n  * `resizable` {`boolean`} - Enables the resize functionality.\n\n  * `sorting_ct` {`number`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile icon component.\n\nAttributes:\n\n  * `havesort` {`boolean`} - Enables the sort functionality.\n\n  * `havefilter` {`boolean`} - Enables the sort functionality.\n\n  * `icon-name` {`string`} - Places the icon .\n\nProperties:\n\n  * `hasSlotController` - \n\n  * `havesort` {`boolean`} - Enables the sort functionality.\n\n  * `havefilter` {`boolean`} - Enables the sort functionality.\n\n  * `iconName` {`string`} - Places the icon .\n\n  * `sorting_ct` {`number`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "havesort",
@@ -3446,18 +3440,28 @@
         {
           "name": "icon-name",
           "description": "`icon-name` {`string`} - Places the icon .\n\nProperty: iconName\n\nDefault: "
-        },
-        {
-          "name": "resizable",
-          "description": "`resizable` {`boolean`} - Enables the resize functionality.\n\nProperty: resizable\n\nDefault: false",
-          "valueSet": "v"
         }
       ]
     },
     {
       "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\nRenders one table row; if `expandable` is true, shows\na toggle icon at top-left that expands/collapses\nthe `<slot name=\"expanded\">` content.\n\nEvents:\n\n  * `nile-row-toggle` {`CustomEvent<{ expanded: boolean; }>`} - \n\nSlots:\n\n  * ` ` {} - Default slot for cell items\n\nAttributes:\n\n  * `expandable` {`boolean`} - Enable expansion (shows icon)\n\n  * `expanded` {`boolean`} - Current expanded/collapsed state\n\nProperties:\n\n  * `expandable` {`boolean`} - Enable expansion (shows icon)\n\n  * `expanded` {`boolean`} - Current expanded/collapsed state\n\n  * `_expandedSlot` {`HTMLSlotElement`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "expandable",
+          "description": "`expandable` {`boolean`} - Enable expansion (shows icon)\n\nProperty: expandable\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "expanded",
+          "description": "`expanded` {`boolean`} - Current expanded/collapsed state\n\nProperty: expanded\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "onnile-row-toggle",
+          "description": "`nile-row-toggle` {`CustomEvent<{ expanded: boolean; }>`} - "
+        }
+      ]
     },
     {
       "name": "nile-table",