@aquera/nile-elements 0.1.31 → 0.1.32-beta-1.1

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.31",
+  "version": "0.1.32-beta-1.1",
   "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-tour": "./dist/src/nile-tour/index.js"
+    "./nile-table": "./dist/src/nile-table/index.js"
   },
   "scripts": {
     "analyze": "cem analyze --litelement",
@@ -188,4 +188,4 @@
       "prettier --write"
     ]
   }
-}
+}

package/src/index.ts

@@ -74,4 +74,5 @@ 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 { NileInlineEdit } from './nile-inline-edit';
+export { NileTable } from './nile-table';

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

@@ -113,7 +113,7 @@ export const styles = css`
   }
 
   .accordian--open .accordian__summary-icon {
-    rotate: 90deg;
+    rotate: 0deg;
   }
 
   .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,6 +57,7 @@ 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
@@ -93,7 +94,17 @@ firstUpdated() {
   this.body.style.height = this.open ? 'auto' : '0';
 }
 
-private handleSummaryClick() {
+  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;  
+        }
+      }
+    }
   if (!this.disabled) {
     if (this.open) {
       this.hide();
@@ -219,10 +230,10 @@ render() {
 
         <span part="summary-icon" class="accordian__summary-icon">
           <slot name="expand-icon">
-            <nile-icon name="arrowright"></nile-icon>
+            <nile-icon name="arrowdown"></nile-icon>
           </slot>
           <slot name="collapse-icon">
-            <nile-icon name="arrowright"></nile-icon>
+            <nile-icon name="arrowup"></nile-icon>
           </slot>
         </span>
       </div>

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

@@ -5,60 +5,59 @@
  * 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-table/index.ts

@@ -0,0 +1 @@
+export { NileTable } from './nile-table';

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

@@ -0,0 +1,20 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+import {css} from 'lit';
+
+/**
+ * Table CSS
+ */
+export const styles = css`
+	:host {
+		display:block;
+		width:100%;
+	}
+`;
+
+export default [styles];

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

@@ -0,0 +1,154 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {LitElement, html, CSSResultArray, TemplateResult, PropertyValues} from 'lit';
+import { customElement, property, query, state} from 'lit/decorators.js';
+import {styles} from './nile-table.css';
+import NileElement from '../internal/nile-element';
+import { NileTableBody } from '../nile-table-body';
+import { NileTableCellItem } from '../nile-table-cell-item';
+import { NileTableHeaderItem } from '../nile-table-header-item';
+
+
+/**
+ * Nile table component.
+ *
+ * @tag nile-table
+ *
+ */
+@customElement('nile-table')
+export class NileTable extends NileElement {
+  @query('slot') defaultSlot: HTMLSlotElement;
+	private rows:Array<NileTableBody>=[];
+	private primaryRowWidths:Array<number>=[]
+	private resizeObserver:ResizeObserver ;
+
+
+	/**
+	 * The styles for nile-table
+	 * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+	 */
+	public static get styles(): CSSResultArray {
+		return [styles];
+	}
+	connectedCallback(): void {
+		super.connectedCallback()
+		this.addEventListener('nile-body-load',this.handleRows)
+	}
+
+	protected firstUpdated(_changedProperties: PropertyValues): void {
+		this.updateComplete.then(()=>{
+			this.handleResizeObserver();
+		})
+	}
+
+
+	/* #endregion */
+
+	/* #region Methods */
+
+	/**
+	 * Render method
+	 * @slot This is a slot test
+	 */
+	public render(): TemplateResult {
+		return html`
+			<slot @slotchange="${this.repaintTable}"></slot>
+			`;
+	}
+
+	repaintTable(){
+		this.realignStructure();
+		this.handleBodyCssUpdate();
+	}
+
+	handleRows(e:CustomEvent){
+		this.rows=[...this.rows,e.detail.comp]
+	}
+
+	handleBodyCssUpdate(){
+    if (this.rows.length<2) return;
+    const tableBodies = this.rows;
+		const firstEl=tableBodies[0].shadowRoot?.querySelector<HTMLDivElement>('div.base')
+		if(firstEl) {
+			firstEl.style.borderTopRightRadius="var(--nile-radius-radius-xl)";
+			firstEl.style.borderTopLeftRadius = 'var(--nile-radius-radius-xl)';
+			firstEl.style.borderBottomRightRadius="0px";
+			firstEl.style.borderBottomLeftRadius = '0px';
+			firstEl.style.borderBottom = 'none';
+		}
+		tableBodies.forEach((tb,i)=>{
+			if(i>0 && i<tableBodies.length-1){
+				const el=tb.shadowRoot?.querySelector<HTMLDivElement>('div.base')
+				if(el) {
+					el.style.borderTopRightRadius="0px";
+					el.style.borderTopLeftRadius = "0px";
+					el.style.borderBottomRightRadius="0px";
+					el.style.borderBottomLeftRadius = "0px";
+					el.style.borderBottom = 'none';
+				}
+			}
+		})
+		const lastEl=tableBodies[tableBodies.length - 1].shadowRoot?.querySelector<HTMLDivElement>('div.base')
+		if(lastEl){
+			lastEl.style.borderTopRightRadius="0px";
+			lastEl.style.borderTopLeftRadius = '0px';
+			lastEl.style.borderBottomRightRadius="var(--nile-radius-radius-xl)";
+			lastEl.style.borderBottomLeftRadius = 'var(--nile-radius-radius-xl)';
+		}
+	}
+
+	getPrimaryColumnWidths(){
+		const primaryTb=this.rows.find(tb=>tb.type=='primary')!;
+		const widthArray=this.getTableCellFetchQuery(primaryTb).map((e:LitElement)=>e.clientWidth) as Array<number>
+		return widthArray;
+	}
+	
+	realignStructure(){
+    if (this.rows.length<2) return;
+		const primaryRowWidths=this.getPrimaryColumnWidths();
+		const secondaryRows=this.rows.filter(tb=>tb.type!='primary');
+		secondaryRows.forEach((row)=>{
+			let elements=this.getTableCellFetchQuery(row)
+			elements?.forEach((el:NileTableCellItem|NileTableHeaderItem,ind)=>{
+				el.style.setProperty('--cell-width',primaryRowWidths.at(ind)+'px')
+			})
+		})
+	}
+
+	getTableCellFetchQuery(row:NileTableBody):Array<Element>{
+		return row?.shadowRoot?.
+			querySelector<HTMLSlotElement>('slot:not([name])')?.
+			assignedElements()[0]
+			.shadowRoot?.querySelector<HTMLSlotElement>('slot')?.
+			assignedElements()!
+	}
+
+	handleResizeObserver(){
+		const onResize = (entries:ResizeObserverEntry[]): void=> {
+			for (let entry of entries) {
+				this.realignStructure();
+			}
+		};
+		this.resizeObserver=new ResizeObserver(onResize)
+		this.resizeObserver.observe(this);
+	}
+
+	disconnectedCallback(): void {
+		this.resizeObserver.disconnect()
+		super.disconnectedCallback()
+	}
+	/* #endregion */
+}
+
+export default NileTable;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-table': NileTable;
+  }
+}

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

@@ -10,6 +10,7 @@ import {
   html,
   CSSResultArray,
   TemplateResult,
+  PropertyValues,
 } from 'lit';
 import {
   customElement,
@@ -38,8 +39,8 @@ export class NileTableBody extends NileElement {
    */
 
   @query('slot') defaultSlot: HTMLSlotElement;
-  @queryAssignedNodes({ flatten: true })
-  _childNodes!: Array<HTMLElement>;
+  @queryAssignedNodes({ flatten: true }) _childNodes!: Array<HTMLElement>;
+  @property() type: 'primary' | 'secondary' = 'primary';
 
   @state() private rows_data: any[] = [];
   @state() private header_rows_data: any[] = [];
@@ -50,6 +51,10 @@ 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 */
@@ -63,6 +68,7 @@ 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,17 +12,19 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
+    --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(--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,11 +12,13 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
+    --cell-width:auto;
     display: table-cell;
     box-sizing: border-box;
   }
   
   .header__item__wrapper{
+    min-width:var(--cell-width);
     display:flex;
     align-items:center;
     box-sizing: border-box;

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

@@ -47,8 +47,7 @@ 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.css.ts

@@ -11,60 +11,119 @@ import { css } from 'lit';
  * Tooltip CSS
  */
 export const styles = css`
