@aquera/nile-elements 1.0.1 → 1.1.0-beta-1.0

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

@@ -42,7 +42,6 @@ export class NileTableBody extends NileElement {
   @query('slot') defaultSlot: HTMLSlotElement;
   @queryAssignedNodes({ flatten: true }) _childNodes!: Array<HTMLElement>;
   @property() type: 'primary' | 'secondary' = 'primary';
-  @property() bodyStyle: string;
 
   @state() private rows_data: any[] = [];
   @state() private header_rows_data: any[] = [];
@@ -124,7 +123,6 @@ export class NileTableBody extends NileElement {
           @slotchange=${this.handleSlotchange}
           @nile-click-sort=${this.handleSort}
           class="nile__table__body"
-          style="display: ${this.bodyStyle}"
           ?resizable=${this.hasResizableColumns}
           @nile-search=${this.handleSearch}
         ></slot>

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

@@ -6,7 +6,7 @@
  */
 
 import { css } from 'lit';
-import { resizableCellStyles, resizerStyles } from '../internal/resizable-table-styles';
+import { resizableHostStyles, resizerStyles, resizableSlotStyles } from '../internal/resizable-table-styles';
 
 /**
  * TableCellItem CSS
@@ -17,34 +17,40 @@ export const styles = css`
     --cell-width:auto;
     --min--height: 52px;
     --max--cell-width: auto;
-    --padding: var(--nile-spacing-xl , var(--ng-spacing-lg)) var(--nile-spacing-3xl , var(--ng-spacing-3xl));
     box-sizing: border-box;
     display: table-cell;
     vertical-align: middle;
-    padding: var(--padding);
-    max-width: var(--max--cell-width);
+    padding: 16px 24px;
+    max-width: var(--max--cell-width);  
     min-height: var(--min--height);
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+  }
+
+  .cell__wrapper {
+    height: 100%;
+    position: relative;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    width: 100%;
   }
 
   .column {
     min-width:var(--min-cell-width);
     width:var(--cell-width);
     height: 100%;
-    color: var(--nile-colors-gray-light-mode-600 , var(--ng-colors-text-tertiary-600));
-    font-family: var(--nile-font-family-serif , var(--ng-font-family-body));
-    font-size: var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
+    color: var(--nile-colors-gray-light-mode-600);
+    font-family: var(--nile-font-family-serif);
+    font-size: var(--nile-type-scale-3);
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular , var(--ng-font-weight-regular));
+    font-weight: var(--nile-font-weight-regular);
     /* line-height: var(--nile-type-scale-6); */
     line-height: normal;
     letter-spacing: 0.2px;
   }
 
-  ${resizableCellStyles}
+  ${resizableHostStyles}
   ${resizerStyles}
+  ${resizableSlotStyles}
 `;
 
 export default [styles];

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

@@ -10,13 +10,12 @@ import {
   html,
   CSSResultArray,
   TemplateResult,
-  PropertyValues,
 } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-table-cell-item.css';
 import NileElement from '../internal/nile-element';
 import { HasSlotController } from '../internal/slot';
-import { createResizeHandler, resetAllColumnWidths } from '../internal/resizable-table-helper';
+import { createResizeHandler } from '../internal/resizable-table-helper';
 
 /**
  * Nile table Cell Item component.
@@ -44,19 +43,6 @@ export class NileTableCellItem extends NileElement {
 
   private handleResizeStart = createResizeHandler(this, 50);
 
-  protected updated(changedProperties: PropertyValues) {
-    super.updated(changedProperties);
-    
-    if (changedProperties.has('resizable')) {
-      if (!this.resizable) {
-        const tableBody = this.closest('nile-table-body');
-        if (tableBody) {
-          resetAllColumnWidths(tableBody);
-        }
-      }
-    }
-  }
-
   /**
    * Render method
    * @slot This is a slot test

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

@@ -6,7 +6,7 @@
  */
 
 import { css } from 'lit';
-import { resizableHeaderStyles, resizerStyles } from '../internal/resizable-table-styles';
+import { resizableHeaderStyles, headerResizerStyles } from '../internal/resizable-table-styles';
 
 /**
  * TableHeaderItem CSS
@@ -17,18 +17,15 @@ export const styles = css`
     --cell-width: auto;
     display: table-cell;
     box-sizing: border-box;
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
-
+  
   .header__item__wrapper{
     min-width:var(--cell-min-width);
     width:var(--cell-width);
     display:flex;
     align-items:center;
     box-sizing: border-box;
-    padding: var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-3-x , var(--ng-spacing-3xl));
+    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-3xl);
     min-height: 44px;
     height: 44px;
   }
