@aquera/nile-elements 0.0.9 → 0.0.10

package/package.json

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

package/src/internal/enum.ts

@@ -0,0 +1,17 @@
+export const KeyCode = {
+  BACKSPACE: 'Backspace',
+  TAB: 'Tab',
+  ENTER: 'Enter',
+  SHIFT: 'ShiftLeft', // or 'ShiftRight'
+  CTRL: 'ControlLeft', // or 'ControlRight'
+  ESCAPE: 'Escape',
+  SPACE: 'Space',
+  PAGE_UP: 'PageUp',
+  PAGE_DOWN: 'PageDown',
+  END: 'End',
+  HOME: 'Home',
+  ARROW_LEFT: 'ArrowLeft',
+  ARROW_UP: 'ArrowUp',
+  ARROW_RIGHT: 'ArrowRight',
+  ARROW_DOWN: 'ArrowDown',
+};

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

@@ -14,6 +14,7 @@ export const styles = css`
   :host {
     width: 100%;
     box-sizing: border-box;
+    font-size: 14px;
   }
 
   .content-editable-wrapper {
@@ -49,21 +50,30 @@ export const styles = css`
     border-color: #e5434d;
   }
 
+  .read-only {
+    cursor: not-allowed;
+  }
+
   .chips {
+    display: inline;
     background: #e5e9eb;
     color: #000;
     border-radius: 4px;
     padding: 6px;
+    height: 24px;
+    line-height: 10px;
     margin-left: 3px;
-    display: inline;
     letter-spacing: 0.2px;
   }
 
   .text-area {
     height: 120px;
-    white-space: pre-wrap;
     overflow: scroll;
-    line-height: 24px;
+    line-height: 26px;
+  }
+
+  .text-area .chips {
+    padding: 4px 8px;
   }
 
   .chip-error {
@@ -74,6 +84,7 @@ export const styles = css`
     background-color: #ffffff;
     border: 1px solid #c7ced4;
     overflow: auto;
+    max-height: 150px;
   }
 
   label {

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

@@ -12,6 +12,8 @@ import { CSSResultGroup } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import NileElement from '../internal/nile-element';
 import { watch } from '../internal/watch';
+import { KeyCode } from '../internal/enum';
+import { live } from 'lit/directives/live.js';
 
 /**
  * Nile icon component.
@@ -33,6 +35,8 @@ export class NileContentEditor extends NileElement {
 
   @property() options: Array<any>;
 
+  @property() filteredOptions: Array<any>;
+
   @property() showLabel: boolean = true;
 
   @property() labelText = '';
@@ -41,53 +45,113 @@ export class NileContentEditor extends NileElement {
 
   @property() required: boolean = true;
 
-  @query('.content-editable-input') input: HTMLInputElement;
+  @query('.content-editable-input') contentEditor: HTMLInputElement;
   @query('.nile-options-container') autoOptions: HTMLInputElement;
 
-  @state() private openDropdown: boolean = false;
+  @state() openDropdown = false;
+
+  tagIdentifier = '$';
+
+  filteredValue = '';
 
   @property({ attribute: 'help-text' }) helpText = '';
 
+  @property({ attribute: 'readonly' }) readonly = false;
+
   @property({ attribute: 'error-message' }) errorMessage = '';
 
+  @property({ attribute: 'error' }) error = false;
+
   static styles: CSSResultGroup = styles;
 
   connectedCallback() {
+    this.handleOutsideClick = this.handleOutsideClick.bind(this);
     super.connectedCallback();
     this.emit('nile-init');
-    this.afterFirstRender().then(res => {
-      if (res && this.value !== '')
-        this.input.innerHTML = this.generateHTMLTagsWithValues(this.value);
+    this.addOpenListeners();
+    this.setInitialValues();
+  }
+
+  setInitialValues() {
+    this.updateComplete.then(res => {
+      if (res && !!this.value)
+        this.contentEditor.innerHTML = this.generateHTMLTagsWithValues(
+          this.value
+        );
     });
   }
 
+  addOpenListeners() {
+    window.addEventListener('click', this.handleOutsideClick);
+  }
+
+  removeOpenListeners() {
+    window.removeEventListener('click', this.handleOutsideClick);
+  }
+
+  toggleDropdown(value: boolean) {
+    this.openDropdown = value;
+  }
+
+  handleOutsideClick(event: Event) {
+    if (event && event.target) {
+      this.toggleDropdown(false);
+    }
+  }
+
   @watch('type', { waitUntilFirstUpdate: true })
   handleTypeChange() {
-    this.input.innerHTML = this.generateHTMLTagsWithValues(this.value);
+    this.contentEditor.innerHTML = this.generateHTMLTagsWithValues(this.value);
   }
 
   disconnectedCallback(): void {
     super.disconnectedCallback();
+    this.removeOpenListeners();
     this.emit('nile-destroy');
   }
 
-  async afterFirstRender(): Promise<boolean> {
-    return await this.updateComplete;
+  handlePaste(event: ClipboardEvent) {
+    event.preventDefault();
+    if (event.clipboardData) {
+      let text = event.clipboardData.getData('text/plain');
+      document.execCommand('insertText', false, text);
+    }
+    this.emitInputChange();
   }
 
   private handlekeyDown(event: any) {
-    if (event.code === 'Enter' && this.type === 'text') {
+    if (event.code === KeyCode.ENTER && this.type === 'text') {
       event.preventDefault();
+      return;
+    }
+    if (event.code === KeyCode.ESCAPE) {
+      event.preventDefault();
+      this.toggleDropdown(false);
+      return;
     }
     setTimeout(() => {
-      const value = this.input.innerText;
+      const value = this.contentEditor.innerText;
       this.emitInputChange();
-      if (value.includes('$')) {
-        this.openDropdown = true;
+      if (value.includes(this.tagIdentifier)) {
+        this.toggleDropdown(true);
+        this.filterOptions();
+      } else {
+        this.toggleDropdown(false);
       }
     });
   }
 
+  filterOptions() {
+    this.filteredOptions = this.options;
+    if (!!this.options.length && !!this.filteredValue) {
+      this.filteredOptions = this.options.filter(item =>
+        item.startsWith(this.filteredValue)
+      );
+    } else {
+      this.filteredOptions = this.options;
+    }
+  }
+
   generateValuesFromHTMLTags(string: any): string {
     var pattern =
       /<span class="chips(?: chip-error)?" contenteditable="false">(.*?)<\/span>/g;
@@ -110,53 +174,49 @@ export class NileContentEditor extends NileElement {
   }
 
   emitInputChange(): void {
-    let fieldValue = this.input.innerHTML;
+    if (this.contentEditor) {
+      let fieldValue = this.contentEditor.innerHTML;
 
-    if (this.input.innerText !== '') {
-      fieldValue = this.generateValuesFromHTMLTags(fieldValue);
+      if (this.contentEditor.innerText !== '') {
+        fieldValue = this.generateValuesFromHTMLTags(fieldValue);
+      }
+      fieldValue = fieldValue.replace(/&nbsp;/g, ' ');
+      fieldValue = fieldValue === '<br>' ? '' : fieldValue?.trim();
+      this.emit('nile-change', {
+        value: this.generateValuesFromHTMLTags(fieldValue),
+      });
     }
-    fieldValue = fieldValue.replace(/&nbsp;/g, ' ');
-    fieldValue = fieldValue === '<br>' ? '' : fieldValue?.trim();
-    this.emit('nile-change', {
-      value: this.generateValuesFromHTMLTags(fieldValue),
-    });
   }
 
-  moveCursorToEnd = () => {
-    const range = document.createRange();
-    const selection = window.getSelection();
-    range.setStart(this.input, this.input.childNodes.length);
-    range.collapse(true);
-    selection?.removeAllRanges();
-    selection?.addRange(range);
-    this.input.focus();
-  };
-
-  handleOptions(option: any): void {
-    this.openDropdown = !this.openDropdown;
-
-    // not appending Native element as it replaces all existing child nodes with new node
-    const autoOptionsTag =
-      '<span class="chips" contenteditable="false">' + option + '</span>';
-    // text editor adds div when pressing enter , so before appending have to check if its parent node is div else append it to content editable parent
-    if (this.input?.lastElementChild?.tagName === 'DIV') {
-      this.input.lastElementChild.insertAdjacentHTML(
-        'beforeend',
-        autoOptionsTag
-      );
-      if (this.input.lastElementChild.lastChild?.previousSibling)
-        this.input.lastElementChild.lastChild.previousSibling.nodeValue =
-          this.input.lastElementChild.lastChild.previousSibling.nodeValue!.replace(
-            '$',
+  insertNodes(parentNode: Node, childNodes: NodeList, autoOptionsTag: Node) {
+    Array.from(childNodes).map((node: Node, index: number) => {
+      if (node.hasChildNodes()) {
+        this.insertNodes(node, node.childNodes, autoOptionsTag);
+      } else {
+        if (node.nodeValue?.includes(this.tagIdentifier)) {
+          parentNode.childNodes[index].nodeValue = node.nodeValue?.replace(
+            this.tagIdentifier + this.filteredValue,
             ''
           );
-    } else {
-      this.input.insertAdjacentHTML('beforeend', autoOptionsTag);
-      if (this.input.lastChild?.previousSibling) {
-        this.input.lastChild.previousSibling.nodeValue =
-          this.input.lastChild.previousSibling.nodeValue!.replace('$', '');
+          parentNode.childNodes[index].after(autoOptionsTag);
+        }
       }
-    }
+    });
+  }
+
+  handleOptions(option: any): void {
+    this.toggleDropdown(false);
+    let autoOptionsTag = document.createElement('span');
+    autoOptionsTag.setAttribute('class', 'chips');
+    autoOptionsTag.setAttribute('contentEditable', 'false');
+    autoOptionsTag.innerText = option;
+    this.insertNodes(
+      this.contentEditor,
+      this.contentEditor.childNodes,
+      autoOptionsTag
+    );
+    this.filteredOptions = this.options;
+    this.filteredValue = '';
     this.emitInputChange();
   }
 
@@ -165,10 +225,10 @@ export class NileContentEditor extends NileElement {
       class="${classMap({
         'nile-options-container': true,
         'dropdown-position': this.type === 'text-area',
-      })}class"
+      })}"
     >
-      ${this.options &&
-      this.options.map((option: any) => {
+      ${this.filteredOptions &&
+      this.filteredOptions.map((option: any) => {
         return html` <nile-option
           .value="${option}"
           @click="${(event: Event) => {
@@ -182,11 +242,13 @@ export class NileContentEditor extends NileElement {
 
   public render(): TemplateResult {
     const hasHelpText = this.helpText ? true : false;
+    const hasError = !!this.error;
     const hasErrorMessage = !!this.errorMessage;
+    const readonly = !!this.readonly;
     const type = this.type;
     return html`
       <nile-popup
-        .active="${this.openDropdown}"
+        .active="${live(this.openDropdown)}"
         sync="width"
         placement="bottom"
         class=${classMap({
@@ -199,17 +261,19 @@ export class NileContentEditor extends NileElement {
           ${this.showLabel && this.labelText
             ? html`<label class="ods-label">${this.labelText} </label> ${this
                   .required
-                  ? html`<span class="asterik">*</span>`
+                  ? html`<sapn class="asterik">*</span>`
                   : ''}`
             : ''}
           <div
-            contenteditable="true"
+            contenteditable="${!readonly}"
             class=${classMap({
               'content-editable-input': true,
-              error: hasErrorMessage,
+              error: hasError || hasErrorMessage,
+              'read-only': readonly,
               'text-area': type === 'text-area' ? true : false,
             })}
             @keydown=${this.handlekeyDown}
+            @paste=${this.handlePaste}
           ></div>
           ${hasHelpText
             ? html`

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

@@ -32,6 +32,7 @@ export interface switchconfig {
   [key: string]: any;
   toggleSwitch: boolean;
   disable?: boolean;
+  confirmation?: boolean;
   defaultInput: switchInputType;
   switchInput: switchInputType;
 }
@@ -46,7 +47,8 @@ export interface switchInputType {
     | INPUT_TYPE_NAMES.CONTENTEDITOR;
   value?: String | boolean;
   label?: String;
-  type: string;
+  readonly?: boolean;
+  type?: string;
   placeholder?: string;
   disabled?: boolean;
   required?: boolean;
@@ -183,11 +185,13 @@ export class NileSwitcher extends NileElement {
       inputType: inputTypeName,
       errorMessage,
       type,
+      readonly,
     } = Input;
     return html`<nile-content-editor
        .value=${value}
        .options=${options}
        .type =${type}
+       .readonly=${readonly}
        .errorMessage=${errorMessage}
        @nile-change=${(e: CustomEvent) => {
          this.handleChange(e, inputType, inputTypeName);
@@ -216,7 +220,7 @@ export class NileSwitcher extends NileElement {
       size="14"
       class=${classMap({
         'pointer-cursor': true,
-        'flex-start': icon === 'stringinput',
+        'flex-start': true,
       })}
       .name=${icon}
       color="#005EA6"
@@ -225,10 +229,12 @@ export class NileSwitcher extends NileElement {
   }
 
   toggleField() {
-    this.nileSwitchConfig = {
-      ...this.nileSwitchConfig,
-      toggleSwitch: !this.nileSwitchConfig.toggleSwitch,
-    };
+    if (!this.nileSwitchConfig.confirmation) {
+      this.nileSwitchConfig = {
+        ...this.nileSwitchConfig,
+        toggleSwitch: !this.nileSwitchConfig.toggleSwitch,
+      };
+    }
     this.emit('nile-switch', { config: this.nileSwitchConfig });
   }