@aquera/nile-elements 0.1.46-beta-1.2 → 0.1.46-beta-1.4

package/README.md

@@ -77,12 +77,58 @@ 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.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.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]
 
@@ -95,6 +141,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-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

@@ -1,216 +1,21 @@
 <!DOCTYPE html>
 <html lang="en-GB">
-
-<head>
-  <meta charset="utf-8" />
-  <link rel="stylesheet" href="variables_v2.css" id="stylesheet" />
-  <link rel="stylesheet" href="index.css" />
-  <script type="module" src="index.js"></script>
-</head>
-<style>
-  .flex-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 30px;
-    padding: 0;
-    margin: 0;
-    border: 1px solid silver;
-    height: 900px;
-  }
-
-  nile-button {
-    flex: 0 0 auto;
-    height: 38px;
-  }
-</style>
-
-<body>
-    <div style="padding: 30px;"> 
-        <nile-progress-bar value="80"></nile-progress-bar>
-    </div>
-    <div style="padding: 30px;">
-        <nile-circular-progressbar content="text"></nile-circular-progressbar>
-<nile-circular-progressbar value="80" size="60"></nile-circular-progressbar>
-<nile-circular-progressbar></nile-circular-progressbar>
-<nile-circular-progressbar value="30" content=" "></nile-circular-progressbar>
-<nile-icon name=warning color="red"></nile-icon>
-<nile-icon name="analytics" color="red"></nile-icon>
-<nile-icon name="arrow" color="red"></nile-icon>
-<nile-icon name="arrowdown" color="red"></nile-icon>
-<nile-icon name="arrowdropup" color="red"></nile-icon>
-<nile-icon name="arrowdropdown" color="red"></nile-icon>
-<nile-icon name="arrowleft" color="red"></nile-icon>
-<nile-icon name="arrowright" color="red"></nile-icon>
-<nile-icon name="back" color="red"></nile-icon>
-<nile-icon name="bargraph" color="red"></nile-icon>
-<nile-icon name="bell" color="red"></nile-icon>
-<nile-icon name="button-loading-blue-animated" color="red"></nile-icon>
-<nile-icon name="calendar" color="red"></nile-icon>
-<nile-icon name="cancel" color="red"></nile-icon>
-<nile-icon name="cell-loader" color="red"></nile-icon>
-<nile-icon name="chevron-down" color="red"></nile-icon>
-<nile-icon name="chevron-up" color="red"></nile-icon>
-<nile-icon name="close" color="red"></nile-icon>
-<nile-icon name="component-menu" color="red"></nile-icon>
-<nile-icon name="copy" color="red"></nile-icon>
-<nile-icon name="data-insight" color="red"></nile-icon>
-<nile-icon name="database" color="red"></nile-icon>
-<nile-icon name="delete" color="red"></nile-icon>
-<nile-icon name="document" color="red"></nile-icon>
-<nile-icon name="done" color="red"></nile-icon>
-<nile-icon name="done-02" color="red"></nile-icon>
-<nile-icon name="doublearrowleft" color="red"></nile-icon>
-<nile-icon name="doublearrowright" color="red"></nile-icon>
-<nile-icon name="drag" color="red"></nile-icon>
-<nile-icon name="edit-pencil" color="red"></nile-icon>
-<nile-icon name="every" color="red"></nile-icon>
-<nile-icon name="eye" color="red"></nile-icon>
-<nile-icon name="file-06" color="red"></nile-icon>
-<nile-icon name="file-check-02" color="red"></nile-icon>
-<nile-icon name="filter" color="red" method="stroke"></nile-icon>
-<nile-icon name="flowmap-application" color="red"></nile-icon>
-<nile-icon name="fullscreen" color="red"></nile-icon>
-<nile-icon name="fullscreenexit" color="red"></nile-icon>
-<nile-icon name="fullscreenshrink" color="red"></nile-icon>
-<nile-icon name="funnel" color="red"></nile-icon>
-<nile-icon name="info" color="red"></nile-icon>
-<nile-icon name="info2" color="red"></nile-icon>
-<nile-icon name="insert-at-cursor" color="red"></nile-icon>
-<nile-icon name="integer" color="red"></nile-icon>
-<nile-icon name="kill" color="red"></nile-icon>
-<nile-icon name="leftarrow" color="red"></nile-icon>
-<nile-icon name="loader" color="red"></nile-icon>
-<nile-icon name="loading" color="red"></nile-icon>
-<nile-icon name="lock" color="red"></nile-icon>
-<nile-icon name="menu" color="red"></nile-icon>
-<nile-icon name="minus" color="red"></nile-icon>
-<nile-icon name="options" color="red"></nile-icon>
-<nile-icon name="paperclip" color="red" method="stroke"></nile-icon>
-<nile-icon name="persistentdata" color="red"></nile-icon>
-<nile-icon name="pencil" color="red"></nile-icon>
-<nile-icon name="pin" color="red"></nile-icon>
-<nile-icon name="plus" color="red"></nile-icon>
-<nile-icon name="preview" color="red"></nile-icon>
-<nile-icon name="question" color="red"></nile-icon>
-<nile-icon name="readuser" color="red"></nile-icon>
-<nile-icon name="redo" color="red"></nile-icon>
-<nile-icon name="refresh" color="red"></nile-icon>
-<nile-icon name="reminder" color="red"></nile-icon>
-<nile-icon name="resource" color="red"></nile-icon>
-<nile-icon name="rightarrow" color="red"></nile-icon>
-<nile-icon name="run" color="red"></nile-icon>
-<nile-icon name="save" color="red"></nile-icon>
-<nile-icon name="schedule" color="red"></nile-icon>
-<nile-icon name="script" color="red"></nile-icon>
-<nile-icon name="search" color="red"></nile-icon>
-<nile-icon name="send" color="red"></nile-icon>
-<nile-icon name="sendescalation" color="red"></nile-icon>
-<nile-icon name="settings" color="red"></nile-icon>
-<nile-icon name="smartcode" color="red"></nile-icon>
-<nile-icon name="tick" color="red"></nile-icon>
-<nile-icon name="timezone" color="red"></nile-icon>
-<nile-icon name="transaction_monitor" color="red"></nile-icon>
-<nile-icon name="trash" color="red"></nile-icon>
-<nile-icon name="upload" color="red"></nile-icon>
-<nile-icon name="expand" color="red"></nile-icon>
-<nile-icon name="download-02" color="red"></nile-icon>
-<nile-icon name="expand-2" color="red"></nile-icon>
-<nile-icon name="column-02" color="red"></nile-icon>
-<nile-icon name="dropdown" color="red"></nile-icon>
-<nile-icon name="execute" color="red"></nile-icon>
-<nile-icon name="goto" color="red"></nile-icon>
-<nile-icon name="collapse" color="red"></nile-icon>
-<nile-icon name="loginfo" color="red"></nile-icon>
-<nile-icon name="logout" color="red"></nile-icon>
-<nile-icon name="undo" color="red"></nile-icon>
-<nile-icon name="approve" color="red"></nile-icon>
-<nile-icon name="thumbsdown" color="red"></nile-icon>
-<nile-icon name="warning-01" color="red"></nile-icon>
-<nile-icon name="droparrow" color="red"></nile-icon>
-<nile-icon name="condition" color="red"></nile-icon>
-<nile-icon name="helpsupport" color="red"></nile-icon>
-<nile-icon name="pluscircle" color="red"></nile-icon>
-<nile-icon name="savings" color="red"></nile-icon>
-<nile-icon name="dots-vertical" color="red"></nile-icon>
-<nile-icon name="flowmap-orchestration" color="red"></nile-icon>
-<nile-icon name="flowmap" color="red"></nile-icon>
-<nile-icon name="upgrade" color="red"></nile-icon>
-<nile-icon name="error" color="red"></nile-icon>
-<nile-icon name="info-icon" color="red"></nile-icon>
-<nile-icon name="useradd" color="red"></nile-icon>
-<nile-icon name="thumbsup" color="red"></nile-icon>
-<nile-icon name="globe" color="red"></nile-icon>
-<nile-icon name="aquerasupport" color="red"></nile-icon>
-<nile-icon name="expand-06" color="red"></nile-icon>
-<nile-icon name="table-1" color="red"></nile-icon>
-<nile-icon name="priority-high" color="red"></nile-icon>
-<nile-icon name="priority-highest" color="red"></nile-icon>
-<nile-icon name="radio" color="red"></nile-icon>
-<nile-icon name="priority-low" color="red"></nile-icon>
-<nile-icon name="priority-medium" color="red" method="stroke"></nile-icon>
-<nile-icon name="placeholder-wf" color="red"></nile-icon>
-<nile-icon name="trash-no-fill" color="red"></nile-icon>
-<nile-icon name="image" color="red"></nile-icon>
-<nile-icon name="smalltick" color="red"></nile-icon>
-<nile-icon name="themes" color="red"></nile-icon>
-<nile-icon name="create" color="red"></nile-icon>
-<nile-icon name="plus-icon" color="red"></nile-icon>
-<nile-icon name="visibility" color="red"></nile-icon>
-<nile-icon name="trigger" color="red"></nile-icon>
-<nile-icon name="not" color="red"></nile-icon>
-<nile-icon name="download-02" color="red"></nile-icon>
-<nile-icon name="expand-2" color="red"></nile-icon>
-<nile-icon name="column-02" color="red"></nile-icon>
-<nile-icon name="dropdown" color="red"></nile-icon>
-<nile-icon name="execute" color="red"></nile-icon>
-<nile-icon name="goto" color="red"></nile-icon>
-<nile-icon name="collapse" color="red"></nile-icon>
-<nile-icon name="loginfo" color="red"></nile-icon>
-<nile-icon name="logout" color="red" method="stroke"></nile-icon>
-<nile-icon name="undo" color="red"></nile-icon>
-<nile-icon name="approve" color="red"></nile-icon>
-<nile-icon name="thumbsdown" color="red"></nile-icon>
-<nile-icon name="warning-01" color="red"></nile-icon>
-<nile-icon name="droparrow" color="red"></nile-icon>
-<nile-icon name="condition" color="red"></nile-icon>
-<nile-icon name="helpsupport" color="red"></nile-icon>
-<nile-icon name="pluscircle" color="red"></nile-icon>
-<nile-icon name="savings" color="red"></nile-icon>
-<nile-icon name="dots-vertical" color="red"></nile-icon>
-<nile-icon name="flowmap-orchestration" color="red"></nile-icon>
-<nile-icon name="flowmap" color="red"></nile-icon>
-<nile-icon name="upgrade" color="red"></nile-icon>
-<nile-icon name="error" color="red"></nile-icon>
-<nile-icon name="info-icon" color="red"></nile-icon>
-<nile-icon name="useradd" color="red"></nile-icon>
-<nile-icon name="thumbsup" color="red"></nile-icon>
-<nile-icon name="globe" color="red"></nile-icon>
-<nile-icon name="aquerasupport" color="red"></nile-icon>
-<nile-icon name="expand-06" color="red" method="stroke"></nile-icon>
-<nile-icon name="table-1" color="red"></nile-icon>
-<nile-icon name="priority-high" color="red" method="stroke"></nile-icon>
-<nile-icon name="priority-highest" color="red" method="stroke"></nile-icon>
-<nile-icon name="radio" color="red"></nile-icon>
-<nile-icon name="priority-low" color="red" method="stroke"></nile-icon>
-<nile-icon name="priority-medium" color="red" method="stroke"></nile-icon>
-<nile-icon name="placeholder-wf" color="red"></nile-icon>
-<nile-icon name="trash-no-fill" color="red"></nile-icon>
-<nile-icon name="image" color="red"></nile-icon>
-<nile-icon name="smalltick" color="red"></nile-icon>
-<nile-icon name="themes" color="red"></nile-icon>
-<nile-icon name="create" color="red" method="stroke"></nile-icon>
-<nile-icon name="plus-icon" color="red"></nile-icon>
-<nile-icon name="visibility" color="red"></nile-icon>
-<nile-icon name="trigger" color="red"></nile-icon>
-<nile-icon name="not" color="red"></nile-icon>
-
-
-
-
-
-
-
-    </div>
-</body>
-
-</html>
+  <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="index.css" />
+
+    <style>
+    </style>
+    <script type="module" src="index.js"></script>
+  </head>
+  <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>
+  </body>
+</html>