{"version":3,"file":"FilterPill.mjs","sources":["../../../../src/components/FilterPill/FilterPill.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { IconName } from '../../types/icon';\nimport { clearButtonStyles } from '../Button/Button';\nimport { Icon } from '../Icon/Icon';\n\nexport interface FilterPillProps {\n  selected: boolean;\n  label: string;\n  onClick: React.MouseEventHandler<HTMLElement>;\n  icon?: IconName;\n}\n\n/**\n * A component used for quick toggling on/off filters. Mostly used in inline form components and transformation/query editors.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-filterpill--docs\n */\nexport const FilterPill = ({ label, selected, onClick, icon = 'check' }: FilterPillProps) => {\n  const styles = useStyles2(getStyles);\n  const clearButton = useStyles2(clearButtonStyles);\n  return (\n    <button type=\"button\" className={cx(clearButton, styles.wrapper, selected && styles.selected)} onClick={onClick}>\n      <span>{label}</span>\n      {selected && <Icon name={icon} className={styles.icon} data-testid=\"filter-pill-icon\" />}\n    </button>\n  );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    wrapper: css({\n      background: theme.colors.background.secondary,\n      borderRadius: theme.shape.radius.pill,\n      padding: theme.spacing(0, 2),\n      fontSize: theme.typography.bodySmall.fontSize,\n      fontWeight: theme.typography.fontWeightMedium,\n      lineHeight: theme.typography.bodySmall.lineHeight,\n      color: theme.colors.text.secondary,\n      display: 'flex',\n      alignItems: 'center',\n      height: '32px',\n      position: 'relative',\n      border: `1px solid ${theme.colors.background.secondary}`,\n      whiteSpace: 'nowrap',\n\n      '&:hover': {\n        background: theme.colors.action.hover,\n        color: theme.colors.text.primary,\n      },\n    }),\n    selected: css({\n      color: theme.colors.text.primary,\n      background: theme.colors.action.selected,\n\n      '&:hover': {\n        background: theme.colors.action.focus,\n      },\n    }),\n    icon: css({\n      marginLeft: theme.spacing(0.5),\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;;AAsBO,MAAM,UAAA,GAAa,CAAC,EAAE,KAAA,EAAO,UAAU,OAAA,EAAS,IAAA,GAAO,SAAQ,KAAuB;AAC3F,EAAA,MAAM,MAAA,GAAS,WAAW,SAAS,CAAA;AACnC,EAAA,MAAM,WAAA,GAAc,WAAW,iBAAiB,CAAA;AAChD,EAAA,uBACE,IAAA,CAAC,QAAA,EAAA,EAAO,IAAA,EAAK,QAAA,EAAS,SAAA,EAAW,EAAA,CAAG,WAAA,EAAa,MAAA,CAAO,OAAA,EAAS,QAAA,IAAY,MAAA,CAAO,QAAQ,GAAG,OAAA,EAC7F,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAM,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,IACZ,QAAA,wBAAa,IAAA,EAAA,EAAK,IAAA,EAAM,MAAM,SAAA,EAAW,MAAA,CAAO,IAAA,EAAM,aAAA,EAAY,kBAAA,EAAmB;AAAA,GAAA,EACxF,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyB;AAC1C,EAAA,OAAO;AAAA,IACL,SAAS,GAAA,CAAI;AAAA,MACX,UAAA,EAAY,KAAA,CAAM,MAAA,CAAO,UAAA,CAAW,SAAA;AAAA,MACpC,YAAA,EAAc,KAAA,CAAM,KAAA,CAAM,MAAA,CAAO,IAAA;AAAA,MACjC,OAAA,EAAS,KAAA,CAAM,OAAA,CAAQ,CAAA,EAAG,CAAC,CAAA;AAAA,MAC3B,QAAA,EAAU,KAAA,CAAM,UAAA,CAAW,SAAA,CAAU,QAAA;AAAA,MACrC,UAAA,EAAY,MAAM,UAAA,CAAW,gBAAA;AAAA,MAC7B,UAAA,EAAY,KAAA,CAAM,UAAA,CAAW,SAAA,CAAU,UAAA;AAAA,MACvC,KAAA,EAAO,KAAA,CAAM,MAAA,CAAO,IAAA,CAAK,SAAA;AAAA,MACzB,OAAA,EAAS,MAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,MAAA,EAAQ,MAAA;AAAA,MACR,QAAA,EAAU,UAAA;AAAA,MACV,MAAA,EAAQ,CAAA,UAAA,EAAa,KAAA,CAAM,MAAA,CAAO,WAAW,SAAS,CAAA,CAAA;AAAA,MACtD,UAAA,EAAY,QAAA;AAAA,MAEZ,SAAA,EAAW;AAAA,QACT,UAAA,EAAY,KAAA,CAAM,MAAA,CAAO,MAAA,CAAO,KAAA;AAAA,QAChC,KAAA,EAAO,KAAA,CAAM,MAAA,CAAO,IAAA,CAAK;AAAA;AAC3B,KACD,CAAA;AAAA,IACD,UAAU,GAAA,CAAI;AAAA,MACZ,KAAA,EAAO,KAAA,CAAM,MAAA,CAAO,IAAA,CAAK,OAAA;AAAA,MACzB,UAAA,EAAY,KAAA,CAAM,MAAA,CAAO,MAAA,CAAO,QAAA;AAAA,MAEhC,SAAA,EAAW;AAAA,QACT,UAAA,EAAY,KAAA,CAAM,MAAA,CAAO,MAAA,CAAO;AAAA;AAClC,KACD,CAAA;AAAA,IACD,MAAM,GAAA,CAAI;AAAA,MACR,UAAA,EAAY,KAAA,CAAM,OAAA,CAAQ,GAAG;AAAA,KAC9B;AAAA,GACH;AACF,CAAA;;;;"}