| 1 | {"version":3,"file":"ColorPicker.types.js","sourceRoot":"../src/","sources":["components/ColorPicker/ColorPicker.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ITheme, IStyle } from '../../Styling';\nimport type { IRefObject, IStyleFunctionOrObject } from '../../Utilities';\nimport type { IColor } from '../../utilities/color/interfaces';\nimport type { ITooltipHostProps } from '../../Tooltip';\n\n/**\n * {@docCategory ColorPicker}\n */\nexport interface IColorPicker {\n /** The currently selected color. */\n color: IColor;\n}\n\n/**\n * {@docCategory ColorPicker}\n */\nexport interface IColorPickerProps {\n /**\n * Gets the component ref.\n */\n componentRef?: IRefObject<IColorPicker>;\n\n /**\n * Object or CSS-compatible string to describe the color.\n */\n color: IColor | string;\n\n /**\n * Labels for elements within the ColorPicker. Defaults are provided in English only.\n */\n strings?: IColorPickerStrings;\n\n /**\n * Callback for when the user changes the color.\n * (Not called when the color is changed via props.)\n */\n onChange?: (ev: React.SyntheticEvent<HTMLElement>, color: IColor) => void;\n\n /**\n * `alpha` (the default) means display a slider and text field for editing alpha values.\n * `transparency` also displays a slider and text field but for editing transparency values.\n * `none` hides these controls.\n *\n * Alpha represents the opacity of the color, whereas transparency represents the transparentness\n * of the color: i.e. a 30% transparent color has 70% opaqueness.\n *\n * @defaultvalue 'alpha'\n */\n alphaType?: 'alpha' | 'transparency' | 'none';\n\n /**\n * Whether to hide the alpha (or transparency) slider and text field.\n * @deprecated Use `alphaType: 'none'`\n */\n alphaSliderHidden?: boolean;\n\n /**\n * Label for the hex text field.\n * @defaultvalue Hex\n * @deprecated Use `strings`\n */\n hexLabel?: string;\n\n /**\n * Label for the red text field.\n * @defaultvalue Red\n * @deprecated Use `strings`\n */\n redLabel?: string;\n\n /**\n * Label for the green text field.\n * @defaultvalue Green\n * @deprecated Use `strings`\n */\n greenLabel?: string;\n\n /**\n * Label for the blue text field.\n * @defaultvalue Blue\n * @deprecated Use `strings`\n */\n blueLabel?: string;\n\n /**\n * Label for the alpha text field.\n * @defaultvalue Alpha\n * @deprecated Use `strings`\n */\n alphaLabel?: string;\n\n /**\n * Additional CSS class(es) to apply to the ColorPicker.\n */\n className?: string;\n\n /**\n * Theme (provided through customization).\n */\n theme?: ITheme;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: IStyleFunctionOrObject<IColorPickerStyleProps, IColorPickerStyles>;\n\n /**\n * Whether to show color preview box.\n * @defaultvalue false\n */\n showPreview?: boolean;\n\n /**\n * Optional props to pass through to the error message tooltips\n */\n tooltipProps?: ITooltipHostProps;\n}\n\nexport interface IColorPickerStrings {\n /**\n * Accessible label for the root of the color picker region.\n * The string should contain a placeholder `{0}` for the currently selected color.\n * @defaultvalue `'Color picker, {0} selected.'`\n */\n rootAriaLabelFormat?: string;\n\n /**\n * Label for the hex text field.\n * @defaultvalue Hex\n */\n hex?: string;\n\n /**\n * Label for the red text field.\n * @defaultvalue Red\n */\n red?: string;\n\n /**\n * Label for the green text field.\n * @defaultvalue Green\n */\n green?: string;\n\n /**\n * Label for the blue text field.\n * @defaultvalue Blue\n */\n blue?: string;\n\n /**\n * Label for the alpha text field.\n * Also used as the aria label for the alpha slider if `alphaAriaLabel` is not provided.\n * @defaultvalue Alpha\n */\n alpha?: string;\n\n /**\n * Label for the transparency text field.\n * @defaultvalue Transparency\n */\n transparency?: string;\n\n /**\n * Customized aria-label for the alpha slider.\n * This overrides the visible text label, and should be used with extreme care (and very rarely).\n */\n alphaAriaLabel?: string;\n\n /**\n * Customized aria-label for the transparency slider.\n * This overrides the visible text label, and should be used with extreme care (and very rarely).\n */\n transparencyAriaLabel?: string;\n\n /**\n * Aria label for the hue slider.\n * @defaultvalue Hue\n */\n hueAriaLabel?: string;\n\n /**\n * Aria label for the hue slider.\n * @deprecated Use `hueAriaLabel`\n */\n hue?: string;\n\n /**\n * Aria label for the color rectangle, which adjusts saturation and value (brightness).\n * @defaultvalue 'Saturation and brightness'\n */\n svAriaLabel?: string;\n\n /**\n * Format string for the current values of the color rectangle.\n * The string must include descriptions and two placeholders for the current values:\n * `{0}` for saturation and `{1}` for value/brightness.\n * @defaultvalue `'Saturation {0} brightness {1}'`\n */\n svAriaValueFormat?: string;\n\n /**\n * Detailed description for how to use the color rectangle. Moving the thumb horizontally adjusts\n * saturation and moving it vertically adjusts value (essentially, brightness).\n * @defaultvalue 'Use left and right arrow keys to set saturation. Use up and down arrow keys to set brightness.'\n */\n svAriaDescription?: string;\n\n /**\n * Error message for invalid hex input\n * @defaultvalue 'Hex values must be between 3 and 6 characters long'\n */\n hexError?: string;\n\n /**\n * Error message for invalid alpha input\n * @defaultvalue 'Alpha must be between 0 and 100'\n */\n alphaError?: string;\n\n /**\n * Error message for invalid transparency input\n * @defaultvalue 'Transparency must be between 0 and 100'\n */\n transparencyError?: string;\n\n /**\n * Error message for invalid red input\n * @defaultvalue 'Red must be between 0 and 255'\n */\n redError?: string;\n\n /**\n * Error message for invalid green input\n * @defaultvalue 'Green must be between 0 and 255'\n */\n greenError?: string;\n\n /**\n * Error message for invalid blue input\n * @defaultvalue 'Blue must be between 0 and 255'\n */\n blueError?: string;\n}\n\n/**\n * {@docCategory ColorPicker}\n */\nexport type IColorPickerStyleProps = Required<Pick<IColorPickerProps, 'theme'>> &\n Pick<IColorPickerProps, 'className' | 'alphaType'>;\n\n/**\n * {@docCategory ColorPicker}\n */\nexport interface IColorPickerStyles {\n /**\n * Style set for the root element.\n */\n root?: IStyle;\n\n /**\n * Style set for the panel element that contains the color rectangle, color sliders and inputs .\n */\n panel?: IStyle;\n\n /**\n * Style set for the panel element that contains the color rectangle\n */\n colorRectangle?: IStyle;\n\n /**\n * Style set for the table element that contains the color sliders and inputs.\n */\n table?: IStyle;\n\n /**\n * Style set for the table header that contains the labels.\n */\n tableHeader?: IStyle;\n\n /**\n * Style set for the table cell that contains the hex label.\n */\n tableHexCell?: IStyle;\n\n /**\n * Style set for the table cell that contains the alpha or transparency label.\n */\n tableAlphaCell?: IStyle;\n\n /**\n * Style set for each text field input.\n */\n input?: IStyle;\n\n /**\n * Color Square\n */\n colorSquare?: IStyle;\n\n /**\n * flexContainer\n */\n flexContainer?: IStyle;\n\n /**\n * flexSlider\n */\n flexSlider?: IStyle;\n\n /**\n * flexPreviewBox\n */\n flexPreviewBox?: IStyle;\n}\n"]} |