@@ -39,12 +36,12 @@ export const styles = css`
     align-items: center;
     height: auto;
     width: 100%;
-    gap: var(--nile-spacing-md , var(--ng-spacing-xs));
-    color: var(--nile-colors-gray-light-mode-600 , var(--ng-colors-text-quaternary-500));
-    font-family: var(--nile-font-family-serif , var(--ng-font-family-body));
+    gap: 8px;
+    color: var(--nile-colors-gray-light-mode-600);
+    font-family: var(--nile-font-family-serif);
     font-feature-settings: 'clig' off, 'liga' off;
-    font-size: var(--nile-type-scale-2 , var(--ng-font-size-text-xs));
-    font-weight: var(--nile-font-weight-medium , var(--ng-font-weight-semibold));
+    font-size: var(--nile-type-scale-2);
+    font-weight: 500;
     font-style: normal;
     /* line-height: var(--nile-type-scale-5); */
     line-height: normal;
@@ -57,7 +54,7 @@ export const styles = css`
   .sorting__icons {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: centre;
   }
 
   .sorting__icons nile-icon:hover {
@@ -65,21 +62,15 @@ export const styles = css`
   }
 
   .hover__arrow {
-    opacity: 0.6;
-    --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));
+    opacity: 0;
   }
 
   .headers:hover .hover__arrow {
-    /* opacity: 0.3; */
-    --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));
-  }
-
-  .stroke-width {
-    --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));
+    opacity: 0.3;
   }
 
   ${resizableHeaderStyles}
-  ${resizerStyles}
+  ${headerResizerStyles}
 `;
 
 export default [styles];

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

@@ -10,13 +10,12 @@ import {
   html,
   CSSResultArray,
   TemplateResult,
-  PropertyValues,
 } from 'lit';
 import { customElement, state, property } from 'lit/decorators.js';
 import { styles } from './nile-table-header-item.css';
 import NileElement from '../internal/nile-element';
 import { HasSlotController } from '../internal/slot';
-import { createResizeHandler, resetAllColumnWidths } from '../internal/resizable-table-helper';
+import { createResizeHandler } from '../internal/resizable-table-helper';
 
 /**
  * Nile icon component.
@@ -54,19 +53,6 @@ export class NileTableHeaderItem extends NileElement {
 
   /* #region Methods */
 
-  protected updated(changedProperties: PropertyValues) {
-    super.updated(changedProperties);
-    
-    if (changedProperties.has('resizable')) {
-      if (!this.resizable) {
-        const tableBody = this.closest('nile-table-body');
-        if (tableBody) {
-          resetAllColumnWidths(tableBody);
-        }
-      }
-    }
-  }
-
   /**
    * Render method
    * @slot This is a slot test
@@ -93,37 +79,32 @@ export class NileTableHeaderItem extends NileElement {
           <slot> </slot>
           ${this.havesort && this.sorting_ct % 3 === 0
             ? html`<nile-icon
-                name="var(--nile-icon-sort, var(--ng-icon-chevron-selector-vertical))"
-                method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
-                size="var(--nile-icon-size-16, var(--ng-icon-size-12))"
+                name="sortdown"
+                size="16"
                 @click=${this.handleSort}
                 class="hover__arrow"
               ></nile-icon>`
             : null}
           ${this.havesort && this.sorting_ct % 3 === 1
             ? html`<nile-icon
-                name="var(--nile-icon-sort-down, var(--ng-icon-arrow-down))"
-                method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
-                size="var(--nile-icon-size-16, var(--ng-icon-size-12))"
-                class="stroke-width"
+                name="sortdown"
+                size="16"
                 @click=${this.handleSort}
               ></nile-icon>`
             : null}
           ${this.havesort && this.sorting_ct % 3 === 2
             ? html`<nile-icon
-                name="var(--nile-icon-sort-up, var(--ng-icon-arrow-up))"
-                method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
-                size="var(--nile-icon-size-16, var(--ng-icon-size-12))"
-                class="stroke-width"
+                name="sortup"
+                size="16"
                 @click=${this.handleSort}
               ></nile-icon>`
             : null}
           ${this.iconName
-            ? html` <nile-icon name="${this.iconName}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="16"></nile-icon>`
+            ? html` <nile-icon name="${this.iconName}" size="16"></nile-icon>`
             : html``}
           ${this.havefilter
             ? html` <nile-popover title="Filter" placement="bottom">
-                <nile-icon name="var(--nile-icon-filter, var(--ng-icon-filter-lines))" size="16" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" slot="anchor"></nile-icon>
+                <nile-icon name="filter" size="16" slot="anchor"></nile-icon>
                 <nile-input
                   placeholder="Search"
                   @nile-input=${this.handleSearch}

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

@@ -16,17 +16,17 @@ export const styles = css`
     width: 100%;
     height: 100%;
     height: max-content;
-    border-bottom: 1px solid var(--nile-table-row-border-color , var(--ng-colors-border-secondary));
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+    --nile-header-background: var(--nile-table-header-background-color);
+    border-bottom: 1px solid var(--nile-table-row-border-color);
   }
 
   slot::slotted(nile-table-header-item) {
-    background-color: var(--nile-table-header-background-color , var(--ng-colors-bg-secondary));
+    background-color: var(--nile-header-background);
   }
 
-  
+  nile-table-row > slot::slotted(nile-table-cell-item:first-child) {
+    color: red;
+  }
 `;
 
 export default [styles];

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

@@ -13,9 +13,6 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     display: inline-block;
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .tag {
@@ -25,30 +22,23 @@ export const styles = css`
     line-height: 1;
     white-space: nowrap;
     user-select: none;
-    border-radius: var(--nile-radius-sm , var(--ng-radius-sm));
-    gap: var(--nile-spacing-sm , var(--ng-spacing-sm));
+    border-radius: 4px;
+    gap: 6px;
   }
 
   .tag__remove::part(base) {
     color: inherit;
-    padding: var(--nile-spacing-none , var(--ng-spacing-none));
+    padding: 0;
   }
 
   /*
    * Variant modifiers
    */
 
-  .tag--medium {
-    font-size: var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
-    height: var(--nile-height-26px , var(--ng-height-auto));
-    border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-400 , var(--ng-colors-border-primary));
-    padding: var(--nile-spacing-none , var(--ng-spacing-xs)) var(--nile-spacing-xsmall , var(--ng-spacing-md));
-  }
-
   .tag--primary {
     background: var(--nile-colors-primary-600);
-    border-color: var(--nile-colors-primary-600, var(--ng-colors-border-primary));
-    border: 2px solid  var(--nile-colors-primary-600, var(--ng-colors-border-primary));
+    border-color: var(--nile-colors-primary-600);
+    border: 2px solid  var(--nile-colors-primary-600);
     color: var(--nile-colors-white-base);
   }
 
