import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { d as defineCustomElement$5 } from './telia-link2.js';
import { d as defineCustomElement$4 } from './telia-style-link2.js';
import { d as defineCustomElement$3 } from './telia-visually-hidden2.js';
import { d as defineCustomElement$2 } from './telia-vst2.js';

const teliaLinkImageCss = ".telia-link-image:hover{color:#5e0092}.telia-link-image:active{color:#30004b}.telia-link-image__slotwrapper{display:inline-block}.telia-link-image__slotwrapper--ensure-click-area{align-items:center;display:flex;justify-content:center;min-height:calc(4.8rem * var(--voca-rem-multiplier));min-width:calc(4.8rem * var(--voca-rem-multiplier))}.telia-link-image--dark-bg:hover{color:#edc8ff}.telia-link-image--dark-bg:active{color:#de99ff}";

const TeliaLinkImage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    /**
     * Set to true when used on a dark background.
     * This will affect color of the svg when interacting with it.
     */
    this.darkBackground = false;
    /**
     * Disables visited styling, defaults to true. Only some image types
     * support styling with color, which is the technique used here.
     * */
    this.disableVisited = true;
    /**
     * This sets a minimum size on the clickable area of the link. Please note
     * it also changes display value to flex, meaning its container will behave
     * like a block element. You can wrap this component in a flex container
     * for additional layout control.
     */
    this.ensureClickArea = false;
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-link-image';
  }
  render() {
    const componentClass = 'telia-link-image';
    const linkClass = {
      [componentClass]: true,
      [`${componentClass}--dark-bg`]: this.darkBackground,
    };
    const slotWrapperClass = {
      [`${componentClass}__slotwrapper`]: true,
      [`${componentClass}__slotwrapper--ensure-click-area`]: this.ensureClickArea,
    };
    return (h(Host, null, h("telia-link", { silent: true, href: this.htmlHref, "data-testid": this.dataTestid, "link-title": this.linkText, class: linkClass, "disable-visited": this.disableVisited, "dark-background": this.darkBackground }, h("div", { class: slotWrapperClass }, h("slot", null), h("telia-visually-hidden", null, this.linkText))), h("telia-vst", { dataTrackingId: this.dataTrackingId })));
  }
  static get style() { return teliaLinkImageCss; }
}, [1, "telia-link-image", {
    "dataTestid": [1, "data-testid"],
    "linkText": [1, "link-text"],
    "htmlHref": [1, "html-href"],
    "darkBackground": [4, "dark-background"],
    "disableVisited": [4, "disable-visited"],
    "ensureClickArea": [4, "ensure-click-area"]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["telia-link-image", "telia-link", "telia-style-link", "telia-visually-hidden", "telia-vst"];
  components.forEach(tagName => { switch (tagName) {
    case "telia-link-image":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, TeliaLinkImage$1);
      }
      break;
    case "telia-link":
      if (!customElements.get(tagName)) {
        defineCustomElement$5();
      }
      break;
    case "telia-style-link":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "telia-visually-hidden":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "telia-vst":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}
defineCustomElement$1();

const TeliaLinkImage = TeliaLinkImage$1;
const defineCustomElement = defineCustomElement$1;

export { TeliaLinkImage, defineCustomElement };
