npm - @paperless/core - Versions diffs - 2.0.1-beta.130 → 2.0.1-beta.131 - Mend

@paperless/core 2.0.1-beta.130 → 2.0.1-beta.131

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/CHANGELOG.md +11 -0
package/dist/build/p-2e09eb7f.entry.js +2 -0
package/dist/build/p-2e09eb7f.entry.js.map +1 -0
package/dist/build/{p-530a64bf.js → p-c38b9836.js} +1 -1
package/dist/build/p-stepper.entry.esm.js.map +1 -1
package/dist/build/paperless.esm.js +1 -1
package/dist/cjs/p-stepper.cjs.entry.js +15 -8
package/dist/cjs/p-stepper.cjs.entry.js.map +1 -1
package/dist/cjs/p-stepper.entry.cjs.js.map +1 -1
package/dist/collection/components/organisms/stepper/stepper.component.css +1 -1
package/dist/collection/components/organisms/stepper/stepper.component.js +14 -7
package/dist/collection/components/organisms/stepper/stepper.component.js.map +1 -1
package/dist/components/p-stepper.js +15 -8
package/dist/components/p-stepper.js.map +1 -1
package/dist/esm/p-stepper.entry.js +15 -8
package/dist/esm/p-stepper.entry.js.map +1 -1
package/dist/index.html +1 -1
package/dist/paperless/p-2e09eb7f.entry.js +2 -0
package/dist/paperless/p-2e09eb7f.entry.js.map +1 -0
package/dist/paperless/p-stepper.entry.esm.js.map +1 -1
package/dist/paperless/paperless.esm.js +1 -1
package/dist/sw.js +1 -1
package/dist/sw.js.map +1 -1
package/dist/types/components/organisms/stepper/stepper.component.d.ts +2 -0
package/package.json +1 -1
package/dist/build/p-98b04385.entry.js +0 -2
package/dist/build/p-98b04385.entry.js.map +0 -1
package/dist/paperless/p-98b04385.entry.js +0 -2
package/dist/paperless/p-98b04385.entry.js.map +0 -1

