@paperless/core 0.1.0-alpha.341 → 0.1.0-alpha.343

package/dist/cjs/p-stepper.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"p-stepper.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,gfAAgf;;MCO/f,OAAO;;;sBAIa,CAAC;qBAM1B,YAAY;2BAK4C,KAAK;;;EASjE,gBAAgB;IACZ,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;IACvC,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;GACnC;EAED,MAAM;IACF,QACIA,QAACC,UAAI,IAAC,KAAK,EAAC,WAAW,IACnBD,qBAAQ,CACL,EACT;GACL;EAEO,cAAc,CAAC,UAAkB;IACrC,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IAE1D,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAA,EAAE,CAAC,EAAE,EAAE;MACpC,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;MAE3B,IAAI,CAAC,MAAM,GAAG,CAAC,KAAK,UAAU,CAAC;MAC/B,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,UAAU,CAAC;MAC/B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;MAChC,IAAI,CAAC,KAAK;QACN,CAAC,KAAK,CAAC,GAAG,OAAO,GAAG,CAAC,KAAK,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,IAAG,CAAC,GAAG,KAAK,GAAG,QAAQ,CAAC;MACnE,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;MAE5C,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,IAAI,CAAC,CAAC;MAEhD,IAAI,CAAC,GAAG,CAAC,EAAE;QACP,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAC7D,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QACvC,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,UAAU,CAAC;QAErC,IAAI,UAAU,GAAG,CAAC,IAAI,IAAI,CAAC,SAAS,KAAK,UAAU,EAAE;UACjD,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,UAAU,GAAG,EAAE,KAAK,CAAC;UACvD,WAAW,CAAC,KAAK,CAAC,YAAY,GAAG,IAAI,UAAU,GAAG,EAAE,KAAK,CAAC;UAC1D,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,eAC1B,CAAC,UAAU,GAAG,CAAC,IAAI,EACvB,MAAM,CAAC;SACV;QAED,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;OAC5C;;;;;;;;;KAYJ;;GAGJ;;;;;;;","names":["h","Host"],"sources":["./src/components/molecules/stepper/stepper.component.scss?tag=p-stepper&encapsulation=shadow","./src/components/molecules/stepper/stepper.component.tsx"],"sourcesContent":[":host {\n    @apply flex;\n}\n\n:host([direction='horizontal']) {\n    @apply h-auto items-end;\n}\n\n:host([direction='vertical']) {\n    @apply flex-col flex-wrap items-start;\n    @apply w-full min-h-full;\n}\n\n:host([direction='vertical'][content-position='start']) {\n    @apply items-end;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-stepper',\n    styleUrl: 'stepper.component.scss',\n    shadow: true,\n})\nexport class Stepper {\n    /**\n     * The currently active step\n     */\n    @Prop() activeStep: number = 1;\n\n    /**\n     * The direction of the stepper\n     */\n    @Prop({ reflect: true }) direction: 'horizontal' | 'vertical' =\n        'horizontal';\n\n    /**\n     * The position of the content in case of vertical direction\n     */\n    @Prop({ reflect: true }) contentPosition: 'start' | 'end' = 'end';\n\n    /**\n     * The host element\n     */\n    @Element() private _el: HTMLElement;\n\n    // private _steps: Array<HTMLPStepperItemElement>;\n\n    componentDidLoad() {\n        const activeStep = this.activeStep - 1;\n        this._generateSteps(activeStep);\n    }\n\n    render() {\n        return (\n            <Host class=\"p-stepper\">\n                <slot />\n            </Host>\n        );\n    }\n\n    private _generateSteps(activeStep: number) {\n        const items = this._el.querySelectorAll('p-stepper-item');\n\n        for (let i = 0; i < items?.length; i++) {\n            const item = items.item(i);\n\n            item.active = i === activeStep;\n            item.finished = i < activeStep;\n            item.direction = this.direction;\n            item.align =\n                i === 0 ? 'start' : i === items?.length - 1 ? 'end' : 'center';\n            item.contentPosition = this.contentPosition;\n\n            const heightDiff = (item.clientHeight - 16) / 2;\n\n            if (i > 0) {\n                const stepperLine = document.createElement('p-stepper-line');\n                stepperLine.direction = this.direction;\n                stepperLine.active = i <= activeStep;\n\n                if (heightDiff > 0 && this.direction === 'vertical') {\n                    stepperLine.style.marginTop = `-${heightDiff / 16}rem`;\n                    stepperLine.style.marginBottom = `-${heightDiff / 16}rem`;\n                    stepperLine.style.minHeight = `calc(1rem + ${\n                        (heightDiff * 2) / 16\n                    }rem)`;\n                }\n\n                this._el.insertBefore(stepperLine, item);\n            }\n\n            // const child = item.querySelector('[slot=\"content\"]');\n            // const newItem = (\n            //     <p-stepper-item\n\n            //     >\n            //         <div slot=\"content\" innerHTML={child.outerHTML} />\n            //     </p-stepper-item>\n            // );\n\n            // elements.push(newItem);\n        }\n\n        // return elements;\n    }\n}\n"],"version":3}
+{"file":"p-stepper.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/molecules/stepper/stepper.component.scss?tag=p-stepper&encapsulation=shadow","./src/components/molecules/stepper/stepper.component.tsx"],"sourcesContent":[":host {\n    @apply flex;\n}\n\n:host([direction='horizontal']) {\n    @apply h-auto items-end;\n}\n\n:host([direction='vertical']) {\n    @apply flex-col flex-wrap items-start;\n    @apply w-full min-h-full;\n}\n\n:host([direction='vertical'][content-position='start']) {\n    @apply items-end;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-stepper',\n    styleUrl: 'stepper.component.scss',\n    shadow: true,\n})\nexport class Stepper {\n    /**\n     * The currently active step\n     */\n    @Prop() activeStep: number = 1;\n\n    /**\n     * The direction of the stepper\n     */\n    @Prop({ reflect: true }) direction: 'horizontal' | 'vertical' =\n        'horizontal';\n\n    /**\n     * The position of the content in case of vertical direction\n     */\n    @Prop({ reflect: true }) contentPosition: 'start' | 'end' = 'end';\n\n    /**\n     * The host element\n     */\n    @Element() private _el: HTMLElement;\n\n    // private _steps: Array<HTMLPStepperItemElement>;\n\n    componentDidRender() {\n        this._generateSteps();\n    }\n\n    render() {\n        return (\n            <Host class=\"p-stepper\">\n                <slot />\n            </Host>\n        );\n    }\n\n    private _generateSteps() {\n        let activeStep = this.activeStep - 1;\n        const items = this._el.querySelectorAll(\n            'p-stepper-item, p-stepper-line'\n        );\n\n        if (!!this.activeStep || activeStep <= 0) {\n            const arrayItems = Array.from(items);\n            const activeItemIndex = arrayItems.findIndex(\n                (i: any) =>\n                    i.tagName.toLowerCase() === 'p-stepper-item' &&\n                    i.active &&\n                    !i.finished\n            );\n\n            if (activeItemIndex >= 0) {\n                activeStep = activeItemIndex;\n            }\n\n            const finishedItemIndex = arrayItems.findIndex(\n                (i: any) =>\n                    i.tagName.toLowerCase() === 'p-stepper-item' && i.finished\n            );\n            if (activeStep <= 0 && finishedItemIndex >= 0) {\n                activeStep = finishedItemIndex + 1;\n            }\n        }\n\n        for (let i = 0; i < items?.length; i++) {\n            const item = items.item(i) as any;\n\n            if (item.tagName.toLowerCase() === 'p-stepper-item') {\n                item.active = i === activeStep;\n                item.finished = i < activeStep;\n                item.direction = this.direction;\n                item.align =\n                    i === 0\n                        ? 'start'\n                        : i === items?.length - 1\n                        ? 'end'\n                        : 'center';\n                item.contentPosition = this.contentPosition;\n\n                if (i > 0) {\n                    const nextItem = items.item(i + 1) as any;\n\n                    if (\n                        !nextItem ||\n                        nextItem.tagName.toLowerCase() === 'p-stepper-item'\n                    ) {\n                        const heightDiff = (item.clientHeight - 16) / 2;\n\n                        const stepperLine =\n                            document.createElement('p-stepper-line');\n                        stepperLine.direction = this.direction;\n                        stepperLine.active = i <= activeStep;\n\n                        if (heightDiff > 0 && this.direction === 'vertical') {\n                            stepperLine.style.marginTop = `-${\n                                heightDiff / 16\n                            }rem`;\n                            stepperLine.style.marginBottom = `-${\n                                heightDiff / 16\n                            }rem`;\n                            stepperLine.style.minHeight = `calc(1rem + ${\n                                (heightDiff * 2) / 16\n                            }rem)`;\n                        }\n\n                        this._el.insertBefore(stepperLine, item);\n\n                        continue;\n                    }\n\n                    if (nextItem.tagName.toLowerCase() === 'p-stepper-line') {\n                        nextItem.direction = this.direction;\n                        nextItem.active = i <= activeStep;\n                    }\n                }\n            }\n        }\n    }\n}\n"],"version":3}

package/dist/collection/components/atoms/stepper-item/stepper-item.component.css

