@aquera/nile-elements 0.1.26 → 0.1.28-beta-1.1

package/dist/nile-vertical-stepper-item/nile-vertical-stepper-item.css.esm.js

@@ -13,25 +13,28 @@ import{css as e}from"lit";const t=e`
 	}
 
 	.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-title-margin-top:15%;
 		--stepper-item-subtitle-size:14px;
 		--stepper-item-text-line-height:20px;
 		--circle-height:16px;
 	}
 
 	.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-title-margin-top:15%;
+		--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-title-margin-top:25%;
+		--stepper-item-subtitle-size:14px;
 		--stepper-item-text-line-height:24px;
 		--circle-height:28px;
 	}
@@ -40,22 +43,28 @@ import{css as e}from"lit";const t=e`
 		display: flex;
 		flex-direction: column;
 	}
+
 	.stepper__item__bulletin {
 		display:grid;
 		place-content:center;
 	}
 
+	.stepper__item__bulletin {
+		margin-top:3px;
+		margin-bottom:3px;
+	}
+
 	.stepper__bulletin--dot {
 		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 {
@@ -79,7 +88,7 @@ import{css as e}from"lit";const t=e`
 
 	.stepper__item__line{
 		height:100%;
-		border-left: 2px solid var(--nile-colors-primary-600);
+		border-left: 2px solid var(--nile-colors-neutral-500);
 	}
 	.stepper__item__line--active{
 		border-left: 2px solid var(--nile-colors-primary-600);
@@ -91,19 +100,24 @@ import{css as e}from"lit";const t=e`
 		justify-content:start;
 	}
 	.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--alone{
+		margin-top: var(--stepper-item-title-margin-top);
 	}
 
 	.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);

package/dist/nile-vertical-stepper-item/nile-vertical-stepper-item.esm.js

@@ -1,22 +1,20 @@
-import{__decorate as t}from"tslib";import{html as e,nothing as i}from"lit";import{property as s,state as l,customElement as p}from"lit/decorators.js";import{s as r}from"./nile-vertical-stepper-item.css.esm.js";import{N as _}from"../internal/nile-element.esm.js";import{classMap as d}from"lit/directives/class-map.js";let o=class extends _{constructor(){super(...arguments),this.title="",this.subtitle="",this.contentBelow=!1,this.size="md",this.icon="tick",this.isFirst=!1,this.isLast=!1,this.isComplete=!1,this.isCurrent=!1,this.haveFlex=!0}static get styles(){return[r]}render(){this.isLast&&this.style.setProperty("--vertical-stepper-flex-val","0");const t=this.isCurrent,s=this.isComplete;let l=!1;(s&&!t||this.completedStepValue==this.value)&&(l=!0);let p=!1;s&&(p=!0,this.calculatedCompletedStepValue==this.value&&(p=!1));let r="sm"==this.size?14:"md"==this.size?16:20;return e`
-			<div class="${d({stepper__item:!0,"stepper__item--selected":t,"stepper__item--default":!t,"stepper__item--sm":"sm"==this.size,"stepper__item--md":"md"==this.size,"stepper__item--lg":"lg"==this.size})}">
+import{__decorate as t}from"tslib";import{html as e,nothing as i}from"lit";import{property as s,state as l,customElement as p}from"lit/decorators.js";import{s as r}from"./nile-vertical-stepper-item.css.esm.js";import{N as _}from"../internal/nile-element.esm.js";import{classMap as o}from"lit/directives/class-map.js";let d=class extends _{constructor(){super(...arguments),this.title="",this.subtitle="",this.contentBelow=!1,this.size="md",this.icon="tick",this.isFirst=!1,this.isLast=!1,this.isComplete=!1,this.isCurrent=!1,this.haveFlex=!0}static get styles(){return[r]}render(){this.isLast&&this.style.setProperty("--vertical-stepper-flex-val","0");const t=this.isCurrent,s=this.isComplete;let l=!1;(s&&!t||this.completedStepValue==this.value)&&(l=!0);let p=!1;return s&&(p=!0,this.calculatedCompletedStepValue==this.value&&(p=!1)),"sm"==this.size||this.size,e`
+			<div class="${o({stepper__item:!0,"stepper__item--selected":t,"stepper__item--default":!t,"stepper__item--sm":"sm"==this.size,"stepper__item--md":"md"==this.size,"stepper__item--lg":"lg"==this.size})}">
 				<div class="stepper-item__connector-content">
 					<div class="stepper__item__bulletin">
-						${l?e`<div class="stepper__bulletin--icon">
-									<svg width="${r}" height="${r}" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-										<g clip-path="url(#clip0_10902_1507)">
-										<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"/>
-										</g>
-									</svg>
-								</div>`:e`<div class="${d({"stepper__bulletin--dot":!0,"stepper__bulletin__dot--active":t})}"></div>`}
+						${l?e`<div class="stepper__bulletin--icon">${this.getSvg()}</div>`:e`<div class="${o({"stepper__bulletin--dot":!0,"stepper__bulletin__dot--active":t})}"></div>`}
 					</div>
 					<div class="stepper__item__line__container">
-						${this.isLast?i:e`<div class="${d({stepper__item__line:!0,"stepper__item__line--active":p})}"></div>`}
+						${this.isLast?i:e`<div class="${o({stepper__item__line:!0,"stepper__item__line--active":p})}"></div>`}
 					</div>
 				</div>
 				<div class="stepper__item__content">
-					<div class="${d({stepper__content__title:!0,"stepper__content__title--active":t})}">${this.title}</div>
-					<div class="${d({stepper__content__subtitle:!0,"stepper__content__subtitle--active":t})}">${this.subtitle}</div>
+					<div class="${o({stepper__content__title:!0,"stepper__content__title--alone":!this.subtitle,"stepper__content__title--active":t})}">${this.title}</div>
+					<div class="${o({stepper__content__subtitle:!0,"stepper__content__subtitle--active":t})}">${this.subtitle}</div>
 				</div>
 			</div>
-			`}};t([s()],o.prototype,"title",void 0),t([s()],o.prototype,"subtitle",void 0),t([l()],o.prototype,"contentBelow",void 0),t([l()],o.prototype,"size",void 0),t([l()],o.prototype,"icon",void 0),t([l()],o.prototype,"isFirst",void 0),t([l()],o.prototype,"isLast",void 0),t([l()],o.prototype,"isComplete",void 0),t([l()],o.prototype,"isCurrent",void 0),t([l()],o.prototype,"currentStepValue",void 0),t([l()],o.prototype,"completedStepValue",void 0),t([l()],o.prototype,"calculatedCompletedStepValue",void 0),t([l()],o.prototype,"value",void 0),t([l()],o.prototype,"haveFlex",void 0),o=t([p("nile-vertical-stepper-item")],o);export{o as N};
+			`}getSvg(){let t="sm"==this.size?20:"md"==this.size?24:28;return e`
+		<svg width="${t}" height="${t}" 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>
+		`}};t([s()],d.prototype,"title",void 0),t([s()],d.prototype,"subtitle",void 0),t([l()],d.prototype,"contentBelow",void 0),t([l()],d.prototype,"size",void 0),t([l()],d.prototype,"icon",void 0),t([l()],d.prototype,"isFirst",void 0),t([l()],d.prototype,"isLast",void 0),t([l()],d.prototype,"isComplete",void 0),t([l()],d.prototype,"isCurrent",void 0),t([l()],d.prototype,"currentStepValue",void 0),t([l()],d.prototype,"completedStepValue",void 0),t([l()],d.prototype,"calculatedCompletedStepValue",void 0),t([l()],d.prototype,"value",void 0),t([l()],d.prototype,"haveFlex",void 0),d=t([p("nile-vertical-stepper-item")],d);export{d as N};

