@aquera/nile-elements 0.1.32-beta-1.2 → 0.1.32-beta-1.4

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.32-beta-1.2",
+  "version": "0.1.32-beta-1.4",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -84,7 +84,7 @@
     "./nile-section-message": "./dist/src/nile-section-message/index.js",
     "./nile-toolbar": "./dist/src/nile-toolbar/index.js",
     "./nile-inline-edit": "./dist/src/nile-inline-edit/index.js",
-    "./nile-table": "./dist/src/nile-table/index.js"
+    "./nile-tour": "./dist/src/nile-tour/index.js"
   },
   "scripts": {
     "analyze": "cem analyze --litelement",
@@ -188,4 +188,4 @@
       "prettier --write"
     ]
   }
-}
+}

package/src/index.ts

@@ -74,5 +74,4 @@ export { NileDivider } from './nile-divider';
 export { NileTitle } from './nile-title';
 export { NileSectionMessage } from './nile-section-message';
 export { NileToolbar } from './nile-toolbar';
-export { NileInlineEdit } from './nile-inline-edit';
-export { NileTable } from './nile-table';
+export { NileInlineEdit } from './nile-inline-edit';

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

@@ -113,7 +113,7 @@ export const styles = css`
   }
 
   .accordian--open .accordian__summary-icon {
-    rotate: 0deg;
+    rotate: 90deg;
   }
 
   .accordian--open slot[name='expand-icon'],

package/src/nile-accordion/nile-accordion.ts

@@ -1,4 +1,4 @@
- /**
+/**
  * Copyright Aquera Inc 2023
  *
  * This source code is licensed under the BSD-3-Clause license found in the
@@ -57,7 +57,6 @@ static styles: CSSResultGroup = styles;
 @query('.accordian__header') header: HTMLElement;
 @query('.accordian__body') body: HTMLElement;
 @query('.accordian__expand-icon-slot') expandIconSlot: HTMLSlotElement;
-@query('slot[name="summary"]') summarySlot: HTMLSlotElement;  
 
 /**
  * Indicates whether or not the accordian is open. You can toggle this attribute to show and hide the accordian, or you
@@ -94,17 +93,7 @@ firstUpdated() {
   this.body.style.height = this.open ? 'auto' : '0';
 }
 
-  private handleSummaryClick(event: MouseEvent) {
-    const path = event.composedPath();
-    const slotIndex = path.indexOf(this.summarySlot);
-    if (slotIndex !== -1) {
-      for (let i = 0; i < slotIndex; i++) {
-        const el = path[i];
-        if (el instanceof Element && el.matches('input, button, select, textarea, a, label')) {
-          return;  
-        }
-      }
-    }
+private handleSummaryClick() {
   if (!this.disabled) {
     if (this.open) {
       this.hide();
@@ -230,10 +219,10 @@ render() {
 
         <span part="summary-icon" class="accordian__summary-icon">
           <slot name="expand-icon">
-            <nile-icon name="arrowdown"></nile-icon>
+            <nile-icon name="arrowright"></nile-icon>
           </slot>
           <slot name="collapse-icon">
-            <nile-icon name="arrowup"></nile-icon>
+            <nile-icon name="arrowright"></nile-icon>
           </slot>
         </span>
       </div>

package/src/nile-circular-progressbar/nile-circular-progressbar.css.ts

@@ -5,59 +5,60 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { css } from 'lit';
+ import { css } from 'lit';
 
-/**
- * Progressbar CSS
- */
-export const styles = css`
-
- :host {
-  display: inline-block;
-   
-}
-
-.track {
-  stroke-width: 3px;
-  stroke: var(--nile-circular-progress-bar-track-color-stroke);
-  opacity: 0.5;
-  fill: none;
-}
-
-.progress {
-  stroke-width: 3px;
-  stroke: var(--nile-circular-progress-bar-progress-color-stroke);
-  stroke-linecap: round;
-  fill: none;
-  transform: rotate(270deg);
-  transform-origin: center;
-  transition: stroke-dashoffset 0.8s ease-in-out;  
-}
-
-.circle__text {
-  fill: var(--nile-circular-progress-bar-circle-color-text);
-  text-align: center;
-  font-size: var(--nile-type-scale-1);
-  font-style: normal;
-  font-weight: var(--nile-font-weight-regular);
-  line-height: var(--nile-type-scale-1);
-  letter-spacing: 0.2px;
-}
-
-.nile-progress-bar__status {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 4px;
-}
-
-.nile-progress-bar__message {
-  flex-grow: 1;
-}
-
-.nile-progress-bar__percentage {
-  white-space: nowrap;
-}
-
-`
-export default [styles];
+ /**
+  * Progressbar CSS
+  */
+ export const styles = css`
+ 
+  :host {
+   display: inline-block;
+    
+ }
+ 
+ .track {
+   stroke-width: 3px;
+   stroke: var(--nile-circular-progress-bar-track-color-stroke);
+   opacity: 0.5;
+   fill: none;
+ }
+ 
+ .progress {
+   stroke-width: 3px;
+   stroke: var(--nile-circular-progress-bar-progress-color-stroke);
+   stroke-linecap: round;
+   fill: none;
+   transform: rotate(270deg);
+   transform-origin: center;
+   transition: stroke-dashoffset 0.8s ease-in-out;  
+ }
+ 
+ .circle__text {
+   fill: var(--nile-circular-progress-bar-circle-color-text);
+   text-align: center;
+   font-size: var(--nile-type-scale-1);
+   font-style: normal;
+   font-weight: var(--nile-font-weight-regular);
+   line-height: var(--nile-type-scale-1);
+   letter-spacing: 0.2px;
+ }
+ 
+ .nile-progress-bar__status {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   margin-bottom: 4px;
+ }
+ 
+ .nile-progress-bar__message {
+   flex-grow: 1;
+ }
+ 
+ .nile-progress-bar__percentage {
+   white-space: nowrap;
+ }
+ 
+ `
+ export default [styles];
+ 

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

@@ -15,6 +15,14 @@ export const styles = css`
     display: block;
   }
 