package/dist/cjs/p-stepper.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"p-stepper.entry.cjs.js","sources":["src/components/organisms/stepper/stepper.component.css?tag=p-stepper&encapsulation=shadow","src/components/organisms/stepper/stepper.component.tsx"],"sourcesContent":["","import {\n\tComponent,\n\tElement,\n\tFragment,\n\th,\n\tProp,\n\tState,\n\tWatch,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nexport interface StepperStepItemObj {\n\tcontent: string;\n\tactive: boolean;\n\tfinished: boolean;\n}\n\nconst stepper = cva(['flex gap-2'], {\n\tvariants: {\n\t\tdirection: {\n\t\t\tvertical: 'w-full flex-col flex-wrap',\n\t\t\thorizontal: 'h-auto items-center',\n\t\t},\n\t\tgeneratedOnce: {\n\t\t\ttrue: 'opacity-100',\n\t\t\tfalse: 'opacity-0',\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-stepper',\n\tstyleUrl: 'stepper.component.css',\n\tshadow: true,\n})\nexport class Stepper {\n\t/*\n\t The steps but as a property, can also be used via slot\n\t /\n\t@Prop() steps: string \| string[] \| StepperStepItemObj[];\n\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() direction: 'horizontal' \| 'vertical' = 'horizontal';\n\n\t/\n\t The alignment of the content in case of vertical direction\n\t /\n\t@Prop() align: 'start' \| 'center' \| 'end' = 'center';\n\n\t/\n\t The position of the content in case of vertical direction\n\t /\n\t@Prop() 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 _generatedOnce = false;\n\t@State() private _loaded = false;\n\n\tprivate _generateTimeout: NodeJS.Timeout \| undefined;\n\tprivate _resizeObserver: ResizeObserver;\n\n\tprivate _hasSlotItems = false;\n\n\tcomponentDidLoad() {\n\t\tthis._hasSlotItems = !!this._el.querySelector(':scope > ');\n\n\t\tthis._resizeObserver = new ResizeObserver(() => this._generateLinesOnce());\n\t\tthis._resizeObserver.observe(this._el);\n\n\t\tthis._loaded = true;\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\tif (!this._loaded) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this._hasSlotItems) {\n\t\t\tconst steps =\n\t\t\t\ttypeof this.steps === 'string' ? JSON.parse(this.steps) : this.steps;\n\t\t\tif (!steps?.length) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst items = steps.map((step, index) => {\n\t\t\t\tconst item = this._getItem(\n\t\t\t\t\ttypeof step === 'string'\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tactive: false,\n\t\t\t\t\t\t\t\tfinished: false,\n\t\t\t\t\t\t\t\tcontent: step,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: step,\n\t\t\t\t\tindex\n\t\t\t\t);\n\t\t\t\treturn (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t{item}\n\t\t\t\t\t\t{index < steps.length - 1 && this._getLine(index)}\n\t\t\t\t\t</Fragment>\n\t\t\t\t);\n\t\t\t});\n\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tclass={stepper({\n\t\t\t\t\t\tdirection: this.direction,\n\t\t\t\t\t\tgeneratedOnce: true,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{items}\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={stepper({\n\t\t\t\t\tdirection: this.direction,\n\t\t\t\t\tgeneratedOnce: this._generatedOnce,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<slot onSlotchange={() => this._generateLinesOnce()} />\n\t\t\t</div>\n\t\t);\n\t}\n\n\t@Watch('align')\n\tprotected _onAlignChange() {\n\t\tthis._generateLinesOnce();\n\t}\n\n\t@Watch('direction')\n\tprotected _onDirectionChange() {\n\t\tthis._generateLinesOnce();\n\t}\n\n\t@Watch('activeStep')\n\tprotected _onActiveStepChange() {\n\t\tthis._generateLinesOnce();\n\t}\n\n\tprivate _getItem(data: StepperStepItemObj, i: number) {\n\t\tconst activeStep = this.activeStep - 1 \|\| 0;\n\n\t\treturn (\n\t\t\t<p-stepper-item\n\t\t\t\tactive={this.enableAutoStatus ? i === activeStep : data.active}\n\t\t\t\tfinished={this.enableAutoStatus ? i < activeStep : data.finished}\n\t\t\t\tnumber={i + 1}\n\t\t\t\talign={this.direction === 'vertical' ? this.align : 'start'}\n\t\t\t\tcontentPosition={this.contentPosition}\n\t\t\t>\n\t\t\t\t{data.content}\n\t\t\t</p-stepper-item>\n\t\t);\n\t}\n\n\tprivate _getLine(i: number) {\n\t\tconst activeStep = this.activeStep - 1 \|\| 0;\n\t\treturn (\n\t\t\t<p-stepper-line\n\t\t\t\tactive={i < activeStep}\n\t\t\t\tdirection={this.direction}\n\t\t\t/>\n\t\t);\n\t}\n\n\tprivate _checkItems(items: NodeListOf<HTMLPStepperItemElement>) {\n\t\tconst activeStep = this.activeStep - 1 \|\| 0;\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 (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\titem.number = i + 1;\n\t\t\titem.align = this.direction === 'vertical' ? this.align : 'start';\n\t\t\titem.contentPosition = this.contentPosition;\n\t\t}\n\t}\n\n\tprivate _generateLinesOnce() {\n\t\tif (!this._hasSlotItems) {\n\t\t\treturn;\n\t\t}\n\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(() => {\n\t\t\tconst items = this._el.querySelectorAll('p-stepper-item');\n\t\t\tthis._checkItems(items);\n\t\t\tthis._generateLines(items);\n\t\t\tthis._generateTimeout = null;\n\t\t});\n\t}\n\n\tprivate _generateLines(items: NodeListOf<HTMLPStepperItemElement>) {\n\t\tif (!this._el) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet activeStep = this.activeStep - 1 \|\| 0;\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._setLineData(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._setLineData(stepperLine, item, nextItem, i, activeStep);\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\n\t\tif (!this._generatedOnce) {\n\t\t\tsetTimeout(() => (this._generatedOnce = true), 0);\n\t\t}\n\t}\n\n\tprivate _setLineData(\n\t\tstepperLine: HTMLPStepperLineElement,\n\t\titem: HTMLPStepperItemElement,\n\t\tnextItem: HTMLPStepperItemElement,\n\t\ti: number,\n\t\tactiveStep: number\n\t) {\n\t\tlet heightDiff = item.clientHeight - 24;\n\t\tlet heightDiffNext = nextItem.clientHeight - 24;\n\n\t\tif (this.align === 'center') {\n\t\t\theightDiff = heightDiff / 2;\n\t\t\theightDiffNext = heightDiffNext / 2;\n\t\t}\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\tlet totalHeight = 0;\n\n\t\t\tstepperLine.style.marginTop = '0';\n\t\t\tstepperLine.style.marginBottom = '0';\n\n\t\t\tif (this.align === 'start' \|\| this.align === 'center') {\n\t\t\t\tstepperLine.style.marginTop = `-${heightDiff / 16}rem`;\n\t\t\t\ttotalHeight += heightDiff;\n\t\t\t}\n\n\t\t\tif (this.align === 'center' \|\| this.align === 'end') {\n\t\t\t\tstepperLine.style.marginBottom = `-${heightDiffNext / 16}rem`;\n\t\t\t\ttotalHeight += heightDiffNext;\n\t\t\t}\n\n\t\t\tstepperLine.style.minHeight = `calc(${totalHeight / 16}rem)`;\n\t\t}\n\t}\n}\n"],"names":["cva","index","h","Fragment"],"mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,wWAAwW;;ACiBpY,MAAM,OAAO,GAAGA,WAAG,CAAC,CAAC,YAAY,CAAC,EAAE;AACnC,IAAA,QAAQ,EAAE;AACT,QAAA,SAAS,EAAE;AACV,YAAA,QAAQ,EAAE,2BAA2B;AACrC,YAAA,UAAU,EAAE,qBAAqB;AACjC,SAAA;AACD,QAAA,aAAa,EAAE;AACd,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,KAAK,EAAE,WAAW;AAClB,SAAA;AACD,KAAA;AACD,CAAA,CAAC;MAOW,OAAO,GAAA,MAAA;;;;AACnB;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;IACK,UAAU,GAAW,CAAC;AAE9B;;AAEG;IACK,gBAAgB,GAAY,IAAI;AAExC;;AAEG;IACK,SAAS,GAA8B,YAAY;AAE3D;;AAEG;IACK,KAAK,GAA+B,QAAQ;AAEpD;;AAEG;IACK,eAAe,GAAoB,KAAK;;IAO/B,cAAc,GAAG,KAAK;IACtB,OAAO,GAAG,KAAK;AAExB,IAAA,gBAAgB;AAChB,IAAA,eAAe;IAEf,aAAa,GAAG,KAAK;IAE7B,gBAAgB,GAAA;AACf,QAAA,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,YAAY,CAAC;AAE3D,QAAA,IAAI,CAAC,eAAe,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1E,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AAEtC,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI;;IAGpB,kBAAkB,GAAA;AACjB,QAAA,IAAI,IAAI,CAAC,eAAe,EAAE;AACzB,YAAA,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE;;;IAInC,MAAM,GAAA;AACL,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YAClB;;AAGD,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACxB,MAAM,KAAK,GACV,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK;AACrE,YAAA,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE;gBACnB;;YAGD,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAEC,OAAK,KAAI;gBACvC,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CACzB,OAAO,IAAI,KAAK;AACf,sBAAE;AACA,wBAAA,MAAM,EAAE,KAAK;AACb,wBAAA,QAAQ,EAAE,KAAK;AACf,wBAAA,OAAO,EAAE,IAAI;AACZ;AACH,sBAAE,IAAI,EACPA,OAAK,CACL;gBACD,QACCC,QAACC,cAAQ,EAAA,IAAA,EACP,IAAI,EACJF,OAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,CAACA,OAAK,CAAC,CACvC;AAEb,aAAC,CAAC;YAEF,QACCC,OAAA,CAAA,KAAA,EAAA,EACC,KAAK,EAAE,OAAO,CAAC;oBACd,SAAS,EAAE,IAAI,CAAC,SAAS;AACzB,oBAAA,aAAa,EAAE,IAAI;AACnB,iBAAA,CAAC,EAED,EAAA,KAAK,CACD;;QAIR,QACCA,OAAA,CAAA,KAAA,EAAA,EACC,KAAK,EAAE,OAAO,CAAC;gBACd,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,aAAa,EAAE,IAAI,CAAC,cAAc;aAClC,CAAC,EAAA,EAEFA,OAAA,CAAA,MAAA,EAAA,EAAM,YAAY,EAAE,MAAM,IAAI,CAAC,kBAAkB,EAAE,EAAA,CAAI,CAClD;;IAKE,cAAc,GAAA;QACvB,IAAI,CAAC,kBAAkB,EAAE;;IAIhB,kBAAkB,GAAA;QAC3B,IAAI,CAAC,kBAAkB,EAAE;;IAIhB,mBAAmB,GAAA;QAC5B,IAAI,CAAC,kBAAkB,EAAE;;IAGlB,QAAQ,CAAC,IAAwB,EAAE,CAAS,EAAA;QACnD,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC;AAE3C,QAAA,QACCA,OAAA,CAAA,gBAAA,EAAA,EACC,MAAM,EAAE,IAAI,CAAC,gBAAgB,GAAG,CAAC,KAAK,UAAU,GAAG,IAAI,CAAC,MAAM,EAC9D,QAAQ,EAAE,IAAI,CAAC,gBAAgB,GAAG,CAAC,GAAG,UAAU,GAAG,IAAI,CAAC,QAAQ,EAChE,MAAM,EAAE,CAAC,GAAG,CAAC,EACb,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,OAAO,EAC3D,eAAe,EAAE,IAAI,CAAC,eAAe,IAEpC,IAAI,CAAC,OAAO,CACG;;AAIX,IAAA,QAAQ,CAAC,CAAS,EAAA;QACzB,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC;QAC3C,QACCA,OAAA,CAAA,gBAAA,EAAA,EACC,MAAM,EAAE,CAAC,GAAG,UAAU,EACtB,SAAS,EAAE,IAAI,CAAC,SAAS,EAAA,CACxB;;AAII,IAAA,WAAW,CAAC,KAA0C,EAAA;QAC7D,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC;AAE3C,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE;YACvC,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAQ;AAEjC,YAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE;AAC1B,gBAAA,IAAI,CAAC,MAAM,GAAG,CAAC,KAAK,UAAU;AAC9B,gBAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,UAAU;;AAG/B,YAAA,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC;AACnB,YAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,KAAK,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,OAAO;AACjE,YAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe;;;IAIrC,kBAAkB,GAAA;AACzB,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACxB;;AAGD,QAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE;AAC1B,YAAA,YAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC;AACnC,YAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI;;AAG7B,QAAA,IAAI,CAAC,gBAAgB,GAAG,UAAU,CAAC,MAAK;YACvC,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,gBAAgB,CAAC;AACzD,YAAA,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AACvB,YAAA,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;AAC1B,YAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI;AAC7B,SAAC,CAAC;;AAGK,IAAA,cAAc,CAAC,KAA0C,EAAA;AAChE,QAAA,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE;YACd;;QAGD,IAAI,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC;AAEzC,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE;YACvC,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAQ;YAEjC,IAAI,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;AACzB,gBAAA,IAAI,QAAQ,GAAG,IAAI,CAAC,kBAAkB;gBAEtC,IAAI,QAAQ,IAAI,QAAQ,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,gBAAgB,EAAE;oBACpE,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC;oBAC5D,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,WAAW,EAAE,QAAQ,CAAC;AAC5C,oBAAA,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,UAAU,CAAC;AAE7D,oBAAA,MAAM,QAAQ,GAAG,WAAW,CAAC,sBAAsB;oBACnD,IAAI,QAAQ,IAAI,QAAQ,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,gBAAgB,EAAE;wBACpE,QAAQ,CAAC,MAAM,EAAE;;oBAGlB;;gBAGD,IAAI,QAAQ,IAAI,QAAQ,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,gBAAgB,EAAE;oBACpE,MAAM,WAAW,GAAG,QAAQ;AAC5B,oBAAA,QAAQ,GAAG,QAAQ,CAAC,kBAAkB;oBAEtC,IAAI,QAAQ,IAAI,QAAQ,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,gBAAgB,EAAE;AACpE,wBAAA,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,UAAU,CAAC;;;;AAKhE,YAAA,IAAI,CAAC,GAAG,CAAC,EAAE;AACV,gBAAA,MAAM,YAAY,GAAG,IAAI,CAAC,sBAAsB;AAChD,gBAAA,IACC,YAAY;oBACZ,YAAY,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,gBAAgB,EACtD;AACD,oBAAA,YAAY,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS;oBACvC,YAAY,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ;;;;QAKrD,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,gBAAgB,CACtC,wEAAwE,CACxE;AACD,QAAA,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;YAC1B,IAAI,CAAC,MAAM,EAAE;;AAGd,QAAA,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;AACzB,YAAA,UAAU,CAAC,OAAO,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC;;;IAI3C,YAAY,CACnB,WAAoC,EACpC,IAA6B,EAC7B,QAAiC,EACjC,CAAS,EACT,UAAkB,EAAA;AAElB,QAAA,IAAI,UAAU,GAAG,IAAI,CAAC,YAAY,GAAG,EAAE;AACvC,QAAA,IAAI,cAAc,GAAG,QAAQ,CAAC,YAAY,GAAG,EAAE;AAE/C,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;AAC5B,YAAA,UAAU,GAAG,UAAU,GAAG,CAAC;AAC3B,YAAA,cAAc,GAAG,cAAc,GAAG,CAAC;;AAGpC,QAAA,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS;AACtC,QAAA,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,UAAU;QAEnC,IAAI,UAAU,GAAG,CAAC,IAAI,IAAI,CAAC,SAAS,KAAK,UAAU,EAAE;YACpD,IAAI,WAAW,GAAG,CAAC;AAEnB,YAAA,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG;AACjC,YAAA,WAAW,CAAC,KAAK,CAAC,YAAY,GAAG,GAAG;AAEpC,YAAA,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;gBACtD,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,UAAU,GAAG,EAAE,CAAA,GAAA,CAAK;gBACtD,WAAW,IAAI,UAAU;;AAG1B,YAAA,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,EAAE;gBACpD,WAAW,CAAC,KAAK,CAAC,YAAY,GAAG,IAAI,cAAc,GAAG,EAAE,CAAA,GAAA,CAAK;gBAC7D,WAAW,IAAI,cAAc;;YAG9B,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,QAAQ,WAAW,GAAG,EAAE,CAAA,IAAA,CAAM;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"p-stepper.entry.cjs.js","sources":["src/components/organisms/stepper/stepper.component.css?tag=p-stepper&encapsulation=shadow","src/components/organisms/stepper/stepper.component.tsx"],"sourcesContent":["","import {\n\tComponent,\n\tElement,\n\tFragment,\n\th,\n\tProp,\n\tState,\n\tWatch,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nexport interface StepperStepItemObj {\n\tcontent: string;\n\tactive: boolean;\n\tfinished: boolean;\n}\n\nconst stepper = cva(\n\t['flex gap-2 border border-solid border-negative-red resize overflow-auto'],\n\t{\n\t\tvariants: {\n\t\t\tdirection: {\n\t\t\t\tvertical: 'w-full flex-col flex-wrap',\n\t\t\t\thorizontal: 'h-auto items-center',\n\t\t\t},\n\t\t\tgeneratedOnce: {\n\t\t\t\ttrue: 'opacity-100',\n\t\t\t\tfalse: 'opacity-0',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-stepper',\n\tstyleUrl: 'stepper.component.css',\n\tshadow: true,\n})\nexport class Stepper {\n\t/*\n\t The steps but as a property, can also be used via slot\n\t /\n\t@Prop() steps: string \| string[] \| StepperStepItemObj[];\n\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() direction: 'horizontal' \| 'vertical' = 'horizontal';\n\n\t/\n\t The alignment of the content in case of vertical direction\n\t /\n\t@Prop() align: 'start' \| 'center' \| 'end' = 'center';\n\n\t/\n\t The position of the content in case of vertical direction\n\t /\n\t@Prop() 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 _generatedOnce = false;\n\t@State() private _loaded = false;\n\n\tprivate _generateTimeout: NodeJS.Timeout \| undefined;\n\tprivate _containerRef: HTMLDivElement;\n\tprivate _resizeObserver: ResizeObserver;\n\n\tprivate _hasSlotItems = false;\n\n\tcomponentDidLoad() {\n\t\tthis._hasSlotItems = !!this._el.querySelector(':scope > ');\n\t\tthis._loaded = true;\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\tif (!this._loaded) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this._hasSlotItems) {\n\t\t\tconst steps =\n\t\t\t\ttypeof this.steps === 'string' ? JSON.parse(this.steps) : this.steps;\n\t\t\tif (!steps?.length) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst items = steps.map((step, index) => {\n\t\t\t\tconst item = this._getItem(\n\t\t\t\t\ttypeof step === 'string'\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tactive: false,\n\t\t\t\t\t\t\t\tfinished: false,\n\t\t\t\t\t\t\t\tcontent: step,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: step,\n\t\t\t\t\tindex\n\t\t\t\t);\n\t\t\t\treturn (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t{item}\n\t\t\t\t\t\t{index < steps.length - 1 && this._getLine(index)}\n\t\t\t\t\t</Fragment>\n\t\t\t\t);\n\t\t\t});\n\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tclass={stepper({\n\t\t\t\t\t\tdirection: this.direction,\n\t\t\t\t\t\tgeneratedOnce: true,\n\t\t\t\t\t})}\n\t\t\t\t\tref={ref => this._setContainerRef(ref)}\n\t\t\t\t>\n\t\t\t\t\t{items}\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={stepper({\n\t\t\t\t\tdirection: this.direction,\n\t\t\t\t\tgeneratedOnce: this._generatedOnce,\n\t\t\t\t})}\n\t\t\t\tref={ref => this._setContainerRef(ref)}\n\t\t\t>\n\t\t\t\t<slot onSlotchange={() => this._generateLinesOnce()} />\n\t\t\t</div>\n\t\t);\n\t}\n\n\t@Watch('align')\n\tprotected _onAlignChange() {\n\t\tthis._generateLinesOnce();\n\t}\n\n\t@Watch('direction')\n\tprotected _onDirectionChange() {\n\t\tthis._generateLinesOnce();\n\t}\n\n\t@Watch('activeStep')\n\tprotected _onActiveStepChange() {\n\t\tthis._generateLinesOnce();\n\t}\n\n\tprivate _setContainerRef(ref: HTMLDivElement) {\n\t\tthis._containerRef = ref;\n\n\t\tif (this._resizeObserver) {\n\t\t\tthis._resizeObserver.disconnect();\n\t\t}\n\n\t\tthis._resizeObserver = new ResizeObserver(() => this._generateLinesOnce());\n\t\tthis._resizeObserver.observe(this._containerRef);\n\t}\n\n\tprivate _getItem(data: StepperStepItemObj, i: number) {\n\t\tconst activeStep = this.activeStep - 1 \|\| 0;\n\n\t\treturn (\n\t\t\t<p-stepper-item\n\t\t\t\tactive={this.enableAutoStatus ? i === activeStep : data.active}\n\t\t\t\tfinished={this.enableAutoStatus ? i < activeStep : data.finished}\n\t\t\t\tnumber={i + 1}\n\t\t\t\talign={this.direction === 'vertical' ? this.align : 'start'}\n\t\t\t\tcontentPosition={this.contentPosition}\n\t\t\t>\n\t\t\t\t{data.content}\n\t\t\t</p-stepper-item>\n\t\t);\n\t}\n\n\tprivate _getLine(i: number) {\n\t\tconst activeStep = this.activeStep - 1 \|\| 0;\n\t\treturn (\n\t\t\t<p-stepper-line\n\t\t\t\tactive={i < activeStep}\n\t\t\t\tdirection={this.direction}\n\t\t\t/>\n\t\t);\n\t}\n\n\tprivate _checkItems(items: NodeListOf<HTMLPStepperItemElement>) {\n\t\tconst activeStep = this.activeStep - 1 \|\| 0;\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 (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\titem.number = i + 1;\n\t\t\titem.align = this.direction === 'vertical' ? this.align : 'start';\n\t\t\titem.contentPosition = this.contentPosition;\n\t\t}\n\t}\n\n\tprivate _generateLinesOnce() {\n\t\tif (!this._hasSlotItems) {\n\t\t\treturn;\n\t\t}\n\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(() => {\n\t\t\tconst items = this._el.querySelectorAll('p-stepper-item');\n\t\t\tthis._checkItems(items);\n\t\t\tthis._generateLines(items);\n\t\t\tthis._generateTimeout = null;\n\t\t}, 50);\n\t}\n\n\tprivate _generateLines(items: NodeListOf<HTMLPStepperItemElement>) {\n\t\tif (!this._el) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet activeStep = this.activeStep - 1 \|\| 0;\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._setLineData(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._setLineData(stepperLine, item, nextItem, i, activeStep);\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\n\t\tif (!this._generatedOnce) {\n\t\t\tthis._generatedOnce = true;\n\t\t}\n\t}\n\n\tprivate _setLineData(\n\t\tstepperLine: HTMLPStepperLineElement,\n\t\titem: HTMLPStepperItemElement,\n\t\tnextItem: HTMLPStepperItemElement,\n\t\ti: number,\n\t\tactiveStep: number\n\t) {\n\t\tlet heightDiff = item.clientHeight - 24;\n\t\tlet heightDiffNext = nextItem.clientHeight - 24;\n\n\t\tif (this.align === 'center') {\n\t\t\theightDiff = heightDiff / 2;\n\t\t\theightDiffNext = heightDiffNext / 2;\n\t\t}\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\tlet totalHeight = 0;\n\n\t\t\tstepperLine.style.marginTop = '0';\n\t\t\tstepperLine.style.marginBottom = '0';\n\n\t\t\tif (this.align === 'start' \|\| this.align === 'center') {\n\t\t\t\tstepperLine.style.marginTop = `-${heightDiff / 16}rem`;\n\t\t\t\ttotalHeight += heightDiff;\n\t\t\t}\n\n\t\t\tif (this.align === 'center' \|\| this.align === 'end') {\n\t\t\t\tstepperLine.style.marginBottom = `-${heightDiffNext / 16}rem`;\n\t\t\t\ttotalHeight += heightDiffNext;\n\t\t\t}\n\n\t\t\tstepperLine.style.minHeight = `calc(${totalHeight / 16}rem)`;\n\t\t}\n\t}\n}\n"],"names":["cva","index","h","Fragment"],"mappings":"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"}

package/dist/collection/components/organisms/stepper/stepper.component.css CHANGED Viewed

	@@ -1 +1 @@
1	- *{box-sizing:border-box}.static{position:static!important}.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}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.opacity-0{opacity:0!important}.opacity-100{opacity:1!important}
1	+ *{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.h-auto{height:auto!important}.w-full{width:100%!important}.resize{resize:both!important}.flex-col{flex-direction:column!important}.flex-wrap{flex-wrap:wrap!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.overflow-auto{overflow:auto!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-negative-red{--tw-border-opacity:1!important;border-color:rgb(230 30 30/var(--tw-border-opacity,1))!important}.opacity-0{opacity:0!important}.opacity-100{opacity:1!important}

package/dist/collection/components/organisms/stepper/stepper.component.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Fragment, h, } from "@stencil/core";
 import { cva } from "class-variance-authority";
-const stepper = cva(['flex gap-2'], {
+const stepper = cva(['flex gap-2 border border-solid border-negative-red resize overflow-auto'], {
     variants: {
         direction: {
             vertical: 'w-full flex-col flex-wrap',
@@ -44,12 +44,11 @@ export class Stepper {
     _generatedOnce = false;
     _loaded = false;
     _generateTimeout;
+    _containerRef;
     _resizeObserver;
     _hasSlotItems = false;
     componentDidLoad() {
         this._hasSlotItems = !!this._el.querySelector(':scope > *');
-        this._resizeObserver = new ResizeObserver(() => this._generateLinesOnce());
-        this._resizeObserver.observe(this._el);
         this._loaded = true;
     }
     disconnectCallback() {
@@ -79,12 +78,12 @@ export class Stepper {
             return (h("div", { class: stepper({
                     direction: this.direction,
                     generatedOnce: true,
-                }) }, items));
+                }), ref: ref => this._setContainerRef(ref) }, items));
         }
         return (h("div", { class: stepper({
                 direction: this.direction,
                 generatedOnce: this._generatedOnce,
-            }) }, h("slot", { onSlotchange: () => this._generateLinesOnce() })));
+            }), ref: ref => this._setContainerRef(ref) }, h("slot", { onSlotchange: () => this._generateLinesOnce() })));
     }
     _onAlignChange() {
         this._generateLinesOnce();
@@ -95,6 +94,14 @@ export class Stepper {
     _onActiveStepChange() {
         this._generateLinesOnce();
     }
+    _setContainerRef(ref) {
+        this._containerRef = ref;
+        if (this._resizeObserver) {
+            this._resizeObserver.disconnect();
+        }
+        this._resizeObserver = new ResizeObserver(() => this._generateLinesOnce());
+        this._resizeObserver.observe(this._containerRef);
+    }
     _getItem(data, i) {
         const activeStep = this.activeStep - 1 || 0;
         return (h("p-stepper-item", { active: this.enableAutoStatus ? i === activeStep : data.active, finished: this.enableAutoStatus ? i < activeStep : data.finished, number: i + 1, align: this.direction === 'vertical' ? this.align : 'start', contentPosition: this.contentPosition }, data.content));
@@ -129,7 +136,7 @@ export class Stepper {
             this._checkItems(items);
             this._generateLines(items);
             this._generateTimeout = null;
-        });
+        }, 50);
     }
     _generateLines(items) {
         if (!this._el) {
@@ -173,7 +180,7 @@ export class Stepper {
             line.remove();
         }
         if (!this._generatedOnce) {
-            setTimeout(() => (this._generatedOnce = true), 0);
+            this._generatedOnce = true;
         }
     }
     _setLineData(stepperLine, item, nextItem, i, activeStep) {

package/dist/collection/components/organisms/stepper/stepper.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stepper.component.js","sourceRoot":"","sources":["../../../../src/components/organisms/stepper/stepper.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tElement,\n\tFragment,\n\th,\n\tProp,\n\tState,\n\tWatch,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nexport interface StepperStepItemObj {\n\tcontent: string;\n\tactive: boolean;\n\tfinished: boolean;\n}\n\nconst stepper = cva(['flex gap-2'], {\n\tvariants: {\n\t\tdirection: {\n\t\t\tvertical: 'w-full flex-col flex-wrap',\n\t\t\thorizontal: 'h-auto items-center',\n\t\t},\n\t\tgeneratedOnce: {\n\t\t\ttrue: 'opacity-100',\n\t\t\tfalse: 'opacity-0',\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-stepper',\n\tstyleUrl: 'stepper.component.css',\n\tshadow: true,\n})\nexport class Stepper {\n\t/*\n\t The steps but as a property, can also be used via slot\n\t /\n\t@Prop() steps: string \| string[] \| StepperStepItemObj[];\n\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() direction: 'horizontal' \| 'vertical' = 'horizontal';\n\n\t/\n\t The alignment of the content in case of vertical direction\n\t /\n\t@Prop() align: 'start' \| 'center' \| 'end' = 'center';\n\n\t/\n\t The position of the content in case of vertical direction\n\t /\n\t@Prop() 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 _generatedOnce = false;\n\t@State() private _loaded = false;\n\n\tprivate _generateTimeout: NodeJS.Timeout \| undefined;\n\tprivate _resizeObserver: ResizeObserver;\n\n\tprivate _hasSlotItems = false;\n\n\tcomponentDidLoad() {\n\t\tthis._hasSlotItems = !!this._el.querySelector(':scope > ');\n\n\t\tthis._resizeObserver = new ResizeObserver(() => this._generateLinesOnce());\n\t\tthis._resizeObserver.observe(this._el);\n\n\t\tthis._loaded = true;\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\tif (!this._loaded) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this._hasSlotItems) {\n\t\t\tconst steps =\n\t\t\t\ttypeof this.steps === 'string' ? JSON.parse(this.steps) : this.steps;\n\t\t\tif (!steps?.length) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst items = steps.map((step, index) => {\n\t\t\t\tconst item = this._getItem(\n\t\t\t\t\ttypeof step === 'string'\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tactive: false,\n\t\t\t\t\t\t\t\tfinished: false,\n\t\t\t\t\t\t\t\tcontent: step,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: step,\n\t\t\t\t\tindex\n\t\t\t\t);\n\t\t\t\treturn (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t{item}\n\t\t\t\t\t\t{index < steps.length - 1 && this._getLine(index)}\n\t\t\t\t\t</Fragment>\n\t\t\t\t);\n\t\t\t});\n\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tclass={stepper({\n\t\t\t\t\t\tdirection: this.direction,\n\t\t\t\t\t\tgeneratedOnce: true,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{items}\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={stepper({\n\t\t\t\t\tdirection: this.direction,\n\t\t\t\t\tgeneratedOnce: this._generatedOnce,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<slot onSlotchange={() => this._generateLinesOnce()} />\n\t\t\t</div>\n\t\t);\n\t}\n\n\t@Watch('align')\n\tprotected _onAlignChange() {\n\t\tthis._generateLinesOnce();\n\t}\n\n\t@Watch('direction')\n\tprotected _onDirectionChange() {\n\t\tthis._generateLinesOnce();\n\t}\n\n\t@Watch('activeStep')\n\tprotected _onActiveStepChange() {\n\t\tthis._generateLinesOnce();\n\t}\n\n\tprivate _getItem(data: StepperStepItemObj, i: number) {\n\t\tconst activeStep = this.activeStep - 1 \|\| 0;\n\n\t\treturn (\n\t\t\t<p-stepper-item\n\t\t\t\tactive={this.enableAutoStatus ? i === activeStep : data.active}\n\t\t\t\tfinished={this.enableAutoStatus ? i < activeStep : data.finished}\n\t\t\t\tnumber={i + 1}\n\t\t\t\talign={this.direction === 'vertical' ? this.align : 'start'}\n\t\t\t\tcontentPosition={this.contentPosition}\n\t\t\t>\n\t\t\t\t{data.content}\n\t\t\t</p-stepper-item>\n\t\t);\n\t}\n\n\tprivate _getLine(i: number) {\n\t\tconst activeStep = this.activeStep - 1 \|\| 0;\n\t\treturn (\n\t\t\t<p-stepper-line\n\t\t\t\tactive={i < activeStep}\n\t\t\t\tdirection={this.direction}\n\t\t\t/>\n\t\t);\n\t}\n\n\tprivate _checkItems(items: NodeListOf<HTMLPStepperItemElement>) {\n\t\tconst activeStep = this.activeStep - 1 \|\| 0;\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 (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\titem.number = i + 1;\n\t\t\titem.align = this.direction === 'vertical' ? this.align : 'start';\n\t\t\titem.contentPosition = this.contentPosition;\n\t\t}\n\t}\n\n\tprivate _generateLinesOnce() {\n\t\tif (!this._hasSlotItems) {\n\t\t\treturn;\n\t\t}\n\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(() => {\n\t\t\tconst items = this._el.querySelectorAll('p-stepper-item');\n\t\t\tthis._checkItems(items);\n\t\t\tthis._generateLines(items);\n\t\t\tthis._generateTimeout = null;\n\t\t});\n\t}\n\n\tprivate _generateLines(items: NodeListOf<HTMLPStepperItemElement>) {\n\t\tif (!this._el) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet activeStep = this.activeStep - 1 \|\| 0;\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._setLineData(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._setLineData(stepperLine, item, nextItem, i, activeStep);\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\n\t\tif (!this._generatedOnce) {\n\t\t\tsetTimeout(() => (this._generatedOnce = true), 0);\n\t\t}\n\t}\n\n\tprivate _setLineData(\n\t\tstepperLine: HTMLPStepperLineElement,\n\t\titem: HTMLPStepperItemElement,\n\t\tnextItem: HTMLPStepperItemElement,\n\t\ti: number,\n\t\tactiveStep: number\n\t) {\n\t\tlet heightDiff = item.clientHeight - 24;\n\t\tlet heightDiffNext = nextItem.clientHeight - 24;\n\n\t\tif (this.align === 'center') {\n\t\t\theightDiff = heightDiff / 2;\n\t\t\theightDiffNext = heightDiffNext / 2;\n\t\t}\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\tlet totalHeight = 0;\n\n\t\t\tstepperLine.style.marginTop = '0';\n\t\t\tstepperLine.style.marginBottom = '0';\n\n\t\t\tif (this.align === 'start' \|\| this.align === 'center') {\n\t\t\t\tstepperLine.style.marginTop = `-${heightDiff / 16}rem`;\n\t\t\t\ttotalHeight += heightDiff;\n\t\t\t}\n\n\t\t\tif (this.align === 'center' \|\| this.align === 'end') {\n\t\t\t\tstepperLine.style.marginBottom = `-${heightDiffNext / 16}rem`;\n\t\t\t\ttotalHeight += heightDiffNext;\n\t\t\t}\n\n\t\t\tstepperLine.style.minHeight = `calc(${totalHeight / 16}rem)`;\n\t\t}\n\t}\n}\n"]}
1	+ {"version":3,"file":"stepper.component.js","sourceRoot":"","sources":["../../../../src/components/organisms/stepper/stepper.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tElement,\n\tFragment,\n\th,\n\tProp,\n\tState,\n\tWatch,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nexport interface StepperStepItemObj {\n\tcontent: string;\n\tactive: boolean;\n\tfinished: boolean;\n}\n\nconst stepper = cva(\n\t['flex gap-2 border border-solid border-negative-red resize overflow-auto'],\n\t{\n\t\tvariants: {\n\t\t\tdirection: {\n\t\t\t\tvertical: 'w-full flex-col flex-wrap',\n\t\t\t\thorizontal: 'h-auto items-center',\n\t\t\t},\n\t\t\tgeneratedOnce: {\n\t\t\t\ttrue: 'opacity-100',\n\t\t\t\tfalse: 'opacity-0',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-stepper',\n\tstyleUrl: 'stepper.component.css',\n\tshadow: true,\n})\nexport class Stepper {\n\t/*\n\t The steps but as a property, can also be used via slot\n\t /\n\t@Prop() steps: string \| string[] \| StepperStepItemObj[];\n\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() direction: 'horizontal' \| 'vertical' = 'horizontal';\n\n\t/\n\t The alignment of the content in case of vertical direction\n\t /\n\t@Prop() align: 'start' \| 'center' \| 'end' = 'center';\n\n\t/\n\t The position of the content in case of vertical direction\n\t /\n\t@Prop() 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 _generatedOnce = false;\n\t@State() private _loaded = false;\n\n\tprivate _generateTimeout: NodeJS.Timeout \| undefined;\n\tprivate _containerRef: HTMLDivElement;\n\tprivate _resizeObserver: ResizeObserver;\n\n\tprivate _hasSlotItems = false;\n\n\tcomponentDidLoad() {\n\t\tthis._hasSlotItems = !!this._el.querySelector(':scope > ');\n\t\tthis._loaded = true;\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\tif (!this._loaded) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this._hasSlotItems) {\n\t\t\tconst steps =\n\t\t\t\ttypeof this.steps === 'string' ? JSON.parse(this.steps) : this.steps;\n\t\t\tif (!steps?.length) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst items = steps.map((step, index) => {\n\t\t\t\tconst item = this._getItem(\n\t\t\t\t\ttypeof step === 'string'\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tactive: false,\n\t\t\t\t\t\t\t\tfinished: false,\n\t\t\t\t\t\t\t\tcontent: step,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: step,\n\t\t\t\t\tindex\n\t\t\t\t);\n\t\t\t\treturn (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t{item}\n\t\t\t\t\t\t{index < steps.length - 1 && this._getLine(index)}\n\t\t\t\t\t</Fragment>\n\t\t\t\t);\n\t\t\t});\n\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tclass={stepper({\n\t\t\t\t\t\tdirection: this.direction,\n\t\t\t\t\t\tgeneratedOnce: true,\n\t\t\t\t\t})}\n\t\t\t\t\tref={ref => this._setContainerRef(ref)}\n\t\t\t\t>\n\t\t\t\t\t{items}\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={stepper({\n\t\t\t\t\tdirection: this.direction,\n\t\t\t\t\tgeneratedOnce: this._generatedOnce,\n\t\t\t\t})}\n\t\t\t\tref={ref => this._setContainerRef(ref)}\n\t\t\t>\n\t\t\t\t<slot onSlotchange={() => this._generateLinesOnce()} />\n\t\t\t</div>\n\t\t);\n\t}\n\n\t@Watch('align')\n\tprotected _onAlignChange() {\n\t\tthis._generateLinesOnce();\n\t}\n\n\t@Watch('direction')\n\tprotected _onDirectionChange() {\n\t\tthis._generateLinesOnce();\n\t}\n\n\t@Watch('activeStep')\n\tprotected _onActiveStepChange() {\n\t\tthis._generateLinesOnce();\n\t}\n\n\tprivate _setContainerRef(ref: HTMLDivElement) {\n\t\tthis._containerRef = ref;\n\n\t\tif (this._resizeObserver) {\n\t\t\tthis._resizeObserver.disconnect();\n\t\t}\n\n\t\tthis._resizeObserver = new ResizeObserver(() => this._generateLinesOnce());\n\t\tthis._resizeObserver.observe(this._containerRef);\n\t}\n\n\tprivate _getItem(data: StepperStepItemObj, i: number) {\n\t\tconst activeStep = this.activeStep - 1 \|\| 0;\n\n\t\treturn (\n\t\t\t<p-stepper-item\n\t\t\t\tactive={this.enableAutoStatus ? i === activeStep : data.active}\n\t\t\t\tfinished={this.enableAutoStatus ? i < activeStep : data.finished}\n\t\t\t\tnumber={i + 1}\n\t\t\t\talign={this.direction === 'vertical' ? this.align : 'start'}\n\t\t\t\tcontentPosition={this.contentPosition}\n\t\t\t>\n\t\t\t\t{data.content}\n\t\t\t</p-stepper-item>\n\t\t);\n\t}\n\n\tprivate _getLine(i: number) {\n\t\tconst activeStep = this.activeStep - 1 \|\| 0;\n\t\treturn (\n\t\t\t<p-stepper-line\n\t\t\t\tactive={i < activeStep}\n\t\t\t\tdirection={this.direction}\n\t\t\t/>\n\t\t);\n\t}\n\n\tprivate _checkItems(items: NodeListOf<HTMLPStepperItemElement>) {\n\t\tconst activeStep = this.activeStep - 1 \|\| 0;\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 (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\titem.number = i + 1;\n\t\t\titem.align = this.direction === 'vertical' ? this.align : 'start';\n\t\t\titem.contentPosition = this.contentPosition;\n\t\t}\n\t}\n\n\tprivate _generateLinesOnce() {\n\t\tif (!this._hasSlotItems) {\n\t\t\treturn;\n\t\t}\n\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(() => {\n\t\t\tconst items = this._el.querySelectorAll('p-stepper-item');\n\t\t\tthis._checkItems(items);\n\t\t\tthis._generateLines(items);\n\t\t\tthis._generateTimeout = null;\n\t\t}, 50);\n\t}\n\n\tprivate _generateLines(items: NodeListOf<HTMLPStepperItemElement>) {\n\t\tif (!this._el) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet activeStep = this.activeStep - 1 \|\| 0;\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._setLineData(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._setLineData(stepperLine, item, nextItem, i, activeStep);\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\n\t\tif (!this._generatedOnce) {\n\t\t\tthis._generatedOnce = true;\n\t\t}\n\t}\n\n\tprivate _setLineData(\n\t\tstepperLine: HTMLPStepperLineElement,\n\t\titem: HTMLPStepperItemElement,\n\t\tnextItem: HTMLPStepperItemElement,\n\t\ti: number,\n\t\tactiveStep: number\n\t) {\n\t\tlet heightDiff = item.clientHeight - 24;\n\t\tlet heightDiffNext = nextItem.clientHeight - 24;\n\n\t\tif (this.align === 'center') {\n\t\t\theightDiff = heightDiff / 2;\n\t\t\theightDiffNext = heightDiffNext / 2;\n\t\t}\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\tlet totalHeight = 0;\n\n\t\t\tstepperLine.style.marginTop = '0';\n\t\t\tstepperLine.style.marginBottom = '0';\n\n\t\t\tif (this.align === 'start' \|\| this.align === 'center') {\n\t\t\t\tstepperLine.style.marginTop = `-${heightDiff / 16}rem`;\n\t\t\t\ttotalHeight += heightDiff;\n\t\t\t}\n\n\t\t\tif (this.align === 'center' \|\| this.align === 'end') {\n\t\t\t\tstepperLine.style.marginBottom = `-${heightDiffNext / 16}rem`;\n\t\t\t\ttotalHeight += heightDiffNext;\n\t\t\t}\n\n\t\t\tstepperLine.style.minHeight = `calc(${totalHeight / 16}rem)`;\n\t\t}\n\t}\n}\n"]}

package/dist/components/p-stepper.js CHANGED Viewed

@@ -3,9 +3,9 @@ import { c as cva } from './p-CBWjHURv.js';
 import { d as defineCustomElement$3 } from './p-C9Hyi74u.js';
 import { d as defineCustomElement$2 } from './p-z3vbNBOG.js';
-const stepperComponentCss = "*{box-sizing:border-box}.static{position:static!important}.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}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.opacity-0{opacity:0!important}.opacity-100{opacity:1!important}";
+const stepperComponentCss = "*{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.h-auto{height:auto!important}.w-full{width:100%!important}.resize{resize:both!important}.flex-col{flex-direction:column!important}.flex-wrap{flex-wrap:wrap!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.overflow-auto{overflow:auto!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-negative-red{--tw-border-opacity:1!important;border-color:rgb(230 30 30/var(--tw-border-opacity,1))!important}.opacity-0{opacity:0!important}.opacity-100{opacity:1!important}";
-const stepper = cva(['flex gap-2'], {
+const stepper = cva(['flex gap-2 border border-solid border-negative-red resize overflow-auto'], {
     variants: {
         direction: {
             vertical: 'w-full flex-col flex-wrap',
@@ -51,12 +51,11 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends H {
     _generatedOnce = false;
     _loaded = false;
     _generateTimeout;
+    _containerRef;
     _resizeObserver;
     _hasSlotItems = false;
     componentDidLoad() {
         this._hasSlotItems = !!this._el.querySelector(':scope > *');
-        this._resizeObserver = new ResizeObserver(() => this._generateLinesOnce());
-        this._resizeObserver.observe(this._el);
         this._loaded = true;
     }
     disconnectCallback() {
@@ -86,12 +85,12 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends H {
             return (h("div", { class: stepper({
                     direction: this.direction,
                     generatedOnce: true,
-                }) }, items));
+                }), ref: ref => this._setContainerRef(ref) }, items));
         }
         return (h("div", { class: stepper({
                 direction: this.direction,
                 generatedOnce: this._generatedOnce,
-            }) }, h("slot", { onSlotchange: () => this._generateLinesOnce() })));
+            }), ref: ref => this._setContainerRef(ref) }, h("slot", { onSlotchange: () => this._generateLinesOnce() })));
     }
     _onAlignChange() {
         this._generateLinesOnce();
@@ -102,6 +101,14 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends H {
     _onActiveStepChange() {
         this._generateLinesOnce();
     }
+    _setContainerRef(ref) {
+        this._containerRef = ref;
+        if (this._resizeObserver) {
+            this._resizeObserver.disconnect();
+        }
+        this._resizeObserver = new ResizeObserver(() => this._generateLinesOnce());
+        this._resizeObserver.observe(this._containerRef);
+    }
     _getItem(data, i) {
         const activeStep = this.activeStep - 1 || 0;
         return (h("p-stepper-item", { active: this.enableAutoStatus ? i === activeStep : data.active, finished: this.enableAutoStatus ? i < activeStep : data.finished, number: i + 1, align: this.direction === 'vertical' ? this.align : 'start', contentPosition: this.contentPosition }, data.content));
@@ -136,7 +143,7 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends H {
             this._checkItems(items);
             this._generateLines(items);
             this._generateTimeout = null;
-        });
+        }, 50);
     }
     _generateLines(items) {
         if (!this._el) {
@@ -180,7 +187,7 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends H {
             line.remove();
         }
         if (!this._generatedOnce) {
-            setTimeout(() => (this._generatedOnce = true), 0);
+            this._generatedOnce = true;
         }
     }
     _setLineData(stepperLine, item, nextItem, i, activeStep) {

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

	@@ -1 +1 @@
1	- {"file":"p-stepper.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/organisms/stepper/stepper.component.css?tag=p-stepper&encapsulation=shadow","src/components/organisms/stepper/stepper.component.tsx"],"sourcesContent":["","import {\n\tComponent,\n\tElement,\n\tFragment,\n\th,\n\tProp,\n\tState,\n\tWatch,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nexport interface StepperStepItemObj {\n\tcontent: string;\n\tactive: boolean;\n\tfinished: boolean;\n}\n\nconst stepper = cva(['flex gap-2'], {\n\tvariants: {\n\t\tdirection: {\n\t\t\tvertical: 'w-full flex-col flex-wrap',\n\t\t\thorizontal: 'h-auto items-center',\n\t\t},\n\t\tgeneratedOnce: {\n\t\t\ttrue: 'opacity-100',\n\t\t\tfalse: 'opacity-0',\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-stepper',\n\tstyleUrl: 'stepper.component.css',\n\tshadow: true,\n})\nexport class Stepper {\n\t/*\n\t The steps but as a property, can also be used via slot\n\t /\n\t@Prop() steps: string \| string[] \| StepperStepItemObj[];\n\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() direction: 'horizontal' \| 'vertical' = 'horizontal';\n\n\t/\n\t The alignment of the content in case of vertical direction\n\t /\n\t@Prop() align: 'start' \| 'center' \| 'end' = 'center';\n\n\t/\n\t The position of the content in case of vertical direction\n\t /\n\t@Prop() 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 _generatedOnce = false;\n\t@State() private _loaded = false;\n\n\tprivate _generateTimeout: NodeJS.Timeout \| undefined;\n\tprivate _resizeObserver: ResizeObserver;\n\n\tprivate _hasSlotItems = false;\n\n\tcomponentDidLoad() {\n\t\tthis._hasSlotItems = !!this._el.querySelector(':scope > ');\n\n\t\tthis._resizeObserver = new ResizeObserver(() => this._generateLinesOnce());\n\t\tthis._resizeObserver.observe(this._el);\n\n\t\tthis._loaded = true;\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\tif (!this._loaded) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this._hasSlotItems) {\n\t\t\tconst steps =\n\t\t\t\ttypeof this.steps === 'string' ? JSON.parse(this.steps) : this.steps;\n\t\t\tif (!steps?.length) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst items = steps.map((step, index) => {\n\t\t\t\tconst item = this._getItem(\n\t\t\t\t\ttypeof step === 'string'\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tactive: false,\n\t\t\t\t\t\t\t\tfinished: false,\n\t\t\t\t\t\t\t\tcontent: step,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: step,\n\t\t\t\t\tindex\n\t\t\t\t);\n\t\t\t\treturn (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t{item}\n\t\t\t\t\t\t{index < steps.length - 1 && this._getLine(index)}\n\t\t\t\t\t</Fragment>\n\t\t\t\t);\n\t\t\t});\n\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tclass={stepper({\n\t\t\t\t\t\tdirection: this.direction,\n\t\t\t\t\t\tgeneratedOnce: true,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{items}\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={stepper({\n\t\t\t\t\tdirection: this.direction,\n\t\t\t\t\tgeneratedOnce: this._generatedOnce,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<slot onSlotchange={() => this._generateLinesOnce()} />\n\t\t\t</div>\n\t\t);\n\t}\n\n\t@Watch('align')\n\tprotected _onAlignChange() {\n\t\tthis._generateLinesOnce();\n\t}\n\n\t@Watch('direction')\n\tprotected _onDirectionChange() {\n\t\tthis._generateLinesOnce();\n\t}\n\n\t@Watch('activeStep')\n\tprotected _onActiveStepChange() {\n\t\tthis._generateLinesOnce();\n\t}\n\n\tprivate _getItem(data: StepperStepItemObj, i: number) {\n\t\tconst activeStep = this.activeStep - 1 \|\| 0;\n\n\t\treturn (\n\t\t\t<p-stepper-item\n\t\t\t\tactive={this.enableAutoStatus ? i === activeStep : data.active}\n\t\t\t\tfinished={this.enableAutoStatus ? i < activeStep : data.finished}\n\t\t\t\tnumber={i + 1}\n\t\t\t\talign={this.direction === 'vertical' ? this.align : 'start'}\n\t\t\t\tcontentPosition={this.contentPosition}\n\t\t\t>\n\t\t\t\t{data.content}\n\t\t\t</p-stepper-item>\n\t\t);\n\t}\n\n\tprivate _getLine(i: number) {\n\t\tconst activeStep = this.activeStep - 1 \|\| 0;\n\t\treturn (\n\t\t\t<p-stepper-line\n\t\t\t\tactive={i < activeStep}\n\t\t\t\tdirection={this.direction}\n\t\t\t/>\n\t\t);\n\t}\n\n\tprivate _checkItems(items: NodeListOf<HTMLPStepperItemElement>) {\n\t\tconst activeStep = this.activeStep - 1 \|\| 0;\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 (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\titem.number = i + 1;\n\t\t\titem.align = this.direction === 'vertical' ? this.align : 'start';\n\t\t\titem.contentPosition = this.contentPosition;\n\t\t}\n\t}\n\n\tprivate _generateLinesOnce() {\n\t\tif (!this._hasSlotItems) {\n\t\t\treturn;\n\t\t}\n\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(() => {\n\t\t\tconst items = this._el.querySelectorAll('p-stepper-item');\n\t\t\tthis._checkItems(items);\n\t\t\tthis._generateLines(items);\n\t\t\tthis._generateTimeout = null;\n\t\t});\n\t}\n\n\tprivate _generateLines(items: NodeListOf<HTMLPStepperItemElement>) {\n\t\tif (!this._el) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet activeStep = this.activeStep - 1 \|\| 0;\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._setLineData(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._setLineData(stepperLine, item, nextItem, i, activeStep);\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\n\t\tif (!this._generatedOnce) {\n\t\t\tsetTimeout(() => (this._generatedOnce = true), 0);\n\t\t}\n\t}\n\n\tprivate _setLineData(\n\t\tstepperLine: HTMLPStepperLineElement,\n\t\titem: HTMLPStepperItemElement,\n\t\tnextItem: HTMLPStepperItemElement,\n\t\ti: number,\n\t\tactiveStep: number\n\t) {\n\t\tlet heightDiff = item.clientHeight - 24;\n\t\tlet heightDiffNext = nextItem.clientHeight - 24;\n\n\t\tif (this.align === 'center') {\n\t\t\theightDiff = heightDiff / 2;\n\t\t\theightDiffNext = heightDiffNext / 2;\n\t\t}\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\tlet totalHeight = 0;\n\n\t\t\tstepperLine.style.marginTop = '0';\n\t\t\tstepperLine.style.marginBottom = '0';\n\n\t\t\tif (this.align === 'start' \|\| this.align === 'center') {\n\t\t\t\tstepperLine.style.marginTop = `-${heightDiff / 16}rem`;\n\t\t\t\ttotalHeight += heightDiff;\n\t\t\t}\n\n\t\t\tif (this.align === 'center' \|\| this.align === 'end') {\n\t\t\t\tstepperLine.style.marginBottom = `-${heightDiffNext / 16}rem`;\n\t\t\t\ttotalHeight += heightDiffNext;\n\t\t\t}\n\n\t\t\tstepperLine.style.minHeight = `calc(${totalHeight / 16}rem)`;\n\t\t}\n\t}\n}\n"],"version":3}
1	+ {"file":"p-stepper.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/organisms/stepper/stepper.component.css?tag=p-stepper&encapsulation=shadow","src/components/organisms/stepper/stepper.component.tsx"],"sourcesContent":["","import {\n\tComponent,\n\tElement,\n\tFragment,\n\th,\n\tProp,\n\tState,\n\tWatch,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nexport interface StepperStepItemObj {\n\tcontent: string;\n\tactive: boolean;\n\tfinished: boolean;\n}\n\nconst stepper = cva(\n\t['flex gap-2 border border-solid border-negative-red resize overflow-auto'],\n\t{\n\t\tvariants: {\n\t\t\tdirection: {\n\t\t\t\tvertical: 'w-full flex-col flex-wrap',\n\t\t\t\thorizontal: 'h-auto items-center',\n\t\t\t},\n\t\t\tgeneratedOnce: {\n\t\t\t\ttrue: 'opacity-100',\n\t\t\t\tfalse: 'opacity-0',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-stepper',\n\tstyleUrl: 'stepper.component.css',\n\tshadow: true,\n})\nexport class Stepper {\n\t/*\n\t The steps but as a property, can also be used via slot\n\t /\n\t@Prop() steps: string \| string[] \| StepperStepItemObj[];\n\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() direction: 'horizontal' \| 'vertical' = 'horizontal';\n\n\t/\n\t The alignment of the content in case of vertical direction\n\t /\n\t@Prop() align: 'start' \| 'center' \| 'end' = 'center';\n\n\t/\n\t The position of the content in case of vertical direction\n\t /\n\t@Prop() 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 _generatedOnce = false;\n\t@State() private _loaded = false;\n\n\tprivate _generateTimeout: NodeJS.Timeout \| undefined;\n\tprivate _containerRef: HTMLDivElement;\n\tprivate _resizeObserver: ResizeObserver;\n\n\tprivate _hasSlotItems = false;\n\n\tcomponentDidLoad() {\n\t\tthis._hasSlotItems = !!this._el.querySelector(':scope > ');\n\t\tthis._loaded = true;\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\tif (!this._loaded) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this._hasSlotItems) {\n\t\t\tconst steps =\n\t\t\t\ttypeof this.steps === 'string' ? JSON.parse(this.steps) : this.steps;\n\t\t\tif (!steps?.length) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst items = steps.map((step, index) => {\n\t\t\t\tconst item = this._getItem(\n\t\t\t\t\ttypeof step === 'string'\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tactive: false,\n\t\t\t\t\t\t\t\tfinished: false,\n\t\t\t\t\t\t\t\tcontent: step,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: step,\n\t\t\t\t\tindex\n\t\t\t\t);\n\t\t\t\treturn (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t{item}\n\t\t\t\t\t\t{index < steps.length - 1 && this._getLine(index)}\n\t\t\t\t\t</Fragment>\n\t\t\t\t);\n\t\t\t});\n\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tclass={stepper({\n\t\t\t\t\t\tdirection: this.direction,\n\t\t\t\t\t\tgeneratedOnce: true,\n\t\t\t\t\t})}\n\t\t\t\t\tref={ref => this._setContainerRef(ref)}\n\t\t\t\t>\n\t\t\t\t\t{items}\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={stepper({\n\t\t\t\t\tdirection: this.direction,\n\t\t\t\t\tgeneratedOnce: this._generatedOnce,\n\t\t\t\t})}\n\t\t\t\tref={ref => this._setContainerRef(ref)}\n\t\t\t>\n\t\t\t\t<slot onSlotchange={() => this._generateLinesOnce()} />\n\t\t\t</div>\n\t\t);\n\t}\n\n\t@Watch('align')\n\tprotected _onAlignChange() {\n\t\tthis._generateLinesOnce();\n\t}\n\n\t@Watch('direction')\n\tprotected _onDirectionChange() {\n\t\tthis._generateLinesOnce();\n\t}\n\n\t@Watch('activeStep')\n\tprotected _onActiveStepChange() {\n\t\tthis._generateLinesOnce();\n\t}\n\n\tprivate _setContainerRef(ref: HTMLDivElement) {\n\t\tthis._containerRef = ref;\n\n\t\tif (this._resizeObserver) {\n\t\t\tthis._resizeObserver.disconnect();\n\t\t}\n\n\t\tthis._resizeObserver = new ResizeObserver(() => this._generateLinesOnce());\n\t\tthis._resizeObserver.observe(this._containerRef);\n\t}\n\n\tprivate _getItem(data: StepperStepItemObj, i: number) {\n\t\tconst activeStep = this.activeStep - 1 \|\| 0;\n\n\t\treturn (\n\t\t\t<p-stepper-item\n\t\t\t\tactive={this.enableAutoStatus ? i === activeStep : data.active}\n\t\t\t\tfinished={this.enableAutoStatus ? i < activeStep : data.finished}\n\t\t\t\tnumber={i + 1}\n\t\t\t\talign={this.direction === 'vertical' ? this.align : 'start'}\n\t\t\t\tcontentPosition={this.contentPosition}\n\t\t\t>\n\t\t\t\t{data.content}\n\t\t\t</p-stepper-item>\n\t\t);\n\t}\n\n\tprivate _getLine(i: number) {\n\t\tconst activeStep = this.activeStep - 1 \|\| 0;\n\t\treturn (\n\t\t\t<p-stepper-line\n\t\t\t\tactive={i < activeStep}\n\t\t\t\tdirection={this.direction}\n\t\t\t/>\n\t\t);\n\t}\n\n\tprivate _checkItems(items: NodeListOf<HTMLPStepperItemElement>) {\n\t\tconst activeStep = this.activeStep - 1 \|\| 0;\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 (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\titem.number = i + 1;\n\t\t\titem.align = this.direction === 'vertical' ? this.align : 'start';\n\t\t\titem.contentPosition = this.contentPosition;\n\t\t}\n\t}\n\n\tprivate _generateLinesOnce() {\n\t\tif (!this._hasSlotItems) {\n\t\t\treturn;\n\t\t}\n\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(() => {\n\t\t\tconst items = this._el.querySelectorAll('p-stepper-item');\n\t\t\tthis._checkItems(items);\n\t\t\tthis._generateLines(items);\n\t\t\tthis._generateTimeout = null;\n\t\t}, 50);\n\t}\n\n\tprivate _generateLines(items: NodeListOf<HTMLPStepperItemElement>) {\n\t\tif (!this._el) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet activeStep = this.activeStep - 1 \|\| 0;\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._setLineData(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._setLineData(stepperLine, item, nextItem, i, activeStep);\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\n\t\tif (!this._generatedOnce) {\n\t\t\tthis._generatedOnce = true;\n\t\t}\n\t}\n\n\tprivate _setLineData(\n\t\tstepperLine: HTMLPStepperLineElement,\n\t\titem: HTMLPStepperItemElement,\n\t\tnextItem: HTMLPStepperItemElement,\n\t\ti: number,\n\t\tactiveStep: number\n\t) {\n\t\tlet heightDiff = item.clientHeight - 24;\n\t\tlet heightDiffNext = nextItem.clientHeight - 24;\n\n\t\tif (this.align === 'center') {\n\t\t\theightDiff = heightDiff / 2;\n\t\t\theightDiffNext = heightDiffNext / 2;\n\t\t}\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\tlet totalHeight = 0;\n\n\t\t\tstepperLine.style.marginTop = '0';\n\t\t\tstepperLine.style.marginBottom = '0';\n\n\t\t\tif (this.align === 'start' \|\| this.align === 'center') {\n\t\t\t\tstepperLine.style.marginTop = `-${heightDiff / 16}rem`;\n\t\t\t\ttotalHeight += heightDiff;\n\t\t\t}\n\n\t\t\tif (this.align === 'center' \|\| this.align === 'end') {\n\t\t\t\tstepperLine.style.marginBottom = `-${heightDiffNext / 16}rem`;\n\t\t\t\ttotalHeight += heightDiffNext;\n\t\t\t}\n\n\t\t\tstepperLine.style.minHeight = `calc(${totalHeight / 16}rem)`;\n\t\t}\n\t}\n}\n"],"version":3}

package/dist/esm/p-stepper.entry.js CHANGED Viewed

@@ -2,9 +2,9 @@ import { r as registerInstance, g as getElement, h, F as Fragment } from './inde
 import { c as cva } from './index-CO0T2jO4.js';
 import './clsx-ChV9xqsO.js';
-const stepperComponentCss = "*{box-sizing:border-box}.static{position:static!important}.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}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.opacity-0{opacity:0!important}.opacity-100{opacity:1!important}";
+const stepperComponentCss = "*{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.h-auto{height:auto!important}.w-full{width:100%!important}.resize{resize:both!important}.flex-col{flex-direction:column!important}.flex-wrap{flex-wrap:wrap!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.overflow-auto{overflow:auto!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-negative-red{--tw-border-opacity:1!important;border-color:rgb(230 30 30/var(--tw-border-opacity,1))!important}.opacity-0{opacity:0!important}.opacity-100{opacity:1!important}";
-const stepper = cva(['flex gap-2'], {
+const stepper = cva(['flex gap-2 border border-solid border-negative-red resize overflow-auto'], {
     variants: {
         direction: {
             vertical: 'w-full flex-col flex-wrap',
@@ -48,12 +48,11 @@ const Stepper = class {
     _generatedOnce = false;
     _loaded = false;
     _generateTimeout;
+    _containerRef;
     _resizeObserver;
     _hasSlotItems = false;
     componentDidLoad() {
         this._hasSlotItems = !!this._el.querySelector(':scope > *');
-        this._resizeObserver = new ResizeObserver(() => this._generateLinesOnce());
-        this._resizeObserver.observe(this._el);
         this._loaded = true;
     }
     disconnectCallback() {
@@ -83,12 +82,12 @@ const Stepper = class {
             return (h("div", { class: stepper({
                     direction: this.direction,
                     generatedOnce: true,
-                }) }, items));
+                }), ref: ref => this._setContainerRef(ref) }, items));
         }
         return (h("div", { class: stepper({
                 direction: this.direction,
                 generatedOnce: this._generatedOnce,
-            }) }, h("slot", { onSlotchange: () => this._generateLinesOnce() })));
+            }), ref: ref => this._setContainerRef(ref) }, h("slot", { onSlotchange: () => this._generateLinesOnce() })));
     }
     _onAlignChange() {
         this._generateLinesOnce();
@@ -99,6 +98,14 @@ const Stepper = class {
     _onActiveStepChange() {
         this._generateLinesOnce();
     }
+    _setContainerRef(ref) {
+        this._containerRef = ref;
+        if (this._resizeObserver) {
+            this._resizeObserver.disconnect();
+        }
+        this._resizeObserver = new ResizeObserver(() => this._generateLinesOnce());
+        this._resizeObserver.observe(this._containerRef);
+    }
     _getItem(data, i) {
         const activeStep = this.activeStep - 1 || 0;
         return (h("p-stepper-item", { active: this.enableAutoStatus ? i === activeStep : data.active, finished: this.enableAutoStatus ? i < activeStep : data.finished, number: i + 1, align: this.direction === 'vertical' ? this.align : 'start', contentPosition: this.contentPosition }, data.content));
@@ -133,7 +140,7 @@ const Stepper = class {
             this._checkItems(items);
             this._generateLines(items);
             this._generateTimeout = null;
-        });
+        }, 50);
     }
     _generateLines(items) {
         if (!this._el) {
@@ -177,7 +184,7 @@ const Stepper = class {
             line.remove();
         }
         if (!this._generatedOnce) {
-            setTimeout(() => (this._generatedOnce = true), 0);
+            this._generatedOnce = true;
         }
     }
     _setLineData(stepperLine, item, nextItem, i, activeStep) {

package/dist/esm/p-stepper.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"p-stepper.entry.js","sources":["src/components/organisms/stepper/stepper.component.css?tag=p-stepper&encapsulation=shadow","src/components/organisms/stepper/stepper.component.tsx"],"sourcesContent":["","import {\n\tComponent,\n\tElement,\n\tFragment,\n\th,\n\tProp,\n\tState,\n\tWatch,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nexport interface StepperStepItemObj {\n\tcontent: string;\n\tactive: boolean;\n\tfinished: boolean;\n}\n\nconst stepper = cva(['flex gap-2'], {\n\tvariants: {\n\t\tdirection: {\n\t\t\tvertical: 'w-full flex-col flex-wrap',\n\t\t\thorizontal: 'h-auto items-center',\n\t\t},\n\t\tgeneratedOnce: {\n\t\t\ttrue: 'opacity-100',\n\t\t\tfalse: 'opacity-0',\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-stepper',\n\tstyleUrl: 'stepper.component.css',\n\tshadow: true,\n})\nexport class Stepper {\n\t/*\n\t The steps but as a property, can also be used via slot\n\t /\n\t@Prop() steps: string \| string[] \| StepperStepItemObj[];\n\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() direction: 'horizontal' \| 'vertical' = 'horizontal';\n\n\t/\n\t The alignment of the content in case of vertical direction\n\t /\n\t@Prop() align: 'start' \| 'center' \| 'end' = 'center';\n\n\t/\n\t The position of the content in case of vertical direction\n\t /\n\t@Prop() 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 _generatedOnce = false;\n\t@State() private _loaded = false;\n\n\tprivate _generateTimeout: NodeJS.Timeout \| undefined;\n\tprivate _resizeObserver: ResizeObserver;\n\n\tprivate _hasSlotItems = false;\n\n\tcomponentDidLoad() {\n\t\tthis._hasSlotItems = !!this._el.querySelector(':scope > ');\n\n\t\tthis._resizeObserver = new ResizeObserver(() => this._generateLinesOnce());\n\t\tthis._resizeObserver.observe(this._el);\n\n\t\tthis._loaded = true;\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\tif (!this._loaded) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this._hasSlotItems) {\n\t\t\tconst steps =\n\t\t\t\ttypeof this.steps === 'string' ? JSON.parse(this.steps) : this.steps;\n\t\t\tif (!steps?.length) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst items = steps.map((step, index) => {\n\t\t\t\tconst item = this._getItem(\n\t\t\t\t\ttypeof step === 'string'\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tactive: false,\n\t\t\t\t\t\t\t\tfinished: false,\n\t\t\t\t\t\t\t\tcontent: step,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: step,\n\t\t\t\t\tindex\n\t\t\t\t);\n\t\t\t\treturn (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t{item}\n\t\t\t\t\t\t{index < steps.length - 1 && this._getLine(index)}\n\t\t\t\t\t</Fragment>\n\t\t\t\t);\n\t\t\t});\n\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tclass={stepper({\n\t\t\t\t\t\tdirection: this.direction,\n\t\t\t\t\t\tgeneratedOnce: true,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{items}\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={stepper({\n\t\t\t\t\tdirection: this.direction,\n\t\t\t\t\tgeneratedOnce: this._generatedOnce,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<slot onSlotchange={() => this._generateLinesOnce()} />\n\t\t\t</div>\n\t\t);\n\t}\n\n\t@Watch('align')\n\tprotected _onAlignChange() {\n\t\tthis._generateLinesOnce();\n\t}\n\n\t@Watch('direction')\n\tprotected _onDirectionChange() {\n\t\tthis._generateLinesOnce();\n\t}\n\n\t@Watch('activeStep')\n\tprotected _onActiveStepChange() {\n\t\tthis._generateLinesOnce();\n\t}\n\n\tprivate _getItem(data: StepperStepItemObj, i: number) {\n\t\tconst activeStep = this.activeStep - 1 \|\| 0;\n\n\t\treturn (\n\t\t\t<p-stepper-item\n\t\t\t\tactive={this.enableAutoStatus ? i === activeStep : data.active}\n\t\t\t\tfinished={this.enableAutoStatus ? i < activeStep : data.finished}\n\t\t\t\tnumber={i + 1}\n\t\t\t\talign={this.direction === 'vertical' ? this.align : 'start'}\n\t\t\t\tcontentPosition={this.contentPosition}\n\t\t\t>\n\t\t\t\t{data.content}\n\t\t\t</p-stepper-item>\n\t\t);\n\t}\n\n\tprivate _getLine(i: number) {\n\t\tconst activeStep = this.activeStep - 1 \|\| 0;\n\t\treturn (\n\t\t\t<p-stepper-line\n\t\t\t\tactive={i < activeStep}\n\t\t\t\tdirection={this.direction}\n\t\t\t/>\n\t\t);\n\t}\n\n\tprivate _checkItems(items: NodeListOf<HTMLPStepperItemElement>) {\n\t\tconst activeStep = this.activeStep - 1 \|\| 0;\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 (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\titem.number = i + 1;\n\t\t\titem.align = this.direction === 'vertical' ? this.align : 'start';\n\t\t\titem.contentPosition = this.contentPosition;\n\t\t}\n\t}\n\n\tprivate _generateLinesOnce() {\n\t\tif (!this._hasSlotItems) {\n\t\t\treturn;\n\t\t}\n\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(() => {\n\t\t\tconst items = this._el.querySelectorAll('p-stepper-item');\n\t\t\tthis._checkItems(items);\n\t\t\tthis._generateLines(items);\n\t\t\tthis._generateTimeout = null;\n\t\t});\n\t}\n\n\tprivate _generateLines(items: NodeListOf<HTMLPStepperItemElement>) {\n\t\tif (!this._el) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet activeStep = this.activeStep - 1 \|\| 0;\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._setLineData(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._setLineData(stepperLine, item, nextItem, i, activeStep);\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\n\t\tif (!this._generatedOnce) {\n\t\t\tsetTimeout(() => (this._generatedOnce = true), 0);\n\t\t}\n\t}\n\n\tprivate _setLineData(\n\t\tstepperLine: HTMLPStepperLineElement,\n\t\titem: HTMLPStepperItemElement,\n\t\tnextItem: HTMLPStepperItemElement,\n\t\ti: number,\n\t\tactiveStep: number\n\t) {\n\t\tlet heightDiff = item.clientHeight - 24;\n\t\tlet heightDiffNext = nextItem.clientHeight - 24;\n\n\t\tif (this.align === 'center') {\n\t\t\theightDiff = heightDiff / 2;\n\t\t\theightDiffNext = heightDiffNext / 2;\n\t\t}\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\tlet totalHeight = 0;\n\n\t\t\tstepperLine.style.marginTop = '0';\n\t\t\tstepperLine.style.marginBottom = '0';\n\n\t\t\tif (this.align === 'start' \|\| this.align === 'center') {\n\t\t\t\tstepperLine.style.marginTop = `-${heightDiff / 16}rem`;\n\t\t\t\ttotalHeight += heightDiff;\n\t\t\t}\n\n\t\t\tif (this.align === 'center' \|\| this.align === 'end') {\n\t\t\t\tstepperLine.style.marginBottom = `-${heightDiffNext / 16}rem`;\n\t\t\t\ttotalHeight += heightDiffNext;\n\t\t\t}\n\n\t\t\tstepperLine.style.minHeight = `calc(${totalHeight / 16}rem)`;\n\t\t}\n\t}\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"p-stepper.entry.js","sources":["src/components/organisms/stepper/stepper.component.css?tag=p-stepper&encapsulation=shadow","src/components/organisms/stepper/stepper.component.tsx"],"sourcesContent":["","import {\n\tComponent,\n\tElement,\n\tFragment,\n\th,\n\tProp,\n\tState,\n\tWatch,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nexport interface StepperStepItemObj {\n\tcontent: string;\n\tactive: boolean;\n\tfinished: boolean;\n}\n\nconst stepper = cva(\n\t['flex gap-2 border border-solid border-negative-red resize overflow-auto'],\n\t{\n\t\tvariants: {\n\t\t\tdirection: {\n\t\t\t\tvertical: 'w-full flex-col flex-wrap',\n\t\t\t\thorizontal: 'h-auto items-center',\n\t\t\t},\n\t\t\tgeneratedOnce: {\n\t\t\t\ttrue: 'opacity-100',\n\t\t\t\tfalse: 'opacity-0',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-stepper',\n\tstyleUrl: 'stepper.component.css',\n\tshadow: true,\n})\nexport class Stepper {\n\t/*\n\t The steps but as a property, can also be used via slot\n\t /\n\t@Prop() steps: string \| string[] \| StepperStepItemObj[];\n\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() direction: 'horizontal' \| 'vertical' = 'horizontal';\n\n\t/\n\t The alignment of the content in case of vertical direction\n\t /\n\t@Prop() align: 'start' \| 'center' \| 'end' = 'center';\n\n\t/\n\t The position of the content in case of vertical direction\n\t /\n\t@Prop() 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 _generatedOnce = false;\n\t@State() private _loaded = false;\n\n\tprivate _generateTimeout: NodeJS.Timeout \| undefined;\n\tprivate _containerRef: HTMLDivElement;\n\tprivate _resizeObserver: ResizeObserver;\n\n\tprivate _hasSlotItems = false;\n\n\tcomponentDidLoad() {\n\t\tthis._hasSlotItems = !!this._el.querySelector(':scope > ');\n\t\tthis._loaded = true;\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\tif (!this._loaded) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this._hasSlotItems) {\n\t\t\tconst steps =\n\t\t\t\ttypeof this.steps === 'string' ? JSON.parse(this.steps) : this.steps;\n\t\t\tif (!steps?.length) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst items = steps.map((step, index) => {\n\t\t\t\tconst item = this._getItem(\n\t\t\t\t\ttypeof step === 'string'\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tactive: false,\n\t\t\t\t\t\t\t\tfinished: false,\n\t\t\t\t\t\t\t\tcontent: step,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: step,\n\t\t\t\t\tindex\n\t\t\t\t);\n\t\t\t\treturn (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t{item}\n\t\t\t\t\t\t{index < steps.length - 1 && this._getLine(index)}\n\t\t\t\t\t</Fragment>\n\t\t\t\t);\n\t\t\t});\n\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tclass={stepper({\n\t\t\t\t\t\tdirection: this.direction,\n\t\t\t\t\t\tgeneratedOnce: true,\n\t\t\t\t\t})}\n\t\t\t\t\tref={ref => this._setContainerRef(ref)}\n\t\t\t\t>\n\t\t\t\t\t{items}\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={stepper({\n\t\t\t\t\tdirection: this.direction,\n\t\t\t\t\tgeneratedOnce: this._generatedOnce,\n\t\t\t\t})}\n\t\t\t\tref={ref => this._setContainerRef(ref)}\n\t\t\t>\n\t\t\t\t<slot onSlotchange={() => this._generateLinesOnce()} />\n\t\t\t</div>\n\t\t);\n\t}\n\n\t@Watch('align')\n\tprotected _onAlignChange() {\n\t\tthis._generateLinesOnce();\n\t}\n\n\t@Watch('direction')\n\tprotected _onDirectionChange() {\n\t\tthis._generateLinesOnce();\n\t}\n\n\t@Watch('activeStep')\n\tprotected _onActiveStepChange() {\n\t\tthis._generateLinesOnce();\n\t}\n\n\tprivate _setContainerRef(ref: HTMLDivElement) {\n\t\tthis._containerRef = ref;\n\n\t\tif (this._resizeObserver) {\n\t\t\tthis._resizeObserver.disconnect();\n\t\t}\n\n\t\tthis._resizeObserver = new ResizeObserver(() => this._generateLinesOnce());\n\t\tthis._resizeObserver.observe(this._containerRef);\n\t}\n\n\tprivate _getItem(data: StepperStepItemObj, i: number) {\n\t\tconst activeStep = this.activeStep - 1 \|\| 0;\n\n\t\treturn (\n\t\t\t<p-stepper-item\n\t\t\t\tactive={this.enableAutoStatus ? i === activeStep : data.active}\n\t\t\t\tfinished={this.enableAutoStatus ? i < activeStep : data.finished}\n\t\t\t\tnumber={i + 1}\n\t\t\t\talign={this.direction === 'vertical' ? this.align : 'start'}\n\t\t\t\tcontentPosition={this.contentPosition}\n\t\t\t>\n\t\t\t\t{data.content}\n\t\t\t</p-stepper-item>\n\t\t);\n\t}\n\n\tprivate _getLine(i: number) {\n\t\tconst activeStep = this.activeStep - 1 \|\| 0;\n\t\treturn (\n\t\t\t<p-stepper-line\n\t\t\t\tactive={i < activeStep}\n\t\t\t\tdirection={this.direction}\n\t\t\t/>\n\t\t);\n\t}\n\n\tprivate _checkItems(items: NodeListOf<HTMLPStepperItemElement>) {\n\t\tconst activeStep = this.activeStep - 1 \|\| 0;\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 (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\titem.number = i + 1;\n\t\t\titem.align = this.direction === 'vertical' ? this.align : 'start';\n\t\t\titem.contentPosition = this.contentPosition;\n\t\t}\n\t}\n\n\tprivate _generateLinesOnce() {\n\t\tif (!this._hasSlotItems) {\n\t\t\treturn;\n\t\t}\n\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(() => {\n\t\t\tconst items = this._el.querySelectorAll('p-stepper-item');\n\t\t\tthis._checkItems(items);\n\t\t\tthis._generateLines(items);\n\t\t\tthis._generateTimeout = null;\n\t\t}, 50);\n\t}\n\n\tprivate _generateLines(items: NodeListOf<HTMLPStepperItemElement>) {\n\t\tif (!this._el) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet activeStep = this.activeStep - 1 \|\| 0;\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._setLineData(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._setLineData(stepperLine, item, nextItem, i, activeStep);\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\n\t\tif (!this._generatedOnce) {\n\t\t\tthis._generatedOnce = true;\n\t\t}\n\t}\n\n\tprivate _setLineData(\n\t\tstepperLine: HTMLPStepperLineElement,\n\t\titem: HTMLPStepperItemElement,\n\t\tnextItem: HTMLPStepperItemElement,\n\t\ti: number,\n\t\tactiveStep: number\n\t) {\n\t\tlet heightDiff = item.clientHeight - 24;\n\t\tlet heightDiffNext = nextItem.clientHeight - 24;\n\n\t\tif (this.align === 'center') {\n\t\t\theightDiff = heightDiff / 2;\n\t\t\theightDiffNext = heightDiffNext / 2;\n\t\t}\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\tlet totalHeight = 0;\n\n\t\t\tstepperLine.style.marginTop = '0';\n\t\t\tstepperLine.style.marginBottom = '0';\n\n\t\t\tif (this.align === 'start' \|\| this.align === 'center') {\n\t\t\t\tstepperLine.style.marginTop = `-${heightDiff / 16}rem`;\n\t\t\t\ttotalHeight += heightDiff;\n\t\t\t}\n\n\t\t\tif (this.align === 'center' \|\| this.align === 'end') {\n\t\t\t\tstepperLine.style.marginBottom = `-${heightDiffNext / 16}rem`;\n\t\t\t\ttotalHeight += heightDiffNext;\n\t\t\t}\n\n\t\t\tstepperLine.style.minHeight = `calc(${totalHeight / 16}rem)`;\n\t\t}\n\t}\n}\n"],"names":[],"mappings":"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"}

package/dist/index.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!doctype html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Stencil Component Starter</title> <link rel="modulepreload" href="/build/p-530a64bf.js"><link rel="modulepreload" href="/build/p-C5CTp9IA.js"><link rel="modulepreload" href="/build/p-CBWjHURv.js"><link rel="modulepreload" href="/build/p-CT54OXR2.js"><link rel="modulepreload" href="/build/p-ChV9xqsO.js"><link rel="modulepreload" href="/build/p-DMfuKEke.js"><link rel="modulepreload" href="/build/p-DhGo7hbh.js"><script type="module" src="/build/p-530a64bf.js" data-stencil data-resources-url="/build/" data-stencil-namespace="paperless"></script> <script nomodule="" src="/build/paperless.js" data-stencil></script> <style>.touch-none{touch-action:none!important}.font-ambit{font-family:Ambit,sans-serif!important}.font-geist{font-family:Geist,serif!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.font-medium{font-weight:500!important}.lining-nums{--tw-numeric-figure:lining-nums!important}.lining-nums,.tabular-nums{font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)!important}.tabular-nums{--tw-numeric-spacing:tabular-nums!important}.text-black-teal{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.text-inherit{color:inherit!important}.antialiased{-webkit-font-smoothing:antialiased!important;-moz-osx-font-smoothing:grayscale!important}*{box-sizing:border-box;font-family:Geist,serif}.touch-none{touch-action:none!important}.font-ambit{font-family:Ambit,sans-serif!important}.font-geist{font-family:Geist,serif!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.font-medium{font-weight:500!important}.lining-nums{--tw-numeric-figure:lining-nums!important;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)!important}.text-black-teal{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.text-inherit{color:inherit!important}.antialiased{-webkit-font-smoothing:antialiased!important;-moz-osx-font-smoothing:grayscale!important}@import url(https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap);@import url(https://fonts.cdnfonts.com/css/ambit);*,* button,.font-geist,.font-geist button{font-variant-numeric:lining-nums tabular-nums}body,html{--tw-bg-opacity:1;-webkit-font-smoothing:antialiased;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));max-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));text-rendering:optimizeLegibility;width:100%}html{height:-moz-stretch;height:-webkit-stretch;height:-webkit-fill-available;height:-moz-available;height:stretch}body{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important;font-size:1rem!important;font-weight:500!important;height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));height:-moz-stretch;height:-webkit-stretch;height:-webkit-fill-available;height:-moz-available;height:stretch;line-height:1.5rem!important}body *{box-sizing:border-box}a,a:visited{color:inherit}h1,h2,h3,h4,h5{font-family:Ambit,sans-serif;font-weight:700}h1{font-size:2rem;line-height:2.5rem}h2{font-size:1.5rem;line-height:2rem}h3{font-size:1.25rem}h3,h4{line-height:1.75rem}h4{font-size:1.125rem}.scroll-lock{-webkit-overflow-scrolling:auto;overflow:hidden;overscroll-behavior:none;touch-action:none}</style> </head> <body> <p-button>Test</p-button> <script data-build="2025-05-26T09:07:11">
+<!doctype html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Stencil Component Starter</title> <link rel="modulepreload" href="/build/p-c38b9836.js"><link rel="modulepreload" href="/build/p-C5CTp9IA.js"><link rel="modulepreload" href="/build/p-CBWjHURv.js"><link rel="modulepreload" href="/build/p-CT54OXR2.js"><link rel="modulepreload" href="/build/p-ChV9xqsO.js"><link rel="modulepreload" href="/build/p-DMfuKEke.js"><link rel="modulepreload" href="/build/p-DhGo7hbh.js"><script type="module" src="/build/p-c38b9836.js" data-stencil data-resources-url="/build/" data-stencil-namespace="paperless"></script> <script nomodule="" src="/build/paperless.js" data-stencil></script> <style>.touch-none{touch-action:none!important}.font-ambit{font-family:Ambit,sans-serif!important}.font-geist{font-family:Geist,serif!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.font-medium{font-weight:500!important}.lining-nums{--tw-numeric-figure:lining-nums!important}.lining-nums,.tabular-nums{font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)!important}.tabular-nums{--tw-numeric-spacing:tabular-nums!important}.text-black-teal{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.text-inherit{color:inherit!important}.antialiased{-webkit-font-smoothing:antialiased!important;-moz-osx-font-smoothing:grayscale!important}*{box-sizing:border-box;font-family:Geist,serif}.touch-none{touch-action:none!important}.font-ambit{font-family:Ambit,sans-serif!important}.font-geist{font-family:Geist,serif!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.font-medium{font-weight:500!important}.lining-nums{--tw-numeric-figure:lining-nums!important;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)!important}.text-black-teal{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.text-inherit{color:inherit!important}.antialiased{-webkit-font-smoothing:antialiased!important;-moz-osx-font-smoothing:grayscale!important}@import url(https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap);@import url(https://fonts.cdnfonts.com/css/ambit);*,* button,.font-geist,.font-geist button{font-variant-numeric:lining-nums tabular-nums}body,html{--tw-bg-opacity:1;-webkit-font-smoothing:antialiased;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));max-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));text-rendering:optimizeLegibility;width:100%}html{height:-moz-stretch;height:-webkit-stretch;height:-webkit-fill-available;height:-moz-available;height:stretch}body{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important;font-size:1rem!important;font-weight:500!important;height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));height:-moz-stretch;height:-webkit-stretch;height:-webkit-fill-available;height:-moz-available;height:stretch;line-height:1.5rem!important}body *{box-sizing:border-box}a,a:visited{color:inherit}h1,h2,h3,h4,h5{font-family:Ambit,sans-serif;font-weight:700}h1{font-size:2rem;line-height:2.5rem}h2{font-size:1.5rem;line-height:2rem}h3{font-size:1.25rem}h3,h4{line-height:1.75rem}h4{font-size:1.125rem}.scroll-lock{-webkit-overflow-scrolling:auto;overflow:hidden;overscroll-behavior:none;touch-action:none}</style> </head> <body> <p-button>Test</p-button> <script data-build="2025-05-26T11:55:01">
 if ('serviceWorker' in navigator && location.protocol !== 'file:') {
   window.addEventListener('load', function() {
     navigator.serviceWorker.register('/sw.js')

package/dist/paperless/p-2e09eb7f.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,g as e,h as i,F as s}from"./p-DhGo7hbh.js";import{c as r}from"./p-CBWjHURv.js";import"./p-ChV9xqsO.js";const n="{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.h-auto{height:auto!important}.w-full{width:100%!important}.resize{resize:both!important}.flex-col{flex-direction:column!important}.flex-wrap{flex-wrap:wrap!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.overflow-auto{overflow:auto!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-negative-red{--tw-border-opacity:1!important;border-color:rgb(230 30 30/var(--tw-border-opacity,1))!important}.opacity-0{opacity:0!important}.opacity-100{opacity:1!important}";const o=r(["flex gap-2 border border-solid border-negative-red resize overflow-auto"],{variants:{direction:{vertical:"w-full flex-col flex-wrap",horizontal:"h-auto items-center"},generatedOnce:{true:"opacity-100",false:"opacity-0"}}});const a=class{constructor(e){t(this,e)}steps;activeStep=1;enableAutoStatus=true;direction="horizontal";align="center";contentPosition="end";get _el(){return e(this)}_generatedOnce=false;_loaded=false;_generateTimeout;_containerRef;_resizeObserver;_hasSlotItems=false;componentDidLoad(){this._hasSlotItems=!!this._el.querySelector(":scope > ");this._loaded=true}disconnectCallback(){if(this._resizeObserver){this._resizeObserver.disconnect()}}render(){if(!this._loaded){return}if(!this._hasSlotItems){const t=typeof this.steps==="string"?JSON.parse(this.steps):this.steps;if(!t?.length){return}const e=t.map(((e,r)=>{const n=this._getItem(typeof e==="string"?{active:false,finished:false,content:e}:e,r);return i(s,null,n,r<t.length-1&&this._getLine(r))}));return i("div",{class:o({direction:this.direction,generatedOnce:true}),ref:t=>this._setContainerRef(t)},e)}return i("div",{class:o({direction:this.direction,generatedOnce:this._generatedOnce}),ref:t=>this._setContainerRef(t)},i("slot",{onSlotchange:()=>this._generateLinesOnce()}))}_onAlignChange(){this._generateLinesOnce()}_onDirectionChange(){this._generateLinesOnce()}_onActiveStepChange(){this._generateLinesOnce()}_setContainerRef(t){this._containerRef=t;if(this._resizeObserver){this._resizeObserver.disconnect()}this._resizeObserver=new ResizeObserver((()=>this._generateLinesOnce()));this._resizeObserver.observe(this._containerRef)}_getItem(t,e){const s=this.activeStep-1\|\|0;return i("p-stepper-item",{active:this.enableAutoStatus?e===s:t.active,finished:this.enableAutoStatus?e<s:t.finished,number:e+1,align:this.direction==="vertical"?this.align:"start",contentPosition:this.contentPosition},t.content)}_getLine(t){const e=this.activeStep-1\|\|0;return i("p-stepper-line",{active:t<e,direction:this.direction})}_checkItems(t){const e=this.activeStep-1\|\|0;for(let i=0;i<t?.length;i++){const s=t.item(i);if(this.enableAutoStatus){s.active=i===e;s.finished=i<e}s.number=i+1;s.align=this.direction==="vertical"?this.align:"start";s.contentPosition=this.contentPosition}}_generateLinesOnce(){if(!this._hasSlotItems){return}if(this._generateTimeout){clearTimeout(this._generateTimeout);this._generateTimeout=null}this._generateTimeout=setTimeout((()=>{const t=this._el.querySelectorAll("p-stepper-item");this._checkItems(t);this._generateLines(t);this._generateTimeout=null}),50)}_generateLines(t){if(!this._el){return}let e=this.activeStep-1\|\|0;for(let i=0;i<t?.length;i++){const s=t.item(i);if(i<t.length-1){let t=s.nextElementSibling;if(t&&t.tagName.toLowerCase()==="p-stepper-item"){const r=document.createElement("p-stepper-line");this._el.insertBefore(r,t);this._setLineData(r,s,t,i,e);const n=r.previousElementSibling;if(n&&n.tagName.toLowerCase()==="p-stepper-line"){n.remove()}continue}if(t&&t.tagName.toLowerCase()==="p-stepper-line"){const r=t;t=t.nextElementSibling;if(t&&t.tagName.toLowerCase()==="p-stepper-item"){this._setLineData(r,s,t,i,e)}}}if(i>0){const t=s.previousElementSibling;if(t&&t.tagName.toLowerCase()==="p-stepper-line"){t.direction=this.direction;t.active=s.active\|\|s.finished}}}const i=this._el.querySelectorAll("p-stepper-line:not(:has(+ p-stepper-item)), p-stepper-line:first-child");for(let t=i.length-1;t>=0;t--){const e=i.item(t);e.remove()}if(!this._generatedOnce){this._generatedOnce=true}}_setLineData(t,e,i,s,r){let n=e.clientHeight-24;let o=i.clientHeight-24;if(this.align==="center"){n=n/2;o=o/2}t.direction=this.direction;t.active=s<r;if(n>0&&this.direction==="vertical"){let e=0;t.style.marginTop="0";t.style.marginBottom="0";if(this.align==="start"\|\|this.align==="center"){t.style.marginTop=`-${n/16}rem`;e+=n}if(this.align==="center"\|\|this.align==="end"){t.style.marginBottom=`-${o/16}rem`;e+=o}t.style.minHeight=`calc(${e/16}rem)`}}static get watchers(){return{align:["_onAlignChange"],direction:["_onDirectionChange"],activeStep:["_onActiveStepChange"]}}};a.style=n;export{a as p_stepper};
2	+ //# sourceMappingURL=p-2e09eb7f.entry.js.map