@aquera/nile-elements 0.0.1-beta.6 → 0.0.1-beta.8

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.1-beta.6",
+  "version": "0.0.1-beta.8",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-auto-complete/nile-auto-complete.ts

@@ -90,10 +90,6 @@ export class NileAutoComplete extends NileElement {
     this.dropdownElement?.show();
   }
 
-  private handleBlur() {
-    this.menuItems = this.allMenuItems;
-  }
-
   public render(): TemplateResult {
     return html`
       <nile-dropdown class="nile-dropdown--input" ?open=${this.isDropdownOpen} noOpenOnCLick>
@@ -102,7 +98,6 @@ export class NileAutoComplete extends NileElement {
           .value=${this.value}
           @nile-input=${this.handleSearch}
           @focus=${this.handleFocus}
-          @blur=${this.handleBlur}
           @click=${this.handleClick}
           slot="trigger"
           placeholder=${this.placeholder}

package/src/nile-chip/nile-chip.ts

@@ -41,6 +41,15 @@ export class NileChip extends NileElement {
 
   @query('nile-auto-complete') autoComplete!: any;
 
+  /** Sets the input to a warning state, changing its visual appearance. */
+  @property({ type: Boolean }) warning = false;
+
+  /** Sets the input to an error state, changing its visual appearance. */
+  @property({ type: Boolean }) error = false;
+
+  /** Sets the input to a success state, changing its visual appearance. */
+  @property({ type: Boolean }) success = false;
+
   /** The input's label. If you need to display HTML, use the `label` slot instead. */
   @property() label = '';
 
@@ -152,7 +161,15 @@ export class NileChip extends NileElement {
           <slot name="label">${this.label}</slot>
         </label>
 
-        <div class="nile-chip">
+        <div
+        class=${classMap({
+              'nile-chip': true,
+              'nile-chip--warning': this.warning,
+              'nile-chip--error': this.error,
+              'nile-chip--success': this.success,
+
+            })}
+            >
           ${this.tags.map(tag => html`
             <nile-tag class="nile-chip__tags" @nile-remove=${() => this.handleRemove(tag)} removable pill>
               ${tag}

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

@@ -96,7 +96,7 @@ export const styles = css`
   }
 
   .select::part(popup) {
-    z-index: 900;
+    z-index: 9999;
   }
 
   .select[data-current-placement^='top']::part(popup) {
@@ -355,7 +355,7 @@ export const styles = css`
     align-items: center;
     justify-content: center;
     font-size: inherit;
-    color: #aaaaaa;
+    color: #005EA6;
     border: none;
     background: none;
     padding: 0;
@@ -395,7 +395,7 @@ export const styles = css`
     background: #ffffff;
     border: solid 1px #cccccc;
     border-radius: 0.25rem;
-    padding-block: 0.25rem 0;
+    padding-block: 0;
     padding-inline: 0;
     overflow: auto;
     overscroll-behavior: none;
@@ -404,10 +404,15 @@ export const styles = css`
     max-height: var(--auto-size-available-height);
   }
 
