@paperless/core 2.3.2 → 2.4.1
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 +22 -0
- package/dist/{paperless/p-cf1a9710.entry.js → build/p-23d7b822.entry.js} +2 -2
- package/dist/{paperless/p-cf1a9710.entry.js.map → build/p-23d7b822.entry.js.map} +1 -1
- package/dist/build/{p-2ab8ffe8.js → p-83b41328.js} +1 -1
- package/dist/build/p-8cc79846.entry.js +2 -0
- package/dist/build/p-8cc79846.entry.js.map +1 -0
- package/dist/build/p-stepper-item.p-stepper-line.entry.esm.js.map +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-item.p-stepper-line.entry.cjs.js.map +1 -1
- package/dist/cjs/p-stepper-item_2.cjs.entry.js +26 -5
- package/dist/cjs/p-stepper-item_2.cjs.entry.js.map +1 -1
- package/dist/cjs/p-stepper.cjs.entry.js +10 -4
- 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/atoms/stepper/item/stepper-item.component.css +1 -1
- package/dist/collection/components/atoms/stepper/item/stepper-item.component.js +25 -4
- package/dist/collection/components/atoms/stepper/item/stepper-item.component.js.map +1 -1
- package/dist/collection/components/organisms/stepper/stepper.component.js +10 -4
- package/dist/collection/components/organisms/stepper/stepper.component.js.map +1 -1
- package/dist/components/{p-B4inyr87.js → p-DsyVC2xP.js} +28 -7
- package/dist/components/p-DsyVC2xP.js.map +1 -0
- package/dist/components/p-stepper-item.js +1 -1
- package/dist/components/p-stepper.js +11 -5
- package/dist/components/p-stepper.js.map +1 -1
- package/dist/esm/p-stepper-item.p-stepper-line.entry.js.map +1 -1
- package/dist/esm/p-stepper-item_2.entry.js +26 -5
- package/dist/esm/p-stepper-item_2.entry.js.map +1 -1
- package/dist/esm/p-stepper.entry.js +10 -4
- package/dist/esm/p-stepper.entry.js.map +1 -1
- package/dist/index.html +1 -1
- package/dist/{build/p-cf1a9710.entry.js → paperless/p-23d7b822.entry.js} +2 -2
- package/dist/{build/p-cf1a9710.entry.js.map → paperless/p-23d7b822.entry.js.map} +1 -1
- package/dist/paperless/p-8cc79846.entry.js +2 -0
- package/dist/paperless/p-8cc79846.entry.js.map +1 -0
- package/dist/paperless/p-stepper-item.p-stepper-line.entry.esm.js.map +1 -1
- 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/package.json +1 -1
- package/dist/build/p-ec9a178a.entry.js +0 -2
- package/dist/build/p-ec9a178a.entry.js.map +0 -1
- package/dist/components/p-B4inyr87.js.map +0 -1
- package/dist/paperless/p-ec9a178a.entry.js +0 -2
- package/dist/paperless/p-ec9a178a.entry.js.map +0 -1
|
@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, h } from './p-tdjn65Lz.js';
|
|
|
2
2
|
import { c as cva } from './p-CBWjHURv.js';
|
|
3
3
|
import { a as asBoolean } from './p-C5CTp9IA.js';
|
|
4
4
|
|
|
5
|
-
const stepperItemComponentCss = "*{box-sizing:border-box}.static{position:static!important}.mt-\\[1px\\]{margin-top:1px!important}.flex{display:flex!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.flex-1{flex:1 1 0%!important}.flex-row-reverse{flex-direction:row-reverse!important}.items-start{align-items:flex-start!important}.items-end{align-items:flex-end!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.rounded-full{border-radius:9999px!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-indigo-600{--tw-border-opacity:1!important;border-color:rgb(82 138 250/var(--tw-border-opacity,1))!important}.bg-indigo-50{--tw-bg-opacity:1!important;background-color:rgb(241 246 255/var(--tw-bg-opacity,1))!important}.bg-indigo-600{--tw-bg-opacity:1!important;background-color:rgb(82 138 250/var(--tw-bg-opacity,1))!important}.text-center{text-align:center!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-medium{font-weight:500!important}.text-indigo-600{--tw-text-opacity:1!important;color:rgb(82 138 250/var(--tw-text-opacity,1))!important}.text-storm-400{--tw-text-opacity:1!important;color:rgb(70 75 84/var(--tw-text-opacity,1))!important}.text-storm-500{color:rgb(24 30 41/var(--tw-text-opacity,1))!important}.text-storm-500,.text-white{--tw-text-opacity:1!important}.text-white{color:rgb(255 255 255/var(--tw-text-opacity,1))!important}@media (min-width:64rem){.desktop-xs\\:inline-block{display:inline-block!important}}";
|
|
5
|
+
const stepperItemComponentCss = "*{box-sizing:border-box}.static{position:static!important}.mb-4{margin-bottom:1rem!important}.mt-4{margin-top:1rem!important}.mt-\\[1px\\]{margin-top:1px!important}.flex{display:flex!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.flex-1{flex:1 1 0%!important}.flex-row-reverse{flex-direction:row-reverse!important}.items-start{align-items:flex-start!important}.items-end{align-items:flex-end!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.rounded-full{border-radius:9999px!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-indigo-600{--tw-border-opacity:1!important;border-color:rgb(82 138 250/var(--tw-border-opacity,1))!important}.bg-indigo-50{--tw-bg-opacity:1!important;background-color:rgb(241 246 255/var(--tw-bg-opacity,1))!important}.bg-indigo-600{--tw-bg-opacity:1!important;background-color:rgb(82 138 250/var(--tw-bg-opacity,1))!important}.text-center{text-align:center!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-medium{font-weight:500!important}.text-indigo-600{--tw-text-opacity:1!important;color:rgb(82 138 250/var(--tw-text-opacity,1))!important}.text-storm-400{--tw-text-opacity:1!important;color:rgb(70 75 84/var(--tw-text-opacity,1))!important}.text-storm-500{color:rgb(24 30 41/var(--tw-text-opacity,1))!important}.text-storm-500,.text-white{--tw-text-opacity:1!important}.text-white{color:rgb(255 255 255/var(--tw-text-opacity,1))!important}@media (min-width:64rem){.desktop-xs\\:inline-block{display:inline-block!important}}";
|
|
6
6
|
|
|
7
7
|
const item = cva('flex gap-2', {
|
|
8
8
|
variants: {
|
|
@@ -24,6 +24,15 @@ const circle = cva([
|
|
|
24
24
|
'rounded-full',
|
|
25
25
|
], {
|
|
26
26
|
variants: {
|
|
27
|
+
align: {
|
|
28
|
+
start: null,
|
|
29
|
+
center: null,
|
|
30
|
+
end: null,
|
|
31
|
+
},
|
|
32
|
+
direction: {
|
|
33
|
+
horizontal: null,
|
|
34
|
+
vertical: null,
|
|
35
|
+
},
|
|
27
36
|
finished: {
|
|
28
37
|
true: null,
|
|
29
38
|
false: null,
|
|
@@ -49,6 +58,16 @@ const circle = cva([
|
|
|
49
58
|
finished: true,
|
|
50
59
|
class: 'text-white bg-indigo-600',
|
|
51
60
|
},
|
|
61
|
+
{
|
|
62
|
+
direction: 'vertical',
|
|
63
|
+
align: 'start',
|
|
64
|
+
class: 'mt-4',
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
direction: 'vertical',
|
|
68
|
+
align: 'end',
|
|
69
|
+
class: 'mb-4',
|
|
70
|
+
},
|
|
52
71
|
],
|
|
53
72
|
});
|
|
54
73
|
const content = cva('text-sm font-medium flex-1 mt-[1px]', {
|
|
@@ -120,17 +139,19 @@ const StepperItem = /*@__PURE__*/ proxyCustomElement(class StepperItem extends H
|
|
|
120
139
|
*/
|
|
121
140
|
active = false;
|
|
122
141
|
render() {
|
|
123
|
-
return (h("div", { key: '
|
|
142
|
+
return (h("div", { key: '3a445dfd75fdb020d4b2f9af06fab47939a476d8', class: item({
|
|
124
143
|
align: this.align,
|
|
125
144
|
contentPosition: this.contentPosition,
|
|
126
|
-
}) }, h("div", { key: '
|
|
145
|
+
}) }, h("div", { key: '899bbb3e5d2087c2e5e8aa220f610166dc927850', class: circle({
|
|
146
|
+
align: this.align,
|
|
147
|
+
direction: this.direction,
|
|
127
148
|
active: asBoolean(this.active),
|
|
128
149
|
finished: asBoolean(this.finished),
|
|
129
|
-
}) }, this.number), h("div", { key: '
|
|
150
|
+
}) }, this.number), h("div", { key: '77be804d4be1749d5c4947e603f578f96ed7d2ea', class: content({
|
|
130
151
|
active: asBoolean(this.active),
|
|
131
152
|
finished: asBoolean(this.finished),
|
|
132
153
|
direction: this.direction,
|
|
133
|
-
}) }, h("slot", { key: '
|
|
154
|
+
}) }, h("slot", { key: '45a529fca3573649f0eedf5c8eb193004abebf6b' }))));
|
|
134
155
|
}
|
|
135
156
|
static get style() { return stepperItemComponentCss; }
|
|
136
157
|
}, [1, "p-stepper-item", {
|
|
@@ -157,6 +178,6 @@ function defineCustomElement() {
|
|
|
157
178
|
defineCustomElement();
|
|
158
179
|
|
|
159
180
|
export { StepperItem as S, defineCustomElement as d };
|
|
160
|
-
//# sourceMappingURL=p-
|
|
181
|
+
//# sourceMappingURL=p-DsyVC2xP.js.map
|
|
161
182
|
|
|
162
|
-
//# sourceMappingURL=p-
|
|
183
|
+
//# sourceMappingURL=p-DsyVC2xP.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-DsyVC2xP.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/atoms/stepper/item/stepper-item.component.css?tag=p-stepper-item&encapsulation=shadow","src/components/atoms/stepper/item/stepper-item.component.tsx"],"sourcesContent":["","import { Component, h, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { asBoolean } from '../../../../utils/as-boolean';\n\nconst item = cva('flex gap-2', {\n\tvariants: {\n\t\talign: {\n\t\t\tstart: 'items-start',\n\t\t\tcenter: 'items-center',\n\t\t\tend: 'items-end',\n\t\t},\n\t\tcontentPosition: {\n\t\t\tstart: 'flex-row-reverse',\n\t\t\tend: null,\n\t\t},\n\t},\n});\n\nconst circle = cva(\n\t[\n\t\t'h-6 w-6 flex items-center justify-center',\n\t\t'text-sm text-center font-medium',\n\t\t'border border-solid border-indigo-600',\n\t\t'rounded-full',\n\t],\n\t{\n\t\tvariants: {\n\t\t\talign: {\n\t\t\t\tstart: null,\n\t\t\t\tcenter: null,\n\t\t\t\tend: null,\n\t\t\t},\n\t\t\tdirection: {\n\t\t\t\thorizontal: null,\n\t\t\t\tvertical: null,\n\t\t\t},\n\t\t\tfinished: {\n\t\t\t\ttrue: null,\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t\tactive: {\n\t\t\t\ttrue: null,\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tfinished: false,\n\t\t\t\tactive: false,\n\t\t\t\tclass: 'text-indigo-600 bg-indigo-50',\n\t\t\t},\n\t\t\t{\n\t\t\t\tactive: true,\n\t\t\t\tfinished: false,\n\t\t\t\tclass: 'text-white bg-indigo-600',\n\t\t\t},\n\t\t\t{\n\t\t\t\tactive: false,\n\t\t\t\tfinished: true,\n\t\t\t\tclass: 'text-white bg-indigo-600',\n\t\t\t},\n\t\t\t{\n\t\t\t\tdirection: 'vertical',\n\t\t\t\talign: 'start',\n\t\t\t\tclass: 'mt-4',\n\t\t\t},\n\t\t\t{\n\t\t\t\tdirection: 'vertical',\n\t\t\t\talign: 'end',\n\t\t\t\tclass: 'mb-4',\n\t\t\t},\n\t\t],\n\t}\n);\n\nconst content = cva('text-sm font-medium flex-1 mt-[1px]', {\n\tvariants: {\n\t\tfinished: {\n\t\t\ttrue: null,\n\t\t\tfalse: null,\n\t\t},\n\t\tactive: {\n\t\t\ttrue: null,\n\t\t\tfalse: null,\n\t\t},\n\t\tdirection: {\n\t\t\thorizontal: null,\n\t\t\tvertical: null,\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\tfinished: false,\n\t\t\tactive: false,\n\t\t\tclass: 'text-storm-400',\n\t\t},\n\t\t{\n\t\t\tactive: true,\n\t\t\tfinished: false,\n\t\t\tclass: 'text-storm-500',\n\t\t},\n\t\t{\n\t\t\tactive: false,\n\t\t\tfinished: true,\n\t\t\tclass: 'text-storm-500',\n\t\t},\n\t\t{\n\t\t\tdirection: 'horizontal',\n\t\t\tactive: false,\n\t\t\tclass: 'hidden desktop-xs:inline-block',\n\t\t},\n\t],\n});\n\n@Component({\n\ttag: 'p-stepper-item',\n\tstyleUrl: 'stepper-item.component.css',\n\tshadow: true,\n})\nexport class StepperItem {\n\t/**\n\t * The number of the step\n\t */\n\t@Prop() number: number = 1;\n\n\t/**\n\t * The direction of the item\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 * Wether the step is finished\n\t */\n\t@Prop() finished: boolean = false;\n\n\t/**\n\t * Wether the step is active\n\t */\n\t@Prop() active: boolean = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={item({\n\t\t\t\t\talign: this.align,\n\t\t\t\t\tcontentPosition: this.contentPosition,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclass={circle({\n\t\t\t\t\t\talign: this.align,\n\t\t\t\t\t\tdirection: this.direction,\n\t\t\t\t\t\tactive: asBoolean(this.active),\n\t\t\t\t\t\tfinished: asBoolean(this.finished),\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{this.number}\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclass={content({\n\t\t\t\t\t\tactive: asBoolean(this.active),\n\t\t\t\t\t\tfinished: asBoolean(this.finished),\n\t\t\t\t\t\tdirection: this.direction,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h, F as Fragment } from './p-tdjn65Lz.js';
|
|
2
2
|
import { c as cva } from './p-CBWjHURv.js';
|
|
3
|
-
import { d as defineCustomElement$3 } from './p-
|
|
3
|
+
import { d as defineCustomElement$3 } from './p-DsyVC2xP.js';
|
|
4
4
|
import { d as defineCustomElement$2 } from './p-C4WDKcUV.js';
|
|
5
5
|
|
|
6
6
|
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}";
|
|
@@ -205,12 +205,18 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends H {
|
|
|
205
205
|
stepperLine.style.marginTop = '0';
|
|
206
206
|
stepperLine.style.marginBottom = '0';
|
|
207
207
|
if (this.align === 'start' || this.align === 'center') {
|
|
208
|
-
stepperLine.style.marginTop = `-${heightDiff / 16}rem`;
|
|
209
|
-
totalHeight += heightDiff;
|
|
208
|
+
stepperLine.style.marginTop = `-${heightDiff / 16 - (this.align === 'start' ? 1.25 : 0)}rem`;
|
|
209
|
+
totalHeight += heightDiff - (this.align === 'start' ? 8 : 0);
|
|
210
|
+
if (this.align === 'start') {
|
|
211
|
+
stepperLine.style.marginBottom = `-0.75rem`;
|
|
212
|
+
}
|
|
210
213
|
}
|
|
211
214
|
if (this.align === 'center' || this.align === 'end') {
|
|
212
|
-
stepperLine.style.marginBottom = `-${heightDiffNext / 16}rem`;
|
|
213
|
-
totalHeight += heightDiffNext;
|
|
215
|
+
stepperLine.style.marginBottom = `-${heightDiffNext / 16 - (this.align === 'end' ? 1.25 : 0)}rem`;
|
|
216
|
+
totalHeight += heightDiffNext - (this.align === 'end' ? 8 : 0);
|
|
217
|
+
if (this.align === 'end') {
|
|
218
|
+
stepperLine.style.marginTop = `-0.75rem`;
|
|
219
|
+
}
|
|
214
220
|
}
|
|
215
221
|
stepperLine.style.minHeight = `calc(${totalHeight / 16}rem)`;
|
|
216
222
|
}
|
|
@@ -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 _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.direction = this.direction;\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}
|
|
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 _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.direction = this.direction;\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 = `-${\n\t\t\t\t\theightDiff / 16 - (this.align === 'start' ? 1.25 : 0)\n\t\t\t\t}rem`;\n\t\t\t\ttotalHeight += heightDiff - (this.align === 'start' ? 8 : 0);\n\n\t\t\t\tif (this.align === 'start') {\n\t\t\t\t\tstepperLine.style.marginBottom = `-0.75rem`;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (this.align === 'center' || this.align === 'end') {\n\t\t\t\tstepperLine.style.marginBottom = `-${\n\t\t\t\t\theightDiffNext / 16 - (this.align === 'end' ? 1.25 : 0)\n\t\t\t\t}rem`;\n\t\t\t\ttotalHeight += heightDiffNext - (this.align === 'end' ? 8 : 0);\n\n\t\t\t\tif (this.align === 'end') {\n\t\t\t\t\tstepperLine.style.marginTop = `-0.75rem`;\n\t\t\t\t}\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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"p-stepper-item.p-stepper-line.entry.js","sources":["src/components/atoms/stepper/item/stepper-item.component.css?tag=p-stepper-item&encapsulation=shadow","src/components/atoms/stepper/item/stepper-item.component.tsx","src/components/atoms/stepper/line/stepper-line.component.css?tag=p-stepper-line&encapsulation=shadow","src/components/atoms/stepper/line/stepper-line.component.tsx"],"sourcesContent":["","import { Component, h, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { asBoolean } from '../../../../utils/as-boolean';\n\nconst item = cva('flex gap-2', {\n\tvariants: {\n\t\talign: {\n\t\t\tstart: 'items-start',\n\t\t\tcenter: 'items-center',\n\t\t\tend: 'items-end',\n\t\t},\n\t\tcontentPosition: {\n\t\t\tstart: 'flex-row-reverse',\n\t\t\tend: null,\n\t\t},\n\t},\n});\n\nconst circle = cva(\n\t[\n\t\t'h-6 w-6 flex items-center justify-center',\n\t\t'text-sm text-center font-medium',\n\t\t'border border-solid border-indigo-600',\n\t\t'rounded-full',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tfinished: {\n\t\t\t\ttrue: null,\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t\tactive: {\n\t\t\t\ttrue: null,\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tfinished: false,\n\t\t\t\tactive: false,\n\t\t\t\tclass: 'text-indigo-600 bg-indigo-50',\n\t\t\t},\n\t\t\t{\n\t\t\t\tactive: true,\n\t\t\t\tfinished: false,\n\t\t\t\tclass: 'text-white bg-indigo-600',\n\t\t\t},\n\t\t\t{\n\t\t\t\tactive: false,\n\t\t\t\tfinished: true,\n\t\t\t\tclass: 'text-white bg-indigo-600',\n\t\t\t},\n\t\t],\n\t}\n);\n\nconst content = cva('text-sm font-medium flex-1 mt-[1px]', {\n\tvariants: {\n\t\tfinished: {\n\t\t\ttrue: null,\n\t\t\tfalse: null,\n\t\t},\n\t\tactive: {\n\t\t\ttrue: null,\n\t\t\tfalse: null,\n\t\t},\n\t\tdirection: {\n\t\t\thorizontal: null,\n\t\t\tvertical: null,\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\tfinished: false,\n\t\t\tactive: false,\n\t\t\tclass: 'text-storm-400',\n\t\t},\n\t\t{\n\t\t\tactive: true,\n\t\t\tfinished: false,\n\t\t\tclass: 'text-storm-500',\n\t\t},\n\t\t{\n\t\t\tactive: false,\n\t\t\tfinished: true,\n\t\t\tclass: 'text-storm-500',\n\t\t},\n\t\t{\n\t\t\tdirection: 'horizontal',\n\t\t\tactive: false,\n\t\t\tclass: 'hidden desktop-xs:inline-block',\n\t\t},\n\t],\n});\n\n@Component({\n\ttag: 'p-stepper-item',\n\tstyleUrl: 'stepper-item.component.css',\n\tshadow: true,\n})\nexport class StepperItem {\n\t/**\n\t * The number of the step\n\t */\n\t@Prop() number: number = 1;\n\n\t/**\n\t * The direction of the item\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 * Wether the step is finished\n\t */\n\t@Prop() finished: boolean = false;\n\n\t/**\n\t * Wether the step is active\n\t */\n\t@Prop() active: boolean = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={item({\n\t\t\t\t\talign: this.align,\n\t\t\t\t\tcontentPosition: this.contentPosition,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclass={circle({\n\t\t\t\t\t\tactive: asBoolean(this.active),\n\t\t\t\t\t\tfinished: asBoolean(this.finished),\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{this.number}\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclass={content({\n\t\t\t\t\t\tactive: asBoolean(this.active),\n\t\t\t\t\t\tfinished: asBoolean(this.finished),\n\t\t\t\t\t\tdirection: this.direction,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n",":host {\n\t@apply flex-auto;\n\t@apply block;\n\t@apply bg-off-white-700;\n}\n\n:host([direction='horizontal']) {\n\t@apply h-[1px];\n}\n\n:host([direction='vertical']) {\n\t@apply mx-[calc(0.75rem-1px)] min-h-[1rem] w-[1px];\n}\n\n:host([active='true']),\n:host([active]:not([active='false'])) {\n\t@apply bg-indigo-600;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-stepper-line',\n\tstyleUrl: 'stepper-line.component.css',\n\tshadow: true,\n})\nexport class StepperLine {\n\t/**\n\t * Wether the line is active\n\t */\n\t@Prop({ reflect: true }) active: boolean = false;\n\n\t/**\n\t * The direction of the stepper line\n\t */\n\t@Prop({ reflect: true }) direction: 'horizontal' | 'vertical' =\n\t\t'horizontal';\n\n\trender() {\n\t\treturn <Host />;\n\t}\n}\n"],"names":[],"mappings":";;;;;AAAA,MAAM,uBAAuB,GAAG,
|
|
1
|
+
{"version":3,"file":"p-stepper-item.p-stepper-line.entry.js","sources":["src/components/atoms/stepper/item/stepper-item.component.css?tag=p-stepper-item&encapsulation=shadow","src/components/atoms/stepper/item/stepper-item.component.tsx","src/components/atoms/stepper/line/stepper-line.component.css?tag=p-stepper-line&encapsulation=shadow","src/components/atoms/stepper/line/stepper-line.component.tsx"],"sourcesContent":["","import { Component, h, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { asBoolean } from '../../../../utils/as-boolean';\n\nconst item = cva('flex gap-2', {\n\tvariants: {\n\t\talign: {\n\t\t\tstart: 'items-start',\n\t\t\tcenter: 'items-center',\n\t\t\tend: 'items-end',\n\t\t},\n\t\tcontentPosition: {\n\t\t\tstart: 'flex-row-reverse',\n\t\t\tend: null,\n\t\t},\n\t},\n});\n\nconst circle = cva(\n\t[\n\t\t'h-6 w-6 flex items-center justify-center',\n\t\t'text-sm text-center font-medium',\n\t\t'border border-solid border-indigo-600',\n\t\t'rounded-full',\n\t],\n\t{\n\t\tvariants: {\n\t\t\talign: {\n\t\t\t\tstart: null,\n\t\t\t\tcenter: null,\n\t\t\t\tend: null,\n\t\t\t},\n\t\t\tdirection: {\n\t\t\t\thorizontal: null,\n\t\t\t\tvertical: null,\n\t\t\t},\n\t\t\tfinished: {\n\t\t\t\ttrue: null,\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t\tactive: {\n\t\t\t\ttrue: null,\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tfinished: false,\n\t\t\t\tactive: false,\n\t\t\t\tclass: 'text-indigo-600 bg-indigo-50',\n\t\t\t},\n\t\t\t{\n\t\t\t\tactive: true,\n\t\t\t\tfinished: false,\n\t\t\t\tclass: 'text-white bg-indigo-600',\n\t\t\t},\n\t\t\t{\n\t\t\t\tactive: false,\n\t\t\t\tfinished: true,\n\t\t\t\tclass: 'text-white bg-indigo-600',\n\t\t\t},\n\t\t\t{\n\t\t\t\tdirection: 'vertical',\n\t\t\t\talign: 'start',\n\t\t\t\tclass: 'mt-4',\n\t\t\t},\n\t\t\t{\n\t\t\t\tdirection: 'vertical',\n\t\t\t\talign: 'end',\n\t\t\t\tclass: 'mb-4',\n\t\t\t},\n\t\t],\n\t}\n);\n\nconst content = cva('text-sm font-medium flex-1 mt-[1px]', {\n\tvariants: {\n\t\tfinished: {\n\t\t\ttrue: null,\n\t\t\tfalse: null,\n\t\t},\n\t\tactive: {\n\t\t\ttrue: null,\n\t\t\tfalse: null,\n\t\t},\n\t\tdirection: {\n\t\t\thorizontal: null,\n\t\t\tvertical: null,\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\tfinished: false,\n\t\t\tactive: false,\n\t\t\tclass: 'text-storm-400',\n\t\t},\n\t\t{\n\t\t\tactive: true,\n\t\t\tfinished: false,\n\t\t\tclass: 'text-storm-500',\n\t\t},\n\t\t{\n\t\t\tactive: false,\n\t\t\tfinished: true,\n\t\t\tclass: 'text-storm-500',\n\t\t},\n\t\t{\n\t\t\tdirection: 'horizontal',\n\t\t\tactive: false,\n\t\t\tclass: 'hidden desktop-xs:inline-block',\n\t\t},\n\t],\n});\n\n@Component({\n\ttag: 'p-stepper-item',\n\tstyleUrl: 'stepper-item.component.css',\n\tshadow: true,\n})\nexport class StepperItem {\n\t/**\n\t * The number of the step\n\t */\n\t@Prop() number: number = 1;\n\n\t/**\n\t * The direction of the item\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 * Wether the step is finished\n\t */\n\t@Prop() finished: boolean = false;\n\n\t/**\n\t * Wether the step is active\n\t */\n\t@Prop() active: boolean = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={item({\n\t\t\t\t\talign: this.align,\n\t\t\t\t\tcontentPosition: this.contentPosition,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclass={circle({\n\t\t\t\t\t\talign: this.align,\n\t\t\t\t\t\tdirection: this.direction,\n\t\t\t\t\t\tactive: asBoolean(this.active),\n\t\t\t\t\t\tfinished: asBoolean(this.finished),\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{this.number}\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclass={content({\n\t\t\t\t\t\tactive: asBoolean(this.active),\n\t\t\t\t\t\tfinished: asBoolean(this.finished),\n\t\t\t\t\t\tdirection: this.direction,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n",":host {\n\t@apply flex-auto;\n\t@apply block;\n\t@apply bg-off-white-700;\n}\n\n:host([direction='horizontal']) {\n\t@apply h-[1px];\n}\n\n:host([direction='vertical']) {\n\t@apply mx-[calc(0.75rem-1px)] min-h-[1rem] w-[1px];\n}\n\n:host([active='true']),\n:host([active]:not([active='false'])) {\n\t@apply bg-indigo-600;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-stepper-line',\n\tstyleUrl: 'stepper-line.component.css',\n\tshadow: true,\n})\nexport class StepperLine {\n\t/**\n\t * Wether the line is active\n\t */\n\t@Prop({ reflect: true }) active: boolean = false;\n\n\t/**\n\t * The direction of the stepper line\n\t */\n\t@Prop({ reflect: true }) direction: 'horizontal' | 'vertical' =\n\t\t'horizontal';\n\n\trender() {\n\t\treturn <Host />;\n\t}\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@ import { c as cva } from './index-CO0T2jO4.js';
|
|
|
3
3
|
import { a as asBoolean } from './as-boolean-C5CTp9IA.js';
|
|
4
4
|
import './clsx-ChV9xqsO.js';
|
|
5
5
|
|
|
6
|
-
const stepperItemComponentCss = "*{box-sizing:border-box}.static{position:static!important}.mt-\\[1px\\]{margin-top:1px!important}.flex{display:flex!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.flex-1{flex:1 1 0%!important}.flex-row-reverse{flex-direction:row-reverse!important}.items-start{align-items:flex-start!important}.items-end{align-items:flex-end!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.rounded-full{border-radius:9999px!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-indigo-600{--tw-border-opacity:1!important;border-color:rgb(82 138 250/var(--tw-border-opacity,1))!important}.bg-indigo-50{--tw-bg-opacity:1!important;background-color:rgb(241 246 255/var(--tw-bg-opacity,1))!important}.bg-indigo-600{--tw-bg-opacity:1!important;background-color:rgb(82 138 250/var(--tw-bg-opacity,1))!important}.text-center{text-align:center!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-medium{font-weight:500!important}.text-indigo-600{--tw-text-opacity:1!important;color:rgb(82 138 250/var(--tw-text-opacity,1))!important}.text-storm-400{--tw-text-opacity:1!important;color:rgb(70 75 84/var(--tw-text-opacity,1))!important}.text-storm-500{color:rgb(24 30 41/var(--tw-text-opacity,1))!important}.text-storm-500,.text-white{--tw-text-opacity:1!important}.text-white{color:rgb(255 255 255/var(--tw-text-opacity,1))!important}@media (min-width:64rem){.desktop-xs\\:inline-block{display:inline-block!important}}";
|
|
6
|
+
const stepperItemComponentCss = "*{box-sizing:border-box}.static{position:static!important}.mb-4{margin-bottom:1rem!important}.mt-4{margin-top:1rem!important}.mt-\\[1px\\]{margin-top:1px!important}.flex{display:flex!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.flex-1{flex:1 1 0%!important}.flex-row-reverse{flex-direction:row-reverse!important}.items-start{align-items:flex-start!important}.items-end{align-items:flex-end!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.rounded-full{border-radius:9999px!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-indigo-600{--tw-border-opacity:1!important;border-color:rgb(82 138 250/var(--tw-border-opacity,1))!important}.bg-indigo-50{--tw-bg-opacity:1!important;background-color:rgb(241 246 255/var(--tw-bg-opacity,1))!important}.bg-indigo-600{--tw-bg-opacity:1!important;background-color:rgb(82 138 250/var(--tw-bg-opacity,1))!important}.text-center{text-align:center!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-medium{font-weight:500!important}.text-indigo-600{--tw-text-opacity:1!important;color:rgb(82 138 250/var(--tw-text-opacity,1))!important}.text-storm-400{--tw-text-opacity:1!important;color:rgb(70 75 84/var(--tw-text-opacity,1))!important}.text-storm-500{color:rgb(24 30 41/var(--tw-text-opacity,1))!important}.text-storm-500,.text-white{--tw-text-opacity:1!important}.text-white{color:rgb(255 255 255/var(--tw-text-opacity,1))!important}@media (min-width:64rem){.desktop-xs\\:inline-block{display:inline-block!important}}";
|
|
7
7
|
|
|
8
8
|
const item = cva('flex gap-2', {
|
|
9
9
|
variants: {
|
|
@@ -25,6 +25,15 @@ const circle = cva([
|
|
|
25
25
|
'rounded-full',
|
|
26
26
|
], {
|
|
27
27
|
variants: {
|
|
28
|
+
align: {
|
|
29
|
+
start: null,
|
|
30
|
+
center: null,
|
|
31
|
+
end: null,
|
|
32
|
+
},
|
|
33
|
+
direction: {
|
|
34
|
+
horizontal: null,
|
|
35
|
+
vertical: null,
|
|
36
|
+
},
|
|
28
37
|
finished: {
|
|
29
38
|
true: null,
|
|
30
39
|
false: null,
|
|
@@ -50,6 +59,16 @@ const circle = cva([
|
|
|
50
59
|
finished: true,
|
|
51
60
|
class: 'text-white bg-indigo-600',
|
|
52
61
|
},
|
|
62
|
+
{
|
|
63
|
+
direction: 'vertical',
|
|
64
|
+
align: 'start',
|
|
65
|
+
class: 'mt-4',
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
direction: 'vertical',
|
|
69
|
+
align: 'end',
|
|
70
|
+
class: 'mb-4',
|
|
71
|
+
},
|
|
53
72
|
],
|
|
54
73
|
});
|
|
55
74
|
const content = cva('text-sm font-medium flex-1 mt-[1px]', {
|
|
@@ -119,17 +138,19 @@ const StepperItem = class {
|
|
|
119
138
|
*/
|
|
120
139
|
active = false;
|
|
121
140
|
render() {
|
|
122
|
-
return (h("div", { key: '
|
|
141
|
+
return (h("div", { key: '3a445dfd75fdb020d4b2f9af06fab47939a476d8', class: item({
|
|
123
142
|
align: this.align,
|
|
124
143
|
contentPosition: this.contentPosition,
|
|
125
|
-
}) }, h("div", { key: '
|
|
144
|
+
}) }, h("div", { key: '899bbb3e5d2087c2e5e8aa220f610166dc927850', class: circle({
|
|
145
|
+
align: this.align,
|
|
146
|
+
direction: this.direction,
|
|
126
147
|
active: asBoolean(this.active),
|
|
127
148
|
finished: asBoolean(this.finished),
|
|
128
|
-
}) }, this.number), h("div", { key: '
|
|
149
|
+
}) }, this.number), h("div", { key: '77be804d4be1749d5c4947e603f578f96ed7d2ea', class: content({
|
|
129
150
|
active: asBoolean(this.active),
|
|
130
151
|
finished: asBoolean(this.finished),
|
|
131
152
|
direction: this.direction,
|
|
132
|
-
}) }, h("slot", { key: '
|
|
153
|
+
}) }, h("slot", { key: '45a529fca3573649f0eedf5c8eb193004abebf6b' }))));
|
|
133
154
|
}
|
|
134
155
|
};
|
|
135
156
|
StepperItem.style = stepperItemComponentCss;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-stepper-item.p-stepper-line.entry.js","mappings":";;;;;AAAA,MAAM,uBAAuB,GAAG,
|
|
1
|
+
{"file":"p-stepper-item.p-stepper-line.entry.js","mappings":"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","names":[],"sources":["src/components/atoms/stepper/item/stepper-item.component.css?tag=p-stepper-item&encapsulation=shadow","src/components/atoms/stepper/item/stepper-item.component.tsx","src/components/atoms/stepper/line/stepper-line.component.css?tag=p-stepper-line&encapsulation=shadow","src/components/atoms/stepper/line/stepper-line.component.tsx"],"sourcesContent":["","import { Component, h, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { asBoolean } from '../../../../utils/as-boolean';\n\nconst item = cva('flex gap-2', {\n\tvariants: {\n\t\talign: {\n\t\t\tstart: 'items-start',\n\t\t\tcenter: 'items-center',\n\t\t\tend: 'items-end',\n\t\t},\n\t\tcontentPosition: {\n\t\t\tstart: 'flex-row-reverse',\n\t\t\tend: null,\n\t\t},\n\t},\n});\n\nconst circle = cva(\n\t[\n\t\t'h-6 w-6 flex items-center justify-center',\n\t\t'text-sm text-center font-medium',\n\t\t'border border-solid border-indigo-600',\n\t\t'rounded-full',\n\t],\n\t{\n\t\tvariants: {\n\t\t\talign: {\n\t\t\t\tstart: null,\n\t\t\t\tcenter: null,\n\t\t\t\tend: null,\n\t\t\t},\n\t\t\tdirection: {\n\t\t\t\thorizontal: null,\n\t\t\t\tvertical: null,\n\t\t\t},\n\t\t\tfinished: {\n\t\t\t\ttrue: null,\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t\tactive: {\n\t\t\t\ttrue: null,\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tfinished: false,\n\t\t\t\tactive: false,\n\t\t\t\tclass: 'text-indigo-600 bg-indigo-50',\n\t\t\t},\n\t\t\t{\n\t\t\t\tactive: true,\n\t\t\t\tfinished: false,\n\t\t\t\tclass: 'text-white bg-indigo-600',\n\t\t\t},\n\t\t\t{\n\t\t\t\tactive: false,\n\t\t\t\tfinished: true,\n\t\t\t\tclass: 'text-white bg-indigo-600',\n\t\t\t},\n\t\t\t{\n\t\t\t\tdirection: 'vertical',\n\t\t\t\talign: 'start',\n\t\t\t\tclass: 'mt-4',\n\t\t\t},\n\t\t\t{\n\t\t\t\tdirection: 'vertical',\n\t\t\t\talign: 'end',\n\t\t\t\tclass: 'mb-4',\n\t\t\t},\n\t\t],\n\t}\n);\n\nconst content = cva('text-sm font-medium flex-1 mt-[1px]', {\n\tvariants: {\n\t\tfinished: {\n\t\t\ttrue: null,\n\t\t\tfalse: null,\n\t\t},\n\t\tactive: {\n\t\t\ttrue: null,\n\t\t\tfalse: null,\n\t\t},\n\t\tdirection: {\n\t\t\thorizontal: null,\n\t\t\tvertical: null,\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\tfinished: false,\n\t\t\tactive: false,\n\t\t\tclass: 'text-storm-400',\n\t\t},\n\t\t{\n\t\t\tactive: true,\n\t\t\tfinished: false,\n\t\t\tclass: 'text-storm-500',\n\t\t},\n\t\t{\n\t\t\tactive: false,\n\t\t\tfinished: true,\n\t\t\tclass: 'text-storm-500',\n\t\t},\n\t\t{\n\t\t\tdirection: 'horizontal',\n\t\t\tactive: false,\n\t\t\tclass: 'hidden desktop-xs:inline-block',\n\t\t},\n\t],\n});\n\n@Component({\n\ttag: 'p-stepper-item',\n\tstyleUrl: 'stepper-item.component.css',\n\tshadow: true,\n})\nexport class StepperItem {\n\t/**\n\t * The number of the step\n\t */\n\t@Prop() number: number = 1;\n\n\t/**\n\t * The direction of the item\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 * Wether the step is finished\n\t */\n\t@Prop() finished: boolean = false;\n\n\t/**\n\t * Wether the step is active\n\t */\n\t@Prop() active: boolean = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={item({\n\t\t\t\t\talign: this.align,\n\t\t\t\t\tcontentPosition: this.contentPosition,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclass={circle({\n\t\t\t\t\t\talign: this.align,\n\t\t\t\t\t\tdirection: this.direction,\n\t\t\t\t\t\tactive: asBoolean(this.active),\n\t\t\t\t\t\tfinished: asBoolean(this.finished),\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{this.number}\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclass={content({\n\t\t\t\t\t\tactive: asBoolean(this.active),\n\t\t\t\t\t\tfinished: asBoolean(this.finished),\n\t\t\t\t\t\tdirection: this.direction,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n",":host {\n\t@apply flex-auto;\n\t@apply block;\n\t@apply bg-off-white-700;\n}\n\n:host([direction='horizontal']) {\n\t@apply h-[1px];\n}\n\n:host([direction='vertical']) {\n\t@apply mx-[calc(0.75rem-1px)] min-h-[1rem] w-[1px];\n}\n\n:host([active='true']),\n:host([active]:not([active='false'])) {\n\t@apply bg-indigo-600;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-stepper-line',\n\tstyleUrl: 'stepper-line.component.css',\n\tshadow: true,\n})\nexport class StepperLine {\n\t/**\n\t * Wether the line is active\n\t */\n\t@Prop({ reflect: true }) active: boolean = false;\n\n\t/**\n\t * The direction of the stepper line\n\t */\n\t@Prop({ reflect: true }) direction: 'horizontal' | 'vertical' =\n\t\t'horizontal';\n\n\trender() {\n\t\treturn <Host />;\n\t}\n}\n"],"version":3}
|
|
@@ -202,12 +202,18 @@ const Stepper = class {
|
|
|
202
202
|
stepperLine.style.marginTop = '0';
|
|
203
203
|
stepperLine.style.marginBottom = '0';
|
|
204
204
|
if (this.align === 'start' || this.align === 'center') {
|
|
205
|
-
stepperLine.style.marginTop = `-${heightDiff / 16}rem`;
|
|
206
|
-
totalHeight += heightDiff;
|
|
205
|
+
stepperLine.style.marginTop = `-${heightDiff / 16 - (this.align === 'start' ? 1.25 : 0)}rem`;
|
|
206
|
+
totalHeight += heightDiff - (this.align === 'start' ? 8 : 0);
|
|
207
|
+
if (this.align === 'start') {
|
|
208
|
+
stepperLine.style.marginBottom = `-0.75rem`;
|
|
209
|
+
}
|
|
207
210
|
}
|
|
208
211
|
if (this.align === 'center' || this.align === 'end') {
|
|
209
|
-
stepperLine.style.marginBottom = `-${heightDiffNext / 16}rem`;
|
|
210
|
-
totalHeight += heightDiffNext;
|
|
212
|
+
stepperLine.style.marginBottom = `-${heightDiffNext / 16 - (this.align === 'end' ? 1.25 : 0)}rem`;
|
|
213
|
+
totalHeight += heightDiffNext - (this.align === 'end' ? 8 : 0);
|
|
214
|
+
if (this.align === 'end') {
|
|
215
|
+
stepperLine.style.marginTop = `-0.75rem`;
|
|
216
|
+
}
|
|
211
217
|
}
|
|
212
218
|
stepperLine.style.minHeight = `calc(${totalHeight / 16}rem)`;
|
|
213
219
|
}
|
|
@@ -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 _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.direction = this.direction;\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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"}
|
|
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 _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.direction = this.direction;\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 = `-${\n\t\t\t\t\theightDiff / 16 - (this.align === 'start' ? 1.25 : 0)\n\t\t\t\t}rem`;\n\t\t\t\ttotalHeight += heightDiff - (this.align === 'start' ? 8 : 0);\n\n\t\t\t\tif (this.align === 'start') {\n\t\t\t\t\tstepperLine.style.marginBottom = `-0.75rem`;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (this.align === 'center' || this.align === 'end') {\n\t\t\t\tstepperLine.style.marginBottom = `-${\n\t\t\t\t\theightDiffNext / 16 - (this.align === 'end' ? 1.25 : 0)\n\t\t\t\t}rem`;\n\t\t\t\ttotalHeight += heightDiffNext - (this.align === 'end' ? 8 : 0);\n\n\t\t\t\tif (this.align === 'end') {\n\t\t\t\t\tstepperLine.style.marginTop = `-0.75rem`;\n\t\t\t\t}\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
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!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-
|
|
1
|
+
<!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-83b41328.js"><link rel="modulepreload" href="/build/p-BmA7NKgh.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-DhGo7hbh.js"><script type="module" src="/build/p-83b41328.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-bold{font-weight:700!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-inherit{color:inherit!important}.text-storm-300{--tw-text-opacity:1!important;color:rgb(116 120 127/var(--tw-text-opacity,1))!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-bold{font-weight:700!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-inherit{color:inherit!important}.text-storm-300{--tw-text-opacity:1!important;color:rgb(116 120 127/var(--tw-text-opacity,1))!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(116 120 127/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{--tw-text-opacity:1;color:rgb(24 30 41/var(--tw-text-opacity,1));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-07-30T12:29:39">
|
|
2
2
|
if ('serviceWorker' in navigator && location.protocol !== 'file:') {
|
|
3
3
|
window.addEventListener('load', function() {
|
|
4
4
|
navigator.serviceWorker.register('/sw.js')
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,g as e,h as i,F as s}from"./p-DhGo7hbh.js";import{c as n}from"./p-CBWjHURv.js";import"./p-ChV9xqsO.js";const r="*{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 o=n(["flex gap-2"],{variants:{direction:{vertical:"w-full flex-col flex-wrap",horizontal:"h-auto items-center"},generatedOnce:{true:"opacity-100",false:"opacity-0"}}});const h=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,n)=>{const r=this._getItem(typeof e==="string"?{active:false,finished:false,content:e}:e,n);return i(s,null,r,n<t.length-1&&this._getLine(n))}));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.direction=this.direction;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 n=document.createElement("p-stepper-line");this._el.insertBefore(n,t);this._setLineData(n,s,t,i,e);const r=n.previousElementSibling;if(r&&r.tagName.toLowerCase()==="p-stepper-line"){r.remove()}continue}if(t&&t.tagName.toLowerCase()==="p-stepper-line"){const n=t;t=t.nextElementSibling;if(t&&t.tagName.toLowerCase()==="p-stepper-item"){this._setLineData(n,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,n){let r=e.clientHeight-24;let o=i.clientHeight-24;if(this.align==="center"){r=r/2;o=o/2}t.direction=this.direction;t.active=s<n;if(r>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=`-${r/16}rem`;e+=r}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"]}}};h.style=r;export{h as p_stepper};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,g as e,h as i,F as s}from"./p-DhGo7hbh.js";import{c as n}from"./p-CBWjHURv.js";import"./p-ChV9xqsO.js";const r="*{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 o=n(["flex gap-2"],{variants:{direction:{vertical:"w-full flex-col flex-wrap",horizontal:"h-auto items-center"},generatedOnce:{true:"opacity-100",false:"opacity-0"}}});const h=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,n)=>{const r=this._getItem(typeof e==="string"?{active:false,finished:false,content:e}:e,n);return i(s,null,r,n<t.length-1&&this._getLine(n))}));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.direction=this.direction;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 n=document.createElement("p-stepper-line");this._el.insertBefore(n,t);this._setLineData(n,s,t,i,e);const r=n.previousElementSibling;if(r&&r.tagName.toLowerCase()==="p-stepper-line"){r.remove()}continue}if(t&&t.tagName.toLowerCase()==="p-stepper-line"){const n=t;t=t.nextElementSibling;if(t&&t.tagName.toLowerCase()==="p-stepper-item"){this._setLineData(n,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,n){let r=e.clientHeight-24;let o=i.clientHeight-24;if(this.align==="center"){r=r/2;o=o/2}t.direction=this.direction;t.active=s<n;if(r>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=`-${r/16-(this.align==="start"?1.25:0)}rem`;e+=r-(this.align==="start"?8:0);if(this.align==="start"){t.style.marginBottom=`-0.75rem`}}if(this.align==="center"||this.align==="end"){t.style.marginBottom=`-${o/16-(this.align==="end"?1.25:0)}rem`;e+=o-(this.align==="end"?8:0);if(this.align==="end"){t.style.marginTop=`-0.75rem`}}t.style.minHeight=`calc(${e/16}rem)`}}static get watchers(){return{align:["_onAlignChange"],direction:["_onDirectionChange"],activeStep:["_onActiveStepChange"]}}};h.style=r;export{h as p_stepper};
|
|
2
|
+
//# sourceMappingURL=p-23d7b822.entry.js.map
|