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

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

@@ -0,0 +1,156 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit';
+
+/**
+ * Resizable Styles Utility
+ * Centralized styles for resizable table functionality
+ */
+
+export const resizableHostStyles = css`
+  :host([resizable]) {
+    position: relative;
+    overflow: hidden;
+    table-layout: fixed;
+  }
+`;
+
+export const resizableHeaderStyles = css`
+  :host([resizable]) {
+    position: relative;
+  }
+
+  :host([resizable]) .header__item__wrapper {
+    border-right: 1px solid var(--nile-colors-neutral-400);
+    position: relative;
+  }
+`;
+
+export const resizerStyles = css`
+  .resizer {
+    position: absolute;
+    right: 0;
+    top: -1000px;
+    bottom: -1000px;
+    width: 8px;
+    cursor: col-resize;
+    user-select: none;
+    background-color: var(--nile-colors-neutral-100);
+    transition: background-color 0.2s;
+    z-index: 10;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    pointer-events: none;
+  }
+
+  :host([resizable]):hover .resizer {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .resizer::before {
+    content: '';
+    position: absolute;
+    right: 3px;
+    top: 0;
+    width: 2px;
+    height: 100%;
+    background-color: var(--nile-colors-neutral-500);
+    opacity: 0.8;
+  }
+
+  .resizer:hover {
+    background-color: var(--nile-colors-neutral-400);
+  }
+
+  .resizer:hover::before {
+    background-color: var(--nile-colors-neutral-700);
+    opacity: 1;
+  }
+
+  .resizer.resizing {
+    background-color: var(--nile-colors-neutral-400);
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .resizer.resizing::before {
+    background-color: var(--nile-colors-neutral-700);
+    opacity: 1;
+    width: 3px;
+  }
+
+  :host([resizable]) .column {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
+`;
+
+export const headerResizerStyles = css`
+  .resizer {
+    position: absolute;
+    right: -2px;
+    top: -1000px;
+    bottom: -1000px;
+    width: 8px;
+    cursor: ew-resize;
+    user-select: none;
+    transition: background-color 0.2s;
+    z-index: 10;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+
+  :host([resizable]):hover .resizer {
+    opacity: 1;
+  }
+
+  .resizer::before {
+    content: '';
+    position: absolute;
+    height: 100%;
+    opacity: 0.8;
+  }
+
+  .resizer.resizing {
+    border-right: 4px double var(--nile-colors-neutral-400);
+    background-color: transparent;
+    opacity: 1;
+  }
+
+  :host([resizable]) .headers {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+
+export const resizableSlotStyles = css`
+  :host([resizable]) ::slotted(*) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
+
+  :host([resizable]) ::slotted(span),
+  :host([resizable]) ::slotted(div),
+  :host([resizable]) ::slotted(p) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
+`;
+
+export const tableLayoutStyles = css`
+  .nile__table__body[resizable] {
+    table-layout: fixed;
+  }
+`; 

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';