@wordpress/components/build-module/color-picker/hsl-input.js

UI components for WordPress.

import { createElement, Fragment } from "@wordpress/element";

/**
 * External dependencies
 */
import { colord } from 'colord';
/**
 * Internal dependencies
 */

import { InputWithSlider } from './input-with-slider';
export const HslInput = _ref => {
  let {
    color,
    onChange,
    enableAlpha
  } = _ref;
  const {
    h,
    s,
    l,
    a
  } = color.toHsl();
  return createElement(Fragment, null, createElement(InputWithSlider, {
    min: 0,
    max: 359,
    label: "Hue",
    abbreviation: "H",
    value: h,
    onChange: nextH => {
      onChange(colord({
        h: nextH,
        s,
        l,
        a
      }));
    }
  }), createElement(InputWithSlider, {
    min: 0,
    max: 100,
    label: "Saturation",
    abbreviation: "S",
    value: s,
    onChange: nextS => {
      onChange(colord({
        h,
        s: nextS,
        l,
        a
      }));
    }
  }), createElement(InputWithSlider, {
    min: 0,
    max: 100,
    label: "Lightness",
    abbreviation: "L",
    value: l,
    onChange: nextL => {
      onChange(colord({
        h,
        s,
        l: nextL,
        a
      }));
    }
  }), enableAlpha && createElement(InputWithSlider, {
    min: 0,
    max: 100,
    label: "Alpha",
    abbreviation: "A",
    value: Math.trunc(100 * a),
    onChange: nextA => {
      onChange(colord({
        h,
        s,
        l,
        a: nextA / 100
      }));
    }
  }));
};
//# sourceMappingURL=hsl-input.js.map