@aquera/nile-elements 0.0.50 → 0.0.52

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

@@ -15,7 +15,7 @@ export const styles = css`
   }
 
   .calendar-container {
-    font-family:var(--nile-font-family-serif);
+    font-family: var(--nile-font-family-serif);
     width: 290px;
     height: auto;
     text-align: center;
@@ -125,6 +125,12 @@ export const styles = css`
     color: white;
   }
 
+  .selected-date:hover,
+  .range-start:hover,
+  .range-end:hover {
+    background: #a5d3f3;
+  }
+
   .range-start {
     background: #a5d3f3;
     border-radius: 4px 0 0 4px;
@@ -174,9 +180,9 @@ export const styles = css`
     margin-top: 6px;
     padding: 0 16px;
     width: 290px;
-    display:flex;
-    flex-wrap:wrap;
-    gap:8px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
   }
 
   .calender-input--relative {
@@ -189,11 +195,11 @@ export const styles = css`
     justify-content: space-between;
     gap: 8px;
     margin-top: 12px;
-    width:auto;
+    width: auto;
   }
 
   .manual-input {
-    width:125px;
+    width: 125px;
   }
 
   .manual-input-label {
@@ -239,7 +245,7 @@ export const styles = css`
     display: flex;
     flex-direction: column;
     width: 352px;
-    gap:10px;
+    gap: 10px;
     padding: 24px 24px 0 24px;
   }
 
@@ -247,7 +253,7 @@ export const styles = css`
     display: flex;
     flex-direction: column;
     align-items: start;
-    justify-content:center;
+    justify-content: center;
     gap: 12px;
   }
 
@@ -347,7 +353,7 @@ export const styles = css`
 
   .not-allowed {
     pointer-events: none;
-    color:var(--nile-colors-dark-500);
+    color: var(--nile-colors-dark-500);
   }
 `;
 

package/src/nile-calendar/nile-calendar.ts

@@ -92,7 +92,7 @@ export class NileCalendar extends NileElement {
 
   firstUpdated() {
     const allowedDatesAttribute = this.getAttribute('allowed-dates');
-    
+
     if (allowedDatesAttribute !== null ) {
       try {
         this.allowedDates = JSON.parse(allowedDatesAttribute);
@@ -145,6 +145,11 @@ export class NileCalendar extends NileElement {
 
   @watch('value')
   valueChanged() {
+
+    if (typeof this.value === 'object' && this.value !== null) {
+      this.value = JSON.stringify(this.value);
+    }
+
     if (this.range && this.value) {
       this.rangeValue = this.value;
       this.value = null;
@@ -879,8 +884,8 @@ export class NileCalendar extends NileElement {
                       }"> </nile-input>
                   </div>
             </div>
-              
-            <div> 
+
+            <div>
                   <span class="manual-input-label">To </span>
                   <div class="from">
                       <nile-input class="manual-input" value="${this.formatDate(
@@ -895,7 +900,7 @@ export class NileCalendar extends NileElement {
                       }"> </nile-input>
                   </div>
             </div>
-            
+
         </div>
         <div class="button-container">
             <nile-button class="apply-button"  ?disabled="${
@@ -916,4 +921,4 @@ declare global {
   interface HTMLElementTagNameMap {
     'nile-calendar': NileCalendar;
   }
-}
+}

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

@@ -58,8 +58,9 @@ export const styles = css`
     border-top: solid var(--border-width) var(--border-color);
     padding: var(--footer-padding);
     border:1px solid var(--nile-card-footer-border-color);
-    background-color:var(--nile-card-footer-background-color);
+    border-width: var(--nile-card-footer-border-width);
     border-radius:var(--nile-card-footer-border-radius);
+    background-color:var(--nile-card-footer-background-color);
   }
 
   .card:not(.card--has-footer) .card__footer {

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>