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

package/dist/components/p-stepper.js

@@ -10,25 +10,34 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
         this.__registerHost();
         this.__attachShadow();
         this.activeStep = 1;
+        this.enableAutoStatus = true;
         this.direction = 'horizontal';
         this.contentPosition = 'end';
-        this._rendering = false;
     }
     get _el() { return 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;
                 }
@@ -36,49 +45,50 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
                     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;
                 }
@@ -89,17 +99,32 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
             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 (h(Host, { key: '51f99206402f99e4376b21ab8d62467c48ebee4d', class: 'p-stepper' }, h("slot", { key: 'e5d42ec1843f8a98034d1fade84a39ec9ecd17f5', onSlotchange: this._onSlotChange })));
+        return (h(Host, { key: '562a3a8c9d341492a63a60028d25dc4dfb184493', class: 'p-stepper' }, h("slot", { key: '573cee9039397f0ff989f37815c96a0dc57ade87', onSlotchange: () => this._generateStepsOnce() })));
     }
     _onActiveStepChange() {
-        this._generateSteps();
+        this._generateStepsOnce();
     }
     static get watchers() { return {
         "activeStep": ["_onActiveStepChange"]
@@ -107,9 +132,9 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
     static get style() { return PStepperStyle0; }
 }, [1, "p-stepper", {
         "activeStep": [2, "active-step"],
+        "enableAutoStatus": [4, "enable-auto-status"],
         "direction": [513],
-        "contentPosition": [513, "content-position"],
-        "_rendering": [32]
+        "contentPosition": [513, "content-position"]
     }, undefined, {
         "activeStep": ["_onActiveStepChange"]
     }]);

package/dist/components/p-stepper.js.map

