@aquera/nile-elements 0.0.66 → 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.css.ts

@@ -2,32 +2,41 @@ import { css } from 'lit';
 
 export default css`
   .nile-slide-toggle {
-    display: flex;
-    align-items: center;
+    display: inline-flex;
+    align-items: baseline;
   }
 
   .nile-slide-toggle__switch {
     flex: 0 0 auto;
     position: relative;
     display: inline-block;
-    width: 32px;
-    height: 16px;
+    width: 36px;
+    height: 20px;
     line-height: 22px;
     margin-right: 10px;
   }
 
   .nile-slide-toggle__label {
+    display: flex;
+    flex-direction: column;
     margin-right: 6px;
     font-size: 14px;
-    color: var(--nile-colors-dark-900);
+    color: var(--nile-colors-gray-light-mode-700);
     font-family: var(--nile-font-family-serif);
     font-size: 14px;
     font-style: normal;
-    font-weight: 400;
-    line-height: 14px;
+    font-weight: 500;
+    line-height: 20px;
     letter-spacing: 0.2px;
   }
 
+  .nile-slide-toggle__sublabel {
+    color: var(--nile-colors-gray-light-mode-600);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 18px;
+  }
+
   .nile-slide-toggle__switch input {
     opacity: 0;
     width: 0;
@@ -49,8 +58,8 @@ export default css`
   .nile-slide-toggle__slider:before {
     position: absolute;
     content: '';
-    height: 12px;
-    width: 12px;
+    height: 16px;
+    width: 16px;
     bottom: 2px;
     left: 2px;
     background-color: var(--nile-slide-toggle-color-indicator);

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

@@ -8,12 +8,13 @@ export class NileSlideToggle extends NileElement {
   public static styles: CSSResultGroup = styles;
 
   @property({ type: String }) label = '';
-  @property({ type: Boolean, reflect: true }) isChecked = false;
+  @property({ type: String }) sublabel = '';
 
-  @property({ attribute: 'help-text' }) helpText = '';
+  @property({ type: Boolean, reflect: true }) isChecked = false;
 
-  @property({ attribute: 'error-message' }) errorMessage = '';
+  @property({ attribute: 'help-text', reflect: true }) helpText = '';
 
+  @property({ attribute: 'error-message', reflect: true }) errorMessage = '';
 
   connectedCallback() {
     super.connectedCallback();
@@ -25,7 +26,6 @@ export class NileSlideToggle extends NileElement {
     this.emit('nile-destroy');
   }
 
-
   toggleValue() {
     this.isChecked = !this.isChecked;
     this.dispatchEvent(
@@ -38,36 +38,30 @@ export class NileSlideToggle extends NileElement {
     const hasErrorMessage = this.errorMessage ? true : false;
 
     return html`
-    <div class="nile-slide-toggle">
-    <span class="nile-slide-toggle__label">
-        ${this.label}
-      </span>
-      <label class="nile-slide-toggle__switch">
-        <input
-          type="checkbox"
-          .checked=${this.isChecked}
-          @change=${this.toggleValue}
-        />
-        <span class="nile-slide-toggle__slider"></span>
-      </label>
-    </div>
-    ${
-          hasHelpText
-            ? html`
-                <nile-form-help-text>${this.helpText}</nile-form-help-text>
-              `
-            : ``
-        }
-
-        ${
-          hasErrorMessage
-            ? html`
-                <nile-form-error-message
-                  >${this.errorMessage}</nile-form-error-message
-                >
-              `
-            : ``
-        }
+      <div class="nile-slide-toggle">
+        <label class="nile-slide-toggle__switch">
+          <input
+            type="checkbox"
+            .checked=${this.isChecked}
+            @change=${this.toggleValue}
+          />
+          <span class="nile-slide-toggle__slider"></span>
+        </label>
+        <span class="nile-slide-toggle__label">
+          <span>${this.label}</span>
+          <span class="nile-slide-toggle__sublabel">${this.sublabel}</span>
+        </span>
+      </div>
+      ${hasHelpText
+        ? html` <nile-form-help-text>${this.helpText}</nile-form-help-text> `
+        : ``}
+      ${hasErrorMessage
+        ? html`
+            <nile-form-error-message
+              >${this.errorMessage}</nile-form-error-message
+            >
+          `
+        : ``}
     `;
   }
 }

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