package/dist/src/nile-auto-complete/nile-auto-complete.js

@@ -88,7 +88,6 @@ let NileAutoComplete = class NileAutoComplete extends NileElement {
     handleSelect(event) {
         this.value = event.detail.value;
         this.emit('nile-complete', { value: event.detail.value });
-        this.emit('nile-input', { value: event.detail.value });
         this.isDropdownOpen = false;
         this.dropdownElement?.hide();
     }

package/dist/src/nile-auto-complete/nile-auto-complete.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-auto-complete.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/nile-auto-complete.ts"],"names":[],"mappings":";AAAA,OAAO,EAEL,IAAI,EAGJ,OAAO,GACR,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAInD,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AAEjE,iDAAiD;AAE1C,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,WAAW;IAA1C;;QAML,8BAA8B;QAED,aAAQ,GAAY,KAAK,CAAC;QAE1B,mBAAc,GAAY,KAAK,CAAC;QAEhC,wBAAmB,GAAY,KAAK,CAAC;QAErC,gBAAW,GAAY,KAAK,CAAC;QAE9B,UAAK,GAAW,EAAE,CAAC;QAEnB,gBAAW,GAAW,cAAc,CAAC;QAEpC,aAAQ,GAAY,KAAK,CAAC;QAE1B,YAAO,GAAY,KAAK,CAAC;QAExB,mBAAc,GAA8C,CAAC,IAAW,EAAC,aAAoB,EAAC,EAAE,CAAA,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC,WAAW,EAAE,CAAC,CAAC;QAEzJ,uBAAkB,GAAuB,CAAC,IAAQ,EAAC,EAAE,CAAA,IAAI,CAAC;QAE7D,iBAAY,GAAQ,EAAE,CAAC;QAEzC,cAAS,GAAQ,EAAE,CAAC;IA4H/B,CAAC;IA1HC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,kBAAkB,GAAC,CAAC,IAAQ,EAAC,EAAE,CAAA,IAAI,CAAC;IAC3C,CAAC;IAES,OAAO,CAAC,iBAAiC;QACjD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,cAAc,CAAC,EAAC,CAAC;YACzC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,EAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YACzE,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC7B,CAAC;QACD,IAAI,iBAAiB,CAAC,GAAG,CAAC,gBAAgB,CAAC;YAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,EAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QACtH,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAC,CAAC;YAClC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,EAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAC3E,CAAC;IACH,CAAC;IAEM,MAAM;QACX,MAAM,OAAO,GAAC,IAAI,CAAC,mBAAmB,CAAA,CAAC,CAAA,IAAI,CAAC,qBAAqB,EAAE,CAAA,CAAC,CAAA,IAAI,CAAC,UAAU,EAAE,CAAC;QACtF,OAAO,IAAI,CAAA;0DAC2C,IAAI,CAAC,cAAc;;uBAEtD,IAAI,CAAC,QAAQ;sBACd,IAAI,CAAC,QAAQ;mBAChB,IAAI,CAAC,KAAK;wBACL,IAAI,CAAC,YAAY;mBACtB,IAAI,CAAC,WAAW;mBAChB,IAAI,CAAC,WAAW;;wBAEX,IAAI,CAAC,WAAW;;YAE5B,IAAI,CAAC,OAAO,CAAA,CAAC,CAAA,IAAI,CAAA,kHAAkH,CAAA,CAAC,CAAA,OAAO;;UAE7I,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO;YAC1C,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;IAED,qBAAqB;QACnB,OAAO,IAAI,CAAA;0DAC2C,IAAI,CAAC,YAAY;UACjE,UAAU,CAAC;YACX,KAAK,EAAE,IAAI,CAAC,SAAS;YACrB,UAAU,EAAE,CAAC,IAAQ,EAAgB,EAAE,CAAA,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;YAC5E,QAAQ,EAAC,IAAI;SACT,CAAC;;KAEL,CAAA;IACH,CAAC;IAED,UAAU;QACR,OAAO,IAAI,CAAA;kDACmC,IAAI,CAAC,YAAY;UACzD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAS,EAAG,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC;mBAC3D,CAAA;IACjB,CAAC;IAED,qBAAqB,CAAC,IAAQ;QAC5B,MAAM,KAAK,GAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAA;QACzC,OAAO,IAAI,CAAA;8BACe,KAAK;UACzB,KAAK;;KAEV,CAAC;IACJ,CAAC;IAEO,YAAY,CAAC,KAAkB;QACrC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAChC,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;QAC1D,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;QACvD,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAC5B,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,CAAC;IAC/B,CAAC;IAEO,mBAAmB;QACzB,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS;aACnC,MAAM,CAAC,CAAC,GAAW,EAAE,IAAS,EAAE,EAAE;YACjC,MAAM,UAAU,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,MAAM,CAAA;YACvD,OAAO,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,UAAU,CAAA;QAC5C,CAAC,EAAE,CAAC,CAAC,CAAA;QACP,MAAM,WAAW,GAAG,GAAG,CAAC;QACxB,MAAM,eAAe,GAAG,GAAG,CAAC;QAC5B,MAAM,SAAS,GAAG,eAAe,GAAG,eAAe,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,GAAG,eAAe,CAAC;QACpH,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,kCAAkC,EAAE,SAAS,GAAG,IAAI,CAAC,CAAC;IAC/E,CAAC;IAEO,YAAY,CAAC,KAAkB;QACrC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;QAE9C,8CAA8C;QAC9C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,EAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAEzE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;QAChD,IAAI,IAAI,CAAC,cAAc;YAAE,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,CAAC;IACxD,CAAC;IAEM,WAAW;QAChB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACtB,OAAO;QACT,CAAC;QAED,2DAA2D;QAC3D,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAC3B,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,CAAC;QAC/B,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,CAAC;IAC/B,CAAC;IAED,WAAW,CAAI,IAAS,EAAE,QAAkD;QAC1E,IAAG,OAAM,CAAC,IAAI,CAAC,KAAG,QAAQ;YAAE,OAAO,EAAE,CAAA;QACrC,MAAM,GAAG,GAAK,EAAE,CAAA;QAChB,IAAI,CAAC,OAAO,CAAE,EAAE,CAAA,EAAE,CAAC,QAAQ,CAAC,EAAE,EAAC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAE,CAAA;QAC5D,OAAO,GAAG,CAAA;IACZ,CAAC;;AAtJM,uBAAM,GAAmB,MAAM,AAAzB,CAA0B;AAEf;IAAvB,KAAK,CAAC,eAAe,CAAC;yDAA+B;AAIzB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAA2B;AAE1B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDAAiC;AAEhC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6DAAsC;AAErC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDAA8B;AAE9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAsC;AAEpC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAA2B;AAE1B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAA0B;AAExB;IAA7B,QAAQ,CAAC,EAAE,SAAS,EAAC,KAAK,EAAC,CAAC;wDAA0J;AAEzJ;IAA7B,QAAQ,CAAC,EAAE,SAAS,EAAC,KAAK,EAAC,CAAC;4DAA2D;AAE7D;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;sDAAwB;AAEzC;IAAR,KAAK,EAAE;mDAAqB;AA9BlB,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CA0J5B;;AAED,eAAe,gBAAgB,CAAC","sourcesContent":["import {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n  nothing,\n} from 'lit';\nimport { customElement, query, state, property } from 'lit/decorators.js';\nimport { styles } from './nile-auto-complete.css';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup, PropertyValues } from 'lit';\nimport { NileDropdown } from '../nile-dropdown';\n\nimport { virtualize } from '@lit-labs/virtualizer/virtualize.js';\n\n// Define the custom element 'nile-auto-complete'\n@customElement('nile-auto-complete')\nexport class NileAutoComplete extends NileElement {\n\n  static styles: CSSResultGroup = styles;\n\n  @query('nile-dropdown') dropdownElement: NileDropdown;\n\n  // Define component properties\n\n  @property({ type: Boolean }) disabled: boolean = false;\n\n  @property({ type: Boolean }) isDropdownOpen: boolean = false;\n\n  @property({ type: Boolean }) enableVirtualScroll: boolean = false;\n\n  @property({ type: Boolean }) openOnFocus: boolean = false;\n\n  @property({ type: String }) value: string = '';\n\n  @property({ type: String }) placeholder: string = 'Type here ..';\n\n  @property({ type: Boolean }) noBorder: boolean = false;\n\n  @property({ type: Boolean }) loading: boolean = false;\n\n  @property({ attribute:false}) filterFunction: (item:string,searchedValue:string)=>boolean=(item:string,searchedValue:string)=>item.toLowerCase().includes(searchedValue.toLowerCase());\n\n  @property({ attribute:false}) renderItemFunction: (item:any)=>string = (item:any)=>item;\n\n  @property({ type: Array }) allMenuItems: any = [];\n\n  @state() menuItems: any = [];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.renderItemFunction=(item:any)=>item;\n  }\n\n  protected updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('allMenuItems')){\n      this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n      this.setVirtualMenuWidth();\n    }\n    if (changedProperties.has('isDropdownOpen')) this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n    if (changedProperties.has('value')){\n      this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n    }\n  }\n\n  public render(): TemplateResult {\n    const content=this.enableVirtualScroll?this.getVirtualizedContent():this.getContent();\n    return html`\n      <nile-dropdown class=\"nile-dropdown--input\" ?open=${this.isDropdownOpen} noOpenOnCLick>\n        <nile-input class=\"nile-auto-complete--input\"\n          ?no-border=${this.noBorder}\n          .disabled=${this.disabled}\n          .value=${this.value}\n          @nile-input=${this.handleSearch}\n          @focus=${this.handleFocus}\n          @click=${this.handleClick}\n          slot=\"trigger\"\n          placeholder=${this.placeholder}\n        >\n          ${this.loading?html`<nile-icon slot=\"suffix\" color=\"var(--nile-colors-primary-600)\" name=\"button-loading-blue-animated\"></nile-icon>`:nothing}\n        </nile-input>\n        ${this.menuItems.length > 0 && !this.loading\n          ? content\n          : nothing}\n      </nile-dropdown>\n    `;\n  }  \n  \n  getVirtualizedContent():TemplateResult{\n    return html`\n      <nile-menu class=\"virtualized__menu\" @nile-select=${this.handleSelect} id=\"content-menu\" exportparts=\"menu__items-wrapper:options__wrapper\">\n        ${virtualize({\n          items: this.menuItems,\n          renderItem: (item:any):TemplateResult=>this.getItemRenderFunction(item),\n\t\t\t\t\tscroller:true\n        })}\n      </nile-menu>\n    `\n  }\n\n  getContent():TemplateResult{\n    return html`\n      <nile-menu id=\"content-menu\" @nile-select=${this.handleSelect} exportparts=\"menu__items-wrapper:options__wrapper\">\n        ${this.menuItems.map((item: any)  => this.getItemRenderFunction(item))}\n      </nile-menu>`\n  }\n\n  getItemRenderFunction(item:any):TemplateResult{\n    const value=this.renderItemFunction(item)\n    return html`\n      <nile-menu-item value=${value}>\n        ${value}\n      </nile-menu-item>\n    `;\n  }\n\n  private handleSelect(event: CustomEvent) {\n    this.value = event.detail.value;\n    this.emit('nile-complete', { value: event.detail.value });\n    this.emit('nile-input', { value: event.detail.value });\n    this.isDropdownOpen = false;\n    this.dropdownElement?.hide();\n  }\n\n  private setVirtualMenuWidth() {\n    const maxLengthOption = this.menuItems\n      .reduce((acc: number, curr: any) => {\n        const currLength = this.renderItemFunction(curr).length\n        return acc > currLength ? acc : currLength\n      }, 0)\n    const defaultWith = 110;\n    const pixelMultiplier = 9.5;\n    const menuWidth = maxLengthOption * pixelMultiplier < defaultWith ? defaultWith : maxLengthOption * pixelMultiplier;\n    this.style.setProperty(\"--virtual-scroll-container-width\", menuWidth + \"px\");\n  }\n\n  private handleSearch(event: CustomEvent) {\n    this.value = event.detail.value.toLowerCase();\n\n    // Filter menu items based on the search value\n    this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n\n    this.isDropdownOpen = this.menuItems.length > 0;\n    if (this.isDropdownOpen) this.dropdownElement?.show();\n  }\n\n  public handleFocus() {\n    if (!this.openOnFocus) {\n      return;\n    }\n\n    // Delay opening the dropdown to allow focus to take effect\n    setTimeout(() => {\n      this.isDropdownOpen = true;\n      this.dropdownElement?.show();\n    }, 300);\n  }\n\n  private handleClick() {\n    this.isDropdownOpen = true;\n    this.dropdownElement?.show();\n  }\n\n  applyFilter<T>(list: T[], filterFn: (item: T,searchValue?:string) => boolean): T[] {\n    if(typeof(list)!=='object') return []\n    const res:T[]=[]\n    list.forEach( el=> filterFn(el,this.value) && res.push(el) )\n    return res\n  }\n\n}\n\nexport default NileAutoComplete;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-auto-complete': NileAutoComplete;\n  }\n}"]}
+{"version":3,"file":"nile-auto-complete.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/nile-auto-complete.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n  nothing,\n} from 'lit';\nimport { customElement, query, state, property } from 'lit/decorators.js';\nimport { styles } from './nile-auto-complete.css';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup, PropertyValues } from 'lit';\nimport { NileDropdown } from '../nile-dropdown';\n\nimport { virtualize } from '@lit-labs/virtualizer/virtualize.js';\n\n// Define the custom element 'nile-auto-complete'\n@customElement('nile-auto-complete')\nexport class NileAutoComplete extends NileElement {\n\n  static styles: CSSResultGroup = styles;\n\n  @query('nile-dropdown') dropdownElement: NileDropdown;\n\n  // Define component properties\n\n  @property({ type: Boolean }) disabled: boolean = false;\n\n  @property({ type: Boolean }) isDropdownOpen: boolean = false;\n\n  @property({ type: Boolean }) enableVirtualScroll: boolean = false;\n\n  @property({ type: Boolean }) openOnFocus: boolean = false;\n\n  @property({ type: String }) value: string = '';\n\n  @property({ type: String }) placeholder: string = 'Type here ..';\n\n  @property({ type: Boolean }) noBorder: boolean = false;\n\n  @property({ type: Boolean }) loading: boolean = false;\n\n  @property({ attribute:false}) filterFunction: (item:string,searchedValue:string)=>boolean=(item:string,searchedValue:string)=>item.toLowerCase().includes(searchedValue.toLowerCase());\n\n  @property({ attribute:false}) renderItemFunction: (item:any)=>string = (item:any)=>item;\n\n  @property({ type: Array }) allMenuItems: any = [];\n\n  @state() menuItems: any = [];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.renderItemFunction=(item:any)=>item;\n  }\n\n  protected updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('allMenuItems')){\n      this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n      this.setVirtualMenuWidth();\n    }\n    if (changedProperties.has('isDropdownOpen')) this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n    if (changedProperties.has('value')){\n      this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n    }\n  }\n\n  public render(): TemplateResult {\n    const content=this.enableVirtualScroll?this.getVirtualizedContent():this.getContent();\n    return html`\n      <nile-dropdown class=\"nile-dropdown--input\" ?open=${this.isDropdownOpen} noOpenOnCLick>\n        <nile-input class=\"nile-auto-complete--input\"\n          ?no-border=${this.noBorder}\n          .disabled=${this.disabled}\n          .value=${this.value}\n          @nile-input=${this.handleSearch}\n          @focus=${this.handleFocus}\n          @click=${this.handleClick}\n          slot=\"trigger\"\n          placeholder=${this.placeholder}\n        >\n          ${this.loading?html`<nile-icon slot=\"suffix\" color=\"var(--nile-colors-primary-600)\" name=\"button-loading-blue-animated\"></nile-icon>`:nothing}\n        </nile-input>\n        ${this.menuItems.length > 0 && !this.loading\n          ? content\n          : nothing}\n      </nile-dropdown>\n    `;\n  }  \n  \n  getVirtualizedContent():TemplateResult{\n    return html`\n      <nile-menu class=\"virtualized__menu\" @nile-select=${this.handleSelect} id=\"content-menu\" exportparts=\"menu__items-wrapper:options__wrapper\">\n        ${virtualize({\n          items: this.menuItems,\n          renderItem: (item:any):TemplateResult=>this.getItemRenderFunction(item),\n\t\t\t\t\tscroller:true\n        })}\n      </nile-menu>\n    `\n  }\n\n  getContent():TemplateResult{\n    return html`\n      <nile-menu id=\"content-menu\" @nile-select=${this.handleSelect} exportparts=\"menu__items-wrapper:options__wrapper\">\n        ${this.menuItems.map((item: any)  => this.getItemRenderFunction(item))}\n      </nile-menu>`\n  }\n\n  getItemRenderFunction(item:any):TemplateResult{\n    const value=this.renderItemFunction(item)\n    return html`\n      <nile-menu-item value=${value}>\n        ${value}\n      </nile-menu-item>\n    `;\n  }\n\n  private handleSelect(event: CustomEvent) {\n    this.value = event.detail.value;\n    this.emit('nile-complete', { value: event.detail.value });\n    this.isDropdownOpen = false;\n    this.dropdownElement?.hide();\n  }\n\n  private setVirtualMenuWidth() {\n    const maxLengthOption = this.menuItems\n      .reduce((acc: number, curr: any) => {\n        const currLength = this.renderItemFunction(curr).length\n        return acc > currLength ? acc : currLength\n      }, 0)\n    const defaultWith = 110;\n    const pixelMultiplier = 9.5;\n    const menuWidth = maxLengthOption * pixelMultiplier < defaultWith ? defaultWith : maxLengthOption * pixelMultiplier;\n    this.style.setProperty(\"--virtual-scroll-container-width\", menuWidth + \"px\");\n  }\n\n  private handleSearch(event: CustomEvent) {\n    this.value = event.detail.value.toLowerCase();\n\n    // Filter menu items based on the search value\n    this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n\n    this.isDropdownOpen = this.menuItems.length > 0;\n    if (this.isDropdownOpen) this.dropdownElement?.show();\n  }\n\n  public handleFocus() {\n    if (!this.openOnFocus) {\n      return;\n    }\n\n    // Delay opening the dropdown to allow focus to take effect\n    setTimeout(() => {\n      this.isDropdownOpen = true;\n      this.dropdownElement?.show();\n    }, 300);\n  }\n\n  private handleClick() {\n    this.isDropdownOpen = true;\n    this.dropdownElement?.show();\n  }\n\n  applyFilter<T>(list: T[], filterFn: (item: T,searchValue?:string) => boolean): T[] {\n    if(typeof(list)!=='object') return []\n    const res:T[]=[]\n    list.forEach( el=> filterFn(el,this.value) && res.push(el) )\n    return res\n  }\n\n}\n\nexport default NileAutoComplete;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-auto-complete': NileAutoComplete;\n  }\n}"]}

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

