@aquera/nile-elements 0.0.66 → 0.0.68

package/src/nile-tab/nile-tab.css.ts

@@ -1,9 +1,9 @@
 /**
-* 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.
-*/
+ * 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 {css} from 'lit-element';
 
@@ -28,17 +28,17 @@ export const styles = css`
     display: inline-flex;
     align-items: center;
     border-radius: 8px;
-    color: var(--nile-colors-dark-500);
+    color: #667085;
     padding: 4px 4px 12px 4px;
     white-space: nowrap;
     user-select: none;
     cursor: pointer;
     transition: 0.2s box-shadow, 0.2s color;
-    font-family:var(--nile-font-family-serif);
-    font-size: 16px;
+    font-family: var(--nile-font-family-serif);
+    font-size: 14px;
     font-style: normal;
-    font-weight: 500;
-    line-height: 16px;
+    font-weight: 600;
+    line-height: 20px;
     letter-spacing: 0.2px;
     gap: 4px;
   }
@@ -56,7 +56,7 @@ export const styles = css`
   }
 
   .tab.tab--active:not(.tab--disabled) {
-    color: var(--nile-colors-primary-600);
+    color: var(--nile-colors-primary-700);
   }
 
   .tab.tab--closable {

package/src/nile-tab-group/nile-tab-group.css.ts

@@ -18,7 +18,7 @@ export const styles = css`
   :host {
     --indicator-color: var(--nile-colors-primary-600);
     --track-color: #e5e9eb;
-    --track-width: 1px;
+    --track-width: 2px;
 
     display: block;
   }
@@ -112,7 +112,7 @@ export const styles = css`
 
   .tab-group--top .tab-group__indicator {
     bottom: calc(-1 * var(--track-width));
-    border-bottom: solid 3px var(--indicator-color);
+    border-bottom: 2px solid var(--nile-colors-brand-600);
   }
 
   .tab-group--top .tab-group__body {

package/src/nile-tab-group/nile-tab-group.ts

@@ -310,7 +310,7 @@ export class NileTabGroup extends NileElement {
     const offset = precedingTabs.reduce(
       (previous, current) => ({
         left: previous.left + current.clientWidth + 24,
-        top: previous.top + current.clientHeight
+        top: previous.top + current.clientHeight + 24
       }),
       { left: 0, top: 0 }
     );

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

@@ -85,47 +85,12 @@ export class NileTableBody extends NileElement {
     });
   }
 
-  private handleDataChange() {
-    let i = 0;
-    let j = 0;
-    this._childNodes.forEach((child: any, index) => {
-      if (
-        index != 0 &&
-        child.tagName &&
-        child?.tagName?.toLowerCase() === 'nile-table-row'
-      ) {
-        let nilerows = this.getChildren(child, 'nile-table-cell-item');
-        if (nilerows.length > 0) {
-          nilerows.forEach(
-            (element: { innerHTML: any }, curr_index: number) => {
-              element.innerHTML = this.rows_data[i][curr_index];
-            }
-          );
-          i++;
-        }
-      }
-    });
-  }
-
-  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 order == 'asc'
-        ? first_row_value <= second_row_value
-          ? 1
-          : -1
-        : first_row_value < second_row_value
-        ? -1
-        : 1;
-    });
-  }
-
   private handleSort(e: any) {
     const { curr_sort_string, order } = e.detail.value;
-    this.sort__index = this.getIndexValue(curr_sort_string);
-    this.handleDataSort(this.sort__index, order);
-    this.handleDataChange();
+    const header_index = this.getIndexValue(curr_sort_string);
+    this.emit('nile-sort', {
+      value: { header_index, curr_sort_string, order },
+    });
   }
 
   private handleSearch(e: any) {

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

@@ -51,6 +51,14 @@ export const styles = css`
   .sorting__icons nile-icon:hover {
     opacity: 0.4;
   }
+
+  .hover__arrow {
+    opacity: 0;
+  }
+
+  .headers:hover .hover__arrow {
+    opacity: 0.3;
+  }
 `;
 
 export default [styles];

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

@@ -12,7 +12,7 @@ import {
   CSSResultArray,
   TemplateResult,
 } from 'lit-element';
-import { customElement } from 'lit/decorators.js';
+import { customElement, state } from 'lit/decorators.js';
 import { styles } from './nile-table-header-item.css';
 import NileElement from '../internal/nile-element';
 import { HasSlotController } from '../internal/slot';
@@ -44,6 +44,8 @@ export class NileTableHeaderItem extends NileElement {
   @property({ type: String, reflect: true, attribute: 'icon-name' }) iconName =
     '';
 
+  @state() sorting_ct = 0;
+
   /* #endregion */
 
   /* #region Methods */
@@ -53,12 +55,11 @@ export class NileTableHeaderItem extends NileElement {
    * @slot This is a slot test
    */
   private handleSort(e: any) {
-    const clickedIcon = e.target;
-    const order =
-      clickedIcon.getAttribute('name') === 'arrowdropup' ? 'asc' : 'desc';
+    this.sorting_ct++;
     let curr_sort_string = this.hasSlotController.host.innerHTML;
+    const order = ['normal', 'asc', 'des'];
     this.emit('nile-click-sort', {
-      value: { curr_sort_string, order },
+      value: { curr_sort_string, order: order[this.sorting_ct % 3] },
     });
   }
 
@@ -70,19 +71,27 @@ export class NileTableHeaderItem extends NileElement {
     return html` ${this.hasSlotController.test('[default]')
       ? html` <div class="headers">
           <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>`
+          ${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>`

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

@@ -41,8 +41,28 @@ export class NileTableRow extends NileElement {
    * Render method
    * @slot This is a slot test
    */
+
+  private handleSortingAlter(event: CustomEvent) {
+    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` <slot  part="nile-row"></slot> `;
+    return html`
+      <slot
+        part="nile-row"
+        @nile-click-sort="${this.handleSortingAlter}"
+      ></slot>
+    `;
   }
 
   /* #endregion */

package/src/nile-textarea/nile-textarea.ts

@@ -67,11 +67,9 @@ export class NileTextarea extends NileElement  {
   /** The textarea's label. If you need to display HTML, use the `label` slot instead. */
   @property() label = '';
 
-  /** The textarea's help text. If you need to display HTML, use the `help-text` slot instead. */
-  @property({ attribute: 'help-text' }) helpText = '';
+  @property({ attribute: 'help-text', reflect: true }) helpText = '';
 
-  /** The input's error message. If you need to display HTML, use the `error-message` slot instead. */
-  @property({ attribute: 'error-message' }) errorMessage = '';
+  @property({ attribute: 'error-message', reflect: true }) errorMessage = '';;
 
   /** Placeholder text to show as a hint when the input is empty. */
   @property() placeholder = '';