@aquera/nile-elements 0.1.65-beta-1.0 → 0.1.66-beta-1.1

package/src/nile-slider/utils/nile-slider.utils.ts

@@ -0,0 +1,136 @@
+import NileSlider from '../nile-slider';
+import { NileSliderEvents } from '../types/nile-slider.enums';
+
+export const getClampedPercent = (
+  rect: DOMRect,
+  x: number,
+): number => {
+  const clampedX = Math.max(0, Math.min(x, rect.width)); 
+  const percent = (clampedX / rect.width) * 100;
+  return percent;
+};
+
+export const percentToValue = (percent: number, nileSlider: NileSlider): number => {
+  const value = nileSlider.minValue + (percent / 100) * (nileSlider.maxValue - nileSlider.minValue);
+  if(nileSlider.maxValue - nileSlider.minValue < 1) {
+    return parseFloat(value.toFixed(2));
+  } else {
+    return Math.floor(value);
+  }
+};
+
+export const valueToPercent = (value: number, nileSlider: NileSlider): number => {
+  return ((value - nileSlider.minValue) / (nileSlider.maxValue - nileSlider.minValue)) * 100;
+};
+
+export const handleSingleSlider = (
+  e: MouseEvent,
+  rect: DOMRect,
+  nileSlider: NileSlider
+): void => {
+  const x = e.clientX - rect.left;
+  const percent = getClampedPercent(rect, x);
+  nileSlider.value = percentToValue(percent, nileSlider);
+  nileSlider.emit(NileSliderEvents.NILE_CHANGE, { value: nileSlider.value });
+  nileSlider.buttonOne.style.left = `${percent}%`;
+  nileSlider.completed.style.width = `${percent}%`;
+};
+
+export const handleRangeOne = (
+  e: MouseEvent,
+  rect: DOMRect,
+  nileSlider: NileSlider
+): void => {
+  const x = e.clientX - rect.left;
+  const percent = getClampedPercent(rect, x);
+  nileSlider.rangeOneValue = percentToValue(percent, nileSlider);
+  nileSlider.rangeOneValue = Math.min(nileSlider.rangeOneValue, nileSlider.rangeTwoValue);
+  nileSlider.emit(NileSliderEvents.NILE_BUTTON_FIRST_CHANGE, {
+    value: nileSlider.rangeOneValue,
+  });
+  if (nileSlider.rangeTwoValue > nileSlider.rangeOneValue) {
+    nileSlider.buttonOne.style.left = `${percent}%`;
+  }
+};
+
+export const handleRangeTwo = (
+  e: MouseEvent,
+  rect: DOMRect,
+  nileSlider: NileSlider
+): void => {
+  const x = e.clientX - rect.left;
+  const percent = getClampedPercent(rect, x);
+  nileSlider.rangeTwoValue = percentToValue(percent, nileSlider);
+  nileSlider.rangeTwoValue = Math.max(nileSlider.rangeTwoValue, nileSlider.rangeOneValue);
+  nileSlider.emit(NileSliderEvents.NILE_BUTTON_LAST_CHANGE, {
+    value: nileSlider.rangeTwoValue,
+  });
+
+  if (nileSlider.rangeTwoValue > nileSlider.rangeOneValue) {
+    nileSlider.buttonTwo.style.left = `${percent}%`;
+  }
+};
+
+export const getHtmlElements = (nileSlider: NileSlider) => {
+  nileSlider.range = nileSlider.renderRoot.querySelector('.range') as HTMLElement;
+  nileSlider.buttonOne = nileSlider.renderRoot.querySelector('.range-button') as HTMLElement;
+  nileSlider.buttonTwo = nileSlider.renderRoot.querySelector('.range-button-two') as HTMLElement;
+  nileSlider.completed = nileSlider.renderRoot.querySelector('.range-completed') as HTMLElement;
+
+  nileSlider.range.addEventListener('mousedown', nileSlider.onMouseDown);
+
+  nileSlider.buttonOne?.addEventListener('mousedown', () => {
+    nileSlider.activeThumb = 'one';
+    addMoveListeners(nileSlider);
+  });
+
+  nileSlider.buttonTwo?.addEventListener('mousedown', () => {
+    nileSlider.activeThumb = 'two';
+    addMoveListeners(nileSlider);
+  });
+};
+
+export const addMoveListeners = (nileSlider: NileSlider): void => {
+  window.addEventListener('mousemove', nileSlider.onMouseMove);
+  window.addEventListener('mouseup', nileSlider.onMouseUp);
+};
+
+export const removeMoveListeners = (nileSlider: NileSlider): void => {
+  window.removeEventListener('mousemove', nileSlider.onMouseMove);
+  window.removeEventListener('mouseup', nileSlider.onMouseUp);
+};
+
+export const handleTwoThumbClick = (
+  value: number,
+  nileSlider: NileSlider
+): void => {
+  const distToOne = Math.abs(value - nileSlider.rangeOneValue);
+  const distToTwo = Math.abs(value - nileSlider.rangeTwoValue);
+
+  if (distToOne <= distToTwo) {
+    const clamped = Math.min(value, nileSlider.rangeTwoValue);
+    nileSlider.rangeOneValue = nileSlider.checkValueValidity(clamped, nileSlider.minValue, nileSlider.maxValue);
+  } else {
+    const clamped = Math.max(value, nileSlider.rangeOneValue);
+    nileSlider.rangeTwoValue = nileSlider.checkValueValidity(clamped, nileSlider.minValue, nileSlider.maxValue);
+  }  
+
+  const percentOne = valueToPercent(nileSlider.rangeOneValue, nileSlider);
+  const percentTwo = valueToPercent(nileSlider.rangeTwoValue, nileSlider);
+
+  nileSlider.buttonOne.style.left = `${percentOne}%`;
+  nileSlider.buttonTwo.style.left = `${percentTwo}%`;
+
+  const left = Math.min(percentOne, percentTwo);
+  const width = Math.abs(percentTwo - percentOne);
+
+  nileSlider.completed.style.left = `${left}%`;
+  nileSlider.completed.style.width = `${width}%`;
+
+  nileSlider.emit(NileSliderEvents.NILE_BUTTON_FIRST_CHANGE, {
+    value: nileSlider.rangeOneValue,
+  });
+  nileSlider.emit(NileSliderEvents.NILE_BUTTON_LAST_CHANGE, {
+    value: nileSlider.rangeTwoValue,
+  });
+};

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