@@ -1 +1 @@
-.absolute{position:absolute!important}.relative{position:relative!important}.left-1\/2{left:50%!important}.order-2{order:2!important}.ml-0{margin-left:0!important}.mr-4{margin-right:1rem!important}.flex{display:flex!important}.h-4{height:1rem!important}.min-h-\[1rem\]{min-height:1rem!important}.w-4{width:1rem!important}.min-w-0{min-width:0!important}.-translate-x-1\/2{--tw-translate-x:-50%!important}.-translate-x-1\/2,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.items-end{align-items:flex-end!important}.items-center{align-items:center!important}.bg-mystic-dark{--tw-bg-opacity:1!important;background-color:rgb(218 230 240/var(--tw-bg-opacity))!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-semibold{font-weight:600!important}.transition{transition-duration:.15s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.duration-500{transition-duration:.5s!important}*{box-sizing:border-box}:host{align-items:flex-end;display:flex;justify-content:center;position:relative}:host .content{--tw-text-opacity:1;color:rgb(176 178 203/var(--tw-text-opacity));font-size:.875rem;font-weight:600;line-height:1.25rem;min-width:0;white-space:nowrap}:host .circle{--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(218 230 240/var(--tw-bg-opacity));border-radius:100%;color:rgb(255 255 255/var(--tw-text-opacity));display:flex;height:1rem;justify-content:center;transition-duration:.5s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);width:1rem}:host .circle p-icon{display:flex!important;font-size:.625rem}:host([direction=horizontal]){height:2.5rem}:host([direction=horizontal]) .content{order:1;position:absolute;top:0}:host([direction=horizontal]) .circle{order:2}:host([direction=vertical]){align-items:center;min-height:1rem}:host([direction=vertical]) .content{margin-left:1rem;order:2}:host([direction=vertical]) .circle{order:1}:host([active]) .content,:host([finished]) .content{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}:host([active]) .circle,:host([finished]) .circle{--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity))}:host([direction=horizontal][align=start]) .content{left:0}:host([direction=horizontal][align=end]) .content{right:0}:host([direction=horizontal][align=center]) .content{--tw-translate-x:-50%;left:50%;text-align:center;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host([direction=vertical][content-position=start]){flex-direction:row-reverse}:host([direction=vertical][content-position=start]) .content{display:flex;justify-content:flex-end;margin-left:0;margin-right:1rem}.static{position:static!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}
+.absolute{position:absolute!important}.relative{position:relative!important}.left-1\/2{left:50%!important}.order-2{order:2!important}.ml-0{margin-left:0!important}.mr-4{margin-right:1rem!important}.flex{display:flex!important}.h-4{height:1rem!important}.min-h-\[1rem\]{min-height:1rem!important}.w-4{width:1rem!important}.min-w-0{min-width:0!important}.-translate-x-1\/2{--tw-translate-x:-50%!important}.-translate-x-1\/2,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.items-end{align-items:flex-end!important}.items-center{align-items:center!important}.bg-mystic-dark{--tw-bg-opacity:1!important;background-color:rgb(218 230 240/var(--tw-bg-opacity))!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.transition{transition-duration:.15s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.duration-500{transition-duration:.5s!important}*{box-sizing:border-box}:host{align-items:flex-end;display:flex;justify-content:center;position:relative}:host .content{--tw-text-opacity:1;color:rgb(176 178 203/var(--tw-text-opacity));font-size:.875rem;line-height:1.25rem;min-width:0;white-space:nowrap}:host .circle{--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(218 230 240/var(--tw-bg-opacity));border-radius:100%;color:rgb(255 255 255/var(--tw-text-opacity));display:flex;height:1rem;justify-content:center;transition-duration:.5s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);width:1rem}:host .circle p-icon{display:flex!important;font-size:.625rem}:host([direction=horizontal]){height:2.5rem}:host([direction=horizontal]) .content{order:1;position:absolute;top:0}:host([direction=horizontal]) .circle{order:2}:host([direction=vertical]){align-items:center;min-height:1rem}:host([direction=vertical]) .content{margin-left:1rem;order:2}:host([direction=vertical]) .circle{order:1}:host([active]) .content,:host([finished]) .content{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}:host([active]) .circle,:host([finished]) .circle{--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity))}:host([direction=horizontal][align=start]) .content{left:0}:host([direction=horizontal][align=end]) .content{right:0}:host([direction=horizontal][align=center]) .content{--tw-translate-x:-50%;left:50%;text-align:center;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host([direction=vertical][content-position=start]){flex-direction:row-reverse}:host([direction=vertical][content-position=start]) .content{display:flex;justify-content:flex-end;margin-left:0;margin-right:1rem}.static{position:static!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}

package/dist/collection/components/molecules/profile/profile.component.css

@@ -1 +1 @@
-.flex{display:flex!important}.h-\[3\.125rem\]{height:3.125rem!important}.h-\[4\.125rem\]{height:4.125rem!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-3{gap:.75rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.rounded{border-radius:.25rem!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-mystic-dark{--tw-border-opacity:1!important;border-color:rgb(218 230 240/var(--tw-border-opacity))!important}.p-2{padding:.5rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}*{box-sizing:border-box}:host{display:flex}:host .content{align-items:center;display:flex;gap:.75rem;width:100%}:host .content .name{display:flex;flex-direction:column;justify-content:center;overflow:hidden}:host .content .name>:first-child{--tw-text-opacity:1;color:rgb(39 40 56/var(--tw-text-opacity));font-size:.875rem;font-weight:600;line-height:1.25rem}:host .content .name>:nth-child(2){--tw-text-opacity:1;color:rgb(152 154 183/var(--tw-text-opacity));font-size:.875rem;line-height:1.25rem}:host .content .name ::slotted(*){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([size=small]){height:2rem}:host([size=medium]){height:3.125rem}:host([size=large]){height:4rem}:host(.has-dropdown){cursor:pointer}:host(.has-dropdown) .content{--tw-border-opacity:1!important;border-color:rgb(218 230 240/var(--tw-border-opacity))!important;border-radius:.25rem;border-style:solid!important;border-width:1px!important;padding:.5rem}:host(.has-dropdown[size=small]){height:3rem}:host(.has-dropdown[size=medium]){height:4.125rem}:host(.has-dropdown[size=large]){height:5rem}:host(.active) .content,:host(.has-dropdown:hover) .content{--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13);--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}:host(.active) .content p-icon{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}.static{position:static!important}.absolute{position:absolute!important}.ml-auto{margin-left:auto!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.visible{visibility:visible!important}
+.flex{display:flex!important}.h-\[3\.125rem\]{height:3.125rem!important}.h-\[4\.125rem\]{height:4.125rem!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-3{gap:.75rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.rounded{border-radius:.25rem!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-mystic-dark{--tw-border-opacity:1!important;border-color:rgb(218 230 240/var(--tw-border-opacity))!important}.p-2{padding:.5rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}*{box-sizing:border-box}:host{display:flex}:host .content{align-items:center;display:flex;gap:.75rem;width:100%}:host .content .name{display:flex;flex-direction:column;justify-content:center;overflow:hidden}:host .content .name>:first-child{--tw-text-opacity:1;color:rgb(39 40 56/var(--tw-text-opacity));font-size:.875rem;font-weight:600;line-height:1.25rem}:host .content .name>:nth-child(2){--tw-text-opacity:1;color:rgb(152 154 183/var(--tw-text-opacity));font-size:.875rem;line-height:1.25rem}:host .content .name ::slotted(*){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([size=small]){height:2rem}:host([size=medium]){height:3.125rem}:host([size=large]){height:4rem}:host(.has-dropdown){cursor:pointer}:host(.has-dropdown) .content{--tw-border-opacity:1!important;border-color:rgb(218 230 240/var(--tw-border-opacity))!important;border-radius:.25rem;border-style:solid!important;border-width:1px!important;padding:.5rem}:host(.has-dropdown[size=small]){height:3rem}:host(.has-dropdown[size=medium]){height:4.125rem}:host(.has-dropdown[size=large]){height:5rem}:host(.active) .content,:host(.has-dropdown:hover) .content{--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13);--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}:host(.active) .content p-icon{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}.static{position:static!important}.absolute{position:absolute!important}.ml-auto{margin-left:auto!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}.visible{visibility:visible!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}

package/dist/collection/components/molecules/select/select.component.js

@@ -95,6 +95,12 @@ export class Select {
   itemChanges() {
     this._preselectItem();
   }
+  _showDropdownChanges() {
+    this.dropdownShown.emit({
+      value: this._showDropdown,
+      query: this.query,
+    });
+  }
   _preselectItem(value) {
     value = value === undefined ? null : value;
     const parsedValue = !!this.value
@@ -115,6 +121,9 @@ export class Select {
     this._onBlur(true);
   }
   _onFocus() {
+    if (!this.items.length && !this.loading) {
+      return;
+    }
     if (!this.enableAutocomplete) {
       this._inputRef.blur();
       if (!this._showDropdown) {
@@ -588,6 +597,21 @@ export class Select {
           "resolved": "any",
           "references": {}
         }
+      }, {
+        "method": "dropdownShown",
+        "name": "dropdownShown",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event when the dropdown shows"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
       }];
   }
   static get elementRef() { return "_el"; }
@@ -598,6 +622,9 @@ export class Select {
       }, {
         "propName": "items",
         "methodName": "itemChanges"
+      }, {
+        "propName": "_showDropdown",
+        "methodName": "_showDropdownChanges"
       }];
   }
   static get listeners() {

package/dist/collection/components/molecules/select/select.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.component.js","sourceRoot":"","sources":["../../../../src/components/molecules/select/select.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { childOf } from '../../../utils';\nimport { IconVariant } from '../../atoms/icon/icon.component';\n\n@Component({\n    tag: 'p-select',\n    styleUrl: 'select.component.scss',\n    shadow: false,\n})\nexport class Select {\n    /**\n     * The items to show in the dropdown\n     */\n    @Prop() items: string | any[];\n\n    /**\n     * Icon of the select box\n     */\n    @Prop() icon: IconVariant;\n\n    /**\n     * The current query\n     */\n    @Prop() query: string;\n\n    /**\n     * The placeholder of the input\n     */\n    @Prop() placeholder: string;\n\n    /**\n     * The placeholder of the input when auto completing\n     */\n    @Prop() autocompletePlaceholder: string;\n\n    /**\n     * The current value\n     */\n    @Prop() value: any;\n\n    /**\n     * The key of the object to display\n     */\n    @Prop() displayKey: string = 'text';\n\n    /**\n     * The key of the object to return\n     */\n    @Prop() valueKey: string = 'value';\n\n    /**\n     * The key of the object to display\n     */\n    @Prop() queryKey?: string;\n\n    /**\n     * Wether to automatically select the first item\n     */\n    @Prop() autoSelectFirst: boolean = true;\n\n    /**\n     * Wether to show the chevron or not\n     */\n    @Prop() showChevron: boolean = true;\n\n    /**\n     * The maximum amount of items to display\n     */\n    @Prop() maxDisplayedItems: number = 10;\n\n    /**\n     * Wether to enable autocomplete\n     */\n    @Prop() enableAutocomplete: boolean = true;\n\n    /**\n     * Wether the input uses async filtering\n     */\n    @Prop() asyncFilter: boolean = false;\n\n    /**\n     * Wether to show loading items\n     */\n    @Prop() loading: boolean = false;\n\n    /**\n     * Event when the query of the autocomplete changes\n     */\n    @Event() queryChange: EventEmitter<string>;\n\n    /**\n     * Event when the value changes\n     */\n    @Event() valueChange: EventEmitter<any>;\n\n    /**\n     * The size of the input group used by the select\n     */\n    @Prop() size: 'small' | 'medium' = 'medium';\n\n    /**\n     * The prefix of the input group used by the select\n     */\n    @Prop() prefix: string;\n\n    /**\n     * The label of the input group used by the select\n     */\n    @Prop() label: string;\n\n    /**\n     * The helper of the input group used by the select\n     */\n    @Prop() helper: string;\n\n    /**\n     * The helper of the input group used by the select\n     */\n    @Prop({ reflect: true }) error: string;\n\n    /**\n     * Wether the input group is disabled used by the select\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * The host element\n     */\n    @Element() private _el: HTMLElement;\n\n    @State() private _showDropdown: any = false;\n    @State() private _selectedItem: any = null;\n\n    private _isAutoCompleting: boolean = false;\n\n    private _inputRef: HTMLInputElement;\n\n    get _items() {\n        if (!this.items || this.loading) {\n            return [];\n        }\n\n        let items =\n            typeof this.items === 'string'\n                ? JSON.parse(this.items)\n                : this.items;\n\n        if (typeof items?.[0] === 'string') {\n            this.displayKey = 'text';\n            this.valueKey = 'value';\n\n            items = items.map((str) => ({\n                value: str,\n                text: str,\n            }));\n        }\n\n        if (this._isAutoCompleting && this.query?.length && !this.asyncFilter) {\n            items = items.filter((item) => {\n                if (this.queryKey) {\n                    return this._checkvalue(this.queryKey, item);\n                }\n\n                return (\n                    this._checkvalue(this.valueKey, item) ||\n                    this._checkvalue(this.displayKey, item)\n                );\n            });\n        }\n\n        return items?.slice(0, this.maxDisplayedItems);\n    }\n\n    get _displayValue() {\n        if (this._isAutoCompleting) {\n            return this.query;\n        }\n\n        return this._selectedItem?.[this.displayKey];\n    }\n\n    get _placeholder() {\n        return this._isAutoCompleting && this.autocompletePlaceholder?.length\n            ? this.autocompletePlaceholder\n            : this.placeholder;\n    }\n\n    componentDidLoad() {\n        if (this.value) {\n            this._valueChange(this.value);\n            return;\n        }\n\n        if (this.autoSelectFirst) {\n            this._selectedItem = this._items?.[0];\n        }\n    }\n\n    render() {\n        return (\n            <Host class=\"p-select\">\n                <p-dropdown\n                    disableTriggerClick={true}\n                    calculateWidth={true}\n                    insideClick={true}\n                    show={this._showDropdown}\n                >\n                    <p-input-group\n                        slot=\"trigger\"\n                        icon={this.icon}\n                        size={this.size}\n                        prefix={this.prefix}\n                        label={this.label}\n                        helper={this.helper}\n                        error={this.error}\n                        disabled={this.disabled}\n                        focused={this._showDropdown}\n                    >\n                        <input\n                            slot=\"input\"\n                            type=\"text\"\n                            placeholder={this._placeholder}\n                            value={this._displayValue}\n                            class={`p-input cursor-pointer ${\n                                !this._isAutoCompleting && 'read-only'\n                            }`}\n                            onFocus={() => this._onFocus()}\n                            onMouseDown={(ev) => this._onMouseDown(ev)}\n                            onClick={() => this._onClick()}\n                            onInput={(ev) => this._onChange(ev)}\n                            ref={(ref) => (this._inputRef = ref)}\n                        />\n\n                        {this.showChevron && (\n                            <p-icon variant=\"chevron\" slot=\"suffix\" />\n                        )}\n                    </p-input-group>\n                    <div slot=\"items\">\n                        {this.loading\n                            ? this._getLoadingItems()\n                            : this._getItems()}\n                    </div>\n                </p-dropdown>\n            </Host>\n        );\n    }\n\n    @Listen('click', { target: 'document', capture: true })\n    protected documentClickHandler({ target }) {\n        if (!this._showDropdown || childOf(target, this._el)) {\n            return;\n        }\n\n        this._showDropdown = false;\n        this._isAutoCompleting = false;\n    }\n\n    @Watch('value')\n    private _valueChange(value: any) {\n        this._preselectItem(value);\n    }\n\n    @Watch('items')\n    public itemChanges() {\n        this._preselectItem();\n    }\n\n    private _preselectItem(value?: any) {\n        value = value === undefined ? null : value;\n        const parsedValue = !!this.value\n            ? JSON.stringify(this.value)\n            : JSON.stringify(value);\n\n        if (\n            this._selectedItem &&\n            JSON.stringify(this._selectedItem[this.valueKey]) === parsedValue\n        ) {\n            return;\n        }\n\n        const item = this._items.find(\n            (i) => JSON.stringify(i?.[this.valueKey]) === parsedValue\n        );\n\n        this._selectedItem = item;\n    }\n\n    private _selectValue(item) {\n        this._selectedItem = item;\n        const value = item[this.valueKey];\n\n        this.value = value;\n        this.valueChange.emit(this.value);\n\n        this._onBlur(true);\n    }\n\n    private _onFocus() {\n        if (!this.enableAutocomplete) {\n            this._inputRef.blur();\n            if (!this._showDropdown) {\n                this._showDropdown = true;\n            }\n            return;\n        }\n\n        this._isAutoCompleting = true;\n        this._showDropdown = true;\n    }\n\n    private _onMouseDown(ev) {\n        if (this.enableAutocomplete) {\n            return;\n        }\n\n        ev.preventDefault();\n    }\n\n    private _onClick() {\n        if (this.enableAutocomplete) {\n            return;\n        }\n\n        this._showDropdown = !this._showDropdown;\n    }\n\n    private _onBlur(force = false) {\n        if (!this.enableAutocomplete && !force) {\n            return;\n        }\n\n        this._isAutoCompleting = false;\n        this._showDropdown = false;\n    }\n\n    private _onChange(ev) {\n        if (!this._isAutoCompleting) {\n            return;\n        }\n\n        this.query = ev.target.value;\n        this.queryChange.emit(this.query);\n    }\n\n    private _checkvalue(key, item) {\n        return (\n            item?.[key]\n                ?.toString()\n                ?.toLowerCase()\n                .indexOf(this.query?.toLowerCase()) >= 0\n        );\n    }\n\n    private _getItems() {\n        return this._items.map((item) => (\n            <p-dropdown-menu-item\n                onClick={() => this._selectValue(item)}\n                active={\n                    item[this.valueKey] === this._selectedItem?.[this.valueKey]\n                }\n            >\n                {item[this.displayKey]}\n            </p-dropdown-menu-item>\n        ));\n    }\n\n    private _getLoadingItems() {\n        return [0, 0, 0].map(() => (\n            <p-dropdown-menu-item enableHover={false}>\n                <p-loader variant=\"ghost\" class=\"h-6 w-full rounded\" />\n            </p-dropdown-menu-item>\n        ));\n    }\n}\n"]}
+{"version":3,"file":"select.component.js","sourceRoot":"","sources":["../../../../src/components/molecules/select/select.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { childOf } from '../../../utils';\nimport { IconVariant } from '../../atoms/icon/icon.component';\n\n@Component({\n    tag: 'p-select',\n    styleUrl: 'select.component.scss',\n    shadow: false,\n})\nexport class Select {\n    /**\n     * The items to show in the dropdown\n     */\n    @Prop() items: string | any[];\n\n    /**\n     * Icon of the select box\n     */\n    @Prop() icon: IconVariant;\n\n    /**\n     * The current query\n     */\n    @Prop() query: string;\n\n    /**\n     * The placeholder of the input\n     */\n    @Prop() placeholder: string;\n\n    /**\n     * The placeholder of the input when auto completing\n     */\n    @Prop() autocompletePlaceholder: string;\n\n    /**\n     * The current value\n     */\n    @Prop() value: any;\n\n    /**\n     * The key of the object to display\n     */\n    @Prop() displayKey: string = 'text';\n\n    /**\n     * The key of the object to return\n     */\n    @Prop() valueKey: string = 'value';\n\n    /**\n     * The key of the object to display\n     */\n    @Prop() queryKey?: string;\n\n    /**\n     * Wether to automatically select the first item\n     */\n    @Prop() autoSelectFirst: boolean = true;\n\n    /**\n     * Wether to show the chevron or not\n     */\n    @Prop() showChevron: boolean = true;\n\n    /**\n     * The maximum amount of items to display\n     */\n    @Prop() maxDisplayedItems: number = 10;\n\n    /**\n     * Wether to enable autocomplete\n     */\n    @Prop() enableAutocomplete: boolean = true;\n\n    /**\n     * Wether the input uses async filtering\n     */\n    @Prop() asyncFilter: boolean = false;\n\n    /**\n     * Wether to show loading items\n     */\n    @Prop() loading: boolean = false;\n\n    /**\n     * Event when the query of the autocomplete changes\n     */\n    @Event() queryChange: EventEmitter<string>;\n\n    /**\n     * Event when the value changes\n     */\n    @Event() valueChange: EventEmitter<any>;\n\n    /**\n     * Event when the dropdown shows\n     */\n    @Event() dropdownShown: EventEmitter<any>;\n\n    /**\n     * The size of the input group used by the select\n     */\n    @Prop() size: 'small' | 'medium' = 'medium';\n\n    /**\n     * The prefix of the input group used by the select\n     */\n    @Prop() prefix: string;\n\n    /**\n     * The label of the input group used by the select\n     */\n    @Prop() label: string;\n\n    /**\n     * The helper of the input group used by the select\n     */\n    @Prop() helper: string;\n\n    /**\n     * The helper of the input group used by the select\n     */\n    @Prop({ reflect: true }) error: string;\n\n    /**\n     * Wether the input group is disabled used by the select\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * The host element\n     */\n    @Element() private _el: HTMLElement;\n\n    @State() private _showDropdown: any = false;\n    @State() private _selectedItem: any = null;\n\n    private _isAutoCompleting: boolean = false;\n\n    private _inputRef: HTMLInputElement;\n\n    get _items() {\n        if (!this.items || this.loading) {\n            return [];\n        }\n\n        let items =\n            typeof this.items === 'string'\n                ? JSON.parse(this.items)\n                : this.items;\n\n        if (typeof items?.[0] === 'string') {\n            this.displayKey = 'text';\n            this.valueKey = 'value';\n\n            items = items.map((str) => ({\n                value: str,\n                text: str,\n            }));\n        }\n\n        if (this._isAutoCompleting && this.query?.length && !this.asyncFilter) {\n            items = items.filter((item) => {\n                if (this.queryKey) {\n                    return this._checkvalue(this.queryKey, item);\n                }\n\n                return (\n                    this._checkvalue(this.valueKey, item) ||\n                    this._checkvalue(this.displayKey, item)\n                );\n            });\n        }\n\n        return items?.slice(0, this.maxDisplayedItems);\n    }\n\n    get _displayValue() {\n        if (this._isAutoCompleting) {\n            return this.query;\n        }\n\n        return this._selectedItem?.[this.displayKey];\n    }\n\n    get _placeholder() {\n        return this._isAutoCompleting && this.autocompletePlaceholder?.length\n            ? this.autocompletePlaceholder\n            : this.placeholder;\n    }\n\n    componentDidLoad() {\n        if (this.value) {\n            this._valueChange(this.value);\n            return;\n        }\n\n        if (this.autoSelectFirst) {\n            this._selectedItem = this._items?.[0];\n        }\n    }\n\n    render() {\n        return (\n            <Host class=\"p-select\">\n                <p-dropdown\n                    disableTriggerClick={true}\n                    calculateWidth={true}\n                    insideClick={true}\n                    show={this._showDropdown}\n                >\n                    <p-input-group\n                        slot=\"trigger\"\n                        icon={this.icon}\n                        size={this.size}\n                        prefix={this.prefix}\n                        label={this.label}\n                        helper={this.helper}\n                        error={this.error}\n                        disabled={this.disabled}\n                        focused={this._showDropdown}\n                    >\n                        <input\n                            slot=\"input\"\n                            type=\"text\"\n                            placeholder={this._placeholder}\n                            value={this._displayValue}\n                            class={`p-input cursor-pointer ${\n                                !this._isAutoCompleting && 'read-only'\n                            }`}\n                            onFocus={() => this._onFocus()}\n                            onMouseDown={(ev) => this._onMouseDown(ev)}\n                            onClick={() => this._onClick()}\n                            onInput={(ev) => this._onChange(ev)}\n                            ref={(ref) => (this._inputRef = ref)}\n                        />\n\n                        {this.showChevron && (\n                            <p-icon variant=\"chevron\" slot=\"suffix\" />\n                        )}\n                    </p-input-group>\n                    <div slot=\"items\">\n                        {this.loading\n                            ? this._getLoadingItems()\n                            : this._getItems()}\n                    </div>\n                </p-dropdown>\n            </Host>\n        );\n    }\n\n    @Listen('click', { target: 'document', capture: true })\n    protected documentClickHandler({ target }) {\n        if (!this._showDropdown || childOf(target, this._el)) {\n            return;\n        }\n\n        this._showDropdown = false;\n        this._isAutoCompleting = false;\n    }\n\n    @Watch('value')\n    private _valueChange(value: any) {\n        this._preselectItem(value);\n    }\n\n    @Watch('items')\n    public itemChanges() {\n        this._preselectItem();\n    }\n\n    @Watch('_showDropdown')\n    public _showDropdownChanges() {\n        this.dropdownShown.emit({\n            value: this._showDropdown,\n            query: this.query,\n        });\n    }\n\n    private _preselectItem(value?: any) {\n        value = value === undefined ? null : value;\n        const parsedValue = !!this.value\n            ? JSON.stringify(this.value)\n            : JSON.stringify(value);\n\n        if (\n            this._selectedItem &&\n            JSON.stringify(this._selectedItem[this.valueKey]) === parsedValue\n        ) {\n            return;\n        }\n\n        const item = this._items.find(\n            (i) => JSON.stringify(i?.[this.valueKey]) === parsedValue\n        );\n\n        this._selectedItem = item;\n    }\n\n    private _selectValue(item) {\n        this._selectedItem = item;\n        const value = item[this.valueKey];\n\n        this.value = value;\n        this.valueChange.emit(this.value);\n\n        this._onBlur(true);\n    }\n\n    private _onFocus() {\n        if (!this.items.length && !this.loading) {\n            return;\n        }\n\n        if (!this.enableAutocomplete) {\n            this._inputRef.blur();\n            if (!this._showDropdown) {\n                this._showDropdown = true;\n            }\n            return;\n        }\n\n        this._isAutoCompleting = true;\n        this._showDropdown = true;\n    }\n\n    private _onMouseDown(ev) {\n        if (this.enableAutocomplete) {\n            return;\n        }\n\n        ev.preventDefault();\n    }\n\n    private _onClick() {\n        if (this.enableAutocomplete) {\n            return;\n        }\n\n        this._showDropdown = !this._showDropdown;\n    }\n\n    private _onBlur(force = false) {\n        if (!this.enableAutocomplete && !force) {\n            return;\n        }\n\n        this._isAutoCompleting = false;\n        this._showDropdown = false;\n    }\n\n    private _onChange(ev) {\n        if (!this._isAutoCompleting) {\n            return;\n        }\n\n        this.query = ev.target.value;\n        this.queryChange.emit(this.query);\n    }\n\n    private _checkvalue(key, item) {\n        return (\n            item?.[key]\n                ?.toString()\n                ?.toLowerCase()\n                .indexOf(this.query?.toLowerCase()) >= 0\n        );\n    }\n\n    private _getItems() {\n        return this._items.map((item) => (\n            <p-dropdown-menu-item\n                onClick={() => this._selectValue(item)}\n                active={\n                    item[this.valueKey] === this._selectedItem?.[this.valueKey]\n                }\n            >\n                {item[this.displayKey]}\n            </p-dropdown-menu-item>\n        ));\n    }\n\n    private _getLoadingItems() {\n        return [0, 0, 0].map(() => (\n            <p-dropdown-menu-item enableHover={false}>\n                <p-loader variant=\"ghost\" class=\"h-6 w-full rounded\" />\n            </p-dropdown-menu-item>\n        ));\n    }\n}\n"]}

package/dist/collection/components/molecules/stepper/stepper.component.js

@@ -6,45 +6,64 @@ export class Stepper {
     this.contentPosition = 'end';
   }
   // private _steps: Array<HTMLPStepperItemElement>;
-  componentDidLoad() {
-    const activeStep = this.activeStep - 1;
-    this._generateSteps(activeStep);
+  componentDidRender() {
+    this._generateSteps();
   }
   render() {
     return (h(Host, { class: "p-stepper" }, h("slot", null)));
   }
-  _generateSteps(activeStep) {
-    const items = this._el.querySelectorAll('p-stepper-item');
+  _generateSteps() {
+    let activeStep = this.activeStep - 1;
+    const items = this._el.querySelectorAll('p-stepper-item, p-stepper-line');
+    if (!!this.activeStep || activeStep <= 0) {
+      const arrayItems = Array.from(items);
+      const activeItemIndex = arrayItems.findIndex((i) => i.tagName.toLowerCase() === 'p-stepper-item' &&
+        i.active &&
+        !i.finished);
+      if (activeItemIndex >= 0) {
+        activeStep = activeItemIndex;
+      }
+      const finishedItemIndex = arrayItems.findIndex((i) => i.tagName.toLowerCase() === 'p-stepper-item' && i.finished);
+      if (activeStep <= 0 && finishedItemIndex >= 0) {
+        activeStep = finishedItemIndex + 1;
+      }
+    }
     for (let i = 0; i < (items === null || items === void 0 ? void 0 : items.length); i++) {
       const item = items.item(i);
-      item.active = i === activeStep;
-      item.finished = i < activeStep;
-      item.direction = this.direction;
-      item.align =
-        i === 0 ? 'start' : i === (items === null || items === void 0 ? void 0 : items.length) - 1 ? 'end' : 'center';
-      item.contentPosition = this.contentPosition;
-      const heightDiff = (item.clientHeight - 16) / 2;
-      if (i > 0) {
-        const stepperLine = document.createElement('p-stepper-line');
-        stepperLine.direction = this.direction;
-        stepperLine.active = i <= activeStep;
-        if (heightDiff > 0 && this.direction === 'vertical') {
-          stepperLine.style.marginTop = `-${heightDiff / 16}rem`;
-          stepperLine.style.marginBottom = `-${heightDiff / 16}rem`;
-          stepperLine.style.minHeight = `calc(1rem + ${(heightDiff * 2) / 16}rem)`;
+      if (item.tagName.toLowerCase() === 'p-stepper-item') {
+        item.active = i === activeStep;
+        item.finished = i < activeStep;
+        item.direction = this.direction;
+        item.align =
+          i === 0
+            ? 'start'
+            : i === (items === null || items === void 0 ? void 0 : items.length) - 1
+              ? 'end'
+              : 'center';
+        item.contentPosition = this.contentPosition;
+        if (i > 0) {
+          const nextItem = items.item(i + 1);
+          if (!nextItem ||
+            nextItem.tagName.toLowerCase() === 'p-stepper-item') {
+            const heightDiff = (item.clientHeight - 16) / 2;
+            const stepperLine = document.createElement('p-stepper-line');
+            stepperLine.direction = this.direction;
+            stepperLine.active = i <= activeStep;
+            if (heightDiff > 0 && this.direction === 'vertical') {
+              stepperLine.style.marginTop = `-${heightDiff / 16}rem`;
+              stepperLine.style.marginBottom = `-${heightDiff / 16}rem`;
+              stepperLine.style.minHeight = `calc(1rem + ${(heightDiff * 2) / 16}rem)`;
+            }
+            this._el.insertBefore(stepperLine, item);
+            continue;
+          }
+          if (nextItem.tagName.toLowerCase() === 'p-stepper-line') {
+            nextItem.direction = this.direction;
+            nextItem.active = i <= activeStep;
+          }
         }
-        this._el.insertBefore(stepperLine, item);
       }
-      // const child = item.querySelector('[slot="content"]');
-      // const newItem = (
-      //     <p-stepper-item
-      //     >
-      //         <div slot="content" innerHTML={child.outerHTML} />
-      //     </p-stepper-item>
-      // );
-      // elements.push(newItem);
     }
-    // return elements;
   }
   static get is() { return "p-stepper"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/stepper/stepper.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.component.js","sourceRoot":"","sources":["../../../../src/components/molecules/stepper/stepper.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,OAAO;;sBAIa,CAAC;qBAM1B,YAAY;2BAK4C,KAAK;;EAOjE,kDAAkD;EAElD,gBAAgB;IACZ,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;IACvC,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;EACpC,CAAC;EAED,MAAM;IACF,OAAO,CACH,EAAC,IAAI,IAAC,KAAK,EAAC,WAAW;MACnB,eAAQ,CACL,CACV,CAAC;EACN,CAAC;EAEO,cAAc,CAAC,UAAkB;IACrC,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IAE1D,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAA,EAAE,CAAC,EAAE,EAAE;MACpC,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;MAE3B,IAAI,CAAC,MAAM,GAAG,CAAC,KAAK,UAAU,CAAC;MAC/B,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,UAAU,CAAC;MAC/B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;MAChC,IAAI,CAAC,KAAK;QACN,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,IAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;MACnE,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;MAE5C,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC;MAEhD,IAAI,CAAC,GAAG,CAAC,EAAE;QACP,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAC7D,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QACvC,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,UAAU,CAAC;QAErC,IAAI,UAAU,GAAG,CAAC,IAAI,IAAI,CAAC,SAAS,KAAK,UAAU,EAAE;UACjD,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,UAAU,GAAG,EAAE,KAAK,CAAC;UACvD,WAAW,CAAC,KAAK,CAAC,YAAY,GAAG,IAAI,UAAU,GAAG,EAAE,KAAK,CAAC;UAC1D,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,eAC1B,CAAC,UAAU,GAAG,CAAC,CAAC,GAAG,EACvB,MAAM,CAAC;SACV;QAED,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;OAC5C;MAED,wDAAwD;MACxD,oBAAoB;MACpB,sBAAsB;MAEtB,QAAQ;MACR,6DAA6D;MAC7D,wBAAwB;MACxB,KAAK;MAEL,0BAA0B;KAC7B;IAED,mBAAmB;EACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-stepper',\n    styleUrl: 'stepper.component.scss',\n    shadow: true,\n})\nexport class Stepper {\n    /**\n     * The currently active step\n     */\n    @Prop() activeStep: number = 1;\n\n    /**\n     * The direction of the stepper\n     */\n    @Prop({ reflect: true }) direction: 'horizontal' | 'vertical' =\n        'horizontal';\n\n    /**\n     * The position of the content in case of vertical direction\n     */\n    @Prop({ reflect: true }) contentPosition: 'start' | 'end' = 'end';\n\n    /**\n     * The host element\n     */\n    @Element() private _el: HTMLElement;\n\n    // private _steps: Array<HTMLPStepperItemElement>;\n\n    componentDidLoad() {\n        const activeStep = this.activeStep - 1;\n        this._generateSteps(activeStep);\n    }\n\n    render() {\n        return (\n            <Host class=\"p-stepper\">\n                <slot />\n            </Host>\n        );\n    }\n\n    private _generateSteps(activeStep: number) {\n        const items = this._el.querySelectorAll('p-stepper-item');\n\n        for (let i = 0; i < items?.length; i++) {\n            const item = items.item(i);\n\n            item.active = i === activeStep;\n            item.finished = i < activeStep;\n            item.direction = this.direction;\n            item.align =\n                i === 0 ? 'start' : i === items?.length - 1 ? 'end' : 'center';\n            item.contentPosition = this.contentPosition;\n\n            const heightDiff = (item.clientHeight - 16) / 2;\n\n            if (i > 0) {\n                const stepperLine = document.createElement('p-stepper-line');\n                stepperLine.direction = this.direction;\n                stepperLine.active = i <= activeStep;\n\n                if (heightDiff > 0 && this.direction === 'vertical') {\n                    stepperLine.style.marginTop = `-${heightDiff / 16}rem`;\n                    stepperLine.style.marginBottom = `-${heightDiff / 16}rem`;\n                    stepperLine.style.minHeight = `calc(1rem + ${\n                        (heightDiff * 2) / 16\n                    }rem)`;\n                }\n\n                this._el.insertBefore(stepperLine, item);\n            }\n\n            // const child = item.querySelector('[slot=\"content\"]');\n            // const newItem = (\n            //     <p-stepper-item\n\n            //     >\n            //         <div slot=\"content\" innerHTML={child.outerHTML} />\n            //     </p-stepper-item>\n            // );\n\n            // elements.push(newItem);\n        }\n\n        // return elements;\n    }\n}\n"]}
+{"version":3,"file":"stepper.component.js","sourceRoot":"","sources":["../../../../src/components/molecules/stepper/stepper.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-stepper',\n    styleUrl: 'stepper.component.scss',\n    shadow: true,\n})\nexport class Stepper {\n    /**\n     * The currently active step\n     */\n    @Prop() activeStep: number = 1;\n\n    /**\n     * The direction of the stepper\n     */\n    @Prop({ reflect: true }) direction: 'horizontal' | 'vertical' =\n        'horizontal';\n\n    /**\n     * The position of the content in case of vertical direction\n     */\n    @Prop({ reflect: true }) contentPosition: 'start' | 'end' = 'end';\n\n    /**\n     * The host element\n     */\n    @Element() private _el: HTMLElement;\n\n    // private _steps: Array<HTMLPStepperItemElement>;\n\n    componentDidRender() {\n        this._generateSteps();\n    }\n\n    render() {\n        return (\n            <Host class=\"p-stepper\">\n                <slot />\n            </Host>\n        );\n    }\n\n    private _generateSteps() {\n        let activeStep = this.activeStep - 1;\n        const items = this._el.querySelectorAll(\n            'p-stepper-item, p-stepper-line'\n        );\n\n        if (!!this.activeStep || activeStep <= 0) {\n            const arrayItems = Array.from(items);\n            const activeItemIndex = arrayItems.findIndex(\n                (i: any) =>\n                    i.tagName.toLowerCase() === 'p-stepper-item' &&\n                    i.active &&\n                    !i.finished\n            );\n\n            if (activeItemIndex >= 0) {\n                activeStep = activeItemIndex;\n            }\n\n            const finishedItemIndex = arrayItems.findIndex(\n                (i: any) =>\n                    i.tagName.toLowerCase() === 'p-stepper-item' && i.finished\n            );\n            if (activeStep <= 0 && finishedItemIndex >= 0) {\n                activeStep = finishedItemIndex + 1;\n            }\n        }\n\n        for (let i = 0; i < items?.length; i++) {\n            const item = items.item(i) as any;\n\n            if (item.tagName.toLowerCase() === 'p-stepper-item') {\n                item.active = i === activeStep;\n                item.finished = i < activeStep;\n                item.direction = this.direction;\n                item.align =\n                    i === 0\n                        ? 'start'\n                        : i === items?.length - 1\n                        ? 'end'\n                        : 'center';\n                item.contentPosition = this.contentPosition;\n\n                if (i > 0) {\n                    const nextItem = items.item(i + 1) as any;\n\n                    if (\n                        !nextItem ||\n                        nextItem.tagName.toLowerCase() === 'p-stepper-item'\n                    ) {\n                        const heightDiff = (item.clientHeight - 16) / 2;\n\n                        const stepperLine =\n                            document.createElement('p-stepper-line');\n                        stepperLine.direction = this.direction;\n                        stepperLine.active = i <= activeStep;\n\n                        if (heightDiff > 0 && this.direction === 'vertical') {\n                            stepperLine.style.marginTop = `-${\n                                heightDiff / 16\n                            }rem`;\n                            stepperLine.style.marginBottom = `-${\n                                heightDiff / 16\n                            }rem`;\n                            stepperLine.style.minHeight = `calc(1rem + ${\n                                (heightDiff * 2) / 16\n                            }rem)`;\n                        }\n\n                        this._el.insertBefore(stepperLine, item);\n\n                        continue;\n                    }\n\n                    if (nextItem.tagName.toLowerCase() === 'p-stepper-line') {\n                        nextItem.direction = this.direction;\n                        nextItem.active = i <= activeStep;\n                    }\n                }\n            }\n        }\n    }\n}\n"]}

package/dist/components/p-select.js

@@ -18,6 +18,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.queryChange = createEvent(this, "queryChange", 7);
     this.valueChange = createEvent(this, "valueChange", 7);
+    this.dropdownShown = createEvent(this, "dropdownShown", 7);
     this._isAutoCompleting = false;
     this.items = undefined;
     this.icon = undefined;
@@ -111,6 +112,12 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   itemChanges() {
     this._preselectItem();
   }
+  _showDropdownChanges() {
+    this.dropdownShown.emit({
+      value: this._showDropdown,
+      query: this.query,
+    });
+  }
   _preselectItem(value) {
     value = value === undefined ? null : value;
     const parsedValue = !!this.value
@@ -131,6 +138,9 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this._onBlur(true);
   }
   _onFocus() {
+    if (!this.items.length && !this.loading) {
+      return;
+    }
     if (!this.enableAutocomplete) {
       this._inputRef.blur();
       if (!this._showDropdown) {
@@ -183,7 +193,8 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   get _el() { return this; }
   static get watchers() { return {
     "value": ["_valueChange"],
-    "items": ["itemChanges"]
+    "items": ["itemChanges"],
+    "_showDropdown": ["_showDropdownChanges"]
   }; }
   static get style() { return selectComponentCss; }
 }, [0, "p-select", {

package/dist/components/p-select.js.map

@@ -1 +1 @@
-{"file":"p-select.js","mappings":"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","names":[],"sources":["./src/components/molecules/select/select.component.scss?tag=p-select","./src/components/molecules/select/select.component.tsx"],"sourcesContent":[":host {\n    @apply flex flex-col;\n\n    input.read-only {\n        @apply text-ellipsis;\n    }\n}\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { childOf } from '../../../utils';\nimport { IconVariant } from '../../atoms/icon/icon.component';\n\n@Component({\n    tag: 'p-select',\n    styleUrl: 'select.component.scss',\n    shadow: false,\n})\nexport class Select {\n    /**\n     * The items to show in the dropdown\n     */\n    @Prop() items: string | any[];\n\n    /**\n     * Icon of the select box\n     */\n    @Prop() icon: IconVariant;\n\n    /**\n     * The current query\n     */\n    @Prop() query: string;\n\n    /**\n     * The placeholder of the input\n     */\n    @Prop() placeholder: string;\n\n    /**\n     * The placeholder of the input when auto completing\n     */\n    @Prop() autocompletePlaceholder: string;\n\n    /**\n     * The current value\n     */\n    @Prop() value: any;\n\n    /**\n     * The key of the object to display\n     */\n    @Prop() displayKey: string = 'text';\n\n    /**\n     * The key of the object to return\n     */\n    @Prop() valueKey: string = 'value';\n\n    /**\n     * The key of the object to display\n     */\n    @Prop() queryKey?: string;\n\n    /**\n     * Wether to automatically select the first item\n     */\n    @Prop() autoSelectFirst: boolean = true;\n\n    /**\n     * Wether to show the chevron or not\n     */\n    @Prop() showChevron: boolean = true;\n\n    /**\n     * The maximum amount of items to display\n     */\n    @Prop() maxDisplayedItems: number = 10;\n\n    /**\n     * Wether to enable autocomplete\n     */\n    @Prop() enableAutocomplete: boolean = true;\n\n    /**\n     * Wether the input uses async filtering\n     */\n    @Prop() asyncFilter: boolean = false;\n\n    /**\n     * Wether to show loading items\n     */\n    @Prop() loading: boolean = false;\n\n    /**\n     * Event when the query of the autocomplete changes\n     */\n    @Event() queryChange: EventEmitter<string>;\n\n    /**\n     * Event when the value changes\n     */\n    @Event() valueChange: EventEmitter<any>;\n\n    /**\n     * The size of the input group used by the select\n     */\n    @Prop() size: 'small' | 'medium' = 'medium';\n\n    /**\n     * The prefix of the input group used by the select\n     */\n    @Prop() prefix: string;\n\n    /**\n     * The label of the input group used by the select\n     */\n    @Prop() label: string;\n\n    /**\n     * The helper of the input group used by the select\n     */\n    @Prop() helper: string;\n\n    /**\n     * The helper of the input group used by the select\n     */\n    @Prop({ reflect: true }) error: string;\n\n    /**\n     * Wether the input group is disabled used by the select\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * The host element\n     */\n    @Element() private _el: HTMLElement;\n\n    @State() private _showDropdown: any = false;\n    @State() private _selectedItem: any = null;\n\n    private _isAutoCompleting: boolean = false;\n\n    private _inputRef: HTMLInputElement;\n\n    get _items() {\n        if (!this.items || this.loading) {\n            return [];\n        }\n\n        let items =\n            typeof this.items === 'string'\n                ? JSON.parse(this.items)\n                : this.items;\n\n        if (typeof items?.[0] === 'string') {\n            this.displayKey = 'text';\n            this.valueKey = 'value';\n\n            items = items.map((str) => ({\n                value: str,\n                text: str,\n            }));\n        }\n\n        if (this._isAutoCompleting && this.query?.length && !this.asyncFilter) {\n            items = items.filter((item) => {\n                if (this.queryKey) {\n                    return this._checkvalue(this.queryKey, item);\n                }\n\n                return (\n                    this._checkvalue(this.valueKey, item) ||\n                    this._checkvalue(this.displayKey, item)\n                );\n            });\n        }\n\n        return items?.slice(0, this.maxDisplayedItems);\n    }\n\n    get _displayValue() {\n        if (this._isAutoCompleting) {\n            return this.query;\n        }\n\n        return this._selectedItem?.[this.displayKey];\n    }\n\n    get _placeholder() {\n        return this._isAutoCompleting && this.autocompletePlaceholder?.length\n            ? this.autocompletePlaceholder\n            : this.placeholder;\n    }\n\n    componentDidLoad() {\n        if (this.value) {\n            this._valueChange(this.value);\n            return;\n        }\n\n        if (this.autoSelectFirst) {\n            this._selectedItem = this._items?.[0];\n        }\n    }\n\n    render() {\n        return (\n            <Host class=\"p-select\">\n                <p-dropdown\n                    disableTriggerClick={true}\n                    calculateWidth={true}\n                    insideClick={true}\n                    show={this._showDropdown}\n                >\n                    <p-input-group\n                        slot=\"trigger\"\n                        icon={this.icon}\n                        size={this.size}\n                        prefix={this.prefix}\n                        label={this.label}\n                        helper={this.helper}\n                        error={this.error}\n                        disabled={this.disabled}\n                        focused={this._showDropdown}\n                    >\n                        <input\n                            slot=\"input\"\n                            type=\"text\"\n                            placeholder={this._placeholder}\n                            value={this._displayValue}\n                            class={`p-input cursor-pointer ${\n                                !this._isAutoCompleting && 'read-only'\n                            }`}\n                            onFocus={() => this._onFocus()}\n                            onMouseDown={(ev) => this._onMouseDown(ev)}\n                            onClick={() => this._onClick()}\n                            onInput={(ev) => this._onChange(ev)}\n                            ref={(ref) => (this._inputRef = ref)}\n                        />\n\n                        {this.showChevron && (\n                            <p-icon variant=\"chevron\" slot=\"suffix\" />\n                        )}\n                    </p-input-group>\n                    <div slot=\"items\">\n                        {this.loading\n                            ? this._getLoadingItems()\n                            : this._getItems()}\n                    </div>\n                </p-dropdown>\n            </Host>\n        );\n    }\n\n    @Listen('click', { target: 'document', capture: true })\n    protected documentClickHandler({ target }) {\n        if (!this._showDropdown || childOf(target, this._el)) {\n            return;\n        }\n\n        this._showDropdown = false;\n        this._isAutoCompleting = false;\n    }\n\n    @Watch('value')\n    private _valueChange(value: any) {\n        this._preselectItem(value);\n    }\n\n    @Watch('items')\n    public itemChanges() {\n        this._preselectItem();\n    }\n\n    private _preselectItem(value?: any) {\n        value = value === undefined ? null : value;\n        const parsedValue = !!this.value\n            ? JSON.stringify(this.value)\n            : JSON.stringify(value);\n\n        if (\n            this._selectedItem &&\n            JSON.stringify(this._selectedItem[this.valueKey]) === parsedValue\n        ) {\n            return;\n        }\n\n        const item = this._items.find(\n            (i) => JSON.stringify(i?.[this.valueKey]) === parsedValue\n        );\n\n        this._selectedItem = item;\n    }\n\n    private _selectValue(item) {\n        this._selectedItem = item;\n        const value = item[this.valueKey];\n\n        this.value = value;\n        this.valueChange.emit(this.value);\n\n        this._onBlur(true);\n    }\n\n    private _onFocus() {\n        if (!this.enableAutocomplete) {\n            this._inputRef.blur();\n            if (!this._showDropdown) {\n                this._showDropdown = true;\n            }\n            return;\n        }\n\n        this._isAutoCompleting = true;\n        this._showDropdown = true;\n    }\n\n    private _onMouseDown(ev) {\n        if (this.enableAutocomplete) {\n            return;\n        }\n\n        ev.preventDefault();\n    }\n\n    private _onClick() {\n        if (this.enableAutocomplete) {\n            return;\n        }\n\n        this._showDropdown = !this._showDropdown;\n    }\n\n    private _onBlur(force = false) {\n        if (!this.enableAutocomplete && !force) {\n            return;\n        }\n\n        this._isAutoCompleting = false;\n        this._showDropdown = false;\n    }\n\n    private _onChange(ev) {\n        if (!this._isAutoCompleting) {\n            return;\n        }\n\n        this.query = ev.target.value;\n        this.queryChange.emit(this.query);\n    }\n\n    private _checkvalue(key, item) {\n        return (\n            item?.[key]\n                ?.toString()\n                ?.toLowerCase()\n                .indexOf(this.query?.toLowerCase()) >= 0\n        );\n    }\n\n    private _getItems() {\n        return this._items.map((item) => (\n            <p-dropdown-menu-item\n                onClick={() => this._selectValue(item)}\n                active={\n                    item[this.valueKey] === this._selectedItem?.[this.valueKey]\n                }\n            >\n                {item[this.displayKey]}\n            </p-dropdown-menu-item>\n        ));\n    }\n\n    private _getLoadingItems() {\n        return [0, 0, 0].map(() => (\n            <p-dropdown-menu-item enableHover={false}>\n                <p-loader variant=\"ghost\" class=\"h-6 w-full rounded\" />\n            </p-dropdown-menu-item>\n        ));\n    }\n}\n"],"version":3}
+{"file":"p-select.js","mappings":"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","names":[],"sources":["./src/components/molecules/select/select.component.scss?tag=p-select","./src/components/molecules/select/select.component.tsx"],"sourcesContent":[":host {\n    @apply flex flex-col;\n\n    input.read-only {\n        @apply text-ellipsis;\n    }\n}\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { childOf } from '../../../utils';\nimport { IconVariant } from '../../atoms/icon/icon.component';\n\n@Component({\n    tag: 'p-select',\n    styleUrl: 'select.component.scss',\n    shadow: false,\n})\nexport class Select {\n    /**\n     * The items to show in the dropdown\n     */\n    @Prop() items: string | any[];\n\n    /**\n     * Icon of the select box\n     */\n    @Prop() icon: IconVariant;\n\n    /**\n     * The current query\n     */\n    @Prop() query: string;\n\n    /**\n     * The placeholder of the input\n     */\n    @Prop() placeholder: string;\n\n    /**\n     * The placeholder of the input when auto completing\n     */\n    @Prop() autocompletePlaceholder: string;\n\n    /**\n     * The current value\n     */\n    @Prop() value: any;\n\n    /**\n     * The key of the object to display\n     */\n    @Prop() displayKey: string = 'text';\n\n    /**\n     * The key of the object to return\n     */\n    @Prop() valueKey: string = 'value';\n\n    /**\n     * The key of the object to display\n     */\n    @Prop() queryKey?: string;\n\n    /**\n     * Wether to automatically select the first item\n     */\n    @Prop() autoSelectFirst: boolean = true;\n\n    /**\n     * Wether to show the chevron or not\n     */\n    @Prop() showChevron: boolean = true;\n\n    /**\n     * The maximum amount of items to display\n     */\n    @Prop() maxDisplayedItems: number = 10;\n\n    /**\n     * Wether to enable autocomplete\n     */\n    @Prop() enableAutocomplete: boolean = true;\n\n    /**\n     * Wether the input uses async filtering\n     */\n    @Prop() asyncFilter: boolean = false;\n\n    /**\n     * Wether to show loading items\n     */\n    @Prop() loading: boolean = false;\n\n    /**\n     * Event when the query of the autocomplete changes\n     */\n    @Event() queryChange: EventEmitter<string>;\n\n    /**\n     * Event when the value changes\n     */\n    @Event() valueChange: EventEmitter<any>;\n\n    /**\n     * Event when the dropdown shows\n     */\n    @Event() dropdownShown: EventEmitter<any>;\n\n    /**\n     * The size of the input group used by the select\n     */\n    @Prop() size: 'small' | 'medium' = 'medium';\n\n    /**\n     * The prefix of the input group used by the select\n     */\n    @Prop() prefix: string;\n\n    /**\n     * The label of the input group used by the select\n     */\n    @Prop() label: string;\n\n    /**\n     * The helper of the input group used by the select\n     */\n    @Prop() helper: string;\n\n    /**\n     * The helper of the input group used by the select\n     */\n    @Prop({ reflect: true }) error: string;\n\n    /**\n     * Wether the input group is disabled used by the select\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * The host element\n     */\n    @Element() private _el: HTMLElement;\n\n    @State() private _showDropdown: any = false;\n    @State() private _selectedItem: any = null;\n\n    private _isAutoCompleting: boolean = false;\n\n    private _inputRef: HTMLInputElement;\n\n    get _items() {\n        if (!this.items || this.loading) {\n            return [];\n        }\n\n        let items =\n            typeof this.items === 'string'\n                ? JSON.parse(this.items)\n                : this.items;\n\n        if (typeof items?.[0] === 'string') {\n            this.displayKey = 'text';\n            this.valueKey = 'value';\n\n            items = items.map((str) => ({\n                value: str,\n                text: str,\n            }));\n        }\n\n        if (this._isAutoCompleting && this.query?.length && !this.asyncFilter) {\n            items = items.filter((item) => {\n                if (this.queryKey) {\n                    return this._checkvalue(this.queryKey, item);\n                }\n\n                return (\n                    this._checkvalue(this.valueKey, item) ||\n                    this._checkvalue(this.displayKey, item)\n                );\n            });\n        }\n\n        return items?.slice(0, this.maxDisplayedItems);\n    }\n\n    get _displayValue() {\n        if (this._isAutoCompleting) {\n            return this.query;\n        }\n\n        return this._selectedItem?.[this.displayKey];\n    }\n\n    get _placeholder() {\n        return this._isAutoCompleting && this.autocompletePlaceholder?.length\n            ? this.autocompletePlaceholder\n            : this.placeholder;\n    }\n\n    componentDidLoad() {\n        if (this.value) {\n            this._valueChange(this.value);\n            return;\n        }\n\n        if (this.autoSelectFirst) {\n            this._selectedItem = this._items?.[0];\n        }\n    }\n\n    render() {\n        return (\n            <Host class=\"p-select\">\n                <p-dropdown\n                    disableTriggerClick={true}\n                    calculateWidth={true}\n                    insideClick={true}\n                    show={this._showDropdown}\n                >\n                    <p-input-group\n                        slot=\"trigger\"\n                        icon={this.icon}\n                        size={this.size}\n                        prefix={this.prefix}\n                        label={this.label}\n                        helper={this.helper}\n                        error={this.error}\n                        disabled={this.disabled}\n                        focused={this._showDropdown}\n                    >\n                        <input\n                            slot=\"input\"\n                            type=\"text\"\n                            placeholder={this._placeholder}\n                            value={this._displayValue}\n                            class={`p-input cursor-pointer ${\n                                !this._isAutoCompleting && 'read-only'\n                            }`}\n                            onFocus={() => this._onFocus()}\n                            onMouseDown={(ev) => this._onMouseDown(ev)}\n                            onClick={() => this._onClick()}\n                            onInput={(ev) => this._onChange(ev)}\n                            ref={(ref) => (this._inputRef = ref)}\n                        />\n\n                        {this.showChevron && (\n                            <p-icon variant=\"chevron\" slot=\"suffix\" />\n                        )}\n                    </p-input-group>\n                    <div slot=\"items\">\n                        {this.loading\n                            ? this._getLoadingItems()\n                            : this._getItems()}\n                    </div>\n                </p-dropdown>\n            </Host>\n        );\n    }\n\n    @Listen('click', { target: 'document', capture: true })\n    protected documentClickHandler({ target }) {\n        if (!this._showDropdown || childOf(target, this._el)) {\n            return;\n        }\n\n        this._showDropdown = false;\n        this._isAutoCompleting = false;\n    }\n\n    @Watch('value')\n    private _valueChange(value: any) {\n        this._preselectItem(value);\n    }\n\n    @Watch('items')\n    public itemChanges() {\n        this._preselectItem();\n    }\n\n    @Watch('_showDropdown')\n    public _showDropdownChanges() {\n        this.dropdownShown.emit({\n            value: this._showDropdown,\n            query: this.query,\n        });\n    }\n\n    private _preselectItem(value?: any) {\n        value = value === undefined ? null : value;\n        const parsedValue = !!this.value\n            ? JSON.stringify(this.value)\n            : JSON.stringify(value);\n\n        if (\n            this._selectedItem &&\n            JSON.stringify(this._selectedItem[this.valueKey]) === parsedValue\n        ) {\n            return;\n        }\n\n        const item = this._items.find(\n            (i) => JSON.stringify(i?.[this.valueKey]) === parsedValue\n        );\n\n        this._selectedItem = item;\n    }\n\n    private _selectValue(item) {\n        this._selectedItem = item;\n        const value = item[this.valueKey];\n\n        this.value = value;\n        this.valueChange.emit(this.value);\n\n        this._onBlur(true);\n    }\n\n    private _onFocus() {\n        if (!this.items.length && !this.loading) {\n            return;\n        }\n\n        if (!this.enableAutocomplete) {\n            this._inputRef.blur();\n            if (!this._showDropdown) {\n                this._showDropdown = true;\n            }\n            return;\n        }\n\n        this._isAutoCompleting = true;\n        this._showDropdown = true;\n    }\n\n    private _onMouseDown(ev) {\n        if (this.enableAutocomplete) {\n            return;\n        }\n\n        ev.preventDefault();\n    }\n\n    private _onClick() {\n        if (this.enableAutocomplete) {\n            return;\n        }\n\n        this._showDropdown = !this._showDropdown;\n    }\n\n    private _onBlur(force = false) {\n        if (!this.enableAutocomplete && !force) {\n            return;\n        }\n\n        this._isAutoCompleting = false;\n        this._showDropdown = false;\n    }\n\n    private _onChange(ev) {\n        if (!this._isAutoCompleting) {\n            return;\n        }\n\n        this.query = ev.target.value;\n        this.queryChange.emit(this.query);\n    }\n\n    private _checkvalue(key, item) {\n        return (\n            item?.[key]\n                ?.toString()\n                ?.toLowerCase()\n                .indexOf(this.query?.toLowerCase()) >= 0\n        );\n    }\n\n    private _getItems() {\n        return this._items.map((item) => (\n            <p-dropdown-menu-item\n                onClick={() => this._selectValue(item)}\n                active={\n                    item[this.valueKey] === this._selectedItem?.[this.valueKey]\n                }\n            >\n                {item[this.displayKey]}\n            </p-dropdown-menu-item>\n        ));\n    }\n\n    private _getLoadingItems() {\n        return [0, 0, 0].map(() => (\n            <p-dropdown-menu-item enableHover={false}>\n                <p-loader variant=\"ghost\" class=\"h-6 w-full rounded\" />\n            </p-dropdown-menu-item>\n        ));\n    }\n}\n"],"version":3}

package/dist/components/p-stepper-item.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './icon.component.js';
 
-const stepperItemComponentCss = ".static{position:static!important}.absolute{position:absolute!important}.relative{position:relative!important}.left-1{left:.25rem!important}.order-2{order:2!important}.ml-0{margin-left:0!important}.mr-4{margin-right:1rem!important}.flex{display:flex!important}.h-4{height:1rem!important}.w-4{width:1rem!important}.min-w-0{min-width:0!important}.-translate-x-1{--tw-translate-x:-0.25rem!important}.-rotate-0,.-translate-x-1{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-135,.-rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-225,.-rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-270,.-rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-45,.-rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-90{--tw-rotate:-90deg!important}.rotate-0{--tw-rotate:0deg!important}.rotate-0,.rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-135{--tw-rotate:135deg!important}.rotate-180{--tw-rotate:180deg!important}.rotate-180,.rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-225{--tw-rotate:225deg!important}.rotate-25{--tw-rotate:25deg!important}.rotate-25,.rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-270{--tw-rotate:270deg!important}.rotate-315{--tw-rotate:315deg!important}.rotate-315,.rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-45{--tw-rotate:45deg!important}.rotate-90{--tw-rotate:90deg!important}.rotate-90,.scale-x-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-y-flip{--tw-scale-y:-1!important}.scale-y-flip,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.items-end{align-items:flex-end!important}.items-center{align-items:center!important}.bg-mystic-dark{--tw-bg-opacity:1!important;background-color:rgb(218 230 240/var(--tw-bg-opacity))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.font-semibold{font-weight:600!important}.transition{transition-duration:.15s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.duration-500{transition-duration:.5s!important}*{box-sizing:border-box}.left-1\\/2{left:50%!important}.min-h-\\[1rem\\]{min-height:1rem!important}.-translate-x-1\\/2{--tw-translate-x:-50%!important}.-translate-x-1\\/2,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}:host{align-items:flex-end;display:flex;justify-content:center;position:relative}:host .content{--tw-text-opacity:1;color:rgb(176 178 203/var(--tw-text-opacity));font-size:.875rem;font-weight:600;line-height:1.25rem;min-width:0;white-space:nowrap}:host .circle{--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(218 230 240/var(--tw-bg-opacity));border-radius:100%;color:rgb(255 255 255/var(--tw-text-opacity));display:flex;height:1rem;justify-content:center;transition-duration:.5s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);width:1rem}:host .circle p-icon{display:flex!important;font-size:.625rem}:host([direction=horizontal]){height:2.5rem}:host([direction=horizontal]) .content{order:1;position:absolute;top:0}:host([direction=horizontal]) .circle{order:2}:host([direction=vertical]){align-items:center;min-height:1rem}:host([direction=vertical]) .content{margin-left:1rem;order:2}:host([direction=vertical]) .circle{order:1}:host([active]) .content,:host([finished]) .content{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}:host([active]) .circle,:host([finished]) .circle{--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity))}:host([direction=horizontal][align=start]) .content{left:0}:host([direction=horizontal][align=end]) .content{right:0}:host([direction=horizontal][align=center]) .content{--tw-translate-x:-50%;left:50%;text-align:center;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host([direction=vertical][content-position=start]){flex-direction:row-reverse}:host([direction=vertical][content-position=start]) .content{display:flex;justify-content:flex-end;margin-left:0;margin-right:1rem}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-lg,.text-xl{line-height:1.75rem!important}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}";
+const stepperItemComponentCss = ".static{position:static!important}.absolute{position:absolute!important}.relative{position:relative!important}.left-1{left:.25rem!important}.order-2{order:2!important}.ml-0{margin-left:0!important}.mr-4{margin-right:1rem!important}.flex{display:flex!important}.h-4{height:1rem!important}.w-4{width:1rem!important}.min-w-0{min-width:0!important}.-translate-x-1{--tw-translate-x:-0.25rem!important}.-rotate-0,.-translate-x-1{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-135,.-rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-225,.-rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-270,.-rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-45,.-rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-90{--tw-rotate:-90deg!important}.rotate-0{--tw-rotate:0deg!important}.rotate-0,.rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-135{--tw-rotate:135deg!important}.rotate-180{--tw-rotate:180deg!important}.rotate-180,.rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-225{--tw-rotate:225deg!important}.rotate-25{--tw-rotate:25deg!important}.rotate-25,.rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-270{--tw-rotate:270deg!important}.rotate-315{--tw-rotate:315deg!important}.rotate-315,.rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-45{--tw-rotate:45deg!important}.rotate-90{--tw-rotate:90deg!important}.rotate-90,.scale-x-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-y-flip{--tw-scale-y:-1!important}.scale-y-flip,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.items-end{align-items:flex-end!important}.items-center{align-items:center!important}.bg-mystic-dark{--tw-bg-opacity:1!important;background-color:rgb(218 230 240/var(--tw-bg-opacity))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.transition{transition-duration:.15s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.duration-500{transition-duration:.5s!important}*{box-sizing:border-box}.left-1\\/2{left:50%!important}.min-h-\\[1rem\\]{min-height:1rem!important}.-translate-x-1\\/2{--tw-translate-x:-50%!important}.-translate-x-1\\/2,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}:host{align-items:flex-end;display:flex;justify-content:center;position:relative}:host .content{--tw-text-opacity:1;color:rgb(176 178 203/var(--tw-text-opacity));font-size:.875rem;line-height:1.25rem;min-width:0;white-space:nowrap}:host .circle{--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(218 230 240/var(--tw-bg-opacity));border-radius:100%;color:rgb(255 255 255/var(--tw-text-opacity));display:flex;height:1rem;justify-content:center;transition-duration:.5s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);width:1rem}:host .circle p-icon{display:flex!important;font-size:.625rem}:host([direction=horizontal]){height:2.5rem}:host([direction=horizontal]) .content{order:1;position:absolute;top:0}:host([direction=horizontal]) .circle{order:2}:host([direction=vertical]){align-items:center;min-height:1rem}:host([direction=vertical]) .content{margin-left:1rem;order:2}:host([direction=vertical]) .circle{order:1}:host([active]) .content,:host([finished]) .content{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}:host([active]) .circle,:host([finished]) .circle{--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity))}:host([direction=horizontal][align=start]) .content{left:0}:host([direction=horizontal][align=end]) .content{right:0}:host([direction=horizontal][align=center]) .content{--tw-translate-x:-50%;left:50%;text-align:center;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host([direction=vertical][content-position=start]){flex-direction:row-reverse}:host([direction=vertical][content-position=start]) .content{display:flex;justify-content:flex-end;margin-left:0;margin-right:1rem}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-lg,.text-xl{line-height:1.75rem!important}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}";
 
 const StepperItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/p-stepper-item.js.map

@@ -1 +1 @@
-{"file":"p-stepper-item.js","mappings":";;;AAAA,MAAM,uBAAuB,GAAG,wpRAAwpR;;MCO3qR,WAAW;;;;;iBAIyC,QAAQ;qBAMjE,YAAY;2BAK4C,KAAK;oBAKpB,KAAK;kBAKP,KAAK;;EAEhD,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,gBAAgB,IACxB,WAAK,KAAK,EAAC,SAAS,IAChB,YAAM,IAAI,EAAC,SAAS,GAAG,CACrB,EACN,WAAK,KAAK,EAAC,QAAQ,IACd,IAAI,CAAC,QAAQ,IAAI,cAAQ,OAAO,EAAC,WAAW,GAAG,CAC9C,CACH,EACT;GACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/atoms/stepper-item/stepper-item.component.scss?tag=p-stepper-item&encapsulation=shadow","./src/components/atoms/stepper-item/stepper-item.component.tsx"],"sourcesContent":[":host {\n    @apply relative flex items-end justify-center;\n\n    .content {\n        @apply min-w-0 whitespace-nowrap;\n        @apply text-sm font-semibold text-storm-light;\n    }\n\n    .circle {\n        @apply transition duration-500 ease-in-out;\n        @apply flex items-center justify-center;\n        @apply h-4 w-4 rounded-round;\n        @apply bg-mystic-dark text-white;\n\n        p-icon {\n            @apply flex #{!important};\n            font-size: 0.625rem;\n        }\n    }\n}\n\n:host([direction='horizontal']) {\n    @apply h-10;\n\n    .content {\n        @apply absolute top-0;\n        @apply order-1;\n    }\n\n    .circle {\n        @apply order-2;\n    }\n}\n\n:host([direction='vertical']) {\n    @apply min-h-[1rem] items-center;\n\n    .content {\n        @apply order-2 ml-4;\n    }\n\n    .circle {\n        @apply order-1;\n    }\n}\n\n:host([active]),\n:host([finished]) {\n    .content {\n        @apply text-indigo;\n    }\n\n    .circle {\n        @apply bg-indigo;\n    }\n}\n\n:host([direction='horizontal'][align='start']) {\n    .content {\n        @apply left-0;\n    }\n}\n\n:host([direction='horizontal'][align='end']) {\n    .content {\n        @apply right-0;\n    }\n}\n\n:host([direction='horizontal'][align='center']) {\n    .content {\n        @apply left-1/2 -translate-x-1/2 transform text-center;\n    }\n}\n\n:host([direction='vertical'][content-position='start']) {\n    @apply flex-row-reverse;\n\n    .content {\n        @apply ml-0 mr-4 flex justify-end;\n    }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-stepper-item',\n    styleUrl: 'stepper-item.component.scss',\n    shadow: true,\n})\nexport class StepperItem {\n    /**\n     * The alignment of the step content\n     */\n    @Prop({ reflect: true }) align: 'start' | 'center' | 'end' = 'center';\n\n    /**\n     * The direction of the stepper step\n     */\n    @Prop({ reflect: true }) direction: 'horizontal' | 'vertical' =\n        'horizontal';\n\n    /**\n     * The position of the content in case of vertical direction\n     */\n    @Prop({ reflect: true }) contentPosition: 'start' | 'end' = 'end';\n\n    /**\n     * Wether the step is finished\n     */\n    @Prop({ reflect: true }) finished: boolean = false;\n\n    /**\n     * Wether the step is active\n     */\n    @Prop({ reflect: true }) active: boolean = false;\n\n    render() {\n        return (\n            <Host class=\"p-stepper-item\">\n                <div class=\"content\">\n                    <slot name=\"content\" />\n                </div>\n                <div class=\"circle\">\n                    {this.finished && <p-icon variant=\"checkmark\" />}\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"p-stepper-item.js","mappings":";;;AAAA,MAAM,uBAAuB,GAAG,+lRAA+lR;;MCOlnR,WAAW;;;;;iBAIyC,QAAQ;qBAMjE,YAAY;2BAK4C,KAAK;oBAKpB,KAAK;kBAKP,KAAK;;EAEhD,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,gBAAgB,IACxB,WAAK,KAAK,EAAC,SAAS,IAChB,YAAM,IAAI,EAAC,SAAS,GAAG,CACrB,EACN,WAAK,KAAK,EAAC,QAAQ,IACd,IAAI,CAAC,QAAQ,IAAI,cAAQ,OAAO,EAAC,WAAW,GAAG,CAC9C,CACH,EACT;GACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/atoms/stepper-item/stepper-item.component.scss?tag=p-stepper-item&encapsulation=shadow","./src/components/atoms/stepper-item/stepper-item.component.tsx"],"sourcesContent":[":host {\n    @apply relative flex items-end justify-center;\n\n    .content {\n        @apply min-w-0 whitespace-nowrap;\n        @apply text-sm text-storm-light;\n    }\n\n    .circle {\n        @apply transition duration-500 ease-in-out;\n        @apply flex items-center justify-center;\n        @apply h-4 w-4 rounded-round;\n        @apply bg-mystic-dark text-white;\n\n        p-icon {\n            @apply flex #{!important};\n            font-size: 0.625rem;\n        }\n    }\n}\n\n:host([direction='horizontal']) {\n    @apply h-10;\n\n    .content {\n        @apply absolute top-0;\n        @apply order-1;\n    }\n\n    .circle {\n        @apply order-2;\n    }\n}\n\n:host([direction='vertical']) {\n    @apply min-h-[1rem] items-center;\n\n    .content {\n        @apply order-2 ml-4;\n    }\n\n    .circle {\n        @apply order-1;\n    }\n}\n\n:host([active]),\n:host([finished]) {\n    .content {\n        @apply text-indigo;\n    }\n\n    .circle {\n        @apply bg-indigo;\n    }\n}\n\n:host([direction='horizontal'][align='start']) {\n    .content {\n        @apply left-0;\n    }\n}\n\n:host([direction='horizontal'][align='end']) {\n    .content {\n        @apply right-0;\n    }\n}\n\n:host([direction='horizontal'][align='center']) {\n    .content {\n        @apply left-1/2 -translate-x-1/2 transform text-center;\n    }\n}\n\n:host([direction='vertical'][content-position='start']) {\n    @apply flex-row-reverse;\n\n    .content {\n        @apply ml-0 mr-4 flex justify-end;\n    }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-stepper-item',\n    styleUrl: 'stepper-item.component.scss',\n    shadow: true,\n})\nexport class StepperItem {\n    /**\n     * The alignment of the step content\n     */\n    @Prop({ reflect: true }) align: 'start' | 'center' | 'end' = 'center';\n\n    /**\n     * The direction of the stepper step\n     */\n    @Prop({ reflect: true }) direction: 'horizontal' | 'vertical' =\n        'horizontal';\n\n    /**\n     * The position of the content in case of vertical direction\n     */\n    @Prop({ reflect: true }) contentPosition: 'start' | 'end' = 'end';\n\n    /**\n     * Wether the step is finished\n     */\n    @Prop({ reflect: true }) finished: boolean = false;\n\n    /**\n     * Wether the step is active\n     */\n    @Prop({ reflect: true }) active: boolean = false;\n\n    render() {\n        return (\n            <Host class=\"p-stepper-item\">\n                <div class=\"content\">\n                    <slot name=\"content\" />\n                </div>\n                <div class=\"circle\">\n                    {this.finished && <p-icon variant=\"checkmark\" />}\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}