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

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

@@ -35,6 +35,7 @@ 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)
@@ -51,7 +52,7 @@ export class NileErrorNotification extends LitElement {
    */
   public render(): TemplateResult {
     return html`
-      <div class="nile-error-notification" part="container">
+      <div class="nile-error-notification">
         <nile-icon
           name="info2"
           size="14"
@@ -59,9 +60,7 @@ export class NileErrorNotification extends LitElement {
           part="icon"
           color="var(--indication-color)"
         ></nile-icon>
-        <span part="message">
-          ${this.errorMessage}
-        </span>
+        ${this.errorMessage}
       </div>
     `;
   }

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

@@ -34,6 +34,7 @@ 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,9 +19,21 @@ export const styles = css`
     box-sizing: border-box;
     display: table-cell;
     vertical-align: middle;
-    max-width: var(--max--cell-width);
     padding: 16px 24px;
+    max-width: var(--max--cell-width);  
     min-height: var(--min--height);
+    position: relative;
+    overflow: hidden;
+    table-layout: fixed;
+  }
+
+  .cell__wrapper {
+    height: 100%;
+    position: relative;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    width: 100%;
   }
 
   .column {
@@ -36,6 +48,80 @@ 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;
+    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;
+    display: block;
+  }
+
+  ::slotted(span),
+  ::slotted(div),
+  ::slotted(p) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
   }
 `;
 

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

@@ -33,19 +33,75 @@ export class NileTableCellItem extends NileElement {
     return [styles];
   }
 
+  /** Enables the resize functionality. */
+  @property({ type: Boolean, reflect: true }) resizable = false;
+
   /* #endregion */
 
   /* #region Methods */
 
+  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`
-      ${this.hasSlotController.test('[default]')
-        ? html` <slot class="column" part="nile__table-cell"> </slot>`
-        : ''}
+      <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>
     `;
   }
 

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

@@ -16,6 +16,8 @@ export const styles = css`
     --cell-width: auto;
     display: table-cell;
     box-sizing: border-box;
+    position: relative;
+    border-right: 1px solid var(--nile-colors-neutral-400);
   }
   
   .header__item__wrapper{
@@ -27,6 +29,7 @@ export const styles = css`
     padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-3xl);
     min-height: 44px;
     height: 44px;
+    position: relative;
   }
 
   .headers {
@@ -67,6 +70,38 @@ 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,12 +43,20 @@ 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
@@ -66,9 +74,55 @@ 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` ${this.hasSlotController.test('[default]')
-      ? html`
+    return html`
       <div class="header__item__wrapper" part="nile__table-header-cell">
         <div class="headers">
           <slot> </slot>
@@ -109,10 +163,9 @@ export class NileTableHeaderItem extends NileElement {
               </nile-popover>`
             : html``}
         </div>
-      </div>`
-      : null}`;
+        ${this.resizable ? html`<div class="resizer" @mousedown=${this.handleResizeStart}></div>` : null}
+      </div>`;
   }
-  /* #endregion */
 }
 
 export default NileTableHeaderItem;

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

@@ -27,97 +27,6 @@ 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,3 +1,10 @@
+/**
+ * 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,
@@ -9,87 +16,58 @@ import { styles } from './nile-table-row.css';
 import NileElement from '../internal/nile-element';
 
 /**
- * `<nile-table-row>` component.
+ *nile-table-row component.
  *
- * Renders one table row; if `expandable` is true, shows
- * a toggle icon at top-left that expands/collapses
- * the `<slot name="expanded">` content.
+ * @tag nile-table-row
  *
- * @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 {
-  /** Include our CSS */
+  /**
+   * The styles for TableRow
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+
   public static get styles(): CSSResultArray {
     return [styles];
   }
 
-  /** Enable expansion (shows icon) */
-  @property({ type: Boolean, reflect: true }) expandable = false;
+  /* #endregion */
 
-  /** Current expanded/collapsed state */
-  @property({ type: Boolean, reflect: true }) expanded = false;
+  /* #region Methods */
 
-  @query('slot[name="expanded"]')
-  private _expandedSlot!: HTMLSlotElement;
+  /**
+   * Render method
+   * @slot This is a slot test
+   */
 
-  /** 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 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;
+    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;
       }
-    });
+    }
   }
 
   public render(): TemplateResult {
     return html`
-      <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>
+      <slot
+        part="nile-row"
+        @nile-click-sort="${this.handleSortingAlter}"
+      ></slot>
     `;
   }
+
+  /* #endregion */
 }
 
+export default NileTableRow;
+
 declare global {
   interface HTMLElementTagNameMap {
     'nile-table-row': NileTableRow;

package/vscode-html-custom-data.json

@@ -3420,12 +3420,18 @@
     },
     {
       "name": "nile-table-cell-item",
-      "description": "Nile table Cell Item component.\n\nProperties:\n\n  * `hasSlotController` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
-      "attributes": []
+      "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"
+        }
+      ]
     },
     {
       "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\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`} - ",
+      "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`} - ",
       "attributes": [
         {
           "name": "havesort",
@@ -3440,29 +3446,19 @@
         {
           "name": "icon-name",
           "description": "`icon-name` {`string`} - Places the icon .\n\nProperty: iconName\n\nDefault: "
-        }
-      ]
-    },
-    {
-      "name": "nile-table-row",
-      "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",
+          "name": "resizable",
+          "description": "`resizable` {`boolean`} - Enables the resize functionality.\n\nProperty: resizable\n\nDefault: false",
           "valueSet": "v"
-        },
-        {
-          "name": "onnile-row-toggle",
-          "description": "`nile-row-toggle` {`CustomEvent<{ expanded: boolean; }>`} - "
         }
       ]
     },
+    {
+      "name": "nile-table-row",
+      "description": "nile-table-row component.\n\nProperties:\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": []
+    },
     {
       "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  * `debounceTimeout` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",