@aquera/nile-elements 0.1.46-beta-2.3 → 0.1.46-beta-2.5

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.46-beta-2.3",
+  "version": "0.1.46-beta-2.5",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -86,7 +86,8 @@
     "./nile-inline-edit": "./dist/src/nile-inline-edit/index.js",
     "./nile-tour": "./dist/src/nile-tour/index.js",
     "./nile-table": "./dist/src/nile-table/index.js",
-    "./nile-pagination": "./dist/src/nile-pagination/index.js"
+    "./nile-pagination": "./dist/src/nile-pagination/index.js",
+    "./nile-slider": "./dist/src/nile-slider/index.js"
   },
   "scripts": {
     "analyze": "cem analyze --litelement",
@@ -190,5 +191,4 @@
       "prettier --write"
     ]
   }
-}
-
+}

package/src/index.ts

@@ -16,7 +16,6 @@ export { NileLoader } from './nile-loader';
 export { NileProgressBar } from './nile-progress-bar';
 export { NileSpinner } from './nile-spinner';
 export { NileSelect } from './nile-select';
-export { NileVirtualSelect } from './nile-virtual-select';
 export { NileOption } from './nile-option';
 export { NileTag } from './nile-tag';
 export { NileIconButton } from './nile-icon-button';
@@ -77,6 +76,6 @@ export { NileSectionMessage } from './nile-section-message';
 export { NileToolbar } from './nile-toolbar';
 export { NileInlineEdit } from './nile-inline-edit';
 export { NileTable } from './nile-table';
-
 export { NileFilterChip } from './nile-filter-chip';
 export {NilePagination } from './nile-pagination';
+export { NileSlider } from './nile-slider';

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

