@paperless/core 1.67.5 → 1.67.6
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.
- package/CHANGELOG.md +11 -0
- package/dist/build/p-4ee6e401.entry.js +2 -0
- package/dist/build/p-4ee6e401.entry.js.map +1 -0
- package/dist/build/paperless.esm.js +1 -1
- package/dist/build/paperless.esm.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/p-stepper.cjs.entry.js +7 -3
- package/dist/cjs/p-stepper.cjs.entry.js.map +1 -1
- package/dist/cjs/paperless.cjs.js +1 -1
- package/dist/collection/components/molecules/stepper/stepper.component.js +25 -3
- package/dist/collection/components/molecules/stepper/stepper.component.js.map +1 -1
- package/dist/components/p-stepper.js +8 -3
- package/dist/components/p-stepper.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/p-stepper.entry.js +7 -3
- package/dist/esm/p-stepper.entry.js.map +1 -1
- package/dist/esm/paperless.js +1 -1
- package/dist/index.html +1 -1
- package/dist/paperless/p-4ee6e401.entry.js +2 -0
- package/dist/paperless/p-4ee6e401.entry.js.map +1 -0
- package/dist/paperless/paperless.esm.js +1 -1
- package/dist/paperless/paperless.esm.js.map +1 -1
- package/dist/sw.js +1 -1
- package/dist/sw.js.map +1 -1
- package/dist/types/components/molecules/stepper/stepper.component.d.ts +4 -0
- package/dist/types/components.d.ts +8 -0
- package/hydrate/index.js +8 -3
- package/package.json +1 -1
- package/dist/build/p-a924f6fe.entry.js +0 -2
- package/dist/build/p-a924f6fe.entry.js.map +0 -1
- package/dist/paperless/p-a924f6fe.entry.js +0 -2
- package/dist/paperless/p-a924f6fe.entry.js.map +0 -1
|
@@ -1177,6 +1177,10 @@ export namespace Components {
|
|
|
1177
1177
|
* The direction of the stepper
|
|
1178
1178
|
*/
|
|
1179
1179
|
"direction": 'horizontal' | 'vertical';
|
|
1180
|
+
/**
|
|
1181
|
+
* Wether to automatically apply active & finished to items
|
|
1182
|
+
*/
|
|
1183
|
+
"enableAutoStatus": boolean;
|
|
1180
1184
|
}
|
|
1181
1185
|
interface PStepperItem {
|
|
1182
1186
|
/**
|
|
@@ -3495,6 +3499,10 @@ declare namespace LocalJSX {
|
|
|
3495
3499
|
* The direction of the stepper
|
|
3496
3500
|
*/
|
|
3497
3501
|
"direction"?: 'horizontal' | 'vertical';
|
|
3502
|
+
/**
|
|
3503
|
+
* Wether to automatically apply active & finished to items
|
|
3504
|
+
*/
|
|
3505
|
+
"enableAutoStatus"?: boolean;
|
|
3498
3506
|
}
|
|
3499
3507
|
interface PStepperItem {
|
|
3500
3508
|
/**
|
package/hydrate/index.js
CHANGED
|
@@ -21828,8 +21828,10 @@ class Stepper {
|
|
|
21828
21828
|
let directionChanged = false;
|
|
21829
21829
|
for (let i = 0; i < (items === null || items === void 0 ? void 0 : items.length); i++) {
|
|
21830
21830
|
const item = items.item(i);
|
|
21831
|
-
|
|
21832
|
-
|
|
21831
|
+
if (this.enableAutoStatus) {
|
|
21832
|
+
item.active = i === activeStep;
|
|
21833
|
+
item.finished = i < activeStep;
|
|
21834
|
+
}
|
|
21833
21835
|
if (item.direction !== this.direction && !directionChanged) {
|
|
21834
21836
|
directionChanged = true;
|
|
21835
21837
|
}
|
|
@@ -21866,7 +21868,8 @@ class Stepper {
|
|
|
21866
21868
|
}
|
|
21867
21869
|
if (i > 0) {
|
|
21868
21870
|
const previousItem = item.previousElementSibling;
|
|
21869
|
-
if (previousItem
|
|
21871
|
+
if (previousItem &&
|
|
21872
|
+
previousItem.tagName.toLowerCase() === 'p-stepper-line') {
|
|
21870
21873
|
previousItem.direction = this.direction;
|
|
21871
21874
|
previousItem.active = item.active || item.finished;
|
|
21872
21875
|
}
|
|
@@ -21891,6 +21894,7 @@ class Stepper {
|
|
|
21891
21894
|
}
|
|
21892
21895
|
};
|
|
21893
21896
|
this.activeStep = 1;
|
|
21897
|
+
this.enableAutoStatus = true;
|
|
21894
21898
|
this.direction = 'horizontal';
|
|
21895
21899
|
this.contentPosition = 'end';
|
|
21896
21900
|
this._rendering = false;
|
|
@@ -21920,6 +21924,7 @@ class Stepper {
|
|
|
21920
21924
|
"$tagName$": "p-stepper",
|
|
21921
21925
|
"$members$": {
|
|
21922
21926
|
"activeStep": [2, "active-step"],
|
|
21927
|
+
"enableAutoStatus": [4, "enable-auto-status"],
|
|
21923
21928
|
"direction": [513],
|
|
21924
21929
|
"contentPosition": [513, "content-position"],
|
|
21925
21930
|
"_rendering": [32]
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as t,h as i,H as e,g as s}from"./p-0c2cc6c4.js";const o=".flex{display:flex!important}.h-auto{height:auto!important}.w-full{width:100%!important}.flex-col{flex-direction:column!important}.flex-wrap{flex-wrap:wrap!important}*{box-sizing:border-box}:host{display:flex}:host([direction=horizontal]){align-items:flex-end;height:auto}:host([direction=vertical]){align-items:flex-start;flex-direction:column;flex-wrap:wrap;min-height:100%;width:100%}:host([direction=vertical][content-position=start]){align-items:flex-end}.static{position:static!important}";const n=class{constructor(i){t(this,i);this._onSlotChange=async t=>this._generateStepsOnce();this._generateStepsOnce=()=>{if(this._rendering){return}if(this._generateTimeout){clearTimeout(this._generateTimeout);this._generateTimeout=null}this._generateTimeout=setTimeout((()=>this._generateSteps()))};this._generateSteps=async()=>{if(!this._el||this._rendering){return}this._rendering=true;let t=this.activeStep-1||0;const i=this._el.querySelectorAll("p-stepper-item");if(!this.activeStep||t<0){for(let e=0;e<(i===null||i===void 0?void 0:i.length);e++){const s=i.item(e);if(s.active){t=e}if(t<0&&s.finished){t=e+1}}}let e=false;for(let s=0;s<(i===null||i===void 0?void 0:i.length);s++){const o=i.item(s);o.active=s===t;o.finished=s<t;if(o.direction!==this.direction&&!e){e=true}o.direction=this.direction;o.align=s===0?"start":s===(i===null||i===void 0?void 0:i.length)-1?"end":"center";o.contentPosition=this.contentPosition}if(e){await new Promise((t=>setTimeout(t,200)))}for(let e=0;e<(i===null||i===void 0?void 0:i.length);e++){const s=i.item(e);if(e<i.length-1){let i=s.nextElementSibling;if(i&&i.tagName.toLowerCase()==="p-stepper-item"){const o=document.createElement("p-stepper-line");this._el.insertBefore(o,i);this._setStepperLineData(o,s,i,e,t);const n=o.previousElementSibling;if(n&&n.tagName.toLowerCase()==="p-stepper-line"){n.remove()}continue}if(i&&i.tagName.toLowerCase()==="p-stepper-line"){const o=i;i=i.nextElementSibling;if(i&&i.tagName.toLowerCase()==="p-stepper-item"){this._setStepperLineData(o,s,i,e,t)}}}if(e>0){const t=s.previousElementSibling;if(t.tagName.toLowerCase()==="p-stepper-line"){t.direction=this.direction;t.active=s.active||s.finished}}}const s=this._el.querySelectorAll("p-stepper-line:not(:has(+ p-stepper-item)), p-stepper-line:first-child");for(let t=s.length-1;t>=0;t--){const i=s.item(t);i.remove()}setTimeout((()=>this._rendering=false),100)};this._setStepperLineData=(t,i,e,s,o)=>{const n=i.clientHeight/2;const r=e.clientHeight/2;t.direction=this.direction;t.active=s<o;if(n>0&&this.direction==="vertical"){t.style.marginTop=`-${n/16}rem`;t.style.marginBottom=`-${r/16}rem`;t.style.minHeight=`calc(1rem + ${(n+r)/16}rem)`}};this.activeStep=1;this.direction="horizontal";this.contentPosition="end";this._rendering=false}componentDidLoad(){this._resizeObserver=new ResizeObserver((()=>this._generateStepsOnce()));this._resizeObserver.observe(this._el)}disconnectCallback(){if(this._resizeObserver){this._resizeObserver.disconnect()}}render(){return i(e,{class:"p-stepper"},i("slot",{onSlotchange:this._onSlotChange}))}_onActiveStepChange(){this._generateStepsOnce()}get _el(){return s(this)}static get watchers(){return{activeStep:["_onActiveStepChange"]}}};n.style=o;export{n as p_stepper};
|
|
2
|
-
//# sourceMappingURL=p-a924f6fe.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["stepperComponentCss","Stepper","this","_onSlotChange","async","_e","_generateStepsOnce","_rendering","_generateTimeout","clearTimeout","setTimeout","_generateSteps","_el","activeStep","items","querySelectorAll","i","length","item","active","finished","directionChanged","direction","align","contentPosition","Promise","resolve","nextItem","nextElementSibling","tagName","toLowerCase","stepperLine","document","createElement","insertBefore","_setStepperLineData","previous","previousElementSibling","remove","previousItem","lines","j","line","heightDiff","clientHeight","heightDiffNext","style","marginTop","marginBottom","minHeight","componentDidLoad","_resizeObserver","ResizeObserver","observe","disconnectCallback","disconnect","render","h","Host","class","onSlotchange","_onActiveStepChange"],"sources":["src/components/molecules/stepper/stepper.component.scss?tag=p-stepper&encapsulation=shadow","src/components/molecules/stepper/stepper.component.tsx"],"sourcesContent":[":host {\n\t@apply flex;\n}\n\n:host([direction='horizontal']) {\n\t@apply h-auto items-end;\n}\n\n:host([direction='vertical']) {\n\t@apply flex-col flex-wrap items-start;\n\t@apply w-full min-h-full;\n}\n\n:host([direction='vertical'][content-position='start']) {\n\t@apply items-end;\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n\ttag: 'p-stepper',\n\tstyleUrl: 'stepper.component.scss',\n\tshadow: true,\n})\nexport class Stepper {\n\t/**\n\t * The currently active step\n\t */\n\t@Prop() activeStep: number = 1;\n\n\t/**\n\t * The direction of the stepper\n\t */\n\t@Prop({ reflect: true }) direction: 'horizontal' | 'vertical' = 'horizontal';\n\n\t/**\n\t * The position of the content in case of vertical direction\n\t */\n\t@Prop({ reflect: true }) contentPosition: 'start' | 'end' = 'end';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t@State() private _rendering = false;\n\n\tprivate _generateTimeout: NodeJS.Timer;\n\tprivate _resizeObserver: ResizeObserver;\n\n\tprivate _onSlotChange = async (_e: Event) => this._generateStepsOnce();\n\n\tprivate _generateStepsOnce = () => {\n\t\tif (this._rendering) {\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(() => this._generateSteps());\n\t};\n\n\tprivate _generateSteps = async () => {\n\t\tif (!this._el || this._rendering) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._rendering = true;\n\n\t\tlet activeStep = this.activeStep - 1 || 0;\n\t\tconst items = this._el.querySelectorAll('p-stepper-item');\n\n\t\tif (!this.activeStep || activeStep < 0) {\n\t\t\tfor (let i = 0; i < items?.length; i++) {\n\t\t\t\tconst item = items.item(i) as any;\n\n\t\t\t\tif (item.active) {\n\t\t\t\t\tactiveStep = i;\n\t\t\t\t}\n\n\t\t\t\tif (activeStep < 0 && item.finished) {\n\t\t\t\t\tactiveStep = i + 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tlet directionChanged = false;\n\t\tfor (let i = 0; i < items?.length; i++) {\n\t\t\tconst item = items.item(i) as any;\n\n\t\t\titem.active = i === activeStep;\n\t\t\titem.finished = i < activeStep;\n\n\t\t\tif (item.direction !== this.direction && !directionChanged) {\n\t\t\t\tdirectionChanged = true;\n\t\t\t}\n\n\t\t\titem.direction = this.direction;\n\t\t\titem.align =\n\t\t\t\ti === 0 ? 'start' : i === items?.length - 1 ? 'end' : 'center';\n\t\t\titem.contentPosition = this.contentPosition;\n\t\t}\n\n\t\tif (directionChanged) {\n\t\t\t// super hacky way to ensure all elements that have a direction changed are re-rendered\n\t\t\tawait new Promise(resolve => setTimeout(resolve, 200));\n\t\t}\n\n\t\tfor (let i = 0; i < items?.length; i++) {\n\t\t\tconst item = items.item(i) as any;\n\n\t\t\tif (i < items.length - 1) {\n\t\t\t\tlet nextItem = item.nextElementSibling;\n\n\t\t\t\tif (nextItem && nextItem.tagName.toLowerCase() === 'p-stepper-item') {\n\t\t\t\t\tconst stepperLine = document.createElement('p-stepper-line');\n\t\t\t\t\tthis._el.insertBefore(stepperLine, nextItem);\n\t\t\t\t\tthis._setStepperLineData(stepperLine, item, nextItem, i, activeStep);\n\n\t\t\t\t\tconst previous = stepperLine.previousElementSibling;\n\t\t\t\t\tif (previous && previous.tagName.toLowerCase() === 'p-stepper-line') {\n\t\t\t\t\t\tprevious.remove();\n\t\t\t\t\t}\n\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tif (nextItem && nextItem.tagName.toLowerCase() === 'p-stepper-line') {\n\t\t\t\t\tconst stepperLine = nextItem;\n\t\t\t\t\tnextItem = nextItem.nextElementSibling;\n\n\t\t\t\t\tif (nextItem && nextItem.tagName.toLowerCase() === 'p-stepper-item') {\n\t\t\t\t\t\tthis._setStepperLineData(\n\t\t\t\t\t\t\tstepperLine,\n\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\tnextItem,\n\t\t\t\t\t\t\ti,\n\t\t\t\t\t\t\tactiveStep\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (i > 0) {\n\t\t\t\tconst previousItem = item.previousElementSibling;\n\t\t\t\tif (previousItem.tagName.toLowerCase() === 'p-stepper-line') {\n\t\t\t\t\tpreviousItem.direction = this.direction;\n\t\t\t\t\tpreviousItem.active = item.active || item.finished;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tconst lines = this._el.querySelectorAll(\n\t\t\t'p-stepper-line:not(:has(+ p-stepper-item)), p-stepper-line:first-child'\n\t\t);\n\t\tfor (let j = lines.length - 1; j >= 0; j--) {\n\t\t\tconst line = lines.item(j);\n\t\t\tline.remove();\n\t\t}\n\n\t\tsetTimeout(() => (this._rendering = false), 100);\n\t};\n\n\tprivate _setStepperLineData = (\n\t\tstepperLine: HTMLPStepperLineElement,\n\t\titem: HTMLPStepperItemElement,\n\t\tnextItem: HTMLPStepperItemElement,\n\t\ti: number,\n\t\tactiveStep: number\n\t) => {\n\t\tconst heightDiff = item.clientHeight / 2;\n\t\tconst heightDiffNext = nextItem.clientHeight / 2;\n\n\t\tstepperLine.direction = this.direction;\n\t\tstepperLine.active = i < activeStep;\n\n\t\tif (heightDiff > 0 && this.direction === 'vertical') {\n\t\t\tstepperLine.style.marginTop = `-${heightDiff / 16}rem`;\n\t\t\tstepperLine.style.marginBottom = `-${heightDiffNext / 16}rem`;\n\t\t\tstepperLine.style.minHeight = `calc(1rem + ${\n\t\t\t\t(heightDiff + heightDiffNext) / 16\n\t\t\t}rem)`;\n\t\t}\n\t};\n\n\tcomponentDidLoad() {\n\t\tthis._resizeObserver = new ResizeObserver(() => this._generateStepsOnce());\n\t\tthis._resizeObserver.observe(this._el);\n\t}\n\n\tdisconnectCallback() {\n\t\tif (this._resizeObserver) {\n\t\t\tthis._resizeObserver.disconnect();\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-stepper'>\n\t\t\t\t<slot onSlotchange={this._onSlotChange} />\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Watch('activeStep')\n\tprotected _onActiveStepChange() {\n\t\tthis._generateStepsOnce();\n\t}\n}\n"],"mappings":"yDAAA,MAAMA,EAAsB,if,MCOfC,EAAO,M,yBA0BXC,KAAAC,cAAgBC,MAAOC,GAAcH,KAAKI,qBAE1CJ,KAAAI,mBAAqB,KAC5B,GAAIJ,KAAKK,WAAY,CACpB,M,CAGD,GAAIL,KAAKM,iBAAkB,CAC1BC,aAAaP,KAAKM,kBAClBN,KAAKM,iBAAmB,I,CAGzBN,KAAKM,iBAAmBE,YAAW,IAAMR,KAAKS,kBAAiB,EAGxDT,KAAAS,eAAiBP,UACxB,IAAKF,KAAKU,KAAOV,KAAKK,WAAY,CACjC,M,CAGDL,KAAKK,WAAa,KAElB,IAAIM,EAAaX,KAAKW,WAAa,GAAK,EACxC,MAAMC,EAAQZ,KAAKU,IAAIG,iBAAiB,kBAExC,IAAKb,KAAKW,YAAcA,EAAa,EAAG,CACvC,IAAK,IAAIG,EAAI,EAAGA,GAAIF,IAAK,MAALA,SAAK,SAALA,EAAOG,QAAQD,IAAK,CACvC,MAAME,EAAOJ,EAAMI,KAAKF,GAExB,GAAIE,EAAKC,OAAQ,CAChBN,EAAaG,C,CAGd,GAAIH,EAAa,GAAKK,EAAKE,SAAU,CACpCP,EAAaG,EAAI,C,GAKpB,IAAIK,EAAmB,MACvB,IAAK,IAAIL,EAAI,EAAGA,GAAIF,IAAK,MAALA,SAAK,SAALA,EAAOG,QAAQD,IAAK,CACvC,MAAME,EAAOJ,EAAMI,KAAKF,GAExBE,EAAKC,OAASH,IAAMH,EACpBK,EAAKE,SAAWJ,EAAIH,EAEpB,GAAIK,EAAKI,YAAcpB,KAAKoB,YAAcD,EAAkB,CAC3DA,EAAmB,I,CAGpBH,EAAKI,UAAYpB,KAAKoB,UACtBJ,EAAKK,MACJP,IAAM,EAAI,QAAUA,KAAMF,IAAK,MAALA,SAAK,SAALA,EAAOG,QAAS,EAAI,MAAQ,SACvDC,EAAKM,gBAAkBtB,KAAKsB,e,CAG7B,GAAIH,EAAkB,OAEf,IAAII,SAAQC,GAAWhB,WAAWgB,EAAS,M,CAGlD,IAAK,IAAIV,EAAI,EAAGA,GAAIF,IAAK,MAALA,SAAK,SAALA,EAAOG,QAAQD,IAAK,CACvC,MAAME,EAAOJ,EAAMI,KAAKF,GAExB,GAAIA,EAAIF,EAAMG,OAAS,EAAG,CACzB,IAAIU,EAAWT,EAAKU,mBAEpB,GAAID,GAAYA,EAASE,QAAQC,gBAAkB,iBAAkB,CACpE,MAAMC,EAAcC,SAASC,cAAc,kBAC3C/B,KAAKU,IAAIsB,aAAaH,EAAaJ,GACnCzB,KAAKiC,oBAAoBJ,EAAab,EAAMS,EAAUX,EAAGH,GAEzD,MAAMuB,EAAWL,EAAYM,uBAC7B,GAAID,GAAYA,EAASP,QAAQC,gBAAkB,iBAAkB,CACpEM,EAASE,Q,CAGV,Q,CAGD,GAAIX,GAAYA,EAASE,QAAQC,gBAAkB,iBAAkB,CACpE,MAAMC,EAAcJ,EACpBA,EAAWA,EAASC,mBAEpB,GAAID,GAAYA,EAASE,QAAQC,gBAAkB,iBAAkB,CACpE5B,KAAKiC,oBACJJ,EACAb,EACAS,EACAX,EACAH,E,GAMJ,GAAIG,EAAI,EAAG,CACV,MAAMuB,EAAerB,EAAKmB,uBAC1B,GAAIE,EAAaV,QAAQC,gBAAkB,iBAAkB,CAC5DS,EAAajB,UAAYpB,KAAKoB,UAC9BiB,EAAapB,OAASD,EAAKC,QAAUD,EAAKE,Q,GAK7C,MAAMoB,EAAQtC,KAAKU,IAAIG,iBACtB,0EAED,IAAK,IAAI0B,EAAID,EAAMvB,OAAS,EAAGwB,GAAK,EAAGA,IAAK,CAC3C,MAAMC,EAAOF,EAAMtB,KAAKuB,GACxBC,EAAKJ,Q,CAGN5B,YAAW,IAAOR,KAAKK,WAAa,OAAQ,IAAI,EAGzCL,KAAAiC,oBAAsB,CAC7BJ,EACAb,EACAS,EACAX,EACAH,KAEA,MAAM8B,EAAazB,EAAK0B,aAAe,EACvC,MAAMC,EAAiBlB,EAASiB,aAAe,EAE/Cb,EAAYT,UAAYpB,KAAKoB,UAC7BS,EAAYZ,OAASH,EAAIH,EAEzB,GAAI8B,EAAa,GAAKzC,KAAKoB,YAAc,WAAY,CACpDS,EAAYe,MAAMC,UAAY,IAAIJ,EAAa,QAC/CZ,EAAYe,MAAME,aAAe,IAAIH,EAAiB,QACtDd,EAAYe,MAAMG,UAAY,gBAC5BN,EAAaE,GAAkB,Q,mBA3JN,E,eAKmC,a,qBAKJ,M,gBAO9B,K,CA+I9B,gBAAAK,GACChD,KAAKiD,gBAAkB,IAAIC,gBAAe,IAAMlD,KAAKI,uBACrDJ,KAAKiD,gBAAgBE,QAAQnD,KAAKU,I,CAGnC,kBAAA0C,GACC,GAAIpD,KAAKiD,gBAAiB,CACzBjD,KAAKiD,gBAAgBI,Y,EAIvB,MAAAC,GACC,OACCC,EAACC,EAAI,CAACC,MAAM,aACXF,EAAA,QAAMG,aAAc1D,KAAKC,gB,CAMlB,mBAAA0D,GACT3D,KAAKI,oB"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as t,h as i,H as e,g as s}from"./p-0c2cc6c4.js";const o=".flex{display:flex!important}.h-auto{height:auto!important}.w-full{width:100%!important}.flex-col{flex-direction:column!important}.flex-wrap{flex-wrap:wrap!important}*{box-sizing:border-box}:host{display:flex}:host([direction=horizontal]){align-items:flex-end;height:auto}:host([direction=vertical]){align-items:flex-start;flex-direction:column;flex-wrap:wrap;min-height:100%;width:100%}:host([direction=vertical][content-position=start]){align-items:flex-end}.static{position:static!important}";const n=class{constructor(i){t(this,i);this._onSlotChange=async t=>this._generateStepsOnce();this._generateStepsOnce=()=>{if(this._rendering){return}if(this._generateTimeout){clearTimeout(this._generateTimeout);this._generateTimeout=null}this._generateTimeout=setTimeout((()=>this._generateSteps()))};this._generateSteps=async()=>{if(!this._el||this._rendering){return}this._rendering=true;let t=this.activeStep-1||0;const i=this._el.querySelectorAll("p-stepper-item");if(!this.activeStep||t<0){for(let e=0;e<(i===null||i===void 0?void 0:i.length);e++){const s=i.item(e);if(s.active){t=e}if(t<0&&s.finished){t=e+1}}}let e=false;for(let s=0;s<(i===null||i===void 0?void 0:i.length);s++){const o=i.item(s);o.active=s===t;o.finished=s<t;if(o.direction!==this.direction&&!e){e=true}o.direction=this.direction;o.align=s===0?"start":s===(i===null||i===void 0?void 0:i.length)-1?"end":"center";o.contentPosition=this.contentPosition}if(e){await new Promise((t=>setTimeout(t,200)))}for(let e=0;e<(i===null||i===void 0?void 0:i.length);e++){const s=i.item(e);if(e<i.length-1){let i=s.nextElementSibling;if(i&&i.tagName.toLowerCase()==="p-stepper-item"){const o=document.createElement("p-stepper-line");this._el.insertBefore(o,i);this._setStepperLineData(o,s,i,e,t);const n=o.previousElementSibling;if(n&&n.tagName.toLowerCase()==="p-stepper-line"){n.remove()}continue}if(i&&i.tagName.toLowerCase()==="p-stepper-line"){const o=i;i=i.nextElementSibling;if(i&&i.tagName.toLowerCase()==="p-stepper-item"){this._setStepperLineData(o,s,i,e,t)}}}if(e>0){const t=s.previousElementSibling;if(t.tagName.toLowerCase()==="p-stepper-line"){t.direction=this.direction;t.active=s.active||s.finished}}}const s=this._el.querySelectorAll("p-stepper-line:not(:has(+ p-stepper-item)), p-stepper-line:first-child");for(let t=s.length-1;t>=0;t--){const i=s.item(t);i.remove()}setTimeout((()=>this._rendering=false),100)};this._setStepperLineData=(t,i,e,s,o)=>{const n=i.clientHeight/2;const r=e.clientHeight/2;t.direction=this.direction;t.active=s<o;if(n>0&&this.direction==="vertical"){t.style.marginTop=`-${n/16}rem`;t.style.marginBottom=`-${r/16}rem`;t.style.minHeight=`calc(1rem + ${(n+r)/16}rem)`}};this.activeStep=1;this.direction="horizontal";this.contentPosition="end";this._rendering=false}componentDidLoad(){this._resizeObserver=new ResizeObserver((()=>this._generateStepsOnce()));this._resizeObserver.observe(this._el)}disconnectCallback(){if(this._resizeObserver){this._resizeObserver.disconnect()}}render(){return i(e,{class:"p-stepper"},i("slot",{onSlotchange:this._onSlotChange}))}_onActiveStepChange(){this._generateStepsOnce()}get _el(){return s(this)}static get watchers(){return{activeStep:["_onActiveStepChange"]}}};n.style=o;export{n as p_stepper};
|
|
2
|
-
//# sourceMappingURL=p-a924f6fe.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["stepperComponentCss","Stepper","this","_onSlotChange","async","_e","_generateStepsOnce","_rendering","_generateTimeout","clearTimeout","setTimeout","_generateSteps","_el","activeStep","items","querySelectorAll","i","length","item","active","finished","directionChanged","direction","align","contentPosition","Promise","resolve","nextItem","nextElementSibling","tagName","toLowerCase","stepperLine","document","createElement","insertBefore","_setStepperLineData","previous","previousElementSibling","remove","previousItem","lines","j","line","heightDiff","clientHeight","heightDiffNext","style","marginTop","marginBottom","minHeight","componentDidLoad","_resizeObserver","ResizeObserver","observe","disconnectCallback","disconnect","render","h","Host","class","onSlotchange","_onActiveStepChange"],"sources":["src/components/molecules/stepper/stepper.component.scss?tag=p-stepper&encapsulation=shadow","src/components/molecules/stepper/stepper.component.tsx"],"sourcesContent":[":host {\n\t@apply flex;\n}\n\n:host([direction='horizontal']) {\n\t@apply h-auto items-end;\n}\n\n:host([direction='vertical']) {\n\t@apply flex-col flex-wrap items-start;\n\t@apply w-full min-h-full;\n}\n\n:host([direction='vertical'][content-position='start']) {\n\t@apply items-end;\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n\ttag: 'p-stepper',\n\tstyleUrl: 'stepper.component.scss',\n\tshadow: true,\n})\nexport class Stepper {\n\t/**\n\t * The currently active step\n\t */\n\t@Prop() activeStep: number = 1;\n\n\t/**\n\t * The direction of the stepper\n\t */\n\t@Prop({ reflect: true }) direction: 'horizontal' | 'vertical' = 'horizontal';\n\n\t/**\n\t * The position of the content in case of vertical direction\n\t */\n\t@Prop({ reflect: true }) contentPosition: 'start' | 'end' = 'end';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t@State() private _rendering = false;\n\n\tprivate _generateTimeout: NodeJS.Timer;\n\tprivate _resizeObserver: ResizeObserver;\n\n\tprivate _onSlotChange = async (_e: Event) => this._generateStepsOnce();\n\n\tprivate _generateStepsOnce = () => {\n\t\tif (this._rendering) {\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(() => this._generateSteps());\n\t};\n\n\tprivate _generateSteps = async () => {\n\t\tif (!this._el || this._rendering) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._rendering = true;\n\n\t\tlet activeStep = this.activeStep - 1 || 0;\n\t\tconst items = this._el.querySelectorAll('p-stepper-item');\n\n\t\tif (!this.activeStep || activeStep < 0) {\n\t\t\tfor (let i = 0; i < items?.length; i++) {\n\t\t\t\tconst item = items.item(i) as any;\n\n\t\t\t\tif (item.active) {\n\t\t\t\t\tactiveStep = i;\n\t\t\t\t}\n\n\t\t\t\tif (activeStep < 0 && item.finished) {\n\t\t\t\t\tactiveStep = i + 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tlet directionChanged = false;\n\t\tfor (let i = 0; i < items?.length; i++) {\n\t\t\tconst item = items.item(i) as any;\n\n\t\t\titem.active = i === activeStep;\n\t\t\titem.finished = i < activeStep;\n\n\t\t\tif (item.direction !== this.direction && !directionChanged) {\n\t\t\t\tdirectionChanged = true;\n\t\t\t}\n\n\t\t\titem.direction = this.direction;\n\t\t\titem.align =\n\t\t\t\ti === 0 ? 'start' : i === items?.length - 1 ? 'end' : 'center';\n\t\t\titem.contentPosition = this.contentPosition;\n\t\t}\n\n\t\tif (directionChanged) {\n\t\t\t// super hacky way to ensure all elements that have a direction changed are re-rendered\n\t\t\tawait new Promise(resolve => setTimeout(resolve, 200));\n\t\t}\n\n\t\tfor (let i = 0; i < items?.length; i++) {\n\t\t\tconst item = items.item(i) as any;\n\n\t\t\tif (i < items.length - 1) {\n\t\t\t\tlet nextItem = item.nextElementSibling;\n\n\t\t\t\tif (nextItem && nextItem.tagName.toLowerCase() === 'p-stepper-item') {\n\t\t\t\t\tconst stepperLine = document.createElement('p-stepper-line');\n\t\t\t\t\tthis._el.insertBefore(stepperLine, nextItem);\n\t\t\t\t\tthis._setStepperLineData(stepperLine, item, nextItem, i, activeStep);\n\n\t\t\t\t\tconst previous = stepperLine.previousElementSibling;\n\t\t\t\t\tif (previous && previous.tagName.toLowerCase() === 'p-stepper-line') {\n\t\t\t\t\t\tprevious.remove();\n\t\t\t\t\t}\n\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tif (nextItem && nextItem.tagName.toLowerCase() === 'p-stepper-line') {\n\t\t\t\t\tconst stepperLine = nextItem;\n\t\t\t\t\tnextItem = nextItem.nextElementSibling;\n\n\t\t\t\t\tif (nextItem && nextItem.tagName.toLowerCase() === 'p-stepper-item') {\n\t\t\t\t\t\tthis._setStepperLineData(\n\t\t\t\t\t\t\tstepperLine,\n\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\tnextItem,\n\t\t\t\t\t\t\ti,\n\t\t\t\t\t\t\tactiveStep\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (i > 0) {\n\t\t\t\tconst previousItem = item.previousElementSibling;\n\t\t\t\tif (previousItem.tagName.toLowerCase() === 'p-stepper-line') {\n\t\t\t\t\tpreviousItem.direction = this.direction;\n\t\t\t\t\tpreviousItem.active = item.active || item.finished;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tconst lines = this._el.querySelectorAll(\n\t\t\t'p-stepper-line:not(:has(+ p-stepper-item)), p-stepper-line:first-child'\n\t\t);\n\t\tfor (let j = lines.length - 1; j >= 0; j--) {\n\t\t\tconst line = lines.item(j);\n\t\t\tline.remove();\n\t\t}\n\n\t\tsetTimeout(() => (this._rendering = false), 100);\n\t};\n\n\tprivate _setStepperLineData = (\n\t\tstepperLine: HTMLPStepperLineElement,\n\t\titem: HTMLPStepperItemElement,\n\t\tnextItem: HTMLPStepperItemElement,\n\t\ti: number,\n\t\tactiveStep: number\n\t) => {\n\t\tconst heightDiff = item.clientHeight / 2;\n\t\tconst heightDiffNext = nextItem.clientHeight / 2;\n\n\t\tstepperLine.direction = this.direction;\n\t\tstepperLine.active = i < activeStep;\n\n\t\tif (heightDiff > 0 && this.direction === 'vertical') {\n\t\t\tstepperLine.style.marginTop = `-${heightDiff / 16}rem`;\n\t\t\tstepperLine.style.marginBottom = `-${heightDiffNext / 16}rem`;\n\t\t\tstepperLine.style.minHeight = `calc(1rem + ${\n\t\t\t\t(heightDiff + heightDiffNext) / 16\n\t\t\t}rem)`;\n\t\t}\n\t};\n\n\tcomponentDidLoad() {\n\t\tthis._resizeObserver = new ResizeObserver(() => this._generateStepsOnce());\n\t\tthis._resizeObserver.observe(this._el);\n\t}\n\n\tdisconnectCallback() {\n\t\tif (this._resizeObserver) {\n\t\t\tthis._resizeObserver.disconnect();\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-stepper'>\n\t\t\t\t<slot onSlotchange={this._onSlotChange} />\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Watch('activeStep')\n\tprotected _onActiveStepChange() {\n\t\tthis._generateStepsOnce();\n\t}\n}\n"],"mappings":"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"}
|