@aquera/nile-elements 0.1.47-beta-1.5 → 0.1.47-beta-2.1

package/README.md

@@ -77,82 +77,22 @@ To run a local development server that serves the basic demo located in `demo/in
 
 ## Release Notes
 
-In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
+In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects. 
 
-#### Version 0.1.47-beta-1.5
-- Nile CDN Changes
-- Dependency Nile 0.3.70-beta-1.5
+#### Version 0.1.47-beta-2.1
+- Nile Virtual Select: virtual select component testing
 
-#### Version 0.1.47-beta-1.4
-- Nile Icon Changes: Icon SVG Fixes
-- Dependency Nile 0.3.70-beta-1.4
+#### Version 0.1.47-beta-1.3
+- Nile Virtual Select: virtual select component testing
 
-#### Version 0.1.47-beta-1.2
-- Nile Icon Changes: Icon SVG Fixes
-- Dependency Nile 0.3.70-beta-1.2
-
-#### Version 0.1.47-beta-1.1
-- Nile Icon Changes: Icon SVG Fixes
-- Dependency Nile 0.3.70-beta-1.1
-
-#### Version 0.1.46-beta-1.8
-- Nile Tokenization: Admin UI defect fixes
-- Dependency Nile 0.3.69-beta-1.6
-
-#### Version 0.1.46-beta-1.4
-- Nile Tokenization: Admin UI defect fixes
-- Dependency Nile 0.3.69-beta-1.4
-
-#### Version 0.1.46-beta-1.3
-- Nile Tokenization: Admin UI defect fixes
-- Dependency Nile 0.3.69-beta-1.3
-
-#### Version 0.1.46-beta-1.1
-- Nile Tokenization: Admin UI defect fixes
-- Dependency Nile 0.3.69-beta-1.2
-
-#### Version 0.1.46-beta-1.0
-- Nile Tokenization: Admin UI defect fixes
-- Dependency Nile 0.3.69-beta-1.0
-
-#### Version 0.1.46
-- Nile Icon Component: Bug Fixes for Nile Icon. [UIF-852].
-- Dependency Nile 0.3.69
+#### Version 0.1.46-beta-2.3
+- Nile Virtual Select: virtual select component testing
+- Dependency Nile 0.3.69-beta-2.0
 
 #### Version 0.1.45
 - Nile Icon Component: Bug Fixes for Nile Info Icon.
 - Dependency Nile 0.3.68
 
-#### Version 0.1.44-beta-2.1
-- Nile Tokenization: Admin UI defect fixes
-- Dependency Nile 0.3.68-beta-1.9
-
-#### Version 0.1.44-beta-2.0
-- Nile Tokenization: Admin UI defect fixes
-- Dependency Nile 0.3.68-beta-1.8
-
-#### Version 0.1.44-beta-1.8
-- Nile Tokenization: Admin UI defect fixes
-- Dependency Nile 0.3.68-beta-1.6
-
-#### Version 0.1.44-beta-1.6
-- Nile Tokenization: Admin UI defect fixes & pagination token changes
-- Dependency Nile 0.3.68-beta-1.4
-
-#### Version 0.1.44-beta-1.5
-- Nile Tokenization: Admin UI defect fixes
-- Dependency Nile 0.3.68-beta-1.3
-
-#### Version 0.1.44-beta-1.4
-- Nile Tokenization: Admin UI defect fixes
-- Dependency Nile 0.3.68-beta-1.2
-
-#### Version 0.1.44-beta-1.3
-- Nile Tokenization: Admin UI defect fixes
-
-#### Version 0.1.44-beta-1.2
-- Nile Tokenization: Admin UI defect fixes
-- Dependency Nile 0.3.68-beta-1.1
 #### Version 0.1.44
 - Nile Tab Component: Bug Fixes for Nile-Tab [UIF-817]
 
@@ -165,56 +105,6 @@ In this section, you can find the updates for each release of `nile-elements`. I
 #### Version 0.1.41
 - Nile Pagination Component: Bug Fixes for Pagination Component [UIF-736]
 
-#### Version 0.1.40-beta-2.5
-- Nile Tokenization: Admin UI defect fixes
-
-#### Version 0.1.40-beta-2.1
-- Nile Tokenization: Admin UI defect fixes
-
-#### Version 0.1.40-beta-1.6
-- Nile Tokenization: Admin UI defect fixes
-
-#### Version 0.1.40-beta-1.2
-- Nile Tokenization: Admin UI defect fixes and new icons added
-- Dependency Nile 0.3.66-beta-1.2
-
-#### Version 0.1.38-beta-1.4
-- Nile Tokenization: New Design Tokens added
-- Dependency Nile 0.3.64-beta-1.2
-
-#### Version 0.1.35-beta-1.2
-- Nile Select: Help text property updated
-
-#### Version 0.1.35-beta-1.1
-- Nile Filter Chip : New Component
-- Dependency Nile 0.3.61-beta-1.1
-
-#### Version 0.1.35-beta-1.0
-- Nile Code Editor: Bugfix for autocomplete dialog
-
-#### Version 0.1.34-beta-1.1
-- Nile Code Editor: Bugfix for search section one cmd+f
-
-#### Version 0.1.34-beta-1.0
-- Nile Error Message: Ux updated & maxHeight, maxWidth properties added
-
-
-#### Version 0.1.33-beta-1.1
-- Nile Menu: Property added allowSpaceKey
-
-#### Version 0.1.33-beta-1.0
-- Nile Menu: Bugfix for using space key in nile input inside nile-menu
-
-#### Version 0.1.32-beta-1.5
-- Nile Tokens: Spacing tokens updated
-- Dependency Nile 0.3.61-beta-1.0
-
-#### Version 0.1.32-beta-1.4
--  Nile Tooltip: Bug Fixes
-
-#### Version 0.1.32-beta-1.3
-- Nile Input: Safari's AutoFill icon defect fix
-- 
 #### Version 0.1.40
 - Nile Pagination Component: Component Published for v1 for [UIF-736]
 #### Version 0.1.39

package/demo/filenames.txt

@@ -1 +1 @@
-api,accessreview,action,address,agent,aggregation,alert,allapplication,allsearch,applications-2,apply-filter,apps,aquera,aquerasupport,array,arrayofobject,arrow,arrowdown,arrowdropdown,arrowdropup,arrowleft,arrowright,arrowup,attribute-map-analysis-icon,attributemap,block,bluedot,boolean,bulk-sync,button-loading-black,button-loading-blue-animated,button-loading-blue,button-loading-white,calendar,cases,certification,chevron-up,close,collapse-1,collapse,color,compact,compare-tiles,component-menu,component,componenttext,condition,conditions,connect,connectivitymap,connectorrightarrow,copy,cor-analysis,correlation,create,createuser,dashboard,data-type-array,data-type-boolean,data-type-json,data-type-null,data-type-number,data-type-string,data-type-unknown,database,databaseview,default-cursor,default,delegate,delete,deligateduser,directory,disabled,dowhileloop,done-02,done,dontmap,donut,doublearrowleft,doublearrowright,download,drag,edit-write,else,email,enable,entities,entitlement,error,escalate,exactmatch,execute,expand-2,expand,eye,eyeclosed,featured-icon,file-type-icon,filter-1,filter,firewallagent,firewall,flow,flowmap-orchestration,flowmap-agent,flowmap-application,flowmap-colorpalatte,flowmap-firewall-agent,flowmap-firewall,flowmap-gateway,flowmap-undo,flowmap-workflow,flowmap,folder,foreach,frequency,fullscreen,fullscreenexit,fullscreenshrink,gateway,general,generationphase,global-search,goto,greendot,greydot,greylightdot,group-analysis-icon,group,groupby,groups,guide,handtool,header-child-workflow,header-flows,header-tasks,helpsupport,help,helpandsupport,history,identitygraph,identityledger,ifelse,image,immutable,info-icon,info,inprogress,js,kill,leftpointarrow,line,link,list-attribute,loader,loading,loading2,lock,log-info,log,logo-white,logout,logs,loop,manage,map,mapcreate,mapdont,mapupdate,maponcreate,maponupdate,maximize,menu,minus,moveleft,moveright,mute,nomatch,note,notification,notificationadd,notificationadded,null,number,numberinput,numbers,object,options,orchestration,organization,other,otherdetails,override,palletemenu,partner,partners,pause,pencil,peopletask,persistent-variable,persistentdata,pin,play,plus,pluscircle,plussquare,policy,potentialmatch,poweron,predefined,preview,privilage,privilege,privilegeobject,process,professionaldetails,question,radio,radioactive,radiodone,read,readexpression,readonlyuser,readuser,readonly,reddot,redo-02,redo,reminder,resize,resource,revocation-cycle,role,run,save,schedule,schema,script,search,section,select,selectapplication,selectattributes,send,sendemail,sendescalation,sendreminder,settings,share,smartcode,sort,sortascending,sortdescending,sortdown,sortup,stop,string,stringinput,stringletters,support,sync,table,tag,test,text-02,text,textarea-expander,thumbsdown,thumbsup,thumsup,tick,timeupdate,timezone,trigger,undo-02,undo,unmute,updown,update,upgrade,upload,user-group,user,useractive,useradd,useraddgroup,userfind,userimport,userimportgroup,usermixed,userremove,userremovegroup,userupdate,users,validationexpression,variable-new,variable-global,variable-local,variable,video,view,virtualserver,visibility,visibilityoff,wait,warning,whileloop,workflow-application,workflow-text,workflow,writeexpression,access-request,activity-logs,admin-users,alert-circle,analytics,array-loop,array-of-boolean,array-of-integer,array-of-string,arrow-narrow-left,automation-details,back,bar-and-line-chart,bar-chart-square-02,bar-chart,bargraph,book-closed,border_all,box,bubble-chart,cell-loader,check-circle,check-done-01,check-done-02,chevron-left-double,clock-check,clock-rewind,clock,cloud-01,code-generator,column-02,columns-03,combo1,comment,compare,components-icon,copy-06,cost-analytics,data-insight,dataflow-03,dataflow-04,dock-to-right,document-new,dotpoints-02,dots-grid,downgrade,expand-03,expand-06,eye-off,file-06,file-check-02,file-shield-01,file-shield-02,file,fingerprint-03,full-union,funnel-02,funnel,gauge,globe-03,globe,graph,graphedit,grid-01,guide-01,headphones-01,helpers,ifelsenew,inner-union,insert-at-cursor,integer,intersection,key-performance-indicator,keyboard-01,laptop-01,layers-three-02,layout-alt-02,layout-alt-03,left-join,left-union,life-buoy-01,list,mapper,marker-pin-01,message-notification-square,monitor-01,mouse,move-application,my-integration,new-calendar,ng-dropdown,ng-activity,ng-align-center,ng-annotation-x,ng-arrow-down,ng-arrow-narrow-down,ng-arrow-narrow-left,ng-arrow-up,ng-bar-chart-12,ng-bell-01,ng-bell-ringing-04,ng-bold-01,ng-calendar-plus-02,ng-calendar,ng-check-circle,ng-check-square-broken,ng-chevron-down,ng-chevron-left,ng-chevron-right,ng-chevron-selector-vertical,ng-chevron-up-double,ng-chevron-up,ng-copy-03,ng-dots-grid,ng-dots-vertical,ng-download-01,ng-edit-02,ng-edit-05,ng-expand-06,ng-file-02,ng-file-check-02,ng-file-question-03,ng-filter-lines,ng-grid-01,ng-help-circle,ng-image-user-left,ng-info-circle,ng-italic-01,ng-layers-three-01,ng-list,ng-log-out-01,ng-mail-01,ng-mail-04,ng-menu-05,ng-message-text-square-01,ng-minimize-02,ng-plus,ng-refresh-cw-02,ng-rocket-02,ng-search-lg,ng-send-01,ng-settings-01,ng-share-04,ng-share-06,ng-stars-02,ng-trash-01,ng-trash-03,ng-trend-up-01,ng-underline-01,ng-upload-01,ng-upload-cloud-02,ng-user-01,ng-user-check-02-1,ng-user-check-02,ng-user-plus-02,ng-user-right-01,ng-users-01,ng-x-close,ng-x-square,nightingale-chart,nlp,operators,orchestration-solid,paperclip,phone,pie,play_pause,printer,priority-high,priority-highest,priority-low,priority-medium,radar,refresh,resource_analysis,resource_graph,restart_alt,right-join,right-union,rocket-02,sankey,savings,scatter-plot,search-steps-icon,select-02,semi-circle-donut-chart,server-03,settings-02,shield-01,sort_ascending,sort_descending,stacked-bar-chart,step_into,step_out,step_over,storybook,swap,switch,transaction_monitor,trend-up-02,union,users-plus,users-up,virtualservergroup,warning-01
+api,accessreview,action,address,agent,aggregation,alert,allapplication,allsearch,applications-2,apply-filter,apps,aquera,aquerasupport,array,arrayofobject,arrow,arrowdown,arrowdropdown,arrowdropup,arrowleft,arrowright,arrowup,attribute-map-analysis-icon,attributemap,block,bluedot,boolean,bulk-sync,button-loading-black,button-loading-blue-animated,button-loading-blue,button-loading-white,calendar,cases,certification,chevron-up,close,collapse-1,collapse,color,compact,compare-tiles,component-menu,component,componenttext,condition,conditions,connect,connectivitymap,connectorrightarrow,copy,cor-analysis,correlation,create,createuser,dashboard,data-type-array,data-type-boolean,data-type-json,data-type-null,data-type-number,data-type-string,data-type-unknown,database,databaseview,default-cursor,default,delegate,delete,deligateduser,directory,disabled,dowhileloop,done-02,done,dontmap,donut,doublearrowleft,doublearrowright,download,drag,edit-write,else,email,enable,entities,entitlement,error,escalate,exactmatch,execute,expand-2,expand,eye,eyeclosed,featured-icon,file-type-icon,filter-1,filter,firewallagent,firewall,flow,flowmap-orchestration,flowmap-agent,flowmap-application,flowmap-colorpalatte,flowmap-firewall-agent,flowmap-firewall,flowmap-gateway,flowmap-undo,flowmap-workflow,flowmap,folder,foreach,frequency,fullscreen,fullscreenexit,fullscreenshrink,gateway,general,generationphase,global-search,goto,greendot,greydot,greylightdot,group-analysis-icon,group,groupby,groups,guide,handtool,header-child-workflow,header-flows,header-tasks,helpsupport,help,helpandsupport,history,identitygraph,identityledger,ifelse,image,immutable,info-icon,info,inprogress,js,kill,leftpointarrow,line,link,list-attribute,loader,loading,loading2,lock,log-info,log,logo-white,logout,logs,loop,manage,map,mapcreate,mapdont,mapupdate,maponcreate,maponupdate,maximize,menu,minus,moveleft,moveright,mute,nomatch,note,notification,notificationadd,notificationadded,null,number,numberinput,numbers,object,options,orchestration,organization,other,otherdetails,override,palletemenu,partner,partners,pause,pencil,peopletask,persistent-variable,persistentdata,pin,play,plus,pluscircle,plussquare,policy,potentialmatch,poweron,predefined,preview,privilage,privilege,privilegeobject,process,professionaldetails,question,radio,radioactive,radiodone,read,readexpression,readonlyuser,readuser,readonly,reddot,redo-02,redo,reminder,resize,resource,revocation-cycle,role,run,save,schedule,schema,script,search,section,select,selectapplication,selectattributes,send,sendemail,sendescalation,sendreminder,settings,share,smartcode,sort,sortascending,sortdescending,sortdown,sortup,stop,string,stringinput,stringletters,support,sync,table,tag,test,text-02,text,textarea-expander,thumbsdown,thumbsup,thumsup,tick,timeupdate,timezone,trigger,undo-02,undo,unmute,updown,update,upgrade,upload,user-group,user,useractive,useradd,useraddgroup,userfind,userimport,userimportgroup,usermixed,userremove,userremovegroup,userupdate,users,validationexpression,variable-new,variable-global,variable-local,variable,video,view,virtualserver,visibility,visibilityoff,wait,warning,whileloop,workflow-application,workflow-text,workflow,writeexpression,access-request,activity-logs,admin-users,alert-circle,analytics,array-loop,array-of-boolean,array-of-integer,array-of-string,arrow-narrow-left,automation-details,back,bar-and-line-chart,bar-chart-square-02,bar-chart,bargraph,book-closed,border_all,box,bubble-chart,cell-loader,check-circle,check-done-01,check-done-02,chevron-left-double,clock-check,clock-rewind,clock,cloud-01,code-generator,column-02,columns-03,combo1,comment,compare,components-icon,copy-06,cost-analytics,data-insight,dataflow-03,dataflow-04,dock-to-right,document-new,dotpoints-02,dots-grid,downgrade,expand-03,expand-06,eye-off,file-06,file-check-02,file-shield-01,file-shield-02,file,fingerprint-03,full-union,funnel-02,funnel,gauge,globe-03,globe,graph,graphedit,grid-01,guide-01,headphones-01,helpers,ifelsenew,inner-union,insert-at-cursor,integer,intersection,key-performance-indicator,keyboard-01,laptop-01,layers-three-02,layout-alt-02,layout-alt-03,left-join,left-union,life-buoy-01,list,mapper,marker-pin-01,message-notification-square,monitor-01,mouse,move-application,my-integration,new-calendar,nightingale-chart,nlp,operators,orchestration-solid,paperclip,phone,pie,play_pause,printer,priority-high,priority-highest,priority-low,priority-medium,radar,refresh,resource_analysis,resource_graph,restart_alt,right-join,right-union,rocket-02,sankey,savings,scatter-plot,search-steps-icon,select-02,semi-circle-donut-chart,server-03,settings-02,shield-01,sort_ascending,sort_descending,stacked-bar-chart,step_into,step_out,step_over,storybook,swap,switch,transaction_monitor,trend-up-02,union,users-plus,users-up,virtualservergroup,warning-01

package/demo/index.css

@@ -1,14 +1,8 @@
 body {
-  font-family: var(--ng-font-family-body);
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  height: 100vh;
+  background: #fafafa;
+  font-family: colfax-regular, sans-serif;
+  margin:0px;
 }
-
-
- 
-
 #demo {
   max-width: 40ch;
   padding: 48px;
@@ -43,7 +37,7 @@ body {
   width:100%;
   word-wrap: break-word;
 }
-/* 
+
 @font-face {
   font-family: 'colfax-regular';
   src: url('https://use.typekit.net/af/bac079/00000000000000003b9acde4/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3')
@@ -68,7 +62,7 @@ body {
   font-display: auto;
   font-style: normal;
   font-weight: bold;
-} */
+}
 
 .stack {
   display: flex;
@@ -121,99 +115,4 @@ nile-drawer {
 
 .body {
   display: flex;
-}
-
-
-nile-input:not(:defined),
-nile-button:not(:defined),
-nile-icon:not(:defined),
-nile-icon-button:not(:defined),
-nile-tree:not(:defined),
-nile-table:not(:defined),
-nile-sidebar-menu:not(:defined),
-nile-filter-chip:not(:defined),
-nile-radio-group:not(:defined),
-nile-popover:not(:defined),
-nile-option:not(:defined),
-nile-sidebar-wrapper:not(:defined),
-nile-card:not(:defined),
-nile-table-body:not(:defined),
-nile-list-item:not(:defined),
-nile-tab-group:not(:defined),
-nile-vertical-stepper-item:not(:defined),
-nile-tab:not(:defined),
-nile-content-editor:not(:defined),
-nile-tab-panel:not(:defined),
-nile-drawer:not(:defined),
-nile-error-notification:not(:defined),
-nile-menu-item:not(:defined),
-nile-divider:not(:defined),
-nile-date-picker:not(:defined),
-nile-footer:not(:defined),
-nile-chip:not(:defined),
-nile-slide-toggle:not(:defined),
-nile-progress-bar:not(:defined),
-nile-auto-complete:not(:defined),
-nile-tree-item:not(:defined),
-nile-form-help-text:not(:defined),
-nile-sidebar-menu-items:not(:defined),
-nile-section-message:not(:defined),
-nile-table-row:not(:defined),
-nile-badge:not(:defined),
-nile-file-upload:not(:defined),
-nile-textarea:not(:defined),
-nile-checkbox:not(:defined),
-nile-page-header:not(:defined),
-nile-file-preview:not(:defined),
-nile-tooltip:not(:defined),
-nile-inline-edit:not(:defined),
-nile-circular-progressbar:not(:defined),
-nile-breadcrumb:not(:defined),
-nile-sidebar:not(:defined),
-nile-table-header-item:not(:defined),
-nile-popup:not(:defined),
-nile-link:not(:defined),
-nile-button-toggle-group:not(:defined),
-nile-stepper-item:not(:defined),
-nile-select:not(:defined),
-nile-button-filter:not(:defined),
-nile-empty-state:not(:defined),
-nile-tag:not(:defined),
-nile-table-cell-item:not(:defined),
-nile-radio:not(:defined),
-nile-breadcrumb-item:not(:defined),
-nile-list:not(:defined),
-nile-menu:not(:defined),
-nile-title:not(:defined),
-nile-heading:not(:defined),
-nile-code-editor:not(:defined),
-nile-toast:not(:defined),
-nile-toolbar:not(:defined),
-nile-calendar:not(:defined),
-nile-accordion:not(:defined),
-nile-form-error-message:not(:defined),
-nile-avatar:not(:defined),
-nile-switcher:not(:defined),
-nile-spinner:not(:defined),
-nile-form-group:not(:defined),
-nile-hero:not(:defined),
-nile-dialog:not(:defined),
-nile-split-panel:not(:defined),
-nile-error-message:not(:defined),
-nile-hero-header:not(:defined),
-nile-dropdown:not(:defined),
-nile-format-date:not(:defined),
-nile-loader:not(:defined),
-nile-button-toggle:not(:defined),
-nile-stepper:not(:defined) {
-  opacity: 0;
-}
-
-
-
-
-
-
-
-
-
+}

package/demo/index.html

@@ -2,20 +2,78 @@
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />
-    <link rel="stylesheet" href="nxtgen.css" id="stylesheet" />
-    <!-- <link rel="stylesheet" href="variables.css" id="stylesheet" /> -->
+    <link rel="stylesheet" href="variables_v2.css" id="stylesheet" />
     <link rel="stylesheet" href="index.css" />
-
-    <style>
-    </style>
     <script type="module" src="index.js"></script>
   </head>
+  <style>
+    .component-viewer {
+      margin: 200px;
+    }
+  </style>
+
   <body>
-    <nile-tag removable>
-      Info
-    </nile-tag>
-    <nile-icon name="ng-file-question-03" method="stroke"></nile-icon>
-     <nile-icon name="user"></nile-icon>
-     <nile-button>Button CTA</nile-button>
+    <div class="component-viewer">
+      <div>Default Select</div>
+      <nile-select placeholder="Please select">
+        <nile-option value="1"> One </nile-option>
+        <nile-option value="2"> Two </nile-option>
+        <nile-option value="3"> Three </nile-option>
+        <nile-option value="4"> Four </nile-option>
+        <nile-option value="5"> Five </nile-option>
+        <nile-option value="6"> Six </nile-option>
+        <nile-option value="7"> Seven </nile-option>
+        <nile-option value="8"> Eight </nile-option>
+        <nile-option value="9"> Nine </nile-option>
+        <nile-option value="10"> Ten </nile-option>
+        <nile-option value="11"> Eleven </nile-option>
+        <nile-option value="12"> Tweleve </nile-option>
+      </nile-select>
+      <br />
+      <nile-divider></nile-divider>
+      <br />
+      <div>Multi Select</div>
+      <nile-select multiple placeholder="Select multiple options">
+        <nile-option value="apple">Apple</nile-option>
+        <nile-option value="banana">Banana</nile-option>
+        <nile-option value="cherry">Cherry</nile-option>
+        <nile-option value="date">Date</nile-option>
+        <nile-option value="elderberry">Elderberry</nile-option>
+      </nile-select>
+      <br />
+      <nile-divider></nile-divider>
+      <br />
+      <div>Virtual Select</div>
+      <nile-select
+        class="virtual-scroll"
+        placeholder="Please Select"
+        searchEnabled="true"
+        enableVirtualScroll="true"
+      >
+      </nile-select>
+
+      <nile-select
+        multiple
+        class="virtual-scroll-multiple"
+        placeholder="Please Select"
+        searchEnabled="true"
+        enableVirtualScroll="true"
+      >
+      </nile-select>
+    </div>
+    <script>
+      const options = Array.from({ length: 1000 }, (_, i) => ({
+        value: `option-${i + 1}`,
+        label: `Option ${i + 1}`,
+      }));
+      const e = document.querySelector('nile-select.virtual-scroll');
+      e.renderItemFunction = item => item.label;
+      e.data = options;
+
+       const me = document.querySelector('nile-select.virtual-scroll-multiple');
+      me.renderItemFunction = item => item.label;
+      me.data = options;
+      me.value = ['option-2', 'option-4'];
+    </script>
   </body>
-</html>
+</html>