@aquera/nile-elements 0.1.0 → 0.1.2

package/dist/nile-error-notification/nile-error-notification.cjs.js

@@ -1,2 +1,2 @@
-function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-error-notification.css.cjs.js"],function(_export,_context){"use strict";var i,r,o,t,e,n,_templateObject,s;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,_toPropertyKey(descriptor.key),descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _get(){if(typeof Reflect!=="undefined"&&Reflect.get){_get=Reflect.get.bind();}else{_get=function _get(target,property,receiver){var base=_superPropBase(target,property);if(!base)return;var desc=Object.getOwnPropertyDescriptor(base,property);if(desc.get){return desc.get.call(arguments.length<3?target:receiver);}return desc.value;};}return _get.apply(this,arguments);}function _superPropBase(object,property){while(!Object.prototype.hasOwnProperty.call(object,property)){object=_getPrototypeOf(object);if(object===null)break;}return object;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});Object.defineProperty(subClass,"prototype",{writable:false});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}return{setters:[function(_tslib){i=_tslib.__decorate;},function(_lit){r=_lit.LitElement;o=_lit.html;},function(_litDecoratorsJs){t=_litDecoratorsJs.property;e=_litDecoratorsJs.customElement;},function(_nileErrorNotificationCssCjsJs){n=_nileErrorNotificationCssCjsJs.s;}],execute:function execute(){_export("N",s=/*#__PURE__*/function(_r){function s(){var _this;_classCallCheck(this,s);_this=_callSuper(this,s,arguments),_this.errorMessage="",_this.color="";return _this;}_inherits(s,_r);return _createClass(s,[{key:"connectedCallback",value:function connectedCallback(){_get(_getPrototypeOf(s.prototype),"connectedCallback",this).call(this),this.color&&this.style.setProperty("--indication-color",this.color);}},{key:"render",value:function render(){return o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <div class=\"nile-error-notification\">\n        <nile-icon\n          name=\"info2\"\n          size=\"14\"\n          class=\"nile-error-notification__icon\"\n          part=\"icon\"\n          color=\"var(--indication-color)\"\n        ></nile-icon>\n        ","\n      </div>\n    "])),this.errorMessage);}}],[{key:"styles",get:function get(){return[n];}}]);}(r));i([t({type:String,reflect:!0})],s.prototype,"errorMessage",void 0),i([t({type:String,reflect:!0})],s.prototype,"color",void 0),_export("N",s=i([e("nile-error-notification")],s));}};});
+function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-error-notification.css.cjs.js"],function(_export,_context){"use strict";var i,r,o,t,e,n,_templateObject,s;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,_toPropertyKey(descriptor.key),descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});Object.defineProperty(subClass,"prototype",{writable:false});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}return{setters:[function(_tslib){i=_tslib.__decorate;},function(_lit){r=_lit.LitElement;o=_lit.html;},function(_litDecoratorsJs){t=_litDecoratorsJs.property;e=_litDecoratorsJs.customElement;},function(_nileErrorNotificationCssCjsJs){n=_nileErrorNotificationCssCjsJs.s;}],execute:function execute(){_export("N",s=/*#__PURE__*/function(_r){function s(){var _this;_classCallCheck(this,s);_this=_callSuper(this,s,arguments),_this.errorMessage="",_this.color="";return _this;}_inherits(s,_r);return _createClass(s,[{key:"updated",value:function updated(i){i.has("color")&&this.style.setProperty("--indication-color",this.color);}},{key:"render",value:function render(){return o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <div class=\"nile-error-notification\">\n        <nile-icon\n          name=\"info2\"\n          size=\"14\"\n          class=\"nile-error-notification__icon\"\n          part=\"icon\"\n          color=\"var(--indication-color)\"\n        ></nile-icon>\n        ","\n      </div>\n    "])),this.errorMessage);}}],[{key:"styles",get:function get(){return[n];}}]);}(r));i([t({type:String,reflect:!0})],s.prototype,"errorMessage",void 0),i([t({type:String,reflect:!0})],s.prototype,"color",void 0),_export("N",s=i([e("nile-error-notification")],s));}};});
 //# sourceMappingURL=nile-error-notification.cjs.js.map

