@aquera/nile-elements 0.1.24 → 0.1.25

package/package.json

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

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

@@ -12,18 +12,20 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
-    --virtual-scroll-container-width:100px;
+    --virtual-scroll-container-width:110px;
+    --virtual-scroll-container-height:200px;
   }
 
   .nile-dropdown--input {
     width: 100%;
   }
 
-  .nile-dropdown--input lit-virtualizer{
-    min-width: var(--virtual-scroll-container-width)!important;
+  .virtualized__menu{
+    min-width: var(--virtual-scroll-container-width);
+    min-height: var(--virtual-scroll-container-height) !important;
   }
 
-  .nile-dropdown--input nile-menu-item{
+  .virtualized__menu nile-menu-item{
     width:100%;
   }
 

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

@@ -10,7 +10,8 @@ import { styles } from './nile-auto-complete.css';
 import NileElement from '../internal/nile-element';
 import type { CSSResultGroup, PropertyValues } from 'lit';
 import { NileDropdown } from '../nile-dropdown';
-import '@lit-labs/virtualizer';
+
+import { virtualize } from '@lit-labs/virtualizer/virtualize.js';
 
 // Define the custom element 'nile-auto-complete'
 @customElement('nile-auto-complete')
@@ -22,6 +23,8 @@ export class NileAutoComplete extends NileElement {
 
   // Define component properties
 
+  @property({ type: Boolean }) disabled: boolean = false;
+
   @property({ type: Boolean }) isDropdownOpen: boolean = false;
 
   @property({ type: Boolean }) enableVirtualScroll: boolean = false;
@@ -36,9 +39,9 @@ export class NileAutoComplete extends NileElement {
 
   @property({ type: Boolean }) loading: boolean = false;
 
-  @property({ attribute:false}) filterFunction: any = (item:string,searchedValue:string)=>item.toLowerCase().includes(searchedValue.toLowerCase());
+  @property({ attribute:false}) filterFunction: (item:string,searchedValue:string)=>boolean=(item:string,searchedValue:string)=>item.toLowerCase().includes(searchedValue.toLowerCase());
 
-  @property({ attribute:false}) renderItemFunction: any = (item:any)=>item;
+  @property({ attribute:false}) renderItemFunction: (item:any)=>string = (item:any)=>item;
 
   @property({ type: Array }) allMenuItems: any = [];
 
@@ -46,13 +49,19 @@ export class NileAutoComplete extends NileElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.menuItems = [...this.allMenuItems];
+    this.renderItemFunction=(item:any)=>item;
   }
 
   protected updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties);
-    if (changedProperties.has('allMenuItems')) this.menuItems = [...this.allMenuItems];
+    if (changedProperties.has('allMenuItems')){
+      this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);
+      this.setVirtualMenuWidth();
+    }
     if (changedProperties.has('isDropdownOpen')) this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);
