@aquera/nile-elements 0.0.51 → 0.0.53

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.53",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

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

@@ -477,19 +477,36 @@ 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;
+    line-height: 16px;
+  }
+
+  .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>

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

@@ -27,8 +27,8 @@ export const styles = css`
     font-family: var(--nile-font-family-serif);
     font-size: 14px;
     font-style: normal;
-    font-weight: var(--nile-textarea-label-font-weight); 
-    line-height: var(--nile-textarea-label-line-height); 
+    font-weight: var(--nile-textarea-label-font-weight);
+    line-height: var(--nile-textarea-label-line-height);
     letter-spacing: 0.2px;
   }
 
@@ -87,13 +87,13 @@ export const styles = css`
   /* Standard textareas */
   .textarea--standard {
     background-color: var(--nile-colors-white-base);
-    border: 1px solid var(--nile-textarea-standard-border-color); 
-    box-shadow:var(--nile-textarea-standard-box-shadow); 
+    border: 1px solid var(--nile-textarea-standard-border-color);
+    box-shadow:var(--nile-textarea-standard-box-shadow);
   }
 
   .textarea--standard:hover:not(.textarea--disabled) {
     background-color: var(--nile-colors-white-base);
-    border-color: var(--nile-textarea-standard-hover-border-color); 
+    border-color: var(--nile-textarea-standard-hover-border-color);
     border-radius: var(--nile-radius-base-standard);
   }
 
@@ -104,7 +104,7 @@ export const styles = css`
 
   .textarea--standard.textarea--focused:not(.textarea--disabled) {
     background-color: var(--nile-colors-white-base);
-    border-color: var(--nile-textarea-standard-focused-border-color); 
+    border-color: var(--nile-textarea-standard-focused-border-color);
     box-shadow:var(--nile-textarea-standard-focused-box-shadow);
   }
 
@@ -114,11 +114,11 @@ export const styles = css`
   }
 
   .textarea--standard.textarea--disabled {
-    border-color: var(--nile-textarea-standard-disabled-border-color); 
+    border-color: var(--nile-textarea-standard-disabled-border-color);
     background: var(--nile-textarea-standard-disabled-background-color);
     opacity: 0.5;
     cursor: not-allowed;
-    box-shadow:var(--nile-textarea-standard-disabled-box-shadow); 
+    box-shadow:var(--nile-textarea-standard-disabled-box-shadow);
   }
 
   .textarea--standard.textarea--disabled .textarea__control {
@@ -205,6 +205,39 @@ export const styles = css`
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
       0px 0px 0px 4px rgba(240, 68, 56, 0.24);
   }
+
+  .input__non-printable {
+    border-radius: 4px;
+    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: 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;
+    line-height: 16px;
+  }
+
+  .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);
+  }
 `;
 
 export default [styles];

package/src/nile-textarea/nile-textarea.ts

@@ -11,13 +11,13 @@ import {styles} from './nile-textarea.css';
 import { classMap } from 'lit/directives/class-map.js';
 import { query, state } from 'lit/decorators.js';
 import { defaultValue } from '../internal/default-value';
-import { FormControlController } from '../internal/form';
 import { HasSlotController } from '../internal/slot';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { watch } from '../internal/watch';
 import NileElement from '../internal/nile-element';
 import type { CSSResultGroup } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 /**
  * @summary Textareas collect data from the user and allow multiple lines of text.
@@ -111,9 +111,6 @@ export class NileTextarea extends NileElement  {
   /** Sets the input to a success state, changing its visual appearance. */
   @property({ type: Boolean }) success = false;
 
-   /** Sets the input to a destructive state, changing its visual appearance. */
-   @property({ type: Boolean }) destructive = false;
-
   /** Controls whether and how text input is automatically capitalized as it is entered by the user. */
   @property() autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
 
@@ -154,6 +151,12 @@ export class NileTextarea extends NileElement  {
 
   @property({ type: Boolean, reflect: true }) fullHeight = false;
 
+  @property({type: Boolean}) checkNonPrintableChar: boolean = false;
+
+  @state() hasPrintableCharacters: boolean = false;
+
+  @state() markedValue: string;
+
   connectedCallback() {
     super.connectedCallback();
     this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());
@@ -227,6 +230,52 @@ export class NileTextarea extends NileElement  {
   async handleValueChange() {
     await this.updateComplete;
     this.setTextareaHeight();
+
+    if(this.checkNonPrintableChar){
+      this.markNonPrintableCharacters();
+    }
+  }
+
+  /** checks non printable characters in the value. */
+  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);
+
+        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;
+        } 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 = '';
+
+    if (this.value) {
+      for (let i = 0, n = this.value.length; i < n; i++) {
+        const charCode = this.value.charCodeAt(i);
+
+        // Consider a character printable if it's not in the specified non-printable ranges
+        if (!(charCode > 255 && charCode !== 9109) && ![129, 143, 144, 157, 160].includes(charCode)) {
+          cleanedValue += this.value.charAt(i);
+        }
+      }
+    }
+
+    this.value = cleanedValue;
+    this.emit('nile-npchar-removed', { value: this.value });
+
   }
 
   /** Sets focus on the textarea. */
