@aquera/nile-elements 0.1.9 → 0.1.10

package/package.json

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

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

@@ -11,25 +11,28 @@ import { css } from 'lit';
  * CodeEditor CSS
  */
 export const styles = css`
+  *{
+    box-sizing:border-box;
+  }
+
   :host {
     display: block;
   }
 
-  .code-mirror {
+  .code__editor__container {
     display: flex;
-    justify-content: flex-end;
-    flex-direction: row-reverse;
     padding: 5px;
     border-radius: 5px;
     border: 1px solid rgb(204, 204, 204);
+    position: relative;
   }
 
   .no-scroller .cm-scroller{
-    scrollbar-width:none;
+    scrollbar-width: none;
   }
 
   .error {
-    border-color: #e5434d;
+    border-color: var(--nile-colors-red-500);
   }
 
   .noborder {
@@ -45,14 +48,19 @@ export const styles = css`
     outline: none;
   }
 
-  .code-editor__icon__container {
+  .expand__icon__container{
     display: none;
+    position: absolute;
+    border-radius: 5px;
     cursor: pointer;
-    align-self: start;
-    padding: 5px 5px 0px 0px;
+    right: 0px;
+    top: 5px;
+    z-index: 1;
+    padding: 5px;
+    background-color: var(--nile-colors-white-base);
   }
   
-  .code-mirror:hover > .code-editor__icon__container {
+  .code__editor__container:hover > .expand__icon__container{
     display: flex;
   }
 `;

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

@@ -47,7 +47,7 @@ import { Theme } from './theme';
 @customElement('nile-code-editor')
 export class NileCodeEditor extends NileElement {
   
-  @query('.code-mirror') codeEditor: HTMLInputElement;
+  @query('.code__editor__container') codeEditor: HTMLInputElement;
 
   @property({ type: String, reflect: true , attribute: true }) value = '';
 
@@ -179,22 +179,22 @@ export class NileCodeEditor extends NileElement {
     return html`<div
         part="code-editor-base"
         class=${classMap({
-          'code-mirror': true,
+          'code__editor__container': true,
           'noborder': noborder,
           'error': hasError || hasErrorMessage,
-          'code-mirror__singleline': !this.multiline,
+          'code__editor__singleline': !this.multiline,
           'no-scroller': noScrollbar
         })}
       >
       ${this.expandable
       ? html` 
-        <nile-icon
-          name="${this.expandIcon}"
-          class="code-editor__icon__container"
-          size="16"
-          color="black"
-          @click="${(e: CustomEvent) => this.emit('nile-expand')}"
-        ></nile-icon>`
+        <div @click="${(e: CustomEvent) => this.emit('nile-expand')}" class="expand__icon__container">
+          <nile-icon
+            name="${this.expandIcon}"
+            size="16"
+            color="black"
+          ></nile-icon>
+        </div>`
       : ''}
       </div>
       ${hasErrorMessage