@aquera/nile-elements 1.2.8-beta-1.5 → 1.2.8-beta-1.6

package/package.json

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

package/src/nile-button-toggle/nile-button-toggle.ts

@@ -85,7 +85,7 @@ export class NileButtonToggle extends NileElement {
     const classString = classes.join(' ');
 
     return html`
-      <div class="${classString}">
+      <div class="${classString} " part="base">
         <slot name="prefix"></slot>
         <slot> </slot>
       </div>

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

@@ -13,7 +13,7 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     box-sizing: border-box;
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    background-color: var(--nile-colors-white-base);
   }
 `;
 

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

@@ -12,7 +12,7 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
-    --padding: var(--nile-spacing-xl, var(--ng-spacing-lg)) var(--nile-spacing-10px, var(--ng-spacing-3xl));
+    --padding: var(--nile-spacing-xl) var(--nile-spacing-10px);
     --height: 44px;
     box-sizing: border-box;
     min-width: 0;
@@ -25,14 +25,13 @@ export const styles = css`
     height: auto;
     font-size: 14px;
     font-weight: 400;
-    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+    font-family: var(--nile-font-family-sans-serif);
   }
 
   .cell-item-base {
     width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
   }
 
   ::slotted(*) {
@@ -55,18 +54,18 @@ export const styles = css`
     touch-action: none;
     z-index: 1;
     width: 2px;
-    border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-right: 1px solid var(--nile-colors-neutral-400);
     display: block;
   }
 
   :host(.shadow-right) {
-    box-shadow: var(--nile-box-shadow-14, var(--ng-shadow-xs));
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    box-shadow: var(--nile-box-shadow-14);
+    background-color: var(---nile-colors-white-base);
   }
 
   :host(.shadow-left) {
-    box-shadow: var(--nile-box-shadow-14, var(--ng-shadow-xs));
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    box-shadow: var(--nile-box-shadow-14);
+    background-color: var(---nile-colors-white-base);
   }
 
   :host-context(nile-grid-row[hover]:hover),
@@ -82,7 +81,7 @@ export const styles = css`
   :host(.cell-rowspan) {
     position: absolute;
     z-index: 1;
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    background-color: var(--nile-colors-white-base);
   }
 `;
 

package/src/nile-grid/nile-grid-head-item/nile-grid-head-item.css.ts

@@ -12,7 +12,7 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
-    --padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-10px, var(--ng-spacing-3xl));
+    --padding: var(--nile-spacing-lg) var(--nile-spacing-10px);
     --height: 50px;
     position: relative;
     box-sizing: border-box;
@@ -21,14 +21,13 @@ export const styles = css`
     overflow: hidden;
     text-overflow: ellipsis;
     padding: var(--padding);
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
-    font-size: var(--nile-font-size-small, var(--ng-font-size-text-xs));
-    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
-    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+    background-color: var(--nile-colors-neutral-100);
+    font-size: var(--nile-font-size-small);
+    font-weight: var(--nile-font-weight-medium);
+    font-family: var(--nile-font-family-sans-serif);
     min-height: var(--height);
     display: flex;
     align-items: center;
-    color: var(--nile---nile-colors-dark-900, var(--ng-colors-text-quaternary-500));
   }
 
   .head-item-base {
@@ -57,23 +56,23 @@ export const styles = css`
     touch-action: none;
     z-index: 1;
     width: 2px;
-    border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-right: 1px solid var(--nile-colors-neutral-400);
   }
 
   :host(.shadow-right) {
-    box-shadow: var(--nile-box-shadow-13, var(--ng-shadow-xs));
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    box-shadow: var(--nile-box-shadow-13);
+    background-color: var(--nile-colors-neutral-100);
   }
 
   :host(.shadow-left) {
-    box-shadow: var(--nile-box-shadow-13, var(--ng-shadow-xs));
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    box-shadow: var(--nile-box-shadow-13);
+    background-color: var(--nile-colors-neutral-100);
   }
 
   :host(.head-rowspan) {
     position: absolute;
     z-index: 1;
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background-color: var(--nile-colors-neutral-100);
   }
 `;
 

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

@@ -14,8 +14,8 @@ export const styles = css`
   .row-base {
     display: grid;
     grid-template-columns: var(--nile-grid-columns);
-    border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border-bottom: 1px solid var(--nile-colors-neutral-400);
+    background-color: var(--nile-colors-white-base);
     position: relative;
   }
 
@@ -32,10 +32,9 @@ export const styles = css`
     z-index: 1;
   }
 
-  /* check it one more time */
   :host([disabled]) {
     background: var(--nile-colors-white-base);
-    border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-bottom: 1px solid var(--nile-colors-neutral-400);
     opacity: 0.3;
   }
 

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

@@ -16,13 +16,13 @@ export const styles = css`
     inline-size: 100%;
     position: relative;
     box-sizing: border-box;
-    border: 1px solid var(--nile-colors-neutral-400, , var(--ng-colors-border-secondary));
-    border-radius: var(--nile-radius-md, var(--ng-radius-xl));
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border: 1px solid var(--nile-colors-neutral-400);
+    border-radius: var(--nile-radius-radius-xl);
+    background-color: var(--nile-colors-white-base);
     max-height: 100%;
     width: 100%;
     min-width: var(--min-width);
-    box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-xs));
+    box-shadow: var(--nile-box-shadow-3);
   }
 
   ::slotted(nile-grid-head),
