@infineon/infineon-design-system-stencil 30.10.0--canary.1696.f6fc7149013229dfeecb984f52e464c01a339d3d.0 → 30.10.0--canary.1702.4f2ff9ed9726341546ddeb1cd69fcfdd2c1d611b.0

package/dist/infineon-design-system-stencil/p-fb0a6d60.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stepCss","IfxStepStyle0","Step","activeStep","showStepNumber","variant","indicatorPosition","onStepChange","event","previousActiveStep","detail","this","stepId","error","clickable","updateCurrentStep","newStepperState","active","updateErrorState","handleStepClick","disabled","stepperState","complete","setActiveStep","handleStepKeyDown","key","stopOnClickPropogation","stopPropagation","render","h","onClick","e","class","lastStep","icon","tabIndex","onKeyDown"],"sources":["src/components/stepper/step/step.scss?tag=ifx-step&encapsulation=shadow","src/components/stepper/step/step.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.step-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: flex-start;\n    width: 100%;\n    gap: tokens.$ifxSize100;\n    font: tokens.$ifxBodyBody03;\n\n    &.vertical {\n        flex-direction: row;\n        gap: tokens.$ifxSize150;\n        width: unset;\n        height: 100%;\n        \n        .step-icon-wrapper {\n            flex-direction: column;\n            width: unset;\n            height: 100%;\n        }\n    }\n    \n    &.compact {\n        gap: 0;\n        max-width: 100%;\n        .step-label{\n            max-width: 100%;\n            cursor: auto;\n            align-self: flex-start;\n        }\n        \n        &.indicator-left {\n            align-items: flex-end;\n            text-align: right;\n        }\n        \n        &.indicator-right {\n            align-items: flex-start;\n        }\n    }\n\n    .step-label {\n        max-width: 90%;\n        color: tokens.$ifxColorEngineering400; \n        word-wrap: break-word;\n        &.curr-label{\n            font: tokens.$ifxHeadingHeadingCompact04; \n        }\n        &.next-label{\n            font: tokens.$ifxBodyBody05;\n        }\n        :hover{\n            color: tokens.$ifxColorEngineering400;\n        }\n    }\n\n    \n    &.first-step {\n        .step-connector-l{\n            height: 0px;\n        }\n    }\n    \n    &.last-step{\n        .step-connector-r{\n            height: 0px;\n        }\n    }\n\n    &.vertical {\n        &.first-step .step-connector-l,\n        &.last-step .step-connector-r {\n            width: 0px;\n        }\n    }\n\n    &.complete{\n        .step-connector-l, .step-connector-r, .step-icon {\n            background: tokens.$ifxColorOcean500;\n            &.active, &.error {\n                background: tokens.$ifxColorEngineering400;\n            }\n        }\n        &:not(.disabled) {\n            .step-label{\n                cursor: pointer;\n                color: tokens.$ifxColorBaseBlack;\n                :hover {\n                    color: tokens.$ifxColorOcean600;\n                }\n            }\n        }\n    } \n    \n    &.disabled{\n        .step-connector-l, \n        .step-connector-r, \n        .step-icon {\n            background-color: tokens.$ifxColorEngineering400;\n        }\n        .step-label, \n        .step-label :hover{\n            color: tokens.$ifxColorEngineering400;\n        }\n    }\n    \n    &.active{\n        .step-connector-l, \n        .step-connector-r, \n        .step-icon {\n            background: tokens.$ifxColorOcean500;\n            &.active, \n            &.error {\n                background: tokens.$ifxColorEngineering400;\n            }\n        }\n        .step-label, \n        .step-label :hover{\n            color: tokens.$ifxColorBaseBlack;\n        }\n        &.complete .step-label { \n            cursor: auto;\n        }\n    } \n\n    &.clickable:not(.active) .step-label{\n        cursor: pointer;\n    }\n\n    &.error:not(.active){\n        color: tokens.$ifxColorRed500;\n        .step-label{\n            color: tokens.$ifxColorRed500;\n            :hover{\n                color: tokens.$ifxColorOcean500;\n            }\n        }\n    }\n\n    &.disabled{\n        .step-label{\n            cursor: auto;\n        }\n    }\n\n    &:hover{\n        &.complete:not(.disabled):not(.active){\n            .step-connector-l, \n            .step-connector-r, \n            .step-icon {\n                background: tokens.$ifxColorOcean600;\n                &.active, \n                &.error {\n                    background: tokens.$ifxColorEngineering400;\n                }\n            } \n            .step-label {\n                color: tokens.$ifxColorOcean600;\n            }\n        }\n    }\n    \n}\n\n.active-indic {\n    width: tokens.$ifxSize200;\n    height: tokens.$ifxSize200;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    background: white;\n}\n\n.step-icon-wrapper {\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n}\n\n.step-icon {\n    width: tokens.$ifxSize300;\n    height: tokens.$ifxSize300;\n    background-color: tokens.$ifxColorEngineering400;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n}\n\n.step-connector-r, \n.step-connector-l {\n    height: 2px;\n    min-width: tokens.$ifxSize500;\n    flex-grow: 1;\n    background-color: tokens.$ifxColorEngineering400;\n}\n\n.vertical {\n    .step-connector-r, \n    .step-connector-l {\n        height: unset;\n        min-width: unset;\n        width: 2px;\n        min-height: tokens.$ifxSize500;\n    }\n}","import { h, \n         Component, \n         Listen, \n         Prop, \n         State, \n         Watch } from \"@stencil/core\";\nimport { StepperState } from \"../interfaces\";\n\n@Component({\n    tag: 'ifx-step',\n    styleUrl: 'step.scss',\n    shadow: true\n})\n\nexport class Step {\n    @Prop() complete?: boolean = false;\n    @Prop() disabled?: boolean = false;\n    @Prop({ mutable: true }) error?: boolean = false;\n    @Prop({ reflect: false }) lastStep: boolean = false;\n    @Prop() stepId: number = 1;\n    @Prop({ reflect: false }) stepperState: StepperState = { activeStep: 1, \n                                                             showStepNumber: false, \n                                                             variant: 'default', \n                                                             indicatorPosition: 'left' };\n\n    @State() active: boolean;\n    @State() clickable: boolean = false;\n\n    @Listen('ifxChange', { target: 'document' })\n    onStepChange(event: CustomEvent) {\n        const previousActiveStep = event.detail.previousActiveStep;\n        if (previousActiveStep === this.stepId && this.error) {\n            this.clickable = true;\n        }\n    } \n\n    @Watch('stepperState')\n    updateCurrentStep(newStepperState) {\n        this.active = (newStepperState.activeStep === this.stepId)\n    }\n\n    @Watch('active')\n    updateErrorState(){\n        if (this.active) {\n            this.error = false;\n        }\n    }\n\n\n    handleStepClick() {\n        if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete)) {\n            this.stepperState.setActiveStep(this.stepId, true)\n        } \n    }\n    \n    handleStepKeyDown(event: KeyboardEvent) {\n        if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete) && event.key === 'Enter') {\n            this.stepperState.setActiveStep(this.stepId, true)\n        } \n    }\n    \n    stopOnClickPropogation(event: Event) {\n        if (this.disabled) {\n            event.stopPropagation();\n        }\n    }\n\n    render() {\n        return (\n            <div aria-current = {this.active ? 'step': false}\n                aria-disabled = {this.active || this.complete ? false : true}\n                onClick={ (e) => this.stopOnClickPropogation(e) }\n                class = {`step-wrapper ${this.stepId === 1 ? 'first-step': ''} \n                        ${this.error ? 'error': ''}\n                        ${this.stepperState.variant}\n                        ${this.complete ? 'complete': ''}\n                        ${this.lastStep ? 'last-step': ''}\n                        indicator-${this.stepperState.indicatorPosition}\n                        ${this.active ? 'active' : ''}\n                        ${this.clickable ? 'clickable' : ''}\n                        ${this.disabled ? 'disabled': ''}`}>\n\n                <div class = 'step-icon-wrapper'>\n                    {/* Left connector */}\n                    {this.stepperState.variant !== 'compact' && <span class = 'step-connector-l'/>}\n\n                    {\n                        (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) && \n                        <div class = 'step-icon'>\n                            {(this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : ''}\n                            {(this.complete && !this.active) && <ifx-icon icon='check16'></ifx-icon>}\n                            {this.active && <span class = 'active-indic'></span>}\n                        </div>\n                    }\n\n                    {(this.stepperState.variant !=='compact' && this.error && !this.active) && <ifx-icon icon='warningf24'></ifx-icon>}\n                    \n                    {/* Right connector */}\n                    {this.stepperState.variant !== 'compact' && <span class = {`step-connector-r ${this.active ? 'active' : ''}`}/>}\n                </div>\n\n                {\n                    /* Step labels */\n                    (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep+1))) && \n                    <div tabIndex={!this.disabled && this.complete && !this.active ? 0 : -1} \n                        class = {`step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`} \n                        onClick={() => { this.handleStepClick() }} \n                        onKeyDown={(e) => { this.handleStepKeyDown(e) }}>\n\n                        {(this.stepperState.variant !== 'compact') && <slot/>}\n\n                        {this.stepperState.variant === 'compact' &&  !this.active  ? 'Next: ' : ''}\n                        {this.stepperState.variant === 'compact' && <slot/>}\n                    </div>\n                }\n\n            </div>\n        );\n    };\n}\n"],"mappings":"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","ignoreList":[]}