@aquera/nile-elements 0.0.36 → 0.0.37-1

package/package.json

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

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

@@ -19,12 +19,18 @@ export const styles = css`
     display: flex;
     justify-content: flex-end;
     flex-direction: row-reverse;
+    padding: 5px;
+    border-radius: 5px;
+    border: 1px solid rgb(204, 204, 204);
+  }
+
+  .error {
+    border-color: #e5434d;
   }
 
   .cm-editor {
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
+    flex: 1;
+    min-width: 0;
   }
 
   .ͼ1.cm-focused {
@@ -37,7 +43,8 @@ export const styles = css`
   .code-mirror:hover > .code-editor__icon__container {
     cursor: pointer;
     display: flex;
-    padding-right: 10px;
+    align-self: start;
+    padding: 5px 5px 0px 0px;
   }
 `;
 

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

@@ -44,9 +44,13 @@ import { Theme } from './theme';
 @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: 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;
+  @property({ type: Boolean }) expandable: any = false;
 
   /**
    * The styles for CodeEditor
@@ -58,6 +62,12 @@ export class NileCodeEditor extends NileElement {
 
   connectedCallback(): void {
     super.connectedCallback();
+    this.emit('nile-init');
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.emit('nile-destroy');
   }
 
   view: EditorView;
@@ -73,7 +83,6 @@ export class NileCodeEditor extends NileElement {
 
   updated(changedProperties: PropertyValues) {
     super.updated(changedProperties);
-
     if (changedProperties.has('value')) {
       const customAutoCompletions = javascriptLanguage.data.of({
         autocomplete: scopeCompletionSource(this.customOptions),
@@ -92,7 +101,7 @@ export class NileCodeEditor extends NileElement {
             customAutoCompletions,
             autocompletion(),
             javascript(),
-            //this.setTheme(),
+            this.setTheme(),
             !this.multiline ? this.restrictSingleLine() : [],
             EditorView.updateListener.of((v: ViewUpdate) => {
               if (v.docChanged) {
@@ -107,16 +116,18 @@ export class NileCodeEditor extends NileElement {
           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,
-          },
-        });
+        if (this.updateValue) {
+          // 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,
+            },
+          });
+        }
       }
     }
   }
@@ -139,23 +150,33 @@ export class NileCodeEditor extends NileElement {
     );
   }
   public render(): TemplateResult {
+    const hasErrorMessage = !!this.errorMessage;
+    const hasError = !!this.error;
     return html`<div
