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

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

@@ -18,7 +18,8 @@ import NileElement from '../internal/nile-element';
 let NileCircularProgressbar = class NileCircularProgressbar extends NileElement {
     constructor() {
         super(...arguments);
-        this.progress = 50;
+        this.value = 0;
+        this.size = 40;
         /* #endregion */
     }
     /**
@@ -28,45 +29,53 @@ 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() {
+        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);
         });
     }
     setProgress(percent) {
-        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) {
+        if (changedProperties.has('value')) {
+            this.setProgress(this.value);
+        }
     }
     render() {
+        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>
     `;
@@ -77,7 +86,13 @@ __decorate([
 ], NileCircularProgressbar.prototype, "progressCircle", void 0);
 __decorate([
     property({ type: Number, reflect: true })
-], NileCircularProgressbar.prototype, "progress", void 0);
+], NileCircularProgressbar.prototype, "value", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NileCircularProgressbar.prototype, "content", void 0);
+__decorate([
+    property({ type: Number, 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!: SVGCircleElement;\n  \n  @property({ type: Number, reflect: true }) value = 0;\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 }) content?: string;\n  @property({ type: Number, reflect: true }) size = 40;  \n\n  private get circleSize() {\n    const radius = this.size / 2 - 4;  \n    return {\n      radius,\n      viewBox: this.size,\n      fontSize: `${this.size * 0.25}px`,  \n    };\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.updateComplete.then(() => {\n      this.value = Math.max(0, Math.min(100, this.value));\n      this.setProgress(this.value);\n    });\n  }\n\n  private setProgress(percent: number) {\n    if (this.progressCircle) {\n      const circleRadius = this.progressCircle.r.baseVal.value;\n      const circumference = circleRadius * 2 * Math.PI;\n\n      this.progressCircle.style.transition = 'stroke-dashoffset 0.8s ease-in-out'; \n      this.progressCircle.style.strokeDasharray = `${circumference}`;\n      this.progressCircle.style.strokeDashoffset = `${circumference - (percent / 100) * circumference}`;\n    }\n  }\n\n  updated(changedProperties: Map<string, any>) {\n    if (changedProperties.has('value')) {\n      this.setProgress(this.value);\n    }\n  }\n\n  public render(): TemplateResult {\n    const { radius, viewBox, fontSize } = this.circleSize;\n    const innerText = this.content ?? `${Math.round(this.value)}%`;\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      </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"]}

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

@@ -21,6 +21,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 {
@@ -32,10 +40,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDjB,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    transition:  stroke-dashoffset 0.8s ease-in-out\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;IAevE,CAAC;IAbU,MAAM;QACb,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;QAIjE,OAAO,IAAI,CAAA;;qDAEsC,YAAY;oCAC7B,IAAI,CAAC,KAAK;;;KAGzC,CAAC;IACJ,CAAC;;AAjBe,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,CAmB3B","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    \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()

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

@@ -1 +1 @@
-{"version":3,"file":"nile-stepper.js","sourceRoot":"","sources":["../../../src/nile-stepper/nile-stepper.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 { LitElement, html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-stepper.css';\nimport NileElement from '../internal/nile-element';\nimport { watch } from '../internal/watch';\nimport { classMap } from 'lit/directives/class-map.js';\n\n\n/**\n * Nile stepper component.\n *\n * @tag nile-stepper\n *\n */\n@customElement('nile-stepper')\nexport class NileStepper extends NileElement {\n\n\t@property({ type: Boolean, attribute: 'vertical' }) isVertical: boolean = false;\n\t@property({ type: Boolean, attribute: 'content-below', reflect:true }) contentBelow: boolean = false;\n\t@property({ type: Number, attribute: 'currentStep', reflect:true }) currentStep: number = 0;\n\t@property({ type: Number, attribute: 'completedStep', reflect:true  }) completedStep: number = 0;\n\t@property({ type: String, attribute: 'size', reflect:true  }) size: 'sm' | 'md' | 'lg' = 'md';\n\t@property() icon: string = 'tick';\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis.updateComplete.then(() => {\n\t\t\tthis.updateItems();\n\t\t});\n\t}\n\n\t@watch('currentStep')\n\thandleCurrentStepChanges() {\n\t\tthis.updateItems();\n\t\tthis.emit('nile-current-change', { value: this.currentStep });\n\t}\n\n\t@watch('completedStep')\n\thandleCompletedStepChanges() {\n\t\tthis.updateItems()\n\t\tthis.emit('nile-completed-change', { value: this.completedStep });\n\t}\n\n\tprivate updateItems() {\n\t\tconst items: any = [...this.querySelectorAll(this.isVertical?'nile-vertical-stepper-item':'nile-stepper-item')];\n\t\tif (!items.length) return;\n\t\tconst haveFlex = items.length < 3;\n\n\t\tconst current = (this.currentStep == 0 || this.currentStep > items.length) ? 1 : this.currentStep;\n\t\tconst calculatedCompleted = this.completedStep > items.length ? current : this.completedStep < current ? current : this.completedStep;\n\t\tconst completed = this.completedStep > items.length ? 0 : this.completedStep;\n\n\t\titems.forEach((el: any, index: number) => {\n\t\t\t// set item is complete and is current values\n\t\t\tif (index + 1 < current) {\n\t\t\t\tel.isComplete = true;\n\t\t\t\tel.isCurrent = false;\n\t\t\t}\n\t\t\telse if (index + 1 == current) {\n\t\t\t\tif (index + 1 <= calculatedCompleted) el.isComplete = true;\n\t\t\t\telse el.isComplete = false;\n\t\t\t\tel.isCurrent = true;\n\t\t\t}\n\t\t\telse {\n\t\t\t\tif (index + 1 <= calculatedCompleted) el.isComplete = true;\n\t\t\t\telse el.isComplete = false;\n\t\t\t\tel.isCurrent = false;\n\t\t\t}\n\n\t\t\t// Set isLast and isFirst\n\t\t\tif (index == 0) el.isFirst = true;\n\t\t\tif (index == items.length - 1) el.isLast = true;\n\n\t\t\t// setting default values\n\t\t\tel.currentStepValue = current;\n\t\t\tel.calculatedCompletedStepValue = calculatedCompleted;\n\t\t\tel.completedStepValue = completed;\n\n\t\t\tel.icon = this.icon;\n\t\t\tel.size = this.size;\n\t\t\tel.value = index + 1;\n\t\t\tel.contentBelow = this.contentBelow\n\t\t\tif (index == 0 || index == items.length - 1) {\n\t\t\t\tel.haveFlex = haveFlex;\n\t\t\t}\n\t\t})\n\t}\n\n\t/**\n\t * The styles for nile-stepper\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\treturn html`\n\t\t\t<div class=${classMap({\n\t\t\t\t'nile-stepper':true,\n\t\t\t\t'nile-stepper--horizontal':!this.isVertical,\n\t\t\t\t'nile-stepper--vertical':this.isVertical\n\t\t\t})}>\n\t\t\t\t<slot\n\t\t\t\t\t@slotchange=${this.updateItems}\n\t\t\t\t></slot>\n\t\t\t</div>\n\t\t\t`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileStepper;\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'nile-stepper': NileStepper;\n\t}\n}\n"]}
+{"version":3,"file":"nile-stepper.js","sourceRoot":"","sources":["../../../src/nile-stepper/nile-stepper.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 { LitElement, html, CSSResultArray, TemplateResult, PropertyValueMap } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-stepper.css';\nimport NileElement from '../internal/nile-element';\nimport { watch } from '../internal/watch';\nimport { classMap } from 'lit/directives/class-map.js';\n\n\n/**\n * Nile stepper component.\n *\n * @tag nile-stepper\n *\n */\n@customElement('nile-stepper')\nexport class NileStepper extends NileElement {\n\n\t@property({ type: Boolean, attribute: 'vertical' }) isVertical: boolean = false;\n\t@property({ type: Boolean, attribute: true, reflect:true }) contentBelow: boolean = false;\n\t@property({ type: Number, attribute: true, reflect:true }) currentStep: number = 0;\n\t@property({ type: Number, attribute: true, reflect:true  }) completedStep: number = 0;\n\t@property({ type: String, attribute: true, reflect:true  }) size: 'sm' | 'md' | 'lg' = 'md';\n\t@property() icon: string = 'tick';\n\n\tprotected update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void{\n    super.update(changedProperties);\n\t\tif(changedProperties.has('currentStep') || changedProperties.has('completedStep')){\n\t\t\tthis.updateItems();\n\t\t}\n\t}\n\n\t@watch('currentStep')\n\thandleCurrentStepChanges() {\n\t\tthis.updateItems();\n\t\tthis.emit('nile-current-change', { value: this.currentStep });\n\t}\n\n\t@watch('completedStep')\n\thandleCompletedStepChanges() {\n\t\tthis.updateItems()\n\t\tthis.emit('nile-completed-change', { value: this.completedStep });\n\t}\n\t\n\tprivate updateItems() {\n\t\tconst items: any = [...this.querySelectorAll(this.isVertical ? 'nile-vertical-stepper-item' : 'nile-stepper-item')];\n\t\tif (!items.length) return;\n\t\tconst haveFlex = items.length < 3;\n\n\t\tconst current = (this.currentStep == 0 || this.currentStep > items.length) ? 1 : this.currentStep;\n\t\tconst calculatedCompleted = this.completedStep > items.length ? current : this.completedStep < current ? current : this.completedStep;\n\t\tconst completed = this.completedStep > items.length ? 0 : this.completedStep;\n\n\t\titems.forEach((el: any, index: number) => {\n\t\t\t// set item is complete and is current values\n\t\t\tif (index + 1 < current) {\n\t\t\t\tel.isComplete = true;\n\t\t\t\tel.isCurrent = false;\n\t\t\t}\n\t\t\telse if (index + 1 == current) {\n\t\t\t\tif (index + 1 <= calculatedCompleted) el.isComplete = true;\n\t\t\t\telse el.isComplete = false;\n\t\t\t\tel.isCurrent = true;\n\t\t\t}\n\t\t\telse {\n\t\t\t\tif (index + 1 <= calculatedCompleted) el.isComplete = true;\n\t\t\t\telse el.isComplete = false;\n\t\t\t\tel.isCurrent = false;\n\t\t\t}\n\n\t\t\t// Set isLast and isFirst\n\t\t\tif (index == 0) el.isFirst = true;\n\t\t\tif (index == items.length - 1) el.isLast = true;\n\n\t\t\t// setting default values\n\t\t\tel.currentStepValue = current;\n\t\t\tel.calculatedCompletedStepValue = calculatedCompleted;\n\t\t\tel.completedStepValue = completed;\n\n\t\t\tel.icon = this.icon;\n\t\t\tel.size = this.size;\n\t\t\tel.value = index + 1;\n\t\t\tel.contentBelow = this.contentBelow\n\t\t\tif (index == 0 || index == items.length - 1) {\n\t\t\t\tel.haveFlex = haveFlex;\n\t\t\t}\n\t\t})\n\t}\n\n\t/**\n\t * The styles for nile-stepper\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\treturn html`\n\t\t\t<div class=${classMap({\n\t\t\t\t'nile-stepper':true,\n\t\t\t\t'nile-stepper--horizontal':!this.isVertical,\n\t\t\t\t'nile-stepper--vertical':this.isVertical\n\t\t\t})}>\n\t\t\t\t<slot\n\t\t\t\t\t@slotchange=${this.updateItems}\n\t\t\t\t></slot>\n\t\t\t</div>\n\t\t\t`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileStepper;\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'nile-stepper': NileStepper;\n\t}\n}\n"]}

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

@@ -13,7 +13,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);
 	}
@@ -23,7 +23,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;
@@ -31,17 +31,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;
 	}
@@ -65,13 +65,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;
@@ -85,25 +96,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);
@@ -118,13 +139,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/dist/src/nile-stepper-item/nile-stepper-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-stepper-item.css.js","sourceRoot":"","sources":["../../../src/nile-stepper-item/nile-stepper-item.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiIxB,CAAC;AACF,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 * StepperItem CSS\n */\nexport const styles = css`\n\t:host {\n\t\t--stepper-flex-val:1;\n\t\t--bulletin--dot--seperation:30%;\n\t\t\n\t\tdisplay:inline-block;\n\t\tflex-grow:var(--stepper-flex-val);\n\t\tmin-width:var(--nile-stepper-min-width);\n\t}\n\t\n\t.stepper__item {\n\t\tmargin: 0 -1px;\n\t}\n\n\t.stepper__item--sm {\n\t\t--item-spacing: var(--nile-spacing-spacing-lg,12px);\n\t\t--stepper-item-title-size:14px;\n\t\t--stepper-item-subtitle-size:14px;\n\t\t--stepper-item-text-line-height:20px;\n\t\t--circle-height:16px;\n\t}\n\n\t.stepper__item--md {\n\t\t--item-spacing: var(--nile-spacing-spacing-xl, 16px);\n\t\t--stepper-item-title-size:16px;\n\t\t--stepper-item-subtitle-size:16px;\n\t\t--stepper-item-text-line-heightt:24px;\n\t\t--circle-height:20px;\n\t}\n\n\t.stepper__item--lg {\n\t\t--item-spacing: var(--nile-spacing-spacing-xl, 16px);\n\t\t--stepper-item-title-size:16px;\n\t\t--stepper-item-subtitle-size:16px;\n\t\t--stepper-item-text-line-height:24px;\n\t\t--circle-height:28px;\n\t}\n\n\t.stepper__line__content {\n\t\tdisplay:flex;\n\t\twidth:100%;\n\t\talign-items:center;\n\t}\n\n\t.stepper__line__container {\n\t\tflex-grow:1;\n\t\tpadding:0 1px;\n\t}\n\n\t.stepper__line--hastitle {\n\t\tdisplay:flex;\n\t\talign-items:center;\n\t}\n\n\t.stepper__line {\n\t\tdisplay: block;\n\t\tborder: 0;\n\t\tborder-top: 2px solid var(--nile-colors-gray-light-mode-200);\n\t}\n\n\t.stepper__line--active {\n\t\tborder-top: 2px solid var(--nile-colors-primary-600);\n\t}\n\n\t.stepper__item__content--below {\n\t\tmargin-top: var(--item-spacing);\n\t\tdisplay:flex;\n\t\tflex-direction:column;\n\t\talign-items:center;\n\t}\n\t\n\t.stepper__item__bulletin {\n\t\tdisplay:grid;\n\t\tplace-content:center;\n\t\tmargin:0 -1px;\n\t}\n\n\t.stepper__content__title {\n\t\tcolor:var(--nile-colors-gray-light-mode-700);\n\t\tfont-size: var(--stepper-item-title-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family: var(--nile-font-family-medium);\n\t\tfont-weight: 600;\n\t}\n\n\t.stepper__content__title--inline{\n\t\tpadding: 0 8px;\n\t\tcolor:var(--nile-colors-gray-light-mode-500);\n\t}\n\n\t.stepper__content__title--active{\n\t\tcolor:var(--nile-colors-primary-700);\n\t}\n\n\t.stepper__content__subtitle {\n\t\tcolor:var(--nile-colors-gray-light-mode-600);\n\t\tfont-size: var(--stepper-item-subtitle-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family: var(--nile-font-family-sans-serif);\n\t\tfont-weight: 400;\n\t}\n\n\t.stepper__content__subtitle--active{\n\t\tcolor:var(--nile-colors-primary-600);\n\t}\n\n\t.stepper__bulletin--dot {\n\t\twidth: var(--circle-height);\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: 50%;\n\t\tbackground: radial-gradient(var(--nile-colors-gray-light-mode-300) var(--bulletin--dot--seperation), var(--nile-colors-gray-neutral-50) var(--bulletin--dot--seperation));\n\t\tborder: 2px solid var(--nile-colors-gray-light-mode-200);\n\t}\n\n\t.stepper__bulletin__dot--active{\n\t\tbackground: radial-gradient(var(--nile-colors-white-base) var(--bulletin--dot--seperation), var(--nile-colors-primary-600) var(--bulletin--dot--seperation));\n\t\tborder: 2px solid var(--nile-colors-primary-400);\n\t}\n\n\t.stepper__bulletin--icon {\n\t\tdisplay:grid;\n\t\tplace-content:center;\n\t\twidth: var(--circle-height);\n\t\tborder: 2px solid var(--nile-colors-primary-600);\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: 50%;\n\t\tbackground-color:var(--nile-colors-primary-600);\n\t\toverflow:hidden;\n\t}\n`;\nexport default [styles];"]}
+{"version":3,"file":"nile-stepper-item.css.js","sourceRoot":"","sources":["../../../src/nile-stepper-item/nile-stepper-item.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsJxB,CAAC;AACF,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 * StepperItem CSS\n */\nexport const styles = css`\n\t:host {\n\t\t--stepper-flex-val:1;\n\t\t--bulletin--dot--seperation:30%;\n\t\t\n\t\tdisplay: inline-block;\n\t\tflex-grow:var(--stepper-flex-val);\n\t\tmin-width:var(--nile-stepper-min-width);\n\t}\n\t\n\t.stepper__item {\n\t\tmargin: 0 -1px;\n\t}\n\n\t.stepper__item--sm {\n\t\t--item-spacing: var(--nile-spacing-spacing-md);\n\t\t--stepper-item-title-size:14px;\n\t\t--stepper-item-subtitle-size:14px;\n\t\t--stepper-item-text-line-height:20px;\n\t\t--circle-height:16px;\n\t}\n\n\t.stepper__item--md {\n\t\t--item-spacing: var(--nile-spacing-spacing-md);\n\t\t--stepper-item-title-size:16px;\n\t\t--stepper-item-subtitle-size:14px;\n\t\t--stepper-item-text-line-height:24px;\n\t\t--circle-height:20px;\n\t}\n\n\t.stepper__item--lg {\n\t\t--item-spacing: var(--nile-spacing-spacing-lg);\n\t\t--stepper-item-title-size:16px;\n\t\t--stepper-item-subtitle-size:14px;\n\t\t--stepper-item-text-line-height:24px;\n\t\t--circle-height:28px;\n\t}\n\n\t.stepper__line__content {\n\t\tdisplay:flex;\n\t\twidth:100%;\n\t\talign-items:center;\n\t}\n\n\t.stepper__line__container {\n\t\tflex-grow:1;\n\t\tpadding:0 1px;\n\t}\n\n\t.stepper__line--hastitle {\n\t\tdisplay:flex;\n\t\talign-items:center;\n\t}\n\n\t.stepper__line {\n\t\tdisplay: block;\n\t\tborder: 0;\n\t\tborder-top: 2px solid var(--nile-colors-neutral-500);\n\t}\n\n\t.stepper__line--active {\n\t\tborder-top: 2px solid var(--nile-colors-primary-600);\n\t}\n\n\t.stepper__item__content--above{\n\t\tposition:relative;\n\t\tpadding: 0 var(--nile-spacing-spacing-md);\n\t}\n\n\t.stepper__item__content--above .stepper__content__subtitle{\n\t\tposition: absolute;\n    top: 100%;\n    white-space: nowrap;\n\t}\n\n\t.stepper__item__content--below {\n\t\tmargin-top: var(--item-spacing);\n\t\tdisplay:flex;\n\t\tflex-direction:column;\n\t\talign-items:center;\n\t}\n\t\n\t.stepper__item__bulletin {\n\t\tdisplay:grid;\n\t\tplace-content:center;\n\t\tmargin:0 -1px;\n\t}\n\n\t.stepper__item__bulletin{\n\t\tmargin-left: 6px;\n\t\tmargin-right: 6px;\n\t}\n\n\t.stepper__item__bulletin--inline{\n\t\tmargin-right: 0px;\n\t}\n\n\t.stepper__content__title {\n\t\tcolor:var(--nile-colors-dark-900);\n\t\tfont-size: var(--stepper-item-title-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family: var(--nile-font-family-medium);\n\t\tfont-weight: 400;\n\t}\n\n\t.stepper__content__title--inline{\n\t\tpadding: 0 8px;\n\t\tcolor:var(--nile-colors-dark-900);\n\t}\n\n\t.stepper__content__title--active{\n\t\tcolor:var(--nile-colors-primary-600);\n\t\tfont-weight: 600;\n\t}\n\n\t.stepper__content__subtitle {\n\t\tcolor:var(--nile-colors-dark-500);\n\t\tfont-size: var(--stepper-item-subtitle-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family: var(--nile-font-family-sans-serif);\n\t\tfont-weight: 400;\n\t}\n\n\t.stepper__content__subtitle--active{\n\t\tcolor:var(--nile-colors-primary-600);\n\t}\n\n\t.stepper__bulletin--dot {\n\t\twidth: var(--circle-height);\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: 50%;\n\t\tbackground: radial-gradient(var(--nile-colors-neutral-500) var(--bulletin--dot--seperation), var(--nile-colors-dark-200) var(--bulletin--dot--seperation));\n\t\tborder: 2px solid var(--nile-colors-neutral-500);\n\t}\n\n\t.stepper__bulletin__dot--active{\n\t\tbackground: radial-gradient(var(--nile-colors-white-base) var(--bulletin--dot--seperation), var(--nile-colors-primary-600) var(--bulletin--dot--seperation));\n\t\tborder: 2px solid var(--nile-colors-primary-500);\n\t}\n\n\t.stepper__bulletin--icon {\n\t\tdisplay:grid;\n\t\tplace-content:center;\n\t\twidth: var(--circle-height);\n\t\tborder: 2px solid var(--nile-colors-primary-600);\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: 50%;\n\t\tbackground-color:var(--nile-colors-primary-600);\n\t\toverflow:hidden;\n\t}\n`;\nexport default [styles];"]}

package/dist/src/nile-stepper-item/nile-stepper-item.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, PropertyValues } from 'lit';
 import NileElement from '../internal/nile-element';
 /**
  * Nile stepper-item component.
@@ -13,6 +13,8 @@ import NileElement from '../internal/nile-element';
  *
  */
 export declare class NileStepperItem extends NileElement {
+    absoluteTitle: HTMLDivElement;
+    absoluteSubtitle: HTMLDivElement;
     title: string;
     subtitle: string;
     private contentBelow;
@@ -32,11 +34,13 @@ export declare class NileStepperItem extends NileElement {
      * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
      */
     static get styles(): CSSResultArray;
+    protected updated(_changedProperties: PropertyValues): void;
     /**
      * Render method
      * @slot This is a slot test
      */
     render(): TemplateResult;
+    getSvg(): TemplateResult;
 }
 export default NileStepperItem;
 declare global {