/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
import { css, html } from "lit";
import { LitElement, stringOrBoolean, nothing, safeClassMap } from "@arcgis/lumina";
import { createRef, ref } from "lit/directives/ref.js";
import { useDirection } from "@arcgis/lumina/controllers";
import { u as useSetFocus } from "../../chunks/useSetFocus.js";
import { u as useInteractive } from "../../chunks/useInteractive.js";
import { i as isActivationKey } from "../../chunks/key.js";
const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline}:host a{cursor:pointer;font-family:inherit;text-decoration-line:none;outline-color:transparent;font-size:inherit;-webkit-appearance:none;color:var(--calcite-link-text-color, var(--calcite-color-text-link));line-height:inherit;white-space:initial;background-image:linear-gradient(currentColor,currentColor),linear-gradient(var(--calcite-color-brand-underline),var(--calcite-color-brand-underline));background-position-x:0 100%;background-position-y:min(1.5em,100%);background-repeat:no-repeat;background-size:0% var(--calcite-border-width-sm),100% var(--calcite-border-width-sm)}:host a:hover,:host a:focus{background-size:100% var(--calcite-border-width-sm),100% var(--calcite-border-width-sm)}:host a:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host a:active{background-size:100% var(--calcite-border-width-md),100% var(--calcite-border-width-md)}:host a:active.calcite--rtl{background-position:100% 100%,100% 100%}:host a{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform,background-size;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}calcite-icon{inline-size:1em;block-size:1em;min-inline-size:unset;min-block-size:unset}.calcite-link--icon{vertical-align:middle;margin-block-start:-.25em}:host .calcite-link--icon.icon-start{margin-inline-end:.5rem}:host .calcite-link--icon.icon-end{margin-inline-start:.5rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
const CSS = {
  calciteLinkIcon: "calcite-link--icon",
  iconStart: "icon-start",
  iconEnd: "icon-end"
};
class Link extends LitElement {
  constructor() {
    super();
    this.anchorRef = createRef();
    this.direction = useDirection();
    this.focusSetter = useSetFocus()(this);
    this.interactiveContainer = useInteractive(this);
    this.keyDownHandler = (event) => {
      if (isActivationKey(event.key)) {
        event.preventDefault();
        this.el.click();
      }
    };
    this.anchorClickHandler = (event) => {
      if (!event.isTrusted) {
        event.stopPropagation();
      }
    };
    this.disabled = false;
    this.download = false;
    this.listen("click", this.clickHandler);
  }
  static {
    this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], download: [3, { converter: stringOrBoolean }, { reflect: true }], href: [3, {}, { reflect: true }], iconEnd: [3, { type: String }, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, { type: String }, { reflect: true }], rel: 1, target: 1 };
  }
  static {
    this.styles = styles;
  }
  async setFocus(options) {
    return this.focusSetter(() => this.anchorRef.value, options);
  }
  clickHandler(event) {
    if (!event.isTrusted) {
      this.anchorRef.value?.click();
    }
  }
  render() {
    const { download } = this;
    const dir = this.direction;
    const actAsButton = !this.href;
    this.el.role = "presentation";
    return this.interactiveContainer({ disabled: this.disabled, children: html`<a class=${safeClassMap({ [CSS_UTILITY.rtl]: dir === "rtl" })} download=${(download === true || download === "" ? "" : download || void 0) ?? nothing} href=${(this.href || void 0) ?? nothing} @click=${this.anchorClickHandler} @keydown=${actAsButton ? this.keyDownHandler : void 0} rel=${this.rel ?? nothing} .role=${actAsButton ? "button" : void 0} tabindex=${(actAsButton ? 0 : void 0) ?? nothing} target=${(this.href ? this.target : void 0) ?? nothing} ${ref(this.anchorRef)}>${html`${this.iconStart ? this.renderIcon("start") : null}<slot></slot>${this.iconEnd ? this.renderIcon("end") : null}`}</a>` });
  }
  renderIcon(position) {
    const isStart = position === "start";
    const icon = isStart ? this.iconStart : this.iconEnd;
    const shouldFlip = this.iconFlipRtl === "both" || this.iconFlipRtl === position;
    return html`<calcite-icon class=${safeClassMap({
      [CSS.calciteLinkIcon]: true,
      [isStart ? CSS.iconStart : CSS.iconEnd]: true
    })} .flipRtl=${shouldFlip} .icon=${icon} scale=s></calcite-icon>`;
  }
}
customElement("calcite-link", Link);
export {
  Link
};
