{"version":3,"file":"BasicStatCard.cjs","names":[],"sources":["../src/Components/Graphs/StatCard/index.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\r\nimport { H3 } from '@undp/design-system-react/Typography';\r\n\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport type {\r\n  ClassNameObject,\r\n  Languages,\r\n  NumberFormatOptions,\r\n  SourcesDataType,\r\n  StyleObject,\r\n} from '@/Types';\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\n\r\ninterface Props {\r\n  // Titles, Labels, and Sources\r\n  /** Title of the graph */\r\n  graphTitle?: string | React.ReactNode;\r\n  /** Description of the graph */\r\n  graphDescription?: string | React.ReactNode;\r\n  /** Footnote for the graph */\r\n  footNote?: string | React.ReactNode;\r\n  /** Source data for the graph */\r\n  sources?: SourcesDataType[];\r\n\r\n  // Colors and Styling\r\n  /** Background color of the graph */\r\n  backgroundColor?: string | boolean;\r\n  /** Defines the layout for the cards */\r\n  layout?: 'primary' | 'secondary';\r\n  /** Font size of the main text */\r\n  headingFontSize?: string;\r\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\r\n  padding?: string;\r\n  /** Toggle the fill color of the main text. */\r\n  textBackground?: boolean;\r\n  /** Toggle is the text is center aligned. */\r\n  centerAlign?: boolean;\r\n  /** Vertical alignment of the main text */\r\n  verticalAlign?: 'center' | 'top' | 'bottom';\r\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\r\n  styles?: StyleObject;\r\n  /** Custom class names */\r\n  classNames?: ClassNameObject;\r\n\r\n  // Values and Ticks\r\n  /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */\r\n  numberDisplayOptions?: NumberFormatOptions;\r\n  /** Defines how “NA” values should be displayed/labelled in the graph */\r\n  naLabel?: string;\r\n  /** Main text */\r\n  value: number | string;\r\n  /** Sub text next to main text */\r\n  year?: number | string;\r\n\r\n  // Configuration and Options\r\n  /** Language setting  */\r\n  language?: Languages;\r\n  /** Color theme */\r\n  theme?: 'light' | 'dark';\r\n  /** Unique ID for the graph */\r\n  graphID?: string;\r\n}\r\n\r\nexport function BasicStatCard(props: Props) {\r\n  const {\r\n    year,\r\n    value,\r\n    graphTitle,\r\n    sources,\r\n    graphDescription,\r\n    footNote,\r\n    padding,\r\n    backgroundColor = false,\r\n    graphID,\r\n    language = 'en',\r\n    theme = 'light',\r\n    textBackground = false,\r\n    headingFontSize = '4.375rem',\r\n    centerAlign = false,\r\n    verticalAlign = 'center',\r\n    layout = 'primary',\r\n    styles,\r\n    classNames,\r\n    numberDisplayOptions,\r\n    naLabel = 'NA',\r\n  } = props;\r\n  return (\r\n    <div className={`${theme || 'light'} w-full`}>\r\n      <div\r\n        id={graphID}\r\n        dir={language === 'he' || language === 'ar' ? 'rtl' : undefined}\r\n        className={cn(\r\n          `${theme || 'light'} flex flex-col w-full box-border h-full ${\r\n            !backgroundColor ? 'bg-transparent' : backgroundColor === true ? 'bg-surface' : ''\r\n          } ${language || 'en'}`,\r\n          classNames?.graphContainer,\r\n        )}\r\n        style={{\r\n          ...(styles?.graphContainer || {}),\r\n          ...(backgroundColor && backgroundColor !== true ? { backgroundColor } : {}),\r\n          padding: backgroundColor ? padding || '1rem' : padding || 0,\r\n        }}\r\n      >\r\n        <div\r\n          className={`flex flex-col w-full grow ${layout !== 'secondary' ? 'gap-12 justify-between' : 'gap-4 justify-center'}`}\r\n        >\r\n          {layout !== 'secondary' ? (\r\n            <>\r\n              {graphTitle || graphDescription ? (\r\n                <GraphHeader\r\n                  styles={{\r\n                    title: styles?.title,\r\n                    description: styles?.description,\r\n                  }}\r\n                  classNames={{\r\n                    title: classNames?.title,\r\n                    description: classNames?.description,\r\n                  }}\r\n                  graphTitle={graphTitle}\r\n                  graphDescription={graphDescription}\r\n                />\r\n              ) : null}\r\n              <div\r\n                className={`flex flex-col justify-between grow ${\r\n                  verticalAlign === 'top'\r\n                    ? 'justify-start'\r\n                    : verticalAlign === 'bottom'\r\n                      ? 'justify-end'\r\n                      : 'justify-center'\r\n                }`}\r\n              >\r\n                <H3\r\n                  marginBottom='base'\r\n                  className={`leading-xs [-webkit-text-stroke:2px_var(--content-primary)] text-shadow-none font-heading ${\r\n                    centerAlign\r\n                      ? 'text-center'\r\n                      : language === 'he' || language === 'ar'\r\n                        ? 'text-right'\r\n                        : 'text-left'\r\n                  } ${textBackground ? 'text-content-primary' : 'text-transparent'}`}\r\n                  style={{\r\n                    fontSize: headingFontSize,\r\n                    letterSpacing: '0.05rem',\r\n                  }}\r\n                >\r\n                  {numberFormattingFunction(\r\n                    value,\r\n                    naLabel,\r\n                    numberDisplayOptions?.precision ?? 2,\r\n                    numberDisplayOptions?.prefix,\r\n                    numberDisplayOptions?.suffix,\r\n                    numberDisplayOptions?.locale,\r\n                    numberDisplayOptions?.padZeros,\r\n                  )}{' '}\r\n                  {year ? (\r\n                    <span\r\n                      className='text-lg font-normal mt-0 mb-4 text-content-secondary'\r\n                      style={{\r\n                        marginLeft: '-8px',\r\n                        lineHeight: '1.09',\r\n                        textShadow: 'none',\r\n                        WebkitTextStrokeWidth: 0,\r\n                      }}\r\n                    >\r\n                      ({year})\r\n                    </span>\r\n                  ) : null}\r\n                </H3>\r\n              </div>\r\n              {sources || footNote ? (\r\n                <GraphFooter\r\n                  styles={{ footnote: styles?.footnote, source: styles?.source }}\r\n                  classNames={{\r\n                    footnote: classNames?.footnote,\r\n                    source: classNames?.source,\r\n                  }}\r\n                  sources={sources}\r\n                  footNote={footNote}\r\n                />\r\n              ) : null}\r\n            </>\r\n          ) : (\r\n            <>\r\n              <H3\r\n                marginBottom={layout === 'secondary' ? 'none' : 'base'}\r\n                className={`leading-xs [-webkit-text-stroke:2px_var(--content-primary)] text-shadow-none font-heading ${\r\n                  centerAlign\r\n                    ? 'text-center'\r\n                    : language === 'he' || language === 'ar'\r\n                      ? 'text-right'\r\n                      : 'text-left'\r\n                } ${textBackground ? 'text-content-primary' : 'text-transparent'}`}\r\n                style={{\r\n                  fontSize: headingFontSize,\r\n                  letterSpacing: '0.05rem',\r\n                }}\r\n              >\r\n                {numberFormattingFunction(\r\n                  value,\r\n                  naLabel,\r\n                  numberDisplayOptions?.precision ?? 2,\r\n                  numberDisplayOptions?.prefix,\r\n                  numberDisplayOptions?.suffix,\r\n                  numberDisplayOptions?.locale,\r\n                  numberDisplayOptions?.padZeros,\r\n                )}{' '}\r\n                {year ? (\r\n                  <span\r\n                    className='text-lg font-normal mt-0 mb-4 text-content-secondary'\r\n                    style={{\r\n                      marginLeft: '-8px',\r\n                      lineHeight: '1.09',\r\n                      textShadow: 'none',\r\n                      WebkitTextStrokeWidth: 0,\r\n                    }}\r\n                  >\r\n                    ({year})\r\n                  </span>\r\n                ) : null}\r\n              </H3>\r\n              {graphTitle || graphDescription ? (\r\n                <GraphHeader\r\n                  styles={{\r\n                    title: styles?.title,\r\n                    description: styles?.description,\r\n                  }}\r\n                  classNames={{\r\n                    title: classNames?.title,\r\n                    description: classNames?.description,\r\n                  }}\r\n                  graphTitle={graphTitle}\r\n                  graphDescription={graphDescription}\r\n                />\r\n              ) : null}\r\n              {sources || footNote ? (\r\n                <GraphFooter\r\n                  styles={{ footnote: styles?.footnote, source: styles?.source }}\r\n                  classNames={{\r\n                    footnote: classNames?.footnote,\r\n                    source: classNames?.source,\r\n                  }}\r\n                  sources={sources}\r\n                  footNote={footNote}\r\n                />\r\n              ) : null}\r\n            </>\r\n          )}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":"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"}