@aquera/nile-elements 0.0.51 → 0.0.52

package/package.json

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

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

@@ -477,19 +477,35 @@ export const styles = css`
   }
 
   .input__non-printable {
-    width: 280px;
-    height: 12px;
     border-radius: 4px;
-    background-color: #ffffff;
-    border: 1px solid grey;
-    color: red;
+    max-width: 400px;
+    background-color: var(--nile-colors-white-base);
+    border: 1px solid var(--nile-colors-red-500);
+    color: var(--nile-colors-red-500);
     padding: 10px;
     font-size: 12px;
+    max-height: 300px;
+    overflow-y: scroll;
   }
 
   .input__remove-non-printable {
-    color: #035da6;
+    color: var(--nile-colors-red-500);
     margin-left: 10px;
+    font-size: 14px;
+    color: var(--nile-colors-dark-900);
+  }
+
+  .input__srtiked-text-container {
+    margin-top: 4px;
+    color: var(--nile-colors-dark-900);
+    word-wrap: break-all;
+  }
+
+  .input__srtiked-text {
+    text-decoration: line-through;
+    text-decoration-color: var(--nile-colors-white-base);
+    color: var(--nile-colors-white-base);
+    background-color: var(--nile-colors-red-500);
   }
 `;
 

package/src/nile-input/nile-input.ts

@@ -25,6 +25,7 @@ import { live } from 'lit/directives/live.js';
 import { watch } from '../internal/watch';
 import type { CSSResultGroup } from 'lit';
 import NileElement, { NileFormControl } from '../internal/nile-element';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 /**
  * Nile icon component.
@@ -227,6 +228,8 @@ export class NileInput extends NileElement implements NileFormControl {
 
   @state() hasPrintableCharacters: boolean = false;
 
+  @state() markedValue: string;
+
   connectedCallback() {
     super.connectedCallback();
     this.emit('nile-init');
@@ -360,29 +363,32 @@ export class NileInput extends NileElement implements NileFormControl {
     await this.updateComplete;
 
     if(this.checkNonPrintableChar){
-      this.findNonPrintableChar();
+      this.markNonPrintableCharacters();
     }
   }
 
-
   /** checks non printable characters in the value. */
-  findNonPrintableChar() {
+  markNonPrintableCharacters() {
+    let markedValue = '';
     this.hasPrintableCharacters = false;
-
     if (this.value) {
       for (let i = 0, n = this.value.length; i < n; i++) {
         const charCode = this.value.charCodeAt(i);
 
-        // Check if the character is non-printable
         if ((charCode > 255 && charCode !== 9109) || [129, 143, 144, 157, 160].includes(charCode)) {
+          markedValue += `<span class="input__srtiked-text">${this.value.charAt(i)}</span>`;
           this.hasPrintableCharacters = true;
-          this.emit('nile-value', { value: this.value , hasPrintableCharacters: true });
-          break;
+        } else {
+          markedValue += this.value.charAt(i);
         }
       }
     }
+
+    this.markedValue = markedValue;
+    this.emit('nile-value-marked', { value: this.markedValue, hasNonPrintableCharacters: this.hasPrintableCharacters });
   }
 
+
   /** Removes all non printable characters from the value. */
   removeAllNonPrintableCharacters() {
     let cleanedValue = '';
@@ -657,9 +663,17 @@ export class NileInput extends NileElement implements NileFormControl {
           </div>
 
           <div class="input__non-printable">
-          Non-printable character detected.<span class="input__remove-non-printable" @click=${
+          Non-printable character detected.
+          <nile-badge variant="error" @click=${
             this.removeAllNonPrintableCharacters
-          }> Remove All </span>
+          }  class="input__remove-non-printable"  >
+                      Remove All
+              </nile-badge>
+
+            <div class="input__srtiked-text-container">  ${unsafeHTML(
+              this.markedValue
+            )} </div>
+
           </div>
           </nile-popup>
         </div>