@paperless/core 1.67.4 → 1.67.6

package/dist/types/components/molecules/stepper/stepper.component.d.ts

@@ -3,6 +3,10 @@ export declare class Stepper {
    * The currently active step
    */
   activeStep: number;
+  /**
+   * Wether to automatically apply active & finished to items
+   */
+  enableAutoStatus: boolean;
   /**
    * The direction of the stepper
    */
@@ -16,11 +20,14 @@ export declare class Stepper {
    */
   private _el;
   private _rendering;
-  private _loaded;
-  private _delay;
+  private _generateTimeout;
+  private _resizeObserver;
   private _onSlotChange;
+  private _generateStepsOnce;
   private _generateSteps;
+  private _setStepperLineData;
   componentDidLoad(): void;
+  disconnectCallback(): void;
   render(): any;
   protected _onActiveStepChange(): void;
 }

package/dist/types/components.d.ts

@@ -1177,6 +1177,10 @@ export namespace Components {
           * The direction of the stepper
          */
         "direction": 'horizontal' | 'vertical';
+        /**
+          * Wether to automatically apply active & finished to items
+         */
+        "enableAutoStatus": boolean;
     }
     interface PStepperItem {
         /**
@@ -3495,6 +3499,10 @@ declare namespace LocalJSX {
           * The direction of the stepper
          */
         "direction"?: 'horizontal' | 'vertical';
+        /**
+          * Wether to automatically apply active & finished to items
+         */
+        "enableAutoStatus"?: boolean;
     }
     interface PStepperItem {
         /**

package/hydrate/index.js

@@ -21796,12 +21796,19 @@ const stepperComponentCss = "/*!@.flex*/.flex.sc-p-stepper{display:flex!importan
 class Stepper {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this._loaded = false;
-    // private _steps: Array<HTMLPStepperItemElement>;
-    this._delay = (amount) => new Promise(resolve => setTimeout(resolve, amount));
-    this._onSlotChange = async (_e) => this._generateSteps();
-    this._generateSteps = async (firstLoad = false) => {
-      if (!firstLoad && (!this._el || this._rendering || !this._loaded)) {
+    this._onSlotChange = async (_e) => this._generateStepsOnce();
+    this._generateStepsOnce = () => {
+      if (this._rendering) {
+        return;
+      }
+      if (this._generateTimeout) {
+        clearTimeout(this._generateTimeout);
+        this._generateTimeout = null;
+      }
+      this._generateTimeout = setTimeout(() => this._generateSteps());
+    };
+    this._generateSteps = async () => {
+      if (!this._el || this._rendering) {
         return;
       }
       this._rendering = true;
@@ -21818,48 +21825,51 @@ class Stepper {
           }
         }
       }
+      let directionChanged = false;
       for (let i = 0; i < (items === null || items === void 0 ? void 0 : items.length); i++) {
-        let directionChanged = false;
         const item = items.item(i);
-        item.active = i === activeStep;
-        item.finished = i < activeStep;
-        if (item.direction !== this.direction) {
+        if (this.enableAutoStatus) {
+          item.active = i === activeStep;
+          item.finished = i < activeStep;
+        }
+        if (item.direction !== this.direction && !directionChanged) {
           directionChanged = true;
         }
         item.direction = this.direction;
         item.align =
           i === 0 ? 'start' : i === (items === null || items === void 0 ? void 0 : items.length) - 1 ? 'end' : 'center';
         item.contentPosition = this.contentPosition;
+      }
+      if (directionChanged) {
+        // super hacky way to ensure all elements that have a direction changed are re-rendered
+        await new Promise(resolve => setTimeout(resolve, 200));
+      }
+      for (let i = 0; i < (items === null || items === void 0 ? void 0 : items.length); i++) {
+        const item = items.item(i);
         if (i < items.length - 1) {
-          const nextItem = item.nextElementSibling;
+          let nextItem = item.nextElementSibling;
           if (nextItem && nextItem.tagName.toLowerCase() === 'p-stepper-item') {
-            // super hacky, but we want to wait for the css of the `item.direction` change to be applied before querying for the item.clientHeight
-            // otherwise we always get the initial "16"
-            if (directionChanged) {
-              await this._delay(10);
-            }
-            const heightDiff = (item.clientHeight > 16
-              ? item.clientHeight - 16
-              : item.clientHeight) / 2;
             const stepperLine = document.createElement('p-stepper-line');
-            stepperLine.direction = this.direction;
-            stepperLine.active = i < activeStep;
-            if (heightDiff > 0 && this.direction === 'vertical') {
-              stepperLine.style.marginTop = `-${heightDiff / 16}rem`;
-              stepperLine.style.marginBottom = `-${heightDiff / 16}rem`;
-              stepperLine.style.minHeight = `calc(1rem + ${(heightDiff * 2) / 16}rem)`;
-            }
             this._el.insertBefore(stepperLine, nextItem);
+            this._setStepperLineData(stepperLine, item, nextItem, i, activeStep);
             const previous = stepperLine.previousElementSibling;
             if (previous && previous.tagName.toLowerCase() === 'p-stepper-line') {
               previous.remove();
             }
             continue;
           }
+          if (nextItem && nextItem.tagName.toLowerCase() === 'p-stepper-line') {
+            const stepperLine = nextItem;
+            nextItem = nextItem.nextElementSibling;
+            if (nextItem && nextItem.tagName.toLowerCase() === 'p-stepper-item') {
+              this._setStepperLineData(stepperLine, item, nextItem, i, activeStep);
+            }
+          }
         }
         if (i > 0) {
           const previousItem = item.previousElementSibling;
-          if (previousItem.tagName.toLowerCase() === 'p-stepper-line') {
+          if (previousItem &&
+            previousItem.tagName.toLowerCase() === 'p-stepper-line') {
             previousItem.direction = this.direction;
             previousItem.active = item.active || item.finished;
           }
@@ -21872,20 +21882,37 @@ class Stepper {
       }
       setTimeout(() => (this._rendering = false), 100);
     };
+    this._setStepperLineData = (stepperLine, item, nextItem, i, activeStep) => {
+      const heightDiff = item.clientHeight / 2;
+      const heightDiffNext = nextItem.clientHeight / 2;
+      stepperLine.direction = this.direction;
+      stepperLine.active = i < activeStep;
+      if (heightDiff > 0 && this.direction === 'vertical') {
+        stepperLine.style.marginTop = `-${heightDiff / 16}rem`;
+        stepperLine.style.marginBottom = `-${heightDiffNext / 16}rem`;
+        stepperLine.style.minHeight = `calc(1rem + ${(heightDiff + heightDiffNext) / 16}rem)`;
+      }
+    };
     this.activeStep = 1;
+    this.enableAutoStatus = true;
     this.direction = 'horizontal';
     this.contentPosition = 'end';
     this._rendering = false;
   }
   componentDidLoad() {
-    this._loaded = true;
-    this._generateSteps(true);
+    this._resizeObserver = new ResizeObserver(() => this._generateStepsOnce());
+    this._resizeObserver.observe(this._el);
+  }
+  disconnectCallback() {
+    if (this._resizeObserver) {
+      this._resizeObserver.disconnect();
+    }
   }
   render() {
     return (hAsync(Host, { class: 'p-stepper' }, hAsync("slot", { onSlotchange: this._onSlotChange })));
   }
   _onActiveStepChange() {
-    this._generateSteps();
+    this._generateStepsOnce();
   }
   get _el() { return getElement(this); }
   static get watchers() { return {
@@ -21897,6 +21924,7 @@ class Stepper {
     "$tagName$": "p-stepper",
     "$members$": {
       "activeStep": [2, "active-step"],
+      "enableAutoStatus": [4, "enable-auto-status"],
       "direction": [513],
       "contentPosition": [513, "content-position"],
       "_rendering": [32]

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@paperless/core",
-	"version": "1.67.4",
+	"version": "1.67.6",
 	"description": "Stencil Component Starter",
 	"main": "dist/index.cjs.js",
 	"module": "dist/index.js",

package/dist/build/p-9c1e350b.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as i,H as e,g as s}from"./p-0c2cc6c4.js";const o=".flex{display:flex!important}.h-auto{height:auto!important}.w-full{width:100%!important}.flex-col{flex-direction:column!important}.flex-wrap{flex-wrap:wrap!important}*{box-sizing:border-box}:host{display:flex}:host([direction=horizontal]){align-items:flex-end;height:auto}:host([direction=vertical]){align-items:flex-start;flex-direction:column;flex-wrap:wrap;min-height:100%;width:100%}:host([direction=vertical][content-position=start]){align-items:flex-end}.static{position:static!important}";const n=class{constructor(i){t(this,i);this._loaded=false;this._delay=t=>new Promise((i=>setTimeout(i,t)));this._onSlotChange=async t=>this._generateSteps();this._generateSteps=async(t=false)=>{if(!t&&(!this._el||this._rendering||!this._loaded)){return}this._rendering=true;let i=this.activeStep-1||0;const e=this._el.querySelectorAll("p-stepper-item");if(!this.activeStep||i<0){for(let t=0;t<(e===null||e===void 0?void 0:e.length);t++){const s=e.item(t);if(s.active){i=t}if(i<0&&s.finished){i=t+1}}}for(let t=0;t<(e===null||e===void 0?void 0:e.length);t++){let s=false;const o=e.item(t);o.active=t===i;o.finished=t<i;if(o.direction!==this.direction){s=true}o.direction=this.direction;o.align=t===0?"start":t===(e===null||e===void 0?void 0:e.length)-1?"end":"center";o.contentPosition=this.contentPosition;if(t<e.length-1){const e=o.nextElementSibling;if(e&&e.tagName.toLowerCase()==="p-stepper-item"){if(s){await this._delay(10)}const n=(o.clientHeight>16?o.clientHeight-16:o.clientHeight)/2;const r=document.createElement("p-stepper-line");r.direction=this.direction;r.active=t<i;if(n>0&&this.direction==="vertical"){r.style.marginTop=`-${n/16}rem`;r.style.marginBottom=`-${n/16}rem`;r.style.minHeight=`calc(1rem + ${n*2/16}rem)`}this._el.insertBefore(r,e);const l=r.previousElementSibling;if(l&&l.tagName.toLowerCase()==="p-stepper-line"){l.remove()}continue}}if(t>0){const t=o.previousElementSibling;if(t.tagName.toLowerCase()==="p-stepper-line"){t.direction=this.direction;t.active=o.active||o.finished}}}const s=this._el.querySelectorAll("p-stepper-line:not(:has(+ p-stepper-item)), p-stepper-line:first-child");for(let t=s.length-1;t>=0;t--){const i=s.item(t);i.remove()}setTimeout((()=>this._rendering=false),100)};this.activeStep=1;this.direction="horizontal";this.contentPosition="end";this._rendering=false}componentDidLoad(){this._loaded=true;this._generateSteps(true)}render(){return i(e,{class:"p-stepper"},i("slot",{onSlotchange:this._onSlotChange}))}_onActiveStepChange(){this._generateSteps()}get _el(){return s(this)}static get watchers(){return{activeStep:["_onActiveStepChange"]}}};n.style=o;export{n as p_stepper};
-//# sourceMappingURL=p-9c1e350b.entry.js.map

package/dist/build/p-9c1e350b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stepperComponentCss","Stepper","this","_loaded","_delay","amount","Promise","resolve","setTimeout","_onSlotChange","async","_e","_generateSteps","firstLoad","_el","_rendering","activeStep","items","querySelectorAll","i","length","item","active","finished","directionChanged","direction","align","contentPosition","nextItem","nextElementSibling","tagName","toLowerCase","heightDiff","clientHeight","stepperLine","document","createElement","style","marginTop","marginBottom","minHeight","insertBefore","previous","previousElementSibling","remove","previousItem","lines","j","line","componentDidLoad","render","h","Host","class","onSlotchange","_onActiveStepChange"],"sources":["src/components/molecules/stepper/stepper.component.scss?tag=p-stepper&encapsulation=shadow","src/components/molecules/stepper/stepper.component.tsx"],"sourcesContent":[":host {\n\t@apply flex;\n}\n\n:host([direction='horizontal']) {\n\t@apply h-auto items-end;\n}\n\n:host([direction='vertical']) {\n\t@apply flex-col flex-wrap items-start;\n\t@apply w-full min-h-full;\n}\n\n:host([direction='vertical'][content-position='start']) {\n\t@apply items-end;\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n\ttag: 'p-stepper',\n\tstyleUrl: 'stepper.component.scss',\n\tshadow: true,\n})\nexport class Stepper {\n\t/**\n\t * The currently active step\n\t */\n\t@Prop() activeStep: number = 1;\n\n\t/**\n\t * The direction of the stepper\n\t */\n\t@Prop({ reflect: true }) direction: 'horizontal' | 'vertical' = 'horizontal';\n\n\t/**\n\t * The position of the content in case of vertical direction\n\t */\n\t@Prop({ reflect: true }) contentPosition: 'start' | 'end' = 'end';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t@State() private _rendering = false;\n\n\tprivate _loaded = false;\n\n\t// private _steps: Array<HTMLPStepperItemElement>;\n\n\tprivate _delay = (amount: number) =>\n\t\tnew Promise(resolve => setTimeout(resolve, amount));\n\n\tprivate _onSlotChange = async (_e: Event) => this._generateSteps();\n\n\tprivate _generateSteps = async (firstLoad = false) => {\n\t\tif (!firstLoad && (!this._el || this._rendering || !this._loaded)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._rendering = true;\n\n\t\tlet activeStep = this.activeStep - 1 || 0;\n\t\tconst items = this._el.querySelectorAll('p-stepper-item');\n\n\t\tif (!this.activeStep || activeStep < 0) {\n\t\t\tfor (let i = 0; i < items?.length; i++) {\n\t\t\t\tconst item = items.item(i) as any;\n\n\t\t\t\tif (item.active) {\n\t\t\t\t\tactiveStep = i;\n\t\t\t\t}\n\n\t\t\t\tif (activeStep < 0 && item.finished) {\n\t\t\t\t\tactiveStep = i + 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tfor (let i = 0; i < items?.length; i++) {\n\t\t\tlet directionChanged = false;\n\t\t\tconst item = items.item(i) as any;\n\n\t\t\titem.active = i === activeStep;\n\t\t\titem.finished = i < activeStep;\n\n\t\t\tif (item.direction !== this.direction) {\n\t\t\t\tdirectionChanged = true;\n\t\t\t}\n\n\t\t\titem.direction = this.direction;\n\t\t\titem.align =\n\t\t\t\ti === 0 ? 'start' : i === items?.length - 1 ? 'end' : 'center';\n\t\t\titem.contentPosition = this.contentPosition;\n\n\t\t\tif (i < items.length - 1) {\n\t\t\t\tconst nextItem = item.nextElementSibling;\n\n\t\t\t\tif (nextItem && nextItem.tagName.toLowerCase() === 'p-stepper-item') {\n\t\t\t\t\t// super hacky, but we want to wait for the css of the `item.direction` change to be applied before querying for the item.clientHeight\n\t\t\t\t\t// otherwise we always get the initial \"16\"\n\t\t\t\t\tif (directionChanged) {\n\t\t\t\t\t\tawait this._delay(10);\n\t\t\t\t\t}\n\n\t\t\t\t\tconst heightDiff =\n\t\t\t\t\t\t(item.clientHeight > 16\n\t\t\t\t\t\t\t? item.clientHeight - 16\n\t\t\t\t\t\t\t: item.clientHeight) / 2;\n\n\t\t\t\t\tconst stepperLine = document.createElement('p-stepper-line');\n\n\t\t\t\t\tstepperLine.direction = this.direction;\n\t\t\t\t\tstepperLine.active = i < activeStep;\n\n\t\t\t\t\tif (heightDiff > 0 && this.direction === 'vertical') {\n\t\t\t\t\t\tstepperLine.style.marginTop = `-${heightDiff / 16}rem`;\n\t\t\t\t\t\tstepperLine.style.marginBottom = `-${heightDiff / 16}rem`;\n\t\t\t\t\t\tstepperLine.style.minHeight = `calc(1rem + ${\n\t\t\t\t\t\t\t(heightDiff * 2) / 16\n\t\t\t\t\t\t}rem)`;\n\t\t\t\t\t}\n\n\t\t\t\t\tthis._el.insertBefore(stepperLine, nextItem);\n\n\t\t\t\t\tconst previous = stepperLine.previousElementSibling;\n\t\t\t\t\tif (previous && previous.tagName.toLowerCase() === 'p-stepper-line') {\n\t\t\t\t\t\tprevious.remove();\n\t\t\t\t\t}\n\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (i > 0) {\n\t\t\t\tconst previousItem = item.previousElementSibling;\n\t\t\t\tif (previousItem.tagName.toLowerCase() === 'p-stepper-line') {\n\t\t\t\t\tpreviousItem.direction = this.direction;\n\t\t\t\t\tpreviousItem.active = item.active || item.finished;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tconst lines = this._el.querySelectorAll(\n\t\t\t'p-stepper-line:not(:has(+ p-stepper-item)), p-stepper-line:first-child'\n\t\t);\n\t\tfor (let j = lines.length - 1; j >= 0; j--) {\n\t\t\tconst line = lines.item(j);\n\t\t\tline.remove();\n\t\t}\n\n\t\tsetTimeout(() => (this._rendering = false), 100);\n\t};\n\n\tcomponentDidLoad() {\n\t\tthis._loaded = true;\n\t\tthis._generateSteps(true);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-stepper'>\n\t\t\t\t<slot onSlotchange={this._onSlotChange} />\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Watch('activeStep')\n\tprotected _onActiveStepChange() {\n\t\tthis._generateSteps();\n\t}\n}\n"],"mappings":"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"}

package/dist/paperless/p-9c1e350b.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as i,H as e,g as s}from"./p-0c2cc6c4.js";const o=".flex{display:flex!important}.h-auto{height:auto!important}.w-full{width:100%!important}.flex-col{flex-direction:column!important}.flex-wrap{flex-wrap:wrap!important}*{box-sizing:border-box}:host{display:flex}:host([direction=horizontal]){align-items:flex-end;height:auto}:host([direction=vertical]){align-items:flex-start;flex-direction:column;flex-wrap:wrap;min-height:100%;width:100%}:host([direction=vertical][content-position=start]){align-items:flex-end}.static{position:static!important}";const n=class{constructor(i){t(this,i);this._loaded=false;this._delay=t=>new Promise((i=>setTimeout(i,t)));this._onSlotChange=async t=>this._generateSteps();this._generateSteps=async(t=false)=>{if(!t&&(!this._el||this._rendering||!this._loaded)){return}this._rendering=true;let i=this.activeStep-1||0;const e=this._el.querySelectorAll("p-stepper-item");if(!this.activeStep||i<0){for(let t=0;t<(e===null||e===void 0?void 0:e.length);t++){const s=e.item(t);if(s.active){i=t}if(i<0&&s.finished){i=t+1}}}for(let t=0;t<(e===null||e===void 0?void 0:e.length);t++){let s=false;const o=e.item(t);o.active=t===i;o.finished=t<i;if(o.direction!==this.direction){s=true}o.direction=this.direction;o.align=t===0?"start":t===(e===null||e===void 0?void 0:e.length)-1?"end":"center";o.contentPosition=this.contentPosition;if(t<e.length-1){const e=o.nextElementSibling;if(e&&e.tagName.toLowerCase()==="p-stepper-item"){if(s){await this._delay(10)}const n=(o.clientHeight>16?o.clientHeight-16:o.clientHeight)/2;const r=document.createElement("p-stepper-line");r.direction=this.direction;r.active=t<i;if(n>0&&this.direction==="vertical"){r.style.marginTop=`-${n/16}rem`;r.style.marginBottom=`-${n/16}rem`;r.style.minHeight=`calc(1rem + ${n*2/16}rem)`}this._el.insertBefore(r,e);const l=r.previousElementSibling;if(l&&l.tagName.toLowerCase()==="p-stepper-line"){l.remove()}continue}}if(t>0){const t=o.previousElementSibling;if(t.tagName.toLowerCase()==="p-stepper-line"){t.direction=this.direction;t.active=o.active||o.finished}}}const s=this._el.querySelectorAll("p-stepper-line:not(:has(+ p-stepper-item)), p-stepper-line:first-child");for(let t=s.length-1;t>=0;t--){const i=s.item(t);i.remove()}setTimeout((()=>this._rendering=false),100)};this.activeStep=1;this.direction="horizontal";this.contentPosition="end";this._rendering=false}componentDidLoad(){this._loaded=true;this._generateSteps(true)}render(){return i(e,{class:"p-stepper"},i("slot",{onSlotchange:this._onSlotChange}))}_onActiveStepChange(){this._generateSteps()}get _el(){return s(this)}static get watchers(){return{activeStep:["_onActiveStepChange"]}}};n.style=o;export{n as p_stepper};
-//# sourceMappingURL=p-9c1e350b.entry.js.map

package/dist/paperless/p-9c1e350b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stepperComponentCss","Stepper","this","_loaded","_delay","amount","Promise","resolve","setTimeout","_onSlotChange","async","_e","_generateSteps","firstLoad","_el","_rendering","activeStep","items","querySelectorAll","i","length","item","active","finished","directionChanged","direction","align","contentPosition","nextItem","nextElementSibling","tagName","toLowerCase","heightDiff","clientHeight","stepperLine","document","createElement","style","marginTop","marginBottom","minHeight","insertBefore","previous","previousElementSibling","remove","previousItem","lines","j","line","componentDidLoad","render","h","Host","class","onSlotchange","_onActiveStepChange"],"sources":["src/components/molecules/stepper/stepper.component.scss?tag=p-stepper&encapsulation=shadow","src/components/molecules/stepper/stepper.component.tsx"],"sourcesContent":[":host {\n\t@apply flex;\n}\n\n:host([direction='horizontal']) {\n\t@apply h-auto items-end;\n}\n\n:host([direction='vertical']) {\n\t@apply flex-col flex-wrap items-start;\n\t@apply w-full min-h-full;\n}\n\n:host([direction='vertical'][content-position='start']) {\n\t@apply items-end;\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n\ttag: 'p-stepper',\n\tstyleUrl: 'stepper.component.scss',\n\tshadow: true,\n})\nexport class Stepper {\n\t/**\n\t * The currently active step\n\t */\n\t@Prop() activeStep: number = 1;\n\n\t/**\n\t * The direction of the stepper\n\t */\n\t@Prop({ reflect: true }) direction: 'horizontal' | 'vertical' = 'horizontal';\n\n\t/**\n\t * The position of the content in case of vertical direction\n\t */\n\t@Prop({ reflect: true }) contentPosition: 'start' | 'end' = 'end';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t@State() private _rendering = false;\n\n\tprivate _loaded = false;\n\n\t// private _steps: Array<HTMLPStepperItemElement>;\n\n\tprivate _delay = (amount: number) =>\n\t\tnew Promise(resolve => setTimeout(resolve, amount));\n\n\tprivate _onSlotChange = async (_e: Event) => this._generateSteps();\n\n\tprivate _generateSteps = async (firstLoad = false) => {\n\t\tif (!firstLoad && (!this._el || this._rendering || !this._loaded)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._rendering = true;\n\n\t\tlet activeStep = this.activeStep - 1 || 0;\n\t\tconst items = this._el.querySelectorAll('p-stepper-item');\n\n\t\tif (!this.activeStep || activeStep < 0) {\n\t\t\tfor (let i = 0; i < items?.length; i++) {\n\t\t\t\tconst item = items.item(i) as any;\n\n\t\t\t\tif (item.active) {\n\t\t\t\t\tactiveStep = i;\n\t\t\t\t}\n\n\t\t\t\tif (activeStep < 0 && item.finished) {\n\t\t\t\t\tactiveStep = i + 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tfor (let i = 0; i < items?.length; i++) {\n\t\t\tlet directionChanged = false;\n\t\t\tconst item = items.item(i) as any;\n\n\t\t\titem.active = i === activeStep;\n\t\t\titem.finished = i < activeStep;\n\n\t\t\tif (item.direction !== this.direction) {\n\t\t\t\tdirectionChanged = true;\n\t\t\t}\n\n\t\t\titem.direction = this.direction;\n\t\t\titem.align =\n\t\t\t\ti === 0 ? 'start' : i === items?.length - 1 ? 'end' : 'center';\n\t\t\titem.contentPosition = this.contentPosition;\n\n\t\t\tif (i < items.length - 1) {\n\t\t\t\tconst nextItem = item.nextElementSibling;\n\n\t\t\t\tif (nextItem && nextItem.tagName.toLowerCase() === 'p-stepper-item') {\n\t\t\t\t\t// super hacky, but we want to wait for the css of the `item.direction` change to be applied before querying for the item.clientHeight\n\t\t\t\t\t// otherwise we always get the initial \"16\"\n\t\t\t\t\tif (directionChanged) {\n\t\t\t\t\t\tawait this._delay(10);\n\t\t\t\t\t}\n\n\t\t\t\t\tconst heightDiff =\n\t\t\t\t\t\t(item.clientHeight > 16\n\t\t\t\t\t\t\t? item.clientHeight - 16\n\t\t\t\t\t\t\t: item.clientHeight) / 2;\n\n\t\t\t\t\tconst stepperLine = document.createElement('p-stepper-line');\n\n\t\t\t\t\tstepperLine.direction = this.direction;\n\t\t\t\t\tstepperLine.active = i < activeStep;\n\n\t\t\t\t\tif (heightDiff > 0 && this.direction === 'vertical') {\n\t\t\t\t\t\tstepperLine.style.marginTop = `-${heightDiff / 16}rem`;\n\t\t\t\t\t\tstepperLine.style.marginBottom = `-${heightDiff / 16}rem`;\n\t\t\t\t\t\tstepperLine.style.minHeight = `calc(1rem + ${\n\t\t\t\t\t\t\t(heightDiff * 2) / 16\n\t\t\t\t\t\t}rem)`;\n\t\t\t\t\t}\n\n\t\t\t\t\tthis._el.insertBefore(stepperLine, nextItem);\n\n\t\t\t\t\tconst previous = stepperLine.previousElementSibling;\n\t\t\t\t\tif (previous && previous.tagName.toLowerCase() === 'p-stepper-line') {\n\t\t\t\t\t\tprevious.remove();\n\t\t\t\t\t}\n\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (i > 0) {\n\t\t\t\tconst previousItem = item.previousElementSibling;\n\t\t\t\tif (previousItem.tagName.toLowerCase() === 'p-stepper-line') {\n\t\t\t\t\tpreviousItem.direction = this.direction;\n\t\t\t\t\tpreviousItem.active = item.active || item.finished;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tconst lines = this._el.querySelectorAll(\n\t\t\t'p-stepper-line:not(:has(+ p-stepper-item)), p-stepper-line:first-child'\n\t\t);\n\t\tfor (let j = lines.length - 1; j >= 0; j--) {\n\t\t\tconst line = lines.item(j);\n\t\t\tline.remove();\n\t\t}\n\n\t\tsetTimeout(() => (this._rendering = false), 100);\n\t};\n\n\tcomponentDidLoad() {\n\t\tthis._loaded = true;\n\t\tthis._generateSteps(true);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-stepper'>\n\t\t\t\t<slot onSlotchange={this._onSlotChange} />\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Watch('activeStep')\n\tprotected _onActiveStepChange() {\n\t\tthis._generateSteps();\n\t}\n}\n"],"mappings":"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"}