@aquera/nile-elements 1.0.1-beta-1.5 → 1.0.1-beta-1.7

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.0.1-beta-1.5",
+  "version": "1.0.1-beta-1.7",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -87,7 +87,8 @@
     "./nile-inline-edit": "./dist/src/nile-inline-edit/index.js",
     "./nile-table": "./dist/src/nile-table/index.js",
     "./nile-pagination": "./dist/src/nile-pagination/index.js",
-    "./nile-slider": "./dist/src/nile-slider/index.js"
+    "./nile-slider": "./dist/src/nile-slider/index.js",
+    "./nile-option-group": "./dist/src/nile-option-group/index.js"
   },
   "scripts": {
     "analyze": "cem analyze --litelement",

package/src/index.ts

@@ -77,9 +77,9 @@ export { NileSectionMessage } from './nile-section-message';
 export { NileToolbar } from './nile-toolbar';
 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 { NileFileUpload } from './nile-file-upload';
 export { NileFilePreview } from './nile-file-preview';
+export { NileOptionGroup } from './nile-option-group';

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

@@ -103,6 +103,23 @@ export function synchronizeColumnWidth(sourceElement: HTMLElement, newWidth: num
   });
 }
 
+/**
+ * Resets all column widths in a table to their default values
+ * @param tableBody The table body element to reset
+ */
+export function resetAllColumnWidths(tableBody: HTMLElement): void {
+  const headerItems = tableBody.querySelectorAll('nile-table-header-item');
+  const cellItems = tableBody.querySelectorAll('nile-table-cell-item');
+  
+  headerItems.forEach(header => {
+    header.style.removeProperty('width');
+  });
+  
+  cellItems.forEach(cell => {
+    cell.style.removeProperty('width');
+  });
+}
+
 /**
  * Checks if an element has the resizable attribute
  * @param element The element to check
@@ -137,15 +154,21 @@ export function createResizeHandler(element: HTMLElement, minWidth: number = 50)
  * @returns True if any columns have resizable attribute
  */
 export function hasResizableColumns(tableBody: HTMLElement): boolean {
-  const headerItems = tableBody.querySelectorAll('nile-table-header-item');
-  const cellItems = tableBody.querySelectorAll('nile-table-cell-item');
+  const directChildren = Array.from(tableBody.children);
+  
+  const hasResizableHeaders = directChildren.some(child => {
+    if (child.tagName.toLowerCase() === 'nile-table-header-item') {
+      return child.hasAttribute('resizable');
+    }
+    return false;
+  });
   
-  const hasResizableHeaders = Array.from(headerItems).some(item => 
-    isResizable(item)
-  );
-  const hasResizableCells = Array.from(cellItems).some(item => 
-    isResizable(item)
-  );
+  const hasResizableCells = directChildren.some(child => {
+    if (child.tagName.toLowerCase() === 'nile-table-cell-item') {
+      return child.hasAttribute('resizable');
+    }
+    return false;
+  });
   
   return hasResizableHeaders || hasResizableCells;
 } 

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

@@ -35,13 +35,12 @@ 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,acceptCompletion, 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';
-import { Theme as DefaultTheme, customisedThemeCss } from './theme';
+import { Theme as DefaultTheme, customisedThemeCss, fontFamily } from './theme';
 import { keymap } from '@codemirror/view';
-import { acceptCompletion } from '@codemirror/autocomplete';
 
 // Choose the appropriate mode for your use case
 
@@ -102,7 +101,9 @@ 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;
+
+  @property({ type: Boolean, reflect: true, attribute: true }) defaultFont: boolean = false;
 
   public view: EditorView;
   public viewState:EditorState;
@@ -116,7 +117,9 @@ export class NileCodeEditor extends NileElement {
   private placeholderComp = new Compartment();
   private defaultSyntaxHighlightingComp = new Compartment();
   private themeComp = new Compartment();
+  private autoCompletionComp = 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]`
@@ -178,6 +181,15 @@ export class NileCodeEditor extends NileElement {
         ]
       })
     }
+    if (changedProperties.has('aboveCursor')) {
+      this.view.dispatch({
+        effects: [
+          this.autoCompletionComp.reconfigure(
+            autocompletion({ aboveCursor: this.aboveCursor })
+          )
+        ]
+      });
+    }    
     if (changedProperties.has('placeholder')) {
       this.view.dispatch({ 
         effects: [
@@ -261,7 +273,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(){
@@ -290,7 +322,9 @@ export class NileCodeEditor extends NileElement {
         customAutoCompletions,
         placeholderExtension,
         defaultSyntaxHighlightingExtension,
-        autocompletion({aboveCursor: this.aboveCursor}),
+        this.autoCompletionComp.of(
+          autocompletion({ aboveCursor: this.aboveCursor })
+        ),
         language,
         customThemeExtension,
         this.getTabCompletionKeymap(),
@@ -382,7 +416,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
         );
@@ -513,10 +547,16 @@ export class NileCodeEditor extends NileElement {
   }
 
   getCustomThemeExtension(): Extension {
-    if (this.customThemeCSS) {
+    if(this.customThemeCSS) {
+      if(this.defaultFont){
+        return [EditorView.theme(this.customThemeCSS as { [selector: string]: StyleSpec }), EditorView.theme(customisedThemeCss),EditorView.theme(fontFamily)];
+      }
       return [EditorView.theme(this.customThemeCSS as { [selector: string]: StyleSpec }), EditorView.theme(customisedThemeCss)];
     }
-    return [EditorView.theme(customisedThemeCss), EditorView.theme(DefaultTheme)];
+    if(this.defaultFont){
+      return [EditorView.theme(customisedThemeCss), EditorView.theme(fontFamily)];
+    }
+    return [EditorView.theme(customisedThemeCss)];
   }
 
   restrictSingleLine() {

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

@@ -38,7 +38,23 @@ export const CustomTheme = {
   },
 };
 
+export const fontFamily = {
+  '.cm-tooltip.cm-tooltip-autocomplete > ul' : {
+    fontFamily: 'monospace !important',
+    fontWeight: '400',
+  },
+  '.cm-content' : {
+    fontFamily: 'monospace !important',
+  }
+}
+
 export const customisedThemeCss = {
+  '.cm-content' : {
+    fontFamily: 'inherit',
+  },
+  '.cm-scroller' : {
+    fontFamily: 'inherit',
+  },
   '.cm-tooltip-autocomplete': {
     padding: '9px 12px',
     backgroundColor: '#FFFFFF',
@@ -53,7 +69,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 +79,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': {
@@ -147,4 +163,4 @@ export const customisedThemeCss = {
   '.cm-completionLabel': {
     marginLeft: '18px',
   }
-};
+};