@aquera/nile-elements 0.1.31-beta-1.0 → 0.1.31

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.31-beta-1.0",
+  "version": "0.1.31",
   "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-stepper/nile-stepper.ts

@@ -26,7 +26,7 @@ export class NileStepper extends NileElement {
 	@property({ type: Boolean, attribute: true, reflect:true }) contentBelow: boolean = false;
 	@property({ type: Number, attribute: true, reflect:true }) currentStep: number = 0;
 	@property({ type: Number, attribute: true, reflect:true  }) completedStep: number = 0;
-	@property({ type: String, attribute: true, reflect:true  }) size: 'sm' | 'md' | 'lg' = 'md';
+	@property({ type: String, attribute: true, reflect:true  }) size: 'sm' | 'lg' = 'lg';
 	@property() icon: string = 'tick';
 
 	protected update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void{

package/src/nile-stepper-item/nile-stepper-item.css.ts

@@ -14,6 +14,7 @@ export const styles = css`
 	:host {
 		--stepper-flex-val:1;
 		--bulletin--dot--seperation:30%;
+		--lines-thickness: 1px;
 		
 		display: inline-block;
 		flex-grow:var(--stepper-flex-val);
@@ -29,23 +30,23 @@ export const styles = css`
 		--stepper-item-title-size:12px;
 		--stepper-item-subtitle-size:10.24px;
 		--stepper-item-text-line-height:16px;
-		--circle-height:16px;
+		--circle-height:18px;
 	}
 
-	.stepper__item--md {
+	.stepper__item--lg {
 		--item-spacing: var(--nile-spacing-spacing-md);
 		--stepper-item-title-size:14px;
 		--stepper-item-subtitle-size:12px;
 		--stepper-item-text-line-height:18px;
-		--circle-height:20px;
+		--circle-height:22px;
 	}
 
-	.stepper__item--lg {
+	.stepper__item--xl {
 		--item-spacing: var(--nile-spacing-spacing-lg);
 		--stepper-item-title-size:16px;
 		--stepper-item-subtitle-size:14px;
 		--stepper-item-text-line-height:22px;
-		--circle-height:28px;
+		--circle-height:26px;
 	}
 
 	.stepper__line__content {
@@ -67,16 +68,16 @@ export const styles = css`
 	.stepper__line {
 		display: block;
 		border: 0;
-		border-top: 2px solid var(--nile-colors-neutral-500);
+		border-top: var(--lines-thickness) solid var(--nile-colors-neutral-500);
 	}
 
 	.stepper__line--active {
-		border-top: 2px solid var(--nile-colors-primary-600);
+		border-top: var(--lines-thickness) solid var(--nile-colors-primary-600);
 	}
 
 	.stepper__item__content--above{
-		position:relative;
-		padding: 0 var(--nile-spacing-spacing-md);
+		position: relative;
+		margin-right: var(--nile-spacing-spacing-md);
 	}
 
 	.stepper__item__content--above .stepper__content__subtitle{
@@ -103,10 +104,6 @@ export const styles = css`
 		margin-right: 6px;
 	}
 
-	.stepper__item__bulletin--inline{
-		margin-right: 0px;
-	}
-
 	.stepper__content__title {
 		color:var(--nile-colors-dark-900);
 		font-size: var(--stepper-item-title-size);
@@ -142,23 +139,29 @@ export const styles = css`
 		aspect-ratio: 1 / 1;
 		border-radius: 50%;
 		background: radial-gradient(var(--nile-colors-neutral-500) var(--bulletin--dot--seperation), var(--nile-colors-dark-200) var(--bulletin--dot--seperation));
-		border: 2px solid var(--nile-colors-neutral-500);
+		border: var(--lines-thickness) solid var(--nile-colors-neutral-500);
 	}
 
 	.stepper__bulletin__dot--active{
 		background: radial-gradient(var(--nile-colors-white-base) var(--bulletin--dot--seperation), var(--nile-colors-primary-600) var(--bulletin--dot--seperation));
-		border: 2px solid var(--nile-colors-primary-500);
+		border: var(--lines-thickness) solid var(--nile-colors-primary-500);
+		width: calc( var(--circle-height) + calc( var(--lines-thickness) * 2 ) );
 	}
 
 	.stepper__bulletin--icon {
 		display:grid;
 		place-content:center;
 		width: var(--circle-height);
-		border: 2px solid var(--nile-colors-primary-600);
+		border: var(--lines-thickness) solid var(--nile-colors-primary-600);
 		aspect-ratio: 1 / 1;
 		border-radius: 50%;
 		background-color:var(--nile-colors-primary-600);
 		overflow:hidden;
 	}
+	
+	.stepper__bulletin__icon--active {
+		border: 1px solid var(--nile-colors-primary-500);
+		width: calc(var(--circle-height) + calc( var(--lines-thickness) * 2));
+	}
 `;
 export default [styles];

package/src/nile-stepper-item/nile-stepper-item.ts

@@ -30,7 +30,7 @@ export class NileStepperItem extends NileElement {
 
 	/* Properties passed to parent component: NileStepper */
 	@state() private contentBelow = false;
-	@state() private size : 'sm' | 'md' | 'lg' = 'md';
+	@state() private size : 'sm' | 'lg' = 'lg';
 	@state() private icon = 'tick';
 
 
@@ -89,8 +89,7 @@ export class NileStepperItem extends NileElement {
 				'stepper__item':true,
 				'stepper__item--selected':isCurrent,
 				'stepper__item--sm':this.size=='sm',
-				'stepper__item--md':this.size=='md',
-				'stepper__item--lg':this.size=='lg'
+				'stepper__item--lg':this.size=='lg',
 			})}">
 				<div class="stepper__line__content">
 					<div class="stepper__line__container">
@@ -104,7 +103,7 @@ export class NileStepperItem extends NileElement {
 
 					<div class=${classMap({ 'stepper__item__bulletin':true, 'stepper__item__bulletin--inline': !this.contentBelow })}>
 						${showCompletedIcon ? 
-							html`<div class="stepper__bulletin--icon">${this.getSvg()}</div>`
+							html`<div class="${classMap({ 'stepper__bulletin--icon':true, 'stepper__bulletin__icon--active':isCurrent })}">${this.getSvg()}</div>`
 							: html`<div class="${classMap({ 'stepper__bulletin--dot':true, 'stepper__bulletin__dot--active':isCurrent })}"></div>`
 						}
 					</div>
@@ -144,7 +143,7 @@ export class NileStepperItem extends NileElement {
 	}
 
 	getSvg():TemplateResult{
-		let iconSize = this.size == 'sm' ? 20 : this.size == 'md' ? 24 : 28;
+		let iconSize = this.size == 'sm' ? 20 : this.size == 'lg' ? 24 : 28;
 		return html`
 		<svg width="${iconSize}" height="${iconSize}" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path fill-rule="evenodd" clip-rule="evenodd" d="M22.7953 9.85334L13.2487 19.0667L10.7153 16.36C10.2487 15.92 9.51534 15.8933 8.982 16.2667C8.462 16.6533 8.31534 17.3333 8.63534 17.88L11.6353 22.76C11.9287 23.2133 12.4353 23.4933 13.0087 23.4933C13.5553 23.4933 14.0753 23.2133 14.3687 22.76C14.8487 22.1333 24.0087 11.2133 24.0087 11.2133C25.2087 9.98668 23.7553 8.90668 22.7953 9.84001V9.85334Z" fill="white"/>

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,19 +12,17 @@ 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,13 +12,11 @@ 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,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.css.ts

@@ -11,119 +11,60 @@ import { css } from 'lit';
  * Tooltip CSS
  */
 export const styles = css`
-
-
-: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;
-    }
-  
+  :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);
+  }
 `;
 
 export default [styles];