+    if (changedProperties.has('value')){
+      this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);
+    }
   }
 
   public render(): TemplateResult {
@@ -61,6 +70,7 @@ export class NileAutoComplete extends NileElement {
       <nile-dropdown class="nile-dropdown--input" ?open=${this.isDropdownOpen} noOpenOnCLick>
         <nile-input class="nile-auto-complete--input"
           ?no-border=${this.noBorder}
+          .disabled=${this.disabled}
           .value=${this.value}
           @nile-input=${this.handleSearch}
           @focus=${this.handleFocus}
@@ -79,11 +89,12 @@ export class NileAutoComplete extends NileElement {
   
   getVirtualizedContent():TemplateResult{
     return html`
-      <nile-menu @nile-select=${this.handleSelect} id="content-menu" exportparts="menu__items-wrapper:options__wrapper">
-        <lit-virtualizer
-          .items=${this.menuItems}
-          .renderItem=${(item:any):TemplateResult=>this.getItemRenderFunction(item)}
-        ></lit-virtualizer>
+      <nile-menu class="virtualized__menu" @nile-select=${this.handleSelect} id="content-menu" exportparts="menu__items-wrapper:options__wrapper">
+        ${virtualize({
+          items: this.menuItems,
+          renderItem: (item:any):TemplateResult=>this.getItemRenderFunction(item),
+					scroller:true
+        })}
       </nile-menu>
     `
   }
@@ -107,13 +118,25 @@ export class NileAutoComplete extends NileElement {
   private handleSelect(event: CustomEvent) {
     this.value = event.detail.value;
     this.emit('nile-complete', { value: event.detail.value });
+    this.emit('nile-input', { value: event.detail.value });
     this.isDropdownOpen = false;
     this.dropdownElement?.hide();
   }
 
+  private setVirtualMenuWidth() {
+    const maxLengthOption = this.menuItems
+      .reduce((acc: number, curr: any) => {
+        const currLength = this.renderItemFunction(curr).length
+        return acc > currLength ? acc : currLength
+      }, 0)
+    const defaultWith = 110;
+    const pixelMultiplier = 9.5;
+    const menuWidth = maxLengthOption * pixelMultiplier < defaultWith ? defaultWith : maxLengthOption * pixelMultiplier;
+    this.style.setProperty("--virtual-scroll-container-width", menuWidth + "px");
+  }
+
   private handleSearch(event: CustomEvent) {
-    const searchValue = event.detail.value.toLowerCase();
-    this.value = searchValue;
+    this.value = event.detail.value.toLowerCase();
 
     // Filter menu items based on the search value
     this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);
@@ -140,6 +163,7 @@ export class NileAutoComplete extends NileElement {
   }
 
   applyFilter<T>(list: T[], filterFn: (item: T,searchValue?:string) => boolean): T[] {
+    if(typeof(list)!=='object') return []
     const res:T[]=[]
     list.forEach( el=> filterFn(el,this.value) && res.push(el) )
     return res
@@ -153,4 +177,4 @@ declare global {
   interface HTMLElementTagNameMap {
     'nile-auto-complete': NileAutoComplete;
   }
-}
+}

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

@@ -93,9 +93,9 @@ export class NileChip extends NileElement {
 
   @property({ attribute: 'error-message', reflect: true }) errorMessage = '';
 
-  @property({ attribute:false}) filterFunction: any = (item:string,searchedValue:string)=>item.toLowerCase().includes(searchedValue.toLowerCase());
+  @property({ attribute:false}) filterFunction: (item:string,searchedValue:string)=>boolean = (item:string,searchedValue:string)=>item.toLowerCase().includes(searchedValue.toLowerCase());
 
-  @property({ attribute:false}) renderItemFunction: any = (item:any)=>item;
+  @property({ attribute:false}) renderItemFunction: (item:any)=>string = (item:any)=>item;
 
   protected updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties);

package/vscode-html-custom-data.json

@@ -62,8 +62,13 @@
     },
     {
       "name": "nile-auto-complete",
-      "description": "Attributes:\n\n  * `isDropdownOpen` {`boolean`} - \n\n  * `enableVirtualScroll` {`boolean`} - \n\n  * `openOnFocus` {`boolean`} - \n\n  * `value` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `noBorder` {`boolean`} - \n\n  * `loading` {`boolean`} - \n\n  * `allMenuItems` - \n\nProperties:\n\n  * `styles` - \n\n  * `dropdownElement` - \n\n  * `isDropdownOpen` {`boolean`} - \n\n  * `enableVirtualScroll` {`boolean`} - \n\n  * `openOnFocus` {`boolean`} - \n\n  * `value` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `noBorder` {`boolean`} - \n\n  * `loading` {`boolean`} - \n\n  * `filterFunction` - \n\n  * `renderItemFunction` - \n\n  * `allMenuItems` - \n\n  * `menuItems` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Attributes:\n\n  * `disabled` {`boolean`} - \n\n  * `isDropdownOpen` {`boolean`} - \n\n  * `enableVirtualScroll` {`boolean`} - \n\n  * `openOnFocus` {`boolean`} - \n\n  * `value` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `noBorder` {`boolean`} - \n\n  * `loading` {`boolean`} - \n\n  * `allMenuItems` - \n\nProperties:\n\n  * `styles` - \n\n  * `dropdownElement` - \n\n  * `disabled` {`boolean`} - \n\n  * `isDropdownOpen` {`boolean`} - \n\n  * `enableVirtualScroll` {`boolean`} - \n\n  * `openOnFocus` {`boolean`} - \n\n  * `value` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `noBorder` {`boolean`} - \n\n  * `loading` {`boolean`} - \n\n  * `filterFunction` - \n\n  * `renderItemFunction` - \n\n  * `allMenuItems` - \n\n  * `menuItems` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
+        {
+          "name": "disabled",
+          "description": "`disabled` {`boolean`} - \n\nProperty: disabled\n\nDefault: false",
+          "valueSet": "v"
+        },
         {
           "name": "isDropdownOpen",
           "description": "`isDropdownOpen` {`boolean`} - \n\nProperty: isDropdownOpen\n\nDefault: false",