@aquera/nile-elements 0.0.34 → 0.0.36-1

package/package.json

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

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

@@ -19,7 +19,13 @@ export const styles = css`
     display: flex;
     justify-content: flex-end;
     flex-direction: row-reverse;
-    gap: 0.6rem;
+    padding: 5px;
+    border-radius: 5px;
+    border: 1px solid rgb(204, 204, 204);
+  }
+
+  .error {
+    border-color: #e5434d;
   }
 
   .cm-editor {
@@ -33,11 +39,12 @@ export const styles = css`
   }
 
   .code-editor__icon__container {
-    cursor: pointer;
+    display: none;
   }
-
-  .code-editor__icon__container {
-    padding-right: 5px;
+  .code-mirror:hover > .code-editor__icon__container {
+    cursor: pointer;
+    display: flex;
+    padding-right: 10px;
   }
 `;
 

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

@@ -11,6 +11,7 @@ import {
   property,
   CSSResultArray,
   TemplateResult,
+  PropertyValueMap,
 } from 'lit-element';
 import { customElement, query } from 'lit/decorators.js';
 import { styles } from './nile-code-editor.css';
@@ -27,6 +28,10 @@ import { autocompletion } from '@codemirror/autocomplete';
 import { CompletionContext, Completion } from '@codemirror/autocomplete';
 import NileElement from '../internal/nile-element';
 import { basicSetup } from './extensionSetup';
+import { watch } from '../internal/watch';
+import { PropertyValues } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { Theme } from './theme';
 
 // Choose the appropriate mode for your use case
 
@@ -39,10 +44,12 @@ import { basicSetup } from './extensionSetup';
 @customElement('nile-code-editor')
 export class NileCodeEditor extends NileElement {
   @query('.code-mirror') codeEditor: HTMLInputElement;
-  @property({ type: Boolean }) multiline: true;
-  @property({ type: String }) value: true;
-  @property({ type: String }) customOptions: any;
-  @property({ type: String }) showLineNumbers: any;
+  @property({ type: Boolean, reflect: true }) multiline = false;
+  @property({ type: String }) value = '';
+  @property({ type: String }) customOptions: any = {};
+  @property({ type: Boolean }) updateValue: any = false;
+  @property({ attribute: 'error-message' }) errorMessage = '';
+  @property({ attribute: 'error' }) error = false;
 
   /**
    * The styles for CodeEditor
@@ -64,33 +71,61 @@ export class NileCodeEditor extends NileElement {
   }
   lineNumbersComp = new Compartment();
 
-  updated() {
-    const customAutoCompletions = javascriptLanguage.data.of({
-      autocomplete: scopeCompletionSource(this.customOptions),
-    });
-    let startState = EditorState.create({
-      doc: !this.multiline ? this.convertToSingleLine(this.value) : this.value,
-      extensions: [
-        basicSetup({
-          lineNumbers: !!this.showLineNumbers,
-          foldGutter: !this.multiline ? false : true,
-        }),
-        customAutoCompletions,
-        autocompletion(),
-        javascript(),
-        !this.multiline ? this.restrictSingleLine() : [],
-        EditorView.updateListener.of((v: ViewUpdate) => {
-          if (v.docChanged) {
-            this.emitValues(this.view.state.doc.toString());
-          }
-        }),
-      ],
-    });
-
-    this.view = new EditorView({
-      state: startState,
-      parent: this.codeEditor,
-    });
+  @watch(['value'], { waitUntilFirstUpdate: true })
+  handleValueChange() {}
+
+  firstUpdated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (changedProperties.has('value')) {
+      const customAutoCompletions = javascriptLanguage.data.of({
+        autocomplete: scopeCompletionSource(this.customOptions),
+      });
+      if (!this.view) {
+        let startState = EditorState.create({
+          doc: !this.multiline
+            ? this.convertToSingleLine(this.value)
+            : this.value,
+          extensions: [
+            basicSetup({
+              lineNumbers: !!this.multiline,
+              highlightActiveLine: false,
+              foldGutter: !!this.multiline,
+            }),
+            customAutoCompletions,
+            autocompletion(),
+            javascript(),
+            this.setTheme(),
+            !this.multiline ? this.restrictSingleLine() : [],
+            EditorView.updateListener.of((v: ViewUpdate) => {
+              if (v.docChanged) {
+                this.emitValues(this.view.state.doc.toString());
+              }
+            }),
+          ],
+        });
+
+        this.view = new EditorView({
+          state: startState,
+          parent: this.codeEditor,
+        });
+      } else {
+        // Editor has already been initialized, update its state
+          this.view.dispatch({
+            changes: {
+              from: 0,
+              to: this.view.state.doc.length,
+              insert: !this.multiline
+                ? this.convertToSingleLine(this.value)
+                : this.value,
+            },
+          });
+        }
+      }
+    
+  }
+
+  setTheme() {
+    return EditorView.theme(Theme);
   }
 
   emitValues(value: string) {
@@ -107,17 +142,33 @@ export class NileCodeEditor extends NileElement {
     );
   }
   public render(): TemplateResult {
-    return html`<div class="code-mirror">
-      ${!this.multiline
-        ? html`<nile-icon
-            name="fullscreenshrink"
-            class="code-editor__icon__container"
-            size="16"
-            color="black"
-            @click="${(e: CustomEvent) => this.expandCodeEditor()}"
-          ></nile-icon>`
-        : ''}
-    </div>`;
+    const hasErrorMessage = !!this.errorMessage;
+    const hasError = !!this.error;
+    return html`<div
+        part="code-editor-base"
+        class=${classMap({
+          'code-mirror': true,
+          error: hasError || hasErrorMessage,
+          'code-mirror__singleline': !this.multiline,
+        })}
+      >
+        ${!this.multiline
+          ? html` <nile-icon
+              name="fullscreenshrink"
+              class="code-editor__icon__container"
+              size="16"
+              color="black"
+              @click="${(e: CustomEvent) => this.expandCodeEditor()}"
+            ></nile-icon>`
+          : ''}
+      </div>
+      ${hasErrorMessage
+        ? html`
+            <nile-form-error-message
+              >${this.errorMessage}</nile-form-error-message
+            >
+          `
+        : ``}`;
   }
 
   /* #endregion */

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

@@ -0,0 +1,9 @@
+export const Theme = {
+  '&': {
+    fontSize: '14px',
+    fontFamily: 'Colfax-regular',
+    fontWeight: '400',
+  },
+  '.cm-content': {},
+  '.cm-scroller': {},
+};

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

@@ -16,22 +16,31 @@ export const styles = css`
     box-sizing: border-box;
   }
 
