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

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.7",
   "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-chip/nile-chip.ts

@@ -131,6 +131,7 @@ export class NileChip extends NileElement {
     }
   }
  
+  
   private handleDocumentClick = (event: MouseEvent) => {
     const path = event.composedPath();
     if (!path.includes(this)) {

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

@@ -127,6 +127,11 @@ export class NileliteTooltip extends NileElement {
     this.attachTooltip();
   }
 
+  public refresh() {
+    this.attachTooltip();
+  }
+  
+
   private attachTooltip(): void {
     this.destroyTooltips();
     if (this.disabled) return;
@@ -182,6 +187,53 @@ export class NileliteTooltip extends NileElement {
       },
     };
     if (this.for) {
+      if (this.singleton && !this.for.startsWith('#') && !document.getElementById(this.for)) {
+        const targetEls = Array.from(document.querySelectorAll(`.${this.for}`));
+        if (targetEls.length > 0) {
+          this.tooltipInstances = targetEls.map(el => {
+            const instance = tippy(el as HTMLElement, {
+              ...options,
+              content: el.getAttribute('content') || this.content,
+            });
+            instance.popper.querySelector('.tippy-box')?.classList.add(this.size);
+            return instance;
+          });
+    
+          this.singletonInstance = createSingleton(this.tooltipInstances, {
+            delay: [75, 0],
+            arrow: roundArrow,
+            moveTransition: 'transform 0.15s ease-out',
+          });
+    
+          if (this.open) queueMicrotask(() => this.singletonInstance?.show());
+          return;
+        }
+      }
+    
+      const containerEl = document.getElementById(this.for);
+      if (this.singleton && containerEl) {
+        const childEls = Array.from(containerEl.querySelectorAll('[content]'));
+        if (childEls.length > 0) {
+          this.tooltipInstances = childEls.map(el => {
+            const instance = tippy(el as HTMLElement, {
+              ...options,
+              content: el.getAttribute('content') || this.content,
+            });
+            instance.popper.querySelector('.tippy-box')?.classList.add(this.size);
+            return instance;
+          });
+    
+          this.singletonInstance = createSingleton(this.tooltipInstances, {
+            delay: [75, 0],
+            arrow: roundArrow,
+            moveTransition: 'transform 0.15s ease-out',
+          });
+    
+          if (this.open) queueMicrotask(() => this.singletonInstance?.show());
+          return;
+        }
+      }
+    
       this.targetEl = document.getElementById(this.for);
       if (!this.targetEl) return;