{"version":3,"file":"hoverable-image-element-section-xxxxxxxxxxxxxxxxxxxx.min.js","mappings":"yBASA,MAAMA,uBAAuBC,YACpB,iBAAAC,GACLC,KAAKC,sBACP,CAEQ,oBAAAA,GACDD,KAAKE,aACRF,KAAKG,aAAa,CAAEC,KAAM,SAC1BJ,KAAKE,WAAWG,UAAY,8QAEhC,EASGC,eAAeC,IAAI,oBACtBD,eAAeE,OAAO,kBAAmBX","sources":["webpack://lange/./scripts/sections/hoverable-image-element/hoverable-image/index.ts"],"sourcesContent":["import type { CustomElement } from '@integrabeauty/custom-elements';\nimport html from './index.html';\nimport styles from './index.scss';\n\n/**\n * A custom element that handles image change on hover. To prevent layout shift and hoverable image\n * flashing at page load, ensure that the slotted hoverable image is hidden in the light DOM. The\n * hover effect is handled purely by CSS.\n */\nclass HoverableImage extends HTMLElement implements CustomElement {\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    'hoverable-image': HoverableImage;\n  }\n}\n\nif (!customElements.get('hoverable-image')) {\n  customElements.define('hoverable-image', HoverableImage);\n}\n"],"names":["HoverableImage","HTMLElement","connectedCallback","this","initializeShadowRoot","shadowRoot","attachShadow","mode","innerHTML","customElements","get","define"],"sourceRoot":""}