primevue/inputcolor/index.mjs

PrimeVue is a premium UI library for Vue featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, wh

import BaseEditableHolder from '@primevue/core/baseeditableholder';
import InputColorStyle from 'primevue/inputcolor/style';
import { renderSlot } from 'vue';

var script$1 = {
  name: 'BaseInputColor',
  "extends": BaseEditableHolder,
  props: {
    format: {
      type: String,
      "default": 'hsba'
    }
  },
  style: InputColorStyle,
  provide: function provide() {
    return {
      $pcInputColor: this,
      $parentInstance: this
    };
  }
};

function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = true, o = false; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = true, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof$1(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(t.prototype ), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
function _get() { return _get = "undefined" != typeof Reflect && Reflect.get ? Reflect.get.bind() : function (e, t, r) { var p = _superPropBase(e, t); if (p) { var n = Object.getOwnPropertyDescriptor(p, t); return n.get ? n.get.call(arguments.length < 3 ? e : r) : n.value; } }, _get.apply(null, arguments); }
function _superPropBase(t, o) { for (; !{}.hasOwnProperty.call(t, o) && null !== (t = _getPrototypeOf(t));); return t; }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: true, configurable: true } }), Object.defineProperty(t, "prototype", { writable: false }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _typeof$1(o) { "@babel/helpers - typeof"; return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$1(o); }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || false, o.configurable = true, "value" in o && (o.writable = true), Object.defineProperty(e, _toPropertyKey$1(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: false }), e; }
function _toPropertyKey$1(t) { var i = _toPrimitive$1(t, "string"); return "symbol" == _typeof$1(i) ? i : i + ""; }
function _toPrimitive$1(t, r) { if ("object" != _typeof$1(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof$1(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return (String )(t); }
// CONSTANTS
var RGB_MAX = 255;
// Matches hsb(...) or hsba(...)
var HSB_REGEX = /hsb\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d+(?:.\d+)?%)\)|hsba\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d(.\d+)?)\)/;
// Matches hsl(...) or hsla(...)
var HSL_REGEX = /hsl\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d+(?:.\d+)?%)\)|hsla\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d(.\d+)?)\)/;
// Matches #rgb, #rgba, #rrggbb, #rrggbbaa (hash optional)
var HEX_REGEX = /^#?([a-fA-F0-9]{3,8})$/;
// Matches rgb(...) or rgba(...)
var RGB_REGEX = /^rgba?\(\s*([^)]+)\s*\)$/;
// Matches oklch(L C H / a)
var OKLCH_REGEX = /oklch\(\s*([\d.]+)%?\s+([\d.]+)\s+([\d.]+)(deg)?(?:\s*\/\s*([\d.]+))?\)/i;

// UTILS
function clamp(value, min, max) {
  return Math.min(Math.max(value, min), max);
}
var multiplyMatrices = function multiplyMatrices(A, B) {
  return [A[0] * B[0] + A[1] * B[1] + A[2] * B[2], A[3] * B[0] + A[4] * B[1] + A[5] * B[2], A[6] * B[0] + A[7] * B[1] + A[8] * B[2]];
};

/**
 * Snaps a value to the nearest step increment within min/max bounds
 * @example snap(23.7, 0, 100, 5) => 25
 * @example snap(0.234, 0, 1, 0.01) => 0.23
 */