package/dist/nile-error-notification/nile-error-notification.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-error-notification.cjs.js","sources":["../../../src/nile-error-notification/nile-error-notification.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-error-notification.css';\n\n/**\n * Nile icon component.\n *\n * @tag nile-error-notification\n *\n */\n@customElement('nile-error-notification')\nexport class NileErrorNotification extends LitElement {\n  /**\n   * The styles for ErrorNotification\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  // Represents the error message to be displayed to the user.\n  @property({ type: String, reflect: true  }) errorMessage: string = '';\n\n  @property({ type: String, reflect: true  }) color: string = '';\n  \n  connectedCallback(): void {\n    super.connectedCallback();\n    if(this.color){\n      this.style.setProperty('--indication-color',this.color)\n    }\n  }\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  public render(): TemplateResult {\n    return html`\n      <div class=\"nile-error-notification\">\n        <nile-icon\n          name=\"info2\"\n          size=\"14\"\n          class=\"nile-error-notification__icon\"\n          part=\"icon\"\n          color=\"var(--indication-color)\"\n        ></nile-icon>\n        ${this.errorMessage}\n      </div>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileErrorNotification;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-error-notification': NileErrorNotification;\n  }\n}\n"],"names":["NileErrorNotification","s","this","errorMessage","color","_this","_inherits","_r","_createClass","key","value","connectedCallback","super","style","setProperty","render","html","_templateObject","_taggedTemplateLiteral","get","styles","LitElement","__decorate","property","type","String","reflect","prototype","_export","customElement"],"mappings":"mkIAuBaA,4BAAN,SAAAC,EAAA,uEAUuCC,KAAAA,CAAYC,YAAAA,CAAW,EAEvBD,CAAAA,KAAAA,CAAKE,KAAW,CAAA,EAiC7D,QAAAC,KAAA,EAxCQC,SAAA,CAAAL,CAAA,CAAAM,EAAA,SAAAC,YAAA,CAAAP,CAAA,GAAAQ,GAAA,qBAAAC,KAAA,CASP,SAAAC,kBAAA,CAAAA,CACEC,IAAAA,CAAAA,eAAAA,CAAAA,CAAAA,CAAAA,SAAAA,4BAAAA,IAAAA,OACGV,IAAAA,CAAKE,OACNF,IAAKW,CAAAA,KAAAA,CAAMC,YAAY,oBAAqBZ,CAAAA,IAAAA,CAAKE,MAEpD,EAUM,GAAAK,GAAA,UAAAC,KAAA,UAAAK,OAAA,CACL,CAAA,MAAOC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,6SASLhB,IAAKC,CAAAA,YAAAA,EAGZ,CAAA,KAAAM,GAAA,UAAAU,GAAA,CArCM,SAAAA,IAAA,CAAWC,CAChB,MAAO,CAACA,CAAAA,CACT,EAOD,MAdyCC,CAAAA,GAUGC,CAAA,CAAA,CAA3CC,CAAS,CAAA,CAAEC,IAAMC,CAAAA,MAAAA,CAAQC,OAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAmC1B,CAAA2B,CAAAA,SAAAA,CAAA,cAAA,CAAA,IAAA,EAAA,CAAA,CAE1BL,CAAA,CAAA,CAA3CC,CAAS,CAAA,CAAEC,IAAMC,CAAAA,MAAAA,CAAQC,OAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAA4B1B,CAAA2B,CAAAA,SAAAA,CAAA,OAAA,CAAA,IAAA,EAAA,CAAA,CAAAC,OAAA,KAZpD5B,CAAqBsB,CAAAA,CAAAA,CAAA,CADjCO,CAAAA,CAAc,4BACF7B"}
+{"version":3,"file":"nile-error-notification.cjs.js","sources":["../../../src/nile-error-notification/nile-error-notification.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n  PropertyValues,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-error-notification.css';\n\n/**\n * Nile icon component.\n *\n * @tag nile-error-notification\n *\n */\n@customElement('nile-error-notification')\nexport class NileErrorNotification extends LitElement {\n  /**\n   * The styles for ErrorNotification\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  // Represents the error message to be displayed to the user.\n  @property({ type: String, reflect: true  }) errorMessage: string = '';\n\n  @property({ type: String, reflect: true  }) color: string = '';\n  \n  protected updated(_changedProperties: PropertyValues): void {\n    if(_changedProperties.has('color')){\n      this.style.setProperty('--indication-color',this.color)\n    }\n  }\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  public render(): TemplateResult {\n    return html`\n      <div class=\"nile-error-notification\">\n        <nile-icon\n          name=\"info2\"\n          size=\"14\"\n          class=\"nile-error-notification__icon\"\n          part=\"icon\"\n          color=\"var(--indication-color)\"\n        ></nile-icon>\n        ${this.errorMessage}\n      </div>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileErrorNotification;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-error-notification': NileErrorNotification;\n  }\n}\n"],"names":["NileErrorNotification","s","this","errorMessage","color","_this","_inherits","_r","_createClass","key","value","updated","_changedProperties","has","style","setProperty","render","html","_templateObject","_taggedTemplateLiteral","get","styles","LitElement","__decorate","property","type","String","reflect","prototype","_export","customElement"],"mappings":"6hHAwBaA,4BAAN,SAAAC,EAAA,uEAUuCC,KAAAA,CAAYC,YAAAA,CAAW,EAEvBD,CAAAA,KAAAA,CAAKE,KAAW,CAAA,EAgC7D,QAAAC,KAAA,EAvCQC,SAAA,CAAAL,CAAA,CAAAM,EAAA,SAAAC,YAAA,CAAAP,CAAA,GAAAQ,GAAA,WAAAC,KAAA,CASG,SAAAC,QAAQC,GACbA,CAAmBC,CAAAA,GAAAA,CAAI,UACxBX,IAAKY,CAAAA,KAAAA,CAAMC,YAAY,oBAAqBb,CAAAA,IAAAA,CAAKE,MAEpD,EAUM,GAAAK,GAAA,UAAAC,KAAA,UAAAM,OAAA,CACL,CAAA,MAAOC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,6SASLjB,IAAKC,CAAAA,YAAAA,EAGZ,CAAA,KAAAM,GAAA,UAAAW,GAAA,CApCM,SAAAA,IAAA,CAAWC,CAChB,MAAO,CAACA,CAAAA,CACT,EAOS,MAd+BC,CAAAA,GAUGC,CAAA,CAAA,CAA3CC,CAAS,CAAA,CAAEC,IAAMC,CAAAA,MAAAA,CAAQC,OAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAmC3B,CAAA4B,CAAAA,SAAAA,CAAA,cAAA,CAAA,IAAA,EAAA,CAAA,CAE1BL,CAAA,CAAA,CAA3CC,CAAS,CAAA,CAAEC,IAAMC,CAAAA,MAAAA,CAAQC,OAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAA4B3B,CAAA4B,CAAAA,SAAAA,CAAA,OAAA,CAAA,IAAA,EAAA,CAAA,CAAAC,OAAA,KAZpD7B,CAAqBuB,CAAAA,CAAAA,CAAA,CADjCO,CAAAA,CAAc,4BACF9B"}