-      part="base"
-      class=${classMap({
-        'code-mirror': true,
-        '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>`;
+        part="code-editor-base"
+        class=${classMap({
+          'code-mirror': true,
+          error: hasError || hasErrorMessage,
+          'code-mirror__singleline': !this.multiline,
+        })}
+      >
+        ${this.expandable
+          ? html` <nile-icon
+              name="expand-2"
+              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-icon/icons/svg/edit-write.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41IDEwLjAwMDFMNS41IDEwLjU0MDFMNiA3LjUwMDA2TDExLjczIDEuNzkwMDZDMTEuODIzIDEuNjk2MzMgMTEuOTMzNiAxLjYyMTk0IDEyLjA1NTQgMS41NzExN0MxMi4xNzczIDEuNTIwNCAxMi4zMDggMS40OTQyNiAxMi40NCAxLjQ5NDI2QzEyLjU3MiAxLjQ5NDI2IDEyLjcwMjcgMS41MjA0IDEyLjgyNDYgMS41NzExN0MxMi45NDY0IDEuNjIxOTQgMTMuMDU3IDEuNjk2MzMgMTMuMTUgMS43OTAwNkwxNC4yMSAyLjg1MDA2QzE0LjMwMzcgMi45NDMwMiAxNC4zNzgxIDMuMDUzNjMgMTQuNDI4OSAzLjE3NTQ4QzE0LjQ3OTcgMy4yOTczNCAxNC41MDU4IDMuNDI4MDUgMTQuNTA1OCAzLjU2MDA2QzE0LjUwNTggMy42OTIwNyAxNC40Nzk3IDMuODIyNzggMTQuNDI4OSAzLjk0NDY0QzE0LjM3ODEgNC4wNjY1IDE0LjMwMzcgNC4xNzcxIDE0LjIxIDQuMjcwMDZMOC41IDEwLjAwMDFaIiBzdHJva2U9IiMxRDI0MzMiIHN0cm9rZS13aWR0aD0iMS4zIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMTMgMTAuNVYxMy41QzEzIDEzLjc2NTIgMTIuODk0NiAxNC4wMTk2IDEyLjcwNzEgMTQuMjA3MUMxMi41MTk2IDE0LjM5NDYgMTIuMjY1MiAxNC41IDEyIDE0LjVIMi41QzIuMjM0NzggMTQuNSAxLjk4MDQzIDE0LjM5NDYgMS43OTI4OSAxNC4yMDcxQzEuNjA1MzYgMTQuMDE5NiAxLjUgMTMuNzY1MiAxLjUgMTMuNVY0QzEuNSAzLjczNDc4IDEuNjA1MzYgMy40ODA0MyAxLjc5Mjg5IDMuMjkyODlDMS45ODA0MyAzLjEwNTM2IDIuMjM0NzggMyAyLjUgM0g1LjUiIHN0cm9rZT0iIzFEMjQzMyIgc3Ryb2tlLXdpZHRoPSIxLjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==";

package/src/nile-icon/icons/svg/expand-2.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTIuNSA2LjVIMS41VjEuNUg2LjVWMi41SDMuMkw2LjQgNS42TDUuNiA2LjRMMi41IDMuMlY2LjVaTTEzLjUgMTIuOFY5LjVIMTQuNVYxNC41SDkuNVYxMy41SDEyLjhMOS43IDEwLjRMMTAuNCA5LjZMMTMuNSAxMi44Wk05LjYgNS42TDEwLjQgNi40TDEzLjUgMy4yVjYuNUgxNC41VjEuNUg5LjVWMi41SDEyLjhMOS42IDUuNlpNNS42IDkuNkw2LjMgMTAuNEwzLjIgMTMuNUg2LjVWMTQuNUgxLjVWOS41SDIuNVYxMi44TDUuNiA5LjZaIiBmaWxsPSIjMDA1RUE2Ii8+PC9zdmc+";

package/src/nile-icon/icons/svg/index.ts

@@ -106,6 +106,7 @@ export { default as draglist } from './draglist';
 export { default as droparrow } from './droparrow';
 export { default as dropdown } from './dropdown';
 export { default as editpencil } from './edit-pencil';
+export { default as editwrite } from './edit-write';
 export { default as else } from './else';
 export { default as email } from './email';
 export { default as enable } from './enable';
@@ -119,6 +120,7 @@ export { default as every } from './every';
 export { default as exactmatch } from './exactmatch';
 export { default as execute } from './execute';
 export { default as expand1 } from './expand-1';
+export { default as expand2 } from './expand-2';
 export { default as expand } from './expand';
 export { default as eye } from './eye';
 export { default as eyeclosed } from './eyeclosed';

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

@@ -37,7 +37,7 @@ export const styles = css`
     display: flex;
   }
   .switcher-icon-container.current {
-    background: var(--nile-colors-blue-400);
+    background: var(--nile-colors-primary-100);
   }
 
   .switcher-container {
@@ -54,6 +54,7 @@ export const styles = css`
 
   .switcher-inline > :nth-child(2) {
     flex: 1;
+    overflow: hidden;
   }
 
   .switcher-icons-container {
@@ -87,17 +88,6 @@ export const styles = css`
     padding-right: 10px;
   }
 
-  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;
   }

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

@@ -66,6 +66,7 @@ export interface switchInputType {
   noborder?: boolean;
   multiLine?: boolean;
   expand?: boolean;
+  expandable?: boolean;
 }
 
 export enum POSITIONS {
@@ -106,7 +107,7 @@ export class NileSwitcher extends NileElement {
 
   @property({ type: Object }) nileSwitchConfig: switchconfig;
 
-  @property({ type: Number }) current: Number = 0;
+  @property({ type: Number }) current: Number = 1;
 
   @property({ type: Object }) currentInput: switchInputType;
 
@@ -271,9 +272,10 @@ export class NileSwitcher extends NileElement {
     </nile-content-editor>`;
   }
 
-  renderObjectMapper() {
-    const noborder = this.currentInput.noborder;
-    const mode = this.currentInput.mode;
+  renderObjectMapper(Input: switchInputType) {
+    let { options, inputType, error, errorMessage, type, readonly, noborder } =
+      Input;
+
     const value =
       this.currentInput.mode === MODE.CREATE
         ? 'Click to Create - Not Mapped'
@@ -285,6 +287,8 @@ export class NileSwitcher extends NileElement {
         'switcher-object-mapper--noborder': !!noborder,
       })}
       .value=${value}
+      .errorMessage=${errorMessage}
+      .error=${error}
       readonly="true"
       @click="${(e: CustomEvent) =>
         this.handleChange(e, INPUT_TYPE_NAMES.OBJECT_MAPPER)}"
@@ -292,7 +296,7 @@ export class NileSwitcher extends NileElement {
       <nile-icon
         class="pointer-cursor switcher-object-mapper-icon"
         slot="suffix"
-        name="collapse"
+        name="expand-2"
         color="#005EA6"
         size="16"
       >
@@ -311,12 +315,12 @@ export class NileSwitcher extends NileElement {
       error,
       inputType,
       noborder,
+      expandable,
     } = Input;
     return html`<nile-code-editor
-      part="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)}"
@@ -324,6 +328,7 @@ export class NileSwitcher extends NileElement {
         this.handleChange(e, INPUT_TYPE_NAMES.CODE_EDITOR)}"
       .multiline="${multiLine}"
       .value="${value}"
+      .expandable="${expandable}"
       .customOptions="${customAutoCompletions}"
     ></nile-code-editor> `;
   }
@@ -388,11 +393,15 @@ export class NileSwitcher extends NileElement {
     `;
   }
 
+  isToggleSwitch = (item: any) => {
+    return typeof item === 'undefined' || item;
+  };
+
   toggleField(currentInput: switchInputType, index: Number) {
-    if (this.nileSwitchConfig.confirmation) {
-      this.current = index;
-    }
-    this.emit('nile-switch', { input: this.currentInput });
+    this.emit('nile-switch', {
+      inputClicked: index,
+      currentInput: currentInput,
+    });
   }
 
   singleFieldSwitcher() {
@@ -424,7 +433,10 @@ export class NileSwitcher extends NileElement {
             INPUT_TYPE_NAMES.CONTENTEDITOR,
             () => this.renderContentEditor(this.currentInput),
           ],
-          [INPUT_TYPE_NAMES.OBJECT_MAPPER, () => this.renderObjectMapper()],
+          [
+            INPUT_TYPE_NAMES.OBJECT_MAPPER,
+            () => this.renderObjectMapper(this.currentInput),
+          ],
           [
             INPUT_TYPE_NAMES.CODE_EDITOR,
             () => this.renderCodeEditor(this.currentInput),