@aquera/nile-elements 0.1.22 → 0.1.23

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -117,7 +117,8 @@
     "@codemirror/lang-javascript": "6.2.1",
     "@codemirror/lang-sql": "6.7.0",
     "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/lang-html":"6.4.9",
+    "@codemirror/lang-html": "6.4.9",
+    "@lit-labs/virtualizer": "^2.0.15",
     "codemirror": "6.0.1",
     "chalk": "5.3.0",
     "figlet": "1.7.0",

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

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

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

@@ -10,6 +10,7 @@ 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';
 
 // Define the custom element 'nile-auto-complete'
 @customElement('nile-auto-complete')
@@ -23,6 +24,8 @@ export class NileAutoComplete extends NileElement {
 
   @property({ type: Boolean }) isDropdownOpen: boolean = false;
 
+  @property({ type: Boolean }) enableVirtualScroll: boolean = false;
+
   @property({ type: Boolean }) openOnFocus: boolean = false;
 
   @property({ type: String }) value: string = '';
@@ -53,6 +56,7 @@ export class NileAutoComplete extends NileElement {
   }
 
   public render(): TemplateResult {
+    const content=this.enableVirtualScroll?this.getVirtualizedContent():this.getContent();
     return html`
       <nile-dropdown class="nile-dropdown--input" ?open=${this.isDropdownOpen} noOpenOnCLick>
         <nile-input class="nile-auto-complete--input"
@@ -67,23 +71,39 @@ export class NileAutoComplete extends NileElement {
           ${this.loading?html`<nile-icon slot="suffix" color="var(--nile-colors-primary-600)" name="button-loading-blue-animated"></nile-icon>`:nothing}
         </nile-input>
         ${this.menuItems.length > 0 && !this.loading
-          ? html`
-              <nile-menu @nile-select=${this.handleSelect} exportparts="menu__items-wrapper:options__wrapper">
-                ${this.menuItems.map(
-                  (item: any)  => {
-                  const renderItem=this.renderItemFunction(item)
-                  return html`
-                    <nile-menu-item value=${renderItem}>${renderItem}</nile-menu-item>
-                  `
-                  }
-                )}
-              </nile-menu>
-            `
-          : ''}
+          ? content
+          : nothing}
       </nile-dropdown>
     `;
   }  
   
+  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>
+    `
+  }
+
+  getContent():TemplateResult{
+    return html`
+      <nile-menu id="content-menu" @nile-select=${this.handleSelect} exportparts="menu__items-wrapper:options__wrapper">
+        ${this.menuItems.map((item: any)  => this.getItemRenderFunction(item))}
+      </nile-menu>`
+  }
+
+  getItemRenderFunction(item:any):TemplateResult{
+    const value=this.renderItemFunction(item)
+    return html`
+      <nile-menu-item value=${value}>
+        ${value}
+      </nile-menu-item>
+    `;
+  }
+
   private handleSelect(event: CustomEvent) {
     this.value = event.detail.value;
     this.emit('nile-complete', { value: event.detail.value });

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

@@ -72,7 +72,11 @@ export class NileChip extends NileElement {
   /** Disables the input. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
-  // Auto-complete options
+  // AUTO-COMPLETE-OPTIONS
+
+  /** Virtual scroll in  dropdown options. */
+  @property({ type: Boolean }) enableVirtualScroll = false;
+
   @property({ type: Array }) autoCompleteOptions: any[] = [];
 
   @property({ type: Array }) filteredAutoCompleteOptions: any[] = [];
@@ -186,6 +190,7 @@ export class NileChip extends NileElement {
           )}
           <div class="nile-chip__auto-complete">
             <nile-auto-complete
+              .enableVirtualScroll=${this.enableVirtualScroll}
               .allMenuItems=${this.filteredAutoCompleteOptions}
               .filterFunction=${this.filterFunction}
               .renderItemFunction=${this.renderItemFunction}

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

@@ -58,6 +58,11 @@ export default css`
     line-height: 18px;
   }
 
