@paperless/core 1.38.7 → 1.38.9
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 +20 -0
- package/dist/build/p-57204993.entry.js +2 -0
- package/dist/build/p-57204993.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 +83 -77
- 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 +88 -77
- package/dist/collection/components/molecules/stepper/stepper.component.js.map +1 -1
- package/dist/components/p-stepper.js +86 -79
- package/dist/components/p-stepper.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/p-stepper.entry.js +83 -77
- 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-57204993.entry.js +2 -0
- package/dist/paperless/p-57204993.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 +3 -1
- package/hydrate/index.js +85 -78
- package/package.json +1 -1
- package/dist/build/p-c7c6176b.entry.js +0 -2
- package/dist/build/p-c7c6176b.entry.js.map +0 -1
- package/dist/paperless/p-c7c6176b.entry.js +0 -2
- package/dist/paperless/p-c7c6176b.entry.js.map +0 -1
|
@@ -17,7 +17,9 @@ export declare class Stepper {
|
|
|
17
17
|
private _el;
|
|
18
18
|
private _rendering;
|
|
19
19
|
private _loaded;
|
|
20
|
+
private _onSlotChange;
|
|
21
|
+
private _generateSteps;
|
|
20
22
|
componentDidLoad(): void;
|
|
21
23
|
render(): any;
|
|
22
|
-
|
|
24
|
+
protected _onActiveStepChange(): void;
|
|
23
25
|
}
|
package/hydrate/index.js
CHANGED
|
@@ -21377,97 +21377,103 @@ const stepperComponentCss = "/*!@.flex*/.flex.sc-p-stepper{display:flex!importan
|
|
|
21377
21377
|
class Stepper {
|
|
21378
21378
|
constructor(hostRef) {
|
|
21379
21379
|
registerInstance(this, hostRef);
|
|
21380
|
-
this._rendering = false;
|
|
21381
21380
|
this._loaded = false;
|
|
21381
|
+
// private _steps: Array<HTMLPStepperItemElement>;
|
|
21382
|
+
this._onSlotChange = (_e) => this._generateSteps();
|
|
21383
|
+
this._generateSteps = async (firstLoad = false) => {
|
|
21384
|
+
if (!firstLoad && (!this._el || this._rendering || !this._loaded)) {
|
|
21385
|
+
return;
|
|
21386
|
+
}
|
|
21387
|
+
console.log('Start rendering');
|
|
21388
|
+
this._rendering = true;
|
|
21389
|
+
let activeStep = this.activeStep - 1 || 0;
|
|
21390
|
+
const items = this._el.querySelectorAll('p-stepper-item');
|
|
21391
|
+
if (!this.activeStep || activeStep < 0) {
|
|
21392
|
+
for (let i = 0; i < (items === null || items === void 0 ? void 0 : items.length); i++) {
|
|
21393
|
+
const item = items.item(i);
|
|
21394
|
+
if (item.active) {
|
|
21395
|
+
activeStep = i;
|
|
21396
|
+
}
|
|
21397
|
+
if (activeStep < 0 && item.finished) {
|
|
21398
|
+
activeStep = i + 1;
|
|
21399
|
+
}
|
|
21400
|
+
}
|
|
21401
|
+
}
|
|
21402
|
+
for (let i = 0; i < (items === null || items === void 0 ? void 0 : items.length); i++) {
|
|
21403
|
+
let directionChanged = false;
|
|
21404
|
+
const item = items.item(i);
|
|
21405
|
+
item.active = i === activeStep;
|
|
21406
|
+
item.finished = i < activeStep;
|
|
21407
|
+
if (item.direction !== this.direction) {
|
|
21408
|
+
directionChanged = true;
|
|
21409
|
+
}
|
|
21410
|
+
item.direction = this.direction;
|
|
21411
|
+
item.align =
|
|
21412
|
+
i === 0 ? 'start' : i === (items === null || items === void 0 ? void 0 : items.length) - 1 ? 'end' : 'center';
|
|
21413
|
+
item.contentPosition = this.contentPosition;
|
|
21414
|
+
if (i < items.length - 1) {
|
|
21415
|
+
const nextItem = item.nextElementSibling;
|
|
21416
|
+
if (nextItem &&
|
|
21417
|
+
nextItem.tagName.toLowerCase() === 'p-stepper-item') {
|
|
21418
|
+
// super hacky, but we want to wait for the css of the `item.direction` change to be applied before querying for the item.clientHeight
|
|
21419
|
+
// otherwise we always get the initial "16"
|
|
21420
|
+
if (directionChanged) {
|
|
21421
|
+
await new Promise((resolve) => setTimeout(resolve, 10));
|
|
21422
|
+
}
|
|
21423
|
+
const heightDiff = (item.clientHeight > 16
|
|
21424
|
+
? item.clientHeight - 16
|
|
21425
|
+
: item.clientHeight) / 2;
|
|
21426
|
+
const stepperLine = document.createElement('p-stepper-line');
|
|
21427
|
+
stepperLine.direction = this.direction;
|
|
21428
|
+
stepperLine.active = i <= activeStep;
|
|
21429
|
+
if (heightDiff > 0 && this.direction === 'vertical') {
|
|
21430
|
+
stepperLine.style.marginTop = `-${heightDiff / 16}rem`;
|
|
21431
|
+
stepperLine.style.marginBottom = `-${heightDiff / 16}rem`;
|
|
21432
|
+
stepperLine.style.minHeight = `calc(1rem + ${(heightDiff * 2) / 16}rem)`;
|
|
21433
|
+
}
|
|
21434
|
+
this._el.insertBefore(stepperLine, nextItem);
|
|
21435
|
+
const previous = stepperLine.previousElementSibling;
|
|
21436
|
+
if (previous &&
|
|
21437
|
+
previous.tagName.toLowerCase() === 'p-stepper-line') {
|
|
21438
|
+
previous.remove();
|
|
21439
|
+
}
|
|
21440
|
+
continue;
|
|
21441
|
+
}
|
|
21442
|
+
}
|
|
21443
|
+
if (i > 0) {
|
|
21444
|
+
const previousItem = item.previousElementSibling;
|
|
21445
|
+
if (previousItem.tagName.toLowerCase() === 'p-stepper-line') {
|
|
21446
|
+
previousItem.direction = this.direction;
|
|
21447
|
+
previousItem.active = item.active || item.finished;
|
|
21448
|
+
}
|
|
21449
|
+
}
|
|
21450
|
+
}
|
|
21451
|
+
const lines = this._el.querySelectorAll('p-stepper-line + p-stepper-line, p-stepper-line:not(:has(+ p-stepper-item))');
|
|
21452
|
+
for (let j = lines.length - 1; j >= 0; j--) {
|
|
21453
|
+
const line = lines.item(j);
|
|
21454
|
+
line.remove();
|
|
21455
|
+
}
|
|
21456
|
+
console.log('Done rendering');
|
|
21457
|
+
setTimeout(() => (this._rendering = false), 100);
|
|
21458
|
+
};
|
|
21382
21459
|
this.activeStep = 1;
|
|
21383
21460
|
this.direction = 'horizontal';
|
|
21384
21461
|
this.contentPosition = 'end';
|
|
21462
|
+
this._rendering = false;
|
|
21385
21463
|
}
|
|
21386
|
-
// private _steps: Array<HTMLPStepperItemElement>;
|
|
21387
21464
|
componentDidLoad() {
|
|
21388
21465
|
this._loaded = true;
|
|
21389
21466
|
this._generateSteps(true);
|
|
21390
21467
|
}
|
|
21391
21468
|
render() {
|
|
21392
|
-
return (hAsync(Host, { class: "p-stepper" }, hAsync("slot", { onSlotchange:
|
|
21469
|
+
return (hAsync(Host, { class: "p-stepper" }, hAsync("slot", { onSlotchange: this._onSlotChange })));
|
|
21393
21470
|
}
|
|
21394
|
-
|
|
21395
|
-
|
|
21396
|
-
return;
|
|
21397
|
-
}
|
|
21398
|
-
this._rendering = true;
|
|
21399
|
-
let activeStep = this.activeStep - 1 || 0;
|
|
21400
|
-
const items = this._el.querySelectorAll('p-stepper-item');
|
|
21401
|
-
if (!this.activeStep || activeStep < 0) {
|
|
21402
|
-
for (let i = 0; i < (items === null || items === void 0 ? void 0 : items.length); i++) {
|
|
21403
|
-
const item = items.item(i);
|
|
21404
|
-
if (item.active) {
|
|
21405
|
-
activeStep = i;
|
|
21406
|
-
}
|
|
21407
|
-
if (activeStep < 0 && item.finished) {
|
|
21408
|
-
activeStep = i + 1;
|
|
21409
|
-
}
|
|
21410
|
-
}
|
|
21411
|
-
}
|
|
21412
|
-
for (let i = 0; i < (items === null || items === void 0 ? void 0 : items.length); i++) {
|
|
21413
|
-
let directionChanged = false;
|
|
21414
|
-
const item = items.item(i);
|
|
21415
|
-
item.active = i === activeStep;
|
|
21416
|
-
item.finished = i < activeStep;
|
|
21417
|
-
if (item.direction !== this.direction) {
|
|
21418
|
-
directionChanged = true;
|
|
21419
|
-
}
|
|
21420
|
-
item.direction = this.direction;
|
|
21421
|
-
item.align =
|
|
21422
|
-
i === 0 ? 'start' : i === (items === null || items === void 0 ? void 0 : items.length) - 1 ? 'end' : 'center';
|
|
21423
|
-
item.contentPosition = this.contentPosition;
|
|
21424
|
-
if (i < items.length - 1) {
|
|
21425
|
-
const nextItem = item.nextElementSibling;
|
|
21426
|
-
if (nextItem &&
|
|
21427
|
-
nextItem.tagName.toLowerCase() === 'p-stepper-item') {
|
|
21428
|
-
// super hacky, but we want to wait for the css of the `item.direction` change to be applied before querying for the item.clientHeight
|
|
21429
|
-
// otherwise we always get the initial "16"
|
|
21430
|
-
if (directionChanged) {
|
|
21431
|
-
await new Promise((resolve) => setTimeout(resolve, 10));
|
|
21432
|
-
}
|
|
21433
|
-
const heightDiff = (item.clientHeight > 16
|
|
21434
|
-
? item.clientHeight - 16
|
|
21435
|
-
: item.clientHeight) / 2;
|
|
21436
|
-
const stepperLine = document.createElement('p-stepper-line');
|
|
21437
|
-
stepperLine.direction = this.direction;
|
|
21438
|
-
stepperLine.active = i <= activeStep;
|
|
21439
|
-
if (heightDiff > 0 && this.direction === 'vertical') {
|
|
21440
|
-
stepperLine.style.marginTop = `-${heightDiff / 16}rem`;
|
|
21441
|
-
stepperLine.style.marginBottom = `-${heightDiff / 16}rem`;
|
|
21442
|
-
stepperLine.style.minHeight = `calc(1rem + ${(heightDiff * 2) / 16}rem)`;
|
|
21443
|
-
}
|
|
21444
|
-
this._el.insertBefore(stepperLine, nextItem);
|
|
21445
|
-
const previous = stepperLine.previousElementSibling;
|
|
21446
|
-
if (previous &&
|
|
21447
|
-
previous.tagName.toLowerCase() === 'p-stepper-line') {
|
|
21448
|
-
previous.remove();
|
|
21449
|
-
}
|
|
21450
|
-
continue;
|
|
21451
|
-
}
|
|
21452
|
-
}
|
|
21453
|
-
if (i > 0) {
|
|
21454
|
-
const previousItem = item.previousElementSibling;
|
|
21455
|
-
if (previousItem.tagName.toLowerCase() === 'p-stepper-line') {
|
|
21456
|
-
previousItem.direction = this.direction;
|
|
21457
|
-
previousItem.active = item.active || item.finished;
|
|
21458
|
-
}
|
|
21459
|
-
}
|
|
21460
|
-
}
|
|
21461
|
-
const lines = this._el.querySelectorAll('p-stepper-line + p-stepper-line, p-stepper-line:not(:has(+ p-stepper-item))');
|
|
21462
|
-
for (let j = lines.length - 1; j >= 0; j--) {
|
|
21463
|
-
const line = lines.item(j);
|
|
21464
|
-
line.remove();
|
|
21465
|
-
}
|
|
21466
|
-
setTimeout(() => (this._rendering = false), 100);
|
|
21471
|
+
_onActiveStepChange() {
|
|
21472
|
+
this._generateSteps();
|
|
21467
21473
|
}
|
|
21468
21474
|
get _el() { return getElement(this); }
|
|
21469
21475
|
static get watchers() { return {
|
|
21470
|
-
"activeStep": ["
|
|
21476
|
+
"activeStep": ["_onActiveStepChange"]
|
|
21471
21477
|
}; }
|
|
21472
21478
|
static get style() { return stepperComponentCss; }
|
|
21473
21479
|
static get cmpMeta() { return {
|
|
@@ -21476,7 +21482,8 @@ class Stepper {
|
|
|
21476
21482
|
"$members$": {
|
|
21477
21483
|
"activeStep": [2, "active-step"],
|
|
21478
21484
|
"direction": [513],
|
|
21479
|
-
"contentPosition": [513, "content-position"]
|
|
21485
|
+
"contentPosition": [513, "content-position"],
|
|
21486
|
+
"_rendering": [32]
|
|
21480
21487
|
},
|
|
21481
21488
|
"$listeners$": undefined,
|
|
21482
21489
|
"$lazyBundleId$": "-",
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as t,h as e,H as i,g as s}from"./p-e4d5e7a7.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 r=class{constructor(e){t(this,e);this._rendering=false;this._loaded=false;this.activeStep=1;this.direction="horizontal";this.contentPosition="end"}componentDidLoad(){this._loaded=true;this._generateSteps(true)}render(){return e(i,{class:"p-stepper"},e("slot",{onSlotchange:()=>this._generateSteps()}))}async _generateSteps(t=false){if(!t&&(!this._el||this._rendering||!this._loaded)){return}this._rendering=true;let e=this.activeStep-1||0;const i=this._el.querySelectorAll("p-stepper-item");if(!this.activeStep||e<0){for(let t=0;t<(i===null||i===void 0?void 0:i.length);t++){const s=i.item(t);if(s.active){e=t}if(e<0&&s.finished){e=t+1}}}for(let t=0;t<(i===null||i===void 0?void 0:i.length);t++){let s=false;const o=i.item(t);o.active=t===e;o.finished=t<e;if(o.direction!==this.direction){s=true}o.direction=this.direction;o.align=t===0?"start":t===(i===null||i===void 0?void 0:i.length)-1?"end":"center";o.contentPosition=this.contentPosition;if(t<i.length-1){const i=o.nextElementSibling;if(i&&i.tagName.toLowerCase()==="p-stepper-item"){if(s){await new Promise((t=>setTimeout(t,10)))}const r=(o.clientHeight>16?o.clientHeight-16:o.clientHeight)/2;const n=document.createElement("p-stepper-line");n.direction=this.direction;n.active=t<=e;if(r>0&&this.direction==="vertical"){n.style.marginTop=`-${r/16}rem`;n.style.marginBottom=`-${r/16}rem`;n.style.minHeight=`calc(1rem + ${r*2/16}rem)`}this._el.insertBefore(n,i);const l=n.previousElementSibling;if(l&&l.tagName.toLowerCase()==="p-stepper-line"){l.remove()}continue}}if(t>0){const t=o.previousElementSibling;if(t.tagName.toLowerCase()==="p-stepper-line"){t.direction=this.direction;t.active=o.active||o.finished}}}const s=this._el.querySelectorAll("p-stepper-line + p-stepper-line, p-stepper-line:not(:has(+ p-stepper-item))");for(let t=s.length-1;t>=0;t--){const e=s.item(t);e.remove()}setTimeout((()=>this._rendering=false),100)}get _el(){return s(this)}static get watchers(){return{activeStep:["_generateSteps"]}}};r.style=o;export{r as p_stepper};
|
|
2
|
-
//# sourceMappingURL=p-c7c6176b.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["stepperComponentCss","Stepper","this","_rendering","_loaded","componentDidLoad","_generateSteps","render","h","Host","class","onSlotchange","firstLoad","_el","activeStep","items","querySelectorAll","i","length","item","active","finished","directionChanged","direction","align","contentPosition","nextItem","nextElementSibling","tagName","toLowerCase","Promise","resolve","setTimeout","heightDiff","clientHeight","stepperLine","document","createElement","style","marginTop","marginBottom","minHeight","insertBefore","previous","previousElementSibling","remove","previousItem","lines","j","line"],"sources":["src/components/molecules/stepper/stepper.component.scss?tag=p-stepper&encapsulation=shadow","src/components/molecules/stepper/stepper.component.tsx"],"sourcesContent":[":host {\n\t@apply flex;\n}\n\n:host([direction='horizontal']) {\n\t@apply h-auto items-end;\n}\n\n:host([direction='vertical']) {\n\t@apply flex-col flex-wrap items-start;\n\t@apply w-full min-h-full;\n}\n\n:host([direction='vertical'][content-position='start']) {\n\t@apply items-end;\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\n\n@Component({\n\ttag: 'p-stepper',\n\tstyleUrl: 'stepper.component.scss',\n\tshadow: true,\n})\nexport class Stepper {\n\t/**\n\t * The currently active step\n\t */\n\t@Prop() activeStep: number = 1;\n\n\t/**\n\t * The direction of the stepper\n\t */\n\t@Prop({ reflect: true }) direction: 'horizontal' | 'vertical' =\n\t\t'horizontal';\n\n\t/**\n\t * The position of the content in case of vertical direction\n\t */\n\t@Prop({ reflect: true }) contentPosition: 'start' | 'end' = 'end';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\tprivate _rendering = false;\n\tprivate _loaded = false;\n\n\t// private _steps: Array<HTMLPStepperItemElement>;\n\n\tcomponentDidLoad() {\n\t\tthis._loaded = true;\n\t\tthis._generateSteps(true);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class=\"p-stepper\">\n\t\t\t\t<slot onSlotchange={() => this._generateSteps()} />\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Watch('activeStep')\n\tprivate async _generateSteps(firstLoad = false) {\n\t\tif (!firstLoad && (!this._el || this._rendering || !this._loaded)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._rendering = true;\n\n\t\tlet activeStep = this.activeStep - 1 || 0;\n\t\tconst items = this._el.querySelectorAll('p-stepper-item');\n\n\t\tif (!this.activeStep || activeStep < 0) {\n\t\t\tfor (let i = 0; i < items?.length; i++) {\n\t\t\t\tconst item = items.item(i) as any;\n\n\t\t\t\tif (item.active) {\n\t\t\t\t\tactiveStep = i;\n\t\t\t\t}\n\n\t\t\t\tif (activeStep < 0 && item.finished) {\n\t\t\t\t\tactiveStep = i + 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tfor (let i = 0; i < items?.length; i++) {\n\t\t\tlet directionChanged = false;\n\t\t\tconst item = items.item(i) as any;\n\n\t\t\titem.active = i === activeStep;\n\t\t\titem.finished = i < activeStep;\n\n\t\t\tif (item.direction !== this.direction) {\n\t\t\t\tdirectionChanged = true;\n\t\t\t}\n\n\t\t\titem.direction = this.direction;\n\t\t\titem.align =\n\t\t\t\ti === 0 ? 'start' : i === items?.length - 1 ? 'end' : 'center';\n\t\t\titem.contentPosition = this.contentPosition;\n\n\t\t\tif (i < items.length - 1) {\n\t\t\t\tconst nextItem = item.nextElementSibling;\n\n\t\t\t\tif (\n\t\t\t\t\tnextItem &&\n\t\t\t\t\tnextItem.tagName.toLowerCase() === 'p-stepper-item'\n\t\t\t\t) {\n\t\t\t\t\t// super hacky, but we want to wait for the css of the `item.direction` change to be applied before querying for the item.clientHeight\n\t\t\t\t\t// otherwise we always get the initial \"16\"\n\t\t\t\t\tif (directionChanged) {\n\t\t\t\t\t\tawait new Promise((resolve) => setTimeout(resolve, 10));\n\t\t\t\t\t}\n\n\t\t\t\t\tconst heightDiff =\n\t\t\t\t\t\t(item.clientHeight > 16\n\t\t\t\t\t\t\t? item.clientHeight - 16\n\t\t\t\t\t\t\t: item.clientHeight) / 2;\n\n\t\t\t\t\tconst stepperLine =\n\t\t\t\t\t\tdocument.createElement('p-stepper-line');\n\n\t\t\t\t\tstepperLine.direction = this.direction;\n\t\t\t\t\tstepperLine.active = i <= activeStep;\n\n\t\t\t\t\tif (heightDiff > 0 && this.direction === 'vertical') {\n\t\t\t\t\t\tstepperLine.style.marginTop = `-${heightDiff / 16}rem`;\n\t\t\t\t\t\tstepperLine.style.marginBottom = `-${\n\t\t\t\t\t\t\theightDiff / 16\n\t\t\t\t\t\t}rem`;\n\t\t\t\t\t\tstepperLine.style.minHeight = `calc(1rem + ${\n\t\t\t\t\t\t\t(heightDiff * 2) / 16\n\t\t\t\t\t\t}rem)`;\n\t\t\t\t\t}\n\n\t\t\t\t\tthis._el.insertBefore(stepperLine, nextItem);\n\n\t\t\t\t\tconst previous = stepperLine.previousElementSibling;\n\t\t\t\t\tif (\n\t\t\t\t\t\tprevious &&\n\t\t\t\t\t\tprevious.tagName.toLowerCase() === 'p-stepper-line'\n\t\t\t\t\t) {\n\t\t\t\t\t\tprevious.remove();\n\t\t\t\t\t}\n\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (i > 0) {\n\t\t\t\tconst previousItem = item.previousElementSibling;\n\t\t\t\tif (previousItem.tagName.toLowerCase() === 'p-stepper-line') {\n\t\t\t\t\tpreviousItem.direction = this.direction;\n\t\t\t\t\tpreviousItem.active = item.active || item.finished;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tconst lines = this._el.querySelectorAll(\n\t\t\t'p-stepper-line + p-stepper-line, p-stepper-line:not(:has(+ p-stepper-item))'\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"],"mappings":"yDAAA,MAAMA,EAAsB,if,MCOfC,EAAO,M,yBAsBXC,KAAAC,WAAa,MACbD,KAAAE,QAAU,M,gBAnBW,E,eAM5B,a,qBAK2D,K,CAY5D,gBAAAC,GACCH,KAAKE,QAAU,KACfF,KAAKI,eAAe,K,CAGrB,MAAAC,GACC,OACCC,EAACC,EAAI,CAACC,MAAM,aACXF,EAAA,QAAMG,aAAc,IAAMT,KAAKI,mB,CAM1B,oBAAMA,CAAeM,EAAY,OACxC,IAAKA,KAAeV,KAAKW,KAAOX,KAAKC,aAAeD,KAAKE,SAAU,CAClE,M,CAGDF,KAAKC,WAAa,KAElB,IAAIW,EAAaZ,KAAKY,WAAa,GAAK,EACxC,MAAMC,EAAQb,KAAKW,IAAIG,iBAAiB,kBAExC,IAAKd,KAAKY,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,IAAK,IAAIA,EAAI,EAAGA,GAAIF,IAAK,MAALA,SAAK,SAALA,EAAOG,QAAQD,IAAK,CACvC,IAAIK,EAAmB,MACvB,MAAMH,EAAOJ,EAAMI,KAAKF,GAExBE,EAAKC,OAASH,IAAMH,EACpBK,EAAKE,SAAWJ,EAAIH,EAEpB,GAAIK,EAAKI,YAAcrB,KAAKqB,UAAW,CACtCD,EAAmB,I,CAGpBH,EAAKI,UAAYrB,KAAKqB,UACtBJ,EAAKK,MACJP,IAAM,EAAI,QAAUA,KAAMF,IAAK,MAALA,SAAK,SAALA,EAAOG,QAAS,EAAI,MAAQ,SACvDC,EAAKM,gBAAkBvB,KAAKuB,gBAE5B,GAAIR,EAAIF,EAAMG,OAAS,EAAG,CACzB,MAAMQ,EAAWP,EAAKQ,mBAEtB,GACCD,GACAA,EAASE,QAAQC,gBAAkB,iBAClC,CAGD,GAAIP,EAAkB,OACf,IAAIQ,SAASC,GAAYC,WAAWD,EAAS,K,CAGpD,MAAME,GACJd,EAAKe,aAAe,GAClBf,EAAKe,aAAe,GACpBf,EAAKe,cAAgB,EAEzB,MAAMC,EACLC,SAASC,cAAc,kBAExBF,EAAYZ,UAAYrB,KAAKqB,UAC7BY,EAAYf,OAASH,GAAKH,EAE1B,GAAImB,EAAa,GAAK/B,KAAKqB,YAAc,WAAY,CACpDY,EAAYG,MAAMC,UAAY,IAAIN,EAAa,QAC/CE,EAAYG,MAAME,aAAe,IAChCP,EAAa,QAEdE,EAAYG,MAAMG,UAAY,eAC5BR,EAAa,EAAK,Q,CAIrB/B,KAAKW,IAAI6B,aAAaP,EAAaT,GAEnC,MAAMiB,EAAWR,EAAYS,uBAC7B,GACCD,GACAA,EAASf,QAAQC,gBAAkB,iBAClC,CACDc,EAASE,Q,CAGV,Q,EAIF,GAAI5B,EAAI,EAAG,CACV,MAAM6B,EAAe3B,EAAKyB,uBAC1B,GAAIE,EAAalB,QAAQC,gBAAkB,iBAAkB,CAC5DiB,EAAavB,UAAYrB,KAAKqB,UAC9BuB,EAAa1B,OAASD,EAAKC,QAAUD,EAAKE,Q,GAK7C,MAAM0B,EAAQ7C,KAAKW,IAAIG,iBACtB,+EAED,IAAK,IAAIgC,EAAID,EAAM7B,OAAS,EAAG8B,GAAK,EAAGA,IAAK,CAC3C,MAAMC,EAAOF,EAAM5B,KAAK6B,GACxBC,EAAKJ,Q,CAGNb,YAAW,IAAO9B,KAAKC,WAAa,OAAQ,I"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as t,h as e,H as i,g as s}from"./p-e4d5e7a7.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 r=class{constructor(e){t(this,e);this._rendering=false;this._loaded=false;this.activeStep=1;this.direction="horizontal";this.contentPosition="end"}componentDidLoad(){this._loaded=true;this._generateSteps(true)}render(){return e(i,{class:"p-stepper"},e("slot",{onSlotchange:()=>this._generateSteps()}))}async _generateSteps(t=false){if(!t&&(!this._el||this._rendering||!this._loaded)){return}this._rendering=true;let e=this.activeStep-1||0;const i=this._el.querySelectorAll("p-stepper-item");if(!this.activeStep||e<0){for(let t=0;t<(i===null||i===void 0?void 0:i.length);t++){const s=i.item(t);if(s.active){e=t}if(e<0&&s.finished){e=t+1}}}for(let t=0;t<(i===null||i===void 0?void 0:i.length);t++){let s=false;const o=i.item(t);o.active=t===e;o.finished=t<e;if(o.direction!==this.direction){s=true}o.direction=this.direction;o.align=t===0?"start":t===(i===null||i===void 0?void 0:i.length)-1?"end":"center";o.contentPosition=this.contentPosition;if(t<i.length-1){const i=o.nextElementSibling;if(i&&i.tagName.toLowerCase()==="p-stepper-item"){if(s){await new Promise((t=>setTimeout(t,10)))}const r=(o.clientHeight>16?o.clientHeight-16:o.clientHeight)/2;const n=document.createElement("p-stepper-line");n.direction=this.direction;n.active=t<=e;if(r>0&&this.direction==="vertical"){n.style.marginTop=`-${r/16}rem`;n.style.marginBottom=`-${r/16}rem`;n.style.minHeight=`calc(1rem + ${r*2/16}rem)`}this._el.insertBefore(n,i);const l=n.previousElementSibling;if(l&&l.tagName.toLowerCase()==="p-stepper-line"){l.remove()}continue}}if(t>0){const t=o.previousElementSibling;if(t.tagName.toLowerCase()==="p-stepper-line"){t.direction=this.direction;t.active=o.active||o.finished}}}const s=this._el.querySelectorAll("p-stepper-line + p-stepper-line, p-stepper-line:not(:has(+ p-stepper-item))");for(let t=s.length-1;t>=0;t--){const e=s.item(t);e.remove()}setTimeout((()=>this._rendering=false),100)}get _el(){return s(this)}static get watchers(){return{activeStep:["_generateSteps"]}}};r.style=o;export{r as p_stepper};
|
|
2
|
-
//# sourceMappingURL=p-c7c6176b.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["stepperComponentCss","Stepper","this","_rendering","_loaded","componentDidLoad","_generateSteps","render","h","Host","class","onSlotchange","firstLoad","_el","activeStep","items","querySelectorAll","i","length","item","active","finished","directionChanged","direction","align","contentPosition","nextItem","nextElementSibling","tagName","toLowerCase","Promise","resolve","setTimeout","heightDiff","clientHeight","stepperLine","document","createElement","style","marginTop","marginBottom","minHeight","insertBefore","previous","previousElementSibling","remove","previousItem","lines","j","line"],"sources":["src/components/molecules/stepper/stepper.component.scss?tag=p-stepper&encapsulation=shadow","src/components/molecules/stepper/stepper.component.tsx"],"sourcesContent":[":host {\n\t@apply flex;\n}\n\n:host([direction='horizontal']) {\n\t@apply h-auto items-end;\n}\n\n:host([direction='vertical']) {\n\t@apply flex-col flex-wrap items-start;\n\t@apply w-full min-h-full;\n}\n\n:host([direction='vertical'][content-position='start']) {\n\t@apply items-end;\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\n\n@Component({\n\ttag: 'p-stepper',\n\tstyleUrl: 'stepper.component.scss',\n\tshadow: true,\n})\nexport class Stepper {\n\t/**\n\t * The currently active step\n\t */\n\t@Prop() activeStep: number = 1;\n\n\t/**\n\t * The direction of the stepper\n\t */\n\t@Prop({ reflect: true }) direction: 'horizontal' | 'vertical' =\n\t\t'horizontal';\n\n\t/**\n\t * The position of the content in case of vertical direction\n\t */\n\t@Prop({ reflect: true }) contentPosition: 'start' | 'end' = 'end';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\tprivate _rendering = false;\n\tprivate _loaded = false;\n\n\t// private _steps: Array<HTMLPStepperItemElement>;\n\n\tcomponentDidLoad() {\n\t\tthis._loaded = true;\n\t\tthis._generateSteps(true);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class=\"p-stepper\">\n\t\t\t\t<slot onSlotchange={() => this._generateSteps()} />\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Watch('activeStep')\n\tprivate async _generateSteps(firstLoad = false) {\n\t\tif (!firstLoad && (!this._el || this._rendering || !this._loaded)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._rendering = true;\n\n\t\tlet activeStep = this.activeStep - 1 || 0;\n\t\tconst items = this._el.querySelectorAll('p-stepper-item');\n\n\t\tif (!this.activeStep || activeStep < 0) {\n\t\t\tfor (let i = 0; i < items?.length; i++) {\n\t\t\t\tconst item = items.item(i) as any;\n\n\t\t\t\tif (item.active) {\n\t\t\t\t\tactiveStep = i;\n\t\t\t\t}\n\n\t\t\t\tif (activeStep < 0 && item.finished) {\n\t\t\t\t\tactiveStep = i + 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tfor (let i = 0; i < items?.length; i++) {\n\t\t\tlet directionChanged = false;\n\t\t\tconst item = items.item(i) as any;\n\n\t\t\titem.active = i === activeStep;\n\t\t\titem.finished = i < activeStep;\n\n\t\t\tif (item.direction !== this.direction) {\n\t\t\t\tdirectionChanged = true;\n\t\t\t}\n\n\t\t\titem.direction = this.direction;\n\t\t\titem.align =\n\t\t\t\ti === 0 ? 'start' : i === items?.length - 1 ? 'end' : 'center';\n\t\t\titem.contentPosition = this.contentPosition;\n\n\t\t\tif (i < items.length - 1) {\n\t\t\t\tconst nextItem = item.nextElementSibling;\n\n\t\t\t\tif (\n\t\t\t\t\tnextItem &&\n\t\t\t\t\tnextItem.tagName.toLowerCase() === 'p-stepper-item'\n\t\t\t\t) {\n\t\t\t\t\t// super hacky, but we want to wait for the css of the `item.direction` change to be applied before querying for the item.clientHeight\n\t\t\t\t\t// otherwise we always get the initial \"16\"\n\t\t\t\t\tif (directionChanged) {\n\t\t\t\t\t\tawait new Promise((resolve) => setTimeout(resolve, 10));\n\t\t\t\t\t}\n\n\t\t\t\t\tconst heightDiff =\n\t\t\t\t\t\t(item.clientHeight > 16\n\t\t\t\t\t\t\t? item.clientHeight - 16\n\t\t\t\t\t\t\t: item.clientHeight) / 2;\n\n\t\t\t\t\tconst stepperLine =\n\t\t\t\t\t\tdocument.createElement('p-stepper-line');\n\n\t\t\t\t\tstepperLine.direction = this.direction;\n\t\t\t\t\tstepperLine.active = i <= activeStep;\n\n\t\t\t\t\tif (heightDiff > 0 && this.direction === 'vertical') {\n\t\t\t\t\t\tstepperLine.style.marginTop = `-${heightDiff / 16}rem`;\n\t\t\t\t\t\tstepperLine.style.marginBottom = `-${\n\t\t\t\t\t\t\theightDiff / 16\n\t\t\t\t\t\t}rem`;\n\t\t\t\t\t\tstepperLine.style.minHeight = `calc(1rem + ${\n\t\t\t\t\t\t\t(heightDiff * 2) / 16\n\t\t\t\t\t\t}rem)`;\n\t\t\t\t\t}\n\n\t\t\t\t\tthis._el.insertBefore(stepperLine, nextItem);\n\n\t\t\t\t\tconst previous = stepperLine.previousElementSibling;\n\t\t\t\t\tif (\n\t\t\t\t\t\tprevious &&\n\t\t\t\t\t\tprevious.tagName.toLowerCase() === 'p-stepper-line'\n\t\t\t\t\t) {\n\t\t\t\t\t\tprevious.remove();\n\t\t\t\t\t}\n\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (i > 0) {\n\t\t\t\tconst previousItem = item.previousElementSibling;\n\t\t\t\tif (previousItem.tagName.toLowerCase() === 'p-stepper-line') {\n\t\t\t\t\tpreviousItem.direction = this.direction;\n\t\t\t\t\tpreviousItem.active = item.active || item.finished;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tconst lines = this._el.querySelectorAll(\n\t\t\t'p-stepper-line + p-stepper-line, p-stepper-line:not(:has(+ p-stepper-item))'\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"],"mappings":"yDAAA,MAAMA,EAAsB,if,MCOfC,EAAO,M,yBAsBXC,KAAAC,WAAa,MACbD,KAAAE,QAAU,M,gBAnBW,E,eAM5B,a,qBAK2D,K,CAY5D,gBAAAC,GACCH,KAAKE,QAAU,KACfF,KAAKI,eAAe,K,CAGrB,MAAAC,GACC,OACCC,EAACC,EAAI,CAACC,MAAM,aACXF,EAAA,QAAMG,aAAc,IAAMT,KAAKI,mB,CAM1B,oBAAMA,CAAeM,EAAY,OACxC,IAAKA,KAAeV,KAAKW,KAAOX,KAAKC,aAAeD,KAAKE,SAAU,CAClE,M,CAGDF,KAAKC,WAAa,KAElB,IAAIW,EAAaZ,KAAKY,WAAa,GAAK,EACxC,MAAMC,EAAQb,KAAKW,IAAIG,iBAAiB,kBAExC,IAAKd,KAAKY,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,IAAK,IAAIA,EAAI,EAAGA,GAAIF,IAAK,MAALA,SAAK,SAALA,EAAOG,QAAQD,IAAK,CACvC,IAAIK,EAAmB,MACvB,MAAMH,EAAOJ,EAAMI,KAAKF,GAExBE,EAAKC,OAASH,IAAMH,EACpBK,EAAKE,SAAWJ,EAAIH,EAEpB,GAAIK,EAAKI,YAAcrB,KAAKqB,UAAW,CACtCD,EAAmB,I,CAGpBH,EAAKI,UAAYrB,KAAKqB,UACtBJ,EAAKK,MACJP,IAAM,EAAI,QAAUA,KAAMF,IAAK,MAALA,SAAK,SAALA,EAAOG,QAAS,EAAI,MAAQ,SACvDC,EAAKM,gBAAkBvB,KAAKuB,gBAE5B,GAAIR,EAAIF,EAAMG,OAAS,EAAG,CACzB,MAAMQ,EAAWP,EAAKQ,mBAEtB,GACCD,GACAA,EAASE,QAAQC,gBAAkB,iBAClC,CAGD,GAAIP,EAAkB,OACf,IAAIQ,SAASC,GAAYC,WAAWD,EAAS,K,CAGpD,MAAME,GACJd,EAAKe,aAAe,GAClBf,EAAKe,aAAe,GACpBf,EAAKe,cAAgB,EAEzB,MAAMC,EACLC,SAASC,cAAc,kBAExBF,EAAYZ,UAAYrB,KAAKqB,UAC7BY,EAAYf,OAASH,GAAKH,EAE1B,GAAImB,EAAa,GAAK/B,KAAKqB,YAAc,WAAY,CACpDY,EAAYG,MAAMC,UAAY,IAAIN,EAAa,QAC/CE,EAAYG,MAAME,aAAe,IAChCP,EAAa,QAEdE,EAAYG,MAAMG,UAAY,eAC5BR,EAAa,EAAK,Q,CAIrB/B,KAAKW,IAAI6B,aAAaP,EAAaT,GAEnC,MAAMiB,EAAWR,EAAYS,uBAC7B,GACCD,GACAA,EAASf,QAAQC,gBAAkB,iBAClC,CACDc,EAASE,Q,CAGV,Q,EAIF,GAAI5B,EAAI,EAAG,CACV,MAAM6B,EAAe3B,EAAKyB,uBAC1B,GAAIE,EAAalB,QAAQC,gBAAkB,iBAAkB,CAC5DiB,EAAavB,UAAYrB,KAAKqB,UAC9BuB,EAAa1B,OAASD,EAAKC,QAAUD,EAAKE,Q,GAK7C,MAAM0B,EAAQ7C,KAAKW,IAAIG,iBACtB,+EAED,IAAK,IAAIgC,EAAID,EAAM7B,OAAS,EAAG8B,GAAK,EAAGA,IAAK,CAC3C,MAAMC,EAAOF,EAAM5B,KAAK6B,GACxBC,EAAKJ,Q,CAGNb,YAAW,IAAO9B,KAAKC,WAAa,OAAQ,I"}
|