{"version":3,"file":"clickable-area-element-section-xxxxxxxxxxxxxxxxxxxx.min.js","mappings":"yBAiCA,MAAMA,sBAAsBC,YAC1B,6BAAkBC,GAChB,MAAO,CACL,WAEJ,CAaAC,WAAAA,GACEC,QAAQ,KAHFC,eAAiBC,KAAKC,UAAUC,KAAKF,MAI3CA,KAAKG,aAAa,CAAEC,KAAM,SAC1BJ,KAAKK,WAAWC,UAAY,UAAHC,OCtD7B,2FDsDgD,YAAAA,OErDrC,uFFsDT,CAEOC,iBAAAA,GACLR,KAAKS,QACP,CAEOC,oBAAAA,GACL,MAAMC,EAAYX,KAAKK,WAAWO,cAAc,sBACvC,MAATD,GAAAA,EAAWE,oBAAoB,QAASb,KAAKD,eAC/C,CAEQU,MAAAA,GACYT,KAAKK,WAAWO,cAAc,sBACtCE,iBAAiB,QAASd,KAAKD,eAC3C,CAEQE,SAAAA,CAAUc,GACZf,KAAKgB,QAAQC,MACfC,OAAOC,SAASC,KAAOpB,KAAKgB,QAAQC,IAExC,EASGI,eAAeC,IAAI,mBACtBD,eAAeE,OAAO,iBAAkB7B,c","sources":["webpack://lange/./scripts/sections/clickable-area-element/clickable-area/index.ts","webpack://lange/./scripts/sections/clickable-area-element/clickable-area/index.scss","webpack://lange/./scripts/sections/clickable-area-element/clickable-area/index.html"],"sourcesContent":["import type { CustomElement } from '@integrabeauty/custom-elements';\nimport html from './index.html';\nimport styles from './index.scss';\n\n/**\n * ClickableArea works like an <a> element, but should be used for very specific\n * cases, where the <a> element would cause difficulties to accessibility.\n *\n * This element should be used in cases where links with the same `href` and\n * the same accessible text are duplicated for some reason. One such example\n * is a product card. We have a product title wrapped in a link to the product\n * page, and next to it we have a product image with the same target. This causes\n * an accessibility problem because we shouldn't have any of the following:\n * - a link with no accessible title (`img alt` would be the accessible title here)\n * - a decorative image having non-empty alt\n * - two links with the same title (and the same target)\n * - non-clickable image\n *\n * ClickableArea is a workaround for this situation. It is not focusable and\n * has a role of `presentation`. It is also not a real HTML link (<a>).\n * This means it will be completely invisible to the assistive technology\n * while offering a possibility for mouse/touchscreen users to have a bigger\n * are they can click on.\n *\n * When not to use this component:\n *\n * It should never be used when the slotted content contains information\n * that's not repeated nearby. In other words it should never be used if\n * this would cause to hide information and/or functionality from users\n * with disabilities. This means it should also never be used when there\n * are no other links to the clickable-area url in a close proximity of\n * the element.\n */\nclass ClickableArea extends HTMLElement implements CustomElement {\n  public static get observedAttributes() {\n    return [\n      'data-url'\n    ];\n  }\n\n  readonly dataset!: {\n    /**\n     * Absolute or relative URL to the target page\n     *\n     * If left empty, the redirect will be disabled\n     */\n    url: string;\n  };\n\n  private onClickedBound = this.onClicked.bind(this);\n\n  constructor() {\n    super();\n    this.attachShadow({ mode: 'open' });\n    this.shadowRoot.innerHTML = `<style>${styles}</style>${html}`;\n  }\n\n  public connectedCallback() {\n    this.render();\n  }\n\n  public disconnectedCallback() {\n    const clickable = this.shadowRoot.querySelector('.clickable-wrapper');\n    clickable?.removeEventListener('click', this.onClickedBound);\n  }\n\n  private render() {\n    const clickable = this.shadowRoot.querySelector('.clickable-wrapper');\n    clickable.addEventListener('click', this.onClickedBound);\n  }\n\n  private onClicked(_event: Event) {\n    if (this.dataset.url) {\n      window.location.href = this.dataset.url;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'clickable-area': ClickableArea;\n  }\n}\n\nif (!customElements.get('clickable-area')) {\n  customElements.define('clickable-area', ClickableArea);\n}\n","export default \":host{cursor:pointer;display:inline}.clickable-wrapper{display:inline;position:relative}\";","// Module\nvar code = \"<div role=\\\"presentation\\\" class=\\\"clickable-wrapper\\\" tabindex=\\\"-1\\\"><slot></slot></div>\";\n// Exports\nexport default code;"],"names":["ClickableArea","HTMLElement","observedAttributes","constructor","super","onClickedBound","this","onClicked","bind","attachShadow","mode","shadowRoot","innerHTML","concat","connectedCallback","render","disconnectedCallback","clickable","querySelector","removeEventListener","addEventListener","_event","dataset","url","window","location","href","customElements","get","define"],"sourceRoot":""}