@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
25 lines (24 loc) • 1.16 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { ref } from "lit/directives/ref.js";
import { keyed } from "lit/directives/keyed.js";
import { nothing, svg, html } from "lit";
import { safeClassMap } from "@arcgis/lumina";
const CSS = {
arrow: "calcite-floating-ui-arrow",
arrowStroke: "calcite-floating-ui-arrow__stroke"
};
const DEFAULTS = {
width: 12,
height: 6,
strokeWidth: 1
};
const FloatingArrow = ({ floatingLayout, key, ref: ref$1 }) => {
const { width, height, strokeWidth } = DEFAULTS;
const svgX = width / 2;
const isVertical = floatingLayout === "vertical";
const dValue = `M0,0 H${width} L${width - svgX},${height} Q${svgX},${height} ${svgX},${height} Z`;
return keyed(key, html`<svg aria-hidden=true class=${safeClassMap(CSS.arrow)} height=${width} viewBox=${`0 0 ${width} ${width + (!isVertical ? strokeWidth : 0)}`} width=${width + (isVertical ? strokeWidth : 0)} ${ref(ref$1)}>${svg`${svg`<path class=${safeClassMap(CSS.arrowStroke)} d=${dValue ?? nothing} fill=none stroke-width=${strokeWidth + 1} />` || ""}<path d=${dValue ?? nothing} stroke=none />`}</svg>`);
};
export {
FloatingArrow as F
};