@aquera/nile-elements 0.0.53 → 0.0.55

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.53",
+  "version": "0.0.55",
   "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,6 +494,7 @@ export const styles = css`
     margin-left: 10px;
     font-size: 14px;
     color: var(--nile-colors-dark-900);
+    cursor: pointer;
   }
 
   .input__srtiked-text-container {

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

@@ -307,6 +307,11 @@ export class NileInput extends NileElement implements NileFormControl {
   private handleFocus() {
     this.hasFocus = true;
     this.emit('nile-focus', { value: this.value });
+
+    if(this.checkNonPrintableChar){
+      this.markNonPrintableCharacters();
+    }
+
   }
 
   private handleInput() {

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

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