@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
27 lines (26 loc) • 1.29 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 { ref } from "lit-html/directives/ref.js";
import { keyed } from "lit-html/directives/keyed.js";
import { nothing, svg, html } from "lit-html";
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
};