@aquera/nile-elements 0.1.57-beta-1.6 → 0.1.57-beta-1.8

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,17 @@ 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;
   }
+
+  /* Import resizable styles */
+  ${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
@@ -67,6 +68,10 @@ export const styles = css`
   .headers:hover .hover__arrow {
     opacity: 0.3;
   }
+
+  /* Import resizable styles */
+  ${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,53 +70,98 @@ 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`
-      <div class="header__item__wrapper" part="nile__table-header-cell">
-        <div class="headers">
-          <slot> </slot>
-          ${this.havesort && this.sorting_ct % 3 === 0
-            ? html`<nile-icon
-                name="sortdown"
-                size="16"
-                @click=${this.handleSort}
-                class="hover__arrow"
-              ></nile-icon>`
-            : null}
-          ${this.havesort && this.sorting_ct % 3 === 1
-            ? html`<nile-icon
-                name="sortdown"
-                size="16"
-                @click=${this.handleSort}
-              ></nile-icon>`
-            : null}
-          ${this.havesort && this.sorting_ct % 3 === 2
-            ? html`<nile-icon
-                name="sortup"
-                size="16"
-                @click=${this.handleSort}
-              ></nile-icon>`
-            : null}
-          ${this.iconName
-            ? html` <nile-icon name="${this.iconName}" size="16"></nile-icon>`
-            : html``}
-          ${this.havefilter
-            ? html` <nile-popover title="Filter" placement="bottom">
-                <nile-icon name="filter" size="16" slot="anchor"></nile-icon>
-                <nile-input
-                  placeholder="Search"
-                  @nile-input=${this.handleSearch}
-                  part="filter__search"
-                ></nile-input>
-                <slot name="filter__content" part="filter__content"></slot>
-              </nile-popover>`
-            : html``}
-        </div>
-      </div>`
-      : null}`;
+    if (this.resizable) {
+      return html`
+        <div class="header__item__wrapper" part="nile__table-header-cell">
+          <div class="headers">
+            <slot> </slot>
+            ${this.havesort && this.sorting_ct % 3 === 0
+              ? html`<nile-icon
+                  name="sortdown"
+                  size="16"
+                  @click=${this.handleSort}
+                  class="hover__arrow"
+                ></nile-icon>`
+              : null}
+            ${this.havesort && this.sorting_ct % 3 === 1
+              ? html`<nile-icon
+                  name="sortdown"
+                  size="16"
+                  @click=${this.handleSort}
+                ></nile-icon>`
+              : null}
+            ${this.havesort && this.sorting_ct % 3 === 2
+              ? html`<nile-icon
+                  name="sortup"
+                  size="16"
+                  @click=${this.handleSort}
+                ></nile-icon>`
+              : null}
+            ${this.iconName
+              ? html` <nile-icon name="${this.iconName}" size="16"></nile-icon>`
+              : html``}
+            ${this.havefilter
+              ? html` <nile-popover title="Filter" placement="bottom">
+                  <nile-icon name="filter" size="16" slot="anchor"></nile-icon>
+                  <nile-input
+                    placeholder="Search"
+                    @nile-input=${this.handleSearch}
+                    part="filter__search"
+                  ></nile-input>
+                  <slot name="filter__content" part="filter__content"></slot>
+                </nile-popover>`
+              : html``}
+          </div>
+          <div class="resizer" @mousedown=${this.handleResizeStart}></div>
+        </div>`;
+    } else {
+      return html`
+        <div class="header__item__wrapper" part="nile__table-header-cell">
+          <div class="headers">
+            <slot> </slot>
+            ${this.havesort && this.sorting_ct % 3 === 0
+              ? html`<nile-icon
+                  name="sortdown"
+                  size="16"
+                  @click=${this.handleSort}
+                  class="hover__arrow"
+                ></nile-icon>`
+              : null}
+            ${this.havesort && this.sorting_ct % 3 === 1
+              ? html`<nile-icon
+                  name="sortdown"
+                  size="16"
+                  @click=${this.handleSort}
+                ></nile-icon>`
+              : null}
+            ${this.havesort && this.sorting_ct % 3 === 2
+              ? html`<nile-icon
+                  name="sortup"
+                  size="16"
+                  @click=${this.handleSort}
+                ></nile-icon>`
+              : null}
+            ${this.iconName
+              ? html` <nile-icon name="${this.iconName}" size="16"></nile-icon>`
+              : html``}
+            ${this.havefilter
+              ? html` <nile-popover title="Filter" placement="bottom">
+                  <nile-icon name="filter" size="16" slot="anchor"></nile-icon>
+                  <nile-input
+                    placeholder="Search"
+                    @nile-input=${this.handleSearch}
+                    part="filter__search"
+                  ></nile-input>
+                  <slot name="filter__content" part="filter__content"></slot>
+                </nile-popover>`
+              : html``}
+          </div>
+        </div>`;
+    }
   }
-  /* #endregion */
 }
 
 export default NileTableHeaderItem;