@aquera/nile-elements 0.0.21 → 0.0.22

package/package.json

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

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

@@ -12,7 +12,6 @@ import { css } from 'lit-element';
  */
 export const styles = css`
   :host {
-    width: 100%;
     box-sizing: border-box;
     font-size: 14px;
   }
@@ -25,7 +24,7 @@ export const styles = css`
 
   .dropdown-position {
     position: relative;
-    bottom: 20px;
+    bottom: 1px;
   }
   .content-editable-input {
     box-sizing: border-box;
@@ -33,6 +32,7 @@ export const styles = css`
     padding: 9px;
     border: 1px solid #c7ced4;
     border-radius: 4px;
+    overflow: auto;
     overflow-x: auto;
     overflow-anchor: none;
     scrollbar-width: none;
@@ -51,6 +51,8 @@ export const styles = css`
   }
 
   .read-only {
+    background-color: hsl(240 4.8% 95.9%);
+    opacity: 0.5;
     cursor: not-allowed;
   }
 

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

@@ -63,6 +63,8 @@ export class NileContentEditor extends NileElement {
   @property({ attribute: 'error' }) error = false;
   @property({ attribute: 'noborder' }) noborder = false;
 
+  @state() initialValue = '';
+
   static styles: CSSResultGroup = styles;
 
   connectedCallback() {
@@ -74,17 +76,8 @@ export class NileContentEditor extends NileElement {
     this.setInitialValues();
   }
 
-  setInitialValues() {
-    this.updateComplete.then(res => {
-      if (res && !!this.value)
-        this.contentEditor.innerHTML = this.generateHTMLTagsWithValues(
-          this.value
-        );
-    });
-  }
-
   addOpenListeners() {
-    this.addEventListener('click', this.handleOutsideClick);
+    window.addEventListener('click', this.handleOutsideClick);
     this.addEventListener('cut', this.handleClipboardEvent);
     this.addEventListener('copy', this.handleClipboardEvent);
     this.addEventListener('paste', this.handleClipboardEvent);
@@ -97,6 +90,12 @@ export class NileContentEditor extends NileElement {
     this.removeEventListener('paste', this.handleClipboardEvent);
   }
 
+  handleOutsideClick(event: any) {
+    if (event && event.target && !this.contains(event.target)) {
+      this.toggleDropdown(false);
+    }
+  }
+
   async handleClipboardEvent(event: Event) {
     const selectedText = window?.getSelection()?.toString();
     switch (event.type) {
@@ -126,13 +125,16 @@ export class NileContentEditor extends NileElement {
     this.openDropdown = value;
   }
 
-  handleOutsideClick(event: Event) {
-    if (event && event.target) {
-      this.toggleDropdown(false);
-    }
+  setInitialValues() {
+    this.updateComplete.then(res => {
+      if (res)
+        this.contentEditor.innerHTML = this.generateHTMLTagsWithValues(
+          this.value
+        );
+    });
   }
 
-  @watch(['type'], { waitUntilFirstUpdate: true })
+  @watch(['type', 'value'], { waitUntilFirstUpdate: true })
   handleTypeChange() {
     this.contentEditor.innerHTML = this.generateHTMLTagsWithValues(this.value);
   }
@@ -155,14 +157,6 @@ export class NileContentEditor extends NileElement {
       return;
     }
 
-    if (event.code === KeyCode.ARROW_RIGHT) {
-      this.contentEditor.focus();
-      // select all the content in the element
-      document.execCommand('selectAll', false, undefined);
-      // collapse selection to the end
-
-      document?.getSelection()?.collapseToEnd();
-    }
     if (event.code === KeyCode.ESCAPE) {
       event.preventDefault();
       this.toggleDropdown(false);
@@ -194,9 +188,12 @@ export class NileContentEditor extends NileElement {
   }
 
   generateValuesFromHTMLTags(string: any): string {
+    let errorTag =
+      /<span class="chips chip-error" contenteditable="false">(.*?)<\/span>/g;
+    this.error = !!string.match(errorTag);
     var pattern =
       /<span class="chips(?: chip-error)?" contenteditable="false">(.*?)<\/span>/g;
-    var result = string.replace(pattern, (match: any, option: any) => {
+    let result = string.replace(pattern, (match: any, option: any) => {
       return '{{' + option + '}}';
     });
     return result;
@@ -224,9 +221,6 @@ export class NileContentEditor extends NileElement {
   emitInputChange(): void {
     if (this.contentEditor) {
       let fieldValue = this.contentEditor.innerHTML;
-      if (this.contentEditor.innerText !== '') {
-        fieldValue = this.generateValuesFromHTMLTags(fieldValue);
-      }
       fieldValue = fieldValue.replace(/&nbsp;/g, ' ');
       fieldValue = fieldValue.replace('<br>', '');
       this.emit('nile-change', {
@@ -235,7 +229,13 @@ export class NileContentEditor extends NileElement {
     }
   }
 
-  insertNodes(parentNode: Node, childNodes: NodeList, autoOptionsTag?: Node) {
+  replaceText = '';
+
+  insertNodes(
+    parentNode: Node,
+    childNodes: NodeList,
+    autoOptionsTag?: HTMLElement
+  ) {
     [...childNodes].forEach((node: Node, index: number) => {
       if (node.hasChildNodes()) {
         if (autoOptionsTag) {
@@ -246,23 +246,54 @@ export class NileContentEditor extends NileElement {
       } else {
         if (node.nodeValue?.includes(this.tagIdentifier)) {
           if (autoOptionsTag) {
-            parentNode.childNodes[index].nodeValue = node.nodeValue?.replace(
-              this.tagIdentifier + this.filteredValue,
-              ''
-            );
-            parentNode.childNodes[index].after(autoOptionsTag);
+            this.insertAutoOptionsTag(node, autoOptionsTag);
           }
-          this.filteredValue =
-            parentNode?.childNodes[index]?.nodeValue
-              ?.split(this.tagIdentifier)
-              .slice(1)
-              .join() || '';
+
+          this.setFilterValue(node.nodeValue);
+
           return;
         }
       }
     });
   }
 
+  insertAutoOptionsTag(node: any, autoOptionsTag: any) {
+    const selection = window.getSelection();
+    const range = document.createRange();
+    const curssorNodeindex = node.nodeValue.indexOf(this.tagIdentifier);
+    range.setStart(node, curssorNodeindex);
+    range.insertNode(autoOptionsTag);
+    range.setStartAfter(autoOptionsTag);
+    range.collapse(true);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+
+    if (autoOptionsTag.nextSibling?.nodeValue) {
+      autoOptionsTag.nextSibling.nodeValue =
+        autoOptionsTag.nextSibling?.nodeValue?.replace(
+          this.tagIdentifier + this.filteredValue,
+          ''
+        );
+    }
+    this.contentEditor.focus();
+  }
+
+  setFilterValue(value: any) {
+    //replace Text - check if text exists after tagidentifier , if exists take account of that too
+    if (!this.openDropdown) {
+      this.replaceText = value.split(this.tagIdentifier).slice(1).join();
+    }
+    if (!!value && this.openDropdown) {
+      this.filteredValue = value
+        ?.split(this.tagIdentifier)
+        .slice(1)
+        .join()
+        .replace(this.replaceText, '');
+    } else {
+      this.filteredValue = '';
+    }
+  }
+
   handleOptions(option: any): void {
     this.toggleDropdown(false);
     let autoOptionsTag = document.createElement('span');
@@ -274,9 +305,13 @@ export class NileContentEditor extends NileElement {
       this.contentEditor.childNodes,
       autoOptionsTag
     );
+    this.resetOptions();
+    this.emitInputChange();
+  }
+
+  resetOptions() {
     this.filteredOptions = this.options;
     this.filteredValue = '';
-    this.emitInputChange();
   }
 
   public renderAutoOptions(): TemplateResult {

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

@@ -12,8 +12,6 @@ import { css } from 'lit-element';
  */
 export const styles = css`
   :host {
-    display: inline-block;
-    width: 100%;
     box-sizing: border-box;
   }
 
@@ -25,15 +23,13 @@ export const styles = css`
     gap: 0.5rem;
   }
 
-  .tooltip-container {
-    display: flex;
-    flex-grow: 1;
-    flex-shrink: 0;
+  .input-container > :first-child {
+    max-width: 99%;
+    min-width: 99%;
   }
 
-  .input-container > :first-child {
-    flex-grow: 1;
-    flex-shrink: 0;
+  nile-icon {
+    max-height: 38px;
   }
 
   nile-radio {

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

@@ -83,6 +83,8 @@ export class NileSwitcher extends NileElement {
   static styles: CSSResultGroup = styles;
   @property({ type: Object }) nileSwitchConfig: switchconfig;
 
+  @property() value: string;
+
   connectedCallback() {
     super.connectedCallback();
     this.emit('nile-init');
@@ -124,12 +126,19 @@ export class NileSwitcher extends NileElement {
       multiple,
       placeholder,
       disabled,
+      value,
+      error,
+      errorMessage,
       inputType: inputTypeName,
     } = Input;
+
     return html`<nile-select
       .placeholder=${placeholder}
       .disabled="${disabled}"
       .multiple="${multiple}"
+      .value="${value}"
+      .error="${error}"
+      .errorMessage="${errorMessage}"
       @nile-change=${(e: CustomEvent) => {
         this.handleChange(e, inputType, inputTypeName);
       }}
@@ -166,35 +175,50 @@ export class NileSwitcher extends NileElement {
     const { value, label, disabled, inputType: inputTypeName } = Input;
 
     return html`<nile-checkbox
-      .checked=${value}
-      .label=${label}
-      .disabled=${disabled}
-      @valueChange=${(e: CustomEvent) => {
-        this.handleChange(e, inputType, inputTypeName);
-      }}
-    ></nile-checkbox>`;
+        .checked=${value}
+        .label=${label}
+        .disabled=${disabled}
+        @valueChange=${(e: CustomEvent) => {
+          this.handleChange(e, inputType, inputTypeName);
+        }}
+      ></nile-checkbox
+      >; `;
   }
 
   renderNileRadio(Input: switchInputType, inputType: string) {
-    const { options, value, disabled, inputType: inputTypeName } = Input;
+    const {
+      options,
+      value,
+      disabled,
+      inputType: inputTypeName,
+      errorMessage,
+    } = Input;
+
+    const haserrorMessage = !!errorMessage;
 
     return html`<nile-radio-group
-      .value=${value}
-      .disabled=${disabled}
-      @change=${(e: CustomEvent) => {
-        this.handleChange(e, inputType, inputTypeName);
-      }}
-    >
-      ${options &&
-      options.map((option: any) => {
-        return html`<nile-radio .value="${option}">${option} </nile-radio>`;
-      })}
-    </nile-radio-group>`;
+        .value=${value}
+        .disabled=${disabled}
+        @change=${(e: CustomEvent) => {
+          this.handleChange(e, inputType, inputTypeName);
+        }}
+      >
+        ${options &&
+        options.map((option: any) => {
+          return html`<nile-radio .value="${option}">${option} </nile-radio>`;
+        })}
+      </nile-radio-group>
+      ${haserrorMessage ? this.renderErrorMessage(errorMessage) : ''}`;
+  }
+
+  renderErrorMessage(errorMessage: string) {
+    return html`
+      <nile-form-error-message>${errorMessage}</nile-form-error-message>
+    `;
   }
 
   renderContentEditor(Input: switchInputType, inputType: string) {
-    const {
-      value,
+    let {
       options,
       inputType: inputTypeName,
       errorMessage,
@@ -203,7 +227,7 @@ export class NileSwitcher extends NileElement {
       noborder,
     } = Input;
     return html`<nile-content-editor
-      .value=${value}
+      .value=${this.value}
       .options=${options}
       .type=${type}
       .readonly=${readonly}

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

@@ -38,7 +38,7 @@ export const styles = css`
   }
 
   .tab:hover:not(.tab--disabled) {
-    color: var(--nile-colors-dark-500);
+    color: var(--nile-colors-dark-900);
   }
 
   .tab:focus {