@@ -57,82 +47,90 @@ export const styles = css`
   }
 
   .tag--primary:active > nile-icon-button {
-    color: var(--nile-colors-blue-700);
+    color: hsl(200.4 98% 39.4%);
   }
 
   .tag--success {
     background: var(--nile-colors-green-400);
-    border: 2px solid var(--nile-colors-green-400, var(--ng-colors-border-primary));
+    border: 2px solid var(--nile-colors-green-400);
     color: var(--nile-colors-dark-900);
   }
 
   .tag--success:hover {
-    border: 2px solid var(--nile-colors-green-500, var(--ng-colors-border-primary));
+    border: 2px solid var(--nile-colors-green-500);
   }
 
   .tag--success:active > nile-icon-button {
-    color: var(--nile-colors-green-700);
+    color: hsl(142.1 76.2% 36.3%);
   }
 
   .tag--normal {
-    background: var(--nile-colors-neutral-400 , var(--ng-colors-bg-primary));
-    border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-400 , var(--ng-colors-border-primary));
-    color: var(--nile-colors-dark-900 , var(--ng-colors-text-secondary-700));
+    background: var(--nile-colors-neutral-400);
+    border: 2px solid var(--nile-colors-neutral-400);
+    color: var(--nile-colors-dark-900);
   }
-  
+
   .tag--normal:hover {
-    border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-500 , var(--ng-colors-border-primary));
+    border: 2px solid var(--nile-colors-neutral-500);
   }
 
+
   .tag--normal:active > nile-icon-button {
-    color: var(--nile-colors-neutral-700);
+    color: hsl(240 5.2% 33.9%);
   }
 
   .tag--warning {
     background: var(--nile-colors-yellow-400);
-    border: 2px solid var(--nile-colors-yellow-400, var(--ng-colors-border-primary));
+    border: 2px solid var(--nile-colors-yellow-400);
     color: var(--nile-colors-dark-900);
   }
 
   .tag--warning:hover {
-    border: 2px solid var(--nile-colors-yellow-500, var(--ng-colors-border-primary));
+    border: 2px solid var(--nile-colors-yellow-500);
   }
 
   .tag--warning:active > nile-icon-button {
-    color: var(--nile-colors-yellow-500);
+    color: hsl(32.1 94.6% 43.7%);
   }
 
 
   .tag--error {
     background: var(--nile-colors-red-400);
-    border: 2px solid var(--nile-colors-red-400, var(--ng-colors-border-primary));
+    border: 2px solid var(--nile-colors-red-400);
     color: var(--nile-colors-dark-900);
   }
 
   .tag--error:hover {
-    border: 2px solid var(--nile-colors-red-500, var(--ng-colors-border-primary));
+    border: 2px solid var(--nile-colors-red-500);
   }
 
   .tag--error:active > nile-icon-button {
-    color: var(--nile-colors-red-500);
+    color: hsl(0 72.2% 50.6%);
   }
 
   .tag--info {
     background: var(--nile-colors-blue-400);
-    border: 2px solid var(--nile-colors-blue-400, var(--ng-colors-border-primary));
+    border: 2px solid var(--nile-colors-blue-400);
     color: var(--nile-colors-dark-900);
   }
 
   .tag--info:hover {
-    border: 2px solid var(--nile-colors-blue-500, var(--ng-colors-border-primary));
+    border: 2px solid var(--nile-colors-blue-500);
   }
 
   .tag--info:active > nile-icon-button {
-    color: var(--nile-colors-red-500);
+    color: hsl(0 72.2% 50.6%);
+  }
+
+
+  .tag--medium {
+    font-size: 14px;
+    height: 26px;
+    padding: 0 0.75rem;
   }
 
   .tag__remove {
-    margin-inline-start: var(--nile-spacing-7px , var(--ng-spacing-md));
+    margin-inline-start: 0.5rem;
   }
 
   /*
@@ -140,23 +138,17 @@ export const styles = css`
    */
 
   .tag--pill {
-    border-radius: var(--nile-radius-full , var(--ng-spacing-8xl));
+    border-radius: 9999px;
   }
 
   .tag__prefix {
-  padding: var(--nile-spacing-3px, var(--ng-spacing-xs)) var(--nile-spacing-sm , var(--ng-spacing-sm));
+  padding: 3px 6px;
 }
 
  .tag__content {
-  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+  font-size: 14px;
 }
 