package/dist/nile-error-notification/nile-error-notification.esm.js

@@ -1,4 +1,4 @@
-import{__decorate as i}from"tslib";import{LitElement as r,html as o}from"lit";import{property as t,customElement as e}from"lit/decorators.js";import{s as n}from"./nile-error-notification.css.esm.js";let s=class extends r{constructor(){super(...arguments),this.errorMessage="",this.color=""}static get styles(){return[n]}connectedCallback(){super.connectedCallback(),this.color&&this.style.setProperty("--indication-color",this.color)}render(){return o`
+import{__decorate as i}from"tslib";import{LitElement as r,html as o}from"lit";import{property as t,customElement as e}from"lit/decorators.js";import{s as n}from"./nile-error-notification.css.esm.js";let s=class extends r{constructor(){super(...arguments),this.errorMessage="",this.color=""}static get styles(){return[n]}updated(i){i.has("color")&&this.style.setProperty("--indication-color",this.color)}render(){return o`
       <div class="nile-error-notification">
         <nile-icon
           name="info2"

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

@@ -6,7 +6,7 @@
  */
 import { CSSResultArray, TemplateResult, PropertyValueMap } from 'lit';
 import { EditorView } from 'codemirror';
-import { EditorState } from '@codemirror/state';
+import { EditorState, Extension } from '@codemirror/state';
 import { CompletionContext, CompletionResult } from '@codemirror/autocomplete';
 import NileElement from '../internal/nile-element';
 /**
@@ -19,13 +19,15 @@ export declare class NileCodeEditor extends NileElement {
     codeEditor: HTMLInputElement;
     value: string;
     expandIcon: string;
+    placeholder: string;
     customAutoCompletions: object | any;
-    language: 'javascript' | 'sql' | 'json';
+    customCompletionsPaths: string[];
+    language: 'javascript' | 'sql' | 'json' | 'html';
     errorMessage: string;
     error: boolean;
     noborder: boolean;
     multiline: boolean;
-    suggestionBracketSupport: boolean;
+    allowVariableInCustomSuggestion: boolean;
     lineNumbers: boolean;
     lineNumbersMultiline: boolean;
     hasScroller: boolean;
@@ -39,6 +41,7 @@ export declare class NileCodeEditor extends NileElement {
     private restrictSingleLineComp;
     private readOnlyComp;
     private customCompletionComp;
+    private placeholderComp;
     /**
      * The styles for CodeEditor
      * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
@@ -51,21 +54,35 @@ export declare class NileCodeEditor extends NileElement {
     render(): TemplateResult;
     createNewView(emitEvent?: boolean): void;
     createState(): EditorState;
-    singleLineMultiLineToggle(): void;
-    convertToSingleLine(code: any): any;
+    customAutocomplete: (context: CompletionContext) => CompletionResult | null;
+    getNestedSuggestions(context: CompletionContext, textBeforeCursor: string, baseTextAfterSeperation: string): {
+        from: number;
+        options: {
+            label: string;
+            type: string;
+            info: string;
+            apply: string;
+            boost: number;
+        }[];
+    } | null;
+    getTopLevelSuggestions(context: CompletionContext, textBeforeCursor: string): {
+        from: number;
+        options: {
+            label: string;
+            type: string;
+            apply: string;
+            boost: number;
+        }[];
+    } | null;
     emitAfterTimeout(value: any): void;
     insertBetweenCode: (text: string) => void;
-    getLineNumbersExension(): import("@codemirror/state").Extension;
-    getLanguageExtension(): import("@codemirror/language").LanguageSupport;
-    getReadOnlyExtension(): import("@codemirror/state").Extension;
-    getSingleLineExtension(): import("@codemirror/state").Extension;
-    restrictSingleLine(): import("@codemirror/state").Extension;
-    emitNileExpand(): void;
-    customAutocomplete: (context: CompletionContext) => CompletionResult | null;
-    resolveNestedProperties: (obj: any, keys: any[]) => any;
-    parsePath(text: string): string[] | null;
-    isValidPath(path: string): boolean;
-    splitStringAtLastSeparator(input: string): string[];
+    singleLineMultiLineToggle(): void;
+    getLineNumbersExension(): Extension;
+    getLanguageExtension(): Extension;
+    getReadOnlyExtension(): Extension;
+    getSingleLineExtension(): Extension;
+    getPlaceholderExtension(): Extension;
+    restrictSingleLine(): Extension;
 }
 export default NileCodeEditor;
 declare global {

package/dist/src/nile-code-editor/nile-code-editor.js

@@ -9,11 +9,13 @@ import { html, } from 'lit';
 import { customElement, query, property } from 'lit/decorators.js';
 import { styles } from './nile-code-editor.css';
 import { EditorView } from 'codemirror';
-import { Compartment, EditorState, } from '@codemirror/state';
+import { placeholder } from '@codemirror/view';
+import { Compartment, EditorState } from '@codemirror/state';
 import { lineNumbers } from '@codemirror/view';
-import { javascript, javascriptLanguage, scopeCompletionSource, } from '@codemirror/lang-javascript';
+import { javascript, javascriptLanguage, } from '@codemirror/lang-javascript';
 import { sql } from '@codemirror/lang-sql';
 import { json } from '@codemirror/lang-json';
+import { html as htmlLang } from '@codemirror/lang-html';
 import { autocompletion } from '@codemirror/autocomplete';
 import NileElement from '../internal/nile-element';
 import { basicSetup } from './extensionSetup';
@@ -32,13 +34,15 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
         super(...arguments);
         this.value = '';
         this.expandIcon = "expand-2";
+        this.placeholder = "";
         this.customAutoCompletions = {};
+        this.customCompletionsPaths = [];
         this.language = 'javascript';
         this.errorMessage = '';
         this.error = false;
         this.noborder = false;
         this.multiline = false;
-        this.suggestionBracketSupport = false;
+        this.allowVariableInCustomSuggestion = false;
         this.lineNumbers = false;
         this.lineNumbersMultiline = true;
         this.hasScroller = true;
@@ -51,6 +55,15 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
         this.restrictSingleLineComp = new Compartment();
         this.readOnlyComp = new Compartment();
         this.customCompletionComp = new Compartment();
+        this.placeholderComp = new Compartment();
+        this.customAutocomplete = (context) => {
+            // Getting the valid last line, last text from the code editor
+            const text = context.state.doc.sliceString(0, context.pos);
+            const lastWord = text.split('\n').at(-1)?.split(' ').at(-1) || '';
+            const [textBeforeCursor, baseTextAfterSeperation] = splitStringAtLastSeparator(lastWord);
+            return this.getNestedSuggestions(context, textBeforeCursor, baseTextAfterSeperation)
+                || this.getTopLevelSuggestions(context, textBeforeCursor);
+        };
         this.insertBetweenCode = (text) => {
             const transaction = this.view.state.changeByRange(range => {
                 const { from, to } = range;
@@ -58,68 +71,6 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
             });
             this.view.dispatch(transaction);
         };
-        this.customAutocomplete = (context) => {
-            // Getting the valid last line, last text from the code editor
-            let text = context.state.doc.sliceString(0, context.pos);
-            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])) {
-                // Parse the path for dot or bracket notation
-                const path = this.parsePath(textBeforeCursor);
-                if (path) {
-                    let resolved = this.resolveNestedProperties(this.customAutoCompletions, path);
-                    if (textAfterSeperation) {
-                        const obj = {};
-                        Object.keys(resolved).forEach((key) => {
-                            if (key.toLowerCase().startsWith(textAfterSeperation.toLowerCase())) {
-                                obj[key] = resolved[key];
-                            }
-                        });
-                        resolved = obj;
-                    }
-                    // If resolved is an object, provide its keys as suggestions
-                    if (resolved && typeof resolved === 'object') {
-                        return {
-                            from: context.pos - textAfterSeperation.length,
-                            options: Object.keys(resolved).map((key) => ({
-                                label: key,
-                                type: 'property',
-                                info: `Key of ${path[path.length - 1]}`,
-                                apply: key,
-                                boost: 999
-                            })),
-                        };
-                    }
-                }
-            }
-            // Match for top-level object suggestions, e.g., "a"
-            const baseMatch = textBeforeCursor.match(/([a-zA-Z_$][\w$]*)$/);
-            if (baseMatch) {
-                const optionsList = Object.keys(this.customAutoCompletions).filter(key => key.toLowerCase().startsWith(textBeforeCursor.toLowerCase()));
-                return {
-                    from: context.pos - baseMatch[1].length,
-                    options: optionsList.map((key) => ({
-                        label: key,
-                        type: 'property',
-                        apply: key,
-                        boost: 999
-                    }))
-                };
-            }
-            // Default to an empty list if no match
-            return { from: context.pos, options: [] };
-        };
-        this.resolveNestedProperties = (obj, keys) => {
-            return keys.reduce((acc, key) => {
-                if (acc && typeof acc === 'object') {
-                    return acc[key];
-                }
-                return null;
-            }, obj);
-        };
         /* #endregion */
     }
     /**
@@ -168,6 +119,13 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
                 ]
             });
         }
+        if (changedProperties.has('placeholder')) {
+            this.view.dispatch({
+                effects: [
+                    this.placeholderComp.reconfigure(this.getPlaceholderExtension()),
+                ]
+            });
+        }
         if (changedProperties.has('lineNumbers') || changedProperties.has('lineNumbersMultiline')) {
             this.view.dispatch({
                 effects: [
@@ -175,11 +133,11 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
                 ]
             });
         }
-        if (changedProperties.has('customAutoCompletions') || changedProperties.has('suggestionBracketSupport')) {
+        if (changedProperties.has('customAutoCompletions') || changedProperties.has('customCompletionsPaths')) {
             this.view.dispatch({
                 effects: [
                     this.customCompletionComp.reconfigure(javascriptLanguage.data.of({
-                        autocomplete: this.suggestionBracketSupport ? this.customAutocomplete : scopeCompletionSource(this.customAutoCompletions),
+                        autocomplete: this.customAutocomplete
                     }))
                 ]
             });
@@ -200,15 +158,15 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
             'no-scroller': noScrollbar
         })}
       >
-        ${this.expandable
+      ${this.expandable
             ? html ` 
-          <nile-icon
-            name="${this.expandIcon}"
-            class="code-editor__icon__container"
-            size="16"
-            color="black"
-            @click="${(e) => this.emitNileExpand()}"
-          ></nile-icon>`
+        <nile-icon
+          name="${this.expandIcon}"
+          class="code-editor__icon__container"
+          size="16"
+          color="black"
+          @click="${(e) => this.emit('nile-expand')}"
+        ></nile-icon>`
             : ''}
       </div>
       ${hasErrorMessage
@@ -234,12 +192,13 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
         const lineNumbersExtension = this.lineNumbersComp.of(this.getLineNumbersExension());
         const readOnlyExtension = this.readOnlyComp.of(this.getReadOnlyExtension());
         const restrictSingleLineExtension = this.restrictSingleLineComp.of(this.getSingleLineExtension());
+        const placeholderExtension = this.placeholderComp.of(this.getPlaceholderExtension());
+        const language = this.getLanguageExtension();
         const customAutoCompletions = this.customCompletionComp.of(javascriptLanguage.data.of({
-            autocomplete: this.suggestionBracketSupport ? this.customAutocomplete : scopeCompletionSource(this.customAutoCompletions),
+            autocomplete: this.customAutocomplete
         }));
-        const language = this.getLanguageExtension();
         this.viewState = EditorState.create({
-            doc: !this.multiline ? this.convertToSingleLine(this.value) : this.value,
+            doc: !this.multiline ? convertToSingleLine(this.value) : this.value,
             extensions: [
                 basicSetup({
                     highlightActiveLine: false,
@@ -249,6 +208,7 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
                 readOnlyExtension,
                 restrictSingleLineExtension,
                 customAutoCompletions,
+                placeholderExtension,
                 autocompletion(),
                 language,
                 EditorView.theme(Theme),
@@ -265,28 +225,85 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
         });
         return this.viewState;
     }
+    getNestedSuggestions(context, textBeforeCursor, baseTextAfterSeperation) {
+        // Return early if not a valid path or not ending with . or [
+        if (!isValidPath(textBeforeCursor) || !['.', '['].includes(textBeforeCursor.at(-1))) {
+            return null;
+        }
+        const path = parsePath(textBeforeCursor);
+        if (!path)
+            return null;
+        const textAfterSeperation = baseTextAfterSeperation.replace(/["'\[]/g, '');
+        const isInString = textAfterSeperation !== baseTextAfterSeperation;
+        const isBracket = textBeforeCursor.at(-1) === '[';
+        // Return null if we're in a string after a dot
+        if (textBeforeCursor.at(-1) === '.' && isInString)
+            return null;
+        // Get nested properties and filter by text after separation if it exists
+        let resolved = resolveNestedProperties(this.customAutoCompletions, path);
+        if (!resolved || typeof resolved !== 'object')
+            return null;
+        if (textAfterSeperation) {
+            resolved = Object.fromEntries(Object.entries(resolved).filter(([key]) => key.toLowerCase().startsWith(textAfterSeperation.toLowerCase())));
+        }
+        return {
+            from: context.pos - textAfterSeperation.length,
+            options: Object.keys(resolved).map(key => ({
+                label: key,
+                type: 'property',
+                info: `Key of ${path[path.length - 1]}`,
+                apply: !this.allowVariableInCustomSuggestion && (isBracket && !isInString)
+                    ? `'${key}'`
+                    : key,
+                boost: 999
+            }))
+        };
+    }
+    getTopLevelSuggestions(context, textBeforeCursor) {
+        const baseMatch = textBeforeCursor.match(/([a-zA-Z_$][\w$]*)$/);
+        if (!baseMatch)
+            return null;
+        const optionsList = Object.keys(this.customAutoCompletions).filter(key => Object.keys(this.customAutoCompletions[key]).length &&
+            key.toLowerCase().startsWith(textBeforeCursor.toLowerCase()));
+        const options = optionsList.map((key) => ({
+            label: key,
+            type: 'property',
+            apply: key,
+            boost: 999
+        }));
+        if (this.customCompletionsPaths.length) {
+            this.customCompletionsPaths
+                .filter(path => path.toLocaleLowerCase().includes(textBeforeCursor.toLocaleLowerCase()))
+                .map(path => {
+                options.push({
+                    label: '' + path,
+                    type: 'property',
+                    apply: '' + path,
+                    boost: 998
+                });
+            });
+        }
+        return {
+            from: context.pos - baseMatch[1].length,
+            options: options
+        };
+    }
+    emitAfterTimeout(value) {
+        if (this.timeOut)
+            clearTimeout(this.timeOut);
+        this.timeOut = setTimeout(() => this.emit('nile-change', value, false), TIME_OUT_DURATION);
+    }
     singleLineMultiLineToggle() {
         this.view.dispatch({
             changes: {
                 from: 0,
                 to: this.view.state.doc.length,
                 insert: !this.multiline
-                    ? this.convertToSingleLine(this.value)
+                    ? convertToSingleLine(this.value)
                     : this.value,
             },
         });
     }
-    convertToSingleLine(code) {
-        if (!code)
-            return '';
-        // Remove line breaks and unnecessary whitespace
-        return code.replace(/\s+/g, ' ').trim();
-    }
-    emitAfterTimeout(value) {
-        if (this.timeOut)
-            clearTimeout(this.timeOut);
-        this.timeOut = setTimeout(() => this.emit('nile-change', value, false), TIME_OUT_DURATION);
-    }
     //EXTENSION CONFIGURATIONS
     getLineNumbersExension() {
         return (!this.multiline && this.lineNumbers) || (this.multiline && this.lineNumbersMultiline) ? lineNumbers() : [];
@@ -297,6 +314,8 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
                 return sql();
             case 'json':
                 return json();
+            case 'html':
+                return htmlLang();
             default:
                 return javascript();
         }
@@ -307,45 +326,12 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
     getSingleLineExtension() {
         return !this.multiline ? EditorState.transactionFilter.of(tr => tr.newDoc.lines > 1 ? [] : tr) : [];
     }
+    getPlaceholderExtension() {
+        return this.placeholder ? placeholder(this.placeholder) : [];
+    }
     restrictSingleLine() {
         return EditorState.transactionFilter.of(tr => tr.newDoc.lines > 1 ? [] : tr);
     }
-    emitNileExpand() {
-        this.emit('nile-expand', { expand: true }, false);
-    }
-    parsePath(text) {
-        const regex = /([a-zA-Z_$][\w$]*)(\[(?:[^\]]+)\]|\.[a-zA-Z_$][\w$]*)*/g;
-        const matches = [...text.matchAll(regex)];
-        if (matches.length > 0) {
-            const base = matches[0][1]; // The base object name
-            const keys = [base];
-            // Extract keys from dot or bracket notation
-            const pathMatches = text.match(/\[(.*?)\]|\.(\w+)/g) || [];
-            for (const match of pathMatches) {
-                if (match.startsWith('[')) {
-                    keys.push(match.slice(1, -1).replace(/['"]/g, '')); // Remove brackets and quotes
-                }
-                else if (match.startsWith('.')) {
-                    keys.push(match.slice(1));
-                }
-            }
-            return keys;
-        }
-        return null;
-    }
-    ;
-    isValidPath(path) {
-        // Regex to validate the format of the string
-        const regex = /^([a-zA-Z_$][\w$]*)(\.[a-zA-Z_$][\w$]*|\[\s*(['"]?[a-zA-Z0-9_$]*['"]?)\s*\])*([\.\[])?$/;
-        // Test the string against the regex
-        return regex.test(path);
-    }
-    splitStringAtLastSeparator(input) {
-        const lastSeparatorIndex = Math.max(input.lastIndexOf('.'), input.lastIndexOf('['));
-        if (lastSeparatorIndex === -1)
-            return [input, ''];
-        return [input.slice(0, lastSeparatorIndex + 1), input.slice(lastSeparatorIndex + 1)];
-    }
 };
 __decorate([
     query('.code-mirror')
@@ -356,9 +342,15 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true, attribute: true })
 ], NileCodeEditor.prototype, "expandIcon", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: true })
+], NileCodeEditor.prototype, "placeholder", void 0);
 __decorate([
     property({ type: Object, reflect: true, attribute: true })
 ], NileCodeEditor.prototype, "customAutoCompletions", void 0);
+__decorate([
+    property({ type: Array, reflect: true, attribute: true })
+], NileCodeEditor.prototype, "customCompletionsPaths", void 0);
 __decorate([
     property({ type: String, reflect: true, attribute: true })
 ], NileCodeEditor.prototype, "language", void 0);
@@ -376,7 +368,7 @@ __decorate([
 ], NileCodeEditor.prototype, "multiline", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: true })
