@aquera/nile-elements 0.1.57-beta-1.7 → 0.1.57-beta-1.9

package/src/nile-calendar/nile-calendar.ts

@@ -76,11 +76,6 @@ export class NileCalendar extends NileElement {
 
   @state() allowedDatesLocal: NileCalendarDateRange | any = null;
 
-  @property({ type: Number }) startYear?: number;
-  @property({ type: Number }) endYear?: number;
-  
-
-
   connectedCallback() {
     super.connectedCallback();
     this.initializeValue();
@@ -112,34 +107,6 @@ export class NileCalendar extends NileElement {
     }
   }
 
-  private get monthNames() {
-    return Array.from({ length: 12 }, (_, i) =>
-      new Date(0, i).toLocaleString('default', { month: 'short' })
-    );
-  }
-
-  private get yearOptions(): number[] {
-    const fallbackStart = 2000;
-    const fallbackEnd = 2050;
-  
-    const start = this.startYear ?? fallbackStart;
-    const end = this.endYear ?? fallbackEnd;
-  
-    if (start > end) return [];
-  
-    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
-  }
-  
-  private onMonthSelected(monthIndex: number) {
-    this.currentMonth = monthIndex;
-    this.emit('nile-month-change', { month: monthIndex });
-  }
-
-  private onYearSelected(year: number) {
-    this.currentYear = year;
-    this.emit('nile-year-change', { year });
-  }
-
   @watch('allowedDates')
   checkValidAllowedDate() {
     let newDateRange: NileCalendarDateRange | null;
@@ -164,23 +131,6 @@ export class NileCalendar extends NileElement {
       this.allowedDatesLocal=newDateRange;
     }
   }
- 
-  
-  private isPrevDisabled(): boolean {
-    return (
-      this.currentMonth === 0 &&
-      this.startYear !== undefined &&
-      this.currentYear <= this.startYear
-    );
-  }
-  
-  private isNextDisabled(): boolean {
-    return (
-      this.currentMonth === 11 &&
-      this.endYear !== undefined &&
-      this.currentYear >= this.endYear
-    );
-  }
   
 
   /**
@@ -193,16 +143,15 @@ export class NileCalendar extends NileElement {
           base:true,
           base__range:this.range,
         })}
-        part="calendar-root"
       >
         <div class=${classMap({
           "calendar-config":true,
           "hidden": !this.range || (this.range && this.hideTypes)
-        })} part="calendar-config">
-          <div class="calendar-switcher" part="calendar-switcher">
+        })}>
+          <div class="calendar-switcher">
             <nile-tab-group centered @nile-tab-show="${this.onTypeChange}" value="${this.type}">
-              <nile-tab slot="nav" panel="absolute" tabindex="0">Absolute</nile-tab>
-              <nile-tab slot="nav" panel="relative" tabindex="0">Relative</nile-tab>
+              <nile-tab slot="nav" panel="absolute">Absolute</nile-tab>
+              <nile-tab slot="nav" panel="relative">Relative</nile-tab>
             </nile-tab-group>
           </div>
         </div>
@@ -211,7 +160,7 @@ export class NileCalendar extends NileElement {
         ${this.type == 'absolute' ? this.renderAbsoluteCalendar():''}
 
         ${!this.range?'':html`
-        <div class="button-container" part="calendar-footer">
+        <div class="button-container">
           ${this.allowClear?
             html`
             <nile-button 
@@ -219,18 +168,13 @@ export class NileCalendar extends NileElement {
             variant="secondary"
             ?disabled="${ !this.startDate || !this.endDate }"
             @click="${this.clearDate}"
-            role="button"
-            tabindex="0"
-            @keydown="${(e: KeyboardEvent) => {if (e.key === 'Enter' || e.key === ' ') this.clearDate();}}"
-            > Reset</nile-button>`:nothing
+            > Clear</nile-button>`:nothing
           }
           <nile-button 
           class="apply-button"  
           ?disabled="${ !this.startDate || !this.endDate }"  
           @click="${this.confimRange}"
-          role="button"
-        tabindex="0"
-        @keydown="${(e: KeyboardEvent) => {if (e.key === 'Enter' || e.key === ' ') this.confimRange();}}"> Apply</nile-button>
+          > Apply</nile-button>
         </div>
         `}
       </div>
@@ -242,8 +186,8 @@ export class NileCalendar extends NileElement {
    */
   renderAbsoluteCalendar(){
     return html`
-    <div class="calendar-wrapper" part="calendar-wrapper">
-      <div class="calendar-container" part="calendar-container">
+    <div class="calendar-wrapper">
+      <div class="calendar-container">
         ${this.renderMonth(
           this.currentYear,
           this.currentMonth,
@@ -283,87 +227,68 @@ export class NileCalendar extends NileElement {
     <div class="units-wrapper">
       <div class="unit-container">
         ${this.hideDurationFields?.includes('minutes')?'':html`
-        <div class="unit-group">
         <div class="duration-name">Minutes</div>
         <div class="duration-units">
           ${this.renderTimeValues('minutes', [1, 5, 15, 30, 45])}
         </div>
-        </div>
         `}
 
         ${this.hideDurationFields?.includes('hours')?'':html`
-        <div class="unit-group">
         <div class="duration-name">Hours</div>
         <div class="duration-units">
           ${this.renderTimeValues('hours', [1, 2, 3, 6, 8, 12])}
         </div>
-        </div>
         `}
         
         ${this.hideDurationFields?.includes('days')?'':html`
-        <div class="unit-group">
         <div class="duration-name">Days</div>
         <div class="duration-units">
           ${this.renderTimeValues('days', [1, 2, 3, 4, 5, 6])}
         </div>
-        </div>
         `}
         
         ${this.hideDurationFields?.includes('weeks')?'':html`
-        <div class="unit-group">
         <div class="duration-name">Weeks</div>
         <div class="duration-units">
           ${this.renderTimeValues('weeks', [1, 2, 4, 6])}
         </div>
-        </div>
-        
         `}
         
         ${this.hideDurationFields?.includes('months')?'':html`
-        <div class="unit-group">
         <div class="duration-name">Months</div>
         <div class="duration-units">
           ${this.renderTimeValues('months', [3, 6, 12, 15])}
         </div>
-        </div>
         `}
       </div>
     </div>
     
     ${this.range ? html`
     <div>
-     <div>
-    <div class="unit-input-container" part="unit-input-container" style="display: flex; align-items: flex-end;">
-      
-      <div class="input-wrapper" part="input-wrapper" style="flex: 1;">
+      <div class="unit-input-container">
         <nile-input 
-          class="manual-input duration-input" 
-          label="Duration"
-          inputmode="numeric"
-          type="number"
-          value="${this.selectedValue}" 
-          @nile-change="${this.handleDurationChange}"
-          placeholder="Enter Value"
+        class="manual-input duration-input" 
+        label="Duration"
+        inputmode="numeric"
+        type="number"
+        value="${this.selectedValue}" 
+        @nile-change="${this.handleDurationChange}"
+        placeholder="Enter Value"
         ></nile-input>
-      </div>
 
-      <div class="select-wrapper" part="select-wrapper" style="flex: 1;">
-        <nile-select 
-          class="manual-input time-input"  
+        <nile-select class="manual-input time-input"  
           label="Unit of time" 
-          value="${this.selectedUnit}"
+          value="${ this.selectedUnit }"
           @nile-change="${this.handleUnitChange}"
         >
-          <nile-option value="minutes" class="${this.hideDurationFields?.includes('minutes') ? 'hidden' : ''}">Minutes</nile-option>
-          <nile-option value="hours" class="${this.hideDurationFields?.includes('hours') ? 'hidden' : ''}">Hours</nile-option>
-          <nile-option value="days" class="${this.hideDurationFields?.includes('days') ? 'hidden' : ''}">Days</nile-option>
-          <nile-option value="weeks" class="${this.hideDurationFields?.includes('weeks') ? 'hidden' : ''}">Weeks</nile-option>
-          <nile-option value="months" class="${this.hideDurationFields?.includes('months') ? 'hidden' : ''}">Months</nile-option>
+          <nile-option value="minutes" class="${this.hideDurationFields?.includes('minutes')?'hidden':''}">Minutes</nile-option>
+          <nile-option value="hours" class="${this.hideDurationFields?.includes('hours')?'hidden':''}"> Hours </nile-option>
+          <nile-option value="days" class="${this.hideDurationFields?.includes('days')?'hidden':''}">Days</nile-option>
+          <nile-option value="weeks" class="${this.hideDurationFields?.includes('weeks')?'hidden':''}">Weeks</nile-option>
+          <nile-option value="months" class="${this.hideDurationFields?.includes('months')?'hidden':''}"> Months </nile-option>
         </nile-select>
       </div>
-
     </div>
-  </div>
     `:''}
     `
   }
@@ -379,10 +304,8 @@ export class NileCalendar extends NileElement {
       value =>
         html`
           <div
-          tabindex="0"
-          @keydown="${(e: KeyboardEvent) => {if (e.key === 'Enter' || e.key === ' ') {this.handleTimeValueClick(unit, value, e);}}}"
-          class="duration__value ${this.selectedUnit === unit && this.selectedValue === value ? 'duration__value--selected':''}"
-          @click=${(e: any) => this.handleTimeValueClick(unit, value, e)}
+            class="duration__value ${this.selectedUnit === unit && this.selectedValue === value ? 'duration__value--selected':''}"
+            @click=${(e: any) => this.handleTimeValueClick(unit, value, e)}
           >${value}
           </div>`
     );
@@ -469,88 +392,27 @@ export class NileCalendar extends NileElement {
       );
     };
 