-  :host {
-    --max-width: 20rem;
-    --hide-delay: 0ms;
-    --show-delay: 150ms;
-
-    display: contents;
-  }
-
-  .tooltip {
-    --arrow-size: 6px;
-    --arrow-color: var(--nile-tooltip-color-background);
-  }
-
-  .tooltip::part(popup) {
-    pointer-events: none;
-    z-index: 1000;
-  }
-
-  .tooltip[placement^='top']::part(popup) {
-    transform-origin: bottom;
-  }
-
-  .tooltip[placement^='bottom']::part(popup) {
-    transform-origin: top;
-  }
-
-  .tooltip[placement^='left']::part(popup) {
-    transform-origin: right;
-  }
-
-  .tooltip[placement^='right']::part(popup) {
-    transform-origin: left;
-  }
-
-  .tooltip__body {
-    display: block;
-    width: max-content;
-    max-width: var(--max-width);
-    border-radius: 4px;
-    background-color: var(--nile-tooltip-color-background);
-    font-size: var(--nile-tooltip-font-size-sm);
-    font-weight: var(--nile-tooltip-font-weight-sm);
-    line-height: var(--nile-tooltip-line-height-sm);
-    padding: var(--nile-tooltip-padding-y) var(--nile-tooltip-padding-x);
-    color: var(--nile-colors-white-base);
-    pointer-events: none;
-    word-break: break-word;
-  }
-
-  .tooltip__body--large {
-    font-size: var(--nile-tooltip-font-size-lg);
-    line-height: var(--nile-tooltip-line-height-lg);
-    font-weight: var(--nile-tooltip-font-weight-lg);
-  }
+
+
+:host {
+      position: relative;
+      display: inline-block;
+    }
+
+    .tooltip {
+      position: fixed;
+      z-index: 1000;
+      background-color: var(--nile-tooltip-color-background, #333);
+      color: var(--nile-colors-white-base, #fff);
+      padding: 6px 10px;
+      border-radius: 4px;
+      font-size: var(--nile-tooltip-font-size-sm, 14px);
+      line-height: var(--nile-tooltip-line-height-sm, 1.5);
+      opacity: 0;
+      transition: opacity 0.2s, transform 0.2s;
+      pointer-events: none;
+      white-space: nowrap;
+      visibility: hidden;
+      transform: scale(0.95);
+      transition: opacity 0.2s ease-out, transform 0.2s ease-out;
+    }
+
+    .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);
+      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[data-placement^="bottom"]::after {
+      top: -6px;
+      border-width: 0 6px 6px 6px;
+      border-color: transparent transparent var(--nile-tooltip-color-background, #333) transparent;
+    }
+
+    .tooltip[data-placement^="left"]::after {
+      right: -6px;
+      border-width: 6px 0 6px 6px;
+      border-color: transparent transparent transparent var(--nile-tooltip-color-background, #333);
+    }
+
+    .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];