+  .nile-slide--disabled .nile-slide-toggle__label,
+  .nile-slide--disabled .nile-slide-toggle__sublabel{
+    color: var(--nile-colors-dark-500);
+  }
+
   .nile-slide-toggle__switch input {
     opacity: 0;
     width: 0;

package/vscode-html-custom-data.json

@@ -62,13 +62,18 @@
     },
     {
       "name": "nile-auto-complete",
-      "description": "Attributes:\n\n  * `isDropdownOpen` {`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  * `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  * `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`} - ",
       "attributes": [
         {
           "name": "isDropdownOpen",
           "description": "`isDropdownOpen` {`boolean`} - \n\nProperty: isDropdownOpen\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "enableVirtualScroll",
+          "description": "`enableVirtualScroll` {`boolean`} - \n\nProperty: enableVirtualScroll\n\nDefault: false",
+          "valueSet": "v"
+        },
         {
           "name": "openOnFocus",
           "description": "`openOnFocus` {`boolean`} - \n\nProperty: openOnFocus\n\nDefault: false",
@@ -696,7 +701,7 @@
     },
     {
       "name": "nile-chip",
-      "description": "Attributes:\n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `noDuplicates` {`boolean`} - Disables the duplicate entries.\n\n  * `label` {`string`} - The input's label. If you need to display HTML, use the `label` slot instead.\n\n  * `acceptUserInput` {`boolean`} - Adds a clear button when the input is not empty.\n\n  * `clearable` {`boolean`} - Adds a clear button when the input is not empty.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the input is empty.\n\n  * `readonly` {`boolean`} - Makes the input readonly.\n\n  * `disabled` {`boolean`} - Disables the input.\n\n  * `autoCompleteOptions` {`any[]`} - \n\n  * `filteredAutoCompleteOptions` {`any[]`} - \n\n  * `value` {`any[]`} - \n\n  * `noWrap` {`boolean`} - \n\n  * `loading` {`boolean`} - \n\n  * `errorIndexes` {`number[]`} - \n\n  * `help-text` {`string`} - \n\n  * `error-message` {`string`} - \n\nProperties:\n\n  * `hasSlotController` - \n\n  * `tags` {`string[]`} - \n\n  * `inputValue` {`string`} - \n\n  * `isDropdownOpen` {`boolean`} - \n\n  * `autoComplete` - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `noDuplicates` {`boolean`} - Disables the duplicate entries.\n\n  * `label` {`string`} - The input's label. If you need to display HTML, use the `label` slot instead.\n\n  * `acceptUserInput` {`boolean`} - Adds a clear button when the input is not empty.\n\n  * `clearable` {`boolean`} - Adds a clear button when the input is not empty.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the input is empty.\n\n  * `readonly` {`boolean`} - Makes the input readonly.\n\n  * `disabled` {`boolean`} - Disables the input.\n\n  * `autoCompleteOptions` {`any[]`} - \n\n  * `filteredAutoCompleteOptions` {`any[]`} - \n\n  * `value` {`any[]`} - \n\n  * `noWrap` {`boolean`} - \n\n  * `loading` {`boolean`} - \n\n  * `errorIndexes` {`number[]`} - \n\n  * `helpText` {`string`} - \n\n  * `errorMessage` {`string`} - \n\n  * `filterFunction` - \n\n  * `renderItemFunction` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Attributes:\n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `noDuplicates` {`boolean`} - Disables the duplicate entries.\n\n  * `label` {`string`} - The input's label. If you need to display HTML, use the `label` slot instead.\n\n  * `acceptUserInput` {`boolean`} - Adds a clear button when the input is not empty.\n\n  * `clearable` {`boolean`} - Adds a clear button when the input is not empty.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the input is empty.\n\n  * `readonly` {`boolean`} - Makes the input readonly.\n\n  * `disabled` {`boolean`} - Disables the input.\n\n  * `enableVirtualScroll` {`boolean`} - Virtual scroll in  dropdown options.\n\n  * `autoCompleteOptions` {`any[]`} - \n\n  * `filteredAutoCompleteOptions` {`any[]`} - \n\n  * `value` {`any[]`} - \n\n  * `noWrap` {`boolean`} - \n\n  * `loading` {`boolean`} - \n\n  * `errorIndexes` {`number[]`} - \n\n  * `help-text` {`string`} - \n\n  * `error-message` {`string`} - \n\nProperties:\n\n  * `hasSlotController` - \n\n  * `tags` {`string[]`} - \n\n  * `inputValue` {`string`} - \n\n  * `isDropdownOpen` {`boolean`} - \n\n  * `autoComplete` - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `noDuplicates` {`boolean`} - Disables the duplicate entries.\n\n  * `label` {`string`} - The input's label. If you need to display HTML, use the `label` slot instead.\n\n  * `acceptUserInput` {`boolean`} - Adds a clear button when the input is not empty.\n\n  * `clearable` {`boolean`} - Adds a clear button when the input is not empty.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the input is empty.\n\n  * `readonly` {`boolean`} - Makes the input readonly.\n\n  * `disabled` {`boolean`} - Disables the input.\n\n  * `enableVirtualScroll` {`boolean`} - Virtual scroll in  dropdown options.\n\n  * `autoCompleteOptions` {`any[]`} - \n\n  * `filteredAutoCompleteOptions` {`any[]`} - \n\n  * `value` {`any[]`} - \n\n  * `noWrap` {`boolean`} - \n\n  * `loading` {`boolean`} - \n\n  * `errorIndexes` {`number[]`} - \n\n  * `helpText` {`string`} - \n\n  * `errorMessage` {`string`} - \n\n  * `filterFunction` - \n\n  * `renderItemFunction` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "warning",
@@ -746,6 +751,11 @@
           "description": "`disabled` {`boolean`} - Disables the input.\n\nProperty: disabled\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "enableVirtualScroll",
+          "description": "`enableVirtualScroll` {`boolean`} - Virtual scroll in  dropdown options.\n\nProperty: enableVirtualScroll\n\nDefault: false",
+          "valueSet": "v"
+        },
         {
           "name": "autoCompleteOptions",
           "description": "`autoCompleteOptions` {`any[]`} - \n\nProperty: autoCompleteOptions\n\nDefault: "