@aquera/nile-elements 0.0.12 → 0.0.13

package/package.json

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

package/src/internal/enum.ts

@@ -14,4 +14,7 @@ export const KeyCode = {
   ARROW_UP: 'ArrowUp',
   ARROW_RIGHT: 'ArrowRight',
   ARROW_DOWN: 'ArrowDown',
+  CUT: 'KeyX',
+  COPY: 'Copy',
+  PASTE: 'Paste',
 };

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

@@ -25,7 +25,7 @@ export const styles = css`
 
   .dropdown-position {
     position: relative;
-    bottom: 60px;
+    bottom: 20px;
   }
   .content-editable-input {
     box-sizing: border-box;

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

@@ -66,6 +66,7 @@ export class NileContentEditor extends NileElement {
 
   connectedCallback() {
     this.handleOutsideClick = this.handleOutsideClick.bind(this);
+    this.handleClipboardEvent = this.handleClipboardEvent.bind(this);
     super.connectedCallback();
     this.emit('nile-init');
     this.addOpenListeners();
@@ -83,10 +84,38 @@ export class NileContentEditor extends NileElement {
 
   addOpenListeners() {
     window.addEventListener('click', this.handleOutsideClick);
+    window.addEventListener('cut', this.handleClipboardEvent);
+    window.addEventListener('copy', this.handleClipboardEvent);
+    window.addEventListener('paste', this.handleClipboardEvent);
   }
 
   removeOpenListeners() {
     window.removeEventListener('click', this.handleOutsideClick);
+    window.removeEventListener('cut', this.handleClipboardEvent);
+    window.removeEventListener('copy', this.handleClipboardEvent);
+    window.removeEventListener('paste', this.handleClipboardEvent);
+  }
+
+  async handleClipboardEvent(event: Event) {
+    const selectedText = window?.getSelection()?.toString();
+    if (!!selectedText) {
+      switch (event.type) {
+        case 'cut':
+        case 'copy':
+          await navigator.clipboard.writeText(selectedText);
+          document.execCommand(event.type);
+          break;
+        case 'paste':
+          const pastedText = await navigator.clipboard.readText();
+          document.execCommand('insertText', false, pastedText);
+          break;
+        default:
+          break;
+      }
+    }
+    setTimeout(() => {
+      this.emitInputChange();
+    });
   }
 
   toggleDropdown(value: boolean) {
@@ -110,20 +139,14 @@ export class NileContentEditor extends NileElement {
     this.emit('nile-destroy');
   }
 
-  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 === KeyCode.ENTER && this.type === 'text') {
       event.preventDefault();
       return;
     }
+    if ([KeyCode.CUT, KeyCode.COPY, KeyCode.PASTE].includes(event.code)) {
+      return;
+    }
     if (event.code === KeyCode.ESCAPE) {
       event.preventDefault();
       this.toggleDropdown(false);
@@ -133,8 +156,9 @@ export class NileContentEditor extends NileElement {
       const value = this.contentEditor.innerText;
       this.emitInputChange();
       if (value.includes(this.tagIdentifier)) {
-        this.toggleDropdown(true);
+        this.insertNodes(this.contentEditor, this.contentEditor.childNodes);
         this.filterOptions();
+        this.toggleDropdown(true);
       } else {
         this.toggleDropdown(false);
       }
@@ -176,7 +200,6 @@ export class NileContentEditor extends NileElement {
   emitInputChange(): void {
     if (this.contentEditor) {
       let fieldValue = this.contentEditor.innerHTML;
-
       if (this.contentEditor.innerText !== '') {
         fieldValue = this.generateValuesFromHTMLTags(fieldValue);
       }
@@ -188,17 +211,29 @@ export class NileContentEditor extends NileElement {
     }
   }
 
-  insertNodes(parentNode: Node, childNodes: NodeList, autoOptionsTag: Node) {
-    Array.from(childNodes).map((node: Node, index: number) => {
+  insertNodes(parentNode: Node, childNodes: NodeList, autoOptionsTag?: Node) {
+    [...childNodes].forEach((node: Node, index: number) => {
       if (node.hasChildNodes()) {
-        this.insertNodes(node, node.childNodes, autoOptionsTag);
+        if (autoOptionsTag) {
+          this.insertNodes(node, node.childNodes, autoOptionsTag);
+        } else {
+          this.insertNodes(node, node.childNodes);
+        }
       } else {
         if (node.nodeValue?.includes(this.tagIdentifier)) {
-          parentNode.childNodes[index].nodeValue = node.nodeValue?.replace(
-            this.tagIdentifier + this.filteredValue,
-            ''
-          );
-          parentNode.childNodes[index].after(autoOptionsTag);
+          if (autoOptionsTag) {
+            parentNode.childNodes[index].nodeValue = node.nodeValue?.replace(
+              this.tagIdentifier + this.filteredValue,
+              ''
+            );
+            parentNode.childNodes[index].after(autoOptionsTag);
+          }
+          this.filteredValue =
+            parentNode?.childNodes[index]?.nodeValue
+              ?.split(this.tagIdentifier)
+              .slice(1)
+              .join() || '';
+          return;
         }
       }
     });
@@ -250,6 +285,7 @@ export class NileContentEditor extends NileElement {
       <nile-popup
         .active="${live(this.openDropdown)}"
         sync="width"
+        strategy="fixed"
         placement="bottom"
         class=${classMap({
           dropdown: true,
@@ -261,7 +297,7 @@ export class NileContentEditor extends NileElement {
           ${this.showLabel && this.labelText
             ? html`<label class="ods-label">${this.labelText} </label> ${this
                   .required
-                  ? html`<sapn class="asterik">*</span>`
+                  ? html`<span class="asterik">*</span>`
                   : ''}`
             : ''}
           <div
@@ -273,7 +309,6 @@ export class NileContentEditor extends NileElement {
               'text-area': type === 'text-area' ? true : false,
             })}
             @keydown=${this.handlekeyDown}
-            @paste=${this.handlePaste}
           ></div>
           ${hasHelpText
             ? html`

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

