{"version":3,"names":["sewWsCareerSlideCss","SewWsCareerSlide","wrapDigits","value","stringArray","split","map","char","h","render","Host","key","class","this","active","description"],"sources":["src/components/website-components/sew-ws-career-slide/sew-ws-career-slide.scss?tag=sew-ws-career-slide&encapsulation=shadow","src/components/website-components/sew-ws-career-slide/sew-ws-career-slide.tsx"],"sourcesContent":["/* calculate pixels */\n@function calc-px($value-in-px) {\n    @return calc($value-in-px / 584 * var(--slide-width) * 1px);\n}\n\n:host {\n    background-color: $color-grey-01-dark;\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    justify-content: center;\n    opacity: 0;\n    overflow: hidden;\n    position: absolute;\n    width: 100%;\n    z-index: 1;\n    top: 0;\n    left: 0;\n}\n\n:host(.--active) {\n    opacity: 1;\n    z-index: 2;\n\n    .line-top,\n    .line-bottom {\n        background-color: $color-white;\n        width: 100%;\n    }\n\n    .value,\n    .description {\n        color: $color-white;\n    }\n\n    .line-top,\n    .line-bottom,\n    .value,\n    .description {\n        margin-left: calc-px(60);\n        position: relative;\n        top: 100%;\n    }\n\n    .line-top {\n        animation: sliderAnimation 3s forwards ease-in-out;\n        height: calc-px(5);\n    }\n\n    .value {\n        display: flex;\n        font-family: 'Helvetica Now Text Bold', sans-serif;\n        font-size: calc-px(120);\n        height: 100%;\n        justify-content: flex-end;\n        right: calc-px(78);\n        line-height: calc-px(120);\n        top: 0;\n        margin-left: 0;\n        position: absolute;\n        width: 100%;\n\n        span {\n            animation: sliderAnimation 3s 0.3s forwards ease-in-out;\n            margin-top: calc-px(88);\n            position: relative;\n            top: 100%;\n\n            &:nth-child(1) {\n                animation-delay: 0.3s;\n            }\n\n            &:nth-child(2) {\n                animation-delay: 0.35s;\n            }\n\n            &:nth-child(3) {\n                animation-delay: 0.4s;\n            }\n\n            &:nth-child(4) {\n                animation-delay: 0.45s;\n            }\n\n            &:nth-child(5) {\n                animation-delay: 0.5s;\n            }\n\n            &:nth-child(6) {\n                animation-delay: 0.55s;\n            }\n\n            &:nth-child(7) {\n                animation-delay: 0.6s;\n            }\n\n            &:nth-child(8) {\n                animation-delay: 0.65s;\n            }\n\n            &:nth-child(9) {\n                animation-delay: 0.7s;\n            }\n        }\n    }\n\n    .description {\n        font-family: 'Helvetica Now Text Medium', sans-serif;\n        animation: sliderAnimation 3s 0.6s forwards ease-in-out;\n        display: flex;\n        flex-direction: column;\n        font-size: calc-px(22);\n        line-height: calc-px(40);\n        margin-top: calc-px(24);\n        padding-right: calc-px(84);\n        text-align: right;\n\n        &::before {\n            content: '123';\n            font-size: calc-px(120);\n            line-height: calc-px(120);\n            opacity: 0;\n        }\n    }\n\n    .line-bottom {\n        animation: sliderAnimation 3s 0.9s forwards ease-in-out;\n        height: 1px;\n        margin-top: calc-px(40);\n    }\n}\n\n@keyframes sliderAnimation {\n    0% {\n        opacity: 0;\n        top: 100%;\n    }\n\n    25% {\n        opacity: 1;\n        top: 0;\n    }\n\n    75% {\n        opacity: 1;\n        top: 0;\n    }\n\n    100% {\n        opacity: 0;\n        top: -100%;\n    }\n}\n\n@keyframes sliderAnimationTopContent {\n    from {\n        opacity: 1;\n    }\n\n    to {\n        opacity: 0;\n        transform: translateY(-100px);\n    }\n}\n","import { Component, h, Prop, Host, Element } from '@stencil/core';\n\n@Component({\n    tag: 'sew-ws-career-slide',\n    styleUrl: 'sew-ws-career-slide.scss',\n    shadow: true,\n})\nexport class SewWsCareerSlide {\n    @Element() host: HTMLSewWsCareerSlideElement;\n    @Prop() value: string;\n    @Prop() description: string;\n    @Prop() active: boolean;\n\n    private wrapDigits(value: string) {\n        const stringArray = value.split('');\n\n        return stringArray.map(char => {\n            return <span>{char}</span>;\n        });\n    }\n\n    render() {\n        return (\n            <Host class={{ '--active': this.active }}>\n                <div class=\"line-top\"></div>\n                <div class=\"value\">{this.wrapDigits(this.value)}</div>\n                <div class=\"description\">{this.description}</div>\n                <div class=\"line-bottom\"></div>\n            </Host>\n        );\n    }\n}\n"],"mappings":"yDAAA,MAAMA,EAAsB,6xF,MCOfC,EAAgB,M,yBAMjB,UAAAC,CAAWC,GACf,MAAMC,EAAcD,EAAME,MAAM,IAEhC,OAAOD,EAAYE,KAAIC,GACZC,EAAA,YAAOD,I,CAItB,MAAAE,GACI,OACID,EAACE,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAAE,WAAYC,KAAKC,SAC5BN,EAAK,OAAAG,IAAA,2CAAAC,MAAM,aACXJ,EAAA,OAAAG,IAAA,2CAAKC,MAAM,SAASC,KAAKX,WAAWW,KAAKV,QACzCK,EAAA,OAAAG,IAAA,2CAAKC,MAAM,eAAeC,KAAKE,aAC/BP,EAAA,OAAAG,IAAA,2CAAKC,MAAM,gB","ignoreList":[]}