-], NileCodeEditor.prototype, "suggestionBracketSupport", void 0);
+], NileCodeEditor.prototype, "allowVariableInCustomSuggestion", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: true })
 ], NileCodeEditor.prototype, "lineNumbers", void 0);
@@ -400,4 +392,52 @@ NileCodeEditor = __decorate([
 ], NileCodeEditor);
 export { NileCodeEditor };
 export default NileCodeEditor;
+function parsePath(text) {
+    const regex = /([a-zA-Z_$][\w$]*)(\[(?:[^\]]+)\]|\.[a-zA-Z_$][\w$]*)*/g;
+    const matches = [...text.matchAll(regex)];
+    if (matches.length > 0) {
+        const base = matches[0][1]; // The base object name
+        const keys = [base];
+        // Extract keys from dot or bracket notation
+        const pathMatches = text.match(/\[(.*?)\]|\.(\w+)/g) || [];
+        for (const match of pathMatches) {
+            if (match.startsWith('[')) {
+                keys.push(match.slice(1, -1).replace(/['"]/g, '')); // Remove brackets and quotes
+            }
+            else if (match.startsWith('.')) {
+                keys.push(match.slice(1));
+            }
+        }
+        return keys;
+    }
+    return null;
+}
+;
+function splitStringAtLastSeparator(input) {
+    const lastSeparatorIndex = Math.max(input.lastIndexOf('.'), input.lastIndexOf('['));
+    if (lastSeparatorIndex === -1)
+        return [input, ''];
+    return [input.slice(0, lastSeparatorIndex + 1), input.slice(lastSeparatorIndex + 1)];
+}
+function resolveNestedProperties(obj, keys) {
+    return keys.reduce((acc, key) => {
+        if (acc && typeof acc === 'object') {
+            return acc[key];
+        }
+        return null;
+    }, obj);
+}
+;
+function isValidPath(path) {
+    // Regex to validate the format of the string
+    const regex = /^([a-zA-Z_$][\w$]*)(\.[a-zA-Z_$][\w$]*|\[\s*(['"]?[a-zA-Z0-9_$]*['"]?)\s*\])*([\.\[])?$/;
+    // Test the string against the regex
+    return regex.test(path);
+}
+function convertToSingleLine(code) {
+    if (!code)
+        return '';
+    // Remove line breaks and unnecessary whitespace
+    return code.replace(/\s+/g, ' ').trim();
+}
 //# sourceMappingURL=nile-code-editor.js.map