{"version":3,"file":"product-steps-section-xxxxxxxxxxxxxxxxxxxx.min.js","mappings":"yBAaA,MAAMA,wBAAwBC,YAuBrB,iBAAAC,GACLC,KAAKC,uBACLD,KAAKE,QACP,CAEQ,oBAAAD,GACDD,KAAKG,aACRH,KAAKI,aAAa,CAAEC,KAAM,SAC1BL,KAAKG,WAAWG,UAAY,q/BAEhC,CAEQ,MAAAJ,GACN,MAAMK,EAAYP,KAAKG,WAAWK,cAAc,OAChDD,EAAUE,IAAMT,KAAKU,QAAQC,SAC7BJ,EAAUK,IAAM,QAAQZ,KAAKU,QAAQG,OAEdb,KAAKG,WAAWK,cAAc,MACtCM,YAAcd,KAAKU,QAAQG,KAExBb,KAAKG,WAAWK,cAAc,MACtCM,YAAcd,KAAKU,QAAQK,MAEbf,KAAKG,WAAWK,cAAc,KACtCM,YAAcd,KAAKU,QAAQM,WAC7C,EASGC,eAAeC,IAAI,sBACtBD,eAAeE,OAAO,oBAAqBtB,iBChE7C,MAAMuB,yBAAyBtB,YAMtB,iBAAAC,GACLC,KAAKC,sBACP,CAEQ,oBAAAA,GACDD,KAAKG,aACRH,KAAKI,aAAa,CAAEC,KAAM,SAC1BL,KAAKG,WAAWG,UAAY,weAEhC,EASGW,eAAeC,IAAI,uBACtBD,eAAeE,OAAO,qBAAsBC","sources":["webpack://lange/./scripts/sections/product-steps/product-step/index.ts","webpack://lange/./scripts/sections/product-steps/product-steps/index.ts"],"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 <figure> in this context. Also, I think it will be better to not have a number in\n *  markup but use <ol> 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  declare 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 connectedCallback() {\n    this.initializeShadowRoot();\n    this.render();\n  }\n\n  private initializeShadowRoot() {\n    if (!this.shadowRoot) {\n      this.attachShadow({ mode: 'open' });\n      this.shadowRoot.innerHTML = `<style>${styles}</style>${html}`;\n    }\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","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 <ofir-product-step>s.\n */\nclass OfirProductSteps extends HTMLElement implements CustomElement {\n  // TODO This components doesn't do anything right now, it just has styling and a lot. I think it's\n  // redundant and we can just use light DOM element instead of creating a web component. For now,\n  // we need to disable the no-empty connectedCallback linting rule because the CustomElement\n  // interface requires it.\n\n  public connectedCallback() {\n    this.initializeShadowRoot();\n  }\n\n  private initializeShadowRoot() {\n    if (!this.shadowRoot) {\n      this.attachShadow({ mode: 'open' });\n      this.shadowRoot.innerHTML = `<style>${styles}</style>${html}`;\n    }\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"],"names":["OfirProductStep","HTMLElement","connectedCallback","this","initializeShadowRoot","render","shadowRoot","attachShadow","mode","innerHTML","imageElem","querySelector","src","dataset","imageSrc","alt","step","textContent","title","description","customElements","get","define","OfirProductSteps"],"sourceRoot":""}