@aquera/nile-elements 0.0.61 → 0.0.63

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.61",
+  "version": "0.0.63",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-icon/icons/svg/applications-2.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiBkYXRhLW5hbWU9IkxheWVyIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxkZWZzPjxzdHlsZT4gICAgICAuY2xzLTEgeyAgICAgICAgZmlsbDogbm9uZTsgICAgICB9ICAgICAgLmNscy0xLCAuY2xzLTIsIC5jbHMtMyB7ICAgICAgICBzdHJva2Utd2lkdGg6IDBweDsgICAgICB9ICAgICAgLmNscy0yIHsgICAgICAgIGZpbGwtcnVsZTogZXZlbm9kZDsgICAgICB9ICAgICAgLmNscy0yLCAuY2xzLTMgeyAgICAgICAgZmlsbDogIzdmN2Y3ZjsgICAgICB9ICAgIDwvc3R5bGU+PC9kZWZzPjxyZWN0IGNsYXNzPSJjbHMtMSIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNMSw2Ljh2MTYuNWgxNi41VjYuOEgxWk0yLjUsOC4zaDEzLjV2NS41SDIuNXYtNS41Wk0xNiwyMS44SDIuNXYtNi41aDEzLjV2Ni41WiIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTEwLDEwLjNoLTUuNXYxLjVoNS41di0xLjVaIi8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNMTQsMTAuM2gtMnYxLjVoMnYtMS41WiIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTQsNS4zdi0xLjVoMTYuNXYxNi41aC0xLjVWNS4zaDBzLTEzLjUsMC0xMy41LDBoMHMtMS41LDAtMS41LDBaIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNNywyLjJWLjhoMTYuNXYxNi41aC0xLjVWMi4zaDBzLTE1LDAtMTUsMFoiLz48L3N2Zz4=";

package/src/nile-icon/icons/svg/apps.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiBkYXRhLW5hbWU9IkxheWVyIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxkZWZzPjxzdHlsZT4gICAgICAuY2xzLTEgeyAgICAgICAgZmlsbDogbm9uZTsgICAgICB9ICAgICAgLmNscy0xLCAuY2xzLTIsIC5jbHMtMyB7ICAgICAgICBzdHJva2Utd2lkdGg6IDBweDsgICAgICB9ICAgICAgLmNscy0yIHsgICAgICAgIGZpbGwtcnVsZTogZXZlbm9kZDsgICAgICB9ICAgICAgLmNscy0yLCAuY2xzLTMgeyAgICAgICAgZmlsbDogIzdmN2Y3ZjsgICAgICB9ICAgIDwvc3R5bGU+PC9kZWZzPjxyZWN0IGNsYXNzPSJjbHMtMSIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNMSw2Ljh2MTYuNWgxNi41VjYuOEgxWk0yLjUsOC4zaDEzLjV2NS41SDIuNXYtNS41Wk0xNiwyMS44SDIuNXYtNi41aDEzLjV2Ni41WiIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTEwLDEwLjNoLTUuNXYxLjVoNS41di0xLjVaIi8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNMTQsMTAuM2gtMnYxLjVoMnYtMS41WiIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTQsNS4zdi0xLjVoMTYuNXYxNi41aC0xLjVWNS4zaDBzLTEzLjUsMC0xMy41LDBoMHMtMS41LDAtMS41LDBaIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNNywyLjJWLjhoMTYuNXYxNi41aC0xLjVWMi4zaDBzLTE1LDAtMTUsMFoiLz48L3N2Zz4=";

package/src/nile-icon/icons/svg/index.ts

@@ -10,9 +10,11 @@ export { default as allsearch } from './allsearch';
 export { default as anomaly } from './anomaly';
 export { default as api } from './api';
 export { default as application } from './application';
+export { default as applications2 } from './applications-2';
 export { default as applications } from './applications';
 export { default as applyfilter } from './apply-filter';
 export { default as approve } from './approve';
