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

UI components for WordPress.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.HslInput = void 0;

var _element = require("@wordpress/element");

var _colord = require("colord");

var _inputWithSlider = require("./input-with-slider");

/**
 * External dependencies
 */

/**
 * Internal dependencies
 */
const HslInput = _ref => {
  let {
    color,
    onChange,
    enableAlpha
  } = _ref;
  const {
    h,
    s,
    l,
    a
  } = color.toHsl();
  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_inputWithSlider.InputWithSlider, {
    min: 0,
    max: 359,
    label: "Hue",
    abbreviation: "H",
    value: h,
    onChange: nextH => {
      onChange((0, _colord.colord)({
        h: nextH,
        s,
        l,
        a
      }));
    }
  }), (0, _element.createElement)(_inputWithSlider.InputWithSlider, {
    min: 0,
    max: 100,
    label: "Saturation",
    abbreviation: "S",
    value: s,
    onChange: nextS => {
      onChange((0, _colord.colord)({
        h,
        s: nextS,
        l,
        a
      }));
    }
  }), (0, _element.createElement)(_inputWithSlider.InputWithSlider, {
    min: 0,
    max: 100,
    label: "Lightness",
    abbreviation: "L",
    value: l,
    onChange: nextL => {
      onChange((0, _colord.colord)({
        h,
        s,
        l: nextL,
        a
      }));
    }
  }), enableAlpha && (0, _element.createElement)(_inputWithSlider.InputWithSlider, {
    min: 0,
    max: 100,
    label: "Alpha",
    abbreviation: "A",
    value: Math.trunc(100 * a),
    onChange: nextA => {
      onChange((0, _colord.colord)({
        h,
        s,
        l,
        a: nextA / 100
      }));
    }
  }));
};

exports.HslInput = HslInput;
//# sourceMappingURL=hsl-input.js.map