@@ -1 +1 @@
-{"file":"p-stepper.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,gfAAgf,CAAC;AAC7gB,uBAAe,mBAAmB;;MCMrB,OAAO;;;;;0BAIU,CAAC;yBAKkC,YAAY;+BAKhB,KAAK;0BAOnC,KAAK;;;IAE3B,OAAO,GAAG,KAAK,CAAC;;IAIhB,MAAM,GAAG,CAAC,MAAc,KAC/B,IAAI,OAAO,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IAE7C,aAAa,GAAG,OAAO,EAAS,KAAK,IAAI,CAAC,cAAc,EAAE,CAAC;IAE3D,cAAc,GAAG,OAAO,SAAS,GAAG,KAAK;QAChD,IAAI,CAAC,SAAS,KAAK,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;YAClE,OAAO;SACP;QAED,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QAEvB,IAAI,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,CAAC;QAC1C,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;QAE1D,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,UAAU,GAAG,CAAC,EAAE;YACvC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE;gBACvC,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAQ,CAAC;gBAElC,IAAI,IAAI,CAAC,MAAM,EAAE;oBAChB,UAAU,GAAG,CAAC,CAAC;iBACf;gBAED,IAAI,UAAU,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE;oBACpC,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC;iBACnB;aACD;SACD;QAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE;YACvC,IAAI,gBAAgB,GAAG,KAAK,CAAC;YAC7B,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAQ,CAAC;YAElC,IAAI,CAAC,MAAM,GAAG,CAAC,KAAK,UAAU,CAAC;YAC/B,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,UAAU,CAAC;YAE/B,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,SAAS,EAAE;gBACtC,gBAAgB,GAAG,IAAI,CAAC;aACxB;YAED,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;YAChC,IAAI,CAAC,KAAK;gBACT,CAAC,KAAK,CAAC,GAAG,OAAO,GAAG,CAAC,KAAK,KAAK,EAAE,MAAM,GAAG,CAAC,GAAG,KAAK,GAAG,QAAQ,CAAC;YAChE,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;YAE5C,IAAI,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,kBAAkB,CAAC;gBAEzC,IAAI,QAAQ,IAAI,QAAQ,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,gBAAgB,EAAE;;;oBAGpE,IAAI,gBAAgB,EAAE;wBACrB,MAAM,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;qBACtB;oBAED,MAAM,UAAU,GACf,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE;0BACpB,IAAI,CAAC,YAAY,GAAG,EAAE;0BACtB,IAAI,CAAC,YAAY,IAAI,CAAC,CAAC;oBAE3B,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;oBAE7D,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;oBACvC,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,UAAU,CAAC;oBAEpC,IAAI,UAAU,GAAG,CAAC,IAAI,IAAI,CAAC,SAAS,KAAK,UAAU,EAAE;wBACpD,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,UAAU,GAAG,EAAE,KAAK,CAAC;wBACvD,WAAW,CAAC,KAAK,CAAC,YAAY,GAAG,IAAI,UAAU,GAAG,EAAE,KAAK,CAAC;wBAC1D,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,eAC7B,CAAC,UAAU,GAAG,CAAC,IAAI,EACpB,MAAM,CAAC;qBACP;oBAED,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;oBAE7C,MAAM,QAAQ,GAAG,WAAW,CAAC,sBAAsB,CAAC;oBACpD,IAAI,QAAQ,IAAI,QAAQ,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,gBAAgB,EAAE;wBACpE,QAAQ,CAAC,MAAM,EAAE,CAAC;qBAClB;oBAED,SAAS;iBACT;aACD;YAED,IAAI,CAAC,GAAG,CAAC,EAAE;gBACV,MAAM,YAAY,GAAG,IAAI,CAAC,sBAAsB,CAAC;gBACjD,IAAI,YAAY,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,gBAAgB,EAAE;oBAC5D,YAAY,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;oBACxC,YAAY,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC;iBACnD;aACD;SACD;QAED,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,gBAAgB,CACtC,wEAAwE,CACxE,CAAC;QACF,KAAK,IAAI,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE;YAC3C,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAC3B,IAAI,CAAC,MAAM,EAAE,CAAC;SACd;QAED,UAAU,CAAC,OAAO,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,EAAE,GAAG,CAAC,CAAC;KACjD,CAAC;IAEF,gBAAgB;QACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,MAAM;QACL,QACC,EAAC,IAAI,qDAAC,KAAK,EAAC,WAAW,IACtB,6DAAM,YAAY,EAAE,IAAI,CAAC,aAAa,GAAI,CACpC,EACN;KACF;IAGS,mBAAmB;QAC5B,IAAI,CAAC,cAAc,EAAE,CAAC;KACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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"],"version":3}
+{"file":"p-stepper.js","mappings":"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","names":[],"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, 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 * Wether to automatically apply active & finished to items\n\t */\n\t@Prop() enableAutoStatus: boolean = true;\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\tprivate _generateTimeout: NodeJS.Timeout | undefined;\n\tprivate _resizeObserver: ResizeObserver;\n\n\tprivate _generateStepsOnce = () => {\n\t\tif (this._generateTimeout) {\n\t\t\tclearTimeout(this._generateTimeout);\n\t\t\tthis._generateTimeout = null;\n\t\t}\n\n\t\tthis._generateTimeout = setTimeout(() => this._generateSteps(), 50);\n\t};\n\n\tprivate _generateSteps = async () => {\n\t\tif (!this._el) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet activeStep = this.activeStep - 1 || 0;\n\t\tconst items = this._el.querySelectorAll('p-stepper-item');\n\n\t\tlet directionChanged = false;\n\t\tfor (let i = 0; i < items?.length; i++) {\n\t\t\tconst item = items.item(i) as any;\n\n\t\t\tif (this.enableAutoStatus) {\n\t\t\t\titem.active = i === activeStep;\n\t\t\t\titem.finished = i < activeStep;\n\t\t\t}\n\n\t\t\tif (!this.activeStep || activeStep < 0) {\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\n\t\t\tif (item.direction !== this.direction && !directionChanged) {\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\tthis.direction === 'vertical'\n\t\t\t\t\t? 'start'\n\t\t\t\t\t: i === 0\n\t\t\t\t\t? 'start'\n\t\t\t\t\t: i === items?.length - 1\n\t\t\t\t\t? 'end'\n\t\t\t\t\t: 'center';\n\t\t\titem.contentPosition = this.contentPosition;\n\t\t}\n\n\t\tif (directionChanged) {\n\t\t\t// super hacky way to ensure all elements that have a direction changed are re-rendered\n\t\t\tawait new Promise(resolve => setTimeout(resolve, 200));\n\t\t}\n\n\t\tfor (let i = 0; i < items?.length; i++) {\n\t\t\tconst item = items.item(i) as any;\n\n\t\t\tif (i < items.length - 1) {\n\t\t\t\tlet nextItem = item.nextElementSibling;\n\n\t\t\t\tif (nextItem && nextItem.tagName.toLowerCase() === 'p-stepper-item') {\n\t\t\t\t\tconst stepperLine = document.createElement('p-stepper-line');\n\t\t\t\t\tthis._el.insertBefore(stepperLine, nextItem);\n\t\t\t\t\tthis._setStepperLineData(stepperLine, item, nextItem, i, activeStep);\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\n\t\t\t\tif (nextItem && nextItem.tagName.toLowerCase() === 'p-stepper-line') {\n\t\t\t\t\tconst stepperLine = nextItem;\n\t\t\t\t\tnextItem = nextItem.nextElementSibling;\n\n\t\t\t\t\tif (nextItem && nextItem.tagName.toLowerCase() === 'p-stepper-item') {\n\t\t\t\t\t\tthis._setStepperLineData(\n\t\t\t\t\t\t\tstepperLine,\n\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\tnextItem,\n\t\t\t\t\t\t\ti,\n\t\t\t\t\t\t\tactiveStep\n\t\t\t\t\t\t);\n\t\t\t\t\t}\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 (\n\t\t\t\t\tpreviousItem &&\n\t\t\t\t\tpreviousItem.tagName.toLowerCase() === 'p-stepper-line'\n\t\t\t\t) {\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\t};\n\n\tprivate _setStepperLineData = (\n\t\tstepperLine: HTMLPStepperLineElement,\n\t\titem: HTMLPStepperItemElement,\n\t\tnextItem: HTMLPStepperItemElement,\n\t\ti: number,\n\t\tactiveStep: number\n\t) => {\n\t\tconst heightDiff = item.clientHeight / 2;\n\t\tconst heightDiffNext = nextItem.clientHeight / 2;\n\n\t\tstepperLine.direction = this.direction;\n\t\tstepperLine.active = i < activeStep;\n\n\t\tif (heightDiff > 0 && this.direction === 'vertical') {\n\t\t\tstepperLine.style.marginTop = `-${heightDiff / 16}rem`;\n\t\t\tstepperLine.style.marginBottom = `-${heightDiffNext / 16}rem`;\n\t\t\tstepperLine.style.minHeight = `calc(1rem + ${\n\t\t\t\t(heightDiff + heightDiffNext) / 16\n\t\t\t}rem)`;\n\t\t}\n\t};\n\n\tcomponentDidLoad() {\n\t\tthis._resizeObserver = new ResizeObserver(() => this._generateStepsOnce());\n\t\tthis._resizeObserver.observe(this._el);\n\t}\n\n\tdisconnectCallback() {\n\t\tif (this._resizeObserver) {\n\t\t\tthis._resizeObserver.disconnect();\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-stepper'>\n\t\t\t\t<slot onSlotchange={() => this._generateStepsOnce()} />\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Watch('activeStep')\n\tprotected _onActiveStepChange() {\n\t\tthis._generateStepsOnce();\n\t}\n}\n"],"version":3}

