@aquera/nile-elements 0.1.50-beta-1.0 → 0.1.50-beta-1.2

package/README.md

@@ -77,13 +77,63 @@ 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.50-beta-1.0
-- Nile Virtual Select: renderconfig added.
 
-#### Version 0.1.49-beta-1.4
-- Nile Virtual Select: Update from master.
+#### Version 0.1.50-beta-1.2
+- Nile Tokenization: Admin UI defect fixes
+
+#### Version 0.1.49-beta-1.3
+- Nile Tokenization: Admin UI defect fixes
+
+#### Version 0.1.49-beta-1.1
+- Fixes: Fixed bugs in Form group and Font-Weight
+
+#### Version 0.1.49-beta-1.0
+- Fixes: Fixed bugs in Button Toggle, Select, Badge and Card components
+
+#### Version 0.1.47-beta-1.6
+- Nile Card: Hover Issue Fix
+
+
+#### Version 0.1.47-beta-1.5
+- Nile CDN Changes
+- Dependency Nile 0.3.70-beta-1.5
+
+#### 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.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.49
+- Nile Chip Improvement: CSS part addition to nile-chip. [UIF-871].
 
 #### Version 0.1.48
 - Nile Select Component: Bug Fix release for not visible of checkbox. [UIF-859].
@@ -101,6 +151,36 @@ In this section, you can find the updates for each release of `nile-elements`. I
 - 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]
 
@@ -113,6 +193,56 @@ 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,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,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

package/demo/index.css

@@ -1,8 +1,14 @@
 body {
-  background: #fafafa;
-  font-family: colfax-regular, sans-serif;
-  margin:0px;
+  font-family: var(--ng-font-family-body);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100vh;
 }
+
+
+ 
+
 #demo {
   max-width: 40ch;
   padding: 48px;
@@ -37,7 +43,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')
@@ -62,7 +68,7 @@ body {
   font-display: auto;
   font-style: normal;
   font-weight: bold;
-}
+} */
 
 .stack {
   display: flex;
@@ -115,4 +121,99 @@ 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,155 +2,20 @@
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />
-    <link rel="stylesheet" href="variables_v2.css" id="stylesheet" />
+    <link rel="stylesheet" href="nxtgen.css" id="stylesheet" />
+    <!-- <link rel="stylesheet" href="variables.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>
-    <div class="component-viewer">
-      <div>Virtual Select - Basic String</div>
-      <nile-select
-        class="virtual-scroll-string"
-        placeholder="Please Select"
-        searchEnabled="true"
-        enableVirtualScroll="true"
-      >
-      </nile-select>
-      <br />
-      <div>Virtual Select - Basic Object</div>
-      <nile-select
-        class="virtual-scroll"
-        placeholder="Please Select"
-        searchEnabled="true"
-        enableVirtualScroll="true"
-      >
-      </nile-select>
-      <br />
-      <nile-select
-        multiple
-        class="virtual-scroll-multiple"
-        placeholder="Please Select"
-        searchEnabled="true"
-        enableVirtualScroll="true"
-      >
-      </nile-select>
-
-      <br />
-      <nile-divider></nile-divider>
-      <br />
-
-      <div>Virtual Select - Enhanced (renderItemConfig)</div>
-      <nile-select
-        class="virtual-scroll-enhanced"
-        placeholder="Please Select"
-        searchEnabled="true"
-        enableVirtualScroll="true"
-      >
-      </nile-select>
-      <br />
-      <nile-select
-        multiple
-        class="virtual-scroll-enhanced-multiple"
-        placeholder="Please Select"
-        searchEnabled="true"
-        enableVirtualScroll="true"
-      >
-      </nile-select>
-
-      <br />
-      <nile-divider></nile-divider>
-      <br />
-
-      <div>Virtual Select - Complex Data Structure</div>
-      <nile-select
-        class="virtual-scroll-complex"
-        placeholder="Please Select"
-        searchEnabled="true"
-        enableVirtualScroll="true"
-      >
-      </nile-select>
-    </div>
-    <script>
-
-      // Basic Array of String example
-      const optionsString = Array.from({ length: 1000 }, (_, i) => `Option ${i + 1}`);
-      const basicString = document.querySelector('nile-select.virtual-scroll-string');
-      basicString.data = optionsString;
-
-
-      // Basic data structure
-      const options = Array.from({ length: 1000 }, (_, i) => ({
-        value: `option-${i + 1}`,
-        label: `Option ${i + 1}`,
-      }));
-
-   
-      // Enhanced data structure with more fields
-      const enhancedOptions = Array.from({ length: 1000 }, (_, i) => ({
-        id: i + 1,
-        firstName: `User${i + 1}`,
-        lastName: `Name${i + 1}`,
-        email: `user${i + 1}@example.com`,
-        department: `Dept${Math.floor(i / 100) + 1}`,
-        displayName: `User${i + 1} Name${i + 1}`,
-        value: `user-${i + 1}`
-      }));
-
-      // Complex data structure
-      const complexOptions = Array.from({ length: 1000 }, (_, i) => ({
-        code: `CODE-${String(i + 1).padStart(3, '0')}`,
-        name: `Product ${i + 1}`,
-        category: `Category ${Math.floor(i / 50) + 1}`,
-        description: `This is a detailed description for product ${i + 1}`,
-        price: Math.floor(Math.random() * 1000) + 100,
-        value: `product-${i + 1}`
-      }));
-
-      // Basic example
-      const e = document.querySelector('nile-select.virtual-scroll');
-      e.data = options;
-
-      const me = document.querySelector('nile-select.virtual-scroll-multiple');
-      me.renderItemConfig = {
-        getDisplayText: (item) => item.label
-      };
-      me.data = options;
-      me.value = ['option-2', 'option-4'];
-
-      // Enhanced examples using renderItemConfig (new way)
-      const enhanced = document.querySelector('nile-select.virtual-scroll-enhanced');
-      enhanced.renderItemConfig = {
-        getDisplayText: (item) => `${item.firstName} ${item.lastName}`,
-        getValue: (item) => item.value,
-        getSearchText: (item) => `${item.firstName} ${item.lastName} ${item.email} ${item.department}`
-      };
-      enhanced.data = enhancedOptions;
-  
-      const enhancedMultiple = document.querySelector('nile-select.virtual-scroll-enhanced-multiple');
-      enhancedMultiple.renderItemConfig = {
-        getDisplayText: (item) => `${item.firstName} ${item.lastName}`,
-        getValue: (item) => item.value,
-        getSearchText: (item) => `${item.firstName} ${item.lastName} ${item.email} ${item.department}`
-      };
-      enhancedMultiple.data = enhancedOptions;
-      enhancedMultiple.value = ['user-2', 'user-4', 'user-6'];
-
-    
-      // Complex example with different display, value, and search text
-      const complex = document.querySelector('nile-select.virtual-scroll-complex');
-      complex.renderItemConfig = {
-        getDisplayText: (item) => `${item.name} (${item.code}) - $${item.price}`,
-        getValue: (item) => item.value,
-        getSearchText: (item) => `${item.name} ${item.category} ${item.description}`
-      };
-      complex.data = complexOptions;
- 
-    </script>
+    <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>
   </body>
-</html>
+</html>