@aquera/nile-elements 0.0.67 → 0.0.68

package/src/nile-select/nile-select.ts

@@ -145,12 +145,14 @@ export class NileSelect extends NileElement implements NileFormControl {
   @property() placeholder = 'Select...';
 
   /** Placeholder text to show as a hint when the select is empty. */
-  @state() searchValue : string = '';
+  @state() searchValue: string = '';
 
   @property({ type: Boolean, reflect: true }) searchEnabled = false;
 
   @property({ type: Boolean, reflect: true }) blockValueChange = false;
 
+  @property({ type: Boolean, reflect: true }) disableLocalSearch = false;
+
   @property({ type: Boolean, reflect: true }) optionsLoading = false;
 
   @property({ type: Boolean, reflect: true }) noWidthSync = false;
@@ -158,9 +160,9 @@ export class NileSelect extends NileElement implements NileFormControl {
   /** Allows more than one option to be selected. */
   @property({ type: Boolean, reflect: true }) multiple = false;
 
-  @property({ attribute: 'help-text' }) helpText = '';
+  @property({ attribute: 'help-text', reflect: true }) helpText = '';
 
-  @property({ attribute: 'error-message' }) errorMessage = '';
+  @property({ attribute: 'error-message', reflect: true }) errorMessage = '';
 
   /** Sets the input to a warning state, changing its visual appearance. */
   @property({ type: Boolean }) warning = false;
@@ -779,13 +781,14 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   handleSearchChange(e: any) {
     this.searchValue = e.detail.value;
-    let filteredOptions = this.filterOptions(this.searchValue);
-
-    if (filteredOptions.length === 0) {
-      // Display 'No results found' message.
-      this.showNoResults = true;
-    } else {
-      this.showNoResults = false;
+    if (!this.disableLocalSearch) {
+      let filteredOptions = this.filterOptions(this.searchValue);
+      if (filteredOptions.length === 0) {
+        // Display 'No results found' message.
+        this.showNoResults = true;
+      } else {
+        this.showNoResults = false;
+      }
     }
   }
 
@@ -845,6 +848,8 @@ export class NileSelect extends NileElement implements NileFormControl {
       this.emit('nile-show', { value: this.value, name: this.name });
       this.addOpenListeners();
 
+      this.showNoResults = !this.getAllOptions()?.length;
+
       await stopAnimations(this);
       this.listbox.hidden = false;
       this.popup.active = true;
@@ -1236,16 +1241,6 @@ export class NileSelect extends NileElement implements NileFormControl {
               @mouseup=${this.handleOptionClick}
               @slotchange=${this.handleDefaultSlotChange}
             >
-              ${this.optionsLoading
-                ? html`
-                    <span class="select__loader">
-                      <nile-icon
-                        class="select__loader--icon"
-                        name="button-loading-blue"
-                      ></nile-icon>
-                    </span>
-                  `
-                : ''}
               ${this.searchEnabled
                 ? html` <div class="select__search">
                     <nile-input
@@ -1261,6 +1256,17 @@ export class NileSelect extends NileElement implements NileFormControl {
                     </nile-input>
                   </div>`
                 : ``}
+              ${this.optionsLoading
+                ? html`
+                    <span class="select__loader">
+                      <nile-icon
+                        class="select__loader--icon"
+                        name="button-loading-blue"
+                      ></nile-icon>
+                    </span>
+                  `
+                : ''}
+
               <div
                 class="select__options ${this.searchEnabled
                   ? 'select__options__search-enabled'

package/src/nile-slide-toggle/nile-slide-toggle.ts

@@ -12,9 +12,9 @@ export class NileSlideToggle extends NileElement {
 
   @property({ type: Boolean, reflect: true }) isChecked = false;
 
-  @property({ attribute: 'help-text' }) helpText = '';
+  @property({ attribute: 'help-text', reflect: true }) helpText = '';
 
-  @property({ attribute: 'error-message' }) errorMessage = '';
+  @property({ attribute: 'error-message', reflect: true }) errorMessage = '';
 
   connectedCallback() {
     super.connectedCallback();

package/src/nile-stepper/index.ts

@@ -0,0 +1 @@
+export { NileStepper } from './nile-stepper';

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

@@ -0,0 +1,21 @@
+/**
+* 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';
+
+/**
+ * Stepper CSS
+ */
+export const styles = css`
+	:host {
+		display:flex;
+		align-items:center;
+		width:100%;
+	}
+`;
+
+export default [styles];

package/src/nile-stepper/nile-stepper.ts

@@ -0,0 +1,127 @@
+/**
+ * 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 { LitElement, html, property, CSSResultArray, TemplateResult } from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import { styles } from './nile-stepper.css';
+import NileElement from '../internal/nile-element';
+import { watch } from '../internal/watch';
+
+
+/**
+ * Nile stepper component.
+ *
+ * @tag nile-stepper
+ *
+ */
+@customElement('nile-stepper')
+export class NileStepper extends NileElement {
+
+	@property({ type: Boolean, attribute: 'content-below' }) contentBelow: boolean = false;
+	@property({ type: Number, attribute: 'current-step' }) currentStep: number = 0;
+	@property({ type: Number, attribute: 'completed-step' }) completedStep: number = 0;
+	@property({ type: String, attribute: 'size' }) size: 'sm' | 'md' | 'lg' = 'md';
+	@property() icon: string = 'tick';
+
+	connectedCallback() {
+		super.connectedCallback();
+		this.updateComplete.then(() => {
+			this.updateItems();
+		});
+	}
+
+	@watch('currentStep')
+	handleCurrentStepChanges() {
+		this.updateItems();
+		this.emit('nile-current-change', { value: this.currentStep });
+	}
+
+	@watch('completedStep')
+	handleCompletedStepChanges() {
+		this.updateItems()
+		this.emit('nile-completed-change', { value: this.completedStep });
+	}
+
+	private updateItems() {
+		const items: any = [...this.querySelectorAll('nile-stepper-item')];
+		if (!items.length) return;
+
+		const haveFlex = items.length < 3;
+
+		const current = (this.currentStep == 0 || this.currentStep > items.length) ? 1 : this.currentStep;
+		const calculatedCompleted = this.completedStep > items.length ? current : this.completedStep < current ? current : this.completedStep;
+		const completed = this.completedStep > items.length ? 0 : this.completedStep;
+
+		items.forEach((el: any, index: number) => {
+			// set item is complete and is current values
+			if (index + 1 < current) {
+				el.isComplete = true;
+				el.isCurrent = false;
+			}
+			else if (index + 1 == current) {
+				if (index + 1 <= calculatedCompleted) el.isComplete = true;
+				else el.isComplete = false;
+				el.isCurrent = true;
+			}
+			else {
+				if (index + 1 <= calculatedCompleted) el.isComplete = true;
+				else el.isComplete = false;
+				el.isCurrent = false;
+			}
+
+			// Set isLast and isFirst
+			if (index == 0) el.isFirst = true;
+			if (index == items.length - 1) el.isLast = true;
+
+			// setting default values
+			el.currentStepValue = current;
+			el.calculatedCompletedStepValue = calculatedCompleted;
+			el.completedStepValue = completed;
+
+			el.icon = this.icon;
+			el.value = index + 1;
+			el.contentBelow = this.contentBelow
+			if (index == 0 || index == items.length - 1) {
+				el.haveFlex = haveFlex;
+			}
+		})
+	}
+
+	/**
+	 * The styles for nile-stepper
+	 * @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];
+	}
+
+	/* #endregion */
+
+	/* #region Methods */
+
+	/**
+	 * Render method
+	 * @slot This is a slot test
+	 */
+	public render(): TemplateResult {
+		return html`
+			<slot
+				@slotchange=${this.updateItems}
+			></slot>
+			`;
+	}
+
+	/* #endregion */
+}
+
+export default NileStepper;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'nile-stepper': NileStepper;
+	}
+}

package/src/nile-stepper-item/index.ts

@@ -0,0 +1 @@
+export { NileStepperItem } from './nile-stepper-item';

package/src/nile-stepper-item/nile-stepper-item.css.ts

@@ -0,0 +1,123 @@
+/**
+* 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';
+
+/**
+ * StepperItem CSS
+ */
+export const styles = css`
+	:host {
+		--stepper-flex-val:1;
+		
+		display:inline-block;
+		flex-grow:var(--stepper-flex-val);
+		color: var(--nile-stepper-color-text-default);
+		min-width:var(--nile-stepper-min-width);
+	}
+	
+	.stepper__item {
+		margin: 0 -1px;
+		--bulletin-inner-color:var(--nile-stepper-color-bulletin-inner-default);
+		--bulletin-outer-color:var(--nile-stepper-color-bulletin-outer-default);
+		--stepper-title-color:var(--stepper-default-text-color);
+		--stepper-subtitle-color:var(--stepper-default-text-color);
+	}
+
+	.stepper__item--selected {
+		--bulletin-inner-color:var(--nile-stepper-color-bulletin-inner-selected);
+		--bulletin-outer-color:var(--nile-stepper-color-bulletin-outer-selected);
+		--stepper-title-color:var(--nile-stepper-color-title-selected);
+		--stepper-subtitle-color:var(--nile-stepper-color-subtitle-selected);
+	}
+
+	.stepper__item--sm {
+		--stepper-item-title-size:14px;
+		--stepper-item-subtitle-size:14px;
+		--circle-height:20px;
+	}
+
+	.stepper__item--md {
+		--stepper-item-title-size:16px;
+		--stepper-item-subtitle-size:16px;
+		--circle-height:24px;
+	}
+
+	.stepper__item--lg {
+		--stepper-item-title-size:16px;
+		--stepper-item-subtitle-size:16px;
+		--circle-height:32px;
+	}
+
+	.stepper__line__content {
+		display:flex;
+		width:100%;
+		align-items:center;
+	}
+
+	.stepper__line__container {
+		flex-grow:1;
+		padding:0 1px;
+	}
+
+	.stepper__line--hastitle {
+		display:flex;
+		align-items:center;
+	}
+
+	.stepper__line {
+		display: block;
+		border: 0;
+		border-top: 1px solid var(--nile-stepper-color-line-default);
+	}
+
+	.stepper__line--active {
+		border-top: 1px solid var(--nile-stepper-color-line-selected);
+	}
+
+	.stepper__item__content--below {
+		display:flex;
+		flex-direction:column;
+		align-items:center;
+	}
+	
+	.stepper__item__bulletin {
+		display:grid;
+		place-content:center;
+		margin:0 -1px;
+	}
+
+	.stepper__content__title {
+		color:var(--stepper-title-color);
+		font-size: var(--stepper-item-title-size);
+		font-weight: 600;
+	}
+
+	.stepper__content__subtitle {
+		color:var(--stepper-subtitle-color);
+		font-size: var(--stepper-item-subtitle-size);
+		font-weight: 400;
+	}
+
+	.stepper__bulletin--dot {
+		width: var(--circle-height);
+		aspect-ratio: 1 / 1;
+		border-radius: 50%;
+		background: radial-gradient(var(--bulletin-inner-color) 35%, var(--bulletin-outer-color) 35%);
+		border: 1px solid var(--bulletin-inner-color);
+	}
+
+	.stepper__bulletin--icon {
+		display:grid;
+		place-content:center;
+		width: var(--circle-height);
+		aspect-ratio: 1 / 1;
+		border-radius: 50%;
+		background-color:var(--nile-stepper-color-highlight);
+	}
+`;
+export default [styles];

package/src/nile-stepper-item/nile-stepper-item.ts

@@ -0,0 +1,138 @@
+/**
+ * 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 { LitElement, nothing, html, property, state, CSSResultArray, TemplateResult } from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from './nile-stepper-item.css';
+import NileElement from '../internal/nile-element';
+
+
+/**
+ * Nile stepper-item component.
+ *
+ * @tag nile-stepper-item
+ *
+ */
+@customElement('nile-stepper-item')
+export class NileStepperItem extends NileElement {
+	/* Properties passed directly */
+	@property() title: string = '';
+	@property() subtitle: string = '';
+
+
+	/* Properties passed to parent component: NileStepper */
+	@state() private contentBelow = false;
+	@state() private size : 'sm' | 'md' | 'lg' = 'md';
+	@state() private icon = 'tick';
+
+
+	/* Properties Computed at parent level component NileStepper */
+	@state() private isFirst = false;
+	@state() private isLast = false;
+
+	@state() private isComplete = false;
+	@state() private isCurrent = false;
+	@state() private currentStepValue :Number;
+	@state() private completedStepValue :Number;
+	@state() private calculatedCompletedStepValue :Number;
+
+	@state() private value :Number;
+	@state() private haveFlex :Boolean=true;
+
+
+	/**
+	 * The styles for nile-stepper-item
+	 * @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];
+	}
+
+	/* #endregion */
+
+	/* #region Methods */
+
+	/**
+	 * Render method
+	 * @slot This is a slot test
+	 */
+	public render(): TemplateResult {
+
+		if (!this.haveFlex) this.style.setProperty('--stepper-flex-val', `0`);
+		const isCurrent = this.isCurrent;
+		const isComplete = this.isComplete;
+
+		let showCompletedIcon=false;
+		if(isComplete && !isCurrent || this.completedStepValue==this.value) showCompletedIcon=true;
+
+		let suffixStepperLineActive = false;
+		if(isComplete){
+			suffixStepperLineActive=true;
+			if (this.calculatedCompletedStepValue==this.value) suffixStepperLineActive=false;
+		}
+		let iconSize = this.size == 'sm'?14:this.size == 'md'?16:20;
+		return html`
+			<div class="${classMap({
+				'stepper__item':true,
+				'stepper__item--selected':isCurrent,
+				'stepper__item--sm':this.size=='sm',
+				'stepper__item--md':this.size=='md',
+				'stepper__item--lg':this.size=='lg',
+			})}">
+				<div class="stepper__line__content">
+					<div class="stepper__line__container">
+						${this.isFirst ? nothing : html`
+							<hr class="${classMap({
+								'stepper__line':true,
+								'stepper__line--active':isComplete || isCurrent
+							})}"/>
+						`}
+					</div>
+
+					<div class="stepper__item__bulletin">
+						${showCompletedIcon ? html`<div class="stepper__bulletin--icon"><nile-icon size="${iconSize}" name="${this.icon}" color="white"></nile-icon> </div>`
+							: html`<div class="stepper__bulletin--dot"></div>`
+						}
+						
+					</div>
+					
+					<div class="${classMap({
+						'stepper__line__container':true,
+						'stepper__line--hastitle':!this.contentBelow
+					})}">
+						${this.contentBelow?nothing:html`
+							<div class="stepper__content__title" style="${!this.contentBelow && this.title?'padding-left:5px;':''}">${this.title}</div>
+						`}
+						${this.isLast ? nothing : html`
+							<hr class="${classMap({
+								'stepper__line':true,
+								'stepper__line--active':suffixStepperLineActive
+							})}" style="flex-grow:1;"/>
+						`}
+					</div>
+				</div>
+				${!this.contentBelow?nothing:html`
+					<div class="stepper__item__content--below">
+						<div class="stepper__content__title">${this.title}</div>
+						<div class="stepper__content__subtitle">${this.subtitle}</div>
+					</div>
+				`}
+			</div>
+		`;
+	}
+
+	/* #endregion */
+}
+
+export default NileStepperItem;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'nile-stepper-item': NileStepperItem;
+	}
+}

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;
   }

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>`