package/dist/esm/{index-64e10183.js → index-27408d5b.js}

@@ -260,6 +260,32 @@ function isValid(dirtyDate) {
   return !isNaN(Number(date));
 }
 
+/**
+ * @name startOfMonth
+ * @category Month Helpers
+ * @summary Return the start of a month for the given date.
+ *
+ * @description
+ * Return the start of a month 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 month
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // The start of a month for 2 September 2014 11:55:00:
+ * const result = startOfMonth(new Date(2014, 8, 2, 11, 55, 0))
+ * //=> Mon Sep 01 2014 00:00:00
+ */
+function startOfMonth(dirtyDate) {
+  requiredArgs(1, arguments);
+  var date = toDate(dirtyDate);
+  date.setDate(1);
+  date.setHours(0, 0, 0, 0);
+  return date;
+}
+
 /**
  * @name subMilliseconds
  * @category Millisecond Helpers
@@ -2304,6 +2330,6 @@ function isBefore(dirtyDate, dirtyDateToCompare) {
   return date.getTime() < dateToCompare.getTime();
 }
 
-export { _typeof as _, startOfUTCISOWeek as a, getUTCWeek as b, toInteger as c, getUTCISOWeek as d, getDefaultOptions as e, subMilliseconds as f, getUTCWeekYear as g, getTimezoneOffsetInMilliseconds as h, defaultLocale as i, isProtectedWeekYearToken as j, throwProtectedError as k, longFormatters$1 as l, isProtectedDayOfYearToken as m, isValid as n, isBefore as o, isAfter as p, format as q, requiredArgs as r, startOfUTCWeek as s, toDate as t, startOfDay as u, isSameDay as v };
+export { _typeof as _, startOfUTCISOWeek as a, getUTCWeek as b, toInteger as c, getUTCISOWeek as d, getDefaultOptions as e, subMilliseconds as f, getUTCWeekYear as g, getTimezoneOffsetInMilliseconds as h, defaultLocale as i, isProtectedWeekYearToken as j, throwProtectedError as k, longFormatters$1 as l, isProtectedDayOfYearToken as m, isValid as n, isBefore as o, isAfter as p, format as q, requiredArgs as r, startOfUTCWeek as s, toDate as t, startOfDay as u, startOfMonth as v, isSameDay as w };
 
-//# sourceMappingURL=index-64e10183.js.map
+//# sourceMappingURL=index-27408d5b.js.map