+  /* To Hide Safari's AutoFill icon */
+  input::-webkit-contacts-auto-fill-button {
+    visibility: hidden;
+    width: 0;
+    margin: 0;
+    padding: 0;
+  }
+
   .form-control .form-control__label {
     display: none;
   }

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

@@ -10,7 +10,6 @@ import {
   html,
   CSSResultArray,
   TemplateResult,
-  PropertyValues,
 } from 'lit';
 import {
   customElement,
@@ -39,8 +38,8 @@ export class NileTableBody extends NileElement {
    */
 
   @query('slot') defaultSlot: HTMLSlotElement;
-  @queryAssignedNodes({ flatten: true }) _childNodes!: Array<HTMLElement>;
-  @property() type: 'primary' | 'secondary' = 'primary';
+  @queryAssignedNodes({ flatten: true })
+  _childNodes!: Array<HTMLElement>;
 
   @state() private rows_data: any[] = [];
   @state() private header_rows_data: any[] = [];
@@ -51,10 +50,6 @@ export class NileTableBody extends NileElement {
     return [styles];
   }
 
-  protected firstUpdated(_changedProperties: PropertyValues): void {
-    this.emit('nile-body-load', { value: this.type, comp:this },true,false)
-  }
-
   /* #endregion */
 
   /* #region Methods */
@@ -68,7 +63,6 @@ export class NileTableBody extends NileElement {
   }
 
   handleSlotchange(e: any) {
-    this.emit('nile-body-content-changed', { value: this.type, comp:this },true,false)
     let row_data: any = [];
     this._childNodes.forEach((child: any) => {
       if (child.tagName && child?.tagName?.toLowerCase() === 'nile-table-row') {

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

@@ -12,21 +12,17 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
-    --min-cell-width:auto;
-    --cell-width:auto;
-    --min--height: 52px;
-    --max--cell-width: auto;
     box-sizing: border-box;
     display: table-cell;
     vertical-align: middle;
+    --min--height: 52px;
+    --max--cell-width: auto;
     max-width: var(--max--cell-width);
     padding: 16px 24px;
     min-height: var(--min--height);
   }
 
   .column {
-    min-width:var(--min-cell-width);
-    width:var(--cell-width);
     height: 100%;
     color: var(--nile-colors-gray-light-mode-600);
     font-family: var(--nile-font-family-serif);

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

@@ -12,15 +12,11 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
-    --cell-min-width: auto;
-    --cell-width: auto;
     display: table-cell;
     box-sizing: border-box;
   }
   
   .header__item__wrapper{
-    min-width:var(--cell-min-width);
-    width:var(--cell-width);
     display:flex;
     align-items:center;
     box-sizing: border-box;
@@ -30,7 +26,6 @@ export const styles = css`
   }
 
   .headers {
-    overflow:hidden;
     display: flex;
     align-items: center;
     height: auto;

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

@@ -69,7 +69,7 @@ export class NileTableHeaderItem extends NileElement {
   public render(): TemplateResult {
     return html` ${this.hasSlotController.test('[default]')
       ? html`
-      <div class="header__item__wrapper" part="nile__table-header-cell">
+      <div class="header__item__wrapper">
         <div class="headers">
           <slot> </slot>
           ${this.havesort && this.sorting_ct % 3 === 0

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

@@ -47,7 +47,8 @@ export class NileTableRow extends NileElement {
     ];
     for (let i = 0; i < header_items.length; i++) {
       const header = header_items[i];
-      const haveIcon = header.textContent == event.detail.value.curr_sort_string;
+      const haveIcon =
+        header.textContent == event.detail.value.curr_sort_string;
       if (!haveIcon) {
         header.sorting_ct = 0;
       }

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

@@ -0,0 +1,190 @@
+export function isInViewport(element: HTMLElement): boolean {
+  const rect = element.getBoundingClientRect();
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+  );
+}
+
+
+export function getValidTooltipPosition(
+  triggerRect: DOMRect,
+  tooltipRect: DOMRect,
+  originalPlacement: string,
+  distance: number,
+  skidding: number,
+  caretSize: number,
+  viewportWidth: number,
+  viewportHeight: number
+): { top: number; left: number; placement: string } {
+  const triggerCenterX = triggerRect.left + triggerRect.width / 2;
+
+  const getCandidatePosition = (placement: string) => {
+    let top = 0;
+    let left = 0;
+
+    switch (placement) {
+      case 'top':
+        top = triggerRect.top - tooltipRect.height - distance;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + skidding;
+        break;
+      case 'top-start':
+        top = triggerRect.top - tooltipRect.height - distance;
+        left = triggerCenterX - caretSize + skidding;
+        break;
+      case 'top-end':
+        top = triggerRect.top - tooltipRect.height - distance;
+        left = triggerCenterX - tooltipRect.width + caretSize + 10 + skidding;
+        break;
+      case 'bottom':
+        top = triggerRect.bottom + distance;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + skidding;
+        break;
+      case 'bottom-start':
+        top = triggerRect.bottom + distance;
+        left = triggerCenterX - caretSize - 10 + skidding;
+        break;
+      case 'bottom-end':
+        top = triggerRect.bottom + distance;
+        left = triggerCenterX - (tooltipRect.width - caretSize) + 10 + skidding;
+        break;
+      case 'left':
+        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 + skidding;
+        left = triggerRect.left - tooltipRect.width - distance;
+        break;
+      case 'left-start':
+        top = triggerRect.top + skidding;
+        left = triggerRect.left - tooltipRect.width - distance;
+        break;
+      case 'left-end':
+        top = triggerRect.bottom - tooltipRect.height + skidding;
+        left = triggerRect.left - tooltipRect.width - distance;
+        break;
+      case 'right':
+        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 + skidding;
+        left = triggerRect.right + distance;
+        break;
+      case 'right-start':
+        top = triggerRect.top + skidding;
+        left = triggerRect.right + distance;
+        break;
+      case 'right-end':
+        top = triggerRect.bottom - tooltipRect.height + skidding;
+        left = triggerRect.right + distance;
+        break;
+      default:
+        top = triggerRect.top - tooltipRect.height - distance;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + skidding;
+    }
+
+    return { top, left };
+  };
+
+  const candidateFits = (top: number, left: number) =>
+    top >= 0 &&
+    left >= 0 &&
+    top + tooltipRect.height <= viewportHeight &&
+    left + tooltipRect.width <= viewportWidth;
+
+  let placement = originalPlacement;
+  let candidate = getCandidatePosition(placement);
+
+  if (!candidateFits(candidate.top, candidate.left)) {
+    if (!placement.startsWith('bottom')) {
+      placement = 'bottom';
+      candidate = getCandidatePosition(placement);
+    }
+  }
+
+  if (candidate.left < 0) {
+    candidate.left = 5;
+  } else if (candidate.left + tooltipRect.width > viewportWidth) {
+    candidate.left = viewportWidth - tooltipRect.width - 5;
+  }
+
+  if (candidate.top < 0) {
+    candidate.top = 5;
+  } else if (candidate.top + tooltipRect.height > viewportHeight) {
+    candidate.top = viewportHeight - tooltipRect.height - 5;
+  }
+
+  return { ...candidate, placement };
+}
+
+export interface CaretPositionInput {
+  placement: string;
+  tooltipRect: DOMRect;
+  triggerRect: DOMRect;
+  caretSize: number;
+  left: number;
+  top: number;
+}
+
+export function getCaretPosition({
+  placement,
+  tooltipRect,
+  triggerRect,
+  caretSize,
+  left,
+  top
+}: CaretPositionInput): { caretLeft: number; caretTop: number } {
+  const triggerCenterX = triggerRect.left + triggerRect.width / 2;
+  const triggerCenterY = triggerRect.top + triggerRect.height / 2;
+
+  const [primaryPlacement, secondaryPlacement] = placement.split('-');
+
+  let caretLeft = 0;
+  let caretTop = 0;
+
+  switch (primaryPlacement) {
+      case 'top':
+          caretTop = tooltipRect.height - caretSize;
+          caretLeft = triggerCenterX - left -  caretSize;
+          if (placement === 'top-end') {
+            caretLeft = triggerCenterX - left - caretSize;
+          } else if (secondaryPlacement === 'start') {
+            caretLeft = triggerCenterX - left -  caretSize;
+          } else if (secondaryPlacement === 'end') {
+            caretLeft = tooltipRect.width - 2 *  caretSize + 8;
+          }
+          caretLeft = Math.max(caretSize, Math.min(caretLeft, tooltipRect.width - 2 * caretSize));
+          break;
+
+    case 'bottom':
+      caretTop = -caretSize;
+      caretLeft = triggerCenterX - left - caretSize;
+      break;
+
+    case 'left':
+      caretLeft = tooltipRect.width - caretSize;
+      if (secondaryPlacement === 'start') {
+        caretTop = triggerRect.height / 2 - caretSize;
+      } else if (secondaryPlacement === 'end') {
+        caretTop = tooltipRect.height - triggerRect.height / 2 - caretSize;
+      } else {
+        caretTop = triggerCenterY - top - caretSize;
+      }
+      caretTop = Math.max(caretSize, Math.min(caretTop, tooltipRect.height - 2 * caretSize));
+      break;
+
+    case 'right':
+      caretLeft = -caretSize;
+      if (secondaryPlacement === 'start') {
+        caretTop = triggerRect.height / 2 - caretSize;
+      } else if (secondaryPlacement === 'end') {
+        caretTop = tooltipRect.height - triggerRect.height / 2 - caretSize;
+      } else {
+        caretTop = triggerCenterY - top - caretSize;
+      }
+      caretTop = Math.max(caretSize, Math.min(caretTop, tooltipRect.height - 2 * caretSize));
+      break;
+
+    default:
+      caretLeft = tooltipRect.width / 2 - caretSize;
+      caretTop = tooltipRect.height / 2 - caretSize;
+  }
+
+  return { caretLeft, caretTop };
+}

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

@@ -17,7 +17,6 @@ export const styles = css`
       position: relative;
       display: inline-block;
     }
-
     .tooltip {
       position: fixed;
       z-index: 1000;
@@ -30,100 +29,45 @@ export const styles = css`
       opacity: 0;
       transition: opacity 0.2s, transform 0.2s;
       pointer-events: none;
-      white-space: nowrap;
+      white-space: normal;
       visibility: hidden;
-      transform: scale(0.95);
-      transition: opacity 0.2s ease-out, transform 0.2s ease-out;
+      overflow: visible;
+ 
     }
-
-    .tooltip[open] {
-  opacity: 1;
-  transform: scale(1);
-}
-
     :host([open]) .tooltip {
       opacity: 1;
       visibility: visible;
       pointer-events: auto;
     }
-
     .tooltip__body--large {
-      font-size: var(--nile-type-scale-4, 16px);
+      font-size: var(--nile-tooltip-font-size-lg, 16px);
       line-height: var(--nile-tooltip-line-height-lg, 1.75);
     }
-
-    /* Tooltip Arrow */
-    .tooltip::after {
-      content: '';
-      position: absolute;
-      width: 0;
-      height: 0;
-      border-style: solid;
-    }
-
-    /* Basic Arrow Positions */
-    .tooltip[data-placement^="top"]::after {
-      bottom: -6px;
-      border-width: 6px 6px 0 6px;
-      border-color: var(--nile-tooltip-color-background, #333) transparent transparent transparent;
+    .tooltip-content {
+      overflow: auto;
+      max-width: 252px;
+      max-height: 116px;
     }
-
-    .tooltip[data-placement^="bottom"]::after {
-      top: -6px;
-      border-width: 0 6px 6px 6px;
-      border-color: transparent transparent var(--nile-tooltip-color-background, #333) transparent;
+    .tooltip-caret {
+      position: absolute;
+      width: calc(2 * var(--caret-size, 6px));
+      height: calc(2 * var(--caret-size, 6px));
+      background-color: inherit;
+      transform: rotate(45deg);
+      z-index: -1;
     }
-
-    .tooltip[data-placement^="left"]::after {
-      right: -6px;
-      border-width: 6px 0 6px 6px;
-      border-color: transparent transparent transparent var(--nile-tooltip-color-background, #333);
+    .trigger-container {
+      display: inline-block;
     }
+ 
 
-    .tooltip[data-placement^="right"]::after {
-      left: -6px;
-      border-width: 6px 6px 6px 0;
-      border-color: transparent var(--nile-tooltip-color-background, #333) transparent transparent;
-    }
 
-    /* Arrow Horizontal Alignment for top/bottom placements */
-    .tooltip[data-placement="top"]::after,
-    .tooltip[data-placement="bottom"]::after {
-      left: 50%;
-      transform: translateX(-50%);
-    }
 
-    .tooltip[data-placement="top-start"]::after,
-    .tooltip[data-placement="bottom-start"]::after {
-      left: 12px;
-    }
 
-    .tooltip[data-placement="top-end"]::after,
-    .tooltip[data-placement="bottom-end"]::after {
-      right: 12px;
-      left: auto;
-    }
 
-    /* Arrow Vertical Alignment for left/right placements */
-    .tooltip[data-placement="left"]::after,
-    .tooltip[data-placement="right"]::after {
-      top: 50%;
-      transform: translateY(-50%);
-    }
 
-    .tooltip[data-placement="left-start"]::after,
-    .tooltip[data-placement="right-start"]::after {
-      top: 12px;
-      transform: none;
-    }
 
-    .tooltip[data-placement="left-end"]::after,
-    .tooltip[data-placement="right-end"]::after {
-      bottom: 12px;
-      top: auto;
-      transform: none;
-    }
-  
+ 
 `;
 
-export default [styles];
+export default [styles];