-  .switcher-icon-container {
+  .pointer-cursor {
     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-object-mapper:hover {
+    display: flex;
+  }
   .switcher-icon-container.current {
     background: var(--nile-colors-blue-400);
   }
 
-  .switcher-input-container {
+  .switcher-container {
     display: flex;
   }
 
@@ -43,21 +52,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;
@@ -65,15 +89,14 @@ export const styles = css`
 
   nile-code-editor {
     overflow: hidden;
-    padding-top: 2px;
-    border-radius: 5px;
-    border: 1px solid rgb(204, 204, 204);
   }
 
-  .code-editor__no-border {
-    border: none;
+  .switcher-object-mapper-icon {
+    display: none;
+  }
+  .switcher-object-mapper:hover > .switcher-object-mapper-icon {
+    display: block;
   }
-
   .switcher-object-mapper::part(input) {
     color: var(--nile-colors-primary-600);
     cursor: pointer;

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
@@ -101,8 +102,10 @@ 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;
+  @property({ type: Number }) current: Number = 1;
 
   @property({ type: Object }) currentInput: switchInputType;
 
@@ -173,6 +176,7 @@ export class NileSwitcher extends NileElement {
     } = Input;
 
     return html`<nile-select
+      part="dropdown"
       class="switcher-dropdown"
       .placeholder=${placeholder}
       .disabled="${disabled}"
@@ -272,7 +276,7 @@ export class NileSwitcher extends NileElement {
     const value =
       this.currentInput.mode === MODE.CREATE
         ? 'Click to Create - Not Mapped'
-        : '';
+        : 'Click to Edit';
 
     return html`<nile-input
       class=${classMap({
@@ -308,9 +312,9 @@ export class NileSwitcher extends NileElement {
       noborder,
     } = Input;
     return html`<nile-code-editor
+      part="switcher-code-editor"
       class=${classMap({
         'code-editor': true,
-        'code-editor__no-border': !!noborder,
       })}
       @nile-expand="${(e: CustomEvent) =>
         this.handleExpand(e, INPUT_TYPE_NAMES.CODE_EDITOR)}"
@@ -319,7 +323,6 @@ export class NileSwitcher extends NileElement {
       .multiline="${multiLine}"
       .value="${value}"
       .customOptions="${customAutoCompletions}"
-      .showLineNumbers="false"
     ></nile-code-editor> `;
   }
 
@@ -352,7 +355,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
@@ -383,9 +386,19 @@ export class NileSwitcher extends NileElement {
     `;
   }
 
+  isToggleSwitch = (item: any) => {
+    return typeof item === 'undefined' || item;
+  };
+
   toggleField(currentInput: switchInputType, index: Number) {
-    this.current = index;
-    this.emit('nile-switch', { input: this.currentInput });
+    if (this.isToggleSwitch(this.nileSwitchConfig.confirmation)) {
+      this.current = index;
+    }
+    this.updateComplete.then(res => {
+      if (res) {
+        this.emit('nile-switch', { input: this.currentInput });
+      }
+    });
   }
 
   singleFieldSwitcher() {
@@ -429,15 +442,31 @@ export class NileSwitcher extends NileElement {
   }
 
   public render(): TemplateResult {
+    const hasLabelSlot = this.hasSlotController.test('label');
     const align = this.nileSwitchConfig.align;
     return html`<div
+      part="base"
       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>`;
   }
 }