@grafana/ui/dist/cjs/components/ColorPicker/NamedColorsPalette.cjs.map

Grafana Components Library

{"version":3,"file":"NamedColorsPalette.cjs","sources":["../../../../src/components/ColorPicker/NamedColorsPalette.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport type { JSX } from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2, useTheme2 } from '../../themes/ThemeContext';\n\nimport { ColorSwatch } from './ColorSwatch';\nimport NamedColorsGroup from './NamedColorsGroup';\n\nexport interface NamedColorsPaletteProps {\n  color?: string;\n  onChange: (colorName: string) => void;\n}\n\nexport const NamedColorsPalette = ({ color, onChange }: NamedColorsPaletteProps) => {\n  const theme = useTheme2();\n  const styles = useStyles2(getStyles);\n\n  const swatches: JSX.Element[] = [];\n  for (const hue of theme.visualization.hues) {\n    swatches.push(<NamedColorsGroup key={hue.name} selectedColor={color} hue={hue} onColorSelect={onChange} />);\n  }\n\n  return (\n    <>\n      <div className={styles.swatches}>{swatches}</div>\n      <div className={styles.extraColors}>\n        <ColorSwatch\n          isSelected={color === 'transparent'}\n          color={'rgba(0,0,0,0)'}\n          label={t('grafana-ui.named-colors-palette.transparent-swatch', 'Transparent')}\n          onClick={() => onChange('transparent')}\n        />\n        <ColorSwatch\n          isSelected={color === 'text'}\n          color={theme.colors.text.primary}\n          label={t('grafana-ui.named-colors-palette.text-color-swatch', 'Text color')}\n          onClick={() => onChange('text')}\n        />\n      </div>\n    </>\n  );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    container: css({\n      display: 'flex',\n      flexDirection: 'column',\n    }),\n    extraColors: css({\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-around',\n      gap: theme.spacing(1),\n      padding: theme.spacing(1, 0),\n    }),\n    swatches: css({\n      display: 'grid',\n      flexGrow: 1,\n    }),\n  };\n};\n"],"names":["useTheme2","useStyles2","jsx","jsxs","Fragment","ColorSwatch","t","css"],"mappings":";;;;;;;;;;;;AAgBO,MAAM,kBAAA,GAAqB,CAAC,EAAE,KAAA,EAAO,UAAS,KAA+B;AAClF,EAAA,MAAM,QAAQA,sBAAA,EAAU;AACxB,EAAA,MAAM,MAAA,GAASC,wBAAW,SAAS,CAAA;AAEnC,EAAA,MAAM,WAA0B,EAAC;AACjC,EAAA,KAAA,MAAW,GAAA,IAAO,KAAA,CAAM,aAAA,CAAc,IAAA,EAAM;AAC1C,IAAA,QAAA,CAAS,IAAA,iBAAKC,cAAA,CAAC,gBAAA,EAAA,EAAgC,aAAA,EAAe,KAAA,EAAO,KAAU,aAAA,EAAe,QAAA,EAAA,EAAzD,GAAA,CAAI,IAA+D,CAAE,CAAA;AAAA,EAC5G;AAEA,EAAA,uBACEC,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAF,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,QAAA,EAAW,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,oBAC3CC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,WAAA,EACrB,QAAA,EAAA;AAAA,sBAAAD,cAAA;AAAA,QAACG,uBAAA;AAAA,QAAA;AAAA,UACC,YAAY,KAAA,KAAU,aAAA;AAAA,UACtB,KAAA,EAAO,eAAA;AAAA,UACP,KAAA,EAAOC,MAAA,CAAE,oDAAA,EAAsD,aAAa,CAAA;AAAA,UAC5E,OAAA,EAAS,MAAM,QAAA,CAAS,aAAa;AAAA;AAAA,OACvC;AAAA,sBACAJ,cAAA;AAAA,QAACG,uBAAA;AAAA,QAAA;AAAA,UACC,YAAY,KAAA,KAAU,MAAA;AAAA,UACtB,KAAA,EAAO,KAAA,CAAM,MAAA,CAAO,IAAA,CAAK,OAAA;AAAA,UACzB,KAAA,EAAOC,MAAA,CAAE,mDAAA,EAAqD,YAAY,CAAA;AAAA,UAC1E,OAAA,EAAS,MAAM,QAAA,CAAS,MAAM;AAAA;AAAA;AAChC,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyB;AAC1C,EAAA,OAAO;AAAA,IACL,WAAWC,OAAA,CAAI;AAAA,MACb,OAAA,EAAS,MAAA;AAAA,MACT,aAAA,EAAe;AAAA,KAChB,CAAA;AAAA,IACD,aAAaA,OAAA,CAAI;AAAA,MACf,OAAA,EAAS,MAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,cAAA,EAAgB,cAAA;AAAA,MAChB,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,MACpB,OAAA,EAAS,KAAA,CAAM,OAAA,CAAQ,CAAA,EAAG,CAAC;AAAA,KAC5B,CAAA;AAAA,IACD,UAAUA,OAAA,CAAI;AAAA,MACZ,OAAA,EAAS,MAAA;AAAA,MACT,QAAA,EAAU;AAAA,KACX;AAAA,GACH;AACF,CAAA;;;;"}