@@ -1,9 +1,9 @@
 /**
- * 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.
- */
+* 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.
+*/
 /**
  * Progressbar CSS
  */

package/dist/src/nile-circular-progressbar/nile-circular-progressbar.css.js

@@ -1,9 +1,9 @@
 /**
- * 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.
- */
+* 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';
 /**
  * Progressbar CSS
@@ -12,16 +12,18 @@ export const styles = css `
   :host{
     
   }
+
   .track {
-    stroke-width: 2px;
-    stroke: var(--nile-colors-yellow-400);
+    stroke-width: 4px;
+    stroke: var(--nile-colors-neutral-400);
     opacity: 0.5;
     fill: none;
+    height: 2px;
   }
 
   .progress {
-    stroke-width: 2px;
-    stroke: var(--nile-colors-yellow-500);
+    stroke-width: 4px;
+    stroke: var(--nile-colors-primary-600);
     stroke-linecap: round;
     fill: none;
     transform: rotate(270deg);
@@ -36,7 +38,23 @@ export const styles = css `
     font-weight: var(--nile-font-weight-regular);
     line-height: var(--nile-type-scale-1);
     letter-spacing: 0.2px;
-    text-transform: uppercase;
+     
+  }
+
+  
+  .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/dist/src/nile-circular-progressbar/nile-circular-progressbar.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-circular-progressbar.css.js","sourceRoot":"","sources":["../../../src/nile-circular-progressbar/nile-circular-progressbar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Progressbar CSS\n */\nexport const styles = css`\n  :host{\n    \n  }\n  .track {\n    stroke-width: 2px;\n    stroke: var(--nile-colors-yellow-400);\n    opacity: 0.5;\n    fill: none;\n  }\n\n  .progress {\n    stroke-width: 2px;\n    stroke: var(--nile-colors-yellow-500);\n    stroke-linecap: round;\n    fill: none;\n    transform: rotate(270deg);\n    transform-origin: center;\n  }\n\n  .circle__text {\n    color: var(--nile-colors-dark-900);\n    text-align: center;\n    font-size: var(--nile-type-scale-1);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: var(--nile-type-scale-1);\n    letter-spacing: 0.2px;\n    text-transform: uppercase;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-circular-progressbar.css.js","sourceRoot":"","sources":["../../../src/nile-circular-progressbar/nile-circular-progressbar.css.ts"],"names":[],"mappings":"AAAC;;;;;EAKE;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":[" /**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Progressbar CSS\n */\nexport const styles = css`\n  :host{\n    \n  }\n\n  .track {\n    stroke-width: 4px;\n    stroke: var(--nile-colors-neutral-400);\n    opacity: 0.5;\n    fill: none;\n    height: 2px;\n  }\n\n  .progress {\n    stroke-width: 4px;\n    stroke: var(--nile-colors-primary-600);\n    stroke-linecap: round;\n    fill: none;\n    transform: rotate(270deg);\n    transform-origin: center;\n  }\n\n  .circle__text {\n    color: var(--nile-colors-dark-900);\n    text-align: center;\n    font-size: var(--nile-type-scale-1);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: var(--nile-type-scale-1);\n    letter-spacing: 0.2px;\n     \n  }\n\n  \n  .nile-progress-bar__status {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 4px;  \n  }\n\n  .nile-progress-bar__message {\n    flex-grow: 1;\n  }\n\n  .nile-progress-bar__percentage {\n    white-space: nowrap;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-circular-progressbar/nile-circular-progressbar.d.ts

@@ -20,10 +20,13 @@ export declare class NileCircularProgressbar extends NileElement {
     static get styles(): CSSResultArray;
     progressCircle: any;
     progress: number;
+    content: String;
     /**
      * Render method
      * @slot This is a slot test
      */
+    size: 'sm' | 'md' | 'lg';
+    private get circleSize();
     connectedCallback(): void;
     private setProgress;
     render(): TemplateResult;

package/dist/src/nile-circular-progressbar/nile-circular-progressbar.js

@@ -20,6 +20,14 @@ let NileCircularProgressbar = class NileCircularProgressbar extends NileElement
         super(...arguments);
         this.progress = 50;
         /* #endregion */
+        /* #region Methods */
+        /**
+         * Render method
+         * @slot This is a slot test
+         */
+        // make reactive to pass through
+        this.size = 'md';
+        /* #endregion */
     }
     /**
      * The styles for Progressbar
@@ -28,13 +36,16 @@ let NileCircularProgressbar = class NileCircularProgressbar extends NileElement
     static get styles() {
         return [styles];
     }
-    /* #endregion */
-    /* #region Methods */
-    /**
-     * Render method
-     * @slot This is a slot test
-     */
-    // make reactive to pass through
+    get circleSize() {
+        switch (this.size) {
+            case 'sm':
+                return { radius: 9, viewBox: 24, fontSize: '5px' };
+            case 'lg':
+                return { radius: 28, viewBox: 64, fontSize: '10px' };
+            default:
+                return { radius: 18, viewBox: 40, fontSize: '10px' };
+        }
+    }
     connectedCallback() {
         super.connectedCallback();
         this.updateComplete.then(() => {
@@ -55,20 +66,29 @@ let NileCircularProgressbar = class NileCircularProgressbar extends NileElement
             circumference - (percent / 100) * circumference;
     }
     render() {
+        const { radius, viewBox, fontSize } = this.circleSize;
+        const innerText = this.content === undefined ? `${Math.round(this.progress)}%` : this.content;
         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} %
-        </text>
-      </svg>
+      <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>
+
+
+  
     `;
     }
 };
@@ -78,6 +98,12 @@ __decorate([
 __decorate([
     property({ type: Number, reflect: true })
 ], NileCircularProgressbar.prototype, "progress", void 0);
+__decorate([
+    property({ reflect: true })
+], NileCircularProgressbar.prototype, "content", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NileCircularProgressbar.prototype, "size", void 0);
 NileCircularProgressbar = __decorate([
     customElement('nile-circular-progressbar')
 ], NileCircularProgressbar);

package/dist/src/nile-circular-progressbar/nile-circular-progressbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-circular-progressbar.js","sourceRoot":"","sources":["../../../src/nile-circular-progressbar/nile-circular-progressbar.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAGnD;;;;;GAKG;AAEI,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,WAAW;IAAjD;;QASsC,aAAQ,GAAG,EAAE,CAAC;QAkDzD,gBAAgB;IAClB,CAAC;IA3DC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAID,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACH,gCAAgC;IAEhC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE;YAC5B,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,EAAE,CAAC;gBACtB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;YACpB,CAAC;YACD,IAAI,IAAI,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC;gBACxB,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC;YACtB,CAAC;YACD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAClC,CAAC,CAAC,CAAC;IACL,CAAC;IACO,WAAW,CAAC,OAAe;QACjC,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC;QACzD,IAAI,aAAa,GAAG,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC;QAC/C,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,eAAe,GAAG,aAAa,CAAC;QAC1D,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,gBAAgB;YACxC,aAAa,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,GAAG,aAAa,CAAC;IACpD,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;;;;;;;;;;YAWH,IAAI,CAAC,QAAQ;;;KAGpB,CAAC;IACJ,CAAC;CAGF,CAAA;AApDqB;IAAnB,KAAK,CAAC,WAAW,CAAC;+DAAqB;AACG;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDAAe;AAT9C,uBAAuB;IADnC,aAAa,CAAC,2BAA2B,CAAC;GAC9B,uBAAuB,CA4DnC;;AAED,eAAe,uBAAuB,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, query, property } from 'lit/decorators.js';\nimport { styles } from './nile-circular-progressbar.css';\nimport NileElement from '../internal/nile-element';\nimport logInfo from '../nile-icon/icons/svg/log-info';\n\n/**\n * Nile icon component.\n *\n * @tag nile-progressbar\n *\n */\n@customElement('nile-circular-progressbar')\nexport class NileCircularProgressbar extends NileElement {\n  /**\n   * The styles for Progressbar\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n  @query('.progress') progressCircle: any;\n  @property({ type: Number, reflect: true }) progress = 50;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  // make reactive to pass through\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.updateComplete.then(() => {\n      if (this.progress < 0) {\n        this.progress = 0;\n      }\n      if (this.progress > 100) {\n        this.progress = 100;\n      }\n      this.setProgress(this.progress);\n    });\n  }\n  private setProgress(percent: number) {\n    const circleRadius = this.progressCircle.r.baseVal.value;\n    let circumference = circleRadius * 2 * Math.PI;\n    this.progressCircle.style.strokeDasharray = circumference;\n    this.progressCircle.style.strokeDashoffset =\n      circumference - (percent / 100) * circumference;\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <svg width=\"40\" height=\"40\">\n        <circle r=\"19\" cx=\"20\" cy=\"20\" class=\"track\"></circle>\n        <circle r=\"19\" cx=\"20\" cy=\"20\" class=\"progress\"></circle>\n        <text\n          x=\"50%\"\n          y=\"50%\"\n          text-anchor=\"middle\"\n          alignment-baseline=\"middle\"\n          class=\"circle__text\"\n        >\n          ${this.progress} %\n        </text>\n      </svg>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileCircularProgressbar;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-circular-progressbar': NileCircularProgressbar;\n  }\n}\n"]}
+{"version":3,"file":"nile-circular-progressbar.js","sourceRoot":"","sources":["../../../src/nile-circular-progressbar/nile-circular-progressbar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, query, property } from 'lit/decorators.js';\nimport { styles } from './nile-circular-progressbar.css';\nimport NileElement from '../internal/nile-element';\nimport logInfo from '../nile-icon/icons/svg/log-info';\n\n/**\n * Nile icon component.\n *\n * @tag nile-progressbar\n *\n */\n@customElement('nile-circular-progressbar')\nexport class NileCircularProgressbar extends NileElement {\n  /**\n   * The styles for Progressbar\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  @query('.progress') progressCircle: any;\n  @property({ type: Number, reflect: true }) progress = 50;\n  @property({ reflect: true }) content: String;\n   /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  // make reactive to pass through\n  @property({ type: String, reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  private get circleSize() {\n    switch (this.size) {\n      case 'sm':\n        return { radius: 9, viewBox: 24, fontSize: '5px' };\n      case 'lg':\n        return { radius: 28, viewBox: 64, fontSize: '10px' };\n      default:\n        return { radius: 18, viewBox: 40, fontSize: '10px' };\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.updateComplete.then(() => {\n      if (this.progress < 0) {\n        this.progress = 0;\n      }\n      if (this.progress > 100) {\n        this.progress = 100;\n      }\n      this.setProgress(this.progress);\n    });\n  }\n  private setProgress(percent: number) {\n    const circleRadius = this.progressCircle.r.baseVal.value;\n    let circumference = circleRadius * 2 * Math.PI;\n    this.progressCircle.style.strokeDasharray = circumference;\n    this.progressCircle.style.strokeDashoffset =\n      circumference - (percent / 100) * circumference;\n  }\n\n  public render(): TemplateResult {\n    const { radius, viewBox, fontSize } = this.circleSize;\n    const innerText = this.content === undefined ? `${Math.round(this.progress)}%` : this.content;\n\n\n    return html`\n      <svg width=\"${viewBox}\" height=\"${viewBox}\" viewBox=\"0 0 ${viewBox} ${viewBox}\">\n        <circle r=\"${radius}\" cx=\"${viewBox / 2}\" cy=\"${viewBox / 2}\" class=\"track\"></circle>\n        <circle r=\"${radius}\" cx=\"${viewBox / 2}\" cy=\"${viewBox / 2}\" class=\"progress\"></circle>\n        \n       \n          <text\n            x=\"50%\"\n            y=\"53%\"\n            text-anchor=\"middle\"\n            alignment-baseline=\"middle\"\n            class=\"circle__text\"\n            style=\"font-size: ${fontSize};\"\n          >\n            ${innerText}\n          </text>\n        \n  </svg>\n\n\n  \n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileCircularProgressbar;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-circular-progressbar': NileCircularProgressbar;\n  }\n}\n"]}

package/dist/src/nile-progress-bar/nile-progress-bar.css.js

@@ -23,6 +23,13 @@ export default css `
     background-color: var(--nile-colors-neutral-400);
   }
 
+ 
+  .nile-progress-bar__progress-bar.rounded li {
+    height: 4px;  
+    border-radius: 4px;
+    overflow: hidden; 
+  }
+
   .nile-progress-bar__progress-bar li.changeColor::after {
     background-color: var(--nile-colors-primary-600);
   }
@@ -32,10 +39,15 @@ 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;

package/dist/src/nile-progress-bar/nile-progress-bar.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-progress-bar.css.js","sourceRoot":"","sources":["../../../src/nile-progress-bar/nile-progress-bar.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n  .nile-progress-bar__container {\n    width: 100%;\n    margin: 0 auto;\n  }\n\n  .nile-progress-bar__progress-bar {\n    width: 100%;\n    counter-reset: step;\n    padding: 0;\n    margin: 0 auto;\n    list-style: none;\n    display: flex;\n    height: 2px;\n    justify-content: space-between;\n  }\n\n  .nile-progress-bar__progress-bar li {\n    position: relative;\n    width: 100%;\n    height: 2px;\n    background-color: var(--nile-colors-neutral-400);\n  }\n\n  .nile-progress-bar__progress-bar li.changeColor::after {\n    background-color: var(--nile-colors-primary-600);\n  }\n\n  .nile-progress-bar__progress-bar li span {\n    position: absolute;\n    top: 0;\n    left: 0;\n    background-color: var(--nile-colors-primary-600);\n    height: 2px;\n    transition: all 1s linear;\n  }\n\n  .nile-progress-bar__reset {\n    background-color: var(--nile-colors-neutral-400);\n    position: absolute;\n    z-index: 1;\n  }\n`;\n"]}
+{"version":3,"file":"nile-progress-bar.css.js","sourceRoot":"","sources":["../../../src/nile-progress-bar/nile-progress-bar.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n  .nile-progress-bar__container {\n    width: 100%;\n    margin: 0 auto;\n  }\n\n  .nile-progress-bar__progress-bar {\n    width: 100%;\n    counter-reset: step;\n    padding: 0;\n    margin: 0 auto;\n    list-style: none;\n    display: flex;\n    height: 2px;\n    justify-content: space-between;\n  }\n\n  .nile-progress-bar__progress-bar li {\n    position: relative;\n    width: 100%;\n    height: 2px;\n    background-color: var(--nile-colors-neutral-400);\n  }\n\n \n  .nile-progress-bar__progress-bar.rounded li {\n    height: 4px;  \n    border-radius: 4px;\n    overflow: hidden; \n  }\n\n  .nile-progress-bar__progress-bar li.changeColor::after {\n    background-color: var(--nile-colors-primary-600);\n  }\n\n  .nile-progress-bar__progress-bar li span {\n    position: absolute;\n    top: 0;\n    left: 0;\n    background-color: var(--nile-colors-primary-600);\n    height: 100%;  \n    transition: all 1s linear;\n  }\n\n   \n  .nile-progress-bar__progress-bar.rounded li span {\n    border-radius: 4px;\n  }\n\n  .nile-progress-bar__reset {\n    background-color: var(--nile-colors-neutral-400);\n    position: absolute;\n    z-index: 1;\n  }\n`;"]}

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

@@ -2,5 +2,6 @@ import { LitElement, CSSResultGroup } from 'lit';
 export declare class NileProgressBar extends LitElement {
     static styles: CSSResultGroup;
     value: number;
+    variant: 'normal' | 'rounded';
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/src/nile-progress-bar/nile-progress-bar.js

@@ -6,11 +6,13 @@ let NileProgressBar = class NileProgressBar extends LitElement {
     constructor() {
         super(...arguments);
         this.value = 0;
+        this.variant = 'normal';
     }
     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>
@@ -21,6 +23,9 @@ NileProgressBar.styles = styles;
 __decorate([
     property({ type: Number })
 ], NileProgressBar.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], NileProgressBar.prototype, "variant", void 0);
 NileProgressBar = __decorate([
     customElement('nile-progress-bar')
 ], NileProgressBar);

package/dist/src/nile-progress-bar/nile-progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-progress-bar.js","sourceRoot":"","sources":["../../../src/nile-progress-bar/nile-progress-bar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGrD,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAGuB,UAAK,GAAG,CAAC,CAAC;IAWxC,CAAC;IATU,MAAM;QACb,OAAO,IAAI,CAAA;;;oCAGqB,IAAI,CAAC,KAAK;;;KAGzC,CAAC;IACJ,CAAC;;AAZe,sBAAM,GAAmB,MAAM,AAAzB,CAA0B;AAEpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAW;AAH3B,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAc3B","sourcesContent":["import { LitElement, html, css, CSSResultGroup } from 'lit';\nimport styles from './nile-progress-bar.css';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('nile-progress-bar')\nexport class NileProgressBar extends LitElement {\n  static override styles: CSSResultGroup = styles;\n\n  @property({ type: Number }) value = 0;\n\n  override render() {\n    return html`\n      <div class=\"nile-progress-bar__container\">\n        <ul class=\"nile-progress-bar__progress-bar\">\n          <li><span style=\"width: ${this.value}%\"></span></li>\n        </ul>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"nile-progress-bar.js","sourceRoot":"","sources":["../../../src/nile-progress-bar/nile-progress-bar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGrD,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAGuB,UAAK,GAAG,CAAC,CAAC;QACV,YAAO,GAAyB,QAAQ,CAAC;IAavE,CAAC;IAXU,MAAM;QACb,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;QAEjE,OAAO,IAAI,CAAA;;qDAEsC,YAAY;oCAC7B,IAAI,CAAC,KAAK;;;KAGzC,CAAC;IACJ,CAAC;;AAfe,sBAAM,GAAmB,MAAM,AAAzB,CAA0B;AAEpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAA0C;AAJ1D,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAiB3B","sourcesContent":["import { LitElement, html, css, CSSResultGroup } from 'lit';\nimport styles from './nile-progress-bar.css';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('nile-progress-bar')\nexport class NileProgressBar extends LitElement {\n  static override styles: CSSResultGroup = styles;\n\n  @property({ type: Number }) value = 0;\n  @property({ type: String }) variant: 'normal' | 'rounded' = 'normal';\n\n  override render() {\n    const variantClass = this.variant === 'rounded' ? 'rounded' : '';\n\n    return html`\n      <div class=\"nile-progress-bar__container\">\n        <ul class=\"nile-progress-bar__progress-bar ${variantClass}\">\n          <li><span style=\"width: ${this.value}%\"></span></li>\n        </ul>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/src/nile-stepper/nile-stepper.css.js

@@ -9,6 +9,9 @@ import { css } from 'lit';
  * Stepper CSS
  */
 export const styles = css `
+	*{
+		box-sizing:border-box;
+	}
 	:host {
 		display:block;
 		height:100%;
@@ -16,11 +19,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;
 	}
 `;
 export default [styles];

package/dist/src/nile-stepper/nile-stepper.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-stepper.css.js","sourceRoot":"","sources":["../../../src/nile-stepper/nile-stepper.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;CAcxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * Stepper CSS\n */\nexport const styles = css`\n\t:host {\n\t\tdisplay:block;\n\t\theight:100%;\n\t}\n\t.nile-stepper--horizontal{\n\t\tdisplay:flex;\n\t\talign-items:center;\n\t}\n\t.nile-stepper--vertical{\n\t\theight:100%;\n\t\tdisplay:flex;\n\t\tflex-direction:column;\n\t}\n`;\n\nexport default [styles];"]}
+{"version":3,"file":"nile-stepper.css.js","sourceRoot":"","sources":["../../../src/nile-stepper/nile-stepper.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;CAoBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * Stepper CSS\n */\nexport const styles = css`\n\t*{\n\t\tbox-sizing:border-box;\n\t}\n\t:host {\n\t\tdisplay:block;\n\t\theight:100%;\n\t}\n\t.nile-stepper--horizontal{\n\t\tdisplay:flex;\n\t\talign-items:center;\n\t\tpadding: var(--nile-spacing-spacing-3xl) 0;\n\t}\n\n\t.nile-stepper--vertical{\n\t\theight:100%;\n\t\tdisplay:flex;\n\t\tflex-direction:column;\n\t\tpadding: var(--nile-spacing-spacing-3xl) var(--nile-spacing-spacing-3xl) 0;\n\t}\n`;\n\nexport default [styles];"]}

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

@@ -4,7 +4,7 @@
  * 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 { CSSResultArray, TemplateResult } from 'lit';
+import { CSSResultArray, TemplateResult, PropertyValueMap } from 'lit';
 import NileElement from '../internal/nile-element';
 /**
  * Nile stepper component.
@@ -19,7 +19,7 @@ export declare class NileStepper extends NileElement {
     completedStep: number;
     size: 'sm' | 'md' | 'lg';
     icon: string;
-    connectedCallback(): void;
+    protected update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     handleCurrentStepChanges(): void;
     handleCompletedStepChanges(): void;
     private updateItems;

package/dist/src/nile-stepper/nile-stepper.js

@@ -28,11 +28,11 @@ let NileStepper = class NileStepper extends NileElement {
         this.icon = 'tick';
         /* #endregion */
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.updateComplete.then(() => {
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('currentStep') || changedProperties.has('completedStep')) {
             this.updateItems();
-        });
+        }
     }
     handleCurrentStepChanges() {
         this.updateItems();
@@ -119,16 +119,16 @@ __decorate([
     property({ type: Boolean, attribute: 'vertical' })
 ], NileStepper.prototype, "isVertical", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'content-below', reflect: true })
+    property({ type: Boolean, attribute: true, reflect: true })
 ], NileStepper.prototype, "contentBelow", void 0);
 __decorate([
-    property({ type: Number, attribute: 'currentStep', reflect: true })
+    property({ type: Number, attribute: true, reflect: true })
 ], NileStepper.prototype, "currentStep", void 0);
 __decorate([
-    property({ type: Number, attribute: 'completedStep', reflect: true })
+    property({ type: Number, attribute: true, reflect: true })
 ], NileStepper.prototype, "completedStep", void 0);
 __decorate([
-    property({ type: String, attribute: 'size', reflect: true })
+    property({ type: String, attribute: true, reflect: true })
 ], NileStepper.prototype, "size", void 0);
 __decorate([
     property()