@aquera/nile-elements 0.0.33 → 0.0.35

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.33",
+  "version": "0.0.35",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -34,7 +34,9 @@
     "element-internals-polyfill": "^1.1.20",
     "lit": "^2.0.2",
     "@floating-ui/dom": "^1.2.1",
-    "composed-offset-position": "^0.0.4"
+    "composed-offset-position": "^0.0.4",
+    "@codemirror/lang-javascript": "6.2.1",
+    "codemirror": "6.0.1"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",

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

@@ -17,9 +17,14 @@ import { styles } from './nile-code-editor.css';
 import { EditorView } from 'codemirror';
 import { ViewUpdate } from '@codemirror/view';
 import { EditorState, Compartment } from '@codemirror/state';
-import { javascript, javascriptLanguage } from '@codemirror/lang-javascript';
+import {
+  javascript,
+  javascriptLanguage,
+  scopeCompletionSource,
+  completionPath,
+} from '@codemirror/lang-javascript';
 import { autocompletion } from '@codemirror/autocomplete';
-import { CompletionContext } from '@codemirror/autocomplete';
+import { CompletionContext, Completion } from '@codemirror/autocomplete';
 import NileElement from '../internal/nile-element';
 import { basicSetup } from './extensionSetup';
 
@@ -61,7 +66,7 @@ export class NileCodeEditor extends NileElement {
 
   updated() {
     const customAutoCompletions = javascriptLanguage.data.of({
-      autocomplete: this.customOptions,
+      autocomplete: scopeCompletionSource(this.customOptions),
     });
     let startState = EditorState.create({
       doc: !this.multiline ? this.convertToSingleLine(this.value) : this.value,

package/src/nile-switcher/nile-switcher.css.ts

@@ -16,22 +16,24 @@ export const styles = css`
     box-sizing: border-box;
   }
 
-  .switcher-icon-container {
-    cursor: pointer;
-    justify-content: center;
+  .switcher__label {
     display: flex;
     align-items: center;
-    margin-bottom: 6px;
-    height: 28px;
-    width: 28px;
-    border-radius: 4px;
+    color: inherit;
+    color: var(--nile-colors-dark-900);
+    font-family: Colfax-regular;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 14px;
+    letter-spacing: 0.2px;
   }
 
   .switcher-icon-container.current {
     background: var(--nile-colors-blue-400);
   }
 
-  .switcher-input-container {
+  .switcher-container {
     display: flex;
   }
 
@@ -43,21 +45,36 @@ export const styles = css`
     flex-direction: column;
   }
 
-  .switcher-block > :first-child {
-    align-self: end;
-  }
-
   .switcher-inline > :nth-child(2) {
     flex: 1;
   }
 
-  .switcher-input-container > :first-child {
+  .switcher-icons-container {
     display: flex;
+    margin-left: auto;
     gap: 0.5rem;
     max-height: 38px;
     align-items: center;
   }
 
+  .switcher-block > .switcher-icons-container {
+    margin-left: auto;
+  }
+
+  .label-container {
+    display: flex;
+  }
+
+  .switcher-icon-container {
+    cursor: pointer;
+    justify-content: center;
+    display: flex;
+    align-items: center;
+    margin-bottom: 6px;
+    height: 28px;
+    width: 28px;
+    border-radius: 4px;
+  }
   nile-radio {
     display: inline-block;
     padding-right: 10px;

package/src/nile-switcher/nile-switcher.ts

@@ -14,6 +14,7 @@ import { choose } from 'lit/directives/choose.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { watch } from '../internal/watch';
+import { HasSlotController } from '../internal/slot';
 
 /**
  * @summary Allows you to switch between nile elements
@@ -59,6 +60,7 @@ export interface switchInputType {
   error?: boolean;
   errorMessage?: string;
   options?: Array<any>;
+  customAutoCompletions?: any;
   helperText?: string;
   multiple?: boolean;
   noborder?: boolean;
@@ -100,6 +102,8 @@ export class NileSwitcher extends NileElement {
    */
   static styles: CSSResultGroup = styles;
 
+  private readonly hasSlotController = new HasSlotController(this, 'label');
+
   @property({ type: Object }) nileSwitchConfig: switchconfig;
 
   @property({ type: Number }) current: Number = 0;
@@ -108,7 +112,6 @@ export class NileSwitcher extends NileElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.setCurrentInput();
     this.emit('nile-init');
   }
 
@@ -300,7 +303,7 @@ export class NileSwitcher extends NileElement {
     const {
       value,
       multiLine,
-      options,
+      customAutoCompletions,
       disabled,
       readonly,
       errorMessage,
@@ -319,7 +322,7 @@ export class NileSwitcher extends NileElement {
         this.handleChange(e, INPUT_TYPE_NAMES.CODE_EDITOR)}"
       .multiline="${multiLine}"
       .value="${value}"
-      .customOptions="${options}"
+      .customOptions="${customAutoCompletions}"
       .showLineNumbers="false"
     ></nile-code-editor> `;
   }
@@ -353,7 +356,7 @@ export class NileSwitcher extends NileElement {
       this.nileSwitchConfig.align === POSITIONS.BLOCK ? 'top' : 'bottom';
 
     return html`
-      <div class="switcher-icons-container">
+      <div part="icons-container" class="switcher-icons-container">
         ${repeat(
           inputs,
           (input: any, index: number) => html` <nile-tooltip
@@ -385,11 +388,16 @@ export class NileSwitcher extends NileElement {
   }
 
   toggleField(currentInput: switchInputType, index: Number) {
-    this.current = index;
+    if (this.nileSwitchConfig.confirmation) {
+      this.current = index;
+    }
     this.emit('nile-switch', { input: this.currentInput });
   }
 
   singleFieldSwitcher() {
+    if (!this.currentInput) {
+      this.setCurrentInput();
+    }
     return html`
       ${choose(
         this.currentInput.inputType,
@@ -427,15 +435,30 @@ export class NileSwitcher extends NileElement {
   }
 
   public render(): TemplateResult {
+    const hasLabelSlot = this.hasSlotController.test('label');
     const align = this.nileSwitchConfig.align;
     return html`<div
       class=${classMap({
         'switcher-block': align === POSITIONS.BLOCK,
         'switcher-inline': align === POSITIONS.INLINE,
-        'switcher-input-container': true,
+        'switcher-container': true,
       })}
     >
-      ${this.renderIcon()} ${this.singleFieldSwitcher()}
+      <div class="label-container">
+        ${hasLabelSlot
+          ? html`
+           <label
+          part="switcher-label"
+          class="switcher__label"
+          for="input"
+        >
+          <slot name="label"></slot>
+        </label>
+          </div> `
+          : ''}
+        ${this.renderIcon()}
+      </div>
+      ${this.singleFieldSwitcher()}
     </div>`;
   }
 }