value: function handleChange(value) {
var _this$props2 = this.props,
valueKey = _this$props2.valueKey,
onChange = _this$props2.onChange,
source = _this$props2.source;
if (value.length > 4 && isValidHex(value)) {
value: function handleKeyDown(_ref) {
var keyCode = _ref.keyCode;
if (keyCode !== external_wp_keycodes_["ENTER"] && keyCode !== external_wp_keycodes_["UP"] && keyCode !== external_wp_keycodes_["DOWN"]) {
var _this$props3 = this.props,
value = _this$props3.value,
valueKey = _this$props3.valueKey,
onChange = _this$props3.onChange,
source = _this$props3.source;
value: function render() {
var _this$props4 = this.props,
label = _this$props4.label,
value = _this$props4.value,
props = Object(objectWithoutProperties["a" /* default */])(_this$props4, ["label", "value"]);
return Object(external_wp_element_["createElement"])(text_control, Object(esm_extends["a" /* default */])({
className: "components-color-picker__inputs-field",
onChange: function onChange(newValue) {
return _this2.handleChange(newValue);
onKeyDown: this.handleKeyDown
}, Object(external_lodash_["omit"])(props, ['onChange', 'valueKey', 'source'])));
}(external_wp_element_["Component"]);
var PureButton = Object(external_wp_compose_["pure"])(build_module_button["a" /* default */]);
var inputs_Inputs = /*#__PURE__*/function (_Component2) {
Object(inherits["a" /* default */])(Inputs, _Component2);
var _super2 = inputs_createSuper(Inputs);
Object(classCallCheck["a" /* default */])(this, Inputs);
_this3 = _super2.apply(this, arguments);
var view = hsl.a === 1 ? 'hex' : 'rgb';
_this3.toggleViews = _this3.toggleViews.bind(Object(assertThisInitialized["a" /* default */])(_this3));
_this3.resetDraftValues = _this3.resetDraftValues.bind(Object(assertThisInitialized["a" /* default */])(_this3));
_this3.handleChange = _this3.handleChange.bind(Object(assertThisInitialized["a" /* default */])(_this3));
_this3.normalizeValue = _this3.normalizeValue.bind(Object(assertThisInitialized["a" /* default */])(_this3));
Object(createClass["a" /* default */])(Inputs, [{
value: function toggleViews() {
if (this.state.view === 'hex') {
}, this.resetDraftValues);
Object(external_wp_a11y_["speak"])(Object(external_wp_i18n_["__"])('RGB mode active'));
} else if (this.state.view === 'rgb') {
}, this.resetDraftValues);
Object(external_wp_a11y_["speak"])(Object(external_wp_i18n_["__"])('Hue/saturation/lightness mode active'));
} else if (this.state.view === 'hsl') {
if (this.props.hsl.a === 1) {
}, this.resetDraftValues);
Object(external_wp_a11y_["speak"])(Object(external_wp_i18n_["__"])('Hex color mode active'));
}, this.resetDraftValues);
Object(external_wp_a11y_["speak"])(Object(external_wp_i18n_["__"])('RGB mode active'));
value: function resetDraftValues() {
return this.props.onChange({
value: function normalizeValue(valueKey, value) {
return Math.round(value * 100) / 100;
value: function handleChange(_ref3) {
var source = _ref3.source,
valueKey = _ref3.valueKey;
value: this.normalizeValue(valueKey, value)
value: function renderFields() {
var _this$props$disableAl = this.props.disableAlpha,
disableAlpha = _this$props$disableAl === void 0 ? false : _this$props$disableAl;
if (this.state.view === 'hex') {
return Object(external_wp_element_["createElement"])("div", {
className: "components-color-picker__inputs-fields"
}, Object(external_wp_element_["createElement"])(inputs_Input, {
label: Object(external_wp_i18n_["__"])('Color value in hexadecimal'),
onChange: this.handleChange
} else if (this.state.view === 'rgb') {
var legend = disableAlpha ? Object(external_wp_i18n_["__"])('Color value in RGB') : Object(external_wp_i18n_["__"])('Color value in RGBA');
return Object(external_wp_element_["createElement"])("fieldset", null, Object(external_wp_element_["createElement"])(visually_hidden["a" /* default */], {
}, legend), Object(external_wp_element_["createElement"])("div", {
className: "components-color-picker__inputs-fields"
}, Object(external_wp_element_["createElement"])(inputs_Input, {
onChange: this.handleChange,
}), Object(external_wp_element_["createElement"])(inputs_Input, {
onChange: this.handleChange,
}), Object(external_wp_element_["createElement"])(inputs_Input, {
onChange: this.handleChange,
}), disableAlpha ? null : Object(external_wp_element_["createElement"])(inputs_Input, {
onChange: this.handleChange,
} else if (this.state.view === 'hsl') {
var _legend = disableAlpha ? Object(external_wp_i18n_["__"])('Color value in HSL') : Object(external_wp_i18n_["__"])('Color value in HSLA');
return Object(external_wp_element_["createElement"])("fieldset", null, Object(external_wp_element_["createElement"])(visually_hidden["a" /* default */], {
}, _legend), Object(external_wp_element_["createElement"])("div", {
className: "components-color-picker__inputs-fields"
}, Object(external_wp_element_["createElement"])(inputs_Input, {
onChange: this.handleChange,
}), Object(external_wp_element_["createElement"])(inputs_Input, {
onChange: this.handleChange,
}), Object(external_wp_element_["createElement"])(inputs_Input, {
onChange: this.handleChange,
}), disableAlpha ? null : Object(external_wp_element_["createElement"])(inputs_Input, {
onChange: this.handleChange,
value: function render() {
return Object(external_wp_element_["createElement"])("div", {
className: "components-color-picker__inputs-wrapper"
}, this.renderFields(), Object(external_wp_element_["createElement"])("div", {
className: "components-color-picker__inputs-toggle-wrapper"
}, Object(external_wp_element_["createElement"])(PureButton, {
className: "components-color-picker__inputs-toggle",
icon: chevron_down["a" /* default */],
label: Object(external_wp_i18n_["__"])('Change color format'),
onClick: this.toggleViews
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(props, state) {
if (props.hsl.a !== 1 && state.view === 'hex') {
}(external_wp_element_["Component"]);
/* harmony default export */ var inputs = (inputs_Inputs);
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/saturation.js
function saturation_createSuper(Derived) { var hasNativeReflectConstruct = saturation_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = Object(getPrototypeOf["a" /* default */])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = Object(getPrototypeOf["a" /* default */])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return Object(possibleConstructorReturn["a" /* default */])(this, result); }; }
function saturation_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
* Parts of this source were derived and modified from react-color,
* released under the MIT license.
* https://github.com/casesandberg/react-color/
* Copyright (c) 2015 Case Sandberg
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
var saturation_Saturation = /*#__PURE__*/function (_Component) {
Object(inherits["a" /* default */])(Saturation, _Component);
var _super = saturation_createSuper(Saturation);
function Saturation(props) {
Object(classCallCheck["a" /* default */])(this, Saturation);
_this = _super.call(this, props);
_this.throttle = Object(external_lodash_["throttle"])(function (fn, data, e) {
_this.container = Object(external_wp_element_["createRef"])();
_this.saturate = _this.saturate.bind(Object(assertThisInitialized["a" /* default */])(_this));
_this.brighten = _this.brighten.bind(Object(assertThisInitialized["a" /* default */])(_this));
_this.handleChange = _this.handleChange.bind(Object(assertThisInitialized["a" /* default */])(_this));
_this.handleMouseDown = _this.handleMouseDown.bind(Object(assertThisInitialized["a" /* default */])(_this));
_this.handleMouseUp = _this.handleMouseUp.bind(Object(assertThisInitialized["a" /* default */])(_this));
Object(createClass["a" /* default */])(Saturation, [{
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.unbindEventListeners();
value: function saturate() {
var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0.01;
var _this$props = this.props,
_this$props$onChange = _this$props.onChange,
onChange = _this$props$onChange === void 0 ? external_lodash_["noop"] : _this$props$onChange;
var intSaturation = Object(external_lodash_["clamp"])(hsv.s + Math.round(amount * 100), 0, 100);
value: function brighten() {
var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0.01;
var _this$props2 = this.props,
_this$props2$onChange = _this$props2.onChange,
onChange = _this$props2$onChange === void 0 ? external_lodash_["noop"] : _this$props2$onChange;
var intValue = Object(external_lodash_["clamp"])(hsv.v + Math.round(amount * 100), 0, 100);
value: function handleChange(e) {
var _this$props$onChange2 = this.props.onChange,
onChange = _this$props$onChange2 === void 0 ? external_lodash_["noop"] : _this$props$onChange2;
var change = calculateSaturationChange(e, this.props, this.container.current);
this.throttle(onChange, change, e);
value: function handleMouseDown(e) {
window.addEventListener('mousemove', this.handleChange);
window.addEventListener('mouseup', this.handleMouseUp);
value: function handleMouseUp() {
this.unbindEventListeners();
value: function preventKeyEvents(event) {
if (event.keyCode === external_wp_keycodes_["TAB"]) {
key: "unbindEventListeners",
value: function unbindEventListeners() {
window.removeEventListener('mousemove', this.handleChange);
window.removeEventListener('mouseup', this.handleMouseUp);
value: function render() {
var _this$props3 = this.props,
instanceId = _this$props3.instanceId;
top: "".concat(-hsv.v + 100, "%"),
left: "".concat(hsv.s, "%")
return _this2.brighten();
'shift+up': function shiftUp() {
return _this2.brighten(0.1);
pageup: function pageup() {
return _this2.brighten(1);
return _this2.brighten(-0.01);
'shift+down': function shiftDown() {
return _this2.brighten(-0.1);
pagedown: function pagedown() {
return _this2.brighten(-1);
right: function right() {
return _this2.saturate();
'shift+right': function shiftRight() {
return _this2.saturate(0.1);
return _this2.saturate(1);
return _this2.saturate(-0.01);
It is recommended that you Edit text format, this type of Fix handles quite a lot in one request