-    
     return html`
       <div class="calendar">
-        <div class="calendar-header" part="calendar-header">
+        <div class="calendar-header">
           <nile-icon
             class="calendar-header__month-navigation"
             name="arrowleft"
-            ?disabled="${this.isPrevDisabled()}"
             color="black"
             @click="${this.prevMonth}"
-            role="button"
-            tabindex="${this.isPrevDisabled() ? -1 : 0}"
-            @keydown="${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') this.prevMonth(); }}"
           >
           </nile-icon>
-          
-       <!-- MONTH DROPDOWN -->
-       <div class="calendar-header__center">
-       <nile-dropdown class="month-dropdown">
-        <span
-          slot="trigger"
-          class="calendar-header__trigger month-trigger"
-          role="button"
-        >
-          ${new Date(year, month).toLocaleString('default', {
-            month: 'long',
-          })}
-          <nile-icon name="arrowdropdown"  color="black" class="calendar-header__caret"></nile-icon>
-        </span>
-        <nile-menu >
-  <div class="month-scroll-wrapper">
-  ${this.monthNames.map((m, idx) => html`
-  <nile-menu-item
-    class="month-menu-item"
-    ?selected="${idx === month}"
-    id="${idx === month ? 'selected-month-item' : ''}"
-    @click="${() => this.onMonthSelected(idx)}"
-  >
-    ${m}
-  </nile-menu-item>
-`)}
-  </div>
-</nile-menu>
-      </nile-dropdown>
-
-      <!-- YEAR DROPDOWN -->
-      <nile-dropdown class="year-dropdown" >
-        <span
-          slot="trigger"
-          class="calendar-header__trigger"
-          role="button"
-        >
-          ${year}
-          <nile-icon name="arrowdropdown" color="black" class="calendar-header__caret"></nile-icon>
-        </span>
-        <nile-menu>
-        <div class="year-scroll-wrapper">
-          ${this.yearOptions.map(
-            y => html`
-              <nile-menu-item
-                class="year-menu-item"
-                ?selected="${y === year}"
-                @click="${() => this.onYearSelected(y)}"
-              >
-                ${y}
-
-              </nile-menu-item>
-            `
-          )}
-          </div>
-        </nile-menu>
-      </nile-dropdown>
-      </div>
+          <span
+            >${new Date(year, month).toLocaleString('default', {
+              month: 'long',
+            })}
+            ${year}</span
+          >
           <nile-icon
             class="calendar-header__month-navigation"
             name="arrowright"
-            ?disabled="${this.isNextDisabled()}"
             color="black"
-            role="button"
-  tabindex="${this.isNextDisabled() ? -1 : 0}"
-  @click="${this.nextMonth}"
-  @keydown="${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') this.nextMonth(); }}"
+            @click="${this.nextMonth}"
           >
           </nile-icon>
         </div>
@@ -578,18 +440,12 @@ export class NileCalendar extends NileElement {
             
             return html` 
             <div