@@ -35,7 +35,7 @@ export const styles = css`
   }
 
   .option--single-select {
-    padding: 8px 12px;
+    padding: 9px 12px;
   }
 
   .option--hover:not(.option--current):not(.option--disabled) {

package/src/nile-option/nile-option.ts

@@ -49,6 +49,7 @@ export class NileOption extends NileElement {
   @query('.option__label') defaultSlot: HTMLSlotElement;
 
   @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)
+  @state() selected = false; // the option is selected and has aria-selected="true"
   @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging
   @state() hidden = false; // the option is hidden
   @state() isMultipleSelect = false;
@@ -63,19 +64,13 @@ export class NileOption extends NileElement {
   /** Draws the option in a disabled state, preventing selection. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
-  /** Forces the option to display in multiple select mode with checkboxes. */
-  @property({ type: Boolean, reflect: true }) multiple = false;
-
-  /** Indicates whether the option is selected. */
-  @property({ type: Boolean, reflect: true }) selected = false;
-
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'option');
     this.setAttribute('aria-selected', 'false');
 
-    // Find the closest parent 'nile-select' or 'nile-virtual-select' element
-    const parentSelect = this.closest('nile-select') || this.closest('nile-virtual-select');
+    // Find the closest parent 'nile-select' element
+    const parentSelect = this.closest('nile-select');
 
     // Check if the parent has the 'multiple' attribute
     if (parentSelect && parentSelect.hasAttribute('multiple')) {
@@ -87,10 +82,6 @@ export class NileOption extends NileElement {
         this.isMultipleSelect = Boolean(multipleValue);
       }
     }
-
-    if (this.multiple) {
-      this.isMultipleSelect = true;
-    }
   }
 
   private handleDefaultSlotChange() {
@@ -127,11 +118,6 @@ export class NileOption extends NileElement {
     this.setAttribute('aria-selected', this.selected ? 'true' : 'false');
   }
 
-  @watch('multiple')
-  handleMultipleChange() {
-    this.isMultipleSelect = this.multiple;
-  }
-
   @watch('value')
   handleValueChange() {
     // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers

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

@@ -15,7 +15,6 @@ import { styles } from './nile-select.css';
 import '../nile-icon';
 import '../nile-popup/nile-popup';
 import '../nile-tag/nile-tag';
-import '../nile-virtual-select/nile-virtual-select';
 import { animateTo, stopAnimations } from '../internal/animate';
 import { classMap } from 'lit/directives/class-map.js';
 import { query, state } from 'lit/decorators.js';
@@ -36,7 +35,6 @@ import type NileOption from '../nile-option/nile-option';
 import type NilePopup from '../nile-popup/nile-popup';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { VirtualScrollHelper } from './virtual-scroll-helper';
 
 type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
 
@@ -55,7 +53,6 @@ type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
  * @dependency nile-icon
  * @dependency nile-popup
  * @dependency nile-tag
- * @dependency nile-virtual-select
  *
  * @slot - The listbox options. Must be `<nile-option>` elements. You can use `<nile-divider>` to group items visually.
  * @slot label - The input's label. Alternatively, you can use the `label` attribute.
@@ -107,7 +104,6 @@ export class NileSelect extends NileElement implements NileFormControl {
     'help-text',
     'label'
   );
-  private virtualScrollHelper!: VirtualScrollHelper;
   private typeToSelectString = '';
   private typeToSelectTimeout: number;
 
@@ -162,15 +158,6 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   @property({ type: Boolean, reflect: true }) noWidthSync = false;
 
-  /** Enable virtual scrolling for large datasets. When enabled, the component will use `nile-virtual-select` internally for better performance with large option lists. */
-  @property({ type: Boolean }) enableVirtualScroll = false;
-
-  /** Array of all option items for virtual scrolling. Required when `enableVirtualScroll` is true. */
-  @property({ type: Array }) allOptionItems: any = [];
-
-  /** Function to render items in virtual select. Defaults to displaying the `label` or `name` property of the item. */
-  @property({ attribute: false }) renderItemFunction: (item: any) => string = (item: any) => item?.label || item;
-
   /** Allows more than one option to be selected. */
   @property({ type: Boolean, reflect: true }) multiple = false;
 
@@ -247,23 +234,16 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   /** Gets the validity state object */
   get validity() {
-    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-      return this.virtualScrollHelper.getValidity();
-    }
     return this.valueInput?.validity;
   }
 
   /** Gets the validation message */
   get validationMessage() {
-    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-      return this.virtualScrollHelper.getValidationMessage();
-    }
     return this.valueInput?.validationMessage;
   }
 
   connectedCallback() {
     super.connectedCallback();
-    this.virtualScrollHelper = new VirtualScrollHelper(this);
     this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
     this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
     this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
@@ -291,29 +271,17 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   private handleFocus() {
-    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-      return;
-    }
-
     this.hasFocus = true;
     this.displayInput.setSelectionRange(0, 0);
     this.emit('nile-focus', { value: this.value, name: this.name });
   }
 
   private handleBlur() {
-    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-      return;
-    }
-
     this.hasFocus = false;
     this.emit('nile-blur', { value: this.value, name: this.name });
   }
 
   private handleDocumentFocusIn(event: FocusEvent) {
-    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-      return;
-    }
-
     // Close when focusing out of the select
     const path = event.composedPath();
     if (this && !path.includes(this)) {
@@ -372,10 +340,6 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   private handleDocumentKeyDown(event: KeyboardEvent) {
-    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-      return;
-    }
-
     const target = event.target as HTMLElement;
     const isClearButton = target.closest('.select__clear') !== null;
     const isIconButton = target.closest('nile-icon-button') !== null;
@@ -476,10 +440,6 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   private handleDocumentMouseDown(event: MouseEvent) {
-    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-      return;
-    }
-
     // Close when clicking outside of the select
     const path = event.composedPath();
     if (this && !path.includes(this)) {
@@ -493,10 +453,6 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   private handleComboboxMouseDown(event: MouseEvent) {
-    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-      return;
-    }
-
     const path = event.composedPath();
     const isIconButton = path.some(
       el =>
@@ -514,19 +470,11 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   private handleComboboxKeyDown(event: KeyboardEvent) {
-    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-      return;
-    }
-
     event.stopPropagation();
     this.handleDocumentKeyDown(event);
   }
 
   private handleClearClick(event: MouseEvent) {
-    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-      return;
-    }
-
     event.stopPropagation();
 
     if (this.value !== '') {
@@ -544,20 +492,12 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   private handleClearMouseDown(event: MouseEvent) {
-    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-      return;
-    }
-
     // Don't lose focus or propagate events when clicking the clear button
     event.stopPropagation();
     event.preventDefault();
   }
 
   private handleOptionClick(event: MouseEvent) {
-    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-      return;
-    }
-
     const target = event.target as HTMLElement;
     const option = target.closest('nile-option');
 
@@ -630,10 +570,6 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   private handleTagRemove(event: NileRemoveEvent, option: NileOption) {
-    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-      return;
-    }
-
     event.stopPropagation();
 
     if (!this.disabled) {
@@ -805,26 +741,14 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   handleSearchFocus() {
-    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-      return;
-    }
-
     document.removeEventListener('keydown', this.handleDocumentKeyDown);
   }
 
   handleSearchBlur() {
-    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-      return;
-    }
-
     document.addEventListener('keydown', this.handleDocumentKeyDown);
   }
 
   handleSearchChange(e: any) {
-    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-      return;
-    }
-
     this.searchValue = e.detail.value;
     if (!this.disableLocalSearch) {
       let filteredOptions = this.filterOptions(this.searchValue);
@@ -867,11 +791,6 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   @watch('disabled', { waitUntilFirstUpdate: true })
   handleDisabledChange() {
-    // If virtual scroll is enabled, let the virtual select handle disabled changes
-    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-      return;
-    }
-
     // Close the listbox when the control is disabled
     if (this.disabled) {
       this.open = false;
@@ -881,11 +800,6 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   @watch('value', { waitUntilFirstUpdate: true })
   handleValueChange() {
-    // If virtual scroll is enabled, let the virtual select handle value changes
-    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-      return;
-    }
-
     const allOptions = this.getAllOptions();
     const value = Array.isArray(this.value) ? this.value : [this.value];
 
@@ -895,11 +809,6 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   @watch('open', { waitUntilFirstUpdate: true })
   async handleOpenChange() {
-    // If virtual scroll is enabled, let the virtual select handle the open/close logic
-    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-      return;
-    }
-
     if (this.open && !this.disabled) {
       // Reset the current option
       this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption());
@@ -953,10 +862,6 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   /** Shows the listbox. */
   async show() {
-    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-      return this.virtualScrollHelper.show();
-    }
-
     if (this.open || this.disabled) {
       this.open = false;
       return undefined;
@@ -968,10 +873,6 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   /** Hides the listbox. */
   async hide() {
-    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-      return this.virtualScrollHelper.hide();
-    }
-
     if (!this.open || this.disabled) {
       this.open = false;
       return undefined;
@@ -983,9 +884,6 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
   checkValidity() {
-    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-      return this.virtualScrollHelper.checkValidity();
-    }
     return this.valueInput.checkValidity();
   }
 
@@ -996,38 +894,23 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
   reportValidity() {
-    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-      return this.virtualScrollHelper.reportValidity();
-    }
     return this.valueInput.reportValidity();
   }
 
   /** Sets a custom validation message. Pass an empty string to restore validity. */
   setCustomValidity(message: string) {
-    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-      this.virtualScrollHelper.setCustomValidity(message);
-    } else {
-      this.valueInput.setCustomValidity(message);
-      this.formControlController.updateValidity();
-    }
+    this.valueInput.setCustomValidity(message);
+    this.formControlController.updateValidity();
   }
 
   /** Sets focus on the control. */
   focus(options?: FocusOptions) {
-    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-      this.virtualScrollHelper.focus(options);
-    } else {
-      this.displayInput.focus(options);
-    }
+    this.displayInput.focus(options);
   }
 
   /** Removes focus from the control. */
   blur() {
-    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-      this.virtualScrollHelper.blur();
-    } else {
-      this.displayInput.blur();
-    }
+    this.displayInput.blur();
   }
 
   onInputChange(event: Event) {
@@ -1045,8 +928,6 @@ export class NileSelect extends NileElement implements NileFormControl {
     }
   }
 
-
-
   calculateTotalWidthOfTags() {
     if (this.maxOptionsVisible !== Infinity) {
       this.oldMaxOptionsVisible = this.maxOptionsVisible;
@@ -1092,16 +973,6 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   render() {
-    // If virtual scroll is enabled, render the virtual select component
-    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-      return this.virtualScrollHelper.renderVirtualizedContent();
-    }
-
-    // Otherwise render the regular select content
-    return this.getRegularContent();
-  }
-
-  private getRegularContent() {
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
     const hasLabelSuffixSlot = this.hasSlotController.test('label-suffix');

package/src/nile-slider/index.ts

@@ -0,0 +1 @@
+export { NileSlider } from './nile-slider';

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

@@ -0,0 +1,112 @@
+/**
+ * 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';
+
+/**
+ * Slider CSS
+ */
+export const styles = css`
+  :host {
+    display: block;
+  }
+
+  .container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    height: 100px;
+  }
+
+  .align-item-center {
+    align-items: center;
+  }
+
+  slot.span {
+    font-size: var(--nile-font-size-micro);
+    margin-top: 14px;
+  }
+
+  .range-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nile-spacing-sm);
+  }
+
+  .column-reverse {
+    flex-direction: column-reverse;
+  }
+
+  .label-container {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .label-container span {
+    margin: var(--nile-spacing-none);
+    padding: var(--nile-spacing-none);
+    font-size: var(--nile-font-size-micro);
+  }
+
+  .range {
+    position: relative;
+    width: 228px;
+    height: 4px;
+    background-color: var(--nile-colors-white-base);
+	  border-radius: var(--nile-radius-radius-3xl);
+  }
+
+  .range-completed {
+    position: absolute;
+    height: 100%;
+    width: 0%;
+    background-color: var(--nile-colors-primary-600);
+    top: 0px;
+    left: 0px;
+    z-index: 98;
+    border-radius: var(--nile-radius-radius-3xl);
+  }
+
+  .range-button {
+    height: 12px;
+    width: 12px;
+    background-color: var(--nile-colors-primary-600);
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: var(--nile-radius-radius-3xl);
+    left: 0;
+    z-index: 100;
+    box-shadow: rgba(0, 82, 145, 0.1) 0px 1px 2px 0px, rgba(0, 94, 166, 0.15) 0px 0px 0px 4px;
+  }
+
+  .range-button:hover, .range-button-two:hover {
+    cursor: grab;
+    background-color: var(--nile-colors-primary-700);
+  }
+
+  .range-button:active, .range-button-two:active {
+    cursor: grabbing;
+    background-color: var(--nile-colors-primary-700);
+  }
+
+  .range-button-two {
+    height: 12px;
+    width: 12px;
+    background-color: var(--nile-colors-primary-600);
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: var(--nile-radius-radius-3xl);
+    left: 100%;
+    z-index: 100;
+    box-shadow: rgba(0, 82, 145, 0.1) 0px 1px 2px 0px, rgba(0, 94, 166, 0.15) 0px 0px 0px 4px;
+  }
+`;
+
+export default [styles];

package/src/nile-slider/nile-slider.template.ts

@@ -0,0 +1,47 @@
+import { TemplateResult, html } from 'lit';
+import NileSlider from './nile-slider';
+
+export const rangeSlider = (nileSlider: NileSlider): TemplateResult => {
+  return html`
+    <div>
+      <nile-tooltip
+        content=${nileSlider.rangeOneValue}
+        placement=${nileSlider.tooltipPosition}
+      >
+        <div id="range-one" class="range-button" part="range-button"></div>
+      </nile-tooltip>
+      <nile-tooltip
+        content=${nileSlider.rangeTwoValue}
+        placement=${nileSlider.tooltipPosition}
+      >
+        <div
+          id="range-two"
+          class="range-button-two"
+          part="range-button-two"
+        ></div>
+      </nile-tooltip>
+    </div>
+  `;
+};
+
+export const singleSlider = (nileSlider: NileSlider): TemplateResult => {
+  return html`
+    <div>
+      <nile-tooltip
+        content=${nileSlider.value}
+        placement=${nileSlider.tooltipPosition}
+      >
+        <div class="range-button" part="range-button"></div>
+      </nile-tooltip>
+    </div>
+  `;
+};
+
+export const lableContaier = (nileSlider: NileSlider): TemplateResult => {
+  return html`
+    <div part="label-container" class="label-container">
+      <span>${nileSlider.labelStart}</span>
+      <span>${nileSlider.labelEnd}</span>
+    </div>
+  `;
+}