@@ -34,7 +34,7 @@ export const styles = css`
   .nile-resize-end {
     position: absolute;
     z-index: 4;
-    background-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    background-color: var(--nile-colors-neutral-400);
     width: 2px;
     height: 100%;
     top: 0;

package/src/nile-grid/nile-grid.layout.ts

@@ -194,11 +194,11 @@ function handleRowspan(nileGrid: NileGrid, el: HTMLElement, rowspan: number) {
   if (el.tagName === NILE_GRID_HEAD_ITEM) {
     if (!nileGrid.headHeight) nileGrid.headHeight = el.getBoundingClientRect().height;
     el.style.height = `${(nileGrid.headHeight * rowspan) + (rowspan - 1)}px`;
-    el.style.backgroundColor = "var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary))";
+    el.style.backgroundColor = "#FAFAFA";
   } else {
     if (!nileGrid.cellHeight) nileGrid.cellHeight = el.getBoundingClientRect().height;
     el.style.height = `${(nileGrid.cellHeight * rowspan) + (rowspan - 1)}px`;
-    el.style.backgroundColor = "var(--nile-colors-white-base, var(--ng-colors-bg-primary))";
+    el.style.backgroundColor = "#FFF";
   }
 }
 
@@ -289,7 +289,7 @@ function applySticky(
  */
 function prepareStickyElement(el: HTMLElement) {
   el.style.position = 'sticky';
-  el.style.zIndex = '1';
+  el.style.zIndex = '2';
   el.style.left = '';
   el.style.right = '';
   el.removeAttribute('data-sticky');

package/src/nile-lite-tooltip/nile-lite-tooltip.ts

@@ -183,21 +183,91 @@ export class NileliteTooltip extends NileElement {
     };
     if (this.for) {
       this.targetEl = document.getElementById(this.for);
-      if (!this.targetEl) return;
-
+      let targets: HTMLElement[] = [];
+      if (this.targetEl) {
+        targets = [this.targetEl];
+      } else {
+        const selector = this.for.startsWith('.') ? this.for : `.${this.for}`;
+        targets = Array.from(document.querySelectorAll(selector));
+      }
+    
+      if (!targets || targets.length === 0) return;
+    
+      if (targets.length > 1) {
+        this.tooltipInstances = targets.map(el => {
+          const localContent = el.getAttribute('content') || this.content;
+    
+          const instance = tippy(el, {
+            ...options,
+            content: localContent,
+          });
+    
+          instance.popper.querySelector('.tippy-box')?.classList.add(this.size);
+          return instance;
+        });
+    
+        if (this.singleton && this.tooltipInstances.length > 1) {
+          this.singletonInstance = createSingleton(this.tooltipInstances, {
+            delay: [75, 0],
+            arrow: roundArrow,
+            moveTransition: 'transform 0.15s ease-out',
+            overrides: ['content'],
+          });
+        }
+    
+        if (this.open) {
+          if (this.singletonInstance) this.singletonInstance.show();
+          else this.tooltipInstances.forEach(t => t.show());
+        }
+    
+        return;  
+      }
+    
+      this.targetEl = targets[0];
+    
+      const children = Array.from(this.targetEl.querySelectorAll('*'));
+      if (children.length > 0) {
+        this.tooltipInstances = children.map(child => {
+          const el = child as HTMLElement;
+          const localContent = el.getAttribute('content') || this.content;
+    
+          const instance = tippy(el, {
+            ...options,
+            content: localContent,
+          });
+    
+          instance.popper.querySelector('.tippy-box')?.classList.add(this.size);
+          return instance;
+        });
+    
+        if (this.singleton && this.tooltipInstances.length > 1) {
+          this.singletonInstance = createSingleton(this.tooltipInstances, {
+            delay: [75, 0],
+            arrow: roundArrow,
+            moveTransition: 'transform 0.15s ease-out',
+            overrides: ['content'],
+          });
+        }
+    
+        if (this.open) {
+          if (this.singletonInstance) this.singletonInstance.show();
+          else this.tooltipInstances.forEach(t => t.show());
+        }
+    
+        return;  
+      }
+ 
       if (!this.id) {
-        this.generatedId = `nile-tooltip-${Math.random()
-          .toString(36)
-          .slice(2, 9)}`;
+        this.generatedId = `nile-tooltip-${Math.random().toString(36).slice(2, 9)}`;
         this.id = this.generatedId;
       }
-
+    
       this.prevDescribedby = this.targetEl.getAttribute('aria-describedby');
       const describedby = this.prevDescribedby
         ? `${this.prevDescribedby} ${this.id}`
         : this.id;
       this.targetEl.setAttribute('aria-describedby', describedby);
-
+    
       this.singleInstance = tippy(this.targetEl, options);
       if (this.size)
         this.singleInstance.popper
@@ -208,31 +278,8 @@ export class NileliteTooltip extends NileElement {
       }
       return;
     }
-
-    const children = Array.from(this.querySelectorAll('*'));
-    if (children.length > 0) {
-      this.tooltipInstances = children.map(child => {
-        const el = child as HTMLElement;
-        const localContent = el.getAttribute('content') || this.content;
-        const instance = tippy(el, { ...options, content: localContent });
-        instance.popper.querySelector('.tippy-box')?.classList.add(this.size);
-        return instance;
-      });
-
-      if (this.singleton && this.tooltipInstances.length > 1) {
-        this.singletonInstance = createSingleton(this.tooltipInstances, {
-          delay: [75, 0],
-          arrow: roundArrow,
-          moveTransition: 'transform 0.15s ease-out',
-        });
-      }
-
-      if (this.open) {
-        if (this.singletonInstance) this.singletonInstance.show();
-        else this.tooltipInstances.forEach(t => t.show());
-      }
-    }
-  }
+    
+  }    
 
   private destroyTooltips(): void {
     this.tooltipInstances?.forEach(t => t.destroy());