@grafana/ui/dist/esm/components/ColorPicker/NamedColorsGroup.mjs.map

Grafana Components Library

{"version":3,"file":"NamedColorsGroup.mjs","sources":["../../../../src/components/ColorPicker/NamedColorsGroup.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { Property } from 'csstype';\nimport { upperFirst } from 'lodash';\n\nimport { GrafanaTheme2, ThemeVizHue } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { reverseMap } from '../../utils/reverseMap';\n\nimport { ColorSwatch, ColorSwatchVariant } from './ColorSwatch';\n\ninterface NamedColorsGroupProps {\n  hue: ThemeVizHue;\n  selectedColor?: Property.Color;\n  onColorSelect: (colorName: string) => void;\n  key?: string;\n}\n\nconst NamedColorsGroup = ({ hue, selectedColor, onColorSelect, ...otherProps }: NamedColorsGroupProps) => {\n  const label = upperFirst(hue.name);\n  const styles = useStyles2(getStyles);\n\n  return (\n    <div className={styles.colorRow}>\n      <div className={styles.colorLabel}>{label}</div>\n      <div {...otherProps} className={styles.swatchRow}>\n        {reverseMap(hue.shades, (shade) => (\n          <ColorSwatch\n            key={shade.name}\n            aria-label={shade.name}\n            variant={shade.primary ? ColorSwatchVariant.Large : ColorSwatchVariant.Small}\n            isSelected={shade.name === selectedColor}\n            color={shade.color}\n            onClick={() => onColorSelect(shade.name)}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default NamedColorsGroup;\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    colorRow: css({\n      display: 'grid',\n      gridTemplateColumns: '25% 1fr',\n      gridColumnGap: theme.spacing(2),\n      padding: theme.spacing(0.5, 0),\n\n      '&:hover': {\n        background: theme.colors.background.secondary,\n      },\n    }),\n    colorLabel: css({\n      paddingLeft: theme.spacing(1),\n      display: 'flex',\n      alignItems: 'center',\n    }),\n    swatchRow: css({\n      display: 'flex',\n      gap: theme.spacing(1),\n      alignItems: 'center',\n      justifyContent: 'space-around',\n      flexDirection: 'row',\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;;AAkBM,MAAA,gBAAA,GAAmB,CAAC,EAAE,GAAA,EAAK,eAAe,aAAe,EAAA,GAAG,YAAwC,KAAA;AACxG,EAAM,MAAA,KAAA,GAAQ,UAAW,CAAA,GAAA,CAAI,IAAI,CAAA;AACjC,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,QACrB,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,UAAA,EAAa,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,oBAC1C,GAAA,CAAC,KAAK,EAAA,EAAA,GAAG,UAAY,EAAA,SAAA,EAAW,MAAO,CAAA,SAAA,EACpC,QAAW,EAAA,UAAA,CAAA,GAAA,CAAI,MAAQ,EAAA,CAAC,KACvB,qBAAA,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QAEC,cAAY,KAAM,CAAA,IAAA;AAAA,QAClB,OAAS,EAAA,KAAA,CAAM,OAAU,GAAA,kBAAA,CAAmB,QAAQ,kBAAmB,CAAA,KAAA;AAAA,QACvE,UAAA,EAAY,MAAM,IAAS,KAAA,aAAA;AAAA,QAC3B,OAAO,KAAM,CAAA,KAAA;AAAA,QACb,OAAS,EAAA,MAAM,aAAc,CAAA,KAAA,CAAM,IAAI;AAAA,OAAA;AAAA,MALlC,KAAM,CAAA;AAAA,KAOd,CACH,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;AAIA,MAAM,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,EAAO,OAAA;AAAA,IACL,UAAU,GAAI,CAAA;AAAA,MACZ,OAAS,EAAA,MAAA;AAAA,MACT,mBAAqB,EAAA,SAAA;AAAA,MACrB,aAAA,EAAe,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC9B,OAAS,EAAA,KAAA,CAAM,OAAQ,CAAA,GAAA,EAAK,CAAC,CAAA;AAAA,MAE7B,SAAW,EAAA;AAAA,QACT,UAAA,EAAY,KAAM,CAAA,MAAA,CAAO,UAAW,CAAA;AAAA;AACtC,KACD,CAAA;AAAA,IACD,YAAY,GAAI,CAAA;AAAA,MACd,WAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC5B,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA;AAAA,KACb,CAAA;AAAA,IACD,WAAW,GAAI,CAAA;AAAA,MACb,OAAS,EAAA,MAAA;AAAA,MACT,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MACpB,UAAY,EAAA,QAAA;AAAA,MACZ,cAAgB,EAAA,cAAA;AAAA,MAChB,aAAe,EAAA;AAAA,KAChB;AAAA,GACH;AACF,CAAA;;;;"}