-  .prefix_content_wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 6px;
-  }
 `;
 
 export default [styles];

package/src/nile-tag/nile-tag.ts

@@ -65,34 +65,27 @@ export class NileTag extends NileElement {
   private handleRemoveClick() {
     this.emit('nile-remove');
   }
-  
+
   getCloseButtonColor() {
-    let primaryColor;
     switch (this.variant) {
       case 'primary':
-        primaryColor = '--nile-colors-blue-500';
-        break;
+        return  '--nile-colors-blue-500'; 
       case 'success':
-        primaryColor = '--nile-colors-green-500';
-        break;
+        return '--nile-colors-green-500'; 
       case 'normal':
-        primaryColor = '--nile-colors-dark-500';
-        break;
+        return '--nile-colors-dark-500'; 
       case 'warning':
-        primaryColor = '--nile-colors-yellow-500';
-        break;
+        return '--nile-colors-yellow-500';
       case 'error':
-        primaryColor = '--nile-colors-red-500';
-        break;
+        return '--nile-colors-red-500';
       case 'info':
-        primaryColor = '--nile-colors-blue-500';
-        break;
+        return '--nile-colors-blue-500';
       default:
-        primaryColor = '--nile-colors-dark-500';
+        return '--nile-colors-dark-500'; 
     }
-    return `var(${primaryColor}, var(--ng-colors-fg-quaternary-400))`;
   }
   
+
   render() {
     const colorVariable = this.getCloseButtonColor();
     return html`
@@ -120,23 +113,22 @@ export class NileTag extends NileElement {
 
         })}
       >
-        <div class="prefix_content_wrapper" part="prefix_content_wrapper">
-          <slot name="prefix" part="prefix" class="tag__prefix"></slot>
-          <slot part="content" class="tag__content"></slot>
-        </div>
+        <slot name="prefix" part="prefix" class="tag__prefix"></slot>
+
+        <slot part="content" class="tag__content"></slot>
 
         ${this.removable
           ? html`
               <nile-icon-button
                 part="remove-button"
                 exportparts="base:remove-button__base"
-                name="var(--nile-icon-close, var(--ng-icon-x-close))"
+                name="close"
                 library="system"
                 label="remove"
-                class="tag__remove cross_icon"
+                class="tag__remove"
                 @click=${this.handleRemoveClick}
                 tabindex="-1"
-                 color=${this.getCloseButtonColor()}
+                color="var(${colorVariable})"
               ></nile-icon-button>
             `
           : ''}