{"version":3,"file":"clickable-area-element-section.min.js","mappings":"yBA4BA,MAAMA,sBAAsBC,YAC1B,6BAAkBC,GAChB,MAAO,CACL,WAEJ,CAWQC,eAAiBC,KAAKC,UAAUC,KAAKF,MAEtC,iBAAAG,GACLH,KAAKI,uBACLJ,KAAKK,iBAAiB,QAASL,KAAKD,eACtC,CAEO,oBAAAO,GACLN,KAAKO,oBAAoB,QAASP,KAAKD,eACzC,CAEQ,oBAAAK,GACDJ,KAAKQ,aACRR,KAAKS,aAAa,CAAEC,KAAM,OAAQC,gBAAgB,IAClDX,KAAKQ,WAAWI,UAAY,8LAEhC,CAEQ,SAAAX,CAAUY,GACZb,KAAKc,QAAQC,MACfC,SAASC,KAAOjB,KAAKc,QAAQC,IAEjC,EAYGG,eAAeC,IAAI,mBACtBD,eAAeE,OAAO,iBAAkBxB","sources":["webpack://lange/./sections/clickable-area-element/clickable-area/index.ts"],"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 cases, where the\n * <a> element would cause difficulties to accessibility.\n *\n * This element should be used in cases where links with the same `href` and the same accessible\n * text are duplicated for some reason. One such example is a product card. We have a product title\n * wrapped in a link to the product page, and next to it we have a product image with the same\n * target. This causes 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 has a role of\n * `presentation`. It is also not a real HTML link (&lt;a&gt;). This means it will be completely\n * invisible to the assistive technology while offering a possibility for mouse/touchscreen users to\n * have a bigger area they can click on.\n *\n * #### When not to use this component\n * It should never be used when the slotted content contains information that's not repeated nearby.\n * In other words it should never be used if this would cause to hide information and/or\n * functionality from users 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 the element.\n */\nclass ClickableArea extends HTMLElement implements CustomElement {\n  public static get observedAttributes() {\n    return [\n      'data-url'\n    ];\n  }\n\n  declare 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  public connectedCallback() {\n    this.initializeShadowRoot();\n    this.addEventListener('click', this.onClickedBound);\n  }\n\n  public disconnectedCallback() {\n    this.removeEventListener('click', this.onClickedBound);\n  }\n\n  private initializeShadowRoot() {\n    if (!this.shadowRoot) {\n      this.attachShadow({ mode: 'open', delegatesFocus: true });\n      this.shadowRoot.innerHTML = `<style>${styles}</style>${html}`;\n    }\n  }\n\n  private onClicked(_event: MouseEvent) {\n    if (this.dataset.url) {\n      location.href = this.dataset.url;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'clickable-area': ClickableArea;\n  }\n}\n\n// This module is included in a section that is loaded multiple times, so we need to handle\n// idempotency by checking whether the element is defined.\n\nif (!customElements.get('clickable-area')) {\n  customElements.define('clickable-area', ClickableArea);\n}\n"],"names":["ClickableArea","HTMLElement","observedAttributes","onClickedBound","this","onClicked","bind","connectedCallback","initializeShadowRoot","addEventListener","disconnectedCallback","removeEventListener","shadowRoot","attachShadow","mode","delegatesFocus","innerHTML","_event","dataset","url","location","href","customElements","get","define"],"sourceRoot":""}