@aquera/nile-elements 0.1.66-beta-1.1 → 0.1.66

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.66-beta-1.1",
+  "version": "0.1.66",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/index.ts

@@ -16,6 +16,7 @@ export { NileLoader } from './nile-loader';
 export { NileProgressBar } from './nile-progress-bar';
 export { NileSpinner } from './nile-spinner';
 export { NileSelect } from './nile-select';
+export { NileVirtualSelect } from './nile-virtual-select';
 export { NileOption } from './nile-option';
 export { NileTag } from './nile-tag';
 export { NileIconButton } from './nile-icon-button';
@@ -78,4 +79,6 @@ export { NileInlineEdit } from './nile-inline-edit';
 export { NileTable } from './nile-table';
 export { NileFilterChip } from './nile-filter-chip';
 export {NilePagination } from './nile-pagination';
-export { NileSlider } from './nile-slider';
+export { NileSlider } from './nile-slider';
+export { NileFileUpload } from './nile-file-upload';
+export { NileFilePreview } from './nile-file-preview'

package/src/internal/form.ts

@@ -89,7 +89,7 @@ export class FormControlController implements ReactiveController {
   }
 
   hostConnected() {
-    const form = this.options.form(this.host);
+    const form = this.options?.form(this.host);
 
     if (form) {
       this.attachForm(form);
@@ -97,7 +97,7 @@ export class FormControlController implements ReactiveController {
 
     // Listen for interactions
     interactions.set(this.host, []);
-    this.options.assumeInteractionOn.forEach(event => {
+    this.options?.assumeInteractionOn.forEach(event => {
       this.host.addEventListener(event, this.handleInteraction);
     });
   }
@@ -107,7 +107,7 @@ export class FormControlController implements ReactiveController {
 
     // Clean up interactions
     interactions.delete(this.host);
-    this.options.assumeInteractionOn.forEach(event => {
+    this.options?.assumeInteractionOn.forEach(event => {
       this.host.removeEventListener(event, this.handleInteraction);
     });
   }

package/src/internal/resizable-table-styles.ts

@@ -84,6 +84,13 @@ export const resizerStyles = css`
     opacity: 1;
     width: 3px;
   }
+
+  :host([resizable]) .column {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
 `;
 
 export const headerResizerStyles = css`
@@ -117,6 +124,11 @@ export const headerResizerStyles = css`
     background-color: transparent;
     opacity: 1;
   }
+
+  :host([resizable]) .headers {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 `;
 
 export const resizableSlotStyles = css`

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

@@ -100,7 +100,15 @@ export class NileChip extends NileElement {
   protected updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties);
     if (changedProperties.has('autoCompleteOptions')) {
-      this.filteredAutoCompleteOptions = [...this.autoCompleteOptions];
+      let options = this.autoCompleteOptions;
+      if (typeof options === 'string') {
+        try {
+          options = JSON.parse(options);
+        } catch (e) {
+          options = [];
+        }
+      }
+      this.filteredAutoCompleteOptions = Array.isArray(options) ? [...options] : [];
       if (this.noDuplicates) {
         this.filteredAutoCompleteOptions =
           this.filteredAutoCompleteOptions.filter(

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

@@ -35,7 +35,7 @@ import {
 import { sql } from '@codemirror/lang-sql';
 import { json } from '@codemirror/lang-json';
 import { html as htmlLang } from '@codemirror/lang-html';
-import { autocompletion,CompletionContext,CompletionResult } from '@codemirror/autocomplete';
+import { autocompletion,closeCompletion,CompletionContext,CompletionResult, completionStatus } from '@codemirror/autocomplete';
 import NileElement from '../internal/nile-element';
 import { basicSetup } from './extensionSetup';
 import { classMap } from 'lit/directives/class-map.js';
@@ -102,7 +102,7 @@ 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;
+  @property({ type: Boolean, reflect: true, attribute: true }) tabCompletion: boolean = true;
 
   public view: EditorView;
   public viewState:EditorState;
@@ -117,6 +117,7 @@ export class NileCodeEditor extends NileElement {
   private defaultSyntaxHighlightingComp = new Compartment();
   private themeComp = new Compartment();
 
+  private isSpacePressed:boolean = false;
   /**
    * The styles for CodeEditor
    * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
@@ -260,7 +261,27 @@ export class NileCodeEditor extends NileElement {
       parent: this.codeEditor
     });
 
-    if(emitEvent) this.emit('nile-after-update',{ createNewView: this.createNewView, codeMirrorInstance: this.view,  }, false );
+    this.view.dom.addEventListener('keydown', (e: KeyboardEvent) => {
+      this.checkForSpaceKey(e);
+      this.handleEscapeKey(e);
+   }, true);
+    if (emitEvent) this.emit('nile-after-update', { createNewView: this.createNewView, codeMirrorInstance: this.view,  }, false );
+  }
+
+  checkForSpaceKey(e: KeyboardEvent) {
+    if (e.code === 'Space' && !e.ctrlKey) {
+        this.isSpacePressed = true;
+      } else {
+        this.isSpacePressed = false;
+    }
+  }
+
+  handleEscapeKey(e: KeyboardEvent) {
+    if (e.key === 'Escape' && this.view && completionStatus(this.view.state) !== null) {
+      e.stopPropagation();      
+      e.preventDefault();         
+      closeCompletion(this.view);
+    }
   }
 
   createState(){
@@ -381,7 +402,7 @@ export class NileCodeEditor extends NileElement {
     
     if (!baseMatch) {
       const trimmedText = textBeforeCursor.trim();
-      if (trimmedText === '') {
+      if (trimmedText === '' && !this.isSpacePressed) {
         const optionsList = Object.keys(this.customAutoCompletions).filter(key => 
           Object.keys(this.customAutoCompletions[key]).length
         );

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

@@ -39,6 +39,12 @@ export const CustomTheme = {
 };
 
 export const customisedThemeCss = {
+  '.cm-content' : {
+    fontFamily: 'inherit',
+  },
+  '.cm-scroller' : {
+    fontFamily: 'inherit',
+  },
   '.cm-tooltip-autocomplete': {
     padding: '9px 12px',
     backgroundColor: '#FFFFFF',
@@ -53,7 +59,7 @@ export const customisedThemeCss = {
     color: 'hsl(240 5.3% 26.1%)',
   },
   '.cm-tooltip.cm-completionInfo.cm-completionInfo-right': {
-    fontFamily: 'colfax-regular',
+    fontFamily: 'inherit',
     backgroundColor: '#FFFFFF',
     color: 'hsl(240 5.3% 26.1%)',
     padding: "6px 12px",
@@ -63,7 +69,7 @@ export const customisedThemeCss = {
     fontSize: '14px',
   },
   '.cm-tooltip.cm-tooltip-autocomplete > ul': {
-    fontFamily: 'colfax-regular',
+    fontFamily: 'inherit',
     fontWeight: '400',
   },
   '.cm-tooltip.cm-tooltip-autocomplete > ul > li': {

package/src/nile-file-preview/index.ts

@@ -0,0 +1 @@
+export { NileFilePreview } from './nile-file-preview';