function snap(value, min, max, step) {
  var clamped = clamp(value, min, max);
  var offset = clamped - min;
  var steps = Math.round(offset / step);
  var snapped = min + steps * step;
  var precision = (step.toString().split('.')[1] || '').length;
  return parseFloat(snapped.toFixed(precision));
}
function getNativeFormatForChannel(channel) {
  switch (channel) {
    case 'hue':
    case 'saturation':
    case 'brightness':
      return 'hsba';
    case 'lightness':
      return 'hsla';
    case 'red':
    case 'green':
    case 'blue':
      return 'rgba';
    case 'L':
    case 'C':
    case 'H':
      return 'oklcha';
    case 'alpha':
      return undefined;
    default:
      return undefined;
  }
}
var Color = /*#__PURE__*/function () {
  function Color() {
    _classCallCheck(this, Color);
  }
  return _createClass(Color, [{
    key: "getChannelValue",
    value: function getChannelValue(channel) {
      if (channel in this) {
        return this[channel];
      }
      var nativeFormat = getNativeFormatForChannel(channel);
      if (nativeFormat) {
        return this.toFormat(nativeFormat).getChannelValue(channel);
      }
      throw new Error("Unknown color channel: ".concat(channel));
    }
  }, {
    key: "withChannelValue",
    value: function withChannelValue(channel, value) {
      if (channel in this) {
        var _this$getChannelRange = this.getChannelRange(channel),
          min = _this$getChannelRange.min,
          max = _this$getChannelRange.max;
        var cloned = this.clone();
        cloned[channel] = clamp(value, min, max);
        return cloned;
      }
      var nativeFormat = getNativeFormatForChannel(channel);
      if (nativeFormat) {
        return this.toFormat(nativeFormat).withChannelValue(channel, value).toFormat(this.getFormat());
      }
      throw new Error("Unknown color channel: ".concat(channel));
    }
  }, {
    key: "getChannelRange",
    value: function getChannelRange(channel) {
      var nativeFormat = getNativeFormatForChannel(channel);
      if (nativeFormat) {
        return this.toFormat(nativeFormat).getChannelRange(channel);
      }
      if (channel === 'alpha') {
        return {
          min: 0,
          max: 1,
          step: 0.01
        };
      }
      throw new Error("Unknown color channel: ".concat(channel));
    }
  }, {
    key: "getSpaceAxes",
    value: function getSpaceAxes(xyChannels) {
      var xChannel = xyChannels.xChannel,
        yChannel = xyChannels.yChannel;
      if (xChannel === yChannel) {
        throw new Error('xChannel and yChannel cannot be the same');
      }
      var zChannel = this.getChannels().find(function (channel) {
        return channel !== xChannel && channel !== yChannel;
      });
      if (!zChannel) {
        throw new Error('zChannel not found');
      }
      return {
        xChannel: xChannel,
        yChannel: yChannel,
        zChannel: zChannel
      };
    }
  }, {
    key: "incChannelValue",
    value: function incChannelValue(channel, step) {
      var _this$getChannelRange2 = this.getChannelRange(channel),
        min = _this$getChannelRange2.min,
        max = _this$getChannelRange2.max,
        availableStep = _this$getChannelRange2.step;
      var value = snap(clamp(this.getChannelValue(channel) + step, min, max), min, max, availableStep);
      return this.withChannelValue(channel, value);
    }
  }, {
    key: "decChannelValue",
    value: function decChannelValue(channel, step) {
      return this.incChannelValue(channel, -step);
    }
  }]);
}();
var HSBColor = /*#__PURE__*/function (_Color) {
  function HSBColor(hue, saturation, brightness, alpha) {
    var _this;
    _classCallCheck(this, HSBColor);
    _this = _callSuper(this, HSBColor);
    _this.hue = hue;
    _this.saturation = saturation;
    _this.brightness = brightness;
    _this.alpha = alpha;
    return _this;
  }
  _inherits(HSBColor, _Color);
  return _createClass(HSBColor, [{
    key: "toRGB",
    value: function toRGB() {
      var h = this.hue;
      var s = this.saturation / 100;
      var b = this.brightness / 100;
      function f(n) {
        var k = (n + h / 60) % 6;
        return b - b * s * Math.max(0, Math.min(k, 4 - k, 1));
      }
      return new RGBColor(Math.round(f(5) * RGB_MAX), Math.round(f(3) * RGB_MAX), Math.round(f(1) * RGB_MAX), Number(this.alpha.toFixed(2)));
    }
  }, {
    key: "toHSL",
    value: function toHSL() {
      var h = this.hue;
      var s = this.saturation / 100;
      var b = this.brightness / 100;
      var l = b * (1 - s / 2);
      if (l === 0 || l === 1) {
        s = 0;
      } else {
        s = (b - l) / Math.min(l, 1 - l);
      }
      return new HSLColor(Number(h.toFixed(2)), Number((s * 100).toFixed(2)), Number((l * 100).toFixed(2)), Number(this.alpha.toFixed(2)));
    }
  }, {
    key: "toFormat",
    value: function toFormat(format) {
      switch (format) {
        case 'hsba':
          return this;
        case 'rgba':
          return this.toRGB();
        case 'hsla':
          return this.toHSL();
        case 'oklcha':
          return this.toRGB().toFormat('oklcha');
        default:
          throw new Error("Invalid format: ".concat(format));
      }
    }
  }, {
    key: "toString",
    value: function toString(format) {
      switch (format) {
        case 'css':
          return this.toHSL().toString('css');
        case 'hex':
          return this.toRGB().toString('hex');
        case 'hexa':
          return this.toRGB().toString('hexa');
        case 'hsb':
          return "hsb(".concat(this.hue, ", ").concat(this.saturation.toFixed(2), "%, ").concat(this.brightness.toFixed(2), "%)");
        case 'hsba':
          return "hsba(".concat(this.hue, ", ").concat(this.saturation.toFixed(2), "%, ").concat(this.brightness.toFixed(2), "%, ").concat(this.alpha, ")");
        case 'hsl':
          return this.toHSL().toString('hsl');
        case 'rgb':
          return this.toRGB().toString('rgb');
        case 'oklch':
          return this.toRGB().toFormat('oklcha').toString('oklch');
        default:
          return this.toFormat(format).toString(format);
      }
    }
  }, {
    key: "toJSON",
    value: function toJSON() {
      return {
        hue: this.hue,
        saturation: this.saturation,
        brightness: this.brightness,
        alpha: this.alpha
      };
    }
  }, {
    key: "clone",
    value: function clone() {
      return new HSBColor(this.hue, this.saturation, this.brightness, this.alpha);
    }
  }, {
    key: "getChannelRange",
    value: function getChannelRange(channel) {
      switch (channel) {
        case 'hue':
          return {
            min: 0,
            max: 360,
            step: 1
          };
        case 'saturation':
        case 'brightness':
          return {
            min: 0,
            max: 100,
            step: 1
          };
        case 'alpha':
          return {
            min: 0,
            max: 1,
            step: 0.01
          };
        default:
          return _superPropGet(HSBColor, "getChannelRange", this, 3)([channel]);
      }
    }
  }, {
    key: "getFormat",
    value: function getFormat() {
      return 'hsba';
    }
  }, {
    key: "getChannels",
    value: function getChannels() {
      return ['hue', 'saturation', 'brightness'];
    }
  }], [{
    key: "parse",
    value: function parse(value) {
      var _match$;
      var match = value.match(HSB_REGEX);
      if (!match) return undefined;
      var _split$map = ((_match$ = match[1]) !== null && _match$ !== void 0 ? _match$ : match[2]).split(',').map(function (n) {
          return Number(n.trim().replace('%', ''));
        }),
        _split$map2 = _slicedToArray(_split$map, 4),
        h = _split$map2[0],
        s = _split$map2[1],
        b = _split$map2[2],
        a = _split$map2[3];
      return new HSBColor(h % 360, clamp(s, 0, 100), clamp(b, 0, 100), clamp(a !== null && a !== void 0 ? a : 1, 0, 1));
    }
  }]);
}(Color);
var HSLColor = /*#__PURE__*/function (_Color2) {
  function HSLColor(hue, saturation, lightness, alpha) {
    var _this2;
    _classCallCheck(this, HSLColor);
    _this2 = _callSuper(this, HSLColor);
    _this2.hue = hue;
    _this2.saturation = saturation;
    _this2.lightness = lightness;
    _this2.alpha = alpha;
    return _this2;
  }
  _inherits(HSLColor, _Color2);
  return _createClass(HSLColor, [{
    key: "toRGB",
    value: function toRGB() {
      var h = this.hue;
      var s = this.saturation / 100;
      var l = this.lightness / 100;
      function f(n) {
        var k = (n + h / 30) % 12;
        var a = s * Math.min(l, 1 - l);
        return l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
      }
      return new RGBColor(Math.round(f(0) * RGB_MAX), Math.round(f(8) * RGB_MAX), Math.round(f(4) * RGB_MAX), Number(this.alpha.toFixed(2)));
    }
  }, {
    key: "toHSB",
    value: function toHSB() {
      var h = this.hue;
      var s = this.saturation / 100;
      var l = this.lightness / 100;
      var b = l + s * Math.min(l, 1 - l);
      if (b === 0) {
        s = 0;
      } else {
        s = 2 * (1 - l / b);
      }
      return new HSBColor(Number(h.toFixed(2)), Number((s * 100).toFixed(2)), Number((b * 100).toFixed(2)), Number(this.alpha.toFixed(2)));
    }
  }, {
    key: "toFormat",
    value: function toFormat(format) {
      switch (format) {
        case 'hsla':
          return this;
        case 'rgba':
          return this.toRGB();
        case 'hsba':
          return this.toHSB();
        case 'oklcha':
          return this.toRGB().toFormat('oklcha');
        default:
          throw new Error("Invalid format: ".concat(format));
      }
    }
  }, {
    key: "toString",
    value: function toString(format) {
      switch (format) {
        case 'hex':
          return this.toRGB().toString('hex');
        case 'hexa':
          return this.toRGB().toString('hexa');
        case 'hsl':
          return "hsl(".concat(this.hue, ", ").concat(this.saturation.toFixed(2), "%, ").concat(this.lightness.toFixed(2), "%)");
        case 'css':
        case 'hsla':
          return "hsla(".concat(this.hue, ", ").concat(this.saturation.toFixed(2), "%, ").concat(this.lightness.toFixed(2), "%, ").concat(this.alpha, ")");
        case 'rgb':
          return this.toRGB().toString('rgb');
        case 'hsb':
          return this.toHSB().toString('hsb');
        case 'oklch':
          return this.toRGB().toFormat('oklcha').toString('oklch');
        default:
          return this.toFormat(format).toString(format);
      }
    }
  }, {
    key: "toJSON",
    value: function toJSON() {
      return {
        hue: this.hue,
        saturation: this.saturation,
        lightness: this.lightness,
        alpha: this.alpha
      };
    }
  }, {
    key: "clone",
    value: function clone() {
      return new HSLColor(this.hue, this.saturation, this.lightness, this.alpha);
    }
  }, {
    key: "getChannelRange",
    value: function getChannelRange(channel) {
      switch (channel) {
        case 'hue':
          return {
            min: 0,
            max: 360,
            step: 1
          };
        case 'saturation':
        case 'lightness':
          return {
            min: 0,
            max: 100,
            step: 1
          };
        case 'alpha':
          return {
            min: 0,
            max: 1,
            step: 0.01
          };
        default:
          return _superPropGet(HSLColor, "getChannelRange", this, 3)([channel]);
      }
    }
  }, {
    key: "getFormat",
    value: function getFormat() {
      return 'hsla';
    }
  }, {
    key: "getChannels",
    value: function getChannels() {
      return ['hue', 'saturation', 'lightness'];
    }
  }], [{
    key: "parse",
    value: function parse(value) {
      var _split$map3, _ref3;
      var match = value.match(HSL_REGEX);
      if (!match) return undefined;
      var _ref = (_split$map3 = (_ref3 = match[1] || match[2]) === null || _ref3 === void 0 ? void 0 : _ref3.split(',').map(function (n) {
          return Number(n.trim().replace('%', ''));
        })) !== null && _split$map3 !== void 0 ? _split$map3 : [],
        _ref2 = _slicedToArray(_ref, 4),
        h = _ref2[0],
        s = _ref2[1],
        l = _ref2[2],
        a = _ref2[3];
      return new HSLColor(h % 360, clamp(s, 0, 100), clamp(l, 0, 100), clamp(a !== null && a !== void 0 ? a : 1, 0, 1));
    }
  }]);
}(Color);
var RGBColor = /*#__PURE__*/function (_Color3) {
  function RGBColor(red, green, blue, alpha) {
    var _this3;
    _classCallCheck(this, RGBColor);
    _this3 = _callSuper(this, RGBColor);
    _this3.red = red;
    _this3.green = green;
    _this3.blue = blue;
    _this3.alpha = alpha;
    return _this3;
  }
  _inherits(RGBColor, _Color3);
  return _createClass(RGBColor, [{
    key: "toHSB",
    value: function toHSB() {
      var r = this.red / RGB_MAX,
        g = this.green / RGB_MAX,
        b = this.blue / RGB_MAX;
      var mmax = Math.max(r, g, b);
      var mmin = Math.min(r, g, b);
      var chroma = mmax - mmin;
      var brightness = mmax;
      var saturation = mmax === 0 ? 0 : chroma / mmax;
      var hue = 0;
      if (chroma !== 0) {
        switch (mmax) {
          case r:
            hue = (g - b) / chroma % 6;
            break;
          case g:
            hue = (b - r) / chroma + 2;
            break;
          case b:
            hue = (r - g) / chroma + 4;
            break;
        }
        hue *= 60;
        if (hue < 0) {
          hue += 360;
        }
      }
      return new HSBColor(Number(hue.toFixed(2)), Number((saturation * 100).toFixed(2)), Number((brightness * 100).toFixed(2)), Number(this.alpha.toFixed(2)));
    }
  }, {
    key: "toHSL",
    value: function toHSL() {
      var r = this.red / RGB_MAX,
        g = this.green / RGB_MAX,
        b = this.blue / RGB_MAX;
      var mmax = Math.max(r, g, b);
      var mmin = Math.min(r, g, b);
      var lightness = (mmax + mmin) / 2;
      var chroma = mmax - mmin;
      var hue = 0;
      // eslint-disable-next-line no-useless-assignment
      var saturation = -1;
      if (chroma !== 0) {
        switch (mmax) {
          case r:
            hue = (g - b) / chroma % 6;
            break;
          case g:
            hue = (b - r) / chroma + 2;
            break;
          case b:
            hue = (r - g) / chroma + 4;
            break;
        }
        hue *= 60;
        if (hue < 0) {
          hue += 360;
        }
      }
      if (lightness === 0 || lightness === 1) {
        saturation = 0;
      } else {
        saturation = chroma / (1 - Math.abs(2 * mmax - chroma - 1));
      }
      return new HSLColor(Number(hue.toFixed(2)), Number((saturation * 100).toFixed(2)), Number((lightness * 100).toFixed(2)), Number(this.alpha.toFixed(2)));
    }
  }, {
    key: "toOKLCH",
    value: function toOKLCH() {
      var rgb = [this.red / RGB_MAX, this.green / RGB_MAX, this.blue / RGB_MAX];
      var rgbLinear = rgb.map(function (c) {
        return Math.abs(c) <= 0.04045 ? c / 12.92 : (c < 0 ? -1 : 1) * Math.pow((Math.abs(c) + 0.055) / 1.055, 2.4);
      });
      var xyz = multiplyMatrices([0.41239079926595934, 0.357584339383878, 0.1804807884018343, 0.21263900587151027, 0.715168678767756, 0.07219231536073371, 0.01933081871559182, 0.11919477979462598, 0.9505321522496607], rgbLinear);
      var LMS = multiplyMatrices([0.819022437996703, 0.3619062600528904, -0.1288737815209879, 0.0329836539323885, 0.9292868615863434, 0.0361446663506424, 0.0481771893596242, 0.2642395317527308, 0.6335478284694309], xyz);
      var LMSg = LMS.map(function (val) {
        return Math.cbrt(val);
      });
      var _multiplyMatrices = multiplyMatrices([0.210454268309314, 0.7936177747023054, -0.0040720430116193, 1.9779985324311684, -2.42859224204858, 0.450593709617411, 0.0259040424655478, 0.7827717124575296, -0.8086757549230774], LMSg),
        _multiplyMatrices2 = _slicedToArray(_multiplyMatrices, 3),
        L = _multiplyMatrices2[0],
        a = _multiplyMatrices2[1],
        b = _multiplyMatrices2[2];
      var C = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
      var H = Math.abs(a) < 0.0002 && Math.abs(b) < 0.0002 ? NaN : (Math.atan2(b, a) * 180 / Math.PI % 360 + 360) % 360;
      var outL = Number(Math.min(1, Math.max(0, L)).toFixed(4));
      var outC = Number(C.toFixed(4));
      var outH = Number.isNaN(H) ? NaN : Number(H.toFixed(2));
      return new OKLCHColor(outL, outC, outH, Number(this.alpha.toFixed(2)));
    }
  }, {
    key: "toHexInt",
    value: function toHexInt() {
      return this.red << 16 | this.green << 8 | this.blue;
    }
  }, {
    key: "toFormat",
    value: function toFormat(format) {
      switch (format) {
        case 'rgba':
          return this;
        case 'hsla':
          return this.toHSL();
        case 'hsba':
          return this.toHSB();
        case 'oklcha':
          return this.toOKLCH();
        default:
          throw new Error("Invalid format: ".concat(format));
      }
    }
  }, {
    key: "toString",
    value: function toString(format) {
      switch (format) {
        case 'hex':
          return "#".concat(this.red.toString(16).padStart(2, '0')).concat(this.green.toString(16).padStart(2, '0')).concat(this.blue.toString(16).padStart(2, '0'));
        case 'hexa':
          return "#".concat(this.red.toString(16).padStart(2, '0')).concat(this.green.toString(16).padStart(2, '0')).concat(this.blue.toString(16).padStart(2, '0')).concat(Math.round(this.alpha * RGB_MAX).toString(16).padStart(2, '0'));
        case 'rgb':
          return "rgb(".concat(this.red, ", ").concat(this.green, ", ").concat(this.blue, ")");
        case 'rgba':
        case 'css':
          return "rgba(".concat(this.red, ", ").concat(this.green, ", ").concat(this.blue, ", ").concat(this.alpha, ")");
        case 'hsl':
          return this.toHSL().toString('hsl');
        case 'hsb':
          return this.toHSB().toString('hsb');
        case 'oklch':
          return this.toOKLCH().toString('oklch');
        default:
          return this.toFormat(format).toString(format);
      }
    }
  }, {
    key: "toJSON",
    value: function toJSON() {
      return {
        red: this.red,
        green: this.green,
        blue: this.blue,
        alpha: this.alpha
      };
    }
  }, {
    key: "clone",
    value: function clone() {
      return new RGBColor(this.red, this.green, this.blue, this.alpha);
    }
  }, {
    key: "getChannelRange",
    value: function getChannelRange(channel) {
      switch (channel) {
        case 'red':
        case 'green':
        case 'blue':
          return {
            min: 0,
            max: RGB_MAX,
            step: 1
          };
        case 'alpha':
          return {
            min: 0,
            max: 1,
            step: 0.01
          };
        default:
          return _superPropGet(RGBColor, "getChannelRange", this, 3)([channel]);
      }
    }
  }, {
    key: "getFormat",
    value: function getFormat() {
      return 'rgba';
    }
  }, {
    key: "getChannels",
    value: function getChannels() {
      return ['red', 'green', 'blue'];
    }
  }], [{
    key: "parse",
    value: function parse(value) {
      var _this$parseHexColor;
      if (!value) return undefined;
      var input = value.trim();
      return (_this$parseHexColor = this.parseHexColor(input)) !== null && _this$parseHexColor !== void 0 ? _this$parseHexColor : this.parseRgbFunction(input);
    }
  }, {
    key: "expandShortHex",
    value: function expandShortHex(hex) {
      return hex.split('').map(function (c) {
        return c + c;
      }).join('');
    }
  }, {
    key: "parseHexColor",
    value: function parseHexColor(input) {
      var match = input.match(HEX_REGEX);
      if (!match) return undefined;
      var hex = match[1];

      // Expand shorthand (#abc -> #aabbcc, #abcd -> #aabbccdd)
      if (hex.length <= 4) {
        hex = this.expandShortHex(hex);
      }
      if (![6, 8].includes(hex.length)) return undefined;
      var r = parseInt(hex.slice(0, 2), 16);
      var g = parseInt(hex.slice(2, 4), 16);
      var b = parseInt(hex.slice(4, 6), 16);
      var a = hex.length === 8 ? parseInt(hex.slice(6, 8), 16) / RGB_MAX : 1;
      return new RGBColor(r, g, b, a);
    }
  }, {
    key: "parseRgbFunction",
    value: function parseRgbFunction(input) {
      var match = input.match(RGB_REGEX);
      if (!(match !== null && match !== void 0 && match[1])) return undefined;
      var _match$1$split$map = match[1].split(',').map(function (v) {
          return v.trim();
        }),
        _match$1$split$map2 = _slicedToArray(_match$1$split$map, 4),
        rStr = _match$1$split$map2[0],
        gStr = _match$1$split$map2[1],
        bStr = _match$1$split$map2[2],
        aStr = _match$1$split$map2[3];
      var r = clamp(Number(rStr), 0, RGB_MAX);
      var g = clamp(Number(gStr), 0, RGB_MAX);
      var b = clamp(Number(bStr), 0, RGB_MAX);
      var a = aStr !== undefined ? clamp(Number(aStr), 0, 1) : 1;
      if ([r, g, b, a].some(function (v) {
        return Number.isNaN(v);
      })) return undefined;
      return new RGBColor(r, g, b, a);
    }
  }]);
}(Color);
var OKLCHColor = /*#__PURE__*/function (_Color4) {
  function OKLCHColor(L, C, H, alpha) {
    var _this4;
    _classCallCheck(this, OKLCHColor);
    _this4 = _callSuper(this, OKLCHColor);
    _this4.L = L; // 0–1
    _this4.C = C; // ~0–0.4 typical usable range
    _this4.H = H; // 0–360
    _this4.alpha = alpha; // 0–1
    return _this4;
  }
  _inherits(OKLCHColor, _Color4);
  return _createClass(OKLCHColor, [{
    key: "toRGB",
    value: function toRGB() {
      var L = this.L;
      var a = Number.isNaN(this.H) ? 0 : this.C * Math.cos(this.H * Math.PI / 180);
      var b = Number.isNaN(this.H) ? 0 : this.C * Math.sin(this.H * Math.PI / 180);
      var LMSg = multiplyMatrices([1, 0.3963377774, 0.2158037573, 1, -0.1055613458, -0.0638541728, 1, -0.0894841775, -1.291485548], [L, a, b]);
      var LMS = LMSg.map(function (v) {
        return Math.pow(v, 3);
      });
      var xyz = multiplyMatrices([1.2268798758, -0.5578149945, 0.2813910457, -0.0405757452, 1.1122868033, -0.0717110581, -0.0763729367, -0.4214933324, 1.5869240198], LMS);
      var _multiplyMatrices3 = multiplyMatrices([3.240969942, -1.537383178, -0.49861076, -0.969243636, 1.875967502, 0.041555057, 0.05563008, -0.203976959, 1.056971514], xyz),
        _multiplyMatrices4 = _slicedToArray(_multiplyMatrices3, 3),
        r = _multiplyMatrices4[0],
        g = _multiplyMatrices4[1],
        b2 = _multiplyMatrices4[2];
      var _map = [r, g, b2].map(function (c) {
        return Math.abs(c) > 0.0031308 ? (c < 0 ? -1 : 1) * (1.055 * Math.pow(Math.abs(c), 1 / 2.4) - 0.055) : 12.92 * c;
      });
      var _map2 = _slicedToArray(_map, 3);
      r = _map2[0];
      g = _map2[1];
      b2 = _map2[2];
      return new RGBColor(Math.round(clamp(r, 0, 1) * RGB_MAX), Math.round(clamp(g, 0, 1) * RGB_MAX), Math.round(clamp(b2, 0, 1) * RGB_MAX), Number(this.alpha.toFixed(2)));
    }
  }, {
    key: "toJSON",
    value: function toJSON() {
      return {
        L: this.L,
        C: this.C,
        H: this.H,
        alpha: this.alpha
      };
    }
  }, {
    key: "clone",
    value: function clone() {
      return new OKLCHColor(this.L, this.C, this.H, this.alpha);
    }
  }, {
    key: "toFormat",
    value: function toFormat(format) {
      switch (format) {
        case 'oklcha':
          return this;
        case 'rgba':
          return this.toRGB();
        case 'hsla':
          return this.toRGB().toFormat('hsla');
        case 'hsba':
          return this.toRGB().toFormat('hsba');
        default:
          throw new Error("Invalid format: ".concat(format));
      }
    }
  }, {
    key: "toString",
    value: function toString(format) {
      switch (format) {
        case 'hex':
          return this.toRGB().toString('hex');
        case 'hexa':
          return this.toRGB().toString('hexa');
        case 'oklch':
          {
            var l = Number.isNaN(this.L) ? 0 : Number((this.L * 100).toFixed(2));
            var c = Number.isNaN(this.C) ? 0 : Number(this.C.toFixed(4));
            var h = Number.isNaN(this.H) ? 0 : Number(this.H.toFixed(2));
            return "oklch(".concat(l, "% ").concat(c, " ").concat(h, ")");
          }
        case 'oklcha':
        case 'css':
          {
            var _l = Number.isNaN(this.L) ? 0 : Number((this.L * 100).toFixed(2));
            var _c = Number.isNaN(this.C) ? 0 : Number(this.C.toFixed(4));
            var _h = Number.isNaN(this.H) ? 0 : Number(this.H.toFixed(2));
            var a = Number.isNaN(this.alpha) ? 1 : Number(this.alpha.toFixed(2));
            return "oklch(".concat(_l, "% ").concat(_c, " ").concat(_h, " / ").concat(a, ")");
          }
        case 'hsl':
          return this.toRGB().toString('hsl');
        case 'hsb':
          return this.toRGB().toString('hsb');
        case 'rgb':
          return this.toRGB().toString('rgb');
        default:
          return this.toFormat(format).toString(format);
      }
    }
  }, {
    key: "getChannelRange",
    value: function getChannelRange(channel) {
      switch (channel) {
        case 'L':
          return {
            min: 0,
            max: 1,
            step: 0.01
          };
        case 'C':
          return {
            min: 0,
            max: 0.4,
            step: 0.01
          };
        case 'H':
          return {
            min: 0,
            max: 360,
            step: 1
          };
        case 'alpha':
          return {
            min: 0,
            max: 1,
            step: 0.01
          };
        default:
          return _superPropGet(OKLCHColor, "getChannelRange", this, 3)([channel]);
      }
    }
  }, {
    key: "getFormat",
    value: function getFormat() {
      return 'oklcha';
    }
  }, {
    key: "getChannels",
    value: function getChannels() {
      return ['L', 'C', 'H'];
    }
  }], [{
    key: "parse",
    value: function parse(value) {
      if (!value) return undefined;
      var m = value.trim().match(OKLCH_REGEX);
      if (!m) return;
      var l = Number(m[1]) / 100;
      var c = Number(m[2]);
      var h = Number(m[3]);
      var alpha = m[5] !== undefined ? Number(m[5]) : 1;
      return new OKLCHColor(l, c, h, alpha);
    }
  }]);
}(Color);
var parseColor = function parseColor(color) {
  var _ref4, _ref5, _ref6, _RGBColor$parse;
  var parsedColor = (_ref4 = (_ref5 = (_ref6 = (_RGBColor$parse = RGBColor.parse(color)) !== null && _RGBColor$parse !== void 0 ? _RGBColor$parse : HSLColor.parse(color)) !== null && _ref6 !== void 0 ? _ref6 : HSBColor.parse(color)) !== null && _ref5 !== void 0 ? _ref5 : OKLCHColor.parse(color)) !== null && _ref4 !== void 0 ? _ref4 : undefined;
  if (!parsedColor) {
    throw new Error("Invalid color: ".concat(color));
  }
  return parsedColor;
};
function getChannelGradient(channel, value, orientation) {
  var _value$getChannelRang = value.getChannelRange(channel),
    min = _value$getChannelRang.min,
    max = _value$getChannelRang.max;
  var direction = orientation === 'horizontal' ? 'right' : 'bottom';
  switch (channel) {
    case 'hue':
    case 'H':
      return "linear-gradient(to ".concat(direction, ", rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)");
    case 'lightness':
      {
        var start = value.withChannelValue(channel, min).toString('css');
        var middle = value.withChannelValue(channel, (max - min) / 2).toString('css');
        var end = value.withChannelValue(channel, max).toString('css');
        return "linear-gradient(to ".concat(direction, ", ").concat(start, ", ").concat(middle, ", ").concat(end, ")");
      }
    case 'L':
      {
        var _start = value.withChannelValue(channel, min).toString('css');
        var _middle = value.withChannelValue(channel, (max - min) / 2).toString('css');
        var _end = value.withChannelValue(channel, max).toString('css');
        return "linear-gradient(to ".concat(direction, ", ").concat(_start, ", ").concat(_middle, ", ").concat(_end, ")");
      }
    case 'red':
    case 'green':
    case 'blue':
    case 'C':
    case 'saturation':
    case 'brightness':
    case 'alpha':
      {
        var _start2 = value.withChannelValue(channel, min).toString('css');
        var _end2 = value.withChannelValue(channel, max).toString('css');
        return "linear-gradient(to ".concat(direction, ", ").concat(_start2, ", ").concat(_end2, ")");
      }
    default:
      throw new Error("Unknown color channel: ".concat(channel));
  }
}
function getChannelColor(color, channel) {
  switch (channel) {
    case 'hue':
      return parseColor("hsl(".concat(color.getChannelValue('hue'), ", 100%, 50%)"));
    case 'red':
    case 'green':
    case 'blue':
    case 'L':
    case 'C':
    case 'H':
    case 'lightness':
    case 'brightness':
    case 'saturation':
      return color.withChannelValue('alpha', 1);
    case 'alpha':
      {
        return color;
      }
    default:
      return color.withChannelValue('alpha', 1);
  }
}
var channelGenerators = {
  hue: function hue(color) {
    return [0, 60, 120, 180, 240, 300, 360].map(function (h) {
      return color.withChannelValue('hue', h).toString('css');
    }).join(', ');
  },
  saturation: function saturation(color) {
    return "".concat(color.withChannelValue('saturation', 0).toString('css'), ", transparent");
  },
  lightness: function lightness() {
    return 'black, transparent, white';
  },
  brightness: function brightness() {
    return 'black, transparent';
  }
};
function getAreaGradient(color, axes) {
  var _color$getSpaceAxes = color.getSpaceAxes(axes),
    xChannel = _color$getSpaceAxes.xChannel,
    zChannel = _color$getSpaceAxes.zChannel;
  var zValue = color.getChannelValue(zChannel);
  var baseFormat = color.getFormat();
  var format = baseFormat === 'rgba' || baseFormat === 'oklcha' ? 'hsba' : baseFormat;
  var base = (format === 'hsla' ? parseColor('hsl(0, 100%, 50%)') : parseColor('hsb(0, 100%, 100%)')).withChannelValue(zChannel, zValue);
  var channels = color.getChannels();
  var direction = function direction(c) {
    return c === xChannel ? 'right' : 'top';
  };
  var layers = channels.filter(function (c) {
    return c !== zChannel;
  }).map(function (c) {
    return "linear-gradient(to ".concat(direction(c), ", ").concat(channelGenerators[c](base), ")");
  }).reverse();
  if (zChannel === 'hue') {
    layers.push(base.toString('css'));
  }
  return {
    '--px-area-gradient': layers.join(', ')
  };
}
function getInputChannelValue(color, channel) {
  var format = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'hsba';
  var isHSL = color.getFormat() === 'hsla';
  switch (channel) {
    case 'hex':
      {
        if (color.getChannelValue('alpha') < color.getChannelRange('alpha').max) {
          return color.toString('hexa');
        }
        return color.toString('hex');
      }
    case 'css':
      return color.toFormat(format).toString('css');
    case 'red':
    case 'green':
    case 'blue':
      return color.toFormat('rgba').getChannelValue(channel).toString();
    case 'hue':
      return color.toFormat(isHSL ? 'hsla' : 'hsba').getChannelValue('hue').toString();
    case 'saturation':
      return color.toFormat(isHSL ? 'hsla' : 'hsba').getChannelValue('saturation').toString();
    case 'lightness':
      return color.toFormat('hsla').getChannelValue('lightness').toString();
    case 'brightness':
      return color.toFormat('hsba').getChannelValue('brightness').toString();
    case 'C':
      return color.toFormat('oklcha').getChannelValue('C').toString();
    case 'H':
      return color.toFormat('oklcha').getChannelValue('H').toString();
    case 'L':
      return color.toFormat('oklcha').getChannelValue('L').toString();
    default:
      return color.getChannelValue(channel).toString();
  }
}
function getInputChannelRange(color) {
  var channel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'hex';
  switch (channel) {
    case 'hex':
      {
        return {
          min: parseColor('#000000').toHexInt(),
          max: parseColor('#FFFFFF').toHexInt(),
          step: 1
        };
      }
    case 'css':
      return undefined;
    case 'red':
    case 'green':
    case 'blue':
      return color.toFormat('rgba').getChannelRange(channel);
    case 'hue':
    case 'lightness':
    case 'saturation':
      return color.toFormat('hsla').getChannelRange(channel);
    case 'brightness':
      return color.toFormat('hsba').getChannelRange(channel);
    case 'L':
    case 'C':
    case 'H':
      return color.toFormat('oklcha').getChannelRange(channel);
    default:
      return color.getChannelRange(channel);
  }
}

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var DEFAULT_COLOR = '#ff0000';
var script = {
  name: 'InputColor',
  "extends": script$1,
  inheritAttrs: false,
  emits: ['value-change-end'],
  data: function data() {
    return {
      isAreaDragging: false,
      parsedColor: parseColor(DEFAULT_COLOR).toFormat(this.getColorSpaceFormat(this.format))
    };
  },
  watch: {
    d_value: {
      immediate: true,
      handler: function handler(value) {
        var _this$parsedColor;
        var resolved = value !== null && value !== void 0 ? value : DEFAULT_COLOR;
        if (((_this$parsedColor = this.parsedColor) === null || _this$parsedColor === void 0 ? void 0 : _this$parsedColor.toString(this.getOutputFormat())) === resolved) {
          return;
        }
        var parsed;
        try {
          parsed = parseColor(resolved);
        } catch (_unused) {
          parsed = parseColor(DEFAULT_COLOR);
        }
        this.parsedColor = parsed.toFormat(this.getColorSpaceFormat(this.format));
      }
    },
    format: function format(newFormat) {
      var nextSpace = this.getColorSpaceFormat(newFormat);
      if (this.parsedColor.getFormat() === nextSpace) return;
      this.parsedColor = this.parsedColor.toFormat(nextSpace);
    }
  },
  methods: {
    getOutputFormat: function getOutputFormat() {
      var _this$format;
      return (_this$format = this.format) !== null && _this$format !== void 0 ? _this$format : 'hsba';
    },
    getColorSpaceFormat: function getColorSpaceFormat() {
      var format = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.format;
      switch (format) {
        case 'hex':
        case 'hexa':
        case 'rgb':
        case 'rgba':
          return 'rgba';
        case 'hsl':
        case 'hsla':
          return 'hsla';
        case 'oklch':
        case 'oklcha':
          return 'oklcha';
        case 'hsb':
        case 'hsba':
        default:
          return 'hsba';
      }
    },
    updateColor: function updateColor(nextColor, originalEvent) {
      this.parsedColor = nextColor;
      this.writeValue(nextColor.toString(this.getOutputFormat()), originalEvent);
    },
    emitValueChangeEnd: function emitValueChangeEnd(originalEvent) {
      this.$emit('value-change-end', {
        originalEvent: originalEvent,
        value: this.parsedColor.toString(this.getOutputFormat()),
        color: this.parsedColor
      });
    },
    updateChannel: function updateChannel(channel, value, originalEvent) {
      if (this.disabled) return false;
      var next;
      if (channel === 'hex' || channel === 'css') {
        if (value == null || value === '') {
          this.writeValue(null, originalEvent);
          return true;
        }
        try {
          next = parseColor(value);
        } catch (_unused2) {
          return false;
        }
      } else {
        var numericValue = parseFloat(value);
        if (Number.isNaN(numericValue)) return false;
        var working = this.toChannelColorSpace(this.getChannelColorValue(channel), channel);
        next = working.withChannelValue(channel, numericValue);
      }
      this.updateColor(next, originalEvent);
      return true;
    },
    toChannelColorSpace: function toChannelColorSpace(color, channel) {
      if (channel === 'alpha' || color.getChannels().includes(channel)) {
        return color;
      }
      switch (channel) {
        case 'hue':
        case 'saturation':
        case 'brightness':
          return color.toFormat('hsba');
        case 'lightness':
          return color.toFormat('hsla');
        case 'red':
        case 'green':
        case 'blue':
          return color.toFormat('rgba');
        case 'L':
        case 'C':
        case 'H':
          return color.toFormat('oklcha');
        default:
          return color;
      }
    },
    getChannelColorValue: function getChannelColorValue(channel) {
      if (channel === 'alpha') return this.parsedColor;
      if (this.parsedColor.getChannels().includes(channel)) return this.parsedColor;
      if (this.areaColor.getChannels().includes(channel)) return this.areaColor;
      return this.toChannelColorSpace(this.parsedColor, channel);
    },
    updateAreaValue: function updateAreaValue(x, y, element, event) {
      if (!element || this.disabled) return;
      var rect = element.getBoundingClientRect();
      var nx = clamp((x - rect.left) / rect.width, 0, 1);
      var ny = clamp((y - rect.top) / rect.height, 0, 1);
      var _this$areaAxes = this.areaAxes,
        xChannel = _this$areaAxes.xChannel,
        yChannel = _this$areaAxes.yChannel;
      var xRange = this.areaColor.getChannelRange(xChannel);
      var yRange = this.areaColor.getChannelRange(yChannel);
      var xValue = nx * (xRange.max - xRange.min) + xRange.min;
      var yValue = (1 - ny) * (yRange.max - yRange.min) + yRange.min;
      var next = this.areaColor.withChannelValue(xChannel, xValue).withChannelValue(yChannel, yValue);
      this.updateColor(next, event);
    },
    onAreaPointerDown: function onAreaPointerDown(event) {
      var _event$currentTarget$, _event$currentTarget;
      if (event.button !== 0 || this.disabled) return;
      (_event$currentTarget$ = (_event$currentTarget = event.currentTarget).setPointerCapture) === null || _event$currentTarget$ === void 0 || _event$currentTarget$.call(_event$currentTarget, event.pointerId);
      this.isAreaDragging = true;
      this.updateAreaValue(event.clientX, event.clientY, event.currentTarget, event);
    },
    onAreaPointerMove: function onAreaPointerMove(event) {
      if (!this.isAreaDragging) return;
      this.updateAreaValue(event.clientX, event.clientY, event.currentTarget, event);
    },
    onAreaPointerUp: function onAreaPointerUp(event) {
      var _event$currentTarget$2, _event$currentTarget2;
      if (!this.isAreaDragging) return;
      (_event$currentTarget$2 = (_event$currentTarget2 = event.currentTarget).releasePointerCapture) === null || _event$currentTarget$2 === void 0 || _event$currentTarget$2.call(_event$currentTarget2, event.pointerId);
      this.isAreaDragging = false;
      this.emitValueChangeEnd(event);
    },
    onAreaBlur: function onAreaBlur(event) {
      this.emitValueChangeEnd(event);
    },
    onAreaKeyDown: function onAreaKeyDown(event) {
      if (this.disabled) return;
      var _this$areaAxes2 = this.areaAxes,
        xChannel = _this$areaAxes2.xChannel,
        yChannel = _this$areaAxes2.yChannel;
      var xStep = this.areaColor.getChannelRange(xChannel).step;
      var yStep = this.areaColor.getChannelRange(yChannel).step;
      var next = this.areaColor;
      switch (event.key) {
        case 'ArrowRight':
          next = next.incChannelValue(xChannel, xStep);
          break;
        case 'ArrowLeft':
          next = next.decChannelValue(xChannel, xStep);
          break;
        case 'ArrowUp':
          next = next.incChannelValue(yChannel, yStep);
          break;
        case 'ArrowDown':
          next = next.decChannelValue(yChannel, yStep);
          break;
        default:
          return;
      }
      event.preventDefault();
      this.updateColor(next, event);
      this.emitValueChangeEnd(event);
    },
    getInputChannelValue: function getInputChannelValue$1(channel) {
      return getInputChannelValue(this.parsedColor, channel, this.getColorSpaceFormat(this.format));
    },
    getInputChannelRange: function getInputChannelRange$1(channel) {
      return getInputChannelRange(this.parsedColor, channel);
    },
    getChannelGradient: function getChannelGradient$1(channel, orientation) {
      return getChannelGradient(channel, this.getChannelColorValue(channel), orientation);
    },
    getChannelColor: function getChannelColor$1(channel) {
      return getChannelColor(this.getChannelColorValue(channel), channel);
    },
    openEyeDropper: function openEyeDropper(event) {
      var _this = this;
      if (this.disabled || typeof window === 'undefined' || !window.EyeDropper) return;
      var eyeDropper = new window.EyeDropper();
      eyeDropper.open().then(function (result) {
        _this.updateColor(parseColor(result.sRGBHex), event);
        _this.emitValueChangeEnd(event);
      })["catch"](function () {
        /* user cancelled */
      });
    }
  },
  computed: {
    areaColorSpace: function areaColorSpace() {
      var _this$format2;
      return ((_this$format2 = this.format) !== null && _this$format2 !== void 0 ? _this$format2 : 'hsba').startsWith('hsl') ? 'hsla' : 'hsba';
    },
    areaColor: function areaColor() {
      return this.parsedColor.toFormat(this.areaColorSpace);
    },
    areaAxes: function areaAxes() {
      var channels = this.areaColor.getChannels();
      return {
        xChannel: channels[1],
        yChannel: channels[2]
      };
    },
    areaStyles: function areaStyles() {
      var _this$areaAxes3 = this.areaAxes,
        xChannel = _this$areaAxes3.xChann