-            part="calendar-day"
               class=${classMap(classMapObj)}
-              tabindex="${isCurrentMonth && this.isAllowedDate(day, month, year) ? '0' : '-1'}"
-  @click="${() => { if (isCurrentMonth) this.selectDate(day, month, year)}}"
-  @keydown="${(e: KeyboardEvent) => {
-    if ((e.key === 'Enter' || e.key === ' ') && isCurrentMonth) {
-      this.selectDate(day, month, year);
-    }
-  }}" >
+              @click="${() => { if (isCurrentMonth) this.selectDate(day, month, year)}}"
+            >
               <span style="position:relative;">
                 ${day}
-                ${isCurrentDate(day, month, year) && isCurrentMonth?html`<div class="current__date__dot" part="current-date-dot"></div>`:nothing}
+                ${isCurrentDate(day, month, year) && isCurrentMonth?html`<div class="current__date__dot"></div>`:nothing}
               </span>
             </div>`;
           })}
@@ -830,26 +686,21 @@ export class NileCalendar extends NileElement {
 
   private nextMonth(): void {
     if (this.currentMonth === 11) {
-      const newYear = this.currentYear + 1;
-      if (this.endYear !== undefined && newYear > this.endYear) return;
       this.currentMonth = 0;
-      this.currentYear = newYear;
+      this.currentYear++;
     } else {
       this.currentMonth++;
     }
   }
-  
+
   private prevMonth(): void {
     if (this.currentMonth === 0) {
-      const newYear = this.currentYear - 1;
-      if (this.startYear !== undefined && newYear < this.startYear) return;
       this.currentMonth = 11;
-      this.currentYear = newYear;
+      this.currentYear--;
     } else {
       this.currentMonth--;
     }
   }
-  
 
   private confimRange() {
     if (!(this.startDate && this.endDate)) return;
@@ -874,8 +725,7 @@ export class NileCalendar extends NileElement {
   }
 
   emitChangedData(data:{startDate:Date,endDate:Date}|{value:any}|null){
-   
-this.emit('nile-changed', data); // deprecated . Use nile-change instead.
+    this.emit('nile-changed',data);
     this.emit('nile-change',data)
   }
 

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

@@ -165,6 +165,7 @@ export class NileChip extends NileElement {
         </label>
 
         <div
+          part='base' 
           class=${classMap({
             'nile-chip': true,
             'nile-chip--warning': this.warning,

package/src/nile-code-editor/nile-code-editor.ts

@@ -39,7 +39,9 @@ import { autocompletion,CompletionContext,CompletionResult } from '@codemirror/a
 import NileElement from '../internal/nile-element';
 import { basicSetup } from './extensionSetup';
 import { classMap } from 'lit/directives/class-map.js';
-import { Theme as DefaultTheme } from './theme';
+import { Theme as DefaultTheme, customisedThemeCss } from './theme';
+import { keymap } from '@codemirror/view';
+import { acceptCompletion } from '@codemirror/autocomplete';
 
 // Choose the appropriate mode for your use case
 
@@ -84,7 +86,7 @@ export class NileCodeEditor extends NileElement {
 
   @property({ type: Boolean, reflect: true , attribute: false }) disableSyntaxHighlighting: boolean = false;
 
-  @property({ type: Object,  attribute: false }) customThemeCSS: object | null = null;
+  @property({ type: Object,  attribute: false }) customThemeCSS: object | null = customisedThemeCss;
 
   @property({ type: Boolean, reflect: true , attribute: true }) lineNumbersMultiline: boolean = true;
 
@@ -100,6 +102,8 @@ export class NileCodeEditor extends NileElement {
 
   @property({ type: Boolean, reflect: true , attribute: true}) aboveCursor: boolean = false;
 
+  @property({ type: Boolean, reflect: true, attribute: true }) tabCompletion: boolean = false;
+
   public view: EditorView;
   public viewState:EditorState;
   private timeOut: any = null;
@@ -141,6 +145,17 @@ export class NileCodeEditor extends NileElement {
     }, false )
   }
 
+  getTabCompletionKeymap() {
+    return this.tabCompletion
+      ? keymap.of([
+          {
+            key: 'Tab',
+            run: acceptCompletion,
+          }
+        ])
+      : [];
+  }
+
   protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void{
     super.updated(changedProperties);
     if (changedProperties.has('value') && this.view.state.doc.toString()!=this.value) {
@@ -277,6 +292,7 @@ export class NileCodeEditor extends NileElement {
         autocompletion({aboveCursor: this.aboveCursor}),
         language,
         customThemeExtension,
+        this.getTabCompletionKeymap(),
         EditorView.updateListener.of((v: ViewUpdate) => {
           if (v.docChanged) {
             this.debounce ? this.emitAfterTimeout({ value: this.view.state.doc.toString() }) : this.emit('nile-change', { value: this.view.state.doc.toString() })
@@ -362,7 +378,39 @@ export class NileCodeEditor extends NileElement {
    */
   getTopLevelSuggestions(context: CompletionContext,textBeforeCursor:string){
     const baseMatch: any = textBeforeCursor.match(/([a-zA-Z_$][\w$]*)$/);
-    if (!baseMatch) return null;
+    
+    if (!baseMatch) {
+      const trimmedText = textBeforeCursor.trim();
+      if (trimmedText === '') {
+        const optionsList = Object.keys(this.customAutoCompletions).filter(key => 
+          Object.keys(this.customAutoCompletions[key]).length
+        );
+        
+        const options = optionsList.map((key) => ({
+          label: key,
+          type: 'property',
+          apply: key,
+          boost: 999
+        }));
+        
+        if(this.customCompletionsPaths.length){
+          this.customCompletionsPaths.forEach(path => {
+            options.push({
+              label: ''+path,
+              type: 'property',
+              apply: ''+path,
+              boost: 998
+            });
+          });
+        }
+        
+        return {
+          from: context.pos,
+          options: options
+        };
+      }
+      return null;
+    }
   
     const optionsList = Object.keys(this.customAutoCompletions).filter(key => 
       Object.keys(this.customAutoCompletions[key]).length && 
@@ -378,7 +426,7 @@ export class NileCodeEditor extends NileElement {
     if(this.customCompletionsPaths.length){
       this.customCompletionsPaths
       .filter(path=>path.toLocaleLowerCase().includes(textBeforeCursor.toLocaleLowerCase()))
-      .map(path=>{
+      .forEach(path=>{
         options.push({
           label: ''+path,
           type: 'property',
@@ -465,9 +513,9 @@ export class NileCodeEditor extends NileElement {
 
   getCustomThemeExtension(): Extension {
     if (this.customThemeCSS) {
-      return EditorView.theme(this.customThemeCSS as { [selector: string]: StyleSpec });
+      return [EditorView.theme(this.customThemeCSS as { [selector: string]: StyleSpec }), EditorView.theme(customisedThemeCss)];
     }
-    return EditorView.theme(DefaultTheme);
+    return [EditorView.theme(customisedThemeCss), EditorView.theme(DefaultTheme)];
   }
 
   restrictSingleLine() {
@@ -571,3 +619,4 @@ function convertToSingleLine(code: string) {
   // Remove line breaks and unnecessary whitespace
   return code.replace(/\s+/g, ' ').trim();
 }
+

package/src/nile-code-editor/theme.ts

@@ -36,4 +36,115 @@ export const CustomTheme = {
   ".cm-gutters": {
     fontFamily: 'inherit', // Ensure the gutter font matches
   },
+};
+
+export const customisedThemeCss = {
+  '.cm-tooltip-autocomplete': {
+    padding: '9px 12px',
+    backgroundColor: '#FFFFFF',
+    display: 'block',
+    fontSize: '14px',
+    background: 'white',
+    border: 'solid 1px #C7CED4',
+    borderRadius: '0.25rem',
+    paddingBlock: '0',
+    paddingInline: '0',
+    overscrollBehavior: 'none',
+    color: 'hsl(240 5.3% 26.1%)',
+  },
+  '.cm-tooltip.cm-completionInfo.cm-completionInfo-right': {
+    fontFamily: 'colfax-regular',
+    backgroundColor: '#FFFFFF',
+    color: 'hsl(240 5.3% 26.1%)',
+    padding: "6px 12px",
+    borderTopRightRadius: "0.25rem",
+    borderBottomRightRadius: "0.25rem",
+    border: 'solid 1px #C7CED4',
+    fontSize: '14px',
+  },
+  '.cm-tooltip.cm-tooltip-autocomplete > ul': {
+    fontFamily: 'colfax-regular',
+    fontWeight: '400',
+  },
+  '.cm-tooltip.cm-tooltip-autocomplete > ul > li': {
+    padding: '9px 12px'
+  },
+  '.cm-tooltip.cm-tooltip-autocomplete > ul > li:hover': {
+    backgroundColor: '#005ea61a',
+    color: 'rgb(0, 0, 0)',
+  },
+  '.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected="true"]': {
+    backgroundColor: '#005ea61a',
+    color: '#005EA6',
+  },
+  '.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected="true"]:hover': {
+    color: '#005EA6',
+  },
+  '.cm-completionIcon': {
+    display: 'block',
+    position: 'relative'
+  },
+  '.cm-completionIcon::after': {
+    display: 'block',
+    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjM2MDExIDYuMjVMNi45ODUxMSAxLjc1TDkuNjEwMTEgNi4yNUg0LjM2MDExWk01LjY5NTExIDUuNUg4LjMxMjYxTDcuMDAwMTEgMy4yNUw1LjY5NTExIDUuNVoiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNi4yNSAxMi4yNUgxLjc1VjcuNzVINi4yNVYxMi4yNVpNMi41IDExLjVINS41VjguNUgyLjVWMTEuNVoiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOC43NDk5NyAxMS44NzA4QzkuMTE5OTggMTIuMTE4IDkuNTU0OTkgMTIuMjUgMTAgMTIuMjVDMTAuNTk2NyAxMi4yNSAxMS4xNjkgMTIuMDEyOSAxMS41OTEgMTEuNTkxQzEyLjAxMjkgMTEuMTY5IDEyLjI1IDEwLjU5NjcgMTIuMjUgMTBDMTIuMjUgOS41NTQ5OSAxMi4xMTggOS4xMTk5OCAxMS44NzA4IDguNzQ5OTdDMTEuNjIzNiA4LjM3OTk2IDExLjI3MjIgOC4wOTE1NyAxMC44NjEgNy45MjEyN0MxMC40NDk5IDcuNzUwOTcgOS45OTc1MSA3LjcwNjQyIDkuNTYxMDUgNy43OTMyM0M5LjEyNDU5IDcuODgwMDUgOC43MjM2OCA4LjA5NDM0IDguNDA5MDEgOC40MDkwMUM4LjA5NDM0IDguNzIzNjggNy44ODAwNSA5LjEyNDU5IDcuNzkzMjMgOS41NjEwNUM3LjcwNjQyIDkuOTk3NTEgNy43NTA5NyAxMC40NDk5IDcuOTIxMjcgMTAuODYxQzguMDkxNTcgMTEuMjcyMiA4LjM3OTk2IDExLjYyMzYgOC43NDk5NyAxMS44NzA4Wk05LjE2NjY1IDguNzUyOEM5LjQxMzMyIDguNTg3OTggOS43MDMzMyA4LjUgMTAgOC41QzEwLjM5NzggOC41IDEwLjc3OTQgOC42NTgwNCAxMS4wNjA3IDguOTM5MzRDMTEuMzQyIDkuMjIwNjUgMTEuNSA5LjYwMjE4IDExLjUgMTBDMTEuNSAxMC4yOTY3IDExLjQxMiAxMC41ODY3IDExLjI0NzIgMTAuODMzNEMxMS4wODI0IDExLjA4IDEwLjg0ODEgMTEuMjcyMyAxMC41NzQgMTEuMzg1OEMxMC4yOTk5IDExLjQ5OTQgOS45OTgzNCAxMS41MjkxIDkuNzA3MzcgMTEuNDcxMkM5LjQxNjM5IDExLjQxMzMgOS4xNDkxMiAxMS4yNzA0IDguOTM5MzQgMTEuMDYwN0M4LjcyOTU2IDEwLjg1MDkgOC41ODY3IDEwLjU4MzYgOC41Mjg4MiAxMC4yOTI2QzguNDcwOTUgMTAuMDAxNyA4LjUwMDY1IDkuNzAwMDcgOC42MTQxOCA5LjQyNTk4QzguNzI3NzEgOS4xNTE4OSA4LjkxOTk3IDguOTE3NjIgOS4xNjY2NSA4Ljc1MjhaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    position: 'absolute',
+    left: '0px',
+    top: '2px',
+    lineHeight: '0',
+    verticalAlign: 'middle'
+  },
+  '.cm-completionMatchedText' : {
+    textDecoration: 'none',
+  },
+  '.cm-completionIcon.cm-completionIcon-property::after': {
+    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuNjA1MjEgMTEuOTExVjcuODg0ODFMMS44MjU3NiA1LjkxNDYxVjkuOTQwODFMNS42MDUyMSAxMS45MTFaTTYuNDMwOTcgMTEuOTExTDEyLjE3NDIgOC42MDY3OVY0LjU4MDU5TDYuNDMwOTcgNy44ODQ4MVYxMS45MTFaTTYuMDE4MDkgNy4yMzE0MUwxMS44NzI1IDMuODY5OTlMNy45NjYwMyAxLjg1Njg5TDIuMTI3NDggNS4yMTgzMUw2LjAxODA5IDcuMjMxNDFaTTEgMTAuMzc2NFY0Ljk1NzYxTDcuOTgxOTEgMUwxMyAzLjYwOTI5VjkuMDI4MDlMNi4wMTgwOSAxM0wxIDEwLjM3NjRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    position: 'absolute',
+    left: '0px',
+    top: '2px',
+    lineHeight: '0',
+    verticalAlign: 'middle'
+  },
+  '.cm-completionIcon.cm-completionIcon-keyword::after': {
+    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuMTk5OTUgNC4wMTQ0OUM2LjE5OTk1IDMuNzkyNyA2LjI3ODE0IDMuNjAzMjkgNi40MzQ1IDMuNDQ2MjZDNi41OTA3NyAzLjI4OTE0IDYuNzc5MjcgMy4yMTA1OCA3IDMuMjEwNThDNy4yMjA3MyAzLjIxMDU4IDcuNDA5MjMgMy4yODkxNCA3LjU2NTUgMy40NDYyNkM3LjcyMTg2IDMuNjAzMjkgNy44MDAwNSAzLjc5MjcgNy44MDAwNSA0LjAxNDQ5QzcuODAwMDUgNC4yMzYyOCA3LjcyMTg2IDQuNDI1NjkgNy41NjU1IDQuNTgyNzJDNy40MDkyMyA0LjczOTg0IDcuMjIwNzMgNC44MTg0IDcgNC44MTg0QzYuNzc5MjcgNC44MTg0IDYuNTkwNzcgNC43Mzk4NCA2LjQzNDUgNC41ODI3MkM2LjI3ODE0IDQuNDI1NjkgNi4xOTk5NSA0LjIzNjI4IDYuMTk5OTUgNC4wMTQ0OVpNNi45MzM1OSAxM0w1LjAyNTE4IDEwLjk3OTFMNS44MTE1OSA5LjkwNjQ1TDUuMDE0NjggOC44MTA5NUw1Ljc0OSA3LjgwNzk1VjYuNzU2OTlDNS4yMzggNi41MDY4OCA0LjgxODc3IDYuMTQ3MSA0LjQ5MTMyIDUuNjc3NjdDNC4xNjM3NyA1LjIwODMyIDQgNC42NTM5MyA0IDQuMDE0NDlDNCAzLjE3ODI5IDQuMjkxOTUgMi40NjY4MiA0Ljg3NTg2IDEuODgwMDlDNS40NTk3NyAxLjI5MzM2IDYuMTY3ODIgMSA3IDFDNy44MzIxOCAxIDguNTQwMjMgMS4yOTMzNiA5LjEyNDE0IDEuODgwMDlDOS43MDgwNSAyLjQ2NjgyIDEwIDMuMTc4MjkgMTAgNC4wMTQ0OUMxMCA0LjYyMzA1IDkuODQ2NjggNS4xNjEwNSA5LjU0MDA1IDUuNjI4NDhDOS4yMzM0MSA2LjA5NTk5IDguODAzNzMgNi40NzIxNyA4LjI1MSA2Ljc1Njk5VjExLjY3NjFMNi45MzM1OSAxM1pNNC42ODUzNiA0LjAxNDQ5QzQuNjg1MzYgNC41NDc2IDQuODUzNTUgNS4wMjc4MiA1LjE4OTkxIDUuNDU1MTRDNS41MjYyNyA1Ljg4MjQ3IDUuOTQxMDUgNi4xNTQ4MiA2LjQzNDIzIDYuMjcyMjFWOC4wNDU4Mkw1Ljg2NTA1IDguODA5MTdMNi42NTkwOSA5LjkyMDg0TDUuOTAxNDUgMTAuOTI0TDYuOTQ4MzIgMTIuMDEzTDcuNTY1NzcgMTEuMzkyNlY2LjI3MjIxQzguMDg2MDUgNi4xMzE0NCA4LjUwNzU5IDUuODU3NTggOC44MzA0MSA1LjQ1MDYyQzkuMTUzMjMgNS4wNDM2NiA5LjMxNDY0IDQuNTY0OTUgOS4zMTQ2NCA0LjAxNDQ5QzkuMzE0NjQgMy4zNzA4NSA5LjA4OSAyLjgyMjMxIDguNjM3NzMgMi4zNjg4NUM4LjE4NjQ1IDEuOTE1NCA3LjY0MDU1IDEuNjg4NjcgNyAxLjY4ODY3QzYuMzU5NDUgMS42ODg2NyA1LjgxMzU1IDEuOTE1NCA1LjM2MjI3IDIuMzY4ODVDNC45MTEgMi44MjIzMSA0LjY4NTM2IDMuMzcwODUgNC42ODUzNiA0LjAxNDQ5WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==")',
+    position: 'absolute',
+    left: '0px',
+    top: '2px',
+    lineHeight: '0',
+    verticalAlign: 'middle'
+  },
+  '.cm-completionIcon.cm-completionIcon-variable::after': {
+    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuNjA1MjEgMTEuOTExVjcuODg0ODFMMS44MjU3NiA1LjkxNDYxVjkuOTQwODFMNS42MDUyMSAxMS45MTFaTTYuNDMwOTcgMTEuOTExTDEyLjE3NDIgOC42MDY3OVY0LjU4MDU5TDYuNDMwOTcgNy44ODQ4MVYxMS45MTFaTTYuMDE4MDkgNy4yMzE0MUwxMS44NzI1IDMuODY5OTlMNy45NjYwMyAxLjg1Njg5TDIuMTI3NDggNS4yMTgzMUw2LjAxODA5IDcuMjMxNDFaTTEgMTAuMzc2NFY0Ljk1NzYxTDcuOTgxOTEgMUwxMyAzLjYwOTI5VjkuMDI4MDlMNi4wMTgwOSAxM0wxIDEwLjM3NjRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    position: 'absolute',
+    left: '0px',
+    top: '2px',
+    lineHeight: '0',
+    verticalAlign: 'middle'
+  },
+  '.cm-completionIcon.cm-completionIcon-text::after': {
+    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuNjA1MjEgMTEuOTExVjcuODg0ODFMMS44MjU3NiA1LjkxNDYxVjkuOTQwODFMNS42MDUyMSAxMS45MTFaTTYuNDMwOTcgMTEuOTExTDEyLjE3NDIgOC42MDY3OVY0LjU4MDU5TDYuNDMwOTcgNy44ODQ4MVYxMS45MTFaTTYuMDE4MDkgNy4yMzE0MUwxMS44NzI1IDMuODY5OTlMNy45NjYwMyAxLjg1Njg5TDIuMTI3NDggNS4yMTgzMUw2LjAxODA5IDcuMjMxNDFaTTEgMTAuMzc2NFY0Ljk1NzYxTDcuOTgxOTEgMUwxMyAzLjYwOTI5VjkuMDI4MDlMNi4wMTgwOSAxM0wxIDEwLjM3NjRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    position: 'absolute',
+    left: '0px',
+    top: '2px',
+    lineHeight: '0',
+    verticalAlign: 'middle'
+  },
+  '.cm-completionIcon.cm-completionIcon-function::after': {
+    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNzE5ODMgNC4zNTY0NUwzLjMxODk0IDQuODA1NjZMMy4zNTgzNCA0Ljk3NTU5SDQuMzkwNjJDNC4xNzk4MyA2LjE4NDU3IDQuMDIyMjMgNy4yNzQ0MSAzLjcxOTgzIDguOTU0MUMzLjM1ODM0IDExLjA5NjcgMy4xNTA1IDExLjYyMyAzLjAyNzM4IDExLjgxNTRDMi45MTkwMyAxMi4wMDU5IDIuNzYzNCAxMi4xMDQ1IDIuNTUyNjEgMTIuMTA0NUMyLjMyMTEzIDEyLjEwNDUgMS45MDI1IDExLjkyMjkgMS42Nzc5MiAxMS43MTY4QzEuNTk3MTUgMTEuNjYyMSAxLjUwMTYxIDExLjY3NTggMS40MDAxNSAxMS43NDIyQzEuMTk3MjQgMTEuOTEyMSAxLjAwMDI0IDEyLjE3MzggMS4wMDAyNCAxMi40MDgyQzAuOTg4NDIgMTIuNzI0NiAxLjQxNDkzIDEzIDEuODIxNzMgMTNDMi4xODAyNyAxMyAyLjcwODI0IDEyLjc3NzMgMy4yNjM3OCAxMi4yNTM5QzQuMDIzMjIgMTEuNTQgNC41OTE1NiAxMC41NjA1IDUuMDY2MzMgOC40NDMzNkM1LjM3MTY5IDcuMDkxOCA1LjUxNTUgNi4yMTI4OSA1LjczMDIzIDQuOTc2NTZMNy4wMTI3IDQuODYxMzNMNy4yOTA0NyA0LjM1NjQ1SDUuODQ2NDZDNi4yMTk3NyAyLjAyODMyIDYuNTExMzMgMS42ODM1OSA2Ljg2OTg4IDEuNjgzNTlDNy4xMDgyNSAxLjY4MzU5IDcuMzg2MDIgMS44NjUyMyA3LjcwNTE2IDIuMjIyNjZDNy43OTk3MiAyLjM1MTU2IDcuOTQxNTYgMi4zMzc4OSA4LjA0OTkxIDIuMjVDOC4yMzIxNCAyLjE0MjU4IDguNDU2NzIgMS44NjcxOSA4LjQ3MTQ5IDEuNjE3MTlDOC40ODIzMyAxLjM0MTggOC4xNTEzNyAxIDcuNTgyMDMgMUM3LjA2NTg5IDEgNi4yNzQ5MyAxLjM0MTggNS42MTAwNiAyLjAxMzY3QzUuMDI2OTMgMi42MjU5OCA0LjcyMTU4IDMuMzkwNjIgNC41MTA3OSA0LjM1NjQ1SDMuNzE5ODNaTTcuODIzMzYgNS45MTUwNEM4LjIyMTMgNS4zODk2NSA4LjQ1OTY3IDUuMjE0ODQgOC41ODI4IDUuMjE0ODRDOC43MDk4NiA1LjIxNDg0IDguODExMzIgNS4zMzg4NyA5LjAyOSA2LjAzNjEzTDkuNDAxMzMgNy4yMjY1NkM4LjY4MTMgOC4zMTgzNiA4LjE1NDMyIDguOTI2NzYgNy44MzQxOSA4LjkyNjc2QzcuNzI3ODEgOC45MjY3NiA3LjYyMDQ1IDguODkzNTUgNy41NDQ2IDguODE5MzRDNy40Njk3NCA4Ljc0NTEyIDcuMzg3IDguNjgzNTkgNy4zMDYyMyA4LjY4MzU5QzcuMDQyMjUgOC42ODM1OSA2LjcxNTIzIDkuMDAwOTggNi43MDkzMiA5LjM5NDUzQzYuNzAzNDEgOS43OTU5IDYuOTg3MDkgMTAuMDgzIDcuMzU5NDIgMTAuMDgzQzcuOTk4NjkgMTAuMDgzIDguNTM5NDYgOS40NjA5NCA5LjU4MzU2IDcuODExNTJMOS44ODg5MSA4LjgzMjAzQzEwLjE1MDkgOS43MDg5OCAxMC40NTgyIDEwLjA4MyAxMC44NDI0IDEwLjA4M0MxMS4zMTcyIDEwLjA4MyAxMS45NTU0IDkuNjgxNjQgMTIuNjUxOCA4LjU5NjY4TDEyLjM2MDMgOC4yNjY2QzExLjk0MTcgOC43NjY2IDExLjY2MzkgOS4wMDA5OCAxMS40OTk0IDkuMDAwOThDMTEuMzE2MiA5LjAwMDk4IDExLjE1NTYgOC43MjM2MyAxMC45NDM4IDguMDQxOTlMMTAuNDk3NiA2LjYwMzUyQzEwLjc2MTYgNi4yMTc3NyAxMS4wMjE3IDUuODkzNTUgMTEuMjUwMiA1LjYzNDc3QzExLjUyMiA1LjMyNzE1IDExLjczMTkgNS4xOTYyOSAxMS44NzQ3IDUuMTk2MjlDMTEuOTk0OCA1LjE5NjI5IDEyLjA5OTMgNS4yNDcwNyAxMi4xNjQzIDUuMzE4MzZDMTIuMjUgNS40MTIxMSAxMi4zMDEyIDUuNDU2MDUgMTIuNDAyNiA1LjQ1NjA1QzEyLjYzMjEgNS40NTYwNSAxMi45ODY3IDUuMTY2OTkgMTIuOTk5NiA0Ljc4NDE4QzEzLjAxMTQgNC40Mjg3MSAxMi43ODg4IDQuMTI1OTggMTIuNDAyNiA0LjEyNTk4QzExLjgxOTUgNC4xMjU5OCAxMS4zMDUzIDQuNjI0MDIgMTAuMzE1NCA2LjA4MzAxTDEwLjExMTUgNS40NTcwM0M5LjgyNTg3IDQuNTc4MTIgOS42MzY3NSA0LjEyNTk4IDkuMjM4ODEgNC4xMjU5OEM4Ljc3NTg2IDQuMTI1OTggOC4xMzk1NSA0LjY5MDQzIDcuNTE3MDIgNS41ODQ5Nkw3LjgyMzM2IDUuOTE1MDRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    position: 'absolute',
+    left: '0px',
+    top: '2px',
+    lineHeight: '0',
+    verticalAlign: 'middle'
+  },
+  '.cm-completionIcon.cm-completionIcon-class::after': {
+    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuOTA2NjUgMTNMMS41IDEwVjRMNi45MDY2NSAxTDEyLjMxMzMgNFYxMEw2LjkwNjY1IDEzWk01LjE0ODk3IDUuNTA3MzJDNS4zNjUzNSA1LjI1NzQyIDUuNjI5MTQgNS4wNTkxOCA1Ljk0MDM0IDQuOTEyNTlDNi4yNTE2NSA0Ljc2NiA2LjU3Mzc1IDQuNjkyNzEgNi45MDY2NSA0LjY5MjcxQzcuMjM5NTQgNC42OTI3MSA3LjU2MTY0IDQuNzY2IDcuODcyOTYgNC45MTI1OUM4LjE4NDE1IDUuMDU5MTggOC40NDc5NCA1LjI1NzQyIDguNjY0MzIgNS41MDczMkwxMC45MjUzIDQuMjYyMjRMNi45MDY2NSAyLjAzMTc0TDIuODg3OTkgNC4yNjIyNEw1LjE0ODk3IDUuNTA3MzJaTTYuNDU4OTYgMTEuNzMzN1Y5LjI3ODJDNS45MjExNyA5LjE2Njg1IDUuNDc2ODEgOC44OTg0MSA1LjEyNTkgOC40NzI4OEM0Ljc3NDg3IDguMDQ3MjQgNC41OTkzNSA3LjU1NjI4IDQuNTk5MzUgN0M0LjU5OTM1IDYuODgzNDkgNC42MDU1NSA2Ljc2NDA1IDQuNjE3OTUgNi42NDE2OEM0LjYzMDIzIDYuNTE5NDMgNC42NjM3NSA2LjQwNTczIDQuNzE4NSA2LjMwMDU4TDIuMzk1MzcgNS4wMDQwMlY5LjQ3NTUyTDYuNDU4OTYgMTEuNzMzN1pNNi45MDY2NSA4LjQxMTkzQzcuMzA0MDUgOC40MTE5MyA3LjYzODcyIDguMjc1OTYgNy45MTA2NiA4LjAwNDAyQzguMTgyNiA3LjczMjA4IDguMzE4NTcgNy4zOTc0MSA4LjMxODU3IDdDOC4zMTg1NyA2LjYwMjU5IDguMTgyNiA2LjI2NzkyIDcuOTEwNjYgNS45OTU5OEM3LjYzODcyIDUuNzI0MDQgNy4zMDQwNSA1LjU4ODA3IDYuOTA2NjUgNS41ODgwN0M2LjUwOTI0IDUuNTg4MDcgNi4xNzQ1NyA1LjcyNDA0IDUuOTAyNjMgNS45OTU5OEM1LjYzMDY5IDYuMjY3OTIgNS40OTQ3MiA2LjYwMjU5IDUuNDk0NzIgN0M1LjQ5NDcyIDcuMzk3NDEgNS42MzA2OSA3LjczMjA4IDUuOTAyNjMgOC4wMDQwMkM2LjE3NDU3IDguMjc1OTYgNi41MDkyNCA4LjQxMTkzIDYuOTA2NjUgOC40MTE5M1pNNy4zNTQzMyAxMS43MzM3TDExLjQxNzkgOS40NzU1MlY1LjAwNDAyTDkuMDk0NzkgNi4zMDA1OEM5LjEzODA3IDYuNDA1NzMgOS4xNjg3MSA2LjUxOTQzIDkuMTg2NzQgNi42NDE2OEM5LjIwNDg3IDYuNzY0MDUgOS4yMTM5NCA2Ljg4MzQ5IDkuMjEzOTQgN0M5LjIxMzk0IDcuNTU2MjggOS4wMzg0MyA4LjA0NzI0IDguNjg3NCA4LjQ3Mjg4QzguMzM2NDggOC44OTg0MSA3Ljg5MjEzIDkuMTY2ODUgNy4zNTQzMyA5LjI3ODJWMTEuNzMzN1oiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo= ")',
+    position: 'absolute',
+    left: '0px',
+    top: '2px',
+    lineHeight: '0',
+    verticalAlign: 'middle'
+  },
+  '.cm-completionLabel': {
+    marginLeft: '18px',
+  }
 };