@aquera/nile-elements 0.0.52 → 0.0.54

package/package.json

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

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

@@ -486,6 +486,7 @@ export const styles = css`
     font-size: 12px;
     max-height: 300px;
     overflow-y: scroll;
+    line-height: 16px;
   }
 
   .input__remove-non-printable {
@@ -493,12 +494,14 @@ export const styles = css`
     margin-left: 10px;
     font-size: 14px;
     color: var(--nile-colors-dark-900);
+    cursor: pointer;
   }
 
   .input__srtiked-text-container {
     margin-top: 4px;
     color: var(--nile-colors-dark-900);
     word-wrap: break-all;
+    line-height: 16px;
   }
 
   .input__srtiked-text {

package/src/nile-table-body/nile-table-body.css.ts

@@ -13,6 +13,8 @@ import { css } from 'lit-element';
 export const styles = css`
   :host {
     box-sizing: border-box;
+    --nile-table-background--odd: var(--nile-table-body-row-odd-background-color);
+    --nile-table-background--even: var(--nile-table-body-row-even-background-color);
   }
   .base {
     width: max-content;
@@ -28,6 +30,14 @@ export const styles = css`
     display: table;
     border-collapse: collapse;
   }
+
+  slot::slotted(nile-table-row:nth-child(odd)) {
+    border-bottom: 1px solid var(--nile-table-row-border-color);
+    background: var(--nile-table-background--odd);
+  }
+  slot::slotted(nile-table-row:nth-child(even)) {
+    background: var(--nile-table-background--even);
+  }
 `;
 
 export default [styles];

package/src/nile-table-cell-item/nile-table-cell-item.css.ts

@@ -15,6 +15,9 @@ export const styles = css`
     box-sizing: border-box;
     display: table-cell;
     --min--height: 52px;
+    --max--cell-width:auto;
+    max-width: var(--max--cell-width);
+    overflow: hidden;
   }
 
   .column {

package/src/nile-table-cell-item/nile-table-cell-item.ts

@@ -45,7 +45,7 @@ export class NileTableCellItem extends NileElement {
   public render(): TemplateResult {
     return html`
       ${this.hasSlotController.test('[default]')
-        ? html` <slot class="column"> </slot>`
+        ? html` <slot class="column" part="nile__table-cell"> </slot>`
         : ''}
     `;
   }

package/src/nile-table-header-item/nile-table-header-item.ts

@@ -34,6 +34,13 @@ export class NileTableHeaderItem extends NileElement {
     return [styles];
   }
 
+  /** Enables the sort functionality. */
+  @property({ type: Boolean, reflect: true }) havesort = false;
+  
+  /** Places the icon . */
+  @property({ type: String, reflect: true, attribute: 'icon-name' }) iconName =
+    '';
+
   /* #endregion */
 
   /* #region Methods */
@@ -43,6 +50,9 @@ export class NileTableHeaderItem extends NileElement {
    * @slot This is a slot test
    */
   private handleClick(e: any) {
+    if (!this.havesort) {
+      return;
+    }
     let curr_sort_string =
       e.target?.parentElement?.children[0]?.assignedNodes()[0];
     this.emit('nile-click-sort', { value: curr_sort_string });
@@ -51,12 +61,9 @@ export class NileTableHeaderItem extends NileElement {
     return html` ${this.hasSlotController.test('[default]')
       ? html` <div class="headers">
           <slot @click=${this.handleClick}> </slot>
-          <nile-icon name="info2" size="16"></nile-icon>
-          <nile-icon
-            name="sort"
-            size="16"
-            @click=${this.handleClick}
-          ></nile-icon>
+          ${this.iconName
+            ? html` <nile-icon name="${this.iconName}" size="16" @click=${this.handleClick}></nile-icon>`
+            : html``}
         </div>`
       : html``}`;
   }

package/src/nile-table-row/nile-table-row.css.ts

@@ -14,6 +14,11 @@ export const styles = css`
   :host {
     display: table-row;
     border-bottom: 1px solid #e4e2e4;
+    --nile-header-background:var(--nile-table-header-background-color);
+  }
+
+  slot::slotted(nile-table-header-item) {
+    background-color: var(--nile-header-background);
   }
 `;
 

package/src/nile-table-row/nile-table-row.ts

@@ -42,7 +42,7 @@ export class NileTableRow extends NileElement {
    * @slot This is a slot test
    */
   public render(): TemplateResult {
-    return html` <slot class="row"></slot> `;
+    return html` <slot  part="nile-row"></slot> `;
   }
 
   /* #endregion */

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,41 @@ 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;
+    line-height: 16px;
+  }
+
+  .input__remove-non-printable {
+    color: var(--nile-colors-red-500);
+    margin-left: 10px;
+    font-size: 14px;
+    color: var(--nile-colors-dark-900);
+    cursor: pointer;
+  }
+
+  .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>
     `;
   }