@paperless/core 1.38.8 → 1.38.10
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 +23 -0
- package/dist/build/p-5fa3061e.entry.js +2 -0
- package/dist/build/p-5fa3061e.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 +81 -76
- 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 +81 -76
- package/dist/collection/components/molecules/stepper/stepper.component.js.map +1 -1
- package/dist/components/p-stepper.js +82 -77
- package/dist/components/p-stepper.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/p-stepper.entry.js +81 -76
- 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-5fa3061e.entry.js +2 -0
- package/dist/paperless/p-5fa3061e.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 -1
- package/hydrate/index.js +81 -76
- package/package.json +1 -1
- package/dist/build/p-bb153f9a.entry.js +0 -2
- package/dist/build/p-bb153f9a.entry.js.map +0 -1
- package/dist/paperless/p-bb153f9a.entry.js +0 -2
- package/dist/paperless/p-bb153f9a.entry.js.map +0 -1
|
@@ -17,7 +17,10 @@ export declare class Stepper {
|
|
|
17
17
|
private _el;
|
|
18
18
|
private _rendering;
|
|
19
19
|
private _loaded;
|
|
20
|
+
private _delay;
|
|
21
|
+
private _onSlotChange;
|
|
22
|
+
private _generateSteps;
|
|
20
23
|
componentDidLoad(): void;
|
|
21
24
|
render(): any;
|
|
22
|
-
|
|
25
|
+
protected _onActiveStepChange(): void;
|
|
23
26
|
}
|
package/hydrate/index.js
CHANGED
|
@@ -21378,96 +21378,101 @@ class Stepper {
|
|
|
21378
21378
|
constructor(hostRef) {
|
|
21379
21379
|
registerInstance(this, hostRef);
|
|
21380
21380
|
this._loaded = false;
|
|
21381
|
+
// private _steps: Array<HTMLPStepperItemElement>;
|
|
21382
|
+
this._delay = (amount) => new Promise((resolve) => setTimeout(resolve, amount));
|
|
21383
|
+
this._onSlotChange = async (_e) => this._generateSteps();
|
|
21384
|
+
this._generateSteps = async (firstLoad = false) => {
|
|
21385
|
+
if (!firstLoad && (!this._el || this._rendering || !this._loaded)) {
|
|
21386
|
+
return;
|
|
21387
|
+
}
|
|
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 this._delay(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:not(:has(+ p-stepper-item)), p-stepper-line:first-child');
|
|
21452
|
+
for (let j = lines.length - 1; j >= 0; j--) {
|
|
21453
|
+
const line = lines.item(j);
|
|
21454
|
+
line.remove();
|
|
21455
|
+
}
|
|
21456
|
+
setTimeout(() => (this._rendering = false), 100);
|
|
21457
|
+
};
|
|
21381
21458
|
this.activeStep = 1;
|
|
21382
21459
|
this.direction = 'horizontal';
|
|
21383
21460
|
this.contentPosition = 'end';
|
|
21384
21461
|
this._rendering = false;
|
|
21385
21462
|
}
|
|
21386
|
-
// private _steps: Array<HTMLPStepperItemElement>;
|
|
21387
21463
|
componentDidLoad() {
|
|
21388
21464
|
this._loaded = true;
|
|
21389
21465
|
this._generateSteps(true);
|
|
21390
21466
|
}
|
|
21391
21467
|
render() {
|
|
21392
|
-
return (hAsync(Host, { class: "p-stepper" }, hAsync("slot", { onSlotchange:
|
|
21468
|
+
return (hAsync(Host, { class: "p-stepper" }, hAsync("slot", { onSlotchange: this._onSlotChange })));
|
|
21393
21469
|
}
|
|
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);
|
|
21470
|
+
_onActiveStepChange() {
|
|
21471
|
+
this._generateSteps();
|
|
21467
21472
|
}
|
|
21468
21473
|
get _el() { return getElement(this); }
|
|
21469
21474
|
static get watchers() { return {
|
|
21470
|
-
"activeStep": ["
|
|
21475
|
+
"activeStep": ["_onActiveStepChange"]
|
|
21471
21476
|
}; }
|
|
21472
21477
|
static get style() { return stepperComponentCss; }
|
|
21473
21478
|
static get cmpMeta() { return {
|
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._loaded=false;this.activeStep=1;this.direction="horizontal";this.contentPosition="end";this._rendering=false}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-bb153f9a.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["stepperComponentCss","Stepper","this","_loaded","componentDidLoad","_generateSteps","render","h","Host","class","onSlotchange","firstLoad","_el","_rendering","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, 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' =\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\t@State() private _rendering = false;\n\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,yBAwBXC,KAAAC,QAAU,M,gBApBW,E,eAM5B,a,qBAK2D,M,gBAO9B,K,CAM9B,gBAAAC,GACCF,KAAKC,QAAU,KACfD,KAAKG,eAAe,K,CAGrB,MAAAC,GACC,OACCC,EAACC,EAAI,CAACC,MAAM,aACXF,EAAA,QAAMG,aAAc,IAAMR,KAAKG,mB,CAM1B,oBAAMA,CAAeM,EAAY,OACxC,IAAKA,KAAeT,KAAKU,KAAOV,KAAKW,aAAeX,KAAKC,SAAU,CAClE,M,CAGDD,KAAKW,WAAa,KAElB,IAAIC,EAAaZ,KAAKY,WAAa,GAAK,EACxC,MAAMC,EAAQb,KAAKU,IAAII,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,KAAKU,IAAI8B,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,KAAKU,IAAII,iBACtB,+EAED,IAAK,IAAIgC,EAAID,EAAM7B,OAAS,EAAG8B,GAAK,EAAGA,IAAK,CAC3C,MAAMC,EAAOF,EAAM5B,KAAK6B,GACxBC,EAAKJ,Q,CAGNb,YAAW,IAAO9B,KAAKW,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._loaded=false;this.activeStep=1;this.direction="horizontal";this.contentPosition="end";this._rendering=false}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-bb153f9a.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["stepperComponentCss","Stepper","this","_loaded","componentDidLoad","_generateSteps","render","h","Host","class","onSlotchange","firstLoad","_el","_rendering","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, 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' =\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\t@State() private _rendering = false;\n\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,yBAwBXC,KAAAC,QAAU,M,gBApBW,E,eAM5B,a,qBAK2D,M,gBAO9B,K,CAM9B,gBAAAC,GACCF,KAAKC,QAAU,KACfD,KAAKG,eAAe,K,CAGrB,MAAAC,GACC,OACCC,EAACC,EAAI,CAACC,MAAM,aACXF,EAAA,QAAMG,aAAc,IAAMR,KAAKG,mB,CAM1B,oBAAMA,CAAeM,EAAY,OACxC,IAAKA,KAAeT,KAAKU,KAAOV,KAAKW,aAAeX,KAAKC,SAAU,CAClE,M,CAGDD,KAAKW,WAAa,KAElB,IAAIC,EAAaZ,KAAKY,WAAa,GAAK,EACxC,MAAMC,EAAQb,KAAKU,IAAII,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,KAAKU,IAAI8B,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,KAAKU,IAAII,iBACtB,+EAED,IAAK,IAAIgC,EAAID,EAAM7B,OAAS,EAAG8B,GAAK,EAAGA,IAAK,CAC3C,MAAMC,EAAOF,EAAM5B,KAAK6B,GACxBC,EAAKJ,Q,CAGNb,YAAW,IAAO9B,KAAKW,WAAa,OAAQ,I"}
|