@@ -6,6 +6,7 @@
  */
 
 import { css } from 'lit';
+import { tableLayoutStyles } from '../internal/resizable-table-styles';
 
 /**
  * TableBody CSS
@@ -48,6 +49,8 @@ export const styles = css`
   slot::slotted(nile-table-row:last-child) {
     border-bottom: 0px;
   }
+
+  ${tableLayoutStyles}
 `;
 
 export default [styles];

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

@@ -24,6 +24,7 @@ import {
 import { styles } from './nile-table-body.css';
 import NileElement from '../internal/nile-element';
 import { getInnerHTML } from '../slot';
+import { hasResizableColumns } from '../internal/resizable-table-helper';
 
 /**
  * nile-table-body component.
@@ -46,6 +47,7 @@ export class NileTableBody extends NileElement {
   @state() private header_rows_data: any[] = [];
   @state() private sort__index: number;
   @state() private search__index: number;
+  @state() private hasResizableColumns = false;
 
   public static get styles(): CSSResultArray {
     return [styles];
@@ -67,6 +69,10 @@ export class NileTableBody extends NileElement {
     return this.header_rows_data.indexOf(index__value);
   }
 
+  private checkForResizableColumns() {
+    this.hasResizableColumns = hasResizableColumns(this);
+  }
+
   handleSlotchange(e: any) {
     let row_data: any = [];
     this._childNodes.forEach((child: any) => {
@@ -88,6 +94,8 @@ export class NileTableBody extends NileElement {
         row_data = [];
       }
     });
+    
+    this.checkForResizableColumns();
   }
 
   private handleSort(e: any) {
@@ -115,6 +123,7 @@ export class NileTableBody extends NileElement {
           @slotchange=${this.handleSlotchange}
           @nile-click-sort=${this.handleSort}
           class="nile__table__body"
+          ?resizable=${this.hasResizableColumns}
           @nile-search=${this.handleSearch}
         ></slot>
       </div>

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

@@ -6,6 +6,7 @@
  */
 
 import { css } from 'lit';
+import { resizableHostStyles, resizerStyles, resizableSlotStyles } from '../internal/resizable-table-styles';
 
 /**
  * TableCellItem CSS
@@ -19,11 +20,20 @@ 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);
   }
 
+  .cell__wrapper {
+    height: 100%;
+    position: relative;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    width: 100%;
+  }
+
   .column {
     min-width:var(--min-cell-width);
     width:var(--cell-width);
@@ -36,7 +46,15 @@ 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;
+    display: block;
   }
+
+  ${resizableHostStyles}
+  ${resizerStyles}
+  ${resizableSlotStyles}
 `;
 
 export default [styles];

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

@@ -15,6 +15,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-table-cell-item.css';
 import NileElement from '../internal/nile-element';
 import { HasSlotController } from '../internal/slot';
+import { createResizeHandler } from '../internal/resizable-table-helper';
 
 /**
  * Nile table Cell Item component.
@@ -33,20 +34,36 @@ export class NileTableCellItem extends NileElement {
     return [styles];
   }
 
+  /** Enables the resize functionality. */
+  @property({ type: Boolean, reflect: true }) resizable = false;
+
   /* #endregion */
 
   /* #region Methods */
 