@@ -302,7 +351,7 @@ export class NileTextarea extends NileElement  {
           'form-control': true,
           'form-control--medium': this.size === 'medium',
           'form-control--has-label': hasLabel,
-          'form-control--has-help-text': hasHelpText
+          'form-control--has-help-text': hasHelpText,
         })}
       >
         <label
@@ -314,73 +363,89 @@ export class NileTextarea extends NileElement  {
           <slot name="label">${this.label}</slot>
         </label>
 
-        <div part="form-control-input" class="form-control-input">
-          <div
-            part="base"
-            class=${classMap({
-              textarea: true,
-              'textarea--medium': this.size === 'medium',
-              'textarea--warning': this.warning,
-              'textarea--error': this.error,
-              'textarea--success': this.success,
-              'textarea--destructive': this.destructive,
-              'textarea--standard': !this.filled,
-              'textarea--disabled': this.disabled,
-              'textarea--focused': this.hasFocus,
-              'textarea--empty': !this.value,
-              'textarea--resize-none': this.resize === 'none',
-              'textarea--resize-vertical': this.resize === 'vertical',
-              'textarea--resize-auto': this.resize === 'auto'
-            })}
-          >
-            <textarea
-              part="textarea"
-              id="input"
-              class="textarea__control"
-              title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
-              name=${ifDefined(this.name)}
-              .value=${live(this.value)}
-              ?disabled=${this.disabled}
-              ?readonly=${this.readonly}
-              ?required=${this.required}
-              placeholder=${ifDefined(this.placeholder)}
-              rows=${ifDefined(this.rows)}
-              minlength=${ifDefined(this.minlength)}
-              maxlength=${ifDefined(this.maxlength)}
-              autocapitalize=${ifDefined(this.autocapitalize)}
-              autocorrect=${ifDefined(this.autocorrect)}
-              ?autofocus=${this.autofocus}
-              spellcheck=${ifDefined(this.spellcheck)}
-              enterkeyhint=${ifDefined(this.enterkeyhint)}
-              inputmode=${ifDefined(this.inputmode)}
-              aria-describedby="help-text"
-              @change=${this.handleChange}
-              @input=${this.handleInput}
-              @focus=${this.handleFocus}
-              @blur=${this.handleBlur}
-
-              
-            ></textarea>
+        <nile-popup
+          ?active=${this.hasPrintableCharacters}
+          placement="bottom-start"
+          distance="5"
+          strategy="fixed"
+        >
+          <div part="form-control-input" class="form-control-input" slot="anchor">
+            <div
+              part="base"
+              class=${classMap({
+                textarea: true,
+                'textarea--medium': this.size === 'medium',
+                'textarea--warning': this.warning,
+                'textarea--error': this.error,
+                'textarea--success': this.success,
+                'textarea--standard': !this.filled,
+                'textarea--disabled': this.disabled,
+                'textarea--focused': this.hasFocus,
+                'textarea--empty': !this.value,
+                'textarea--resize-none': this.resize === 'none',
+                'textarea--resize-vertical': this.resize === 'vertical',
+                'textarea--resize-auto': this.resize === 'auto',
+              })}
+            >
+              <textarea
+                part="textarea"
+                id="input"
+                class="textarea__control"
+                title=${
+                  this
+                    .title /* An empty title prevents browser validation tooltips from appearing on hover */
+                }
+                name=${ifDefined(this.name)}
+                .value=${live(this.value)}
+                ?disabled=${this.disabled}
+                ?readonly=${this.readonly}
+                ?required=${this.required}
+                placeholder=${ifDefined(this.placeholder)}
+                rows=${ifDefined(this.rows)}
+                minlength=${ifDefined(this.minlength)}
+                maxlength=${ifDefined(this.maxlength)}
+                autocapitalize=${ifDefined(this.autocapitalize)}
+                autocorrect=${ifDefined(this.autocorrect)}
+                ?autofocus=${this.autofocus}
+                spellcheck=${ifDefined(this.spellcheck)}
+                enterkeyhint=${ifDefined(this.enterkeyhint)}
+                inputmode=${ifDefined(this.inputmode)}
+                aria-describedby="help-text"
+                @change=${this.handleChange}
+                @input=${this.handleInput}
+                @focus=${this.handleFocus}
+                @blur=${this.handleBlur}
+              ></textarea>
+            </div>
           </div>
-        </div>
 
-        ${
-          hasHelpText
+          ${hasHelpText
             ? html`
                 <nile-form-help-text>${this.helpText}</nile-form-help-text>
               `
-            : ``
-        }
-
-        ${
-          hasErrorMessage
+            : ``}
+          ${hasErrorMessage
             ? html`
                 <nile-form-error-message
                   >${this.errorMessage}</nile-form-error-message
                 >
               `
-            : ``
-        }
+            : ``}
+          <div class="input__non-printable">
+            Non-printable character detected.
+            <nile-badge
+              variant="error"
+              @click=${this.removeAllNonPrintableCharacters}
+              class="input__remove-non-printable"
+            >
+              Remove All
+            </nile-badge>
+
+            <div class="input__srtiked-text-container">
+              ${unsafeHTML(this.markedValue)}
+            </div>
+          </div>
+        </nile-popup>
       </div>
     `;
   }