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

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

@@ -87,13 +87,7 @@ export class NileVerticalStepperItem extends NileElement {
 				<div class="stepper-item__connector-content">
 					<div class="stepper__item__bulletin">
 						${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">
-										<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>`
+							html`<div class="stepper__bulletin--icon">${this.getSvg()}</div>`
 							: html`<div class="${classMap({ 'stepper__bulletin--dot':true, 'stepper__bulletin__dot--active':isCurrent })}"></div>`
 						}
 					</div>
@@ -102,13 +96,23 @@ export class NileVerticalStepperItem extends NileElement {
 					</div>
 				</div>
 				<div class="stepper__item__content">
-					<div class="${classMap({ 'stepper__content__title':true, 'stepper__content__title--active':isCurrent })}">${this.title}</div>
+					<div class="${classMap({ 'stepper__content__title':true, "stepper__content__title--alone": !this.subtitle, 'stepper__content__title--active':isCurrent })}">${this.title}</div>
 					<div class="${classMap({ 'stepper__content__subtitle':true, 'stepper__content__subtitle--active':isCurrent })}">${this.subtitle}</div>
 				</div>
 			</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 */
 }
 

package/vscode-html-custom-data.json

@@ -799,11 +799,30 @@
     },
     {
       "name": "nile-circular-progressbar",
-      "description": "Nile icon component.\n\nAttributes:\n\n  * `progress` {`number`} - \n\nProperties:\n\n  * `progressCircle` - \n\n  * `progress` {`number`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile icon component.\n\nAttributes:\n\n  * `progress` {`number`} - \n\n  * `content` {`String`} - \n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - Render method\n\nProperties:\n\n  * `progressCircle` - \n\n  * `progress` {`number`} - \n\n  * `content` {`String`} - \n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - Render method\n\n  * `circleSize` {`{ radius: number; viewBox: number; fontSize: string; }`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "progress",
           "description": "`progress` {`number`} - \n\nProperty: progress\n\nDefault: 50"
+        },
+        {
+          "name": "content",
+          "description": "`content` {`String`} - \n\nProperty: content"
+        },
+        {
+          "name": "size",
+          "description": "`size` {`\"sm\" | \"md\" | \"lg\"`} - Render method\n\nProperty: size\n\nDefault: md",
+          "values": [
+            {
+              "name": "sm"
+            },
+            {
+              "name": "md"
+            },
+            {
+              "name": "lg"
+            }
+          ]
         }
       ]
     },
@@ -2595,11 +2614,23 @@
     },
     {
       "name": "nile-progress-bar",
-      "description": "Attributes:\n\n  * `value` {`number`} - \n\nProperties:\n\n  * `styles` - \n\n  * `value` {`number`} - \n\n  * `override` - ",
+      "description": "Attributes:\n\n  * `value` {`number`} - \n\n  * `variant` {`\"normal\" | \"rounded\"`} - \n\nProperties:\n\n  * `styles` - \n\n  * `value` {`number`} - \n\n  * `variant` {`\"normal\" | \"rounded\"`} - \n\n  * `override` - ",
       "attributes": [
         {
           "name": "value",
           "description": "`value` {`number`} - \n\nProperty: value\n\nDefault: 0"
+        },
+        {
+          "name": "variant",
+          "description": "`variant` {`\"normal\" | \"rounded\"`} - \n\nProperty: variant\n\nDefault: normal",
+          "values": [
+            {
+              "name": "normal"
+            },
+            {
+              "name": "rounded"
+            }
+          ]
         }
       ]
     },
@@ -3131,7 +3162,7 @@
     },
     {
       "name": "nile-stepper-item",
-      "description": "Nile stepper-item component.\n\nAttributes:\n\n  * `title` {`string`} - \n\n  * `subtitle` {`string`} - \n\nProperties:\n\n  * `title` {`string`} - \n\n  * `subtitle` {`string`} - \n\n  * `contentBelow` {`boolean`} - \n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - \n\n  * `icon` {`string`} - \n\n  * `isFirst` {`boolean`} - \n\n  * `isLast` {`boolean`} - \n\n  * `isComplete` {`boolean`} - \n\n  * `isCurrent` {`boolean`} - \n\n  * `currentStepValue` {`Number`} - \n\n  * `completedStepValue` {`Number`} - \n\n  * `calculatedCompletedStepValue` {`Number`} - \n\n  * `value` {`Number`} - \n\n  * `haveFlex` {`Boolean`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile stepper-item component.\n\nAttributes:\n\n  * `title` {`string`} - \n\n  * `subtitle` {`string`} - \n\nProperties:\n\n  * `absoluteTitle` {`HTMLDivElement`} - \n\n  * `absoluteSubtitle` {`HTMLDivElement`} - \n\n  * `title` {`string`} - \n\n  * `subtitle` {`string`} - \n\n  * `contentBelow` {`boolean`} - \n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - \n\n  * `icon` {`string`} - \n\n  * `isFirst` {`boolean`} - \n\n  * `isLast` {`boolean`} - \n\n  * `isComplete` {`boolean`} - \n\n  * `isCurrent` {`boolean`} - \n\n  * `currentStepValue` {`Number`} - \n\n  * `completedStepValue` {`Number`} - \n\n  * `calculatedCompletedStepValue` {`Number`} - \n\n  * `value` {`Number`} - \n\n  * `haveFlex` {`Boolean`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "title",
@@ -3145,7 +3176,7 @@
     },
     {
       "name": "nile-stepper",
-      "description": "Nile stepper component.\n\nAttributes:\n\n  * `vertical` {`boolean`} - \n\n  * `content-below` {`boolean`} - \n\n  * `currentStep` {`number`} - \n\n  * `completedStep` {`number`} - \n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - \n\n  * `icon` {`string`} - \n\nProperties:\n\n  * `isVertical` {`boolean`} - \n\n  * `contentBelow` {`boolean`} - \n\n  * `currentStep` {`number`} - \n\n  * `completedStep` {`number`} - \n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - \n\n  * `icon` {`string`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile stepper component.\n\nAttributes:\n\n  * `vertical` {`boolean`} - \n\n  * `contentBelow` {`boolean`} - \n\n  * `currentStep` {`number`} - \n\n  * `completedStep` {`number`} - \n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - \n\n  * `icon` {`string`} - \n\nProperties:\n\n  * `isVertical` {`boolean`} - \n\n  * `contentBelow` {`boolean`} - \n\n  * `currentStep` {`number`} - \n\n  * `completedStep` {`number`} - \n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - \n\n  * `icon` {`string`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "vertical",
@@ -3153,8 +3184,8 @@
           "valueSet": "v"
         },
         {
-          "name": "content-below",
-          "description": "`content-below` {`boolean`} - \n\nProperty: contentBelow\n\nDefault: false",
+          "name": "contentBelow",
+          "description": "`contentBelow` {`boolean`} - \n\nProperty: contentBelow\n\nDefault: false",
           "valueSet": "v"
         },
         {