+  private handleResizeStart = createResizeHandler(this, 50);
+
   /**
    * 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>`
-        : ''}
-    `;
+    if (this.resizable) {
+      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>`
+            : ''}
+          <div class="resizer" @mousedown=${this.handleResizeStart}></div>
+        </div>
+      `;
+    } else {
+      return html`
+        ${this.hasSlotController.test('[default]')
+          ? html` <slot class="column" part="nile__table-cell"> </slot>`
+          : ''}
+      `;
+    }
   }
 
   /* #endregion */

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

@@ -6,6 +6,7 @@
  */
 
 import { css } from 'lit';
+import { resizableHeaderStyles, headerResizerStyles } from '../internal/resizable-table-styles';
 
 /**
  * TableHeaderItem CSS
@@ -44,6 +45,8 @@ export const styles = css`
     font-style: normal;
     /* line-height: var(--nile-type-scale-5); */
     line-height: normal;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   nile-icon {
@@ -67,6 +70,9 @@ export const styles = css`
   .headers:hover .hover__arrow {
     opacity: 0.3;
   }
+
+  ${resizableHeaderStyles}
+  ${headerResizerStyles}
 `;
 
 export default [styles];

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

@@ -15,6 +15,7 @@ import { customElement, state, property } from 'lit/decorators.js';
 import { styles } from './nile-table-header-item.css';
 import NileElement from '../internal/nile-element';
 import { HasSlotController } from '../internal/slot';
+import { createResizeHandler } from '../internal/resizable-table-helper';
 
 /**
  * Nile icon component.
@@ -43,6 +44,9 @@ 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 */
@@ -66,9 +70,10 @@ export class NileTableHeaderItem extends NileElement {
     this.emit('nile-search', { value: e.detail.value });
   }
 
+  private handleResizeStart = createResizeHandler(this, 50);
+
   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 +114,11 @@ 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,6 +27,57 @@ 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: default;
+  position: relative;       
+  display: flex;
+  align-items: center;
+}
+
+.row.expandable {
+  border-bottom: 1px solid var(--nile-table-row-border-color);
+}
+ 
+
+.expanded-content {
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+}
+
+.row.expandable .expand-icon {
+  margin-right: 4px;
+}
+ 
+.row ::slotted(nile-table-cell-item),
+.row ::slotted(nile-table-header-item) {
+  flex: 1 1 0;           
+  box-sizing: border-box; 
+}
+
+
+.row-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.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;
+}
+ 
 `;
 
 export default [styles];

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

@@ -27,7 +27,6 @@ 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]`
    */
-
   public static get styles(): CSSResultArray {
     return [styles];
   }
@@ -41,6 +40,37 @@ export class NileTableRow extends NileElement {
    * @slot This is a slot test
    */
 
+
+
+
+  @property({ type: Boolean, reflect: true }) expandable = false;
+
+
+  @property({ type: Boolean, reflect: true }) expanded = false;
+
+  @query('slot[name="expanded"]')
+  private _expandedSlot!: HTMLSlotElement;
+
+
+ 
+private onExpandIconClick = (e: MouseEvent) => {
+  e.stopPropagation();
+  this.expanded = !this.expanded; 
+};
+
+protected updated(changedProps: Map<string, unknown>) {
+  super.updated?.(changedProps);
+  if (changedProps.has('expanded')) {
+    this.dispatchEvent(new CustomEvent('nile-change', {
+      detail: { expanded: this.expanded },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+}
+
+
+
   private handleSortingAlter(event: CustomEvent) {
     const header_items: any = [
       ...this.querySelectorAll('nile-table-header-item'),
@@ -56,16 +86,38 @@ export class NileTableRow extends NileElement {
 
   public render(): TemplateResult {
     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 ${this.expandable ? 'expandable' : ''} ${this.expanded ? 'expanded' : ''}"
+          @nile-click-sort="${this.handleSortingAlter}"
+        >
+          ${this.expandable
+            ? html`
+            <slot name="expandableIcon">
+              <nile-icon
+                class="expand-icon"
+                 name="${this.expanded ? 'chevron-up' : 'chevron-down'}"
+                @click=${this.onExpandIconClick}
+                role="button"
+                size="10"
+                aria-label="${this.expanded ? 'Collapse row' : 'Expand row'}">
+              </nile-icon> </slot>`
+            : 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 {