@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
67 lines (66 loc) • 5.55 kB
JavaScript
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
v3.2.1 */
import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
import { html } from "lit-html";
import { ref } from "lit-html/directives/ref.js";
import { literal, html as html$1 } from "lit-html/static.js";
import { LitElement, stringOrBoolean, safeClassMap, nothing } from "@arcgis/lumina";
import { b as focusElement, g as getElementDir } from "../../chunks/dom.js";
import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
import { c as componentFocusable } from "../../chunks/component.js";
import { css } from "@lit/reactive-element/css-tag.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,:host span{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:0;border-style:none;font-family:inherit;text-decoration:none;line-height:inherit;font-size:inherit;-webkit-appearance:none;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}:host a:hover,:host span:hover{text-decoration:none}:host a,:host span{outline-color:transparent}:host a:focus,:host span:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}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 span,:host a{position:relative;display:inline;border-style:none;background-color:transparent;padding:0;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,no-repeat;background-size:0% 1px,100% 1px}:host span:hover,:host span:focus,:host a:hover,:host a:focus{background-size:100% 1px,100% 1px}:host span:active,:host a:active{background-size:100% 2px,100% 2px}:host span.calcite--rtl,:host a.calcite--rtl{background-position:100% 100%,100% 100%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
class Link extends LitElement {
constructor() {
super();
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, {}, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, {}, { reflect: true }], rel: 1, target: 1 };
}
static {
this.styles = styles;
}
async setFocus() {
await componentFocusable(this);
focusElement(this.childEl);
}
updated() {
updateHostInteraction(this);
}
clickHandler(event) {
if (this.disabled) {
return;
}
if (!event.isTrusted) {
this.childEl.click();
}
}
childElClickHandler(event) {
if (!event.isTrusted) {
event.stopPropagation();
}
}
storeTagRef(el) {
this.childEl = el;
}
render() {
const { download, el } = this;
const dir = getElementDir(el);
const childElType = this.href ? "a" : "span";
const iconStartEl = html`<calcite-icon class="calcite-link--icon icon-start" .flipRtl=${this.iconFlipRtl === "start" || this.iconFlipRtl === "both"} .icon=${this.iconStart} scale=s></calcite-icon>`;
const iconEndEl = html`<calcite-icon class="calcite-link--icon icon-end" .flipRtl=${this.iconFlipRtl === "end" || this.iconFlipRtl === "both"} .icon=${this.iconEnd} scale=s></calcite-icon>`;
const DynamicHtmlTag = childElType === "span" ? literal`span` : literal`a`;
const role = childElType === "span" ? "link" : null;
const tabIndex = childElType === "span" ? 0 : null;
this.el.role = "presentation";
return InteractiveContainer({ disabled: this.disabled, children: html$1`<${DynamicHtmlTag} class=${safeClassMap({ [CSS_UTILITY.rtl]: dir === "rtl" })} download=${(childElType === "a" ? download === true || download === "" ? "" : download || null : null) ?? nothing} href=${(childElType === "a" && this.href) ?? nothing} @click=${this.childElClickHandler} rel=${(childElType === "a" && this.rel) ?? nothing} .role=${role} tabindex=${tabIndex ?? nothing} target=${(childElType === "a" && this.target) ?? nothing} ${ref(this.storeTagRef)}>${html`${this.iconStart ? iconStartEl : null}<slot></slot>${this.iconEnd ? iconEndEl : null}`}</${DynamicHtmlTag}>` });
}
}
customElement("calcite-link", Link);
export {
Link
};