+export { default as apps } from './apps';
 export { default as aquera } from './aquera';
 export { default as aquerasupport } from './aquerasupport';
 export { default as arrayloop } from './array-loop';

package/src/nile-loader/nile-loader.ts

@@ -9,7 +9,7 @@ export class NileLoader extends LitElement {
   @property({ type: String }) width = '60';
   @property({ type: String }) position = 'absolute';
   @property({ type: String }) margin = '';
-  @property({ type: String }) variant = 'v3';
+  @property({ type: String }) variant = 'v1';
 
   static override styles: CSSResultGroup = styles;
 

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

@@ -11,7 +11,6 @@ import { css } from 'lit-element';
  * TableBody CSS
  */
 export const styles = css`
-
   :host {
     box-sizing: border-box;
     --nile-table-background--odd: var(
@@ -23,13 +22,12 @@ export const styles = css`
   }
 
   .base {
-    width: max-content;
     background-color: var(--nile-colors-white-base);
     border: 1px solid var(--nile-table-row-border-color);
     border-radius: var(--nile-radius-radius-xl);
     box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1),
       0px 1px 2px 0px rgba(16, 24, 40, 0.06);
-    overflow:hidden;
+    overflow: hidden;
   }
 
   .table__header {
@@ -40,9 +38,11 @@ export const styles = css`
   .nile__table__body {
     display: table;
     border-collapse: collapse;
+    width:100%;
   }
 
   slot::slotted(nile-table-row:nth-child(odd)) {
+    border-bottom: 1px solid #e4e2e4;
     background: var(--nile-table-background--odd);
   }
 

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

@@ -41,10 +41,10 @@ export class NileTableBody extends NileElement {
   @queryAssignedNodes({ flatten: true })
   _childNodes!: Array<HTMLElement>;
 
-  @state() private sortOrder = false;
   @state() private rows_data: any[] = [];
   @state() private header_rows_data: any[] = [];
   @state() private sort__index: number;
+  @state() private search__index: number;
 
   public static get styles(): CSSResultArray {
     return [styles];
@@ -58,6 +58,10 @@ export class NileTableBody extends NileElement {
     return child.querySelectorAll(tagname);
   }
 
+  private getIndexValue(index__value: string): number {
+    return this.header_rows_data.indexOf(index__value);
+  }
+
   handleSlotchange(e: any) {
     let row_data: any = [];
     this._childNodes.forEach((child: any) => {
@@ -103,40 +107,45 @@ export class NileTableBody extends NileElement {
     });
   }
 
-  private handleDataSort(index: number) {
+  private handleDataSort(index: number, order: string) {
     this.rows_data.sort((a: any, b: any) => {
-      let first_row_value = a[index].toLowerCase();
-      let second_row_value = b[index].toLowerCase();
-      return this.sortOrder
-        ? first_row_value < second_row_value
+      let first_row_value = a[index]?.toLowerCase();
+      let second_row_value = b[index]?.toLowerCase();
+      return order == 'asc'
+        ? first_row_value <= second_row_value
           ? 1
           : -1
         : first_row_value < second_row_value
         ? -1
         : 1;
     });
-
-    this.sortOrder = !this.sortOrder;
-  }
-
-  private getIndexValue(index__value: string): number {
-    return this.header_rows_data.indexOf(index__value);
   }
 
   private handleSort(e: any) {
-    this.sort__index = this.getIndexValue(e.detail.value.textContent);
-    this.handleDataSort(this.sort__index);
+    const { curr_sort_string, order } = e.detail.value;
+    this.sort__index = this.getIndexValue(curr_sort_string);
+    this.handleDataSort(this.sort__index, order);
     this.handleDataChange();
   }
 
+  private handleSearch(e: any) {
+    const searchText = e.detail.value;
+    this.search__index = this.getIndexValue(e.target.textContent);
+    this.emit('nile-table-search', {
+      index: this.search__index,
+      value: searchText,
+    });
+  }
+
   public render(): TemplateResult {
     return html`
-      <div class="base">
+      <div class="base" part="base">
         <slot name="table__header" class="table__header"></slot>
         <slot
           @slotchange=${this.handleSlotchange}
           @nile-click-sort=${this.handleSort}
           class="nile__table__body"
+          @nile-search=${this.handleSearch}
         ></slot>
       </div>
     `;

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

@@ -14,8 +14,7 @@ export const styles = css`
   :host {
     display: table-cell;
     box-sizing: border-box;
-    --min--height: 52px;
-    --min--width: 180px;
+    --min-height: 52px;
   }
 
   .headers {
@@ -23,26 +22,36 @@ export const styles = css`
     padding: 0 var(--nile-type-scale-4);
     align-items: center;
     height: auto;
-    min-height: var(--min--height);
-    width: auto;
-    min-width: var(--min--width);
+    min-height: var(--min-height);
+    width: 100%;
     gap: 8px;
     color: var(--nile-colors-dark-900);
     font-feature-settings: 'clig' off, 'liga' off;
     font-size: var(--nile-type-scale-3);
     font-style: normal;
     font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-type-scale-3); /* 100% */
+    line-height: var(--nile-type-scale-3);
     letter-spacing: 0.2px;
   }
 
   slot {
     cursor: pointer;
   }
-  
+
   nile-icon {
     cursor: pointer;
   }
+
+  .sorting__icons {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: centre;
+  }
+
+  .sorting__icons nile-icon:hover {
+    opacity: 0.4;
+  }
 `;
 
 export default [styles];

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

@@ -36,7 +36,10 @@ export class NileTableHeaderItem extends NileElement {
 
   /** Enables the sort functionality. */
   @property({ type: Boolean, reflect: true }) havesort = false;
-  
+
+  /** Enables the sort functionality. */
+  @property({ type: Boolean, reflect: true }) havefilter = false;
+
   /** Places the icon . */
   @property({ type: String, reflect: true, attribute: 'icon-name' }) iconName =
     '';
@@ -49,25 +52,55 @@ export class NileTableHeaderItem extends NileElement {
    * Render method
    * @slot This is a slot test
    */
-  private handleClick(e: any) {
-    if (!this.havesort) {
-      return;
-    }
-    let curr_sort_string =
-      e.target?.parentElement?.children[0]?.assignedNodes()[0];
-    this.emit('nile-click-sort', { value: curr_sort_string });
+  private handleSort(e: any) {
+    const clickedIcon = e.target;
+    const order =
+      clickedIcon.getAttribute('name') === 'arrowdropup' ? 'asc' : 'desc';
+    let curr_sort_string = this.hasSlotController.host.innerHTML;
+    this.emit('nile-click-sort', {
+      value: { curr_sort_string, order },
+    });
+  }
+
+  private handleSearch(e: any) {
+    this.emit('nile-search', { value: e.detail.value });
   }
+
   public render(): TemplateResult {
     return html` ${this.hasSlotController.test('[default]')
       ? html` <div class="headers">
-          <slot @click=${this.handleClick}> </slot>
+          <slot> </slot>
+          ${this.havesort
+            ? html` <span class="sorting__icons">
+                <nile-icon
+                  name="arrowdropup"
+                  size="16"
+                  @click=${this.handleSort}
+                ></nile-icon>
+                <nile-icon
+                  name="arrowdropdown"
+                  size="16"
+                  @click=${this.handleSort}
+                ></nile-icon>
+              </span>`
+            : null}
           ${this.iconName
-            ? html` <nile-icon name="${this.iconName}" size="16" @click=${this.handleClick}></nile-icon>`
+            ? 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>`
-      : html``}`;
+      : null}`;
   }
-
   /* #endregion */
 }
 

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

@@ -13,6 +13,7 @@ import { css } from 'lit-element';
 export const styles = css`
   :host {
     display: table-row;
+    width:100%;
     --nile-header-background:var(--nile-table-header-background-color);
     border-bottom: 1px solid var(--nile-table-row-border-color);
   }