@aquera/nile-elements 0.1.58 → 0.1.59-beta-1.0

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

@@ -24,7 +24,6 @@ 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.
@@ -47,7 +46,6 @@ 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];
@@ -69,10 +67,6 @@ 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) => {
@@ -94,8 +88,6 @@ export class NileTableBody extends NileElement {
         row_data = [];
       }
     });
-    
-    this.checkForResizableColumns();
   }
 
   private handleSort(e: any) {
@@ -123,7 +115,6 @@ 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,7 +6,6 @@
  */
 
 import { css } from 'lit';
-import { resizableHostStyles, resizerStyles, resizableSlotStyles } from '../internal/resizable-table-styles';
 
 /**
  * TableCellItem CSS
@@ -20,20 +19,11 @@ 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);
@@ -46,15 +36,7 @@ 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,7 +15,6 @@ 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.
@@ -34,36 +33,20 @@ 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 {
-    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>`
-          : ''}
-      `;
-    }
+    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,7 +6,6 @@
  */
 
 import { css } from 'lit';
-import { resizableHeaderStyles, headerResizerStyles } from '../internal/resizable-table-styles';
 
 /**
  * TableHeaderItem CSS
@@ -45,8 +44,6 @@ 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 {
@@ -70,9 +67,6 @@ 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,7 +15,6 @@ 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.
@@ -44,9 +43,6 @@ 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 */
@@ -70,10 +66,9 @@ export class NileTableHeaderItem extends NileElement {
     this.emit('nile-search', { value: e.detail.value });
   }
 
-  private handleResizeStart = createResizeHandler(this, 50);
-
   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>
@@ -114,11 +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;