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 rgb = this.props.rgb;
var rgbString = "".concat(rgb.r, ",").concat(rgb.g, ",").concat(rgb.b);
background: "linear-gradient(to right, rgba(".concat(rgbString, ", 0) 0%, rgba(").concat(rgbString, ", 1) 100%)")
left: "".concat(rgb.a * 100, "%")
return _this2.increase();
right: function right() {
return _this2.increase();
'shift+up': function shiftUp() {
return _this2.increase(0.1);
'shift+right': function shiftRight() {
return _this2.increase(0.1);
pageup: function pageup() {
return _this2.increase(0.1);
return _this2.increase(1);
return _this2.decrease();
return _this2.decrease();
'shift+down': function shiftDown() {
return _this2.decrease(0.1);
'shift+left': function shiftLeft() {
return _this2.decrease(0.1);
pagedown: function pagedown() {
return _this2.decrease(0.1);
return _this2.decrease(1);
return Object(external_wp_element_["createElement"])(keyboard_shortcuts, {
}, Object(external_wp_element_["createElement"])("div", {
className: "components-color-picker__alpha"
}, Object(external_wp_element_["createElement"])("div", {
className: "components-color-picker__alpha-gradient",
}), Object(external_wp_element_["createElement"])("div", {
className: "components-color-picker__alpha-bar",
onMouseDown: this.handleMouseDown,
onTouchMove: this.handleChange,
onTouchStart: this.handleChange
}, Object(external_wp_element_["createElement"])("div", {
"aria-orientation": "horizontal",
"aria-label": Object(external_wp_i18n_["__"])('Alpha value, from 0 (transparent) to 1 (fully opaque).'),
className: "components-color-picker__alpha-pointer",
onKeyDown: this.preventKeyEvents
}(external_wp_element_["Component"]);
/* harmony default export */ var color_picker_alpha = (Object(external_wp_compose_["pure"])(alpha_Alpha));
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/hue.js
function hue_createSuper(Derived) { var hasNativeReflectConstruct = hue_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 hue_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 hue_Hue = /*#__PURE__*/function (_Component) {
Object(inherits["a" /* default */])(Hue, _Component);
var _super = hue_createSuper(Hue);
Object(classCallCheck["a" /* default */])(this, Hue);
_this = _super.apply(this, arguments);
_this.container = Object(external_wp_element_["createRef"])();
_this.increase = _this.increase.bind(Object(assertThisInitialized["a" /* default */])(_this));
_this.decrease = _this.decrease.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 */])(Hue, [{
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.unbindEventListeners();
value: function increase() {
var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
var _this$props = this.props,
_this$props$onChange = _this$props.onChange,
onChange = _this$props$onChange === void 0 ? external_lodash_["noop"] : _this$props$onChange;
h: hsl.h + amount >= 359 ? 359 : hsl.h + amount,
value: function decrease() {
var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
var _this$props2 = this.props,
_this$props2$onChange = _this$props2.onChange,
onChange = _this$props2$onChange === void 0 ? external_lodash_["noop"] : _this$props2$onChange;
h: hsl.h <= amount ? 0 : hsl.h - amount,
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 = calculateHueChange(e, this.props, this.container.current);
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,
_this$props3$hsl = _this$props3.hsl,
hsl = _this$props3$hsl === void 0 ? {} : _this$props3$hsl,
instanceId = _this$props3.instanceId;
left: "".concat(hsl.h * 100 / 360, "%")
return _this2.increase();
right: function right() {
return _this2.increase();
'shift+up': function shiftUp() {
return _this2.increase(10);
'shift+right': function shiftRight() {
return _this2.increase(10);
pageup: function pageup() {
return _this2.increase(10);
return _this2.increase(359);
return _this2.decrease();
return _this2.decrease();
'shift+down': function shiftDown() {
return _this2.decrease(10);
'shift+left': function shiftLeft() {
return _this2.decrease(10);
pagedown: function pagedown() {
return _this2.decrease(10);
return _this2.decrease(359);
return Object(external_wp_element_["createElement"])(keyboard_shortcuts, {
}, Object(external_wp_element_["createElement"])("div", {
className: "components-color-picker__hue"
}, Object(external_wp_element_["createElement"])("div", {
className: "components-color-picker__hue-gradient"
}), Object(external_wp_element_["createElement"])("div", {
className: "components-color-picker__hue-bar",
onMouseDown: this.handleMouseDown,
onTouchMove: this.handleChange,
onTouchStart: this.handleChange
}, Object(external_wp_element_["createElement"])("div", {
"aria-orientation": "horizontal",
"aria-label": Object(external_wp_i18n_["__"])('Hue value in degrees, from 0 to 359.'),
"aria-describedby": "components-color-picker__hue-description-".concat(instanceId),
className: "components-color-picker__hue-pointer",
onKeyDown: this.preventKeyEvents
}), Object(external_wp_element_["createElement"])(visually_hidden["a" /* default */], {
id: "components-color-picker__hue-description-".concat(instanceId)
}, Object(external_wp_i18n_["__"])('Move the arrow left or right to change hue.')))));
}(external_wp_element_["Component"]);
/* harmony default export */ var hue = (Object(external_wp_compose_["compose"])(external_wp_compose_["pure"], external_wp_compose_["withInstanceId"])(hue_Hue));
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/text-control/index.js
* @property {string} label Label for the control.
* @property {boolean} [hideLabelFromVision] Whether to accessibly hide the label.
* @property {string} value Value of the input.
* @property {string} [help] Optional help text for the control.
* @property {string} [className] Classname passed to BaseControl wrapper
* @property {(value: string) => void} onChange Handle changes.
* @property {string} [type='text'] Type of the input.
/** @typedef {OwnProps & import('react').ComponentProps<'input'>} Props */
* @param {Props} props Props
* @param {import('react').Ref<HTMLInputElement>} [ref]
function TextControl(_ref, ref) {
hideLabelFromVision = _ref.hideLabelFromVision,
className = _ref.className,
onChange = _ref.onChange,
type = _ref$type === void 0 ? 'text' : _ref$type,
props = Object(objectWithoutProperties["a" /* default */])(_ref, ["label", "hideLabelFromVision", "value", "help", "className", "onChange", "type"]);
var instanceId = Object(external_wp_compose_["useInstanceId"])(TextControl);
var id = "inspector-text-control-".concat(instanceId);
var onChangeValue = function onChangeValue(
/** @type {import('react').ChangeEvent<HTMLInputElement>} */
return onChange(event.target.value);
return Object(external_wp_element_["createElement"])(base_control, {
hideLabelFromVision: hideLabelFromVision,
}, Object(external_wp_element_["createElement"])("input", Object(esm_extends["a" /* default */])({
className: "components-text-control__input",
"aria-describedby": !!help ? id + '__help' : undefined,
/* harmony default export */ var text_control = (Object(external_wp_element_["forwardRef"])(TextControl));
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/inputs.js
function inputs_createSuper(Derived) { var hasNativeReflectConstruct = inputs_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 inputs_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; } }
/* Wrapper for TextControl, only used to handle intermediate state while typing. */
var inputs_Input = /*#__PURE__*/function (_Component) {
Object(inherits["a" /* default */])(Input, _Component);
var _super = inputs_createSuper(Input);
Object(classCallCheck["a" /* default */])(this, Input);
_this = _super.apply(this, arguments);
_this.handleBlur = _this.handleBlur.bind(Object(assertThisInitialized["a" /* default */])(_this));
_this.handleChange = _this.handleChange.bind(Object(assertThisInitialized["a" /* default */])(_this));
_this.handleKeyDown = _this.handleKeyDown.bind(Object(assertThisInitialized["a" /* default */])(_this));
Object(createClass["a" /* default */])(Input, [{
value: function handleBlur() {
var _this$props = this.props,
value = _this$props.value,
valueKey = _this$props.valueKey,
onChange = _this$props.onChange,
source = _this$props.source;