@aquera/nile-elements 0.1.28 → 0.1.29-beta-1.2

package/package.json

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

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();

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

@@ -1,4 +1,4 @@
-/**
+ /**
  * Copyright Aquera Inc 2023
  *
  * This source code is licensed under the BSD-3-Clause license found in the
@@ -11,35 +11,52 @@ import { css } from 'lit';
  * Progressbar CSS
  */
 export const styles = css`
-  :host{
-    
-  }
-  .track {
-    stroke-width: 2px;
-    stroke: var(--nile-colors-yellow-400);
-    opacity: 0.5;
-    fill: none;
-  }
-
-  .progress {
-    stroke-width: 2px;
-    stroke: var(--nile-colors-yellow-500);
-    stroke-linecap: round;
-    fill: none;
-    transform: rotate(270deg);
-    transform-origin: center;
-  }
-
-  .circle__text {
-    color: var(--nile-colors-dark-900);
-    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;
-    text-transform: uppercase;
-  }
-`;
 
+ :host {
+  display: inline-block;
+}
+
+.track {
+  stroke-width: 4px;
+  stroke: var(--nile-colors-neutral-400);
+  opacity: 0.5;
+  fill: none;
+}
+
+.progress {
+  stroke-width: 4px;
+  stroke: var(--nile-colors-primary-600);
+  stroke-linecap: round;
+  fill: none;
+  transform: rotate(270deg);
+  transform-origin: center;
+  transition: stroke-dashoffset 0.8s ease-in-out;  
+}
+
+.circle__text {
+  fill: var(--nile-colors-dark-900);
+  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-circular-progressbar/nile-circular-progressbar.ts

@@ -31,10 +31,11 @@ export class NileCircularProgressbar extends NileElement {
   public static get styles(): CSSResultArray {
     return [styles];
   }
-  @query('.progress') progressCircle: any;
-  @property({ type: Number, reflect: true }) progress = 50;
 
-  /* #endregion */
+  @query('.progress') progressCircle!: SVGCircleElement;
+  
+  @property({ type: Number, reflect: true }) value = 0;
+/* #endregion */
 
   /* #region Methods */
 
@@ -43,40 +44,62 @@ export class NileCircularProgressbar extends NileElement {
    * @slot This is a slot test
    */
   // make reactive to pass through
+  @property({ type: String, reflect: true }) content?: string;
+  @property({ type: Number, reflect: true }) size = 40;  
+
+  private get circleSize() {
+    const radius = this.size / 2 - 4;  
+    return {
+      radius,
+      viewBox: this.size,
+      fontSize: `${this.size * 0.25}px`,  
+    };
+  }
 
   connectedCallback() {
     super.connectedCallback();
     this.updateComplete.then(() => {
-      if (this.progress < 0) {
-        this.progress = 0;
-      }
-      if (this.progress > 100) {
-        this.progress = 100;
-      }
-      this.setProgress(this.progress);
+      this.value = Math.max(0, Math.min(100, this.value));
+      this.setProgress(this.value);
     });
   }
+
   private setProgress(percent: number) {
-    const circleRadius = this.progressCircle.r.baseVal.value;
-    let circumference = circleRadius * 2 * Math.PI;
-    this.progressCircle.style.strokeDasharray = circumference;
-    this.progressCircle.style.strokeDashoffset =
-      circumference - (percent / 100) * circumference;
+    if (this.progressCircle) {
+      const circleRadius = this.progressCircle.r.baseVal.value;
+      const circumference = circleRadius * 2 * Math.PI;
+
+      this.progressCircle.style.transition = 'stroke-dashoffset 0.8s ease-in-out'; 
+      this.progressCircle.style.strokeDasharray = `${circumference}`;
+      this.progressCircle.style.strokeDashoffset = `${circumference - (percent / 100) * circumference}`;
+    }
+  }
+
+  updated(changedProperties: Map<string, any>) {
+    if (changedProperties.has('value')) {
+      this.setProgress(this.value);
+    }
   }
 
   public render(): TemplateResult {
+    const { radius, viewBox, fontSize } = this.circleSize;
+    const innerText = this.content ?? `${Math.round(this.value)}%`;
+
     return html`
-      <svg width="40" height="40">
-        <circle r="19" cx="20" cy="20" class="track"></circle>
-        <circle r="19" cx="20" cy="20" class="progress"></circle>
-        <text
-          x="50%"
-          y="50%"
-          text-anchor="middle"
-          alignment-baseline="middle"
-          class="circle__text"
-        >
-          ${this.progress} %
+      <svg width="${viewBox}" height="${viewBox}" viewBox="0 0 ${viewBox} ${viewBox}">
+        <circle r="${radius}" cx="${viewBox / 2}" cy="${viewBox / 2}" class="track"></circle>
+        <circle r="${radius}" cx="${viewBox / 2}" cy="${viewBox / 2}" class="progress"></circle>
+        
+       
+          <text
+            x="50%"
+            y="53%"
+            text-anchor="middle"
+            alignment-baseline="middle"
+            class="circle__text"
+            style="font-size: ${fontSize};"
+          >
+          ${innerText}
         </text>
       </svg>
     `;

package/src/nile-progress-bar/nile-progress-bar.css.ts

@@ -22,6 +22,14 @@ export default css`
     width: 100%;
     height: 2px;
     background-color: var(--nile-colors-neutral-400);
+    transition:  stroke-dashoffset 0.8s ease-in-out
+  }
+
+ 
+  .nile-progress-bar__progress-bar.rounded li {
+    height: 4px;  
+    border-radius: 4px;
+    overflow: hidden; 
   }
 
   .nile-progress-bar__progress-bar li.changeColor::after {
@@ -33,13 +41,18 @@ export default css`
     top: 0;
     left: 0;
     background-color: var(--nile-colors-primary-600);
-    height: 2px;
+    height: 100%;  
     transition: all 1s linear;
   }
 
+   
+  .nile-progress-bar__progress-bar.rounded li span {
+    border-radius: 4px;
+  }
+
   .nile-progress-bar__reset {
     background-color: var(--nile-colors-neutral-400);
     position: absolute;
     z-index: 1;
   }
-`;
+`;

package/src/nile-progress-bar/nile-progress-bar.ts

@@ -7,11 +7,16 @@ export class NileProgressBar extends LitElement {
   static override styles: CSSResultGroup = styles;
 
   @property({ type: Number }) value = 0;
+  @property({ type: String }) variant: 'normal' | 'rounded' = 'normal';
 
   override render() {
+    const variantClass = this.variant === 'rounded' ? 'rounded' : '';
+    
+    
+
     return html`
       <div class="nile-progress-bar__container">
-        <ul class="nile-progress-bar__progress-bar">
+        <ul class="nile-progress-bar__progress-bar ${variantClass}">
           <li><span style="width: ${this.value}%"></span></li>
         </ul>
       </div>

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

@@ -11,6 +11,9 @@ import {css} from 'lit';
  * Stepper CSS
  */
 export const styles = css`
+	*{
+		box-sizing:border-box;
+	}
 	:host {
 		display:block;
 		height:100%;
@@ -18,11 +21,14 @@ export const styles = css`
 	.nile-stepper--horizontal{
 		display:flex;
 		align-items:center;
+		padding: var(--nile-spacing-spacing-3xl) 0;
 	}
+
 	.nile-stepper--vertical{
 		height:100%;
 		display:flex;
 		flex-direction:column;
+		padding: var(--nile-spacing-spacing-3xl) var(--nile-spacing-spacing-3xl) 0;
 	}
 `;
 

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { LitElement, html, CSSResultArray, TemplateResult } from 'lit';
+import { LitElement, html, CSSResultArray, TemplateResult, PropertyValueMap } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-stepper.css';
 import NileElement from '../internal/nile-element';
@@ -23,17 +23,17 @@ import { classMap } from 'lit/directives/class-map.js';
 export class NileStepper extends NileElement {
 
 	@property({ type: Boolean, attribute: 'vertical' }) isVertical: boolean = false;
-	@property({ type: Boolean, attribute: 'content-below', reflect:true }) contentBelow: boolean = false;
-	@property({ type: Number, attribute: 'currentStep', reflect:true }) currentStep: number = 0;
-	@property({ type: Number, attribute: 'completedStep', reflect:true  }) completedStep: number = 0;
-	@property({ type: String, attribute: 'size', reflect:true  }) size: 'sm' | 'md' | 'lg' = 'md';
+	@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() icon: string = 'tick';
 
-	connectedCallback() {
-		super.connectedCallback();
-		this.updateComplete.then(() => {
+	protected update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void{
+    super.update(changedProperties);
+		if(changedProperties.has('currentStep') || changedProperties.has('completedStep')){
 			this.updateItems();
-		});
+		}
 	}
 
 	@watch('currentStep')
@@ -47,9 +47,9 @@ export class NileStepper extends NileElement {
 		this.updateItems()
 		this.emit('nile-completed-change', { value: this.completedStep });
 	}
-
+	
 	private updateItems() {
-		const items: any = [...this.querySelectorAll(this.isVertical?'nile-vertical-stepper-item':'nile-stepper-item')];
+		const items: any = [...this.querySelectorAll(this.isVertical ? 'nile-vertical-stepper-item' : 'nile-stepper-item')];
 		if (!items.length) return;
 		const haveFlex = items.length < 3;
 

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

@@ -15,7 +15,7 @@ export const styles = css`
 		--stepper-flex-val:1;
 		--bulletin--dot--seperation:30%;
 		
-		display:inline-block;
+		display: inline-block;
 		flex-grow:var(--stepper-flex-val);
 		min-width:var(--nile-stepper-min-width);
 	}
@@ -25,7 +25,7 @@ export const styles = css`
 	}
 
 	.stepper__item--sm {
-		--item-spacing: var(--nile-spacing-spacing-lg,12px);
+		--item-spacing: var(--nile-spacing-spacing-md);
 		--stepper-item-title-size:14px;
 		--stepper-item-subtitle-size:14px;
 		--stepper-item-text-line-height:20px;
@@ -33,17 +33,17 @@ export const styles = css`
 	}
 
 	.stepper__item--md {
-		--item-spacing: var(--nile-spacing-spacing-xl, 16px);
+		--item-spacing: var(--nile-spacing-spacing-md);
 		--stepper-item-title-size:16px;
-		--stepper-item-subtitle-size:16px;
-		--stepper-item-text-line-heightt:24px;
+		--stepper-item-subtitle-size:14px;
+		--stepper-item-text-line-height:24px;
 		--circle-height:20px;
 	}
 
 	.stepper__item--lg {
-		--item-spacing: var(--nile-spacing-spacing-xl, 16px);
+		--item-spacing: var(--nile-spacing-spacing-lg);
 		--stepper-item-title-size:16px;
-		--stepper-item-subtitle-size:16px;
+		--stepper-item-subtitle-size:14px;
 		--stepper-item-text-line-height:24px;
 		--circle-height:28px;
 	}
@@ -67,13 +67,24 @@ export const styles = css`
 	.stepper__line {
 		display: block;
 		border: 0;
-		border-top: 2px solid var(--nile-colors-gray-light-mode-200);
+		border-top: 2px solid var(--nile-colors-neutral-500);
 	}
 
 	.stepper__line--active {
 		border-top: 2px solid var(--nile-colors-primary-600);
 	}
 
+	.stepper__item__content--above{
+		position:relative;
+		padding: 0 var(--nile-spacing-spacing-md);
+	}
+
+	.stepper__item__content--above .stepper__content__subtitle{
+		position: absolute;
+    top: 100%;
+    white-space: nowrap;
+	}
+
 	.stepper__item__content--below {
 		margin-top: var(--item-spacing);
 		display:flex;
@@ -87,25 +98,35 @@ export const styles = css`
 		margin:0 -1px;
 	}
 
+	.stepper__item__bulletin{
+		margin-left: 6px;
+		margin-right: 6px;
+	}
+
+	.stepper__item__bulletin--inline{
+		margin-right: 0px;
+	}
+
 	.stepper__content__title {
-		color:var(--nile-colors-gray-light-mode-700);
+		color:var(--nile-colors-dark-900);
 		font-size: var(--stepper-item-title-size);
 		line-height: var(--stepper-item-text-line-height);
 		font-family: var(--nile-font-family-medium);
-		font-weight: 600;
+		font-weight: 400;
 	}
 
 	.stepper__content__title--inline{
 		padding: 0 8px;
-		color:var(--nile-colors-gray-light-mode-500);
+		color:var(--nile-colors-dark-900);
 	}
 
 	.stepper__content__title--active{
-		color:var(--nile-colors-primary-700);
+		color:var(--nile-colors-primary-600);
+		font-weight: 600;
 	}
 
 	.stepper__content__subtitle {
-		color:var(--nile-colors-gray-light-mode-600);
+		color:var(--nile-colors-dark-500);
 		font-size: var(--stepper-item-subtitle-size);
 		line-height: var(--stepper-item-text-line-height);
 		font-family: var(--nile-font-family-sans-serif);
@@ -120,13 +141,13 @@ export const styles = css`
 		width: var(--circle-height);
 		aspect-ratio: 1 / 1;
 		border-radius: 50%;
-		background: radial-gradient(var(--nile-colors-gray-light-mode-300) var(--bulletin--dot--seperation), var(--nile-colors-gray-neutral-50) var(--bulletin--dot--seperation));
-		border: 2px solid var(--nile-colors-gray-light-mode-200);
+		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);
 	}
 
 	.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-400);
+		border: 2px solid var(--nile-colors-primary-500);
 	}
 
 	.stepper__bulletin--icon {

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

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { LitElement, nothing, html, CSSResultArray, TemplateResult } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { LitElement, nothing, html, CSSResultArray, TemplateResult, PropertyValues } from 'lit';
+import { customElement, property, state, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styles } from './nile-stepper-item.css';
 import NileElement from '../internal/nile-element';
@@ -20,11 +20,14 @@ import NileElement from '../internal/nile-element';
  */
 @customElement('nile-stepper-item')
 export class NileStepperItem extends NileElement {
+
+	@query('.stepper__item__content--above .stepper__content__title') absoluteTitle:HTMLDivElement;
+	@query('.stepper__item__content--above .stepper__content__subtitle') absoluteSubtitle:HTMLDivElement;
+
 	/* Properties passed directly */
 	@property() title: string = '';
 	@property() subtitle: string = '';
 
-
 	/* Properties passed to parent component: NileStepper */
 	@state() private contentBelow = false;
 	@state() private size : 'sm' | 'md' | 'lg' = 'md';
@@ -44,7 +47,6 @@ export class NileStepperItem extends NileElement {
 	@state() private value :Number;
 	@state() private haveFlex :Boolean=true;
 
-
 	/**
 	 * The styles for nile-stepper-item
 	 * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
@@ -53,6 +55,13 @@ export class NileStepperItem extends NileElement {
 		return [styles];
 	}
 
+	protected updated(_changedProperties: PropertyValues): void {
+		if(_changedProperties.has('subtitle') && this.isLast && !this.contentBelow && this.subtitle){
+			const subtitleWidth=this.absoluteSubtitle?.scrollWidth as number ?? '0';
+			this.absoluteTitle.style.minWidth=subtitleWidth+"px"
+		}
+	}
+
 	/* #endregion */
 
 	/* #region Methods */
@@ -75,14 +84,13 @@ export class NileStepperItem extends NileElement {
 			suffixStepperLineActive = true;
 			if (this.calculatedCompletedStepValue == this.value) suffixStepperLineActive = false;
 		}
-		let iconSize = this.size == 'sm' ? 20 : this.size == 'md' ? 24 : 28;
 		return html`
 			<div class="${classMap({
 				'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">
@@ -94,13 +102,9 @@ export class NileStepperItem extends NileElement {
 						`}
 					</div>
 
-					<div class="stepper__item__bulletin">
+					<div class=${classMap({ 'stepper__item__bulletin':true, 'stepper__item__bulletin--inline': !this.contentBelow })}>
 						${showCompletedIcon ? 
-							html`<div class="stepper__bulletin--icon">
-									<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"/>
-									</svg>
-								</div>`
+							html`<div class="stepper__bulletin--icon">${this.getSvg()}</div>`
 							: html`<div class="${classMap({ 'stepper__bulletin--dot':true, 'stepper__bulletin__dot--active':isCurrent })}"></div>`
 						}
 					</div>
@@ -110,9 +114,12 @@ export class NileStepperItem extends NileElement {
 						'stepper__line--hastitle':!this.contentBelow
 					})}">
 						${this.contentBelow || !this.title ? nothing:html`
-							<div 
-							class="${classMap({ 'stepper__content__title stepper__content__title--inline':true, 'stepper__content__title--active':isCurrent, })}">
-							${this.title}
+
+							<div class="stepper__item__content--above">
+								<div class="${classMap({ 'stepper__content__title':true, 'stepper__content__title--active':isCurrent })}">
+									${this.title}
+								</div>
+								<div class="${classMap({ 'stepper__content__subtitle':true, 'stepper__content__subtitle--active':isCurrent })}">${this.subtitle}</div>
 							</div>
 						`}
 						${this.isLast ? nothing : html`
@@ -123,18 +130,28 @@ export class NileStepperItem extends NileElement {
 						`}
 					</div>
 				</div>
-				${!this.contentBelow?nothing:html`
+				${this.contentBelow?
+					html`
 					<div class="stepper__item__content--below">
 						<div class="${classMap({ 'stepper__content__title':true, 'stepper__content__title--active':isCurrent })}">
 							${this.title}
 						</div>
 						<div class="${classMap({ 'stepper__content__subtitle':true, 'stepper__content__subtitle--active':isCurrent })}">${this.subtitle}</div>
 					</div>
-				`}
+				`:nothing}
 			</div>
 		`;
 	}
 
+	getSvg():TemplateResult{
+		let iconSize = this.size == 'sm' ? 20 : this.size == 'md' ? 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"/>
+		</svg>
+		`
+	}
+
 	/* #endregion */
 }