{"version":3,"file":"hoverable-image-element-section-xxxxxxxxxxxxxxxxxxxx.min.js","mappings":"yBAQA,MAAMA,uBAAuBC,YAG3BC,WAAAA,GACEC,QACAC,KAAKC,aAAa,CAAEC,KAAM,SAC1BF,KAAKG,WAAWC,UAAY,UAAHC,OCd7B,kNDcgD,YAAAA,OEbrC,gDFcT,EASGC,eAAeC,IAAI,oBACtBD,eAAeE,OAAO,kBAAmBZ,e","sources":["webpack://lange/./scripts/sections/hoverable-image-element/hoverable-image/index.ts","webpack://lange/./scripts/sections/hoverable-image-element/hoverable-image/index.scss","webpack://lange/./scripts/sections/hoverable-image-element/hoverable-image/index.html"],"sourcesContent":["import html from './index.html';\nimport styles from './index.scss';\n\n/**\n * A custom element that handles image change on hover.\n * To prevent layout shift and hoverable image flashing at page load, ensure that the slotted\n * hoverable image is hidden in the light DOM.\n */\nclass HoverableImage extends HTMLElement {\n  public shadowRoot!: ShadowRoot;\n\n  constructor() {\n    super();\n    this.attachShadow({ mode: 'open' });\n    this.shadowRoot.innerHTML = `<style>${styles}</style>${html}`;\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","export default \":host{display:block}slot[name=hover-image]{display:none}:host(:hover) slot{display:none}:host(:hover) slot[name=hover-image]{display:block}:host(:hover) ::slotted([slot=hover-image]){display:block!important}\";","// Module\nvar code = \"<slot></slot><slot name=\\\"hover-image\\\"></slot>\";\n// Exports\nexport default code;"],"names":["HoverableImage","HTMLElement","constructor","super","this","attachShadow","mode","shadowRoot","innerHTML","concat","customElements","get","define"],"sourceRoot":""}