@aquera/nile-elements 0.0.130 → 0.0.132

package/package.json

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

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

@@ -53,6 +53,8 @@ export class NileCodeEditor extends NileElement {
 
   @property({ type: String, reflect: true , attribute: true }) value = '';
 
+  @property({ type: String, reflect: true , attribute: true }) expandIcon = "expand-2";
+
   @property({ type: Object, reflect: true , attribute: true }) customAutoCompletions: object | any = {};
 
   @property({ type: String, reflect: true , attribute: true}) language: 'javascript' | 'sql' | 'json' = 'javascript';
@@ -99,7 +101,6 @@ export class NileCodeEditor extends NileElement {
 
   connectedCallback(): void {
     super.connectedCallback();
-    this.createState()
     this.emit('nile-init',undefined,false);
   }
 
@@ -176,7 +177,7 @@ export class NileCodeEditor extends NileElement {
         ${this.expandable
         ? html` 
           <nile-icon
-            name="expand-2"
+            name="${this.expandIcon}"
             class="code-editor__icon__container"
             size="16"
             color="black"
@@ -195,6 +196,7 @@ export class NileCodeEditor extends NileElement {
 
   createNewView(emitEvent=true){
     if(this.view) this.view.destroy();
+    this.createState()
     this.view = new EditorView({
       state: this.viewState,
       parent: this.codeEditor
@@ -265,7 +267,7 @@ export class NileCodeEditor extends NileElement {
   public insertBetweenCode=(text: string) => {
     const transaction = this.view.state.changeByRange(range => {
       const { from, to } = range;
-      return { changes: { from, to, insert: text }, range };
+      return { changes: { from:from, to, insert: text }, range };
     });
     this.view.dispatch(transaction);
   }
@@ -309,7 +311,10 @@ export class NileCodeEditor extends NileElement {
   customAutocomplete = (context: CompletionContext): CompletionResult | null => {
     // Getting the valid last line, last text from the code editor
     let text = context.state.doc.sliceString(0, context.pos);
-    const [textBeforeCursor,textAfterSeperation]=this.splitStringAtLastSeparator(text.split('\n').at(-1)?.split(' ').at(-1)+'')
+    const [textBeforeCursor,baseTextAfterSeperation]=this.splitStringAtLastSeparator(text.split('\n').at(-1)?.split(' ').at(-1)+'')
+    const textAfterSeperation=baseTextAfterSeperation.replace(/["'\[]/g, '')
+
+    const isSuggestionString=textAfterSeperation!=baseTextAfterSeperation;
 
     if (!this.isValidPath(textBeforeCursor)) return { from: context.pos, options: [] };
     if(['.', '['].includes(textBeforeCursor[textBeforeCursor.length - 1])){
@@ -320,7 +325,7 @@ export class NileCodeEditor extends NileElement {
         if(textAfterSeperation){
           const obj:any={}
           Object.keys(resolved).forEach((key)=>{
-            if(key.startsWith(textAfterSeperation)){
+            if(key.toLowerCase().startsWith(textAfterSeperation.toLowerCase())){
               obj[key]=resolved[key]
             }
           })
@@ -329,12 +334,12 @@ export class NileCodeEditor extends NileElement {
         // If resolved is an object, provide its keys as suggestions
         if (resolved && typeof resolved === 'object') {
           return {
-            from: context.pos,
+            from: context.pos-textAfterSeperation.length,
             options: Object.keys(resolved).map((key) => ({
               label: key,
               type: 'property',
               info: `Key of ${path[path.length - 1]}`,
-              apply: key.slice(textAfterSeperation.length),
+              apply: key,
               boost: 999
             })),
           };
@@ -345,7 +350,7 @@ export class NileCodeEditor extends NileElement {
     // Match for top-level object suggestions, e.g., "a"
     const baseMatch: any = textBeforeCursor.match(/([a-zA-Z_$][\w$]*)$/);
     if (baseMatch) {
-      const optionsList=Object.keys(this.customAutoCompletions).filter(key=>key.startsWith(textBeforeCursor));
+      const optionsList=Object.keys(this.customAutoCompletions).filter(key=>key.toLowerCase().startsWith(textBeforeCursor.toLowerCase()));
       return {
         from: context.pos - baseMatch[1].length,
         options: optionsList.map((key) => ({
@@ -398,8 +403,8 @@ export class NileCodeEditor extends NileElement {
 
   splitStringAtLastSeparator(input:string) {
     const lastSeparatorIndex = Math.max(input.lastIndexOf('.'), input.lastIndexOf('['));
-    if (lastSeparatorIndex === -1) return [input, ''];  
-    return [input.slice(0, lastSeparatorIndex + 1), input.slice(lastSeparatorIndex + 1).replace(/["'\[]/g, '')];
+    if (lastSeparatorIndex === -1) return [input, ''];
+    return [input.slice(0, lastSeparatorIndex + 1), input.slice(lastSeparatorIndex + 1)];
   }
   /* #endregion */
 }

package/src/nile-error-notification/nile-error-notification.css.ts

@@ -12,6 +12,7 @@ import { css } from 'lit-element';
  */
 export const styles = css`
   :host {
+    --indication-color: var(--nile-colors-red-500);
   }
 
   .nile-error-notification {
@@ -21,12 +22,12 @@ export const styles = css`
     font-weight: 400;
     line-height: 12px;
     letter-spacing: 0.2px;
-    border: 1px solid var(--nile-colors-red-500);
-    border-left: 6px solid var(--nile-colors-red-500);
+    border: 1px solid var(--indication-color);
+    border-left: 6px solid var(--indication-color);
     border-radius: 4px;
     padding: 8px;
     background: var(--nile-colors-neutral-100);
-    color: var(--nile-colors-red-500);
+    color: var(--indication-color);
     box-sizing: border-box;
   }
 

package/src/nile-error-notification/nile-error-notification.ts

@@ -32,8 +32,16 @@ export class NileErrorNotification extends LitElement {
   }
 
   // Represents the error message to be displayed to the user.
-  @property({ type: String, reflect: true  })
-  errorMessage: string = '';
+  @property({ type: String, reflect: true  }) errorMessage: string = '';
+
+  @property({ type: String, reflect: true  }) color: string = '';
+  
+  connectedCallback(): void {
+    super.connectedCallback();
+    if(this.color){
+      this.style.setProperty('--indication-color',this.color)
+    }
+  }
 
   /* #endregion */
 
@@ -51,7 +59,7 @@ export class NileErrorNotification extends LitElement {
           size="14"
           class="nile-error-notification__icon"
           part="icon"
-          color="#E5434D"
+          color="var(--indication-color)"
         ></nile-icon>
         ${this.errorMessage}
       </div>

package/vscode-html-custom-data.json

@@ -726,12 +726,16 @@
     },
     {
       "name": "nile-code-editor",
-      "description": "Nile icon component.\n\nEvents:\n\n  * `nile-focus` {`Event`} - \n\n  * `nile-blur` {`Event`} - \n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `language` {`\"javascript\" | \"sql\" | \"json\"`} - \n\n  * `error-message` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `suggestionBracketSupport` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\nProperties:\n\n  * `codeEditor` {`HTMLInputElement`} - \n\n  * `value` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `language` {`\"javascript\" | \"sql\" | \"json\"`} - \n\n  * `errorMessage` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `suggestionBracketSupport` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `view` - \n\n  * `viewState` - \n\n  * `timeOut` - \n\n  * `lineNumbersComp` - \n\n  * `restrictSingleLineComp` - \n\n  * `readOnlyComp` - \n\n  * `customCompletionComp` - \n\n  * `insertBetweenCode` - \n\n  * `customAutocomplete` - \n\n  * `resolveNestedProperties` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile icon component.\n\nEvents:\n\n  * `nile-focus` {`Event`} - \n\n  * `nile-blur` {`Event`} - \n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `language` {`\"javascript\" | \"sql\" | \"json\"`} - \n\n  * `error-message` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `suggestionBracketSupport` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\nProperties:\n\n  * `codeEditor` {`HTMLInputElement`} - \n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `language` {`\"javascript\" | \"sql\" | \"json\"`} - \n\n  * `errorMessage` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `suggestionBracketSupport` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `view` - \n\n  * `viewState` - \n\n  * `timeOut` - \n\n  * `lineNumbersComp` - \n\n  * `restrictSingleLineComp` - \n\n  * `readOnlyComp` - \n\n  * `customCompletionComp` - \n\n  * `insertBetweenCode` - \n\n  * `customAutocomplete` - \n\n  * `resolveNestedProperties` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "value",
           "description": "`value` {`string`} - \n\nProperty: value\n\nDefault: "
         },
+        {
+          "name": "expandIcon",
+          "description": "`expandIcon` {`string`} - \n\nProperty: expandIcon\n\nDefault: expand-2"
+        },
         {
           "name": "customAutoCompletions",
           "description": "`customAutoCompletions` - \n\nProperty: customAutoCompletions\n\nDefault: [object Object]"
@@ -1250,11 +1254,15 @@
     },
     {
       "name": "nile-error-notification",
-      "description": "Nile icon component.\n\nAttributes:\n\n  * `errorMessage` {`string`} - \n\nProperties:\n\n  * `errorMessage` {`string`} - ",
+      "description": "Nile icon component.\n\nAttributes:\n\n  * `errorMessage` {`string`} - \n\n  * `color` {`string`} - \n\nProperties:\n\n  * `errorMessage` {`string`} - \n\n  * `color` {`string`} - ",
       "attributes": [
         {
           "name": "errorMessage",
           "description": "`errorMessage` {`string`} - \n\nProperty: errorMessage\n\nDefault: "
+        },
+        {
+          "name": "color",
+          "description": "`color` {`string`} - \n\nProperty: color\n\nDefault: "
         }
       ]
     },