@@ -2,4 +2,4 @@
  * Do not edit directly
  */
 
-export default "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjEuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48Zz48cGF0aCBpZD0iZG9jdW1lbnRfMV8iIGQ9Ik0xNi4zLDAuMmw2LjQsNi40djE3LjFIMS4yVjAuM0wxNi4zLDAuMnogTTE1LjMsMS43SDIuOHYyMC41aDE4LjVWNy43aC02TDE1LjMsMS43eiBNMTcsMTYuMnYxLjVINwkJCXYtMS41SDE3eiBNMTcsMTEuMnYxLjVIN3YtMS41SDE3eiBNMTEsNi4ydjEuNUg3VjYuMkgxMXogTTE2LjgsMi44djMuNGgzLjRMMTYuOCwyLjh6Ii8+PC9nPjwvZz48L3N2Zz4=";
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMuNzUgNS43MzgyOEMzLjc1IDQuNDk1NjQgNC43NTczNiAzLjQ4ODI4IDYgMy40ODgyOEgxMy4zNzVWNS43MzgyOEMxMy4zNzUgNy44MDkzNSAxNS4wNTM5IDkuNDg4MjggMTcuMTI1IDkuNDg4MjhIMjAuMjVWMTkuNzM4M0MyMC4yNSAyMC45ODA5IDE5LjI0MjYgMjEuOTg4MyAxOCAyMS45ODgzSDZDNC43NTczNiAyMS45ODgzIDMuNzUgMjAuOTgwOSAzLjc1IDE5LjczODNWNS43MzgyOFpNMTkgNy45ODgyOEwxNC44NzUgNC4zODgyOFY1LjczODI4QzE0Ljg3NSA2Ljk4MDkyIDE1Ljg4MjQgNy45ODgyOCAxNy4xMjUgNy45ODgyOEgxOVpNNiAxLjk4ODI4QzMuOTI4OTMgMS45ODgyOCAyLjI1IDMuNjY3MjEgMi4yNSA1LjczODI4VjE5LjczODNDMi4yNSAyMS44MDkzIDMuOTI4OTMgMjMuNDg4MyA2IDIzLjQ4ODNIMThDMjAuMDcxMSAyMy40ODgzIDIxLjc1IDIxLjgwOTMgMjEuNzUgMTkuNzM4M1Y4LjM5NzM3TDE0LjQwNjIgMS45ODgyOEg2Wk02IDE4LjQ4ODNMMTggMTguNDg4M1YxNi45ODgzTDYgMTYuOTg4M0w2IDE4LjQ4ODNaTTE4IDE0LjIzODNMNiAxNC4yMzgzTDYgMTIuNzM4M0wxOCAxMi43MzgzVjE0LjIzODNaTTYgMTAuMjM4M0gxMVY4LjczODI4TDYgOC43MzgyOEw2IDEwLjIzODNaIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==";

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

@@ -98,6 +98,7 @@ export class NileSwitcher extends NileElement {
       placeholder,
       disabled,
       required,
+      error,
       errorMessage,
       inputType: inputTypeName,
     } = Input;
@@ -108,7 +109,7 @@ export class NileSwitcher extends NileElement {
       .required=${required}
       .errorMessage=${errorMessage}
       .placeholder=${placeholder}
-      .error=${true}
+      .error=${error}
       @nile-input=${(e: CustomEvent) => {
         this.handleChange(e, inputType, inputTypeName);
       }}
@@ -138,10 +139,11 @@ export class NileSwitcher extends NileElement {
   }
 
   renderNileTextArea(Input: switchInputType, inputType: string) {
-    const { value, disabled, inputType: inputTypeName } = Input;
+    const { value, disabled, readonly, inputType: inputTypeName } = Input;
     return html`<nile-textarea
       .value=${value}
       .disabled=${disabled}
+      ?readonly=${readonly}
       @nile-input=${(e: CustomEvent) => {
         this.handleChange(e, inputType, inputTypeName);
       }}