additionalProps = Object(objectWithoutProperties["a" /* default */])(_ref, ["className", "isSelected", "selectedIconProps", "tooltipText"]);
var optionButton = Object(external_wp_element_["createElement"])(build_module_button["a" /* default */], Object(esm_extends["a" /* default */])({
className: classnames_default()(className, 'components-circular-option-picker__option')
return Object(external_wp_element_["createElement"])("div", {
className: "components-circular-option-picker__option-wrapper"
}, tooltipText ? Object(external_wp_element_["createElement"])(build_module_tooltip["a" /* default */], {
}, optionButton) : optionButton, isSelected && Object(external_wp_element_["createElement"])(build_module_icon["a" /* default */], Object(esm_extends["a" /* default */])({
icon: check["a" /* default */]
}, selectedIconProps ? selectedIconProps : {})));
function DropdownLinkAction(_ref2) {
var buttonProps = _ref2.buttonProps,
className = _ref2.className,
dropdownProps = _ref2.dropdownProps,
linkText = _ref2.linkText;
return Object(external_wp_element_["createElement"])(Dropdown, Object(esm_extends["a" /* default */])({
className: classnames_default()('components-circular-option-picker__dropdown-link-action', className),
renderToggle: function renderToggle(_ref3) {
var isOpen = _ref3.isOpen,
onToggle = _ref3.onToggle;
return Object(external_wp_element_["createElement"])(build_module_button["a" /* default */], Object(esm_extends["a" /* default */])({
}, buttonProps), linkText);
function ButtonAction(_ref4) {
var className = _ref4.className,
children = _ref4.children,
additionalProps = Object(objectWithoutProperties["a" /* default */])(_ref4, ["className", "children"]);
return Object(external_wp_element_["createElement"])(build_module_button["a" /* default */], Object(esm_extends["a" /* default */])({
className: classnames_default()('components-circular-option-picker__clear', className),
}, additionalProps), children);
function CircularOptionPicker(_ref5) {
var actions = _ref5.actions,
className = _ref5.className,
children = _ref5.children;
return Object(external_wp_element_["createElement"])("div", {
className: classnames_default()('components-circular-option-picker', className)
}, Object(external_wp_element_["createElement"])("div", {
className: "components-circular-option-picker__swatches"
}, options), children, actions && Object(external_wp_element_["createElement"])("div", {
className: "components-circular-option-picker__custom-clear-wrapper"
CircularOptionPicker.Option = Option;
CircularOptionPicker.ButtonAction = ButtonAction;
CircularOptionPicker.DropdownLinkAction = DropdownLinkAction;
// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/classCallCheck.js
var classCallCheck = __webpack_require__("1OyB");
// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/createClass.js
var createClass = __webpack_require__("vuIU");
// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js
var assertThisInitialized = __webpack_require__("JX7q");
// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/inherits.js
var inherits = __webpack_require__("Ji7U");
// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn.js
var possibleConstructorReturn = __webpack_require__("md7G");
// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/getPrototypeOf.js
var getPrototypeOf = __webpack_require__("foSv");
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/utils.js
* 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
* Given a hex color, get all other color properties (rgb, alpha, etc).
* @param {Object|string} data A hex color string or an object with a hex property
* @param {string} oldHue A reference to the hue of the previous color, otherwise dragging the saturation to zero will reset the current hue to zero as well. See https://github.com/casesandberg/react-color/issues/29#issuecomment-132686909.
* @return {Object} An object of different color representations.
function colorToState() {
var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var oldHue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var color = data.hex ? tinycolor_default()(data.hex) : tinycolor_default()(data);
hsl.h = Math.round(hsl.h);
hsl.s = Math.round(hsl.s * 100);
hsl.l = Math.round(hsl.l * 100);
hsv.h = Math.round(hsv.h);
hsv.s = Math.round(hsv.s * 100);
hsv.v = Math.round(hsv.v * 100);
var transparent = hex === '000000' && rgb.a === 0;
hex: transparent ? 'transparent' : "#".concat(hex),
oldHue: data.h || oldHue || hsl.h,
* Get the top/left offsets of a point in a container, also returns the container width/height.
* @param {Event} e Mouse or touch event with a location coordinate.
* @param {HTMLElement} container The container div, returned point is relative to this container.
* @return {Object} An object of the offset positions & container size.
function getPointOffset(e, container) {
var _container$getBoundin = container.getBoundingClientRect(),
containerLeft = _container$getBoundin.left,
containerTop = _container$getBoundin.top,
width = _container$getBoundin.width,
height = _container$getBoundin.height;
var x = typeof e.pageX === 'number' ? e.pageX : e.touches[0].pageX;
var y = typeof e.pageY === 'number' ? e.pageY : e.touches[0].pageY;
var left = x - (containerLeft + window.pageXOffset);
var top = y - (containerTop + window.pageYOffset);
} else if (left > width) {
} else if (top > height) {
* Check if a string is a valid hex color code.
* @param {string} hex A possible hex color.
* @return {boolean} True if the color is a valid hex color.
function isValidHex(hex) {
var lh = String(hex).charAt(0) === '#' ? 1 : 0;
return hex.length !== 4 + lh && hex.length < 7 + lh && tinycolor_default()(hex).isValid();
* Check an object for any valid color properties.
* @param {Object} data A possible object representing a color.
* @return {Object|boolean} If a valid representation of color, returns the data object. Otherwise returns false.
function simpleCheckForValidColor(data) {
var keysToCheck = ['r', 'g', 'b', 'a', 'h', 's', 'l', 'v'];
Object(external_lodash_["each"])(keysToCheck, function (letter) {
if (!isNaN(data[letter])) {
return checked === passed ? data : false;
* Calculate the current alpha based on a mouse or touch event
* @param {Event} e A mouse or touch event on the alpha bar.
* @param {Object} props The current component props
* @param {HTMLElement} container The container div for the alpha bar graph.
* @return {Object|null} If the alpha value has changed, returns a new color object.
function calculateAlphaChange(e, props, container) {
var _getPointOffset = getPointOffset(e, container),
left = _getPointOffset.left,
width = _getPointOffset.width;
var a = left < 0 ? 0 : Math.round(left * 100 / width) / 100;
* Calculate the current hue based on a mouse or touch event
* @param {Event} e A mouse or touch event on the hue bar.
* @param {Object} props The current component props
* @param {HTMLElement} container The container div for the hue bar graph.
* @return {Object|null} If the hue value has changed, returns a new color object.
function calculateHueChange(e, props, container) {
var _getPointOffset2 = getPointOffset(e, container),
left = _getPointOffset2.left,
width = _getPointOffset2.width;
var percent = left * 100 / width;
var h = left >= width ? 359 : 360 * percent / 100;
* Calculate the current saturation & brightness based on a mouse or touch event
* @param {Event} e A mouse or touch event on the saturation graph.
* @param {Object} props The current component props
* @param {HTMLElement} container The container div for the 2D saturation graph.
* @return {Object} Returns a new color object.
function calculateSaturationChange(e, props, container) {
var _getPointOffset3 = getPointOffset(e, container),
top = _getPointOffset3.top,
left = _getPointOffset3.left,
width = _getPointOffset3.width,
height = _getPointOffset3.height;
var saturation = left < 0 ? 0 : left * 100 / width;
var bright = top >= height ? 0 : -(top * 100 / height) + 100; // `v` values less than 1 are considered in the [0,1] range, causing unexpected behavior at the bottom
// of the chart. To fix this, we assume any value less than 1 should be 0 brightness.
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/keyboard-shortcuts/index.js
function KeyboardShortcut(_ref) {
var target = _ref.target,
callback = _ref.callback,
shortcut = _ref.shortcut,
bindGlobal = _ref.bindGlobal,
eventName = _ref.eventName;
Object(external_wp_compose_["useKeyboardShortcut"])(shortcut, callback, {
function KeyboardShortcuts(_ref2) {
var children = _ref2.children,
shortcuts = _ref2.shortcuts,
bindGlobal = _ref2.bindGlobal,
eventName = _ref2.eventName;
var target = Object(external_wp_element_["useRef"])();
var element = Object(external_lodash_["map"])(shortcuts, function (callback, shortcut) {
return Object(external_wp_element_["createElement"])(KeyboardShortcut, {
}); // Render as non-visual if there are no children pressed. Keyboard
// events will be bound to the document instead.
if (!external_wp_element_["Children"].count(children)) {
return Object(external_wp_element_["createElement"])("div", {
/* harmony default export */ var keyboard_shortcuts = (KeyboardShortcuts);
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/alpha.js
function _createSuper(Derived) { var hasNativeReflectConstruct = _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 _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 alpha_Alpha = /*#__PURE__*/function (_Component) {
Object(inherits["a" /* default */])(Alpha, _Component);
var _super = _createSuper(Alpha);
Object(classCallCheck["a" /* default */])(this, Alpha);
_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 */])(Alpha, [{
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.unbindEventListeners();
value: function increase() {
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;
amount = parseInt(amount * 100, 10);
a: (parseInt(hsl.a * 100, 10) + amount) / 100,
value: function decrease() {
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 = parseInt(hsl.a * 100, 10) - parseInt(amount * 100, 10);
a: hsl.a <= amount ? 0 : intValue / 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 = calculateAlphaChange(e, this.props, this.container.current);
It is recommended that you Edit text format, this type of Fix handles quite a lot in one request