-  /* Listbox */
-  .select__search-enabled {
-    padding-top: 50px;
+  .select__options{
+    padding-top: 10px;
+  }
 
+  .select__options{
+    padding: 5px;
+    margin: 4px;
+    font-size: 14px;
+    color: rgb(133, 129, 129);
   }
 
   .select__listbox::slotted(nile-divider) {
@@ -423,11 +428,12 @@ export const styles = css`
   }
 
   .select__search {
-    position: absolute;
+    position: sticky;
     top: 0px;
-    height: 15px;
+    z-index: 1;
     width: calc(100% - 16px);
     padding: 8px;
+    background-color: white;
   }
 
   .select__footer {
@@ -441,7 +447,7 @@ export const styles = css`
     display: flex;
     flex-direction: row;
     align-items: flex-start;
-    padding: 12px;
+    padding: 8px;
     gap: 12px;
     justify-content: space-between;
   }

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

@@ -205,6 +205,10 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   @property({ type: Boolean }) showSelected = false;
 
+  @state() showNoResults: boolean;
+
+  @property({ type: String }) noResultsMessage: string = "No results found";
+
   /** Gets the validity state object */
   get validity() {
     return this.valueInput.validity;
@@ -240,12 +244,12 @@ export class NileSelect extends NileElement implements NileFormControl {
   private handleFocus() {
     this.hasFocus = true;
     this.displayInput.setSelectionRange(0, 0);
-    this.emit('nile-focus');
+    this.emit('nile-focus', { value: this.value , name: this.name });
   }
 
   private handleBlur() {
     this.hasFocus = false;
-    this.emit('nile-blur');
+    this.emit('nile-blur', { value: this.value , name: this.name });
   }
 
   private handleDocumentFocusIn(event: FocusEvent) {
@@ -302,6 +306,7 @@ export class NileSelect extends NileElement implements NileFormControl {
     });
     this.value = '';
     this.selectionChanged();
+    this.emit('nile-change', { value: this.value , name: this.name });
   }
 
   private handleDocumentKeyDown(event: KeyboardEvent) {
@@ -347,8 +352,8 @@ export class NileSelect extends NileElement implements NileFormControl {
 
         // Emit after updating
         this.updateComplete.then(() => {
-          this.emit('nile-input');
-          this.emit('nile-change');
+          this.emit('nile-input', { value: this.value , name: this.name });
+          this.emit('nile-change', { value: this.value , name: this.name });
         });
 
         if (!this.multiple) {
@@ -482,9 +487,9 @@ export class NileSelect extends NileElement implements NileFormControl {
 
       // Emit after update
       this.updateComplete.then(() => {
-        this.emit('nile-clear');
-        this.emit('nile-input');
-        this.emit('nile-change');
+        this.emit('nile-clear', { value: this.value , name: this.name });
+        this.emit('nile-input', { value: this.value , name: this.name });
+        this.emit('nile-change', { value: this.value , name: this.name });
       });
     }
   }
@@ -515,8 +520,8 @@ export class NileSelect extends NileElement implements NileFormControl {
       if (this.value !== oldValue) {
         // Emit after updating
         this.updateComplete.then(() => {
-          this.emit('nile-input');
-          this.emit('nile-change');
+          this.emit('nile-input', { value: this.value , name: this.name });
+          this.emit('nile-change', { value: this.value , name: this.name });
         });
       }
 
@@ -556,8 +561,8 @@ export class NileSelect extends NileElement implements NileFormControl {
 
       // Emit after updating
       this.updateComplete.then(() => {
-        this.emit('nile-input');
-        this.emit('nile-change');
+        this.emit('nile-input', { value: this.value , name: this.name });
+        this.emit('nile-change', { value: this.value , name: this.name });
       });
     }
   }
@@ -645,6 +650,7 @@ export class NileSelect extends NileElement implements NileFormControl {
     this.updateComplete.then(() => {
       this.formControlController.updateValidity();
     });
+
   }
 
   handleSearchFocus() {
@@ -657,22 +663,33 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   handleSearchChange(e: any) {
     this.searchValue = e.detail.value;
-    this.filterOptions(this.searchValue);
-  }
+    let filteredOptions = this.filterOptions(this.searchValue);
+
+    if (filteredOptions.length === 0) {
+      // Display 'No results found' message.
+      this.showNoResults = true;
+    } else {
+      this.showNoResults = false;
+    }  }
 
   filterOptions(searchValue: string) {
     const allOptions = this.getAllOptions();
     const lowerCaseSearchValue = searchValue.toLowerCase();
 
+    let filteredOptions: NileOption[] = [];
+
     allOptions.forEach(el => {
-      // Hide the option if its text and value do not include the search value.
       const lowerCaseLabel = el.getTextLabel().toLowerCase();
       const lowerCaseValue = (el.value || '').toLowerCase();
-      el.hidden = !(
-        lowerCaseLabel.includes(lowerCaseSearchValue) ||
-        lowerCaseValue.includes(lowerCaseSearchValue)
-      );
+      if (lowerCaseLabel.startsWith(lowerCaseSearchValue) || lowerCaseValue.startsWith(lowerCaseSearchValue)) {
+        el.hidden = false;
+        filteredOptions.push(el);
+      } else {
+        el.hidden = true;
+      }
     });
+
+    return filteredOptions;
   }
 
   private handleInvalid(event: Event) {
@@ -705,7 +722,7 @@ export class NileSelect extends NileElement implements NileFormControl {
       this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption());
 
       // Show
-      this.emit('nile-show');
+      this.emit('nile-show', { value: this.value , name: this.name });
       this.addOpenListeners();
 
       await stopAnimations(this);
@@ -727,10 +744,10 @@ export class NileSelect extends NileElement implements NileFormControl {
         scrollIntoView(this.currentOption, this.listbox, 'vertical', 'auto');
       }
 
-      this.emit('nile-after-show');
+      this.emit('nile-after-show', { value: this.value , name: this.name });
     } else {
       // Hide
-      this.emit('nile-hide');
+      this.emit('nile-hide', { value: this.value , name: this.name });
       this.removeOpenListeners();
 
       await stopAnimations(this);
@@ -741,7 +758,7 @@ export class NileSelect extends NileElement implements NileFormControl {
       this.listbox.hidden = true;
       this.popup.active = false;
 
-      this.emit('nile-after-hide');
+      this.emit('nile-after-hide', { value: this.value , name: this.name });
     }
   }
 
@@ -988,9 +1005,7 @@ export class NileSelect extends NileElement implements NileFormControl {
               @mouseup=${this.handleOptionClick}
               @slotchange=${this.handleDefaultSlotChange}
             >
-              <slot></slot>
-
-              ${this.searchEnabled
+            ${this.searchEnabled
                 ? html` <div class="select__search">
                     <nile-input
                       size="small"
@@ -1005,6 +1020,14 @@ export class NileSelect extends NileElement implements NileFormControl {
                     </nile-input>
                   </div>`
                 : ``}
+                <div class="select__options">
+                ${this.showNoResults
+                ? html` <div class="select__no-results">${this.noResultsMessage} </div>
+                `: ''}
+                <slot></slot>
+                  </div>
+
+
               ${this.multiple
                 ? html` <div
                     class="select__footer"