@paperless/core 2.0.1-beta.27 → 2.0.1-beta.29

package/hydrate/index.js

@@ -3783,6 +3783,33 @@ function startOfMonth(dirtyDate) {
   return date;
 }
 
+/**
+ * @name startOfYear
+ * @category Year Helpers
+ * @summary Return the start of a year for the given date.
+ *
+ * @description
+ * Return the start of a year for the given date.
+ * The result will be in the local timezone.
+ *
+ * @param {Date|Number} date - the original date
+ * @returns {Date} the start of a year
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // The start of a year for 2 September 2014 11:55:00:
+ * const result = startOfYear(new Date(2014, 8, 2, 11, 55, 00))
+ * //=> Wed Jan 01 2014 00:00:00
+ */
+function startOfYear(dirtyDate) {
+  requiredArgs(1, arguments);
+  var cleanDate = toDate(dirtyDate);
+  var date = new Date(0);
+  date.setFullYear(cleanDate.getFullYear(), 0, 1);
+  date.setHours(0, 0, 0, 0);
+  return date;
+}
+
 /**
  * @name subMilliseconds
  * @category Millisecond Helpers
@@ -11653,15 +11680,11 @@ const calendar$2 = cva(['p-calendar bg-white w-[17.5rem] flex flex-col gap-4'],
         },
     },
 });
-const header = cva([
-    'flex items-center justify-between gap-1',
-    'w-full p-2',
-    'bg-off-white-300 rounded-lg',
-], {
+const header = cva(['flex items-center gap-1', 'w-full p-2', 'bg-off-white-300 rounded-lg'], {
     variants: {
         type: {
-            day: null,
-            month: null,
+            day: 'justify-between',
+            month: 'justify-between',
             year: 'justify-center',
         },
     },
@@ -19971,9 +19994,9 @@ class Datepicker {
         this.parseValue(this.value);
     }
     render() {
-        return (hAsync(Host, { key: 'e881e5fa8232fc6492bf9a51bb8221267e0e0af4', class: 'p-datepicker' }, hAsync("p-dropdown", { key: 'ca71772e6beb08ecd7c728a86f37f68fdb43f009', strategy: this.strategy, placement: this.placement, disableTriggerClick: true, applyMaxWidth: false, applyFullWidth: false, insideClick: true, show: this._showDropdown }, hAsync("p-field", { key: '8fbf40b4638c4a7dff3b25acaba3ba5ee097b08b', slot: 'trigger', icon: this.hideIconWhenFilled && !!this._value ? null : 'calendar-multi', iconPosition: 'start', size: this.size, prefix: this.prefix, label: this.label, helper: this.helper, required: this.required, error: this.error, disabled: this.disabled, focused: this._showDropdown, value: this._getFormattedDate(), placeholder: this.placeholder, onFocus: () => this._onFocus(), onBlur: () => this._onBlur(), onValueChange: ev => this._onValueChange(ev.detail), onInputRefChange: ev => (this._inputRef = ev.detail) }), this.enableNativePicker && this._isMobileBrowser && (hAsync("input", { key: 'b7bc7ee8e3f52d9d86df4d1b539e2a3126094bf2', slot: 'trigger', type: 'date', class: 'h-0 overflow-hidden' // we use h-0 here so location dependent pickers can correctly place itself
+        return (hAsync(Host, { key: '9f4cbca6b6da0763821be40c0e09642f545c7cff', class: 'p-datepicker' }, hAsync("p-dropdown", { key: '2ea5f19cebda672238c612a345c09f6bfd7f7e00', strategy: this.strategy, placement: this.placement, disableTriggerClick: true, applyMaxWidth: false, applyFullWidth: false, insideClick: true, show: this._showDropdown }, hAsync("p-field", { key: 'da24612f5cc20e307a2b68917ac3376320bc600a', slot: 'trigger', icon: this.hideIconWhenFilled && !!this._value ? null : 'calendar-multi', iconPosition: 'start', size: this.size, prefix: this.prefix, label: this.label, helper: this.helper, required: this.required, error: this.error, disabled: this.disabled, focused: this._showDropdown, value: this._getFormattedDate(), placeholder: this.placeholder, onFocus: () => this._onFocus(), onBlur: () => this._onBlur(), onValueChange: ev => this._onValueChange(ev.detail), onInputRefChange: ev => (this._inputRef = ev.detail) }), this.enableNativePicker && this._isMobileBrowser && (hAsync("input", { key: '07946ad09d2dfa65db206f420c7082b96ac57cf1', slot: 'trigger', type: this.mode === 'day' ? 'date' : 'month', class: 'h-0 overflow-hidden' // we use h-0 here so location dependent pickers can correctly place itself
             ,
-            onInput: ev => this._onNativeInput(ev), ref: ref => (this._dateInputRef = ref), value: this._value && format(this._value, 'yyyy-MM-dd'), min: this.minDate && format(new Date(this.minDate), 'yyyy-MM-dd'), max: this.maxDate && format(new Date(this.maxDate), 'yyyy-MM-dd') })), hAsync("div", { key: 'd72b8546a971766cef7aa700b07f5b182c9ced44', slot: 'items' }, hAsync("p-calendar", { key: '2d49eda89f6f88a1f332f7b14748eaa42732475b', variant: 'embedded', value: this._value, onValueChange: ({ detail }) => (this.value = detail), preselectToday: this.preselectToday, disabledDates: this.disabledDates, minDate: this.minDate, maxDate: this.maxDate, disableWeekends: this.disableWeekends, mode: this.mode })))));
+            onInput: ev => this._onNativeInput(ev), ref: ref => (this._dateInputRef = ref), value: this._value && format(this._value, 'yyyy-MM-dd'), min: this.minDate && format(new Date(this.minDate), 'yyyy-MM-dd'), max: this.maxDate && format(new Date(this.maxDate), 'yyyy-MM-dd') })), hAsync("div", { key: '724843eedf1d43d6d5f908c0f8618ed8822696ec', slot: 'items' }, hAsync("p-calendar", { key: '89d114f6e2ac22e24d9b965318aa04c9690a1989', variant: 'embedded', value: this._value, onValueChange: ({ detail }) => (this.value = detail), preselectToday: this.preselectToday, disabledDates: this.disabledDates, minDate: this.minDate, maxDate: this.maxDate, disableWeekends: this.disableWeekends, mode: this.mode })))));
     }
     documentClickHandler({ target }) {
         if (!this._showDropdown || childOf(target, this._el)) {
@@ -20021,7 +20044,7 @@ class Datepicker {
         }, 300);
     }
     _onNativeInput(ev) {
-        if (!ev.target.value) {
+        if (!ev.target) {
             return;
         }
         if (this._onInputTimeout) {
@@ -20029,11 +20052,7 @@ class Datepicker {
             this._onInputTimeout = null;
         }
         this._onInputTimeout = setTimeout(() => {
-            const parsedValue = new Date(ev.target.value);
-            if (!isValid(parsedValue)) {
-                return;
-            }
-            this._setValue(parsedValue, false);
+            this._setValue(ev.target.value === '' ? null : new Date(ev.target.value), false);
         });
     }
     _setValue(value, hideDropdown = true) {
@@ -20053,7 +20072,12 @@ class Datepicker {
             }
             return;
         }
-        value = startOfDay(value);
+        value =
+            this.mode === 'day'
+                ? startOfDay(value)
+                : this.mode === 'month'
+                    ? startOfMonth(value)
+                    : startOfYear(value);
         const isSameValue = isSameDay(value, this._value);
         if (isSameValue) {
             return;
@@ -25308,25 +25332,34 @@ class Stepper {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.activeStep = 1;
+        this.enableAutoStatus = true;
         this.direction = 'horizontal';
         this.contentPosition = 'end';
-        this._rendering = false;
     }
     get _el() { return getElement(this); }
-    _loaded = false;
-    // private _steps: Array<HTMLPStepperItemElement>;
-    _delay = (amount) => new Promise(resolve => setTimeout(resolve, amount));
-    _onSlotChange = async (_e) => this._generateSteps();
-    _generateSteps = async (firstLoad = false) => {
-        if (!firstLoad && (!this._el || this._rendering || !this._loaded)) {
+    _generateTimeout;
+    _resizeObserver;
+    _generateStepsOnce = () => {
+        if (this._generateTimeout) {
+            clearTimeout(this._generateTimeout);
+            this._generateTimeout = null;
+        }
+        this._generateTimeout = setTimeout(() => this._generateSteps(), 50);
+    };
+    _generateSteps = async () => {
+        if (!this._el) {
             return;
         }
-        this._rendering = true;
         let activeStep = this.activeStep - 1 || 0;
         const items = this._el.querySelectorAll('p-stepper-item');
-        if (!this.activeStep || activeStep < 0) {
-            for (let i = 0; i < items?.length; i++) {
-                const item = items.item(i);
+        let directionChanged = false;
+        for (let i = 0; i < items?.length; i++) {
+            const item = items.item(i);
+            if (this.enableAutoStatus) {
+                item.active = i === activeStep;
+                item.finished = i < activeStep;
+            }
+            if (!this.activeStep || activeStep < 0) {
                 if (item.active) {
                     activeStep = i;
                 }
@@ -25334,49 +25367,50 @@ class Stepper {
                     activeStep = i + 1;
                 }
             }
-        }
-        for (let i = 0; i < 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 (item.direction !== this.direction && !directionChanged) {
                 directionChanged = true;
             }
             item.direction = this.direction;
             item.align =
-                i === 0 ? 'start' : i === items?.length - 1 ? 'end' : 'center';
+                this.direction === 'vertical'
+                    ? 'start'
+                    : i === 0
+                        ? 'start'
+                        : i === 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?.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;
                 }
@@ -25387,17 +25421,32 @@ class Stepper {
             const line = lines.item(j);
             line.remove();
         }
-        setTimeout(() => (this._rendering = false), 100);
+    };
+    _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)`;
+        }
     };
     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, { key: '51f99206402f99e4376b21ab8d62467c48ebee4d', class: 'p-stepper' }, hAsync("slot", { key: 'e5d42ec1843f8a98034d1fade84a39ec9ecd17f5', onSlotchange: this._onSlotChange })));
+        return (hAsync(Host, { key: '562a3a8c9d341492a63a60028d25dc4dfb184493', class: 'p-stepper' }, hAsync("slot", { key: '573cee9039397f0ff989f37815c96a0dc57ade87', onSlotchange: () => this._generateStepsOnce() })));
     }
     _onActiveStepChange() {
-        this._generateSteps();
+        this._generateStepsOnce();
     }
     static get watchers() { return {
         "activeStep": ["_onActiveStepChange"]
@@ -25408,9 +25457,9 @@ class Stepper {
         "$tagName$": "p-stepper",
         "$members$": {
             "activeStep": [2, "active-step"],
+            "enableAutoStatus": [4, "enable-auto-status"],
             "direction": [513],
-            "contentPosition": [513, "content-position"],
-            "_rendering": [32]
+            "contentPosition": [513, "content-position"]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",

package/hydrate/index.mjs

@@ -3779,6 +3779,33 @@ function startOfMonth(dirtyDate) {
   return date;
 }
 
+/**
+ * @name startOfYear
+ * @category Year Helpers
+ * @summary Return the start of a year for the given date.
+ *
+ * @description
+ * Return the start of a year for the given date.
+ * The result will be in the local timezone.
+ *
+ * @param {Date|Number} date - the original date
+ * @returns {Date} the start of a year
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // The start of a year for 2 September 2014 11:55:00:
+ * const result = startOfYear(new Date(2014, 8, 2, 11, 55, 00))
+ * //=> Wed Jan 01 2014 00:00:00
+ */
+function startOfYear(dirtyDate) {
+  requiredArgs(1, arguments);
+  var cleanDate = toDate(dirtyDate);
+  var date = new Date(0);
+  date.setFullYear(cleanDate.getFullYear(), 0, 1);
+  date.setHours(0, 0, 0, 0);
+  return date;
+}
+
 /**
  * @name subMilliseconds
  * @category Millisecond Helpers
@@ -11649,15 +11676,11 @@ const calendar$2 = cva(['p-calendar bg-white w-[17.5rem] flex flex-col gap-4'],
         },
     },
 });
-const header = cva([
-    'flex items-center justify-between gap-1',
-    'w-full p-2',
-    'bg-off-white-300 rounded-lg',
-], {
+const header = cva(['flex items-center gap-1', 'w-full p-2', 'bg-off-white-300 rounded-lg'], {
     variants: {
         type: {
-            day: null,
-            month: null,
+            day: 'justify-between',
+            month: 'justify-between',
             year: 'justify-center',
         },
     },
@@ -19967,9 +19990,9 @@ class Datepicker {
         this.parseValue(this.value);
     }
     render() {
-        return (hAsync(Host, { key: 'e881e5fa8232fc6492bf9a51bb8221267e0e0af4', class: 'p-datepicker' }, hAsync("p-dropdown", { key: 'ca71772e6beb08ecd7c728a86f37f68fdb43f009', strategy: this.strategy, placement: this.placement, disableTriggerClick: true, applyMaxWidth: false, applyFullWidth: false, insideClick: true, show: this._showDropdown }, hAsync("p-field", { key: '8fbf40b4638c4a7dff3b25acaba3ba5ee097b08b', slot: 'trigger', icon: this.hideIconWhenFilled && !!this._value ? null : 'calendar-multi', iconPosition: 'start', size: this.size, prefix: this.prefix, label: this.label, helper: this.helper, required: this.required, error: this.error, disabled: this.disabled, focused: this._showDropdown, value: this._getFormattedDate(), placeholder: this.placeholder, onFocus: () => this._onFocus(), onBlur: () => this._onBlur(), onValueChange: ev => this._onValueChange(ev.detail), onInputRefChange: ev => (this._inputRef = ev.detail) }), this.enableNativePicker && this._isMobileBrowser && (hAsync("input", { key: 'b7bc7ee8e3f52d9d86df4d1b539e2a3126094bf2', slot: 'trigger', type: 'date', class: 'h-0 overflow-hidden' // we use h-0 here so location dependent pickers can correctly place itself
+        return (hAsync(Host, { key: '9f4cbca6b6da0763821be40c0e09642f545c7cff', class: 'p-datepicker' }, hAsync("p-dropdown", { key: '2ea5f19cebda672238c612a345c09f6bfd7f7e00', strategy: this.strategy, placement: this.placement, disableTriggerClick: true, applyMaxWidth: false, applyFullWidth: false, insideClick: true, show: this._showDropdown }, hAsync("p-field", { key: 'da24612f5cc20e307a2b68917ac3376320bc600a', slot: 'trigger', icon: this.hideIconWhenFilled && !!this._value ? null : 'calendar-multi', iconPosition: 'start', size: this.size, prefix: this.prefix, label: this.label, helper: this.helper, required: this.required, error: this.error, disabled: this.disabled, focused: this._showDropdown, value: this._getFormattedDate(), placeholder: this.placeholder, onFocus: () => this._onFocus(), onBlur: () => this._onBlur(), onValueChange: ev => this._onValueChange(ev.detail), onInputRefChange: ev => (this._inputRef = ev.detail) }), this.enableNativePicker && this._isMobileBrowser && (hAsync("input", { key: '07946ad09d2dfa65db206f420c7082b96ac57cf1', slot: 'trigger', type: this.mode === 'day' ? 'date' : 'month', class: 'h-0 overflow-hidden' // we use h-0 here so location dependent pickers can correctly place itself
             ,
-            onInput: ev => this._onNativeInput(ev), ref: ref => (this._dateInputRef = ref), value: this._value && format(this._value, 'yyyy-MM-dd'), min: this.minDate && format(new Date(this.minDate), 'yyyy-MM-dd'), max: this.maxDate && format(new Date(this.maxDate), 'yyyy-MM-dd') })), hAsync("div", { key: 'd72b8546a971766cef7aa700b07f5b182c9ced44', slot: 'items' }, hAsync("p-calendar", { key: '2d49eda89f6f88a1f332f7b14748eaa42732475b', variant: 'embedded', value: this._value, onValueChange: ({ detail }) => (this.value = detail), preselectToday: this.preselectToday, disabledDates: this.disabledDates, minDate: this.minDate, maxDate: this.maxDate, disableWeekends: this.disableWeekends, mode: this.mode })))));
+            onInput: ev => this._onNativeInput(ev), ref: ref => (this._dateInputRef = ref), value: this._value && format(this._value, 'yyyy-MM-dd'), min: this.minDate && format(new Date(this.minDate), 'yyyy-MM-dd'), max: this.maxDate && format(new Date(this.maxDate), 'yyyy-MM-dd') })), hAsync("div", { key: '724843eedf1d43d6d5f908c0f8618ed8822696ec', slot: 'items' }, hAsync("p-calendar", { key: '89d114f6e2ac22e24d9b965318aa04c9690a1989', variant: 'embedded', value: this._value, onValueChange: ({ detail }) => (this.value = detail), preselectToday: this.preselectToday, disabledDates: this.disabledDates, minDate: this.minDate, maxDate: this.maxDate, disableWeekends: this.disableWeekends, mode: this.mode })))));
     }
     documentClickHandler({ target }) {
         if (!this._showDropdown || childOf(target, this._el)) {
@@ -20017,7 +20040,7 @@ class Datepicker {
         }, 300);
     }
     _onNativeInput(ev) {
-        if (!ev.target.value) {
+        if (!ev.target) {
             return;
         }
         if (this._onInputTimeout) {
@@ -20025,11 +20048,7 @@ class Datepicker {
             this._onInputTimeout = null;
         }
         this._onInputTimeout = setTimeout(() => {
-            const parsedValue = new Date(ev.target.value);
-            if (!isValid(parsedValue)) {
-                return;
-            }
-            this._setValue(parsedValue, false);
+            this._setValue(ev.target.value === '' ? null : new Date(ev.target.value), false);
         });
     }
     _setValue(value, hideDropdown = true) {
@@ -20049,7 +20068,12 @@ class Datepicker {
             }
             return;
         }
-        value = startOfDay(value);
+        value =
+            this.mode === 'day'
+                ? startOfDay(value)
+                : this.mode === 'month'
+                    ? startOfMonth(value)
+                    : startOfYear(value);
         const isSameValue = isSameDay(value, this._value);
         if (isSameValue) {
             return;
@@ -25304,25 +25328,34 @@ class Stepper {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.activeStep = 1;
+        this.enableAutoStatus = true;
         this.direction = 'horizontal';
         this.contentPosition = 'end';
-        this._rendering = false;
     }
     get _el() { return getElement(this); }
-    _loaded = false;
-    // private _steps: Array<HTMLPStepperItemElement>;
-    _delay = (amount) => new Promise(resolve => setTimeout(resolve, amount));
-    _onSlotChange = async (_e) => this._generateSteps();
-    _generateSteps = async (firstLoad = false) => {
-        if (!firstLoad && (!this._el || this._rendering || !this._loaded)) {
+    _generateTimeout;
+    _resizeObserver;
+    _generateStepsOnce = () => {
+        if (this._generateTimeout) {
+            clearTimeout(this._generateTimeout);
+            this._generateTimeout = null;
+        }
+        this._generateTimeout = setTimeout(() => this._generateSteps(), 50);
+    };
+    _generateSteps = async () => {
+        if (!this._el) {
             return;
         }
-        this._rendering = true;
         let activeStep = this.activeStep - 1 || 0;
         const items = this._el.querySelectorAll('p-stepper-item');
-        if (!this.activeStep || activeStep < 0) {
-            for (let i = 0; i < items?.length; i++) {
-                const item = items.item(i);
+        let directionChanged = false;
+        for (let i = 0; i < items?.length; i++) {
+            const item = items.item(i);
+            if (this.enableAutoStatus) {
+                item.active = i === activeStep;
+                item.finished = i < activeStep;
+            }
+            if (!this.activeStep || activeStep < 0) {
                 if (item.active) {
                     activeStep = i;
                 }
@@ -25330,49 +25363,50 @@ class Stepper {
                     activeStep = i + 1;
                 }
             }
-        }
-        for (let i = 0; i < 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 (item.direction !== this.direction && !directionChanged) {
                 directionChanged = true;
             }
             item.direction = this.direction;
             item.align =
-                i === 0 ? 'start' : i === items?.length - 1 ? 'end' : 'center';
+                this.direction === 'vertical'
+                    ? 'start'
+                    : i === 0
+                        ? 'start'
+                        : i === 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?.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;
                 }
@@ -25383,17 +25417,32 @@ class Stepper {
             const line = lines.item(j);
             line.remove();
         }
-        setTimeout(() => (this._rendering = false), 100);
+    };
+    _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)`;
+        }
     };
     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, { key: '51f99206402f99e4376b21ab8d62467c48ebee4d', class: 'p-stepper' }, hAsync("slot", { key: 'e5d42ec1843f8a98034d1fade84a39ec9ecd17f5', onSlotchange: this._onSlotChange })));
+        return (hAsync(Host, { key: '562a3a8c9d341492a63a60028d25dc4dfb184493', class: 'p-stepper' }, hAsync("slot", { key: '573cee9039397f0ff989f37815c96a0dc57ade87', onSlotchange: () => this._generateStepsOnce() })));
     }
     _onActiveStepChange() {
-        this._generateSteps();
+        this._generateStepsOnce();
     }
     static get watchers() { return {
         "activeStep": ["_onActiveStepChange"]
@@ -25404,9 +25453,9 @@ class Stepper {
         "$tagName$": "p-stepper",
         "$members$": {
             "activeStep": [2, "active-step"],
+            "enableAutoStatus": [4, "enable-auto-status"],
             "direction": [513],
-            "contentPosition": [513, "content-position"],
-            "_rendering": [32]
+            "contentPosition": [513, "content-position"]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",

package/package.json

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