{"version":3,"names":["CSS","arrow","arrowStroke","DEFAULTS","width","height","strokeWidth","FloatingArrow","floatingLayout","key","ref","svgX","isVertical","dValue","h","class","viewBox","d","fill","stroke"],"sources":["src/components/functional/FloatingArrow.tsx"],"sourcesContent":["import { FunctionalComponent, h, VNode } from \"@stencil/core\";\nimport { JSXAttributes } from \"@stencil/core/internal\";\nimport { FloatingLayout } from \"../../utils/floating-ui\";\n\ninterface FloatingArrowProps extends JSXAttributes<SVGSVGElement> {\n  floatingLayout: FloatingLayout;\n}\n\nconst CSS = {\n  arrow: \"calcite-floating-ui-arrow\",\n  arrowStroke: \"calcite-floating-ui-arrow__stroke\",\n};\n\nconst DEFAULTS = {\n  width: 12,\n  height: 6,\n  strokeWidth: 1,\n};\n\n/**\n * Renders a SVG element to be used as a floating-ui arrow.\n *\n * This functional component should be rendered inside a `FloatingUIComponent` when it needs an arrow element.\n *\n * @param floatingLayout.floatingLayout\n * @param floatingLayout – The effective floating layout to render the arrow vertically or horizontally. Possible values: `vertical` or `horizontal`.\n *\n * See [floating-ui](https://github.com/Esri/calcite-design-system/blob/dev/src/utils/floating-ui.ts)\n * @param floatingLayout.key\n * @param floatingLayout.ref\n */\nexport const FloatingArrow: FunctionalComponent<FloatingArrowProps> = ({\n  floatingLayout,\n  key,\n  ref,\n}): VNode => {\n  const { width, height, strokeWidth } = DEFAULTS;\n  const svgX = width / 2;\n  const isVertical = floatingLayout === \"vertical\";\n\n  const dValue =\n    \"M0,0\" +\n    ` H${width}` +\n    ` L${width - svgX},${height}` +\n    ` Q${svgX},${height} ${svgX},${height}` +\n    \" Z\";\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      class={CSS.arrow}\n      height={width}\n      key={key}\n      ref={ref}\n      viewBox={`0 0 ${width} ${width + (!isVertical ? strokeWidth : 0)}`}\n      width={width + (isVertical ? strokeWidth : 0)}\n    >\n      {strokeWidth > 0 && (\n        <path\n          class={CSS.arrowStroke}\n          d={dValue}\n          fill=\"none\"\n          // Account for the stroke on the fill path rendered below.\n          stroke-width={strokeWidth + 1}\n        />\n      )}\n      {/* In Firefox, for left/right placements there's a ~0.5px gap where the\n  border can show through. Adding a stroke on the fill removes it. */}\n      <path d={dValue} stroke=\"none\" />\n    </svg>\n  );\n};\n"],"mappings":";;;;;oCAQA,MAAMA,EAAM,CACVC,MAAO,4BACPC,YAAa,qCAGf,MAAMC,EAAW,CACfC,MAAO,GACPC,OAAQ,EACRC,YAAa,G,MAeFC,EAAyD,EACpEC,iBACAC,MACAC,UAEA,MAAMN,MAAEA,EAAKC,OAAEA,EAAMC,YAAEA,GAAgBH,EACvC,MAAMQ,EAAOP,EAAQ,EACrB,MAAMQ,EAAaJ,IAAmB,WAEtC,MAAMK,EACJ,OACA,KAAKT,IACL,KAAKA,EAAQO,KAAQN,IACrB,KAAKM,KAAQN,KAAUM,KAAQN,IAC/B,KAEF,OACES,EAAA,qBACc,OACZC,MAAOf,EAAIC,MACXI,OAAQD,EACRK,IAAKA,EACLC,IAAKA,EACLM,QAAS,OAAOZ,KAASA,IAAUQ,EAAaN,EAAc,KAC9DF,MAAOA,GAASQ,EAAaN,EAAc,IAE1CA,EAAc,GACbQ,EAAA,QACEC,MAAOf,EAAIE,YACXe,EAAGJ,EACHK,KAAK,OAAM,eAEGZ,EAAc,IAKhCQ,EAAA,QAAMG,EAAGJ,EAAQM,OAAO,SACpB,S","ignoreList":[]}