@aquera/nile-elements 0.0.67 → 0.0.69

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.css.ts

@@ -13,13 +13,12 @@ export default css`
     width: 36px;
     height: 20px;
     line-height: 22px;
-    margin-right: 10px;
+    margin-right: 8px;
   }
 
   .nile-slide-toggle__label {
     display: flex;
     flex-direction: column;
-    margin-right: 6px;
     font-size: 14px;
     color: var(--nile-colors-gray-light-mode-700);
     font-family: var(--nile-font-family-serif);
@@ -28,6 +27,7 @@ export default css`
     font-weight: 500;
     line-height: 20px;
     letter-spacing: 0.2px;
+    gap: 2px;
   }
 
   .nile-slide-toggle__sublabel {
@@ -55,6 +55,14 @@ export default css`
     border-radius: 34px;
   }
 
+  .nile-slide-toggle__slider:active {
+    box-shadow: 0px 0px 0px 1px rgba(133, 170, 209, 0.54);
+  }
+
+  .nile-slide-toggle__slider:focus {
+    box-shadow: 0px 0px 0px 1px rgba(133, 170, 209, 0.54);
+  }
+
   .nile-slide-toggle__slider:before {
     position: absolute;
     content: '';
@@ -86,4 +94,20 @@ export default css`
   .nile-slide-toggle__slider.round:before {
     border-radius: 50%;
   }
+
+  .nile-slide--disabled .nile-slide-toggle__slider {
+    background-color: #f2f4f7;
+  }
+
+  .nile-slide--disabled .nile-slide-toggle__switch {
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  .nile-slide--disabled
+    .nile-slide-toggle__switch
+    input:checked
+    + .nile-slide-toggle__slider {
+    background-color: #f2f4f7;
+  }
 `;

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

@@ -2,6 +2,7 @@ import { CSSResultGroup } from 'lit';
 import { LitElement, html, property, customElement } from 'lit-element';
 import styles from './nile-slide-toggle.css';
 import NileElement from '../internal/nile-element';
+import { classMap } from 'lit/directives/class-map.js';
 
 @customElement('nile-slide-toggle')
 export class NileSlideToggle extends NileElement {
@@ -12,9 +13,11 @@ export class NileSlideToggle extends NileElement {
 
   @property({ type: Boolean, reflect: true }) isChecked = false;
 
-  @property({ attribute: 'help-text' }) helpText = '';
+  @property({ type: Boolean, reflect: true }) disabled = false;
 
-  @property({ attribute: 'error-message' }) errorMessage = '';
+  @property({ attribute: 'help-text', reflect: true }) helpText = '';
+
+  @property({ attribute: 'error-message', reflect: true }) errorMessage = '';
 
   connectedCallback() {
     super.connectedCallback();
@@ -38,7 +41,12 @@ export class NileSlideToggle extends NileElement {
     const hasErrorMessage = this.errorMessage ? true : false;
 
     return html`
-      <div class="nile-slide-toggle">
+      <div
+        class=${classMap({
+          'nile-slide-toggle': true,
+          'nile-slide--disabled': this.disabled,
+        })}
+      >
         <label class="nile-slide-toggle__switch">
           <input
             type="checkbox"

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/nile-tab.css.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {css} from 'lit-element';
+import { css } from 'lit-element';
 
 /**
  * Tab CSS
@@ -17,6 +17,10 @@ export const styles = css`
 
   :host {
     display: inline-block;
+    --tab-border-radius: 8px;
+    --tab-padding: 0px 3px 12px 3px;
+    --tab-hover-background-color:transparent;
+    --tab-active-background-color: transparent;
   }
 
   :host([centered]) {
@@ -26,10 +30,12 @@ export const styles = css`
 
   .tab {
     display: inline-flex;
+    width: 100%;
     align-items: center;
-    border-radius: 8px;
-    color: #667085;
-    padding: 4px 4px 12px 4px;
+    border-radius: 4px;
+    border-radius: var(--tab-border-radius);
+    color: var(--nile-colors-gray-light-mode-500);
+    padding: var(--tab-padding);
     white-space: nowrap;
     user-select: none;
     cursor: pointer;
@@ -40,11 +46,14 @@ export const styles = css`
     font-weight: 600;
     line-height: 20px;
     letter-spacing: 0.2px;
-    gap: 4px;
+    gap: 8px;
+    height: 36px;
+    box-sizing: border-box;
   }
 
   .tab:hover:not(.tab--disabled) {
-    color: var(--nile-colors-dark-900);
+    color: var(--nile-colors-primary-700);
+    background-color: var(--tab-hover-background-color);
   }
 
   .tab:focus {
@@ -57,6 +66,7 @@ export const styles = css`
 
   .tab.tab--active:not(.tab--disabled) {
     color: var(--nile-colors-primary-700);
+    background-color: var(--tab-active-background-color);
   }
 
   .tab.tab--closable {