@paperless/core 2.4.1 → 2.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/dist/build/{p-23d7b822.entry.js → p-6fdd90eb.entry.js} +2 -2
- package/dist/{paperless/p-23d7b822.entry.js.map → build/p-6fdd90eb.entry.js.map} +1 -1
- package/dist/build/p-dc21ccd3.entry.js +2 -0
- package/dist/build/{p-8cc79846.entry.js.map → p-dc21ccd3.entry.js.map} +1 -1
- package/dist/build/{p-83b41328.js → p-e52b4961.js} +1 -1
- 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 +3 -3
- package/dist/cjs/p-stepper-item_2.cjs.entry.js.map +1 -1
- package/dist/cjs/p-stepper.cjs.entry.js +4 -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 +2 -2
- package/dist/collection/components/atoms/stepper/item/stepper-item.component.js.map +1 -1
- package/dist/collection/components/organisms/stepper/stepper.component.js +4 -4
- package/dist/collection/components/organisms/stepper/stepper.component.js.map +1 -1
- package/dist/components/{p-DsyVC2xP.js → p-D3EM8Uiq.js} +5 -5
- package/dist/components/{p-DsyVC2xP.js.map → p-D3EM8Uiq.js.map} +1 -1
- package/dist/components/p-stepper-item.js +1 -1
- package/dist/components/p-stepper.js +5 -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 +3 -3
- package/dist/esm/p-stepper-item_2.entry.js.map +1 -1
- package/dist/esm/p-stepper.entry.js +4 -4
- package/dist/esm/p-stepper.entry.js.map +1 -1
- package/dist/index.html +1 -1
- package/dist/paperless/{p-23d7b822.entry.js → p-6fdd90eb.entry.js} +2 -2
- package/dist/{build/p-23d7b822.entry.js.map → paperless/p-6fdd90eb.entry.js.map} +1 -1
- package/dist/paperless/p-dc21ccd3.entry.js +2 -0
- package/dist/paperless/{p-8cc79846.entry.js.map → p-dc21ccd3.entry.js.map} +1 -1
- 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-8cc79846.entry.js +0 -2
- package/dist/paperless/p-8cc79846.entry.js +0 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"p-stepper-item.p-stepper-line.entry.cjs.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-
|
|
1
|
+
{"version":3,"file":"p-stepper-item.p-stepper-line.entry.cjs.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-5',\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-5',\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":["cva","h","asBoolean","Host"],"mappings":";;;;;;;AAAA,MAAM,uBAAuB,GAAG,0oDAA0oD;;ACI1qD,MAAM,IAAI,GAAGA,WAAG,CAAC,YAAY,EAAE;AAC9B,IAAA,QAAQ,EAAE;AACT,QAAA,KAAK,EAAE;AACN,YAAA,KAAK,EAAE,aAAa;AACpB,YAAA,MAAM,EAAE,cAAc;AACtB,YAAA,GAAG,EAAE,WAAW;AAChB,SAAA;AACD,QAAA,eAAe,EAAE;AAChB,YAAA,KAAK,EAAE,kBAAkB;AACzB,YAAA,GAAG,EAAE,IAAI;AACT,SAAA;AACD,KAAA;AACD,CAAA,CAAC;AAEF,MAAM,MAAM,GAAGA,WAAG,CACjB;IACC,0CAA0C;IAC1C,iCAAiC;IACjC,uCAAuC;IACvC,cAAc;CACd,EACD;AACC,IAAA,QAAQ,EAAE;AACT,QAAA,KAAK,EAAE;AACN,YAAA,KAAK,EAAE,IAAI;AACX,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,GAAG,EAAE,IAAI;AACT,SAAA;AACD,QAAA,SAAS,EAAE;AACV,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,QAAQ,EAAE,IAAI;AACd,SAAA;AACD,QAAA,QAAQ,EAAE;AACT,YAAA,IAAI,EAAE,IAAI;AACV,YAAA,KAAK,EAAE,IAAI;AACX,SAAA;AACD,QAAA,MAAM,EAAE;AACP,YAAA,IAAI,EAAE,IAAI;AACV,YAAA,KAAK,EAAE,IAAI;AACX,SAAA;AACD,KAAA;AACD,IAAA,gBAAgB,EAAE;AACjB,QAAA;AACC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,MAAM,EAAE,KAAK;AACb,YAAA,KAAK,EAAE,8BAA8B;AACrC,SAAA;AACD,QAAA;AACC,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,KAAK,EAAE,0BAA0B;AACjC,SAAA;AACD,QAAA;AACC,YAAA,MAAM,EAAE,KAAK;AACb,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,KAAK,EAAE,0BAA0B;AACjC,SAAA;AACD,QAAA;AACC,YAAA,SAAS,EAAE,UAAU;AACrB,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,MAAM;AACb,SAAA;AACD,QAAA;AACC,YAAA,SAAS,EAAE,UAAU;AACrB,YAAA,KAAK,EAAE,KAAK;AACZ,YAAA,KAAK,EAAE,MAAM;AACb,SAAA;AACD,KAAA;AACD,CAAA,CACD;AAED,MAAM,OAAO,GAAGA,WAAG,CAAC,qCAAqC,EAAE;AAC1D,IAAA,QAAQ,EAAE;AACT,QAAA,QAAQ,EAAE;AACT,YAAA,IAAI,EAAE,IAAI;AACV,YAAA,KAAK,EAAE,IAAI;AACX,SAAA;AACD,QAAA,MAAM,EAAE;AACP,YAAA,IAAI,EAAE,IAAI;AACV,YAAA,KAAK,EAAE,IAAI;AACX,SAAA;AACD,QAAA,SAAS,EAAE;AACV,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,QAAQ,EAAE,IAAI;AACd,SAAA;AACD,KAAA;AACD,IAAA,gBAAgB,EAAE;AACjB,QAAA;AACC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,MAAM,EAAE,KAAK;AACb,YAAA,KAAK,EAAE,gBAAgB;AACvB,SAAA;AACD,QAAA;AACC,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,KAAK,EAAE,gBAAgB;AACvB,SAAA;AACD,QAAA;AACC,YAAA,MAAM,EAAE,KAAK;AACb,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,KAAK,EAAE,gBAAgB;AACvB,SAAA;AACD,QAAA;AACC,YAAA,SAAS,EAAE,YAAY;AACvB,YAAA,MAAM,EAAE,KAAK;AACb,YAAA,KAAK,EAAE,gCAAgC;AACvC,SAAA;AACD,KAAA;AACD,CAAA,CAAC;MAOW,WAAW,GAAA,MAAA;;;;AACvB;;AAEG;IACK,MAAM,GAAW,CAAC;AAE1B;;AAEG;IACK,SAAS,GAA8B,YAAY;AAE3D;;AAEG;IACK,KAAK,GAA+B,QAAQ;AAEpD;;AAEG;IACK,eAAe,GAAoB,KAAK;AAEhD;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACK,MAAM,GAAY,KAAK;IAE/B,MAAM,GAAA;AACL,QAAA,QACCC,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,KAAK,EAAE,IAAI,CAAC;gBACX,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,eAAe,EAAE,IAAI,CAAC,eAAe;AACrC,aAAA,CAAC,EAAA,EAEFA,OACC,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,MAAM,CAAC;gBACb,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,SAAS,EAAE,IAAI,CAAC,SAAS;AACzB,gBAAA,MAAM,EAAEC,mBAAS,CAAC,IAAI,CAAC,MAAM,CAAC;AAC9B,gBAAA,QAAQ,EAAEA,mBAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;AAClC,aAAA,CAAC,EAED,EAAA,IAAI,CAAC,MAAM,CACP,EACND,OACC,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,CAAC;AACd,gBAAA,MAAM,EAAEC,mBAAS,CAAC,IAAI,CAAC,MAAM,CAAC;AAC9B,gBAAA,QAAQ,EAAEA,mBAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;gBAClC,SAAS,EAAE,IAAI,CAAC,SAAS;AACzB,aAAA,CAAC,EAAA,EAEFD,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH,CACD;;;;;ACjLT,MAAM,uBAAuB,GAAG,6sBAA6sB;;MCOhuB,WAAW,GAAA,MAAA;;;;AACvB;;AAEG;IACsB,MAAM,GAAY,KAAK;AAEhD;;AAEG;IACsB,SAAS,GACjC,YAAY;IAEb,MAAM,GAAA;QACL,OAAOA,OAAA,CAACE,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAG;;;;;;;;"}
|
|
@@ -5,7 +5,7 @@ var index$1 = require('./index-mudu9vpz.js');
|
|
|
5
5
|
var asBoolean = require('./as-boolean-C1PzA22I.js');
|
|
6
6
|
require('./clsx-BtxeOLZW.js');
|
|
7
7
|
|
|
8
|
-
const stepperItemComponentCss = "*{box-sizing:border-box}.static{position:static!important}.mb-
|
|
8
|
+
const stepperItemComponentCss = "*{box-sizing:border-box}.static{position:static!important}.mb-5{margin-bottom:1.25rem!important}.mt-5{margin-top:1.25rem!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}}";
|
|
9
9
|
|
|
10
10
|
const item = index$1.cva('flex gap-2', {
|
|
11
11
|
variants: {
|
|
@@ -64,12 +64,12 @@ const circle = index$1.cva([
|
|
|
64
64
|
{
|
|
65
65
|
direction: 'vertical',
|
|
66
66
|
align: 'start',
|
|
67
|
-
class: 'mt-
|
|
67
|
+
class: 'mt-5',
|
|
68
68
|
},
|
|
69
69
|
{
|
|
70
70
|
direction: 'vertical',
|
|
71
71
|
align: 'end',
|
|
72
|
-
class: 'mb-
|
|
72
|
+
class: 'mb-5',
|
|
73
73
|
},
|
|
74
74
|
],
|
|
75
75
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-stepper-item.p-stepper-line.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,uBAAuB,GAAG,
|
|
1
|
+
{"file":"p-stepper-item.p-stepper-line.entry.cjs.js","mappings":"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","names":["cva","h","asBoolean","Host"],"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-5',\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-5',\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}
|
|
@@ -204,17 +204,17 @@ const Stepper = class {
|
|
|
204
204
|
stepperLine.style.marginTop = '0';
|
|
205
205
|
stepperLine.style.marginBottom = '0';
|
|
206
206
|
if (this.align === 'start' || this.align === 'center') {
|
|
207
|
-
stepperLine.style.marginTop = `-${heightDiff / 16 - (this.align === 'start' ? 1.
|
|
207
|
+
stepperLine.style.marginTop = `-${heightDiff / 16 - (this.align === 'start' ? 1.5 : 0)}rem`;
|
|
208
208
|
totalHeight += heightDiff - (this.align === 'start' ? 8 : 0);
|
|
209
209
|
if (this.align === 'start') {
|
|
210
|
-
stepperLine.style.marginBottom = `-
|
|
210
|
+
stepperLine.style.marginBottom = `-1rem`;
|
|
211
211
|
}
|
|
212
212
|
}
|
|
213
213
|
if (this.align === 'center' || this.align === 'end') {
|
|
214
|
-
stepperLine.style.marginBottom = `-${heightDiffNext / 16 - (this.align === 'end' ? 1.
|
|
214
|
+
stepperLine.style.marginBottom = `-${heightDiffNext / 16 - (this.align === 'end' ? 1.5 : 0)}rem`;
|
|
215
215
|
totalHeight += heightDiffNext - (this.align === 'end' ? 8 : 0);
|
|
216
216
|
if (this.align === 'end') {
|
|
217
|
-
stepperLine.style.marginTop = `-
|
|
217
|
+
stepperLine.style.marginTop = `-1rem`;
|
|
218
218
|
}
|
|
219
219
|
}
|
|
220
220
|
stepperLine.style.minHeight = `calc(${totalHeight / 16}rem)`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-stepper.entry.cjs.js","mappings":"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","names":["cva","index","h","Fragment"],"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
|
+
{"file":"p-stepper.entry.cjs.js","mappings":"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","names":["cva","index","h","Fragment"],"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.5 : 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 = `-1rem`;\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.5 : 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 = `-1rem`;\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.entry.cjs.js","sources":["src/components/organisms/stepper/stepper.component.css?tag=p-stepper&encapsulation=shadow","src/components/organisms/stepper/stepper.component.tsx"],"sourcesContent":["","import {\n\tComponent,\n\tElement,\n\tFragment,\n\th,\n\tProp,\n\tState,\n\tWatch,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nexport interface StepperStepItemObj {\n\tcontent: string;\n\tactive: boolean;\n\tfinished: boolean;\n}\n\nconst stepper = cva(['flex gap-2'], {\n\tvariants: {\n\t\tdirection: {\n\t\t\tvertical: 'w-full flex-col flex-wrap',\n\t\t\thorizontal: 'h-auto items-center',\n\t\t},\n\t\tgeneratedOnce: {\n\t\t\ttrue: 'opacity-100',\n\t\t\tfalse: 'opacity-0',\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-stepper',\n\tstyleUrl: 'stepper.component.css',\n\tshadow: true,\n})\nexport class Stepper {\n\t/**\n\t * The steps but as a property, can also be used via slot\n\t */\n\t@Prop() steps: string | string[] | StepperStepItemObj[];\n\n\t/**\n\t * The currently active step\n\t */\n\t@Prop() activeStep: number = 1;\n\n\t/**\n\t * Wether to automatically apply active & finished to items\n\t */\n\t@Prop() enableAutoStatus: boolean = true;\n\n\t/**\n\t * The direction of the stepper\n\t */\n\t@Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n\t/**\n\t * The alignment of the content in case of vertical direction\n\t */\n\t@Prop() align: 'start' | 'center' | 'end' = 'center';\n\n\t/**\n\t * The position of the content in case of vertical direction\n\t */\n\t@Prop() contentPosition: 'start' | 'end' = 'end';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t@State() private _generatedOnce = false;\n\t@State() private _loaded = false;\n\n\tprivate _generateTimeout: NodeJS.Timeout | undefined;\n\tprivate _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":["cva","index","h","Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"p-stepper.entry.cjs.js","sources":["src/components/organisms/stepper/stepper.component.css?tag=p-stepper&encapsulation=shadow","src/components/organisms/stepper/stepper.component.tsx"],"sourcesContent":["","import {\n\tComponent,\n\tElement,\n\tFragment,\n\th,\n\tProp,\n\tState,\n\tWatch,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nexport interface StepperStepItemObj {\n\tcontent: string;\n\tactive: boolean;\n\tfinished: boolean;\n}\n\nconst stepper = cva(['flex gap-2'], {\n\tvariants: {\n\t\tdirection: {\n\t\t\tvertical: 'w-full flex-col flex-wrap',\n\t\t\thorizontal: 'h-auto items-center',\n\t\t},\n\t\tgeneratedOnce: {\n\t\t\ttrue: 'opacity-100',\n\t\t\tfalse: 'opacity-0',\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-stepper',\n\tstyleUrl: 'stepper.component.css',\n\tshadow: true,\n})\nexport class Stepper {\n\t/**\n\t * The steps but as a property, can also be used via slot\n\t */\n\t@Prop() steps: string | string[] | StepperStepItemObj[];\n\n\t/**\n\t * The currently active step\n\t */\n\t@Prop() activeStep: number = 1;\n\n\t/**\n\t * Wether to automatically apply active & finished to items\n\t */\n\t@Prop() enableAutoStatus: boolean = true;\n\n\t/**\n\t * The direction of the stepper\n\t */\n\t@Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n\t/**\n\t * The alignment of the content in case of vertical direction\n\t */\n\t@Prop() align: 'start' | 'center' | 'end' = 'center';\n\n\t/**\n\t * The position of the content in case of vertical direction\n\t */\n\t@Prop() contentPosition: 'start' | 'end' = 'end';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t@State() private _generatedOnce = false;\n\t@State() private _loaded = false;\n\n\tprivate _generateTimeout: NodeJS.Timeout | undefined;\n\tprivate _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.5 : 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 = `-1rem`;\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.5 : 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 = `-1rem`;\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":["cva","index","h","Fragment"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
*{box-sizing:border-box}.static{position:static!important}.mb-
|
|
1
|
+
*{box-sizing:border-box}.static{position:static!important}.mb-5{margin-bottom:1.25rem!important}.mt-5{margin-top:1.25rem!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}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stepper-item.component.js","sourceRoot":"","sources":["../../../../../src/components/atoms/stepper/item/stepper-item.component.tsx"],"names":[],"mappings":"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","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-
|
|
1
|
+
{"version":3,"file":"stepper-item.component.js","sourceRoot":"","sources":["../../../../../src/components/atoms/stepper/item/stepper-item.component.tsx"],"names":[],"mappings":"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","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-5',\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-5',\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"]}
|
|
@@ -198,17 +198,17 @@ export class Stepper {
|
|
|
198
198
|
stepperLine.style.marginTop = '0';
|
|
199
199
|
stepperLine.style.marginBottom = '0';
|
|
200
200
|
if (this.align === 'start' || this.align === 'center') {
|
|
201
|
-
stepperLine.style.marginTop = `-${heightDiff / 16 - (this.align === 'start' ? 1.
|
|
201
|
+
stepperLine.style.marginTop = `-${heightDiff / 16 - (this.align === 'start' ? 1.5 : 0)}rem`;
|
|
202
202
|
totalHeight += heightDiff - (this.align === 'start' ? 8 : 0);
|
|
203
203
|
if (this.align === 'start') {
|
|
204
|
-
stepperLine.style.marginBottom = `-
|
|
204
|
+
stepperLine.style.marginBottom = `-1rem`;
|
|
205
205
|
}
|
|
206
206
|
}
|
|
207
207
|
if (this.align === 'center' || this.align === 'end') {
|
|
208
|
-
stepperLine.style.marginBottom = `-${heightDiffNext / 16 - (this.align === 'end' ? 1.
|
|
208
|
+
stepperLine.style.marginBottom = `-${heightDiffNext / 16 - (this.align === 'end' ? 1.5 : 0)}rem`;
|
|
209
209
|
totalHeight += heightDiffNext - (this.align === 'end' ? 8 : 0);
|
|
210
210
|
if (this.align === 'end') {
|
|
211
|
-
stepperLine.style.marginTop = `-
|
|
211
|
+
stepperLine.style.marginTop = `-1rem`;
|
|
212
212
|
}
|
|
213
213
|
}
|
|
214
214
|
stepperLine.style.minHeight = `calc(${totalHeight / 16}rem)`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stepper.component.js","sourceRoot":"","sources":["../../../../src/components/organisms/stepper/stepper.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tElement,\n\tFragment,\n\th,\n\tProp,\n\tState,\n\tWatch,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nexport interface StepperStepItemObj {\n\tcontent: string;\n\tactive: boolean;\n\tfinished: boolean;\n}\n\nconst stepper = cva(['flex gap-2'], {\n\tvariants: {\n\t\tdirection: {\n\t\t\tvertical: 'w-full flex-col flex-wrap',\n\t\t\thorizontal: 'h-auto items-center',\n\t\t},\n\t\tgeneratedOnce: {\n\t\t\ttrue: 'opacity-100',\n\t\t\tfalse: 'opacity-0',\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-stepper',\n\tstyleUrl: 'stepper.component.css',\n\tshadow: true,\n})\nexport class Stepper {\n\t/**\n\t * The steps but as a property, can also be used via slot\n\t */\n\t@Prop() steps: string | string[] | StepperStepItemObj[];\n\n\t/**\n\t * The currently active step\n\t */\n\t@Prop() activeStep: number = 1;\n\n\t/**\n\t * Wether to automatically apply active & finished to items\n\t */\n\t@Prop() enableAutoStatus: boolean = true;\n\n\t/**\n\t * The direction of the stepper\n\t */\n\t@Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n\t/**\n\t * The alignment of the content in case of vertical direction\n\t */\n\t@Prop() align: 'start' | 'center' | 'end' = 'center';\n\n\t/**\n\t * The position of the content in case of vertical direction\n\t */\n\t@Prop() contentPosition: 'start' | 'end' = 'end';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t@State() private _generatedOnce = false;\n\t@State() private _loaded = false;\n\n\tprivate _generateTimeout: NodeJS.Timeout | undefined;\n\tprivate _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"]}
|
|
1
|
+
{"version":3,"file":"stepper.component.js","sourceRoot":"","sources":["../../../../src/components/organisms/stepper/stepper.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EACT,OAAO,EACP,QAAQ,EACR,CAAC,EACD,IAAI,EACJ,KAAK,EACL,KAAK,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAQ/C,MAAM,OAAO,GAAG,GAAG,CAAC,CAAC,YAAY,CAAC,EAAE;IACnC,QAAQ,EAAE;QACT,SAAS,EAAE;YACV,QAAQ,EAAE,2BAA2B;YACrC,UAAU,EAAE,qBAAqB;SACjC;QACD,aAAa,EAAE;YACd,IAAI,EAAE,aAAa;YACnB,KAAK,EAAE,WAAW;SAClB;KACD;CACD,CAAC,CAAC;AAOH,MAAM,OAAO,OAAO;IACnB;;OAEG;IACK,KAAK,CAA2C;IAExD;;OAEG;IACK,UAAU,GAAW,CAAC,CAAC;IAE/B;;OAEG;IACK,gBAAgB,GAAY,IAAI,CAAC;IAEzC;;OAEG;IACK,SAAS,GAA8B,YAAY,CAAC;IAE5D;;OAEG;IACK,KAAK,GAA+B,QAAQ,CAAC;IAErD;;OAEG;IACK,eAAe,GAAoB,KAAK,CAAC;IAEjD;;OAEG;IACgB,GAAG,CAAc;IAEnB,cAAc,GAAG,KAAK,CAAC;IACvB,OAAO,GAAG,KAAK,CAAC;IAEzB,gBAAgB,CAA6B;IAC7C,aAAa,CAAiB;IAC9B,eAAe,CAAiB;IAEhC,aAAa,GAAG,KAAK,CAAC;IAE9B,gBAAgB;QACf,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;QAC5D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACrB,CAAC;IAED,kBAAkB;QACjB,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YAC1B,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,CAAC;QACnC,CAAC;IACF,CAAC;IAED,MAAM;QACL,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YACnB,OAAO;QACR,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YACzB,MAAM,KAAK,GACV,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;YACtE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC;gBACpB,OAAO;YACR,CAAC;YAED,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBACvC,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CACzB,OAAO,IAAI,KAAK,QAAQ;oBACvB,CAAC,CAAC;wBACA,MAAM,EAAE,KAAK;wBACb,QAAQ,EAAE,KAAK;wBACf,OAAO,EAAE,IAAI;qBACZ;oBACH,CAAC,CAAC,IAAI,EACP,KAAK,CACL,CAAC;gBACF,OAAO,CACN,EAAC,QAAQ;oBACP,IAAI;oBACJ,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CACvC,CACX,CAAC;YACH,CAAC,CAAC,CAAC;YAEH,OAAO,CACN,WACC,KAAK,EAAE,OAAO,CAAC;oBACd,SAAS,EAAE,IAAI,CAAC,SAAS;oBACzB,aAAa,EAAE,IAAI;iBACnB,CAAC,EACF,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAErC,KAAK,CACD,CACN,CAAC;QACH,CAAC;QAED,OAAO,CACN,WACC,KAAK,EAAE,OAAO,CAAC;gBACd,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,aAAa,EAAE,IAAI,CAAC,cAAc;aAClC,CAAC,EACF,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC;YAEtC,YAAM,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,GAAI,CAClD,CACN,CAAC;IACH,CAAC;IAGS,cAAc;QACvB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC3B,CAAC;IAGS,kBAAkB;QAC3B,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC3B,CAAC;IAGS,mBAAmB;QAC5B,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC3B,CAAC;IAEO,gBAAgB,CAAC,GAAmB;QAC3C,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC;QAEzB,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YAC1B,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,CAAC;QACnC,CAAC;QAED,IAAI,CAAC,eAAe,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC;QAC3E,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAClD,CAAC;IAEO,QAAQ,CAAC,IAAwB,EAAE,CAAS;QACnD,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,CAAC;QAE5C,OAAO,CACN,sBACC,MAAM,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,EAC9D,QAAQ,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAChE,MAAM,EAAE,CAAC,GAAG,CAAC,EACb,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,EAC3D,eAAe,EAAE,IAAI,CAAC,eAAe,IAEpC,IAAI,CAAC,OAAO,CACG,CACjB,CAAC;IACH,CAAC;IAEO,QAAQ,CAAC,CAAS;QACzB,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,CAAC;QAC5C,OAAO,CACN,sBACC,MAAM,EAAE,CAAC,GAAG,UAAU,EACtB,SAAS,EAAE,IAAI,CAAC,SAAS,GACxB,CACF,CAAC;IACH,CAAC;IAEO,WAAW,CAAC,KAA0C;QAC7D,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,CAAC;QAE5C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACxC,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAQ,CAAC;YAElC,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBAC3B,IAAI,CAAC,MAAM,GAAG,CAAC,KAAK,UAAU,CAAC;gBAC/B,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,UAAU,CAAC;YAChC,CAAC;YAED,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC;YACpB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC;YAClE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;YAChC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;QAC7C,CAAC;IACF,CAAC;IAEO,kBAAkB;QACzB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YACzB,OAAO;QACR,CAAC;QAED,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC3B,YAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;YACpC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC9B,CAAC;QAED,IAAI,CAAC,gBAAgB,GAAG,UAAU,CAAC,GAAG,EAAE;YACvC,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;YAC1D,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YACxB,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;YAC3B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IACR,CAAC;IAEO,cAAc,CAAC,KAA0C;QAChE,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;YACf,OAAO;QACR,CAAC;QAED,IAAI,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,CAAC;QAE1C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACxC,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAQ,CAAC;YAElC,IAAI,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC1B,IAAI,QAAQ,GAAG,IAAI,CAAC,kBAAkB,CAAC;gBAEvC,IAAI,QAAQ,IAAI,QAAQ,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,gBAAgB,EAAE,CAAC;oBACrE,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;oBAC7D,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;oBAC7C,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC;oBAE9D,MAAM,QAAQ,GAAG,WAAW,CAAC,sBAAsB,CAAC;oBACpD,IAAI,QAAQ,IAAI,QAAQ,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,gBAAgB,EAAE,CAAC;wBACrE,QAAQ,CAAC,MAAM,EAAE,CAAC;oBACnB,CAAC;oBAED,SAAS;gBACV,CAAC;gBAED,IAAI,QAAQ,IAAI,QAAQ,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,gBAAgB,EAAE,CAAC;oBACrE,MAAM,WAAW,GAAG,QAAQ,CAAC;oBAC7B,QAAQ,GAAG,QAAQ,CAAC,kBAAkB,CAAC;oBAEvC,IAAI,QAAQ,IAAI,QAAQ,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,gBAAgB,EAAE,CAAC;wBACrE,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC;oBAC/D,CAAC;gBACF,CAAC;YACF,CAAC;YAED,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;gBACX,MAAM,YAAY,GAAG,IAAI,CAAC,sBAAsB,CAAC;gBACjD,IACC,YAAY;oBACZ,YAAY,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,gBAAgB,EACtD,CAAC;oBACF,YAAY,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;oBACxC,YAAY,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC;gBACpD,CAAC;YACF,CAAC;QACF,CAAC;QAED,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,gBAAgB,CACtC,wEAAwE,CACxE,CAAC;QACF,KAAK,IAAI,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;YAC5C,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAC3B,IAAI,CAAC,MAAM,EAAE,CAAC;QACf,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;YAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC5B,CAAC;IACF,CAAC;IAEO,YAAY,CACnB,WAAoC,EACpC,IAA6B,EAC7B,QAAiC,EACjC,CAAS,EACT,UAAkB;QAElB,IAAI,UAAU,GAAG,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QACxC,IAAI,cAAc,GAAG,QAAQ,CAAC,YAAY,GAAG,EAAE,CAAC;QAEhD,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC7B,UAAU,GAAG,UAAU,GAAG,CAAC,CAAC;YAC5B,cAAc,GAAG,cAAc,GAAG,CAAC,CAAC;QACrC,CAAC;QAED,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QACvC,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,UAAU,CAAC;QAEpC,IAAI,UAAU,GAAG,CAAC,IAAI,IAAI,CAAC,SAAS,KAAK,UAAU,EAAE,CAAC;YACrD,IAAI,WAAW,GAAG,CAAC,CAAC;YAEpB,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC;YAClC,WAAW,CAAC,KAAK,CAAC,YAAY,GAAG,GAAG,CAAC;YAErC,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE,CAAC;gBACvD,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,IAC7B,UAAU,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CACpD,KAAK,CAAC;gBACN,WAAW,IAAI,UAAU,GAAG,CAAC,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAE7D,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,EAAE,CAAC;oBAC5B,WAAW,CAAC,KAAK,CAAC,YAAY,GAAG,OAAO,CAAC;gBAC1C,CAAC;YACF,CAAC;YAED,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,EAAE,CAAC;gBACrD,WAAW,CAAC,KAAK,CAAC,YAAY,GAAG,IAChC,cAAc,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CACtD,KAAK,CAAC;gBACN,WAAW,IAAI,cAAc,GAAG,CAAC,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAE/D,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,EAAE,CAAC;oBAC1B,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,OAAO,CAAC;gBACvC,CAAC;YACF,CAAC;YAED,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,QAAQ,WAAW,GAAG,EAAE,MAAM,CAAC;QAC9D,CAAC;IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","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.5 : 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 = `-1rem`;\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.5 : 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 = `-1rem`;\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"]}
|
|
@@ -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}.mb-
|
|
5
|
+
const stepperItemComponentCss = "*{box-sizing:border-box}.static{position:static!important}.mb-5{margin-bottom:1.25rem!important}.mt-5{margin-top:1.25rem!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: {
|
|
@@ -61,12 +61,12 @@ const circle = cva([
|
|
|
61
61
|
{
|
|
62
62
|
direction: 'vertical',
|
|
63
63
|
align: 'start',
|
|
64
|
-
class: 'mt-
|
|
64
|
+
class: 'mt-5',
|
|
65
65
|
},
|
|
66
66
|
{
|
|
67
67
|
direction: 'vertical',
|
|
68
68
|
align: 'end',
|
|
69
|
-
class: 'mb-
|
|
69
|
+
class: 'mb-5',
|
|
70
70
|
},
|
|
71
71
|
],
|
|
72
72
|
});
|
|
@@ -178,6 +178,6 @@ function defineCustomElement() {
|
|
|
178
178
|
defineCustomElement();
|
|
179
179
|
|
|
180
180
|
export { StepperItem as S, defineCustomElement as d };
|
|
181
|
-
//# sourceMappingURL=p-
|
|
181
|
+
//# sourceMappingURL=p-D3EM8Uiq.js.map
|
|
182
182
|
|
|
183
|
-
//# sourceMappingURL=p-
|
|
183
|
+
//# sourceMappingURL=p-D3EM8Uiq.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-D3EM8Uiq.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-5',\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-5',\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}
|