{"version":3,"file":"product-steps-section-xxxxxxxxxxxxxxxxxxxx.min.js","mappings":"yBAaA,MAAMA,wBAAwBC,YAyB5BC,WAAAA,GACEC,QACAC,KAAKC,aAAa,CAAEC,KAAM,SAC1BF,KAAKG,WAAWC,UAAY,UAAHC,OCzC7B,s4BDyCgD,YAAAA,OExCrC,mGFyCT,CAEOC,iBAAAA,GACLN,KAAKO,QACP,CAEQA,MAAAA,GACN,MAAMC,EAAYR,KAAKG,WAAWM,cAAc,OAChDD,EAAUE,IAAMV,KAAKW,QAAQC,SAC7BJ,EAAUK,IAAM,QAAHR,OAAWL,KAAKW,QAAQG,MAEdd,KAAKG,WAAWM,cAAc,MACtCM,YAAcf,KAAKW,QAAQG,KAExBd,KAAKG,WAAWM,cAAc,MACtCM,YAAcf,KAAKW,QAAQK,MAEbhB,KAAKG,WAAWM,cAAc,KACtCM,YAAcf,KAAKW,QAAQM,WAC7C,EASGC,eAAeC,IAAI,sBACtBD,eAAeE,OAAO,oBAAqBxB,iBGhE7C,MAAMyB,yBAAyBxB,YAStBS,iBAAAA,GAAqB,CAE5BR,WAAAA,GACEC,QACAC,KAAKC,aAAa,CAAEC,KAAM,SAC1BF,KAAKG,WAAWC,UAAY,UAAHC,OCrB7B,4cDqBgD,YAAAA,OEpBrC,gBFqBT,EASGa,eAAeC,IAAI,uBACtBD,eAAeE,OAAO,qBAAsBC,iB","sources":["webpack://lange/./scripts/sections/product-steps/product-step/index.ts","webpack://lange/./scripts/sections/product-steps/product-step/index.scss","webpack://lange/./scripts/sections/product-steps/product-step/index.html","webpack://lange/./scripts/sections/product-steps/product-steps/index.ts","webpack://lange/./scripts/sections/product-steps/product-steps/index.scss","webpack://lange/./scripts/sections/product-steps/product-steps/index.html"],"sourcesContent":["import type { CustomElement } from '@integrabeauty/custom-elements';\nimport html from './index.html';\nimport styles from './index.scss';\n\n/** TODO This component should be refactored for better accessibility. Markup is incorrect. We\n * shouldn't use
in this context. Also, I think it will be better to not have a number in\n * markup but use
    for the list of steps and use CSS counter. The level of the step's title\n * should be h3 and no other headings.\n */\n\n/**\n * Renders a product usage step card\n */\nclass OfirProductStep extends HTMLElement implements CustomElement {\n readonly dataset!: {\n /**\n * Description of the product usage at this step\n */\n description: string;\n\n /**\n * The image source URL\n */\n imageSrc: string;\n\n /**\n * The numerical step of this instance\n */\n step: string;\n\n /**\n * Heading/title of the current step\n */\n title: string;\n };\n\n public shadowRoot!: ShadowRoot;\n\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n this.shadowRoot.innerHTML = `${html}`;\n }\n\n public connectedCallback() {\n this.render();\n }\n\n private render() {\n const imageElem = this.shadowRoot.querySelector('img');\n imageElem.src = this.dataset.imageSrc;\n imageElem.alt = `Step ${this.dataset.step}`;\n\n const stepNumberElem = this.shadowRoot.querySelector('h3');\n stepNumberElem.textContent = this.dataset.step;\n\n const titleElem = this.shadowRoot.querySelector('h4');\n titleElem.textContent = this.dataset.title;\n\n const descriptionElem = this.shadowRoot.querySelector('p');\n descriptionElem.textContent = this.dataset.description;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ofir-product-step': OfirProductStep;\n }\n}\n\nif (!customElements.get('ofir-product-step')) {\n customElements.define('ofir-product-step', OfirProductStep);\n}\n","export default \"*,:after,:before{box-sizing:border-box;font-size:2rem;font-weight:600;letter-spacing:.038px;line-height:2rem;margin:0;padding:0}@media screen and (min-width:1024px){*,:after,:before{font-size:2.5rem;letter-spacing:.048px;line-height:2.5rem}}:host{display:block}figure{display:block}img{margin-bottom:24px;width:100%}figcaption{display:flex;padding-bottom:24px}@media screen and (max-width:768px){figcaption{padding:0 16px 24px}}h3{margin-right:16px;width:40px}.text{flex:1;padding-right:16px}h4{margin-bottom:16px}h3,h4{font-size:2rem;font-weight:700;letter-spacing:.038px;line-height:2rem}@media screen and (max-width:1024px){h3,h4{font-size:1.5rem!important;letter-spacing:.029px!important;line-height:1.5rem!important}}p{font-size:1rem;font-weight:300;letter-spacing:.019px;line-height:1.5rem}@media screen and (min-width:1024px){p{font-size:1.125rem;letter-spacing:.022px;line-height:1.6875rem}}\";","// Module\nvar code = \"

    \";\n// Exports\nexport default code;","import type { CustomElement } from '@integrabeauty/custom-elements';\nimport html from './index.html';\nimport styles from './index.scss';\n\n/**\n * Renders a wrapper for the s.\n */\nclass OfirProductSteps extends HTMLElement implements CustomElement {\n public shadowRoot!: ShadowRoot;\n\n // TODO This components doesn't do anything right now, it just has styling and a lot. I think\n // it's redundant and we can just use light DOM element instead of creating a web component. For\n // now, we need to disable the no-empty connectedCallback linting rule because the CustomElement\n // interface requires it.\n\n // eslint-disable-next-line @typescript-eslint/class-methods-use-this\n public connectedCallback() {}\n\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n this.shadowRoot.innerHTML = `${html}`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ofir-product-steps': OfirProductSteps;\n }\n}\n\nif (!customElements.get('ofir-product-steps')) {\n customElements.define('ofir-product-steps', OfirProductSteps);\n}\n","export default \":host{display:block}@media only screen and (min-width:768px){:host{display:grid;gap:40px 16px;grid-template-columns:repeat(2,minmax(0,1fr));margin-left:auto;margin-right:auto;max-width:704px}}@media only screen and (min-width:1280px){:host{grid-template-columns:repeat(4,minmax(0,1fr));max-width:unset}}:host([data-add-bottom-margin=true]){margin-bottom:16px}@media only screen and (min-width:992px){:host([data-add-bottom-margin=true]){margin-bottom:32px}}\";","// Module\nvar code = \"\";\n// Exports\nexport default code;"],"names":["OfirProductStep","HTMLElement","constructor","super","this","attachShadow","mode","shadowRoot","innerHTML","concat","connectedCallback","render","imageElem","querySelector","src","dataset","imageSrc","alt","step","textContent","title","description","customElements","get","define","OfirProductSteps"],"sourceRoot":""}